.. _ext_component: Внешний компонент =================== Глоссарий ------------------ - :term:`Внешний компонент` - :term:`Серверный код` компонента содержится в :term:`Abi`-файле прикладного модуля. .. seealso:: - :ref:`Шаблон серверного кода внешнего контрола` - :ref:`Шаблон серверного кода внешнего компоновщика` - :term:`Клиентский код` компонента содержится в ``*.js`` файле :ref:`внешнего JS модуля`. .. seealso:: - :ref:`Шаблон клиентского кода внешнего контрола` - :ref:`Шаблон клиентского кода внешнего компоновщика` .. _ext_component_data_model: Модель данных ------------------ :term:`Модель данных` внешнего компонента является деревом [:term:`E`/:term:`P`]ExtModelBranch узлов. - Содержит служебную информацию, необходимую для функционирования компонента, и данные, отображаемые в UI-элементах, компонента. - Корневой узел модели данных создаётся при создании Ext-компонента по умолчанию. - Дочерние узлы модели данных создаются разработчиком компонента в серверном коде Abi компонента при необходимости. - Каждый узел модели данных может содержать в качестве значения: JsonObject / JsonArray / String / byte[]. .. code-block:: :caption: Структура [E/P]-узлов внешнего компонента [E/P]ExtComponent <-- внешний компонент. |--[E/P]ExtModelBranch <-- корень модели данных внешнего компонента. |-- [E/P]ExtModelBranch |-- [E/P]ExtModelBranch |-- [E/P]ExtModelBranch .. seealso:: 1. :java:type:`CoreEExtModelBranch` 2. :java:type:`ExtPNode` Алгоритм работы ------------------ Определение метаданных ````````````````````````` В :term:`Avm` выборки указываются :xsd:attr:`name` и/или :xsd:attr:`backendClass`, :xsd:attr:`frontendUri`. :ref:`Пример`. ``backendClass`` и ``frontendUri`` могут быть сопоставлены ``name`` в файле ``META-INF/web-extensions.xml`` соответствующего прикладного модуля. .. code-block:: xml :caption: resources/META-INF/web-extensions.xml :linenos: Создание серверной модели компонента `````````````````````````````````````````````````` - После открытия выборки данных, при создании фрейма с внешним компонентом, через :java:type:`Abi-фабрику`, создаётся экземпляр :term:`*Abi.scala` класса. - Вызывается метод ``ru.bitec.app.gtk.gl.ext.ExtComponentAbi#onBuild``, где серверный прикладной код компонента формирует модель данных. - Серверная модель компонента помечается к отправке на презентер. Создание клиентской модели компонента `````````````````````````````````````````````````` - При получении браузером модели внешнего компонента, формируется корневой HTML-элемент компонента, определяющий границы компонента. - После физического присоединения корневого HTML-элемента к DOM приложения, инициируется загрузка :ref:`JS-модуля`, относительный адрес которого указан в настройках внешнего компонента или свойстве метаданных выборки :xsd:attr:`frontendUri`. - На событие получения ссылки на JavaScript модуль, вызывается один из методов :java:type:`ExtJsModule`: :java:meth:`createControl(name)`, :java:meth:`createComposer(name)` для получения JavaScript-объекта с клиентским кодом внешнего компонента. .. note:: Получение ссылки на JavaScript модуль всегда асинхронно, не зависимо от источника JavaScript модуля: сервер или кэша приложения. Это необходимо для обеспечения единообразия в работе компонентов. - Выполняется инициализация компонента вызовом :java:meth:`ExtComponent.init(ExtContext extContext)`. Через переданную ссылку на контекст :java:type:`ExtContext`, компонент, реализовав обработчик событий :java:type:`ExtChangeModelHandler`, подписывается на событие изменения модели данных. - Выполняется присоединение компонента к DOM приложения вызовом :java:meth:`ExtComponent.attach(parent)`. JS-код, на основе модели данных создаёт, DOM-структуру компонента. Работа компонента `````````````````````````````````````````````````` - Взаимодействие между серверным и клиентским кодом осуществляется через передачу состояния модели данных компонента с сервера на клиент и обработку событий :java:type:`ExtChangeModelHandler`. - Клиентский код может посылать на сервер JSON-запросы через методы контроллера компонента :java:meth:`ExtController`: :java:meth:`postAsyncRequest(request)`, :java:meth:`postSyncRequest(request)`, :java:meth:`postInputData(inputMarker, inputData)`. - Компонент реагирует на действия пользователя выполняя обработку событий от HTML-элементов в JS-коде. Уничтожение клиентской модели компонента `````````````````````````````````````````````````` При уничтожении фрейма с внешним компонентом, выполняются: - Отсоединение компонента от DOM-модели приложения вызовом :java:meth:`ExtComponent.detach()`. - Высвобождение ресурсов компонента вызовом :java:meth:`ExtComponent.destroy()`. - Освобождение ссылки на JS-модуль. Уничтожение серверной модели компонента `````````````````````````````````````````````````` - Вызывается метод ``ru.bitec.app.gtk.gl.ext.ExtComponentAbi#onClear``, где серверный прикладной код компонента уничтожает модель данных. .. seealso:: 1. :ref:`Внешний контрол` 2. :ref:`Внешний компоновщик` 3. Метаданные: :java:type:`ExtControl`, :java:type:`ExtComposer` 4. Core-интерфейсы: :java:type:`CoreExtAbiFactory`, :java:type:`CoreExtComponentAbi`, :java:type:`CoreExtComponent`