Manager
The manager can be used to follow application flows when using the website.
It defines an FSM (Final State Machine) which switches layouts under user interactions.
Usually in an application, you have a login panel, then a main page, sometimes error
status etc ... The layout manager will help you to switch between these views ...
Example
// Defines there the point in the DOM where to insert the manager,
// and the first layout to display
var aLayoutManager = new LayoutManager("#MANAGERINSERT","HOME");
...
//Here write dependent functions
...
// Parses the login layout
var aLayout = aLayoutParser.load("./res/login.json");
aLayout.tag["register"].element.onClick(registerFunction);
aLayout.tag["login"].element.onClick(validateFunction);
aLayoutManager.addLayout("LOGIN",aLayout); // <= Adding the layout to the manager
// Parse the main layout
var aDataTree = \{
user : \{
name : "JBV",
board : "NCE"
}
};
var aMainLayout = aLayoutParser.load("./res/main.json",aDataTree);
aMainLayout.tag["disconnect"].element.onClick(disconnectFunction);
aLayoutManager.addLayout("MAIN",aMainLayout); // <= Adding the layout to the manager
// Init FSM
aLayoutManager.addFSMEvent("LOGIN","MAIN","CONNECTED");
aLayoutManager.addFSMEvent("MAIN","LOGIN","DISCONNECTED");
aLayoutManager.start(); // Start the layout manager
To call the FSM on an event, you can use the function pushEvent([EventName]) on the layout manager.
For example we can define the validateFunction as :
function validateFunction()\{
...
// Some code to validate that the user is connected
...
aLayoutManager.pushEvent("CONNECTED"); // <= calls the layout manager to switch the view
}