Управление событиями компонентов

Когда происходит событие, у него появляются данные, специфичные для этого типа события. Например, данные о событии Клик мышкой содержат координаты X и Y позиции мыши во время клика. Этот раздел объясняет, как использовать эти данные в привязках виджета. Мы создадим виджет с изображением, которое передвигается на последнюю позицию клика мыши.

Для создания простого виджета дважды щелкните на узле Виджеты () системного дерева или выберите его действие Создать виджет () во всплывающем меню. В открытом окне задайте свойство Имя виджета на componentEvents, а Описание виджета на Handling Component Events, нажмите OK. Вы попадете в Редактор виджетов с пустым шаблоном виджета.

Во-первых, установите свойство Разметка корневой панели на абсолютную разметку, чтобы можно было свободно позиционировать компоненты. Можно использовать любой другой контейнер вместо Корневой панели.

В качестве изображения будем использовать компонент Векторное рисование (). Перетащите его из палитры компонентов и поместите в корневой панели рабочей формы виджета:

Теперь вы можете загрузить любое SVG-изображение в компонент: нажмите кнопку Выбрать в свойстве SVG-файл, затем найдите и откройте подходящий файл в появившемся диалоговом окне. Измените размер компонента по своему желанию.

Выберите компонент и нажмите по нему правой кнопкой мыши. В открывшемся всплывающем меню выберите пункт Редактировать привязки:

Должен появиться диалог Привязки. Затем нажмите кнопку Добавить () для добавления новой пустой привязки. После этого кликните на кнопке многоточие [...] у Цели:

Это действие откроет мастер-программу Цели. Здесь необходимо выбрать, какое свойство будет меняться при помощи выполнения привязки. В нижней части диалогового окна отобразится ссылка на выбранное свойство. Здесь выберите свойство xCoordinate нашего компонента Векторное рисование (так что цель будет указывать на form/vectorDrawing1:xCoordinate$xCoordinate) и кликните OK.

Затем сделайте то же самое с полем Активатор и выберите событие Мышка нажата компонента Корневая панель во вкладке Событие компонента. Это означает, что привязка будет вызываться при помощи клика по корневой панели.

Теперь неоходимо выбрать Выражение, которое определяет каждый раз вызова привязки и записи ее результата в цель. Используется специальная схема 'value' для ссылки на параметры событий. Чтобы получить событие клика мыши x-координаты, нужно использовать следующую ссылку: {value/x}.

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

Чтобы центрировать изображение на позиции клика, нужно переместить x-координату нового компонента на половину ширины компонента. Итоговое выражение должно быть следующим: {value/x} - {form/vectorDrawing1:width$width} / 2. В написании выражений поможет Редактор выражений.

Итак, тепепрь, когда у нас есть привязка для x-координаты, теперь нужно то же самое для y-координаты. Для создания привязки мы можем использовать функцию дублирования Редактора таблиц данных: выберите привязку x-координаты в редакторе Привязок, нажмите кнопку Добавить (), удерживая клавишу Shift. Это действие создаст копию оригинальной строки в таблице привязок. Останется лишь исправить созданную привязку. Установите Цель на form/vectorDrawing1:yCoordinate$yCoordinate, а Выражение на {value/y} - {form/vectorDrawing1:height$height} / 2.

Наконец, нужно снять галочки с поля При запуске, чтобы привязка работала толко по данному событию. Итоговая таблица Привязок должна быть следующей:

Кликните на Готово () в инструментальной панели Редактора виджетов, чтобы завершить редактирование и запись виджета.В системном дереве должен появиться Контекст виджета () Обработка событий компонентов. Выберите действие Запуск виджета () во всплывающем меню виджета и откройте наш интерактивный виджет.