Кастомизация ToDo

ToDo - это комплексный виджет, разработанный с помощью MV* фреймворка Webix Jet. Виджет представляет собой готовое приложение с минимальной конфигурацией и специальным API для переопределения логики внутренних модулей.

Природа Jet-приложения и внутренние модули

ToDo построен как Jet приложение в обёртке Webix компонента, поэтому вы можете инициализировать его любым из двух способов.

Компоненты

Интерфейс ToDo разделен на части (компоненты). Каждый компонент - класс, который наследуется от класса JetView со своими методами и конфигурацией.

Исходный код частей интерфейса (компонентов Jet) находится в папке sources/views.

views
  active.js
  add.js
  ...
  windows
    context.js

Модели/Сервисы

В моделях ToDo описана логика для загрузки, хранения и кэширования данных, скачивания файлов, визуализации прогресса операций сохранения и др. В Webix Jet модели называются сервисами.

Исходный код для моделей (сервисов Jet) находятся в папке sources/models.

models
  Backend.js
  Helpers.js
  Local.js
  Operations.js

Вы можете получить сервис с помощью метода getService():

$$('todo').getService('helpers');

Кастомизация компонентов

При кастомизации компонента вы можете:

• переопределить метод config(), чтобы изменить UI
• переопределить метод init(), чтобы изменить UI и поведение компонента
• переопределить любой существующий метод, но делайте это с осторожностью
• добавлять и вызывать свои методы

Чтобы определить, какой компонент отвечает за нужную часть интерфейса, обратитесь к карте классов.

Для начала создайте класс и наследуйте его от класса по умолчанию или от todo.views.JetView:

class MyToolbar extends todo.views["toolbar"] {
    config() {
        // получаем JSON объект с конфигурацией
        const ui = super.config();
        ... // изменения конкретного компонента
        return ui;
    }
    init() {
        // вызываем логику по умолчанию
        super.init();
        // пользовательский метод
        this.doSomething();
    }
    doSomething() {
        // какое-либо действие при инициализации
    }
}

Затем переопределите компонент (класс) по умолчанию с помощью свойства override:

webix.ui({
    view: "todo",
    data: base_data,
    users: users,
    projects: projects,
    override: new Map([[todo.views["toolbar"], MyToolbar]])
})

Рекомендации

Скрытие компонентов

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

class CustomToolbar extends todo.views["toolbar"] {
    init(view) {
        // логика по умолчанию
        super.init();
        // безопасное скрытие компонента
        view.queryView('button').hide();
    }
}

Доступ к экземплярам компонентов

Внутри Jet-компонента получить экземпляр компонента можно двумя способами.

Метод $$(id) у JetView работает для внутреннего компонента, у которого задана настройка localId:

init() {
    // исходная логика
    super.init();
    // получаем экземпляр компонента с localId = "list" 
    const list = this.$$("list");
}

Если localId не задан, используйте queryView:

init(view) {
    // исходная логика
    super.init();
    // получаем экземпляр кнопки
    const button = view.queryView("button");
}

Проверка компактного режима

Определить, в компактном ли режиме находится приложение, можно из любого компонента или сервиса:

const compact = this.getParam('compact', true);

Получение свойств состояния

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

const state = this.app.getState();
// или
const state = this.getParam('state');

Кастомизация сервисов Jet

С помощью кастомизации сервисов Jet вы можете добавлять и вызывать свои методы. Также вы можете переопределять любые существующие методы, но с осторожностью.

Прежде всего создайте свой класс сервиса и наследуйте его от класса сервиса по умолчанию:

class MyBackend extends todo.services.Backend {
    getModules() {
        // клиентские данные
        return webix.promise.resolve(modules);
    }
}

Затем переопределите класс по умолчанию с помощью свойства override.

webix.ui({
    view: "todo",
    url: 'https://docs.webix.com/todo-backend/',
    override: new Map([[todo.services.Backend, MyBackend]]),
});

Обратная совместимость

ToDo - это гибкий компонент. Однако помните о следующем:

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

Наверх