В предыдущих статьях из цикла “JavaScript библиотека Webix глазами новичка” вы узнали как создать приложение на основе компонентов Webix UI. В этой публикации я хочу подробно рассмотреть создание аналогичного приложения с использованием архитектуры и возможностей фреймворка Webix Jet, а также какие преимущества это дает. Статья будет полезна как для тех кто уже знаком с Webix UI, так и для новичков, ведь код библиотеки интуитивно понятен и удобен в использовании.
Обзор Webix Jet
Webix — это библиотека UI компонентов. Для создания полноценного приложения на основе Webix UI вам не обязательно использовать дополнительные инструменты. Однако по мере расширения и увеличения количества кода могут возникнуть трудности с его организацией. Команда Webix позаботилась о решении этой проблемы и разработала собственный фреймворк для построения архитектуры приложения.
Фреймворк Webix Jet позволяет создавать очень гибкое и хорошо управляемое одностраничное приложение, используя паттерн Model-View. При таком подходе, логика работы с данными и отображение элементов интерфейса четко разделяются. Каждый компонент разрабатывается и тестируется отдельно от других. Также имеются готовые решения многих задач, которые реализуются через API, плагины и конфигурации.
Архитектура Jet-приложения основана на модулях view компонентов. Каждый компонент являет собой независимую часть интерфейса. Вы можете комбинировать модули, использовать повторно в разных частях приложения и управлять их отображением с помощью URL. Подробнее о работе с Webix-jet вы узнаете на примере создания собственного SPA.
Построение собственного Webix Jet приложения
Процесс создания приложения мы рассмотрим в следующем порядке:
Интерфейс приложения
Структура приложения
Создание и конфигурация приложения
View модули интерфейса
Модели работы с данными
Локализация приложения
В документациях Webix UI и Webix Jet можно ознакомиться с использованными в статье компонентами и API фреймворка.
С кодом готового приложения можно ознакомиться тут.
Интерфейс приложения
Начнем с описания интерфейса нашего приложения и разделения его на смысловые части. Сделать это крайне важно, так как каждую обособленную часть мы будем разрабатывать и хранить в отдельном модуле.
Интерфейс разделяем на 3 части:
Тулбар
Сайдбар
Панель сменяемых модулей
Тулбар находится в верхней части экрана. Он содержит лейбл с названием приложения в левой части и кнопки переключения локализации в правой.
Сайдбар находится в левой части экрана и содержит меню для навигации между сменяемыми модулями интерфейса.
Панель сменяемых модулей составляет основу приложения и расположена в центральной части экрана. Здесь вы сможете видеть 3 автономных модуля, которые содержат определенную часть интерфейса приложения. Они будут сменять друг друга по клику на опции меню.
Структура приложения
У нашего приложения будет следующая структура:
файл index.html является стартовой страницей и единственным html файлом
файл sources/myapp.js содержит необходимые конфигурации приложения
папка sources/views состоит из следующих файлов:
top.js содержит главный модуль, который объединяет все элементы интерфейса
toolbar.js содержит модуль с описанием тулбара
form.js содержит модуль с описанием формы
films.js содержит сменяемый модуль
users.js содержит сменяемый модуль
products.js содержит сменяемый модуль
папка sources/models содержит модули для операций с данными
папка sources/styles содержит CSS файлы
папка sources/locales содержит модули локализации.
Такая организация кода помогает разделять разные аспекты разработки на отдельные составляющие и эффективно управлять ими. Это особенно актуально при работаете с большим количеством кода.
Мы будем создавать интерфейс приложения комбинируя несколько subview модулей в файле top.js. Subview - это модули интерфейса, которые входят в состав других view. Они могут быть статическими и динамическими. Давайте подробнее их рассмотрим.
Статические subview импортируются при помощи команды import и включаются в интерфейс компонента напрямую. Например, мы будем использовать статический модуль toolbar.js в главном модуле top.js.
Для понимания принципа работы динамических subview важно упомянуть о такой сущности Jet, как URL. Он позволяет формировать иерархию отображения view модулей и осуществлять навигацию между ними. URL отображается в адресной строке браузера после имени домена и спецсимвола `/#!/`.
Например, с помощью URL мы можем указать модуль, который будет отображаться первым:
http://localhost:8080/#!/top - приложение отобразит интерфейс файла top.js
http://localhost:8080/#!/top/films - приложение отобразит интерфейс файла top.js и films.js (если в top.js указан плейсхолдер для films.js).
Мы реализуем 3 динамических subview модуля, каждый из которых будет отображаться при соответствующем значении URL:
films.js ( http://localhost:8080/#!/top/films )
users.js ( http://localhost:8080/#!/top/users )
products.js ( http://localhost:8080/#!/top/products )
Навигация между динамическими subview реализуется при помощи изменения URL. Например, если нам надо отобразить модуль users на панели сменяемых модулей, мы можем изменить текущий URL на http://localhost:8080/#!/top/users и увидим интерфейс файла top.js и users.js. Переключение между опциями меню работает по такому же принципу.
Навигация с помощью URL удобна и тем, что браузер хранит историю посещения разных url-адресов, и при клике на кнопку “Назад” в браузере, мы можем перейти к предыдущему модулю. Также URL хранит состояние приложения. Если пользователь переключится на вкладку Users при помощи меню и обновит страницу, то приложение отобразит тот модуль, URL которого был установлен в адресной строке браузера до перезагрузки.
Если такое отображение URL неудобно, вы можете либо убрать спец. символы из URL, либо вовсе не показывать его в адресной строке - на работу приложения это не повлияет.
Подробнее о настройках URL можно узнать тут.
Подробнее ознакомиться с тонкостями использования subview вы можете тут.
Создание и конфигурирование приложения
Итак, мы разобрали интерфейс и структуру файлов нашего демо приложения. Сейчас пришло время непосредственно заняться его созданием. Для начала важно правильно настроить нужные конфигурации и подключить необходимые инструменты.
В файле sources/myapp.js находится модуль конфигурации приложения. Он расширяется базовым классом JetApp, который содержит все необходимые инструменты управления.
Импортируем и подключаем стили css и базовый класс JetApp.
import "./styles/app.css";
import { JetApp } from "webix-jet";Создаем класс MyApp нашего приложения и наследуем его от базового JetApp. В конструкторе класса прописываем необходимые настройки.
Для активации режима отладки нужно установить параметр debug:true. Теперь фреймворк будет отображать все ошибки, которые могут возникнуть в процессе разработки модулей. Преимущество работы с Jet состоит в том, что сбои в работе отдельных модулей не будут влиять на работоспособность всего приложения, но без debug:true вы о них не узнаете.
Для определения стартовой страницы нужно установить параметр start и указать значение URL для начальной загрузки: start:"/top/films". Теперь при первоначальной загрузке приложения мы увидим главный модуль top.js и сменяемый модуль films.js.
export default class MyApp extends JetApp{
constructor(config){
const defaults = {
//активируем режим отладки, для отображения ошибок
debug:true,
//устанавливаем стартовый URL загрузки приложения
start:"/top/films"
};
super({ ...defaults, ...config });
}
}После создания класса и внесения необходимых конфигураций, нам нужно его инициализировать.
const app = new MyApp();Далее отображаем приложение через метод render() и оборачиваем его в webix.ready(), чтобы HTML страница успела загрузиться до начала выполнения кода.
webix.ready(() => app.render());Мы создали и настроили наше приложение. Теперь самое время перейти к непосредственной разработке view модулей интерфейса.
View модули интерфейса
Мы будем создавать view компоненты как классы ES6 и наследовать их от базового JetView. Такой подход позволяет расширить модуль встроенными Jet методами и получить доступ к управлению жизненным циклом компонента.
В начале каждого модуля необходимо подключить базовый JetView класс, который хранит конфигурации и инструменты для управления логикой view модулей.
В собственных классах мы используем методы config() и init(), которые наследуются от JetView, а также можем создавать собственные методы для хранения кастомной логики.
Элементы интерфейса описываем и возвращаем через метод config().
Работу с данными осуществляем через метод init().
Модуль TopView (top.js)
Давайте создадим главный модуль TopView в файле top.js, который будет включать сайдбар, футер, тулбар и динамические subview модули. В адресной строке он будет отображаться как #!/top/ .
Тулбар мы создадим в другом модуле и импортируем сюда. Он будет включаться как статический subview.
Импортируем базовый класс JetView и модуль ToolbarView.
import { JetView } from "webix-jet";
import ToolbarView from "views/toolbar";Создаем и наследуем класс TopView от базового JetView. В методе config() описываем основные элементы интерфейса и возвращаем комбинированный view.
export default class TopView extends JetView{
config(){
//здесь будет описан интерфейс
}
}Обратите внимание, что созданный класс необходимо экспортировать при помощи команды export default, чтобы Webix Jet включил его в приложение.
Внутри метода config() мы описываем сайдбар, который содержит меню с опциями для переключения динамических модулей интерфейса. Для этого используем компонент List библиотеки Webix UI. В свойстве data указываем названия опций меню и их id, которые будут использоваться для формирования URL.
const sidebar = {
view:"list",
data:[
{ value:"Dashboard", id:"films" },
{ value:"Users", id:"users" },
{ value:"Products", id:"products" }
]
};
Описываем футер, который содержит информацию копирайта и находится в самом низу экрана. Мы не выделяем его в отдельный модуль, так как это незначительный элемент. Для этого используем компонент Template.
const footer = {
template:"The software is provided by <a href='https://webix.com'> webix.com </a>. All rights reserved ©"
};Теперь нужно объединить все компоненты и сформировать структуру интерфейса приложения. Помимо собственных компонентов сайдбар и футер, мы включаем статический ToolbarView и динамические subview.
config(){
const ui = {
rows:[
ToolbarView, //включаем как статический subview модуль
{
cols:[
sidebar,
{ view:"resizer" },
{ $subview:true } //включаем динамические subview
]
},
footer
]
};
return ui;
}Возвращаем комбинированный view ui, который включает в себя все элементы интерфейса.
Теперь нужно настроить панель сменяемых модулей (плейсхолдер {$subview:true} ).
При выборе той или иной опции меню, наше приложение будет задавать необходимый сегмент URL (films, users, products) и отображать одноименный модуль на месте плейсхолдера {$subview:true}. Обязательное условие, чтобы id опций меню и названия файлов, хранящих модули интерфейса, совпадали.
Для того чтобы установить необходимый URL, воспользуемся встроенным методом JetView this.show(id). В качестве аргумента передаем id соответствующей опции меню. Этот id задает URL относительно того модуля, в котором вызван метод show(). В нашем случае метод изменит значение URL после #!/top/ и установит туда переданный в аргументе id. Таким образом, полный URL будет #!/top/{id}.
Например, при клике на опцию Users, виджет вызовет this.show("users") и установит URL #!/top/users. На месте { $subview:true } отобразится модуль файла views/users.js .
Модуль ToolbarView (toolbar.js)
Определяем модуль ToolbarView в файле toolbar.js, который включается как статический subview в главном модуле файла top.js.
Создаем и наследуем класс ToolbarView от базового JetView. В методе config() описываем необходимые компоненты и возвращаем их.
Описываем тулбар, который содержит лейбл с названием приложения и кнопки переключения локализации. Для этого используем такие компоненты Webix UI как Toolbar, Label и Segmented.
export default class TopView extends JetView{
config(){
const toolbar = {
view:"toolbar",
elements:[
{ view:"label", label:"Demo App" },
{
view:"segmented",
options:[
{ id:"en", value:"En" },
{ id:"ru", value:"Ru" }
]
}
]
};
return toolbar;
}
}
Теперь пришло время перейти к созданию динамических subview, которые будут сменяться в зависимости от сегмента URL, следующего после #!/top/. У нас будет 3 сменяемых модуля:
FilmsView
UsersView
ProductsView.
Каждый модуль мы будем разрабатывать в отдельном файле.
Модуль FilmsView (films.js)
Интерфейс модуля состоит из таблицы фильмов и формы для их редактирования. Таблица состоит из 5 столбцов, в которых мы реализуем сортировку и фильтрацию данных. Форму создадим в отдельном модуле и будем включать ее как статический subview.
Определяем модуль FilmsView в файле films.js, который будет включаться как динамический subview в файле top.js. Модуль будет отображаться при значении URL: #!/top/films.
В начале кода импортируем модуль FormView из файла form.js, который содержит форму для редактирования фильмов и будет включаться как статический subview.
import FormView from "views/form";Создаем и наследуем класс FilmsView от базового JetView. В методе config() описываем основные элементы интерфейса и возвращаем комбинированный view.
Описываем таблицу фильмов с помощью компонента Datatable. Через свойство columns конфигурируем столбцы. У каждого столбца должен быть уникальный id. Сортировка данных столбца реализуется при помощи свойства sort. Для столбцов с текстовыми значениями мы используем sort:"text", а для числовых sort:"int". Чтобы добавить фильтр в хедер столбца, мы используем конфигурацию {content:"textFilter"} для текстовых значений и {content:"selectFilter"} для числовых.
const film_table = {
view:"datatable",
columns:[
{ id:"id", header:""},
{ id:"title", header:["Film title", { content:"textFilter" }], fillspace:true, sort:"text" },
{ id:"year", header:["Released", { content:"selectFilter" }], sort:"int" },
{ id:"votes", header:"Votes", sort:"int" },
{ id:"rating", header:"Rating", sort:"int" }
]
};Формируем интерфейс модуля. Включаем собственный компонент film_table с таблицей фильмов и статический модуль FormView, который хранит интерфейс формы для редактирования фильмов.
return {
cols:[
film_table,
FormView //включаем как статический subview модуль
]
};Модуль FormView (form.js)
Интерфейс модуля содержит форму для редактирования фильмов. Форма состоит из 4 полей ввода, а также кнопок “Сохранить” и “Очистить”.
Определяем модуль FormView в файле form.js. Создаем и наследуем класс FormView от базового JetView. В методе config() описываем основные элементы интерфейса и возвращаем комбинированный view.
Описываем форму для редактирования фильмов с помощью компонента Form. Через свойство elements конфигурируем поля ввода и кнопки для управления формой.
config(){
const film_form = {
view:"form",
elements:[
{ type:"section", template:"edit films" },
{ view:"text", name:"title", label:"Title" },
{ view:"text", name:"year", label:"Year" },
{ view:"text", name:"rating", label:"Rating" },
{ view:"text", name:"votes", label:"Votes" },
{
cols:[
{ view:"button", value:"Save", css:"webix_primary" },
{ view:"button", value:"Clear", css:"webix_secondary" }
]
},
{}
]
};
return film_form;
}Модуль UsersView (users.js)
Интерфейс модуля состоит из тулбара, списка пользователей и диаграммы пользователей. В тулбаре находится строка поиска, кнопка для добавления новых пользователей, а также 2 кнопки для сортировки списка пользователей по возрастанию и убыванию. Список пользователей содержит имя, возраст и страну. Диаграмма отображает возраст пользователей.
Определяем модуль UsersView в файле users.js, который будет включаться как динамический subview в файле top.js. Модуль будет отображаться при значении URL: #!/top/users.
Создаем и наследуем класс UsersView от базового JetView. В методе config() описываем элементы интерфейса при помощи компонентов List, Toolbar и Chart.
Описываем список пользователей при помощи компонента List. Через свойство template конфигурируем шаблон списка, который будет включать имя, возраст и страну.
const list = {
view:"list",
template:"#name#, #age#, #country#"
};Описываем тулбар для работы со списком при помощи компонента Toolbar . Через свойство elements конфигурируем строку поиска и кнопки для управления списком пользователей.
const list_toolbar = {
view:"toolbar",
elements:[
//кнопка добавления нового пользователя
{ view:"button", value:"Add new person", css:"webix_primary" },
//строка поиска
{ view:"search" },
//кнопки сортировки
{ view:"button", value:"Sort asc" },
{ view:"button", value:"Sort desc" }
]
};
Описываем диаграмму пользователей при помощи компонента Chart. Задаем тип диаграммы type:"bar", значения для столбцов value:"#age#". Конфигурируем оси при помощи свойств xAxis и yAxis.
const chart = {
view:"chart",
type:"bar",
value:"#age#",
xAxis:{
template:"#name#",
title:"Age"
},
yAxis:{
start:0,
end:100,
step:10
}
};Формируем интерфейс модуля. Комбинируем и возвращаем компоненты list_toolbar, list и chart.
return { rows:[list_toolbar, list, chart] };Модуль ProductsView (products.js)
Интерфейс модуля состоит из древовидной таблицы, которая содержит элементы высшего и вложенного уровней.
Определяем модуль ProductsView в файле products.js, который будет включаться как динамический subview в файле top.js. Модуль будет отображаться при значении URL: #!/top/products.
Создаем и наследуем класс ProductsView от базового JetView. В методе config() описываем древовидную таблицу при помощи компонента Treetable. Через свойство columns конфигурируем столбцы таблицы. Используем конфигурацию template:"{common.treetable()} #title#", чтобы задать вложенные элементы.
config(){
const products_treetable = {
view:"treetable"
columns:[
{ id:"id", header:"" },
{ id:"title", header:"Title", fillspace:true, template:"{common.treetable()} #title#" },
{ id:"price", header:"Price" }
]
};
return products_treetable;
}Мы описали интерфейс нашего приложения. Теперь пришла очередь рассказать о том, как осуществляется работа с данными.
Модели работы с данными
Давайте разбираться с тем, как работать с моделями данных. В принципе, подключать данные не обязательно, и можно загружать их сразу в компоненты минуя модели. Но для серьезного приложения такие сущности как view и model лучше разделять.
Логика работы с моделями данных хранится в файлах директории sources/models. Предполагается, что мы взаимодействуем с сервером и загружаем данные асинхронно. Для этого используем метод webix.ajax().
Функция webix.ajax() делает асинхронный запрос по указанному в аргументе адресу и возвращает промис-объект. В случае успешной загрузки мы получим объект, значения которого будем загружать в необходимые нам модули.
Данные нам нужны для 3 сменяемых subview:
FilmsView
UsersView
ProductsView.
Для каждого модуля создаем отдельную модель, как на примере ниже.
// models/films.js
export function getData(){
return webix.ajax("../../data/film_data.js");
}Все 3 модели будут отличаться только аргументом запроса, в котором мы указываем путь к данным на сервере. В нашем случае данные хранятся в папке ../../data/.
Теперь для каждого view модуля необходимо импортировать метод getData() из соответствующей модели.
import { getData } from "models/films"; // для FilmsView
import { getData } from "models/users"; //для UsersView
import { getData } from "models/products"; //для ProductsView.Далее мы должны передать данные из модели в необходимый компонент. Интерфейс модуля описывается внутри метода config() и становится доступным после инициализации. Внутри специального метода init() класса JetView, мы можем получить доступ к нужному data-компоненту (List, Datatable, Chart) и загрузить в него данные при помощи метода parse().
config(){
...
return {
cols:[
film_table,
FormView
]
};
}
init(view){
const datatable = view.queryView("datatable");
datatable.parse(getData());
}
В метод init() приходит параметр view, который ссылается на объект, возвращенный методом config() того же модуля. Это может быть layout с таблицей и другими компонентами. Внутри layout мы ищем таблицу по названию компонента ( view.queryView("datatable"); ), а затем загружаем в нее данные.
Чтобы передать данные из промис-объекта который возвращает нам метод getData(), нужно вызвать метод parse() для Webix компонента и передать туда промис в качестве аргумента.
Когда данные будут загружены, компонент их обработает и отобразит в интерфейсе приложения.
Локализация приложения
Инструментарий фреймворка Webix Jet позволяет с легкостью реализовать локализацию приложения. Для этого мы будем использовать встроенный сервис Locale.
Этот сервис нужно подключить в файле sources/myapp.js, т.к. он будет использоваться глобально для всего приложения. Для этого мы импортируем модуль plugins, который содержит встроенные сервисы, вместе с базовым JetApp.
import { JetApp, plugins } from "webix-jet";После создания и инициализации класса MyApp, мы подключаем сервис plugins.Locale. Сделать это необходимо до вызова метода render().
const app = new MyApp();
app.use(plugins.Locale);
webix.ready(() => app.render());Сервис Locale устанавливает связь с файлами локализации, которые находятся в директории sources/locales. Файлы en.js и ru.js хранят объекты с элементами локализации.
// locales/en.js
export default {
Dashboard : "Dashboard",
Users : "Users",
...
}
// locales/ru.js
export default {
Dashboard : "Панель",
Users : "Пользователи",
...
}Далее, в каждом отдельном view модуле мы получаем метод из сервиса локализации.
const _ = this.app.getService("locale")._;Этот метод мы будем вызывать каждый раз, когда нам надо перевести какое-либо текстовое выражение. В качестве аргумента нужно передавать ключи, по которым будут подтягиваться значения из объекта файла установленной локали: _("some text"). При смене локализации, Jet перерисует приложение с учетом значений установленной локали.
Почти готово, осталось только рассказать о том, каким образом пользователь сможет переключать языки в нашем приложении. Как вы помните, в тулбаре мы создали кнопку Segmented со значениями En и Ru. Теперь нам нужно создать обработчик, который будет вызываться при клике на соответствующую кнопку и применять нужную локализацию.
config(){
...
{
view:"segmented",
options:[
{ id:"en", value:"En" },
{ id:"ru", value:"Ru" }
],
click:() => this.toggleLanguage()
}
...
}
toggleLanguage(){
const langs = this.app.getService("locale");
const value = this.getRoot().queryView("segmented").getValue();
langs.setLang(value);
}
Для этого мы создаем функцию-обработчик toggleLanguage() как метод класса ToolbarView. Здесь же находится сегментная кнопка, при клике на которую мы будем вызывать наш обработчик.
Внутри функции получаем доступ к сервису локализации, считываем значение заданной опции (значение берется из id - "en" или "ru") и устанавливаем выбранную локаль с помощью метода setLang().
При описании функции используем метод this.getRoot(). С его помощью мы получаем доступ к view, возвращенный нам методом config() - здесь это Toolbar. Внутри view мы ищем компонент с именем segmented, чтобы получить объект кнопки и считать ее значение.
Вот такими простыми манипуляциями в Webix Jet реализуется смена локализации.
Заключение
С помощью фреймворка Webix Jet мы создали структурированное одностраничное приложение. Интерфейс разделен на модули view, которые хранятся в отдельной директории sources/views. Логика работы с данными отделена от компонентов интерфейса и хранится в директории sources/models. Реализована локализация приложения за счет использования плагина Locale базового класса JetApp.
Сейчас это мини-приложение, но с такой архитектурой его легко масштабировать и поддерживать.
С кодом готового приложения можно ознакомиться тут.
Webix Jet имеет достаточно широкий спектр инструментов и конфигураций, которые значительно упрощают процесс разработки приложения на основе компонентов Webix UI. Более детально мы рассмотрим их в следующих статьях посвященных Webix Jet.
