Определение виджета

В проекте используется библиотека @infomaximum/widget-sdk. Она содержит вспомогательные функции и основные интерфейсы, которые являются контрактами между разрабатываемыми виджетами и системой, в которой они будут использоваться. Также в библиотеке содержатся некоторые утилитные функции для удобства разработки.

Программный код виджета:

import {
  type IWidget,
  IGroupSettings,
  type ICustomWidgetProps,
} from "@infomaximum/widget-sdk";
import { type WidgetSettings } from "definition/settings";

declare class CustomWidget implements IWidget<WidgetSettings> {
  public static definition: IDefinition<WidgetSettings, IGroupSettings>

  public initialize(container: HTMLElement): void

  public update(
    container: HTMLElement,
    props: ICustomWidgetProps<WidgetSettings>
  ): void

  public mount(
    container: HTMLElement,
    props: ICustomWidgetProps<WidgetSettings>
  ): void

  public unmount(): void
}

Исходный код виджета представляет собой класс, который реализует интерфейс IWidget. Для реализации этого интерфейса необходимо определить методы жизненного цикла виджета: initialize, mount, update, unmount. Все перечисленные методы принимают параметром DOM элемент, в котором будет отображаться виджет.

Методы mount и update также принимают вторым параметром props интерфейса ICustomWidgetProps, расширяющего IWidgetProps. Props содержат:

• Информацию о текущем состоянии виджета, отчета, модели данных и всей системы
• Методы для взаимодействия виджета с системой в реальном времени

Кроме методов жизненного цикла у класса виджета есть статические поля, представленные в интерфейсе IWidgetEntity. На данный момент есть только одно статическое поле definition — экземпляр класса, реализующего интерфейс IDefinition. Класс содержит методы для конфигурирования виджета (создание панели настроек, заполнение настроек и др.).

После создания виджета его необходимо зарегистрировать в системе. Используйте для этого функцию defineWidget:

import manifest from "../manifest.json";
...
...
...
window.im.defineWidget(manifest.uuid, CustomWidget);

Регистрация виджета в системе происходит по уникальному идентификатору uuid (v4), который был сгенерирован в момент создания проекта и указан в манифесте виджета.