Webix. Первое знакомство с JavaScript фреймворком

Webix. Первое знакомство с JavaScript фреймворком

767
ПОДЕЛИТЬСЯ

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

В качестве примера я сделал вот такую заготовку для онлайн проигрывателя, что соответствует, на мой взор, духу времени, так как практически всё сегодня стремится утечь в онлайн, будь то хранение данных в облаках либо потоковое аудио и видео.

Начальный код можно писать по мере чтения статьи, а можно сходу скачать с гитхаба и разбираться с ним в процессе.

В 2-ух словах
Webix — это JavaScript фреймворк, с помощью которого можно создавать десктопные и мобильные интернет-приложения с отзывчивым дизайном. Фреймворк доступен под 2-мя лицензиями: GNU GPLv3 и коммерческой.

Индивидуальности:

Не необходимо даже осознавать, в чем разница меж ними. Для того, чтоб начать работу, не необходимо быть JS-гуру либо JS-ниндзя. Документация достаточно подробна, и осознать, как все устроено, нетрудно. — Легкость освоения.
Крайняя фича, к примеру, дозволяет создавать Webix-виджеты с внедрением jQuery-синтаксиса. — Интеграция с популярными фреймворками. Реализована интеграция с Backbone.js, AngularJS и jQuery.
В этом пт ограничимся перечнем: Mercury, Nicedit, Tinymce, CodeMirror, CKEditor, Raphael, D3, Sigma, JustGage, Google Maps, Nokia Maps, Yandex Maps, dhtmlxScheduler and dhtmlxGantt. — Интеграция со посторонними виджетами.
В сжатом виде .js-файл весит всего 128 КБ, и при этом все работает достаточно-таки быстро (по словам разрабов так и совсем «летает»). — Размер — небольшой, скорость — крупная.
Сделанные виджеты идиентично отлично себя ощущают как на десктопах, так и на телефонах/планшетах. — Поддержка тачскрина.

От слов к делу
Раз открыть эту демку в отдельном окне (вот ссылка на нее в онлайн-редакторе, раз не желаете возиться) и поэкспериментировать с его размерами, можно убедиться в том, что виджет отображается корректно вне зависимости от предлагаемых событий. Может закрасться подозрение, что такое поведение не дается даром и необходимо изрядно повозиться с таблицей стилей. Она состоит всего из 10 (10!) строк кода. Что ж, вот и проверим. От перечня особенностей, которые, думаю, не достаточно кто читает от начала до конца, перейдем к практике. Начать следует, как и положено, с начала. Итог смотрится достаточно симпатично. Но поначалу предлагаю опять посетить главную страничку библиотеки и направить внимание на интерактивную демку.

Скачать и распаковать. Вообщем, можно обойтись и без этого
Для этого необходимо отправиться на страничку загрузки. Для того чтоб начать применять библиотеку, необходимо сначала получить нужные файлы. Кроме этого, увлекательным может оказаться содержимое папки `samples`, в которой можно поглядеть примеры того, что полезного с помощью Webix можно смастерить. Избираем понравившуюся версию (готов поспорить, в 99 вариантах из 100 ей окажется Standard ) — и получаем свещенный zip-файл. Снутри можно найти файлы `license.txt`, `readme.txt` и `whatsnew.txt`, которые могут показаться любопытными для тех, кто любит учить все конкретно.

Но больше всего на данный момент нас интересует содержимое папки `codebase`, а конкретно два файла, которые пригодятся для работы: `webix.js` и `webix.css`. Для того, чтоб можно было применять Webix, необходимо включить эти файлы в HTML-файл грядущего проекта:

<!DOCTYPE html>
<html>
<head>
<title>Online Audio PLayer</title>
<link rel="stylesheet" href="codebase/webix.css" type="text/css">
<script src="codebase/webix.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">
</script>
</body>
</html>

Я также добавил теги <script></script>, вовнутрь которых и будет помещен код грядущего приложения.

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

<link rel="stylesheet" href="http://cdn.webix.com/edge/webix.css" type="text/css">
<script src="http://cdn.webix.com/edge/webix.js" type="text/javascript"></script>

Применять их проще обычного, и позднее я покажу, как это можно сделать. Но лучше все же скачать библиотеку полностью. Кроме сэмплов, в архиве также можно отыскать набор скинов.

Инициализация
Сейчас можно перейти конкретно к работе с Webix.

Раз необходимо удостовериться в том, что код начнет выполняться опосля того, как страничка на сто процентов загрузится, следует поместить его в webix.ready(function(){}). Вся Webix-мистика происходит снутри конструктора webix.ui(). Смотреться все это обязано так:

webix.ready(function(){
webix.ui({
/*код приложения*/
});
});

Лэйауты
Наш будущий плеер будет состоять из последующих главных частей: дерево каталогов, в котором будут отображаться все доступные альбомы; обложка альбома; плейлист в виде таблицы и панель управления. До этого чем перейти конкретно к приложению, необходимо разобраться, как можно создавать лэйауты.

Для того, чтоб наполнить страничку содержимым необходимо добавить описание нужного элемента в формате JSON. Итак, приступим.

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

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"}
]}
]
});

