UI плагин (plugin) в Showcase

Материал из Course Orchestra
Версия от 04:19, 28 августа 2013; Super (обсуждение | вклад) (Новая страница: «== Общие сведения== Элемент информационной панели типа UI плагин предназначен для подключ…»)
(разн.) ← Предыдущая | Текущая версия (разн.) | Следующая → (разн.)
Перейти к: навигация, поиск

Общие сведения

Элемент информационной панели типа UI плагин предназначен для подключения произвольных визуальных внешних JavaScript и Flash компонент. Компонента должна быть подготовлена для подключения к Showcase следующим образом:

  • Каждый плагин должен быть помещен в отдельный каталог в ${userdata}\plugins\${pluginname}, где ${userdata} - userdata, в которую мы подключаем плагин, ${pluginname} - имя плагина
  • Каждый плагин принимает на вход один или несколько параметров (JSON, строковых, числовых...), которые могут содержать данные для отображения, шаблон, другие параметры. Например, имеет смысл разделить динамические данные и “статические” параметры для их отображения. Рекомендуется поместить в папку с плагином файл example.txt, содержащий примерный формат параметров плагина.
  • В папке с плагином должен быть файл-адаптер с именем ${pluginname}.js.
  • JS адаптер плагина должен содержать как минимум одну функцию: create${pluginname} (parentId, data, …), где ${pluginname} – имя компоненты, parentId – строка-идентификатор родительского HTML элемента (как правило, это div), data – данные в формате JSON.
  • Плагин должен подстраиваться под размеры родительского контейнера, идентификатор которого в DOM страницы передается в функцию create${pluginname}
  • Если подключаемый плагин - это flash, то необходимо передать файлу swf свойство wmode = "opaque". Это связано с тем, что только в этом случае плагин не будет перекрывать всплывающие окна в Showcase (в качестве примера можно посмотреть файл адаптера flashD.js из тестового набора).
  • Плагины могут зависеть от UI библиотек. UI библиотека - это достаточно крупный JavaScript или CSS-фреймворк, который использует плагины при работе. Примером библиотек являются ExtJS, jQuery... Библиотека должна находиться в каталоге ${userdata}\libraries\${libname}, где ${libname} - имя библиотеки.
  • Зависимости плагинов указываются в файле ${userdata}\plugins\${pluginname}\import.txt. Каждая строчка в таком файле - эти имя библиотеки, от которой зависит плагин.
  • Библиотеки подключаются к приложению путем добавления на главную страницу приложения элементов JavaScript и CSS файлов. Список подключаемых элементов JavaScript указывается в файле ${userdata}\libraries\${libname}\scriptList.txt. Список подлючаемых CSS указывается в файле ${userdata}\libraries\${libname}\styleList.txt. Каждая строка должна содержать путь к одному файлу. Путь указывается относительно корневого каталога библиотеки.

Внимание: библиотека dojo целиком включена в Showcase. Указывать ее в зависимостях не нужно!

Зависимость между Showcase, плагинами и библиотеками показана на следующей схеме.


Showcase:showcase-plugins-components2.png

Шаблон хранимой процедуры

Шаблон процедуры такой же как у вебтекста:

CREATE PROC 
	@main_context varchar(MAX)='',
	@add_context varchar(MAX)='',
	@filterinfo xml='',
	@session_context xml='',
	@element_Id varchar(MAX)='',
	@data xml ='' output,
        @settings xml ='' output

где в параметре @data находятся данные для передачи в плагин, в параметре @settings - настройки плагина для Showcase (события, размеры).

Алгоритм обработки данных

Алгоритм обработки данных состоит из 4 этапов:

  1. Запуск хранимой процедуры или другого источника данных;
  2. XSL преобразование данных;
  3. Пост-обработка данных в Jython;
  4. Адаптация данных для используемой компоненты в JS файле-адаптере плагина


Алгоритм показан на следующей схеме.

Showcase:externalcomponent.png

Предполагается, что источник данных (хранимая процедура) передает данные в формате XML, после чего они преобразуются в формат плагина (например, JSON) с помощью XSL-трансформации или Jython-скриптом.

Структура settings

См. схему pluginsettings.xsd 
<properties height="100px" width="200px">
    <action>
	default action
    </action>
    <event name="single_click" linkId="linkId">
	<action>
            ...........
        </action>
    </event>
</properties>

где height и width - высота и ширина для плагина.


Обработка событий (кликов и др.) в UI-Plugin

В Showcase доступно задание событий (например, при кликах, при прокрутке мышки и пр.) привязанных к элементам интерфейса внешнего подключаемого плагина. В общем, набор событий, который можно обрабатывать внутри подключенной компоненты зависит от самой внешней компоненты (что логично - компоненту пишут сторонние разработчики). Компонента сама должна обрабатывать (ловить) необходимые UI события.

Для обеспечения связи между действиями внутри плагина и изменениями (обновление, перерисовка с нужным контекстом) в существующих элементах Showcase (grid, webtext, chart и пр.)

- т.е. для задания привычных нам действий Showcase - необходимо:
  1. В настройках settings (см Структура settings в UI-плагин) указать action (см. Задание и структура действия), или несколько action с разными linkId (linkId-обязательный атрибут).
  2. Внести изменения во внешнюю компоненту (если необходимо) в функцию обработки события. В данной функции, помимо прочих действий (если они необходимы), требуется вызвать java script процедуру в формате.
gwtPluginFunc(''divId'', ''linkId'');

где divId - это id элемента div в который помещен плагин, а linkId - это id события, которое прописано в settings.

Данная функция автоматически определяется в DOM-модели главной страницы приложения.