Знакомство с фрэймворком 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 не составило особого труда. Синтаксис интуитивен, документация написана неплохо. Демо примеров тоже немало.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: http://www.sitepoint.com/introducing-webix-framework/
Перевел: Станислав Протасевич
Урок создан: 8 Мая 2016
Просмотров: 4380
Правила перепечатки


5 последних уроков рубрики "HTML5"

  • Определение доступности атрибута HTML5 с помощью JavaScript

    Сегодня мы посмотрим, как можно организовать проверку доступности атрибута HTML5 с помощью JavaScript. Проверять будем работу элементов details и summary.

  • HTML5: API работы с вибрацией

    HTML5 - глоток свежего воздуха в современном вебе. Она повлиял не только на классический веб, каким мы знаем его сейчас. HTML5 предоставляет разработчикам ряд API для создания и улучшения сайтов с ориентацией на мобильные устройства. В этой статье мы рассмотрим API для работы с вибрацией.

  • Создание форм с помощью Webix Framework — 4 практических примера

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

  • Отключение HTML5 валидации

    Бесит валидация, которая добавляется к полям формы, если вы пользуетесь HTML5? Её можно без проблем отключить.

  • 5 устаревших фишек в HTML5

    В этой статье мы рассмотрим пятёрку элементов HTML5, которые устарели и были удалены из спецификации.

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 9 Мая 2016 09:24
    makovkin_alex
    мда... такое ощущение. что урок просто сделали, чтоб была статья. везде пример создания плеера. вы че с хабра скомуниздили статью? вот хоть что-то свое бы сделали,а не копипаст
    • 10 Мая 2016 18:30
      es.vlad
      написано же черным по белому "Источник урока: http://www.sitepoint.com/introducing-webix-framework/ Перевел: Станислав Протасевич" а не "Источник урока: http://ruseller.com/ Автор: Станислав Протасевич"
    • 29 Июля 2016 18:17
      Сандро
      Тут все статьи являются переводами из оф документации, либо копирайтом. Я не жалуюсь много интересного есть...
  • 10 Мая 2016 18:32
    es.vlad
    Прикольная штучка, надо будет по юзать, когда нибудь.
  • 12 Мая 2016 17:40
    es.vlad
    Нашел тут момент, скрипт не совсем бесплатный, бесплатны лишь 77 виджетов, да и другие ограничения есть, включая использование лишь в свободных проектах (http://webix.com/licenses/)
^ Наверх ^