Итог:

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

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

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" превращает элемент в заголовок. Также были добавлены несколько частей resizer, которые, как и следует из наименования, необходимы для конфигурации размеров контейнера. Ресайзер, как и все остальные UI-составляющие, создаeтся с помощью характеристики view, которое дозволяет создавать списки, клавиши, формы и т.д.

Вот как смотрится макет грядущего приложения на данном шаге:

Сейчас у нас есть области подходящих размеров и возможность поменять эти размеры на собственный вкус.

Страничка размечена, настало время вдохнуть жизнь в элементы нашего приложения.

Высадить дерево… Знакомимся с Tree Widget
Сначала необходимо добавить в него информацию о исполнителях и альбомах: Начнем с дерева каталогов. Так как создание полнофункционального проигрывателя выходит за рамки данной статьи (а также из нежелания столкнуться с возможными неуввязками с копирайтом), заместо настоящих файлов я употреблял обыкновенные текстовые данные, которые будут помещены в файл data.js, который будет заполняться содержимым по мере необходимости.

recordsData = [
{id:"1", value:"Oceansize", data: [
{id:"1.1", value:"Everyone Into Position"},
]},
{id:"2", value:"Little People", data: [
{id:"2.1", value:"Mickey Mouse Operation"},
]},
];

2-ух исполнителей с одним альбомом для каждого из их будет довольно, чтоб осознать базисный принцип. Сейчас необходимо вынудить дерево работать. Для этого необходимо добавить последующий код меж тегами <header></header>: Во-первых, нужно подключить файл данных к HTML-фалу.

<script src="data.js"></script>

Во-вторых, заместо template:"Tree" в фигурные скобки необходимо вставить код, который создаст дерево:

view:"tree", data:"recordsData", select: true

select: true дает возможность выбирать один из частей дерева, отключенную по-умолчанию. Эта строчка делает дерево на базе данных из массива recordsData из файла данных.

Вот как это смотрится на данный момент:

Внедрение таблиц для отображения данных Выуживаем информацию.
gridColumns содержит наименования столбцов, которые будут отображаться в нашем перечне, а oceanData содержит информацию о треках для первого альбома первого исполнителя: заглавие и длительность каждой песни. Сейчас давайте поглядим, как работают таблицы данных. Для того, чтоб проверить их работу, необходимо добавить в файл data.js два новейших массива.

No Tomorrow", duration:"7:10"},
{id: "8", title: "08. Heaven Alive", duration:"6:20"},
{id: "3", title: "03. Music for a Nurse", duration:"8:16"},
{id: "6", title: "06. Meredith", duration:"5:26"},
{id: "5", title: "05. gridColumns = [
{
dataIndex: "title",
header: "Title"
},
{
dataIndex: "duration",
header: "Duration"
}
];

oceanData = [
{id: "1", title: "01. The Charm Offensive", duration:"7:19"},
{id: "2", title: "02. Mine Host", duration:"4:10"},
{id: "9", title: "09. New Pin", duration:"5:11"},
{id: "7", title: "07. The Last Wrongs", duration:"9:21"}
]; Ornament. A Homage to Shame", duration:"5:52"},
{id: "4", title: "04. You Can’t Keep a Bad Man Down", duration:"7:36"},
{id: "10", title: "10.

Для того, чтоб показать эти данные в виде сортируемой таблицы, необходимо заменить template:"Playlist" на:

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

Работает этот код так: view:"datatable" делает таблицу данных, autoConfig: true помогает сконфигурировать таблицу и сделать столбцы на базе данных из массива gridColumns. В качестве расходного материала для таблицы употребляется массив oceanData.

Вот как смотрится приложение с таблицей:

Прошу увидеть, что данные в таблице можно сортировать но заглавиям либо по продолжительности песни.

Все бы отлично, да лишь вот дерево и плейлист работают раздельно друг от друга. Хорошо было бы обучить их взаимодействовать.

Операция «Кооперация». Заставляем дерево и перечень работать сообща
Я постараюсь ее минимизировать, чтоб поскорее насладиться результатом. Для этого пригодится сделать некую предварительную работу.

Необходимо поменять id для альбомов, а также добавить информацию для альбома второго исполнителя, чтоб было из чего же выбирать. Она не различается от такой для предшествующего, потому мы приведем лишь часть массива peopleData: Во-первых, недурно бы поменять формат данных в файле data.js.

Moon", duration: "3:47"},
<……>
]; recordsData = [
{id:"1", value:"Oceansize", data: [
{id:"oceanData", value:"Everyone Into Position"},
]},
{id:"2", value:"Little People", data: [
{id:"peopleData", value:"Mickey Mouse Operation"},
]},
];

