While building a big app interface, there are two options you can choose from:
There is a convenient and simple for understanding and developing micro-framework Webix Jet. It allows building very flexible and reliable complex web applications with little effort. To get the details on the use of the micro-framework, read the full guide on Webix Jet.
The rest of the article tells about logic-based app structuring and shows how to divide the application code into semantic blocks, which enhances its readability and simplifies editing of code, including the addition of some new functionality.
For better understanding, please study the following articles:
Here everything is about logic, structure and optimized coding. The basic principles are:
For samples, please look through the demo applications provided with this library.
The two main functions to construct the application are as follows:
In short, it look like this:
webix.ready(function(){
webix.ui({
view:"list", ... //any component including "layout"
});
});
Inside the webix.ui constructor you define the layout of your app, divide it into rows and columns and place UI component into it. Details here
Design here means the type of layout (Layout, Multiview, Accordion) as well as the UI components you've chosen for your application and the controls you insert into them.
Logic here means any functions you attach to the components and controls as well as those establishing links between components.
For clear code it's recommended to store logic and design separately in variables (let's call them logic and ui_scheme), or in case of really big apps - in separate files.
A three-file application might include:
You can store the whole application in one and the same index file, but the division of the script into logic and design sections is a must. Just put components in the ui_scheme variable and functions into the logic variable.
HTML for such a file looks like this:
<!DOCTYPE html>
<head>
<!--library files-->
<link rel="stylesheet" href="../webix.css" type="text/css"
media="screen" charset="utf-8">
<script src="../webix.js" type="text/javascript" charset="utf-8"></script>
<!--application files-->
<script type="text/javascript" src='./logic.js'></script>
<script type="text/javascript" src='./app.js'></script>
<link rel="stylesheet" type="text/css" href="./styles.css">
</head>
<body>
<script> ... place for your app
</script>
</body>
</html>
The app is placed into the body of the document embraced by script tags. Everything lies within the webix.ready function:
webix.ready(function(){
webix.ui(ui_scheme);
logic.init(); // reference to the logic section
});
webix.ready(function(){
webix.ui(ui_scheme);
webix.ui(ui_window);
logic.init(); // reference to the logic section
webix.i18n.parseFormatDate = webix.Date.strToDate("%m/%d/%Y");
});
The layout, as well as other components, is placed inside the webix.ui() constructor. In the snippet above, we've created two variables - ui_scheme and ui_window - and put them inside the constructor to store these components.
The variables above are declared outside the webix.ui constructor, either in the same file within the webix.ready function, or (better) in a separate app.js file.
The names that you give to the variables shouldn't be too long.
var ui_scheme = {
rows:[grid, footer],
maxWidth:800
};
Grid and footer are variables declared separately and placed into the two-row layout. This is a rather simple application.
It's recommended that components with options (tabbar, toolbar), forms, non-visible dataCollections should be included into the main app in the form of variables declared beforehand.
Any component or several connected components can be stored in the variable that is later on included into the main layout variable (here:ui_scheme) that is placed into the webix.ui constructor.
A logic block is stored in a logic variable declared either in a separate logic.js file (better), or somewhere outside the webix.ui constructor but within the webix.ready function.
The logic block includes definitions of functions called during initialization of a component and other functions used in the application.
The init() function includes:
var logic = {
init: function(){
// ties between views
$$("form1").bind($$("datatable1"));
$$("datatable1").sync($$("list1"));
// built-in functions
$$("list1").attachEvent("onAfterSelect", function(id){
$$("datatable1").select(id);
});
// custom functions
$$("datatable1").attachEvent("onItemClick", logic.delete_row);
}
}
For custom functions attached either within the component/control body or within the init block (see above) use the following reference:
logic.function_name // since they are placed into the "logic" var
Outside the initialization block, you should define all the custom functions attached to the components of the application, either in the init block or within their bodies:
delete_row: function(){
$$("datatable1").remove(id);
}
Sometimes the variable that stores the structure of main layout (ui_scheme) is included into the init function of the logic block and the whole script in the index file contains just a line:
ui.html
logic.init();
logic.js
var logic = {
init:function(){
webix.ui(ui_scheme);
// some additional logic defined outside the init block (if needed)
logic.init_filtering();
}
}
It goes without saying that a long list of custom styles is taken out into a separate file that is included into an index file with the help of a link in its head section (together with library styles).
Images for the application as well as custom icons (except for built-in ones) are stored in a separate folder, as a rule, in the same directory as the index file or somewhere nearby.
Back to top