Введение в фрэймворк 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"}
    ]
}); 

Результат:

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

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

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

Результат:

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

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

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 мы указываем какой элемент пользовательского интерфейса должен быть создан.

Результат:

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

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

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

Виджет “Tree”

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

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

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

Результат:

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

Виджет DataTable

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

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

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

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

Результат:

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

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

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(). Результат:

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

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

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

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

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:

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

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

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

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

template:"Controls", 
height: 60 

на:

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

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

Результат:

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

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

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

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

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

Итог

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

Источник урока: http://www.sitepoint.com/introducing-webix-framework/
Перевел: Станислав Протасевич, источник перевода

 

Добавить комментарий


Защитный код
Обновить