В следующем примере описывается создание панели с несколькими различными объектами. При этом некоторую информацию можно будет перетаскивать между объектами. Вы научитесь использовать функцию перетаскивания.
Рисунок: панель с поддержкой перетаскивания
Приведенная выше панель позволяет выполнять следующие действия:
- Выбирать цвет с помощью панели выбора цвета «КАСКАД Цифра» (эта панель открывается при нажатии на соответствующую кнопку), а затем перетаскивать его на расположенный на панели объект (прямоугольник, сектор, полигон или эллипс).
- Выбирать точку данных из дерева точек данных и перетаскивать ее на текстовое поле или на текстовый редактор.
- Выбирать название цвета из иерархического списка и перетаскивать его на текстовое поле или на текстовый редактор.
Процесс создания панели:
- С помощью графического редактора GEDI создайте панель со следующими графическими объектами:
- 1 прямоугольник
- 1 кнопка с рисунком «<путь_КАСКАД>/pictures/colors.png»
- 2 текстовых поля
- 1 дерево точек данных
- 1 сектор
- 2 текстовых редактора
- 1 иерархический список
- 1 полигон
- 2 эллипса
- Для всех созданных объектов в графическом редакторе присвойте значение «TRUE» атрибуту «Accept drops». Атрибут «Accept drops» указывает, может ли графический объект принимать перетаскиваемую информацию.
- В графическом редакторе для прямоугольника, сектора, полигона и эллипсов присвойте значение «TRUE» атрибуту «Перетаскиваемый» («Draggable»). Атрибут «Перетаскиваемый» («Draggable») указывает, возможно ли перетаскивание информации с этого объекта.
- Для прямоугольника используйте событие «DragStart». С помощью сценария для этого события определяется, какая информация должна быть предоставлена операции перетаскивания. Прямоугольник должен предоставлять операции перетаскивания информацию о цвете. Для этого следует использовать следующий сценарий.
| main(int keys){ string info; info = this.backCol; dragStart(info);} |
ВНИМАНИЕ
В настоящее время функция «dragStart» поддерживает только строковый тип данных (то есть только ТЕКСТ). В противном случае функция возвращает значение «-1» и выводится сообщение об ошибке.
- Для кнопки используйте следующий код, исполняемый при наступлении события «Clicked» (щелчок):
| main(){ string color; colorEditor(color); RECTANGLE2.backCol=color;} |
С помощью этого кода открывается панель выбора цвета «КАСКАД Цифра» и прямоугольнику «RECTANGLE2» назначается выбранный цвет.
- Для всех текстовых полей используйте следующий код, исполняемый при наступлении события «DragDrop»:
| main(string information, int dragType){ this.text = information;} |
C помощью данного сценария перетаскиваемая информация, например, имя точки данных, отображается в текстовом поле.
- Для события «DragStart» сектора используйте следующий код:
| main(int keys){ string color = this.backCol; dragStart(color,»arc.png»,DRAG_COPY);} |
Сектор также должен предоставлять информацию о цвете операции перетаскивания. Во время перетаскивания возле курсора отображается изображение «arc.png». При передаче пустого строкового значения используется изображение по умолчанию. Имя файла может передаваться. Оно должно указываться относительно каталога изображений. DRAG_COPY указывает на то, что будет осуществляться операция копирования. Это означает, что перетаскиваемая информация сохраняется в источнике и копируется. При использовании DRAG_MOVE информация во время перетаскивания перемещается и не остается в исходном объекте.
Поскольку для сектора задано событие «DragEnter», необходимо вызвать функцию «dropAccept()»:
| main(string information, int dragType){ dropAccept(1);} |
Чтобы обеспечить возможность назначать цвет сектору, используйте следующий сценарий для события «DragDrop»:
| main(string information, int dragType){ DebugN(information); this.backCol = information;} |
- Для события «Initialize» иерархического списка используйте следующий код:
| main(){ this.addColumn(«TEST»); this.addColumn(«SibKom»); this.appendItem(«»,»1″,»red»); this.appendItem(«1″,»2″,»green»); this.appendItem(«»,»3″,»blue»); this.setDragEnabled(«1»,TRUE); this.setDragEnabled(«2»,TRUE); this.setDragEnabled(«3»,TRUE); TREE1.setDragEnabled(«3»,1);} |
С помощью этого кода к иерархическому списку добавляются столбцы «TEST» и «SibKom» и элементы «red», «green » и «blue». С помощью метода «setDragEnabled» обеспечивается возможность перетаскивания элементов иерархического списка во время выполнения.
- Для присвоения полигону перетаскиваемого цвета используйте следующий код для события «DragDrop» полигона:
| main(string information, int dragType){ DebugN(information); this.backCol = information;} |
Как обычно, чтобы обеспечить возможность перетаскивать цвет с полигона и присваивать его другим объектам, необходимо с помощью «dragStart(…)» указать данные, подлежащие перетаскиванию:
| main(int keys){ string color = this.backCol; dragStart(color,»arc.png»,DRAG_COPY);} |
Поскольку задано событие «DragEnter», необходимо вызвать функцию «dropAccept()»:
| main(string information, int dragType){ dropAccept(1);} |
- Для эллипсов добавьте следующий код для события «DragDrop»:
| main(string information, int dragType){ string color1 = this.backCol; this.backCol = information; ELLIPSE4.backCol = color1;} |
С помощью данного кода эллипсу присваивается цвет. Код «ELLIPSE4.backCol = color1;» указывает на то, что устанавливается цвет эллипсу «ellipse3» либо «ellipse4».
Для обеспечения возможности перетаскивания цвета с эллипса и присвоения его другим объектам, необходимо добавить следующий код, выполняемый по событию «DragStart»:
| main(int keys){ string color = this.backCol; dragStart(color,»»,DRAG_LINK);} |
Поскольку передается пустая строка, в качестве курсора будет использоваться изображение по умолчанию.
Теперь возможно:
- Выбирать цвет с помощью панели выбора цвета «КАСКАД Цифра», а затем перетаскивать его на расположенный на панели объект (прямоугольник, сектор, полигон или эллипс).
- Выбирать точку данных из дерева точек данных и перетаскивать ее на текстовое поле или на текстовый редактор.
- Выбирать название цвета из иерархического списка и перетаскивать его на текстовое поле или на текстовый редактор.