Кастомизация File Manager

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

Кастомизация компонентов и моделей подразумевает работу с исходным кодом.

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

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

Компоненты

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

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

views
  cards.js
  editor.js
  menus
     addnewmenu.js
   ...

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

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

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

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

models
  Backend.js
  Cache.js
  Local.js
  Operations.js
  Progress.js
  Upload.js

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

$$('fm').getService('operations').remove(selected);

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

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

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

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

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

webix.ui({
    view: "filemanager",
    override: new Map([
      [fileManager.views.topbar, CustomTopBar]
    ]),
});

Одиночный режим отображения

Чтобы показывать определённую вкладку ("cards", "table", "total") без возможности переключения между ними, скройте компонент Tabbar у класса fileManager.views.topbar:

class CustomTopBar extends fileManager.views.topbar {
  init() {
    // логика по умолчанию
    super.init();
    // удаление компонента может привести к ошибкам
    // скрыть компонент безопаснее, чем удалить его
    this.$$("modes").hide();
  }
}

После этого замените класс по умолчанию новым классом с помощью свойства override:

{
    view:"filemanager",
    mode: "cards", // показываем любую вкладку (кроме "table")
    override: new Map([[fileManager.views.topbar, CustomTopBar]]),
}

Related sample:  File Manager: Single Mode

Больше примеров кастомизации смотрите в практических руководствах.

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

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

class CustomTopBar extends fileManager.views.topbar {
    init() {
        // логика по умолчанию 
        super.init();
        // удаление компонента может спровоцировать ошибку
        // скрытие компонента безопасно
        this.$$("modes").hide();
    }
}

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

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

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

init() {
    // исходная логика
    super.init();
    // получаем экземпляр компонента с localId = "modes"
    this.$$("modes").hide();
}
  • с помощью queryView, если localId не определён.
init(view) {
    // исходная логика
    super.init();
    // получаем экземпляр первой кнопки segmented
    view.queryView("segmented").hide();
}

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

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

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

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

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

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

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

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

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

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

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

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

Related sample:  File Manager: Local Data

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

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

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

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

Обратите внимание, что у кода для IE11 и Edge должен быть другой синтаксис.

Наверх
If you have not checked yet, be sure to visit site of our main product Webix best ui framework and page of javascript file explorer product.