HTML Layouts с Webix

В чем их польза

В HTML5 имеется множество способов размещения элементов на странице. Однако, во время создания веб-приложений, мы по-прежнему можем столкнуться с задачами, решить которые только с помощью чистого HTML и CSS невозможно. К примеру, существует проблема использования процентных и фиксированных значений в одной строке. Еще одна задача, не дающая покоя разработчикам, — это создание столбцов одной высоты. Довольно многообещающим решением таких проблем выглядит спецификация CSS Grid, однако, на данный момент она находится в стадии разработки и реализована только в Internet Explorer. Если же от лайаута (layout) вам нужно добиться большей гибкости прямо сейчас, вам помогут Webix Layouts.

Расширяя возможности HTML Layouts

Использование Webix для размещения элементов в HTML начинается с простого HTML кода. Давайте посмотрим на код, приведенный ниже. Он выглядит как обычная HTML-разметка, дополненная лишь data-тегами, которые определяют роли HTML-элементов:

<div data-view="cols">
    <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 кода:

 webix.ready(function(){ webix.markup.init(); });

Данная строка инициализирует HTML-разметку на странице. Результат работы кода будет следующим:

Column 1
Column 2
Column 3

Ничего особенного, просто 3 столбца в одной строке. Давайте приукрасим приведенный выше HTML код. Посмотрим, что получилось:

<div data-view="cols">
    <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, а их список можно найти тут. Список дополнительных атрибутов вы можете найти в документации. Результат работы приведенного выше кода вы можете увидеть в следующем демо.

Column 1
Column 2
Column 3

Конечно, вы не ограничены лайаутом, состоящим только из столбцов. Вы вполне можете задать лайаут, состоящий из строк. Для создания необходимой схемы пользовательского интерфейса вы можете комбинировать лайауты, состоящие из столбцов и из строк. Посмотрите на следующий пример:

<div data-view="cols" data-type="wide">
    <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 код создаст следующий лайаут:

Row 1
Row 2
Column 2
Column 3

Tabbar и Accordion

При использовании Webix для задания схемы расположения элементов пользовательского интерфейса в приложении, нам необязательно размещать элементы рядом друг с другом. Webix предлагает более сложные модели расположения элементов на странице. Две самые общие из них — это таббар и аккордеон. Оба этих виджета легко создаются подобно тому, как мы задавали конфигурацию схем, приведенных выше.

Таким образом, для создания таббара мы можем использовать следующую разметку:

<div data-view="tabview">
  <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 тегов для определения содержимого вкладок. Готовый таббар приведен в демо ниже:

Content 1
Content 2

Конфигурация аккордеона будет точно такой же, что и у таббара. Просто измените имя data-view тега на “accordion”:

<div data-view="accordion" data-multi="mixed">
  <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>

Созданный аккордеон представлен на демо ниже:

Content 1
Content 2

Компоненты Webix в HTML

Способность Webix интегрироваться с HTML не ограничена только использованием лайаутов. Вы можете задавать любые виджеты Webix в HTML: tree, chart, datatable, calendar, chart и т.д. Важно то, что вам не придется больше тратить уйму времени на написание сложного кода. Если вы захотите создать на странице календарь, просто задайте атрибуту data-view значение “calendar”. Код ниже создаст календарь рядом с темплейтами:

  <div data-view="cols">
        <div data-view="template"> Column 1 </div>
        <div data-view="template"> Column 2 </div>
        <div data-view="calendar"></div>
    </div>

Посмотрите демо, чтобы увидеть результат работы кода:

Column 1
Column 2

Подводя итоги

Библиотека компонентов 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 будут играть главную роль. Оставайтесь с нами.