Элемент управления "Пример изображения"

Данный раздел содержит описание примера элемента управления Пример изображения.

Ссылка на пример на GitHub: Image.

Пример рассчитан на версию Web-клиента 6.1 или выше.

Перечень необходимых инструментов:

Проект "ImageDesignerExtension"

  1. Проект-расширение для конструктора разметок. Содержит описание элемента управления Пример изображения для программы Конструктор Web-разметок.

  2. Демонстрирует описание и подключение нового ЭУ, используя класс ControlTypeDescription, задание ему стандартных свойств, реализованных в программе Конструктор Web-разметок[1] и добавление кастомных свойств, используя класс PropretyDescription [2].

  3. Для собственного свойства Slider реализован свой редактор, SliderEditor.xaml.

Проект "ImageServerExtension"

Проект-расширение для Web-клиента. Содержит бизнес-логику и реализацию элемента управления на сервере. Демонстрирует работу с собственным свойством Slider — преобразование его значения string в рабочую модель, List с помощью класса SliderConverter и метода ConvertForDisplay. Эта модель дублируется на клиенте ISliderItem[]. Таким образом реализована связка List — JSON — ISliderItem[] между сервером и клиентом.

С помощью Slider можно пролистывать несколько изображений, вешая обработчики onClick на соответсвующее элементы разметки.

Проект "ImageWebExtension"

Содержит скрипты и стили ЭУ Пример изображения.

Сборка и установка

  1. Откройте /Samples.sln.

  2. Соберите проект Controls > Image > ImageDesignerExtension.

  3. Соберите проект Controls > Image > ImageServerExtension.

  4. Откройте консоль в папке Controls > Image > ImageWebExtension и выполните команду npm install, затем npm update и в конце npm run build:prod.

  5. Соберите проект ControlProperties > Url > UrlPropertyDesignerExtension.

  6. Скопируйте каталог SamplesOutput\Plugins\ImageDesignerExtension в каталог Путь к директории с исполняемым файлом конструктора Web-разметок\Plugins.

  7. Скопируйте каталог SamplesOutput\Extensions\ImageServerExtension в каталог Путь к сайту Web-клиента\Extensions.

  8. Скопируйте каталог SamplesOutput\Content\Modules\ImageWebExtension в каталог Путь к сайту Web-клиента\Content\Modules.

  9. Скопируйте каталог SamplesOutput\Plugins\UrlPropertyDesignerExtension в каталог Путь к директории с исполняемым файлом конструктора Web-разметок\Plugins.

  10. Перезапустите dvwebclient.

Проверка примера

  1. Запустите конструктор разметок.

  2. Скопируйте любую разметку.

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

  4. Откройте разметку и добавьте в нее новый элемент управления Пример изображения.

  5. Задайте желаемые параметры элемента управления.

    При указании URL адрес должен быть доступен согласно политике CORS. Большинство серверов не разрешают запросы из веб-приложений, расположенных на других доменах. Политике CORS гарантированно удовлетворяют адреса внутри Web-клиента, например Content/App/Assets/Images/favorite-empty.svg.

  6. Сохраните разметку.

  7. Перезапустите dvwebclient.

  8. Откройте карточку с этой разметкой.

  9. Убедитесь, что появился новый элемент управления.

1. См. PropertyFactory.GetNameProperty()
2. См. свойство Slider, ImageHeight)