Введение

Введение#

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

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

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

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

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

Контрол#

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

Для реализации смотри: 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)
      Содержит правила отображения и обновления данных выборки

Node.js проект#

Проект на Node.js представляет собой набор файлов, редактируемых 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>
Содержание