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

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

Jet приложение и внутренние модули

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

Компоненты

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

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

views
    actions.js
    bar.js
    filter.js
    ...

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

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

В моделях Query описана логика для работы с полями и данными. В Webix Jet модели называются сервисами.

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

models
  Backend.js

Методы сервисов вызываются самим интерфейсом, но также могут быть вызваны программистом напрямую:

$$('query').getService('backend').data(field);

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

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

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

class CustomBar extends query.views.bar {
    config() {
        // получаем JSON объект с конфигурацией
        const ui = super.config();
        // изменения конкретного компонента
        ui.height = 200;
 
        return ui;
    }
    init() {
    // вызываем логику по умолчанию 
    super.init();
    // а это уже пользовательский метод
    this.doSomething();
  }
  doSomething(){
    // делаем что-то при инициализации
  }
}

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

webix.ui({
    view: "query",
    override: new Map([
        [query.views.bar, CustomBar]
    ]),
    // другие свойства
});

Как добавить кнопку на панель

Чтобы добавить кнопку на панель, вам необходимо изменить её JSON конфигурацию:

class CustomBar extends query.views.bar {
    config() {
        // логика по умолчанию
        const ui = super.config();
 
        // добавляем кнопку
        ui.cols.push({
            view: 'button',
            value: 'Clear',
            width: 70,
            // сбрасываем значение при щелчке по кнопке
            click: () => {
                this.getParam('state').value = null;
            },
        });
 
        return ui;
    }
}

Related sample:  Query: Adding a Button

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

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

class CustomBar extends query.views.base {
  init(view) {
    // логика по умолчанию 
    super.init();
    // прячем кнопку "Add filter" 
    view.queryView("button").hide();
  }
}

2. Получить экземпляр компонента внутри Jet можно следующими способами:

• с помощью метода $$(id) у JetView.

Метод работает для внутреннего компонента, у которого определён локальный ID (localId).

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

• с помощью queryView, если localId не определён.

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

3. С помощью кода ниже можно определить, в компактном ли режиме приложение в данный момент:

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

Метод доступен из любого компонента или сервиса.

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

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

Метод доступен из любого компонента или сервиса.

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

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

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

Наверх