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

  • 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 a 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 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

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

More about Accordion.

ScrollView

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

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

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 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");

What's Next

Back to top