Beginner

Выбор лейаута для приложения

Базовые принципы

Перед тем как использовать компоненты билиотеки в своём проекте, вам необходимо продумать их расположение относительно страницы и друг друга. В вашем распоряжении 10 лейаутов, в которые можно поместить другие компоненты.

Для размещения компонентов рядом друг с другом (по умолчанию все элементы видны на странице) присмотритесь к следующим лейаутам:

Лейауты для компонентов, которые можно скрывать/показывать по очереди:

Лейауты, поддерживающие драг-н-дроп внутренних компонентов:

Любой из лейаутов можно поместить в другой.

Layout

Layout позволяет поделить страницу на ряды (rows) и колонки (columns), в которые можно поместить другие компоненты. Все компоненты видны на странице сразу.

Указывать имя лейаута необязательно. Достаточно задать rows или columns (cols) и поместить в них желаемые компоненты:

webix.ui({
    rows:[
     { type:"header", template:"Header" }, // любой компонент
     { cols:[
        { view: "list", ... },
        { view: "chart", ... }
    ]
});

Related sample:  Layout and Resizer

Form

Внутри Form обычно располагаются контролы (поля, комбо-боксы, кнопки), которы можно организовать вертикально (rows) или горизонтально (cols). Form отличается от вышеупомянутого Layout наличием другого API для управления контролами, а также дополнительным внутренним отступом (паддингом) для разделения контролов и остальной части приложения.

Форме необходимо указать имя компонента - "form" (в объекте конфигурации).

webix.ui({
    view:"form",
    elements:[ // алиас для указания рядов
     { view:"text"}, // любой контрол
     { cols:[
        { view:"button", value:"Ok"},
        { view:"button", value:"Cancel"}
    ]
});

Related sample:  Form: Basic

  • Если поместить элементы формы в массив elements, они будут расположены вертикально (rows);
  • Если элементам формы задать свойство name, вы сможете использовать API формы для чтения или установки значений всех контролов сразу.

Ознакомьтесь с доступными в библиотеке Контролами.

Более подробную информацию о Form читайте в соответствующем разделе документации.

Toolbar

Toolbar вмещает в себя различные контролы (ярлыки, кнопки, иконки), которые располагаются вертикально (rows) и горизонтально (cols). В отличие от Layout контролы тулбара отделены от остальной части приложения.

Компоненту необходимо задать имя - "toolbar" (в объекте конфигурации).

webix.ui({
    view:"toolbar",
    elements:[ // алиас для указания колонок
     { view:"label", label:"My App"}, // любой компонент
     { }, //spacer
     { view:"label", label:"User"},
     { view:"button", value:"Settings"}
    ]
});

Related sample:  Toolbar: Dark

  • Если поместить элементы тулбара в массив elements, они будут расположены вертикально (rows);
  • Если элементам тулбара задать свойство name, вы сможете использовать API тулбара для чтения или установки значений всех контролов сразу.

Ознакомьтесь с доступными в библиотеке Контролами.

Более подробную информацию о Toolbar читайте в соответствующем разделе документации.

Accordion

У компонентов Accordion есть специальные панели, которые можно сворачивать и разворачивать по умолчанию или же при клике по хедеру. В коде Accordion состоит из элементов, каждый из которых помещён в отдельный ряд или колонку с хедером:

webix.ui({
    view:"accordion", rows:[
        { view:"accordionitem", header:"Item1", body:{
           view:"list" // любой компонент
        }},
        { view:"accordionitem", header:"Item2", body:{...}}
    ]
});

Related sample:  Accordion: Layout with headers

Имя для этого лейаута и его компонентов можно не задавать. Если вы укажите ряды и колонки со свойствами body и header, вы автоматически получите accordion с его элементами:

webix.ui({
    rows:[
        { header:"Item1", body:{...}},
        { header:"Item2", body:{...}}
    ]  
});

Более подробную информацию о Accordion читайте в соответствующем разделе документации.

ScrollView

ScrollView позволяет прокручивать весь контент, который содержит будь то лейаут или отдельный компонент внутри body:

webix.ui({
    view:"scrollview",
    body:{
        rows:[
          { view:"chart"}, // любой компонент
          { ...}
        ]
    },
    scroll:"y" // направление скрола
});

Related sample:  Scrollview: Templates with HTML content

Более подробную информацию о ScrollView читайте в соответствующем разделе документации.

Carousel

Элементы внутри Carousel сменяют друг друга при клике по соответствующим контролам или при свайпе (на сенсорных устройствах). Лейаут позволяет организовтаь внутренние компоненты вертикально (rows) или горизонтально (columns), формируя таким образом направление движения:

webix.ui({
    view:"carousel",
    cols:[
        { view:"chart"}, // любой компонент
        {...}
    ]
});

Related sample:  Carousel: Basic

Более подробную информацию о Carousel читайте в соответствующем разделе документации.

Multiview

Multiview это лейаут с несколькими скрытыми компонентами, которые можно показывать с помощью специальных контролов.

Имя лейаута можно не указывать. Достаточно поместить желаемые компоненты в cells:

webix.ui({
    view:"multiview", // необязательно
    cells:[
        { view:"datatable"}, // любой компонент
        {...}
    ]
});

Related sample:  Multiview with Tabbar

После того, как вы определили компоненты, необходимо задать логику переключения между ними. Это можно сделать с помощью Tabbar или Segmented для горизонтального меню, или List - для вертикального.

Tabview

Это микс Multiview и Tabbar. Вы можете использовать этот компонент для создания Multiview с уже готовым переключателем:

webix.ui({
    view:"tabview",
    cells:[
        { header:"Tab1", body: {
            view:"dataview" // любой компонент
        }},
        { header:"Tab2", body:{...}}
    ]
});

Related sample:  Tabview: Basic

Читайте подробнее о Multiview и Tabview.

Portlets

Portlets умеет хранить компоненты, который можно перетаскивать. Элементы Portlets можно организовать в ряды (rows) и колонки (columns):

webix.ui({
    rows:[
        { view:"portlet", body:{
            template:"row 1" // любой компонент
        }},
        { view:"portlet", body:{...}}
    ]
});

Related sample:  Portlet: Reordering

Более подробную информацию о Portlets читайте в соответствующем разделе документации.

Dashboard

Dashboard позволяет размещать компоненты на абстрактной сетке и определять их изначальные местоположение и размеры внутри неё. Конечный пользователь может перемещать компоненты, а также менять их размеры, используя драг-н-дроп.

webix.ui({
    view:"dashboard", 
    cells:[
        { view:"panel", x:0, y:0, body:{
            view:"chart" // любой компонент
        }},
        { view:"panel", x:1, y:0, body:{...}}
    ]
});

Related sample:  Dashboard:Basic

Более подробную информацию о Dashboard читайте в соответствующем разделе документации.

Изолированные ID внутри лейаутов

Основные правила работы с ID описаны здесь.

Эта особенность касается каждого лейаута, описанного выше. Она позволяет использовать одни и те же ID для компонентов в разных секциях лейаута, сохраняя при этом возможность доступа к необходимому компоненту без окольных путей.

Секции лейаута необходимо задать свойство isolate:

webix.ui({
   cols:[
     { id:"col1", isolate:true, rows:[ 
        { view:"list", id:"mylist" },
     ]},
     { id:"col2", isolate:true, rows:[
        {view:"list", id:"mylist" },
     ]}
   ]
});

Компонент list использован в примере дважды. Обратите внимание на свойство isolate, значение которого true. Чтобы обратиться к какому-либо из списков, используйте ID родительской секции лейаута:

var list1 = $$("col1").$$("mylist");
var list2 = $$("col2").$$("mylist");
 
// иначе вы получите последний компонент
var list2 = $$("mylist");

Что дальше

Наверх