Описание проекта TemplateWebExtension

Проект TemplateWebExtension является частью репозитория WebClient-Samples. Данный проект предназначен для разработки и сборки клиентских расширений и скриптов.

Описание файлов проекта

В папке "TemplateWebExtension" расположены файлы:

  • copy-path.js — содержит константы с названием расширения и параметрами сборки; в данном файле указывается каталог, в который выгружаются файлы при сборке.

  • gulpfile.js — файл конфигурации Gulp (используется для сборки стилей);

  • package.json — файл конфигурации NPM с командами сборки и списком зависимостей.

  • package-lock.json — служебный файл NPM.

  • rollup.config.js — файл конфигурации Rollup. Используется для сборки скриптов в один файл — "бандл".

  • tsconfig.json — файл конфигурации TypeScript.

  • node_modules — служебная папка NPM, в которую при выполнении команды npm install загружаются npm-зависимости.

  • src — папка для размещения исходных файлы расширения.

Папка src содержит файлы:

  • EventHandlers.tsx — пример файла с обработчиком события.

  • Index.ts-- файл с обязательной функцией регистрации клиентского расширения.

  • Template.scss — пример файла стилей.

Необходимое ПО

Описание файла Index.ts

Содержимое файла Index.ts:
import * as EventHandlers from "./EventHandlers";
import { extensionManager } from "@Docsvision/webclient/System/ExtensionManager";

extensionManager.registerExtension({ (1)
    name: "Template web extension",
    version: "1.0",
    globalEventHandlers: [ EventHandlers ]
})
1 Регистрация расширения позволяет корректно установить все обработчики событий, сервисы и прочие сущности веб-приложения.

Команда import * as EventHandlers from "./EventHandlers" импортирует все публичные сущности (с export) из файла EventHandlers (.tsx).

Чтобы импортировать функции из другого файла, необходимо добавить новую команду импорта, указав относительный путь к файлу:
import * as EventHandlers from "./EventHandlers";
import * as NewEventHandlers from "./Scripts/NewEventHandlers"; (1)
1 Добавлена строчка импорта из файла /Scripts/NewEventHandlers.

Команда import { extensionManager } from "@Docsvision/webclient/System/ExtensionManager" импортирует из модуля "@Docsvision/webclient/System/ExtensionManager" сущность extensionManager (менеджер расширений).

Команда extensionManager.registerExtension({ … }) регистрирует клиентское расширение с названием Template web extension, которое предоставляет глобальные обработчики (globalEventHandlers).

Чтобы добавить в расширение обработчики из нового файла, добавьте их в массив globalEventHandlers:
globalEventHandlers: [ EventHandlers, NewEventHandlers] (1)
1 Добавлены обработчики из NewEventHandlers.

Описание файла EventHandlers.tsx

Содержимое файла:
import { IEventArgs } from "@Docsvision/webclient/System/IEventArgs";
import { Layout } from "@Docsvision/webclient/System/Layout";

export function someHandler(sender: Layout, e: IEventArgs) { (1)
    ...
}
1 Все функции, классы и переменные, используемые за пределами модуля (т.е. файла), должны экспортироваться (содержать ключевое слово export в объявлении).

Команды import в начале файла выполняют загрузку из модулей Web-клиента сущностей, используемых в коде обработчика.

Функция someHandler является примером обработчика события разметки (тип sender — Layout). Ключевое слово export указывает, что данная функция доступна для импорта. Чтобы экспортировать другую функцию, необходимо также указывать ключевое слово export:

export function someHandler(sender: Layout, e: IEventArgs) {

}

export function newHandler(sender: Employee, e: IEventArgs) { (1)
}
1 Добавлена новая функция для обработки события в ЭУ с типом Employee.

Для создания клиентского скрипта достаточно добавить функции-обработчики в файл EventHandlers.tsx. Например, следующий код, вызванный при изменении значения элемента управления Сотрудник, отобразит информационное окно с ФИО выбранного сотрудника:

import { Employee } from "@Docsvision/webclient/BackOffice/Employee";
import { IEventArgs } from "@Docsvision/webclient/System/IEventArgs";
import { MessageBox } from "@Docsvision/webclient/Helpers/MessageBox/MessageBox"; (1)

export function changeEmployeeHandler(sender: Employee, e: IEventArgs) { (2)
  MessageBox.ShowInfo(sender.params.value.displayName);
}
1 Импорт необходимых сущностей из модулей Web-клиента.
2 Реализация функции-обработчика.
Функции-обработчики должны экспортироваться — сопровождаться ключевым словом export.