Пример. Элемент управления "SuperControl"

В данном примере будут разработаны компоненты элемента управления SuperControl: текстовый описатель элемента управления и клиентский компонент.

Элемент управления SuperControl является ссылкой, адрес которой указывается в программе Конструктор Web-разметок. Для элемента управления доступно свойство Видимость и событие При щелчке.

  1. Формируем текстовый описатель элемента управления.

    1. Создаем новый файл SuperControl.xml со следующим содержимым:

      <?xml version="1.0" encoding="utf-8" ?>
<Controls>
    <Control Name="SuperControl" DisplayName="Супер элемент управления">
        <Properties>
            <Property Type="Name" /> (1)
            <Property Type="Visibility" /> (2)

            <Property Name="Url" Category="BehaviorCategory" DataType="System.String" /> (3)
        </Properties>
        <Events>
            <Event Name="Click" ResourceKey="ControlTypes_ClickEventProperty"/>  (4)
        </Events>
    </Control>
</Controls>
      1 Название.
      2 Видимость.
      3 Свойство строкового типа для указания адреса ссылки.
      4 Событие При щелчке.

    2. Файл SuperControl.xml копируем в папку C:\Program Files (x86)Docsvision\WebClient\5.5\Plugins\.

  2. Формируем клиентское расширение с клиентским компонентом элемента управления.

    1. Создаем новое клиентское расширение.

    2. Добавляем в папку расширения файл src/Controls/SuperControl.tsx со следующим содержимым:

      import { BaseControlParams, BaseControlState, BaseControl } from "@docsvision/webclient/System/BaseControl";
import { r } from "@docsvision/webclient/System/Readonly";
import { apiEvent } from "@docsvision/webclient/System/Event";
import { BasicApiEvent } from "@docsvision/webclient/System/ApiEvent";
import { IEventArgs } from "@docsvision/webclient/System/IEventArgs";
import { BaseControlImpl } from "@docsvision/webclient/System/BaseControlImpl";
import { SimpleEvent } from "@docsvision/webclient/System/SimpleEvent";
import React from "react"; (1)

export class SuperControlParams extends BaseControlParams { (2)
    @r url?: string; (3)
    @apiEvent onClick?: BasicApiEvent<IEventArgs>;
}

export interface SuperControlState extends SuperControlParams, BaseControlState { (4)
}

export class SuperControlImpl extends BaseControlImpl<SuperControlParams, SuperControlState> { (5)
    construct() {
        super.construct();

        this.state.onClick = SimpleEvent.Create<IEventArgs>(this.state.wrapper); (6)

        this.clickHandler = this.clickHandler.bind(this); (7)
    }

    clickHandler() { (8)
        SimpleEvent.cast(this.state.onClick).trigger(); (9)
        window.open(this.props.url, "_blank");
    }

    renderControl() { (10)

        if (this.props.visibility) { (11)
            return (
                <a onClick={this.clickHandler}>{this.props.url}</a> (12)
            );
        }
    }
}

export class SuperControl extends BaseControl<SuperControlParams, SuperControlState> {
    protected createParams() { (13)
        return new SuperControlParams();
    }

    protected createImpl() {
        return new SuperControlImpl(this.props, this.state);
    }
}
      1 Импорт используемых модулей.
      2 Класс параметров. Объявляем отсутствующее в BaseControlParams свойство url и непрерываемое событие onClick.
      3 Название свойства url здесь должно быть с маленькой буквы!
      4 Интерфейс состояния. Внутренние состояния не используются.
      5 Класс реализации.
      6 Инициализируем событие onClick.
      7 Связываем внутренний обработчик с событием clickHandler.
      8 При нажатии ссылки будет выполнен переход по ней, а также вызван обработчик события onClick.
      9 Вызываем обработчик события onClick, который указан в Конструкторе web-разметок.
      10 Возвращаем VirtualDOM элемента управления.
      11 Если элемент управления невидим (Visibility в значении FALSE), то ничего не возвращаем.
      12 При нажатии ссылки вызываем внутренний обработчик clickHandler
      13 Интерфейсный класс.

  3. Настраиваем клиентское расширение в файле src/Index.tsx.

    import { extensionManager } from "@docsvision/webclient/System/ExtensionManager";
import { SuperControl } from "./Controls/SuperControl";

extensionManager.registerExtension({
    name: "Client extension with SuperControl",
    version: "1.0",
    controls: [{ controlTypeName: "SuperControl", constructor: SuperControl }]
})

  4. Собираем клиентское расширение с помощью команды npm run build.

  5. Полученный файл Site\Content\Modules...\extension.js копируем в папку C:\Program Files (x86)Docsvision\WebClient\5.5\Site\Content\Modules\SuperControlExtension\ на сервере Web-клиента.

  6. Следующие действия выполняются после выполнения всех действий:

    1. Перезапустить сервер Web-клиента (IIS), чтобы загрузились скрипты с элементом управления.

    2. Открыть Конструктор Web-разметок и настроить разметку с использованием Супер элемента управления.

При настройке элемента управления должны быть доступны свойства Url и Видимость, а также событие При щелчке, для которого можно настроить обработчик.

В веб-браузере Супер элемент управления представляет собой ссылку (тег a), при нажатии на которую будет выполнен переход по адресу, указанному в Url, а также вызван обработчик, указанный в событии При щелчке.