peopleData = [
{id: "1", title: "01. Basique", duration: "3:38"},
{id: "2", title: "02.

Значение id для альбомов из массива recordsData совпадает с именованием массива инфы для соответственного альбома. Это принципиально, поэтому что так будет скорее.

Потом необходимо поменять код для построения дерева и таблицы, чтоб они смогли взаимодействовать друг с другом и реагировать на действия: Поначалу необходимо сделать переменную, в которой будет храниться значение элемента, избранного в дереве. Сейчас вернемся к коду приложения. По-умолчанию она будет содержать значение первого альбома в перечне.

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 по-умолчанию хранит значение первого альбома из дерева, данные которого и показываются в таблице сходу опосля загрузки приложения. В код дерева и таблицы были добавлены атрибуты id со значениями myTree и myList соответственно. Код Они необходимы для того, чтоб получить доступ к содержимому этих частей. Итак, что мы тут имеем? Свойство `select: oceanData` описывает `id` элемента перечня, избранного по-умолчанию.

on: {
onSelectChange: function(){
}

выполняется в тот момент, когда юзер выбирает новейший элемент в дереве. В нашем случае происходит последующее: строчка selected = $$("myTree").getSelectedId(); присваивает переменной id избранного в данный момент элемента дерева. Когда это происходит, выполняется код, помещенный в тело функции. Для папки это будет цифра, соответственная ее номеру в иерархии, а для альбома — имя массива, содержащего информацию о нем. Раз это не цифра (а нам лишь этого и необходимо), то перечень обновляется с помощью этого кода: Так как выводить на экран информацию о папке в наши планы не заходит, сначала необходимо проверить, не является ли возвращенное значение цифрой: if (isNaN(selected)).

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

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

И, фактически, итог:

Сейчас можно переключаться меж различными элементами дерева и данные в таблице при этом будут обновляться.

Приобретенные познания о содействии частей пригодятся на последующем шаге, на котором будет добавлена возможность просматривать обложки альбомов.

Для визионеров
Для этого пригодится новенькая переменная, которая будет содержать путь к обложке по-умолчанию: Ну что ж, придется попотеть еще незначительно, чтоб узреть обложки.

var coverPath = "imgs/oceanData.jpg";

Сходу опосля $$("myList").refresh(); добавим такие строчки: Так как в этом случае, как и в прошлом, вид приложения изменяется в согласовании с переменами в дереве, код нужный для смены обложек также необходимо добавлять в код дерева.

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

Для этого был применен уже знакомый способ define(). Потом необходимо поменять состояние контейнера `myCover`, в котором отображается обложка. Наименования файлов обложек совпадают со значениями id соответственных альбомов, а означает, можно опять применять значение переменной selected по аналогии с предшествующим шагом.

Осталось вынудить соответственный контейнер показывать картину. Для этого строчку template:"Album Art", width: 250, height: 250 необходимо заменить на:

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

Давайте разбираться. Значение src соответствует пути к файлу изображения, и конкретно его необходимо поменять, чтоб поменялась обложку. Этот пример не так очевиден на 1-ый взор. width и height были установлены заблаговременно, ничего новейшего здесь нет; id нужен для доступа к содержимому контейнера — тоже без сюрпризов; а вот далее начинается самое увлекательное: свойство data описывает содержимое контейнера. Следующая функция нужна для генерации HTML-кода, и ее без излишней нужды лучше не трогать.

Сейчас проверим, как работает отображение обложек. Наружный вид по-умолчанию:

Наружный вид опосля выбора новейшего элемента дерева:

Обложки изменяются, как и задумано. Осталось добавить клавиши управления.

Берем приложение под контроль
Добавление клавиш. Так как наш плеер минималистичен донельзя, обойтись можно 3-мя клавишами: Previous, Play / Pause и Next. Самая ответственная часть нашего примера.

Для прибавления клавиш необходимо заменить template:"Controls", height: 60 на: Так как некий опыт работы с Webix уже имеется, этот крайний штришок не будет таковым уж сложным.

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

Тут создаются три столбца, в каждый из которых добавляется по кнопке.

Вот итог:

Итоги
Самое сложное — создание интерфейса с некой интерактивностью — сзади. Пустяки, вроде способности воспроизведения файлов, каждый сумеет воплотить сам. Для того, чтоб сделать отзывчивый(responsive) интерфейс, мне не пришлось возиться с css-кодом. Создатели уже повозились с ним за меня, а мне осталось лишь применять характеристики `width` и `height`, чтоб придать элементам подходящий размер. Ну что здесь можно огласить.

Прикрутить их к готовому проекту нетрудно, потому много времени это не займет. На этом, пожалуй, всё… Либо..? Чуток не запамятовал о скинах. Ах, да!

Рестайлинг на лету
В каталоге skins можно найти вот таковой вот перечень доступных вариантов:

aircompact.css
clouds.css
glamour.css
metro.css
touch.css
air.css
compact.css
flat.css
light.css
terrace.css
web.css

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

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

можно поменять вид приложения на таковой:

Проверить работу приложения самому можно тут. Раз желаете поэкспериментировать, добавить новейших исполнителей либо новейшие столбцы для плейлиста, начальный код доступен на GitHub.

Надеюсь, статья посодействовала для вас освоить базы работы с Webix. Ну а на этом, пожалуй, вправду все. Продолжить погружение для вас поможет доступная и подробная документация с обилием примеров.

Адьо! habrahabr.ru