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 four 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 to put other components. All of them will be visible within the same page at the same time.
Similar functionality you can find with a form and toolbar components that 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 lib.
Mutliview, 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 inited 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 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 view name.
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 body and header into layout row/column - you'll automatically get accordion with accordion items without direct initialization.
webix.ui({
rows:[
{header:"Item1", body:{ ...}},
{header:"Item2", body:{...}}
]
});
Scrollview is 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 mutliview 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 multiview, if you add tabs to cells within one and the same constructor - it will turn into 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 assignement can are described here.
The features is true to all the layout types described above. It allows for using the same IDs for components lying in different layout sections while preserving the ability to access the needed component without ambiguity.
Layout section should be equipped with an 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" but in different layout columns with isolate functionality switched on.
To address such lists separately, use yhe ID of its parent layout section:
var list1 = $$("col1").$$("mylist");
var list2 = $$("col2").$$("mylist");
//Otherwise, you'll get the last view
var list2 = $$("mylist");