Before using library components you need to draw the scheme of their arrangement and define the way they would be positioned towards each other. It can be done with the help of five interface-building components, namely:
All the interface-building components inherit from view, a base class or, simply put, a container where you ought to place the component before working with it.
Layout allows dividing a page into rows and columns to organize sections for placing other components. All of them will be visible within the same page at the same time.
The Form and Toolbar components have similar functionality. These components house controls (input fields, checkboxes, buttons, etc.) organized under the same pattern as layout (rows and cols). See Controls Guide to learn the variety of controls offered by this library.
Multiview, Carousel, Accordion and ScrollView allow presenting different views in one and the same area when you are short of space. They differ in the ways of switching between these views:
All layout types are initialized within the webix.ui constructor and can be nested into each other:
webix.ui({
view:"layout", rows:[
{...}, //any component
{...}
]
});
If you just divide the page into rows or columns (cols), you'll get a standard layout to display the components side by side.
webix.ui({
rows:[
{...}, //any component
{cols:[
{...},
{...}
]
});
Form helps divide the page into rows and cols to create a layout for controls. Unlike layout, this component should be initialized directly, using the name of the view.
webix.ui({
view:"form",
elements:[
{...}, //any control
{cols:[
{...},
{...}
]
});
If form controls are placed into the elements array, they will be arranged in rows.
More about Form.
Accordion consists of items each of which takes a separate row or column with a header and can be collapsed and expanded.
webix.ui({
view:"accordion", rows:[
{view:"accordionitem", header:"Item1", body:{ ...}},
{header:"Item2", body:{...}}
] //two ways of accordion item initialization are equal
});
If you place an array of objects with a body and a header into a row or a column of a layout, you'll automatically get an accordion with accordion items without direct initialization.
webix.ui({
rows:[
{header:"Item1", body:{ ...}},
{header:"Item2", body:{...}}
]
});
ScrollView is a standard layout with a scrollbar. It can house any HTML content, any layout or component in its body:
Scrollview
webix.ui({
view:"scrollview",
body:{
rows:[{...}, {...}]
},
scroll:"y" // scrolling direction
});
More about Scrollview.
Carousel rows and cols are shown in turn, one by one, on clicking dedicated buttons or swiping on touch devices:
Carousel
webix.ui({
view:"carousel",
cols:[
{...},
{...}
]
});
More about Carousel
Multiview is a layout with multiple hidden views that are shown in turn with one view being always visible.
webix.ui({
view:"multiview", //optional line
cells:[
{...},
{...}
]
});
Note that for multiview you should provide the logic for switching between views. It can be a tabbar or a segmented button.
If you just define cells, you'll automatically get a multiview. If you add tabs to cells within one and the same constructor, it will turn into a tabview. In this case, a switching button is not needed as tabs perform this function.
webix.ui({
view:"tabview", //optional line
tabs:[
{id:"1", ...},
{id:"2", ...}
],
cells:[
{id:"1", ...},
{id:"2", ...}
]
});
More about Multiview and Tabview.
Basic rules of ID assignment are described here.
This feature is true for all the layout types described above. It allows using the same IDs for components in different layout sections, while preserving the ability to access the needed component without ambiguity.
Layout section should be equipped with the isolate property:
webix.ui({
cols:[
{ id:"col1", isolate:true, rows:[
{ view:"list", id:"mylist" },
]},
{ id:"col2", isolate:true, rows:[
{view:"list", id:"mylist" },
]}
]
});
The list view is used twice in the "app" in different columns of the layout with the isolate functionality switched on.
To address such lists separately, use the ID of its parent layout section:
var list1 = $$("col1").$$("mylist");
var list2 = $$("col2").$$("mylist");
// Otherwise, you'll get the last view
var list2 = $$("mylist");