Знакомство с фрэймворком Webix

В этой статье мы бы хотели познакомить вас с фрэймворком Webix. Для демонстрации возможностей данного инструмента мы создадим интерфейс online аудио плеера. Не обольщайтесь — это всего лишь модель интерфейса. Исходный код доступен в демо и на странице GitHub.

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

Webix — это JavaScript и HTML5 фрэймворк для создания насыщенных кросс-платформенных интерфейсов веб приложений. Библиотека проста в изучении, легковестна и быстра. Результат легко интегрировать с Backbone.js, Angular.js или jQuery. К примеру вы можете воспользоваться методами jQuery для создания Webix приложений. Мне же больше всего по душе — простота данного инструмента.

Разработка проекта

Теперь давайте приступим к работе над нашим проектом.

Подключение библиотеки

После того как вы скачали библиотеку, создайте страницу index.html. Внутри подключите CSS и JavaScript файлы:

<link rel="stylesheet" href="codebase/webix.css" />
<script src="codebase/webix.js"></script>

Так же можно подключить фрэймворк с помощью Webix CDN:

<link rel="stylesheet" href="//cdn.webix.com/edge/webix.css" />
<script src="//cdn.webix.com/edge/webix.js"></script>

Я скачаю файлы. Вы спросите: “Почему?”. Одна из причин: тема оформления. Данная тема будет рассмотрена чуть позже.

Инициализируем библиотеку. Весь ваш код нужно поместить в конструктор webix.ui(). Для того чтобы код сработал после полной загрузки библиотеки воспользуйтесь командой webix.ready(function() { ... }:

webix.ready(function(){
    webix.ui({
        /* ваш код */
    });
});

Теперь давайте приступим к основным элементам страницы. Никакого HTML и CSS. Я обещаю.

Ряды и колонки

В Webix есть два свойства: rows и cols которые можно использовать для организации контента страницы:

webix.ui({
    rows: [
        {template: "Row One"},
        {template: "Row Two"}
    ]
});

Результат:

Строкой template:"Row One" мы создали простой контейнер. Внутри можно помещать любые HTML элементы. Для создания более сложных интерфейсов можно реализовать вложенные ряды:

webix.ui({
    rows: [
        {template:"Row One"},
        {cols:[
            {template:"Column One"},
            {template:"Column Two"}
        ]}
    ]
});

Результат:

Путём комбинирования рядов и колонок можно получить нужную структуру страницы:

webix.ui({
    rows: [
        {type:"header", template:"Online Audio Player"},
        {cols: [
            {rows: [
                {template:"Tree"},
                {view:"resizer"},
                {template:"Album Art", width: 250, height: 250}
            ]},
            {view: "resizer"},
            {rows: [
                {template:"Playlist"},
                {template:"Controls", height: 60}
            ]}
         ]
        }
    ]
});

Тут вы можете заметить что-то новенькое: type:"header". Этим выражением мы обозначаем, что данный блок будет шапкой. Так же я задействовал свойство view: resizer для того чтобы можно было изменять размеры полей “Album Art” и “Playlist”. В свойстве view мы указываем какой элемент пользовательского интерфейса должен быть создан.

Результат:

Деревья и таблицы: навигация по массиву данных

Теперь вдохнём немного жизни в наш интерфейс.

Виджет “Tree”

Воспользуемся виджетом Tree Widget для организации коллекций наших песен. В файле data.js содержится вся нужная информация. В нём определена парочка массивов. Подключите данный файл в HTML.

Теперь давайте отобразим эти данные на странице. Замените template: "Tree" на код:

Данный код построит дерево данных с идентификатором myTree. Данные берутся из массива recordsData файла data.js.

Результат:

Виджет DataTable

Виджет DataTable полезен в случае, если вам нужно отобразить список данных. К примеру… Плейлист!

Замените строку template: "Playlist" на:

view: "datatable",
id: "myList",
autoConfig: true,
data: oceanData

Данный код создаст элемент с идентификатором myList. Возьмёт данные из соответствующего массива и создаст нужные колонки. В нашем случае используется массив gridColumns из data.js. На последнем шаге в качестве источника данных используется массив oceanData.

Результат:

Выглядит неплохо и даже работает сортировка! Однако наше дерево коллекций и плейлист разделены. Давайте это исправим.

Tree + DataTable = Data Explorer

Вот как я объединил дерево коллекций и плейлист:

var selected = oceanData;
webix.ui({
    /* ... */
    {view:"tree", id:"myTree", data:recordsData , select: oceanData, on: {
        onSelectChange: function(){
            selected = $$("myTree").getSelectedId();
            if (isNaN(selected)) {
                $$("myList").clearAll();
                $$("myList").define("data", selected);
                $$("myList").refresh();
            }
        }
        }
    },
    /*...*/
    {view:"datatable", id:"myList", autoConfig:true, data:selected}

Что у нас тут? В переменной selected содержится значение альбома по умолчанию. DataTable будет использовать его в качестве источника данных. Обратите внимание что в виджите Tree Widget теперь есть обработчик события:

on: {
    onSelectChange: function() {
    }
}

Данная функция будет вызываться после выбора элемента коллекции. В нашем случае selected = $$("myTree").getSelectedId(); записываем выбранный id в переменную selected. Данное значение будет числом, если мы выбрали папку; массивом если мы выбрали альбом.

Проверка значения переменной:

if (isNaN(selected))

Не число? Хорошо! Выполним три простых шага:

$$("myList").clearAll();
$$("myList").define("data", selected);
$$("myList").refresh();

Очищаем список, выполнив метод clearAll(). Инициализируем его согласно новому значению переменной selected через метод define(). "data" — это поле которое нужно изменить, а selected — новое значение данной переменной. В конце обновляемся — refresh(). Результат:

Теперь при выборе любого элемента из нашего дерева содержимое плейлиста изменится.

Изображения и кнопки

Давайте зададим обложку по умолчанию:

var coverPath = "imgs/oceanData.jpg";

Нам необходимо чтобы поле “Album Art” постоянно обновлялось. Для этого вставьте следующий код в секцию обработки событий:

on: {
	onSelectChange: function(){
		/*...*/
		coverPath = "imgs/" + selected + ".jpg";
		$$("myCover").define("data", { src: coverPath });
	}
}

Название изображения альбома будет такое же, как и id выбранного альбома. Именно поэтому мы снова можем воспользоваться значением переменной selected. Затем вызовем метод define() для обновления данных контейнера myCover.

Теперь давайте покажем пользователю изображение. Замените:

template:"Album Art", width: 250, height: 250

на код:

width: 250, height: 250, id:"myCover", data: {src: coverPath},
    template: function (obj) {
        return '<img src="'+obj.src+'"/>'
    }

В поле data определён контент нашего контейнера. В src путь к изображению. В нашем случае это coverPath. Значение данного поля будет изменяться при “выстреле” события onSelectChange. В поле template определили функцию генерирующую HTML код.

Давайте проверим как работает секция “Album Art:

Выбираем новый альбом:

Теперь настало время для заключительной части: кнопок! Замените:

template:"Controls", height: 60

на:

cols: [
   {gravity: 3 },
   {view:"button", value:"< Previous"},
   {view:"button", value:"Play / Pause"},
   {view:"button", value:"Next >"}
]

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

Результат:

Изменение темы оформления

Самое время вернуться к вопросу: подключать фрэйморк, используя локальные файлы или CDN. Внутри вы сможете найти кучу тем оформления! Хватит одной строчки для смены:

<link rel="stylesheet" href="codebase/skins/touch.css" />

Итог

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