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

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

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

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

Компоненты

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

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

views
  chats.js
  list.js
  messages
    toolbar.js
  ...

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

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

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

models
  Backend.js
  Helpers.js
  Local.js
  Operations.js
  Upload.js
  Emojis.js
  VoiceMessages.js

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

$$('myChat').getService('helpers').listAvatar(user, cssClass);

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

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

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

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

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

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

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

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

Произвольное содержимое тулбара

Чтобы добавить произвольные данные в тулбар вам необходимо:

1. Создать класс и наследовать его от chat.views["messages/toolbar"].
2. Переопределить метод TitleTemplate таким образом, чтобы он возвращал желаемый результат.

class CustomToolbar extends chat.views["messages/toolbar"] {
  TitleTemplate(chat) {
    var helpers = this.app.getService("helpers"); 
    // получаем аватарки
    var result = helpers.listAvatar(chat, "webix_chat_toolbar_avatar");
    return (
      result +
      `
      <div class='webix_chat_title'>
          <div class="webix_chat_messages_groupchat_name">${chat.name}</div>
          <div class="webix_chat_messages_groupchat_members">
            Custom content here
          </div>
      </div>`
        );
    }
}

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

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

Related sample:  Chat: Custom Toolbar Content

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

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

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

class CustomToolbar extends chat.views.sidebar {
  init(view) {
    // сохраняем логику по умолчанию 
    super.init();
    // удаление компонента может привести к ошибке
    // прятать компонент безопасно
    this.$$("search").hide();
  }
}

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

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

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

init(view) {
  // сохраняем логику по умолчанию 
  super.init();
  // удаление компонента может привести к ошибке
    // прятать компонент безопасно
  this.$$("search").hide();
}

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

init(view) {
    // логика по умолчанию
    super.init();
    // получаем экземпляр поисковой строки
    view.queryView("chat-search").hide();
}

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

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

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

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

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

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

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

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

• добавлять и вызывать свои методы
• переопределить любой существующий метод, но делайте это с осторожностью

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

class MyBackend extends chat.services.backend {
  chats(){
    // клиентские данные
    return webix.promise.resolve(chats);
  }
}

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

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

Related sample:  Chat: Local Data

Больше информации о сервисе Backend в Chat читайте в этой статье.

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

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

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

Наверх