Главная » ActionScript » Настройка компонентов пользовательского интерфейса

0

О настройке компонентов пользовательского интерфейса

Можно настроить внешний вид компонентов приложений, изменив один или оба следующих элемента.

Стили       Каждый компонент имеет набор стилей, при помощи которого можно указать, какие значения будет использовать Flash при визуализации внешнего вида компонента. Как правило, стили определяют обложки и значки компонента для его различных состояний, а также тип используемого форматирования текста и значения значения для внутренних полей.

Обложки       Обложка состоит из набора символов, которые составляют графический образ компонента в данном состоянии. Стиль задает обложку, которая является графическим элементом, используемым Flash при рисовании компонента. Выбор обложки — это процесс изменения внешнего вида компонента путем изменения или замены его графического образа.

Примечание. Внешний вид компонентов ActionScript 3.0, заданный по умолчанию, можно рассматривать как тему (Aeon Halo), но эти обложки встроены в компоненты. В отличие от компонентов ActionScript 2.0 компоненты ActionScript 3.0 не поддерживают внешние файлы тем.

Задание стилей

Как правило, стили компонента задают значения для его обложки, значков, форматирования текста и внутренних полей при рисовании приложением Flash компонента в его различных состояниях. Например, при рисовании во Flash компонента Button для его трех различных состояний используется три разные обложки: нажатого состояния (при нажатии на него кнопкой мыши), отжатого состояния и нормального состояния. Еще один вид обложки используется для неактивного состояния компонента, при котором свойство enabled установлено на значение false.

Стили компонентов можно задавать на уровне документа, класса и экземпляра. К тому же, некоторые свойства стиля могут наследоваться от родительского компонента. Например, компонент List наследует стили компонента ScrollBar, которые, в свою очередь, наследуются от компонента BaseScrollPane.

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

•   Применить стиль к экземпляру компонента. Можно изменить свойства цвета и текста отдельного экземпляра компонента. В некоторых случаях это эффективно, но может занять много времени, если нужно задать отдельные свойства для всех компонентов в документе.

•   Применить стиль ко всем компонентам определенного типа в документе. Если вы хотите придать единообразный внешний вид всем компонентам определенного типа, например всем компонентам CheckBox или Button в документе, можно применить стиль на уровне компонентов.

Значения свойств стиля, заданные для контейнеров, наследуются содержащимися в них компонентами.

Flash не отображает изменения свойств стиля при просмотре компонентов в рабочей области с использованием функции "Интерактивный просмотр".

Особенности настройки параметров стиля

При использовании стилей следует учитывать несколько важных моментов.

Наследование       Компоненты разработаны так, что дочерние компоненты наследуют стиль от родительских компонентов. В ActionScript нельзя задать наследование стилей.

Очередность       Если стиль компонента задан несколькими способами, Flash использует первый найденный стиль согласно порядку очередности. Flash выполняет поиск стилей в следующем порядке, пока не будет найдено значение:

1   Flash выполняет поиск свойства стиля экземпляра компонента.

2   Если это один из наследуемых стилей, Flash выполняет поиск наследуемого значения в иерархии родительских объектов.

3   Flash выполняет поиск стиля компонента.

4   Flash выполняет поиск глобального параметра в StyleManager.

5   Если свойство все еще не определено, оно имеет значение undefined.

Доступ к стилям компонента по умолчанию

Доступ к стилям компонента по умолчанию можно получить, вызвав статический метод getStyleDefinition() для класса компонентов. Например, следующий код возвращает стили по умолчанию для компонента ComboBox и отображает значения по умолчанию свойств buttonWidth и downArrowDownSkin:

import fl.controls.ComboBox;

var styleObj:Object = ComboBox.getStyleDefinition(); trace(styleObj.buttonWidth); // 24 trace(styleObj.downArrowDownSkin); // ScrollArrowDown_downSkin

Задание и определение стилей экземпляра компонента

Любой экземпляр компонента пользовательского интерфейса может вызвать методы setStyle() и getStyle() напрямую для задания или определения стиля. Следующий синтаксис задает стиль и значение для экземпляра компонента:

