Beginner

Знакомство с Webix

Перед прочтением статьи рекомендуем ознакомиться с тем, как:

установить Webix и подготовить рабочую среду
отлаживать код на Webix

И, конечно же, не забудьте об интерактивных уроках - практической части в освоении Webix.

Компоненты

Webix содержит более 100 компонентов:

UI компоненты, такие как Datatable, Chart, List. etc.
UI контролы. Например, поля, кнопки или combo boxes.
Комплексные решения (PRO edition)
UI расширения для интеграции с другими инструментами разработки

Все они наследуются от ядра View. Создать компонент можно с помощью конструктора webix.ui, передав в неё JSON-конфигурацию виджета:

var table = webix.ui({
  view:"datatable",
  data:grid_data,
  autoConfig:true
});

Related sample: Basic Layout

Кроме того, существуют неотображаемые коллекции Data и Tree. Они служат для хранения данных и операций с ними на стороне клиента.

var records = new webix.DataCollection({
    url:"some/records"
});
 
table.sync(records); // синхронизирует данные (records) с Datatable

Создание компонента

Чтобы создать компонент на странице, укажите его имя и другие необходимые параметры в конструкторе:

webix.ui({
    view:"list", // имя компонента, который вы хотите создать
    id:"mylist", // уникальный ID, необязательный параметр
    // другие параметры
});

Экземпляр компонента

Чтобы получить экземпляр уже созданного компонента, необходимо передать его ID методу $$:

var list = $$("mylist");
// или через ключевое слово webix
var list = webix.$$("mylist");

Функция webix.ui также возвращает экземпляр компонента:

var list = webix.ui({ view:"list" });

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

// принудительная отрисовка 
list.refresh();

Комбинирование компонентов

Webix предлагает несколько вариантов архитектуры расположения компонентов:

вертикально или горизонтально (формируя абстрактную сетку);
панели, которые можно разворачивать и сворачивать;
в виде группы ячеек, где в момент времени отображается только одна ячейка;

Мы рекомендуем описывать части UI в отдельных переменных и затем обращаться к ним в общей функции webix.ui:

Вертикальная разметка

var simple_config1 = {..};
var simple_config2 = {..};
var simple_config3 = {..};
 
webix.ui({
    rows:[
        simple_config1,
        simple_config2,
        simple_config3,
    ]
})

Обратите внимание, что компоненты Windows и Popup располагаются поверх лейаута, поэтому для них необходимы отдельные вызовы webix.ui.

Контейнеры для компонентов

По умолчанию Webix компоненты добавляются в тело документа, если другой HTML элемент не выступает в качестве контейнера.

Чтобы задать контейнер для компонента, необходимо:

1) Создать div элемент и присвоить ему ID;
2) Передать этот ID в свойство компонента container:

<body>
    <div id="dataA" style="width:500px;height:150px;"></div> 
    <script>
        webix.ui({
            view:"dataview",
            container:"dataA",
            // другие параметры
        });
    </script>         
</body>

Однако существуют некоторые ограничения, касающиеся HTML контейнеров для Webix компонентов:

внутри HTML элемента может находиться только самый верхний родительский компонент. Вложенные элементы формируют собственную разметку;
размер компонента привязан к начальному размеру контейнера и не подстраивается под изменения размера окна браузера.

Для сохранения отзывчивости мы рекомендуем избегать использования HTML контейнеров при разработке одностраничных приложений на Webix.

API компонентов

У каждого компонента есть определённый набор методов, свойств и событий, как общих, так и специфических:

properties - параметры конфигурации, которые определяют поведение и внешний вид компонента. Включают имя, высоту и ширину.

{ view:"list", id:"mylist", width:200, data:list_data }

methods - действия, доступные компоненту. Вызываются через экземпляр компонента.

$$("mylist").select(1); //selects the record which ID equals 1

events - маркеры для действий внутри компонента. Они генерируются экземпляром и могут быть обработаны:

$$("mylist").attachEvent("onAfterSelect", function(id){
    console.log(id); // выводит ID выбранного элемента
});

В справочнике API находится информация о всех доступных API компонентов.

Вспомогательные методы

Помимо основного функционала для компонентов, у Webix есть полезные методы для:

Ajax операций (работа с сервером)
Операций с датами
Локализации
Кроссбраузерных операций с DOM

Разработка одностраничных приложений

Если вы планируете разрабатывать крупное приложение с большим количеством компонентов, контролов и функций, советуем познакомиться с Webix Jet - нашим MV фреймворком для лучшей организации и производительности Webix кода. С Webix Jet у вас есть возможность:

разделения внешнего вида и логики компонента;
работы с клиентскими моделями данных;
работы с плагинами для локализации, сессии и навигации.

Использование Webix Jet необязательно. Вы можете разрабатывать на чистом Webix, однако в этом случае архитектуру приложения необходимо продумать самостоятельно.

Наверх