В этом году мы разработали новую концепцию создания комплексных виджетов и реализовали её на нескольких примерах: File Manager, Document Manager, Query и User Manager. Каждый из этих комплексных виджетов написан как Webix Jet приложение, что делает их гибкими, настраиваемыми и многофункциональными. Исходный код такого приложения не очень прост в освоении, но как только вы поймёте общую идею, перед вами откроется широкий спектр возможностей.
Давайте познакомимся с основными возможностями новых виджетов и узнаем преимущества Jet-подхода.
Почему это важно
По своей сути, комплексные виджеты Webix — это небольшие приложения. Они достаточно хорошо справляются со своими основными задачами, но настроить их под свои нужды не так-то просто. Всё дело в публичном API, у которого есть некоторые ограничения. Тем не менее гибкость в настройках необходима.
Именно поэтому мы решили использовать Webix Jet при разработке комплексных виджетов. Благодаря такому подходу, у новых виджетов хорошая структура, их удобно настраивать и кастомизировать.
Что нового для конечных пользователей
Прежде всего, мы не просто переписали код, но добавили множество новых фич. Например, в новом File Manager 7.2 можно:
- Переключаться между тремя режимами интерфейса: list, cards и double view
- Предварительно просматривать файлы
- Редактировать текстовые файлы
- Добавлять файлы и папки
- Скачивать и загружать файлы
- Работать с файлами на устройствах с маленьким экраном
Document Manager предлагает еще больше функций:
- Корзина для хранения удалённых файлов и папок;
- Добавление файлов в избранное;
- Возможность делиться файлами с другими пользователями;
- Просмотр недавних файлов;
- Добавление тегов файлам;
- Поиск по имени или тегу;
- Возможность комментировать файлы;
- Просмотр и редактирование Excel файлов.
Query может похвастаться удобным и интуитивно понятным интерфейсом для фильтрации данных.
Кстати, вы уже слышали о User manager? Это новый виджет для управления правами доступа. В нем можно:
- управлять правами пользователей
- группировать права в роли
- отслеживать операции по управлению уровнями доступа
Это то, что получат конечные пользователи виджетов «из коробки». Если какой-либо функционал выходит за пределы базового, то вы, разработчики, можете запросто добавить его в приложение.
Что нового для разработчиков
Продвинутым пользователям Webix Jet-виджеты покажутся несколько нестандартными. Эти виджеты разработаны иначе и требуют другого подхода от разработчика. Несмотря на то, что у каждого виджета свои особенности, всех их объединяют следующие черты:
- Webix Jet структура и ООП
- Реактивные свойства вместо привычных настроек и событий
- Настраиваемые view-классы и сервисы вместо классического Webix API
- Переопределение как средство кастомизации
Webix Jet и изменения в интерфейсе
Webix Jet позволяет эффективно организовать код и архитектуру комплексных виджетов. Это значит:
- части интерфейса хранятся в отдельных модулях (views)
- логика приложения также хранится в специальных модулях (services)
- у исходного кода нет приватных областей, поэтому любую его часть можно использовать и изменять
Благодаря классическому ООП, у вас есть возможность:
- расширять view-классы и сервисы
- переопределять текущий функционал или добавлять новый
- добавлять новые компоненты
Например, чтобы изменить UI, найдите необходимый view-класс и переопределите его метод config() так, чтобы он возвращал нужную вам конфигурацию Webix. Давайте добавим новую опцию в меню виджета Query:
config() {
const ui = super.config();
const list = ui.body;
list.data.push({ id: "custom", value: "Custom option" });
list.yCount = 5;
return ui;
}
}
Чтобы изменить какой-либо функционал компонента, нужно переопределить методы view-класса (например, init()). Давайте добавим действие по клику на новую опцию опцию, задав обработчик события:
config() {
...
}
init(){
super.init();
this.on(this.app, "action", (id, item) => {
if (id === "log")
this.LogFilter(item);
});
}
LogFilter(item){
console.log(`Filter ID: ${item}`);
}
}
Реактивное состояние: Как изменять свойства и следить за изменениями
Помимо обычных настроек типа width, url и др., у Jet-виджетов есть реактивные свойства. Они были придуманы для обеспечения коммуникации между частями приложения. Реактивные свойства могут отражать значение любого параметра или сигнализировать о его изменении обработчикам событий.
В отличие от событий и свойств, реактивное состояние:
- позволяет избежать громоздких проверок текущего значения параметра
- не перегружает систему событий приложения, что случается рано или поздно, если создавать много событий
- если обработчика события нет в момент изменения значения реактивного состояния, обработчик сработает, как только будет создан
Вы можете задавать реактивные свойства в объекте конфигурации виджета:
view:"docmanager", id:"dm", source:"recent"
Реактивное состояние виджета доступно через метод getState():
После этого вы можете:
- подписаться на изменения этого параметра и выполнять какие-либо действия, если они произошли
view: "docmanager",
url: "https://docs.webix.com/docmanager-backend/",
on: {
onInit: app => {
const state = app.getState();
state.$observe("source", (v,o) => { /* ваш код */ });
},
}
}
- изменять параметры, и виджет будет реагировать на эти изменения
Вы можете изменить сразу несколько реактивных свойств:
state.$batch({
source: "files",
path: "/Music",
mode: "cards"
});
Вам не нужно обновлять виджет после изменений. Обработчики сделают это самостоятельно.
Переопределение и сервисы: Кастомизация логики виджетов
У Jet-виджетов нет привычного публичного API, поэтому вы не сможете настроить их по старинке. Вместо этого у виджетов есть сервисы, которые хранят их внутреннюю логику. Например, если вам нужно по-другому реализовать коммуникацию между сервером и клиентом, вы можете переопределить сервис Backend.
Любой метод можно вызвать напрямую:
$$("filemanager").getService("backend").files("/").then(files => { ... });
…и любой метод можно переопределить. Например, вы можете изменить метод files(), чтобы загружать содержимое директорий по-другому:
// вы можете обращаться к серверу
files(id) {
return webix.ajax("//docs.webix.com/filemanager-backend/files", { id })
.then((data) => data.json());
}
// ... другие методы
}
webix.ui({
view: "filemanager",
url: "https://docs.webix.com/filemanager-backend/",
override: new Map([[fileManager.services.Backend, MyBackend]]),
});
Общие советы по настройке виджетов
чтобы понять, что именно вы хотите изменить, читайте исходный код. Есть несколько базовых принципов настройки:
- изменения в UI: найдите view-class компонента (вы также можете обратиться к карте классов в соответствующем разделе документации) и переопределите в нём метод config(): пример
- изменения логики компонента: найдите view-class компонента и переопределите метод init()или другие методы класса: пример
- изменения или добавление функциональности: добавьте новые или переопределите уже существующие методы view-классов и сервисов; например, вам нужен сервис Operations, если вы хотите обрабатывать операции в приложении по-другому: пример
- адаптация виджета к вашему бэкенду: найдите сервис Backend или другие бэкенд-сервисы (например, Tags или Users), а также их эквиваленты для работы с локальными данными (LocalData, LocalUsers, LocalTags) и переопределите их методы: пример
У Jet-виджетов нет приватного АПИ. Вы можете вызывать и переопределять любые методы, а также изменять любые свойства и компоненты. Это удобно, но в то же время предполагает вашу ответственность за свой код.
С гибкостью приходит ответственность
Гибкость означает, что вам не нужно будет изобретать длинные и замысловатые способы изменить внешний вид или поведение компонента. Всё открыто для настроек и улучшений.
С великой гибкостью приходит великая ответственность … и любовь к чтению исходного кода. Так как не существует привычного API, мы не документировали каждый метод каждого компонента или сервиса — за исключением Backend сервиса, который вам нужно будет кастомизировать чаще всего 🙂 Мы также предлагаем гайды и практические руководства по общим задачам.
Если документация кажется вам недостаточной, пишите, и мы ее дополним. Однако для того, чтобы на самом деле понять как устроены Jet-виджеты, что такое «views», сервисы и многое другое, вам необходимо читать исходный код. Если вы испытываете какие-либо затруднения, обращайтесь в нашу службу поддержки. Мы всегда рады помочь!
Что дальше
Тем временем мы продолжаем работать над другими Jet-решениями, которые пополнят линейку комплексных виджетов Webix. Если вы давно мечтаете о каком-то виджете, а в Webix его еще нет, поделитесь своими идеями в комментариях.
Следите за обновлениями и будьте здоровы 🙂
