Компоненты: готовые и "самодельные"

Использование custom user interface

Интерфейс среды Флэш МХ, предназначенный для работы с компонентами, достаточно удобен, если ваши компоненты не слишком сложны. Но иногда требуется сделать компонент, инструменты настройки которого были бы сильно связаны друг с другом (например, при включенном свойстве "точная настройка" появляются пять дополнительных контролов и пропадают два старых). Другой пример: вы должны указать положение точки внутри некоторой области - разумеется, удобнее всего поместить точную или уменьшенную копию этой области прямо в интерфейсе настройки и попросить пользователя указать нужную точку мышью. Именно для таких целей предназначен механизм " custom user interface ", то есть интерфейса, определяемого пользователем.

Что представляет собой custom user interface

Если немного подумать, то становится понятно, что самый простой механизм, с помощью которого можно устроить custom user interface (далее - CustomUI ) - это написать отдельный флэш-ролик, который, собственно и является этим CustomUI, и обеспечить его взаимодействие с компонентом.

Именно так и поступили в Macromedia.

Сделаем простой флэш-ролик с live preview, например, что-нибудь такое:

Обмен информацией: объект xch

Чтобы закончить ролик, описывающий CustomUI, нужно обеспечить передачу заполненных в нем пользователем параметров в компонент. Для этого во FlashMX существует специальный встроенный объект по имени xch (сокращение от exchange). Создавать этот объект не нужно, для ролика, подключенного в качестве CustomUI он будет доступен и так. Фактически, поля этого объекта и будут скопированы в поля экземпляра вашего компонента при его инициализации (имеется в виду инициализация в runtime ). Впрочем, если хотите, вы можете создать объект xch явно (это может пригодиться для целей тестирования CustomUI в режиме обычного ролика, когда никто за нас о создании xch заботиться не будет). Такой дополнительный объект xch ничуть не помешает работе CustomUI.

Итак, вот какой код нам нужно написать в нашем ролике с CustomUI:

xch.width = widthTextField.text;
xch.height = heightTextField.text;
xch.roundRadius = roundRadiusTextField.text;

Где следует разместить этот код? Тут может быть два варианта:

• разместить в CustomUI кнопку Update и "повесить" этот код на кнопку. Это самый простой способ, тогда не нужно отслеживать изменения значений в полях ввода. Но у этого способа есть и недостаток: если пользователь не нажмет на кнопку Update, измененные значения параметров никогда не попадут в поля экземпляра компонента ;
• любым способом (например, используя обработчик onChanged() для текстовых полей) отследить, что пользователь изменил значение одного из параметров, и немедленно выполнить соответствующую строчку кода по передаче данных в xch . Этот способ сложнее, и у него тоже есть недостаток: он может привести к слишком частому обновлению live preview (о live preview - дизайн-версии вашего компонента - см. далее в этой лекции), что, в свою очередь, приведет к снижению скорости разработки, если live preview сложное и обновляется достаточно долго. (Кстати, именно по этой причине скорость обновления данных в live preview - всего раз в секунду.)

Давайте теперь подключим CustomUI к нашему компоненту.