1 . Create a simple html-page. Specify HTML5 doctype for it.
2 . Install Webix for your future app. There can be several ways:
Include 2 Webix files (webix.js and webix.css) directly from Webix CDN
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="http://cdn.webix.com/edge/webix.css" type="text/css">
<script src="http://cdn.webix.com/edge/webix.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript" charset="utf-8">
// here your app will "take shelter"
</script>
</body>
</html>
If you need to get one of the older Webix versions, you shoud include the necessary number of version into the links to the code files:
<link rel="stylesheet" href="http://cdn.webix.com/2.2/webix.css" type="text/css">
<script src="http://cdn.webix.com/2.2/webix.js" type="text/javascript"></script>
Install local Webix files via Nuget or Bower package managers by a single command. You don't need to download anything.
NuGet
nuget install Webix
//If you use Microsoft Visual Studio, execute this from Package Manager Console
install-package Webix
Bower
bower install webix
Download and unzip the library to the necessary directory. Include webix.js and webix.css files into the document's head section.
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="../../codebase/webix.css" type="text/css">
<script src="../../codebase/webix.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript" charset="utf-8">
... // here your app will "take shelter"
</script>
</body>
</html>
3 . The apps are to be placed between the script tags. The components you create are initialized inside the view.
Just a clean page
webix.ui({
// components
});
Here you should be aware of the following:
webix.ready(function(){
webix.ui({
....
});
});
Next we'll declare base elements, create the app layout and finally nest it with ui components.
4 . At this step we'll specify an HTML container for the app with the following properties:
<style>#app_here{
width:1000px; height:400px; margin:20px;
}
</style>
...
<div id="app_here"></div>
Then we'll create a layout structure which will be put into the above created container:
webix.ui({
container:"app_here",
view:"layout", // optional
rows:[
{...},
{ view:"layout", // optional
cols:[
{...},
{...},
{...}
]}
]
});
As the value of the container property the id of HTML element should be specified.
Note that you can easily omit the view:"layout" lines and start setting rows and columns at once.
5 . Now we can insert some components into the layout view.
We'll put a template that will serve as the app's header into the 1st row.
webix.ui({
container:"app_here",
rows:[
{ view:"template", type:"header", template:"My App!"},
{ cols:[
{...},
{...},
{...}
]}
]
});
6 . It's high time to place components into the 2nd row. The 3 columns of the 2nd row will be occupied by Tree and DataTable components and a resizer line between them:
webix.ui({
container:"app_here",
rows:[
{ type:"header", template:"My App!" },
{ cols:[
{ view:"tree", id:"mytree", gravity:0.3, select:true, data:tree_data },
{ view:"resizer" },
{ view:"datatable", id:"mydatatable", autoConfig:true, data:small_film_set }
]}
]
});
Let's look at the above code in detail:
We use JSON in the sample, so the items of the tree_data dataset look like this:
[
{ id: "1", type: "folder", value: "Music", css:"folder_music", data:[..child items..]},
...
]
The grid_data dataset includes data items in the next mode:
[
{ id:1, title:"The Shawshank Redemption", year:1994, votes:678790, rating:9.2, rank:1},
...
]
7 . At the last step we'll illustrate the usage of ids. In order to refer to a component the following structure should be used - $$("id").
We will use the Tree method open to open the tree branches and the DataTable method select to select the 1st item of the datatable.
webix.ui({
container:"app_here",
rows:[
{ type:"header", template:"My App!" },
{ cols:[
{ view:"tree",id:"mytree", gravity:0.3, select:true, data:tree_data },
{ view:"resizer" },
{ view:"datatable", id:"mydatatable", autoConfig:true, data:grid_data }
]}
]
});
$$("mytree").open(1);
$$("mytree").open(2);
$$("mydatatable").select(1);
The ready app is presented in the following picture:
You can check the live demo and play with code by the next link http://webix.com/snippet/eadf0190
See also
Back to top