Beginner

Building App Architecture

Basic principles

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 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.

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:

  • for multiview cells you need a dedicated button to switch between them;
  • accordion items are expanded and collapsed on clicking their headers;
  • scrollview allows scrolling through the whole content it houses;
  • carousel panes change in turn by clicking on them or swiping (on touch devices).

All layout types are initialized within the webix.ui constructor and can be nested into each other:

webix.ui({
    view:"layout", rows:[
     {...}, //any component
     {...}
    ]
});

Layout

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:[
        {...},
        {...}
    ]
});

More about Layout.

Form

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

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:{...}}
    ]  
});

More about Accordion.

Scrollview

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

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

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 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.

Isolating IDs inside Layouts

Basic rules of ID assignment are described here.

This feature is true for all the layout types described above. It allows of 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 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" but in different columns of the layout with 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");

What's Next

Back to top