instanceName.setStyle("styleName", value);

Такой синтаксис возвращает стиль экземпляра компонента:

var a_style:Object = new Object();

a_style = instanceName.getStyle("styleName");

Заметьте, что метод getStyle() возвращает значение типа Object, так как он может возвращать несколько стилей, имеющих различные типы данных. Например, следующий код задает начертание шрифта для экземпляра TextArea (aTa), а затем возвращает его при помощи метода getStyle(). Данный пример приводит возвращенное значение к объекту TextFormat для присвоения этого значения переменной TextFormat. В противном случае компилятор выдаст ошибку о попытке привести переменную Object к переменной TextFormat.

import flash.text.TextFormat;

var tf:TextFormat = new TextFormat(); tf.font = "Georgia"; aTa.setStyle("textFormat",tf); aTa.text = "Hello World!";

var aStyle:TextFormat = aTa.getStyle("textFormat") as TextFormat;

trace(aStyle.font);

Использование TextFormat для задания свойств текста

При помощи объекта TextFormat можно форматировать текст экземпляра компонента. Объект TextFormat имеет свойства, позволяющие задать такие параметры текста, как bold, bullet, color, font, italic, size и другие. Можно задать эти свойства в объекте TextFormat, затем вызвать метод setStyle(), чтобы применить их к экземпляру компонента. Например, следующий код задает свойства font, size и bold объекта TextFormat и применяет их к экземпляру Button:

/* Create a new TextFormat object to set text formatting properties. */

var tf:TextFormat = new TextFormat();

tf.font = "Arial"; tf.size = 16; tf.bold = true;

a_button.setStyle("textFormat", tf);

Следующее изображение иллюстрирует эффект этих параметров кнопки с меткой "Отправить":

Свойства стиля, заданные для экземпляра компонента при помощи метода setStyle(), имеют высший приоритет и переопределяют все другие параметры стиля. Однако чем больше свойств вы задаете при помощи метода setStyle() для отдельного экземпляра компонента, тем медленнее будет происходить его визуализация при исполнении.

Задание стиля для всех экземпляров компонента

Можно задать стиль для всех экземпляров класса компонента при помощи статического метода setComponentStyle() класса StyleManager. Например, можно задать красный цвет текста для всех компонентов Button, сначала перетащив кнопку в рабочую область, затем вставив следующий код ActionScript на панель "Действия" в Кадр 1 временной шкалы:

import fl.managers.StyleManager;

import fl.controls.Button;

var tf:TextFormat = new TextFormat(); tf.color = 0xFF0000; StyleManager.setComponentStyle(Button, "textFormat", tf);

Все компоненты Button, добавленные впоследствии в рабочую область, будут иметь красные метки.

Задание стиля для всех компонентов

Задать стиль для всех компонентов можно при помощи статического метода setStyle() класса StyleManager.

1   Перетащите компонент List в рабочую область и присвойте ему имя экземпляра aList.

2   Перетащите компонент Button в рабочую область и присвойте ему имя экземпляра aButton.

3   Нажмите клавишу F9 или выберите пункт "Действия" в меню "Окно", чтобы открыть панель "Действия", если она еще не открыта, и введите следующий код в Кадр 1 временной шкалы, чтобы задать красный цвет текста для всех компонентов:

import fl.managers.StyleManager;

var tf:TextFormat = new TextFormat(); tf.color = 0xFF0000; StyleManager.setStyle("textFormat", tf);

4   Вставьте следующий код на панель "Действия" для заполнения компонента List текстом.

aList.addItem({label:"1956 Chevy (Cherry Red)", data:35000}); aList.addItem({label:"1966 Mustang (Classic)", data:27000}); aList.addItem({label:"1976 Volvo (Xcllnt Cond)", data:17000}); aList.allowMultipleSelection = true;

5   Выберите меню "Управление" > "Тестировать ролик" или нажмите Ctrl+Enter для компиляции кода и тестирования содержимого. Текст метки кнопки и в списке должен быть красным.

Источник: Использование компонентов ActionScript 3.0 – 2008

По теме:

  • Комментарии