Использование компонента NumericStepper

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

Интерактивный просмотр каждого экземпляра NumericStepper отражает настройку параметра value в Инспекторе свойств или компонентов. Однако в интерактивном просмотре нет взаимодействия мыши или клавиатуры со стрелками экземпляра NumericStepper.

Взаимодействие пользователей с компонентом NumericStepper

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

Компонент NumericStepper обрабатывает только числовые данные. Кроме того, чтобы отображать числа, содержащие более двух знаков (например, 5246 или 1,34), необходимо изменять размер экземпляра NumericStepper в процессе разработки.

Компонент NumericStepper в приложении можно включить или отключить. В отключенном состоянии NumericStepper не реагирует на мышь или клавиатуру. Включенный компонент NumericStepper получает фокус при щелчке мыши или переходе с помощью клавиши Tab, а внутренний фокус находится в текстовом поле. Когда экземпляр NumericStepper получает фокус, им можно управлять с помощью следующих клавиш.

Клавиша

Описание

«Стрелка вниз»

Значение изменяется на одну единицу.

«Стрелка влево»

Перемещает точку вставки влево в пределах текстового поля.

«Стрелка вправо»

Перемещает точку вставки вправо в пределах текстового поля.

Shift+Tab

Переводит фокус на предыдущий объект.

Табуляция

Переводит фокус на следующий объект.

«Стрелка вверх»

Значение изменяется на одну единицу.

Дополнительные сведения об управлении фокусом см. в описании класса FocusManager в справочнике ActionScript® 3.0 для Adobe® Flash® Professional CS5 и разделе « Работа с FocusManager ».

Параметры компонента NumericStepper

В Инспекторе свойств или Инспекторе компонентов можно задать следующие параметры для каждого экземпляра NumericStepper: maximum , minimum , stepSize и value . Каждый из этих параметров имеет соответствующее свойство ActionScript с тем же именем. Сведения о возможных значениях этих параметров см. в описании класса NumericStepper в справочнике ActionScript® 3.0 для Adobe® Flash® Professional CS5 .

Создание приложения с компонентом NumericStepper

Ниже описывается процедура добавления компонента NumericStepper в приложение в ходе разработки. В следующем примере в рабочую область добавляются компоненты NumericStepper и Label, а также создается прослушиватель для события Event . CHANGE экземпляра NumericStepper. Когда значение в NumericStepper изменяется, новое значение отображается в свойстве text экземпляра Label.

  1. Перетащите компонент NumericStepper с панели «Компоненты» в рабочую область.

  2. В Инспекторе свойств введите aNs в качестве имени экземпляра.

  3. Перетащите компонент Label с панели «Компоненты» в рабочую область.

  4. В Инспекторе свойств введите aLabel в качестве имени экземпляра.

  5. Откройте панель «Действия», выберите «Кадр 1» на главной временной шкале и введите следующий код ActionScript. 

    import flash.events.Event; 
 
aLabel.text = "value = " + aNs.value; 
 
aNs.addEventListener(Event.CHANGE, changeHandler); 
function changeHandler(event:Event) :void { 
    aLabel.text = "value = " + event.target.value; 
};

    В этом примере в качестве значения свойства text экземпляра Label задается значение NumericStepper. Функция changeHandler() обновляет свойство text экземпляра Label при каждом изменении значения NumericStepper.

  6. Выберите «Управление» > «Тестировать ролик».

Создание компонента NumericStepper с помощью ActionScript

В этом примере с помощью кода ActionScript создается три экземпляра NumericStepper для ввода месяца, дня и года рождения пользователя. Кроме того, для каждого экземпляра NumericStepper добавляется по одному экземпляру Label.

  1. Создайте новый документ Flash (ActionScript 3.0).

  2. Перетащите компонент Label на панель «Библиотека».

  3. Перетащите компонент NumericStepper на панель «Библиотека».

  4. Откройте панель «Действия», выберите «Кадр 1» на главной временной шкале и введите следующий код ActionScript. 

    import fl.controls.Label; 
import fl.controls.NumericStepper; 
 
var dobPrompt:Label = new Label(); 
var moPrompt:Label = new Label(); 
var dayPrompt:Label = new Label(); 
var yrPrompt:Label = new Label(); 
 
var moNs:NumericStepper = new NumericStepper(); 
var dayNs:NumericStepper = new NumericStepper(); 
var yrNs:NumericStepper = new NumericStepper(); 
 
addChild(dobPrompt); 
addChild(moPrompt); 
addChild(dayPrompt); 
addChild(yrPrompt); 
addChild(moNs); 
addChild(dayNs); 
addChild(yrNs); 
 
dobPrompt.setSize(65, 22); 
dobPrompt.text = "Date of birth:"; 
dobPrompt.move(80, 150); 
 
moNs.move(150, 150); 
moNs.setSize(40, 22); 
moNs.minimum = 1; 
moNs.maximum = 12; 
moNs.stepSize = 1; 
moNs.value = 1; 
 
moPrompt.setSize(25, 22); 
moPrompt.text = "Mo."; 
moPrompt.move(195, 150); 
 
dayNs.move(225, 150); 
dayNs.setSize(40, 22); 
dayNs.minimum = 1; 
dayNs.maximum = 31; 
dayNs.stepSize = 1; 
dayNs.value = 1; 
 
dayPrompt.setSize(25, 22); 
dayPrompt.text = "Day"; 
dayPrompt.move(270, 150); 
 
yrNs.move(300, 150); 
yrNs.setSize(55, 22); 
yrNs.minimum = 1900; 
yrNs.maximum = 2006; 
yrNs.stepSize = 1; 
yrNs.value = 1980; 
 
yrPrompt.setSize(30, 22); 
yrPrompt.text = "Year"; 
yrPrompt.move(360, 150);

  5. Для запуска приложения выберите команды «Управление» > «Тестировать ролик».