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

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

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

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

Создаем новый файл 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	Событие `При щелчке`.

Файл SuperControl.xml копируем в папку `Каталог-установки-Конструктора-Web-Разметок/Plugins/%Каталог-Решения%.

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

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

Добавляем в папку расширения файл 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	Интерфейсный класс.

Настраиваем клиентское расширение в файле 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 }]
})

Собираем клиентское расширение с помощью команды npm run build.
Полученный файл extension.js копируем в папку {wcd/Content/Modules/SuperControlExtension/ на сервере Web-клиента.
Следующие действия выполняются после выполнения всех действий:
1. Перезапустить dvwebclient, чтобы загрузились скрипты с элементом управления.
2. Откройте Конструктор Web-разметок и настроить разметку с использованием Супер элемента управления.

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

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