3.5.1. Внешний компонент#

3.5.1.1. Глоссарий#

Внешний компонент
Серверный код компонента содержится в Abi-файле прикладного модуля.
See also
- Шаблон серверного кода внешнего контрола
- Шаблон серверного кода внешнего компоновщика
Клиентский код компонента содержится в *.js файле внешнего JS модуля.
See also
- Шаблон клиентского кода внешнего контрола
- Шаблон клиентского кода внешнего компоновщика

3.5.1.2. Модель данных#

Модель данных внешнего компонента является деревом [E/P]ExtModelBranch узлов.

Содержит служебную информацию, необходимую для функционирования компонента, и данные, отображаемые в UI-элементах, компонента.
Корневой узел модели данных создаётся при создании Ext-компонента по умолчанию.
Дочерние узлы модели данных создаются разработчиком компонента в серверном коде Abi компонента при необходимости.
Каждый узел модели данных может содержать в качестве значения: JsonObject / JsonArray / String / byte[].

Структура [E/P]-узлов внешнего компонента#

  [E/P]ExtComponent <-- внешний компонент.
    |--[E/P]ExtModelBranch  <-- корень модели данных внешнего компонента.
       |-- [E/P]ExtModelBranch
       |-- [E/P]ExtModelBranch
           |-- [E/P]ExtModelBranch

3.5.1.3. Алгоритм работы#

3.5.1.3.1. Определение метаданных#

В Avm выборки указываются name и/или backendClass, frontendUri.

Пример.

backendClass и frontendUri могут быть сопоставлены name в файле META-INF/web-extensions.xml соответствующего прикладного модуля.

resources/META-INF/web-extensions.xml#

<?xml version="1.0" encoding="UTF-8"?>
<exts module="btk">
    <ext name="HtmlFrame" backendClass="ru.bitec.app.btk.html.web.Btk_HtmlControlAbi" frontendUri="ru/bitec/app/btk/html/web/main.js"/>
</exts>

3.5.1.3.2. Создание серверной модели компонента#

После открытия выборки данных, при создании фрейма с внешним компонентом, через Abi-фабрику, создаётся экземпляр *Abi.scala класса.
Вызывается метод ru.bitec.app.gtk.gl.ext.ExtComponentAbi#onBuild, где серверный прикладной код компонента формирует модель данных.
Серверная модель компонента помечается к отправке на презентер.

3.5.1.3.3. Создание клиентской модели компонента#

При получении браузером модели внешнего компонента, формируется корневой HTML-элемент компонента, определяющий границы компонента.
После физического присоединения корневого HTML-элемента к DOM приложения, инициируется загрузка JS-модуля, относительный адрес которого указан в настройках внешнего компонента или свойстве метаданных выборки frontendUri.
На событие получения ссылки на JavaScript модуль, вызывается один из методов ExtJsModule: createControl(name), createComposer(name) для получения JavaScript-объекта с клиентским кодом внешнего компонента.

Note

Получение ссылки на JavaScript модуль всегда асинхронно, не зависимо от источника JavaScript модуля: сервер или кэша приложения. Это необходимо для обеспечения единообразия в работе компонентов.
Выполняется инициализация компонента вызовом ExtComponent.init(ExtContext extContext). Через переданную ссылку на контекст ExtContext, компонент, реализовав обработчик событий ExtChangeModelHandler, подписывается на событие изменения модели данных.
Выполняется присоединение компонента к DOM приложения вызовом ExtComponent.attach(parent). JS-код, на основе модели данных создаёт, DOM-структуру компонента.

3.5.1.3.4. Работа компонента#

Взаимодействие между серверным и клиентским кодом осуществляется через передачу состояния модели данных компонента с сервера на клиент и обработку событий ExtChangeModelHandler.
Клиентский код может посылать на сервер JSON-запросы через методы контроллера компонента ExtController: postAsyncRequest(request), postSyncRequest(request), postInputData(inputMarker, inputData).
Компонент реагирует на действия пользователя выполняя обработку событий от HTML-элементов в JS-коде.

3.5.1.3.5. Уничтожение клиентской модели компонента#

При уничтожении фрейма с внешним компонентом, выполняются:

Отсоединение компонента от DOM-модели приложения вызовом ExtComponent.detach().
Высвобождение ресурсов компонента вызовом ExtComponent.destroy().
Освобождение ссылки на JS-модуль.

3.5.1.3.6. Уничтожение серверной модели компонента#

Вызывается метод ru.bitec.app.gtk.gl.ext.ExtComponentAbi#onClear, где серверный прикладной код компонента уничтожает модель данных.