Webix: упрощаем разработку интерфейса web-приложения

Webix - удобный фреймворк для создания интерфейсов web-приложения. Дополнительным плюсом является онлайн инструмент для проектирования прототипов.

В данной публикации описан один способ, упрощающий создание одностраничного интерфейса web-приложения на базе компонентов Webix. В основу способа заложены следующие идеи:

интерфейс имеет две области - статическую и динамическую. В ходе работы с интерфейсом можно переназначать динамическую область.
в статической области расположен активный элемент (меню), который, в зависимости от выбранного значения, управляет загрузкой отдельных элементов интерфейса в динамическую область. Активные элементы можно переназначать "на лету".
после элементов в динамическую область может быть загружен и выполнен js-файл с произвольным кодом.

Посмотреть несколько примеров интерфейса web-приложения, соотвествующий указанной концепции можно здесь

Структура web-приложения

Чтобы реализовать интерфейс, web-приложение должно иметь следующую структуру:

index.html - html-страница отображающая интерфейс
init.conf - файл параметров интерфейса
init.js - скрипт инициализации интерфейса
elements - каталог, хранящий файлы с элементами интерфейса
codebase - каталог с кодом фреймворка webix, доступный для скачивания, другими js библиотеками и таблицами стилей

index.html

Главная страница web-приложения. Это обычный html файл, подключающий необходимые для работы скрипты, таблицы стилей, содержащий мета-данные и пр. В обязательном порядке должны подключаться

webix.js
waitsync.js
jquery.js
object-traverse.min.js
main_webix.css
init.js

Конечно же, для конкретного web-приложения дополнительно могут быть подключены дополнительные библиотеки и стили.

Особенность index.html - тег <body> - пустой. Минимальный код файла index.html будет выглядеть примерно так

<html>
  <head>
       <META content="text/html; charset=utf-8" http-equiv="Content-Type">
      <!-- Библиотеки и стили, обязательные для подключения -->
      <script type="text/javascript" src="codebase/webix.js"></script>
      <script type="text/javascript" src="codebase/waitsync.min.js"></script>
      <script type="text/javascript" src="codebase/jquery-2.1.4.min.js"></script>
      <script type="text/javascript" src="init.js"></script>
      <script type="text/javascript" src="codebase/object-traverse.min.js"></script>
      <link rel="stylesheet" type="text/css" href="codebase/skins/main_webix.css">

      <!-- Дополнительные библиотеки и стили для конкретного проекта -->
      <script src="codebase/jquery.cookie.js"></script>
      <link rel="stylesheet" type="text/css" href="codebase/skins/air.css">
  </head>

  <body> </body>

</html>

init.conf

Файл конфигурации web-приложения, сохраненный в формате json. Параметрый конфигурации задаются в init.conf только в том случае, если нас по каким-то причинам не устраривают их значения по умолчанию (см. ниже). Поэтому, для многих проектов конфигурацию web-приложения можно вообще не задавать. В этом случае файл init.conf будет выглядеть так - "{}".

При инициализации web-приложение использует следующие параметры конфигурации:

"elements_path" - каталог, хранящий файлы с элементами интерфейса, по умолчанию - "elements"
"static" - файл в каталоге "elements_path", хранящий элементы интерфейса статической области, по умолчанию - main.webix
"dynamic_area_id" - id элемента webix, определяющую динамическую область интерфейса, по умолчанию - "page". Сама динамическая область задается в main.webix (см парметр выше). Ведь динамично только содержимое этой области (элементы интерфейса), сама область статична :-).
"action_element" - id элемента webix, который задан в статической области (файл main.webix) и управляет отображением элементов интерфейса в динамической области, по умолчанию - menu

Значения параметров по умолчанию определяются в init.js

Дополнительное назначение init.conf

При создании проекта может возникнуть необходимость определить некоторые константы с глобальной обрастью видимости. Это можно сделать, задав в файле init.conf дополнительные пары ключ-значение

init.js

Функция инициализации интерфейса. Запускается при загрузке главной страницы (index.html). Делает следующее:

Объявляет глобальные переменную init_conf в которой хранятся параметры конфигурации web-приложения (заданные в init.conf или принятые по умолчанию)
Обображает интерфейс web-приложения - статическую и динамическую области
Задает функцию Render, которая оботражает элементы интерфейса в динамической области в зависимости от выбранного пункта активного элемента
Задает функцию reinit(), которая запускается при необходимости "на лету" изменить активный элемент и (или) динамическую область

Пошаговый пример создания интерфейса web-приложения

Копируем "болванку" web-приложения.

1. Создаем прототип интерфейса web-приложения (содержимое файла main.webix) Для создания прототипов интерфейса удобно использовать online редактор http://webix.com/snippet/ При создании интерфейса следует обратить внимание на 3 момента

а) Динамическую область интерфейса рекомендуется задать так:

{id:'page', height:"auto", rows: [{}]}

'page' -значение по умолчанию параметра конфигурации "dynamic_area_id"

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

menu,
sidemenu,
combo,
tabbar,
segmented,
select,
richselect,
radio

в качестве id активного элемента нужно указать "menu". Если хотим присвоить другое имя - нужно в init.conf затать соотвествующий ключ "action_element"

в) Самый главный момент! Помимо "штатных" параметров, присваиваемых каждому значению активного элемента (таких, как id, value и др.), задаем для каждого значения два дополнительных параметра "page" и "run": "page" - указывает на имя файла (в нотации json) содержащего динамический блок интефейса для данного значения активного элемента. Файл должен быть предварительно создан и хранится в каталоге elements (параметр init.conf->"elements_path") "run" - содержит имя файла js-скрипта который будет выполнен сразу после загрузки элементов интерфейса в динамическую область.

Оба параметра являются не обязательными.

Созданный в онлайн редакторе интерфейс сохраняем в каталоге elements под именем main.webix. Помним, что при сохранении должны соблюдаться все правила json-формата.
Аналогичным образом создаем и сохраняем блоки интерфейса для динамической области.
Ассоциируем каждый файл динамического блока интерфейса с одним из значений активного элемента (см. п. 1-в)
(Опционально) При необходимости создаем js-файл, который ассоциируем с одним из значений активного элемента (см. п. 1-в) Данный js-файл будет выполнен сразу после загрузки элементов интерфейса в динамическую область.

Приемы применения

Как изменить активный элемент и(или) динамическую область "на лету"?

Для этого, в js-коде нужно изменить параметры init_conf['active_element'] и (или) init_conf['dynamic_area_id'] и вызвать функцию reinit().

Например, мы планируем сделать элемент 'elem1' активным при получении им фокуса. для этого пишем примерно следующий код:

$$("elem1").attachEvent("onFocus", function(){
        init_conf['active_element']='submenu_one'
        reinit()
})