Введение#

Веб расширение#

Отвечает за отображение данных выборки в браузере и взаимодействие с пользователем. Расширение состоит из:

  • Бэкэнд компонента
    Обрабатывает бизнес локику компонента на стороне сервера.

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

Типы расширений#

Контрол#

Расширение отображающее данные фрейма

Для реализации смотри: btk/src/web/gs-web-dtk/src/common/control.ts

Компоновщик#

Расширение компонующий данные выборки, управляет координатами и размерами фрейма, а так же дочерних выборок.

Для реализации смотри: btk/src/web/gs-web-dtk/src/common/composer.ts:8

Структура веб расширения#

Веб расширение состоит из:

  • Клиентской части
    Ресурсов доступных из браузера

    • Обязательно:

      • main.js
        javascript bundle содержащий в себе es module расширения для клиента. Данный бандл создается с помощью nodejs модуля.

    • Дополнительно:

      • Изображения

      • Html страницы

      • Файлы доступные по url из браузера

  • Серверной части
    Бизнес логики на сервере

    • Выборка(AVI)
      Содержит данные и пользовательские операции

    • Компонент расширения (ABI – application backend interface)
      Содержит правила отображения и обновления данных выборки

Nodejs проект#

Nodejs проект представляет из себя набор файлов редактируемый vscode с помощью которого создается javascript bundle es модуля который загружается в браузера для выполннения бизнес логики веб расширения на стороне клиента

Входной точкой для сборки модуля является файл btk/src/web/ext/packages/{extension_name}/src/main.ts Данный файл экспортирует контекст модуля:

export default new ModuleContext()

Контекст модуля#

Содержит функции:

  • Создание контрола

  • Создания компоновщика

Для реализации смотри: btk/src/web/gs-web-dtk/src/common/module.ts

Создания веб расширения контрола#

  1. Создайте проект nodejs
    Проект должен быть создан в папке btk/src/web/ext/packages.

    Подробности смотрите в btk/src/web/ext/doc/CONTRIBUTING.md

  2. Создайте модуль в nodejs проекте
    Модуль представляет из себя входной файл для компеляции packages/dashboard/src\main.ts который реализовывает контекст модуля

  3. Создайте контрол на фратэнд
    Пример: btk/src/web/ext/packages/dashboard/src/control.ts

  4. Реализуйте фабрику контрола в контексте модуля

  5. Создайте бэкэнд контрола
    Пример: ru.bitec.app.btk.dashboard.Btk_DashboardControlAbi

  6. Создайте трейт расширения для выборки реализующий типизированное взаимодействие между abi и avi ru.bitec.app.btk.dashboard.Btk_DashboardAbsAvi

  7. Объявите расширение в файле btk/src/main/resources/META-INF/web-extensions.xml
    Пример:

    <ext name="DashboardControl" backendClass="ru.bitec.app.btk.dashboard.Btk_DashboardControlAbi" frontendUri="btk/dashboard/web/main.js"/>
<ext name="DashboardComposer" backendClass="ru.bitec.app.btk.dashboard.Btk_DashboardComposerAbi" frontendUri="btk/dashboard/web/main.js"/>

Подключение веб расширения к выборке#

  1. Создайте выборку

  2. Унаследуйте выборку от трейта расширения

  3. В отображения выборки добавьте в фрейм наименование контрола

Пример:

<simpleComposer>
    <frame filter.isVisible="false">
        <extControl name="btk/Dashboard"/>
     </frame>
</simpleComposer>