В чем их польза
В HTML5 имеется множество способов размещения элементов на странице. Однако, во время создания веб-приложений, мы по-прежнему можем столкнуться с задачами, решить которые только с помощью чистого HTML и CSS невозможно. К примеру, существует проблема использования процентных и фиксированных значений в одной строке. Еще одна задача, не дающая покоя разработчикам, — это создание столбцов одной высоты. Довольно многообещающим решением таких проблем выглядит спецификация CSS Grid, однако, на данный момент она находится в стадии разработки и реализована только в Internet Explorer. Если же от лайаута (layout) вам нужно добиться большей гибкости прямо сейчас, вам помогут Webix Layouts.
Расширяя возможности HTML Layouts
Использование Webix для размещения элементов в HTML начинается с простого HTML кода. Давайте посмотрим на код, приведенный ниже. Он выглядит как обычная HTML-разметка, дополненная лишь data-тегами, которые определяют роли HTML-элементов:
<div data-view="template"> Column 1 </div>
<div data-view="template"> Column 2 </div>
<div data-view="template"> Column 3 </div>
</div>
Чтобы “оживить” данную конфигурацию, необходимо подключить на страницу файлы webix.js и webix.css, а также добавить следующую строку JS кода:
Данная строка инициализирует HTML-разметку на странице. Результат работы кода будет следующим:
Ничего особенного, просто 3 столбца в одной строке. Давайте приукрасим приведенный выше HTML код. Посмотрим, что получилось:
<div data-view="template" data-width="200"> Column 1 </div>
<div data-view="resizer"></div>
<div data-view="template"> Column 2 </div>
<div data-view="template"> Column 3 </div>
</div>
Мы зафиксировали ширину первого столбца, а также добавили resizer между первым и вторым столбцами. Чтобы задать значения для элементов Webix, мы используем атрибуты, которые начинаются с “data-”. Атрибут view указывает именно на компонент Webix, а их список можно найти тут. Список дополнительных атрибутов вы можете найти в документации. Результат работы приведенного выше кода вы можете увидеть в следующем демо.
Конечно, вы не ограничены лайаутом, состоящим только из столбцов. Вы вполне можете задать лайаут, состоящий из строк. Для создания необходимой схемы пользовательского интерфейса вы можете комбинировать лайауты, состоящие из столбцов и из строк. Посмотрите на следующий пример:
<div data-view="rows" data-type="wide">
<div data-view="template" data-width="200"> Row 1 </div>
<div data-view="resizer"></div>
<div data-view="template" data-width="200"> Row 2 </div>
</div>
<div data-view="resizer"></div>
<div data-view="template"> Column 2 </div>
<div data-view="template"> Column 3 </div>
</div>
В данном коде атрибут, имеющий значение “rows”, соответствует вертикальному лайауту, а атрибут со значением “cols” — горизонтальному лайауту. Таким образом, приведенная разметка вкладывает вертикальный лайаут внутрь горизонтального. Такой подход позволяет создавать лайаут любой сложности, посредством вкладывания одного лайаута в другой. Приведенный HTML код создаст следующий лайаут:
Tabbar и Accordion
При использовании Webix для задания схемы расположения элементов пользовательского интерфейса в приложении, нам необязательно размещать элементы рядом друг с другом. Webix предлагает более сложные модели расположения элементов на странице. Две самые общие из них — это таббар и аккордеон. Оба этих виджета легко создаются подобно тому, как мы задавали конфигурацию схем, приведенных выше.
Таким образом, для создания таббара мы можем использовать следующую разметку:
<div data-view="body" data-header="Tab 1">
<div data-view="template"> Content 1 </div>
</div>
<div data-view="body" data-header="Tab 2">
<div data-view="template"> Content 2 </div>
</div>
</div>
Как видите, данная разметка подобна коду, используемому для создания обычного лайаута. Мы добавили дополнительные теги, чтобы задать хедеры табов, а также использовали различные значения data-view тегов для определения содержимого вкладок. Готовый таббар приведен в демо ниже:
Конфигурация аккордеона будет точно такой же, что и у таббара. Просто измените имя data-view тега на “accordion”:
<div data-view="body" data-header="Tab 1">
<div data-view="template"> Content 1 </div>
</div>
<div data-view="body" data-header="Tab 2">
<div data-view="template"> Content 2 </div>
</div>
</div>
Созданный аккордеон представлен на демо ниже:
Компоненты Webix в HTML
Способность Webix интегрироваться с HTML не ограничена только использованием лайаутов. Вы можете задавать любые виджеты Webix в HTML: tree, chart, datatable, calendar, chart и т.д. Важно то, что вам не придется больше тратить уйму времени на написание сложного кода. Если вы захотите создать на странице календарь, просто задайте атрибуту data-view значение “calendar”. Код ниже создаст календарь рядом с темплейтами:
<div data-view="template"> Column 1 </div>
<div data-view="template"> Column 2 </div>
<div data-view="calendar"></div>
</div>
Посмотрите демо, чтобы увидеть результат работы кода:
Подводя итоги
Библиотека компонентов Webix предназначена для создания сложных пользовательских интерфейсов. Однако, это не значит, что вам придется изобретать сложный код для того, чтобы использовать Webix в простых приложениях. Приведенные выше примеры доказывают, что Webix может использоваться для упрощения HTML-разметки страницы, оставляя JavaScript код за сценой.
Преимущества данного подхода:
- декларативное описание интерфейса;
- возможность использовать виджеты Webix вместе с кастомным HTML кодом;
- способность Webix работать с MVC фреймворками клиентской стороны (Backbone.js, AngularJS и т.д.).
Пара незначительных недостатков:
- некоторые сложные параметры нельзя задать посредством только HTML, в таком случае использование JS кода неизбежно;
- невозможно прикрепить обработчики к событиям прямо в HTML разметке (хотя, возможно, это вовсе не недостаток).
Тем не менее, огромный потенциал использования HTML вместе с Webix очевиден. С Webix простая HTML-разметка позволяет получить на странице самые разные элементы, что позволяет использовать возможности JS кода без явного его применения.
В Webix 1.2 мы сфокусируемся на MVC фреймворках клиентской стороны, таких как Backbone.js и AngularJS, где HTML Layouts будут играть главную роль. Оставайтесь с нами.
