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

Chat это комплексный виджет, созданный с помощью MV* фреймворка Webix Jet.

Природа Jet приложения

Chat разработан как Jet-приложение. Jet-приложение это модуль, который можно использовать обособленно или же как Webix виджет. Каждое Jet-приложение это класс, который в свою очередь наследуется от класса JetApp.
Более подробную информацию о JetApp и его API можно найти по этим ссылкам:

Интерфейс Chat разделён по частям. Каждая часть это модуль (класс), который наследуется от класса JetView. Больше информации о JetView:

Jet Views в Chat

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

Преимущества такого подхода

  • простая кастомизация благодаря ООП
  • возможность настраивать любую часть виджета не меняя исходный код
  • возможность повторно использовать любой модуль Chat (компонент или сервис) в своем приложении
  • такой подход позволяет держать UI компонента и его логику вместе

Код для IE 11 и Edge должен иметь другой синтаксис.

Как кастомизировать Jet views в Chat

Изменения компонентов

Прежде всего необходимо создать класс и наследовать его от view по умолчанию или от JetView:

class CustomToolbar extends chat.views["users/toolbar"] {
    /* Переопределение или расширение логики по умолчанию */
}

У JetView есть два метода, которые можно безопасно переопределять:

  • config() для изменений в UI,
  • init() для изменений в UI и логике,
  • вы также можете создавать собственные методы.
class CustomToolbar extends chat.views["messages/toolbar"] {
    init() {
        // логика по умолчанию
        super.init();
        // ваша логика
        this.doSomething();
    }
    doSomething(){
        // какое-либо действие при инициализации
    }
}

Остаётся переопределить класс по умолчанию:

webix.ui({
    view: "chat",
    url: "//localhost:3200/",
    override: [chat.views["messages/toolbar"], CustomToolbar]
});

Как изменить поведение компонента

Чтобы изменить поведение какого-либо view, достаточно добавить необходимые методы его классу:

  1. Создайте view класс;
  2. Опишите метод;
  3. Вызовите метод.
class CustomToolbar extends chat.views["messages/toolbar"] {
  // добавление опции "Add members"
  GetMenuData() {
    let data = super.GetMenuData();
    const _ = this.app.getService("locale")._;
    data.push({ id: "addMembers", value: _("Add members") });
    return data;
  }
  // вызов обработчика "Add members" при клике по элементу меню
  InitMenu() {
    const menu = super.InitMenu();
    menu.attachEvent("onItemClick", id => {
      if (id == "addMembers")
        this.app.callEvent("newMembers", [this.State.chatId]);
    });
  }
}

Related sample:  Chat: Custom View

Наверх