Главная » ActionScript » Использование компонента TextInput

0

Компонент TextInput является однострочной текстовой обложкой для встроенного объекта ActionScript TextField. Если требуется добавить многострочное текстовое поле, используйте компонент TextArea. Например, можно использовать компонент TextInput в качестве поля для пароля в форме. Также можно настроить прослушиватель событий, проверяющий наличие достаточного количества символов в поле, когда пользователь покидает его с помощью клавиши Tab. Прослушиватель может показывать сообщение об ошибке, указывающее на необходимость ввода правильного количества символов.

Можно задать свойство textFormat с помощью метода setStyle(), чтобы изменить стиль текста, отображаемого в экземпляре TextInput. Компонент TextInput можно форматировать с помощью HTML или как поле пароля, маскирующее текст.

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

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

Клавиша

Описание

Клавиши со стрелками

Перемещают точку вставки на один символ влево или вправо.

Shift+Tab

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

Tab

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

Дополнительные сведения об управлении фокусом см. в описании класса FocusManager в руководствах

Справочник по языку ActionScript 3.0 и компонентам и «Работа с FocusManager» на странице 29.

Интерактивный просмотр каждого элемента TextInput отражает изменения, которые были внесены в параметры в Инспекторе свойств или Инспекторе компонентов во время разработки. В интерактивном просмотре текст не выделяется. Кроме того, нельзя вводить текст в экземпляре компонента в рабочей области.

При добавлении в приложение компонент TextInput можно сделать доступным для программ чтения с экрана с помощью панели "Расширенный доступ".

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

В Инспекторе свойств или Инспекторе компонентов можно задать следующие параметры разработки для каждого экземпляра TextInput :   editable,displayAsPassword, maxChars, restrict и text. Каждый из этих параметров имеет соответствующее свойство ActionScript с тем же именем. Сведения о возможных значениях для этих параметров см. в описании класса TextInput в Справочнике по языку ActionScript 3.0 и компонентам.

Можно создать код ActionScript для управления этими и дополнительными параметрами компонента TextInput с помощью его свойств, методов и событий. Дополнительные сведения см. в описании класса TextInput в Справочнике по языку ActionScript 3.0 и компонентам.

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

Ниже описывается процедура добавления компонента TextInput в приложение. В примере используется два поля TextInput для получения и подтверждения пароля. Создается прослушиватель событий, который проверяет, чтобы было введено не меньше восьми символов и чтобы в двух полях был введен одинаковый текст.

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

2   Перетащите компонент Label с панели "Компоненты" в рабочую область и введите следующие значения в

Инспекторе свойств.

•   Введите имя экземпляра pwdLabel.

•   Введите 100 для значения ширины (W).

•   Введите 50 для значения Х.

•   Введите 150 для значения Y.

•   В разделе "Параметры" введите значениеПароль: для параметра text.

3   Перетащите второй компонент Label с панели "Компоненты" в рабочую область и введите для него следующие значения.

•   Введите имя экземпляра confirmLabel.

•   Введите 100 для значения ширины (W).

•   Введите 50 для значения Х.

•   Введите 200 для значения Y.

•   В разделе "Параметры" введите значениеПодтвердитепароль: для параметра text.

4   Перетащите компонент TextInput с панели "Компоненты" в рабочую область и введите для него следующие значения.

•   Введите имя экземпляра pwdTi.

•   Введите 150 для значения ширины (W).

•   Введите 190 для значения Х.

•   Введите 150 для значения Y.

•   В разделе "Параметры" дважды щелкните значение параметра displayAsPassword и выберите true. В

результате этого значение, введенное в текстовое поле, будет маскироваться звездочками.

5   Перетащите второй компонент TextInput с панели "Компоненты" в рабочую область и введите для него следующие значения:

•   Введите имя экземпляра confirmTi.

•   Введите 150 для значения ширины (W).

•   Введите 190 для значения Х.

•   Введите 200 для значения Y.

•   В разделе "Параметры" дважды щелкните значение параметра displayAsPassword и выберите true. В

результате этого значение, введенное в текстовое поле, будет маскироваться звездочками.

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

ActionScript.

function tiListener(evt_obj:Event){

if(confirmTi.text != pwdTi.text || confirmTi.length < 8)

{

}

else {

}

}

trace("Password is incorrect. Please reenter it.");

trace("Your password is: " + confirmTi.text);

confirmTi.addEventListener("enter", tiListener);

Этот код создает прослушиватель события enter для экземпляра TextInput с именем confirmTi. Если два пароля не соответствуют или пользователь вводит меньше 8 символов, выводится сообщение "Пароль неверный. Введите его еще раз". Если пароли содержат по 8 символов или более и соответствуют друг другу, введенное значение отображается на панели вывода.

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

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

В следующем примере компонент TextInput создается с помощью ActionScript. Также создается экземпляр Label, чтобы попросить пользователя ввести свое имя. В примере задается свойство restrict компонента, чтобы использовались только заглавные и строчные буквы, точка и пробел. Также создается объект TextFormat для форматирования текста в компонентах Label и TextInput.

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

2   Перетащите компонент TextInput с панели "Компоненты" на панель "Библиотека".

3   Перетащите компонент Label с панели "Компоненты" на панель "Библиотека".

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

ActionScript.

import fl.controls.Label;

import fl.controls.TextInput;

var nameLabel:Label = new Label();

var nameTi:TextInput = new TextInput();

var tf:TextFormat = new TextFormat();

addChild(nameLabel);

addChild(nameTi);

nameTi.restrict = "A-Z .a-z";

tf.font = "Georgia"; tf.color = 0x0000CC; tf.size = 16;

nameLabel.text = "Name: " ; nameLabel.setSize(50, 25); nameLabel.move(100,100); nameLabel.setStyle("textFormat", tf); nameTi.move(160, 100); nameTi.setSize(200, 25); nameTi.setStyle("textFormat", tf);

5   Выберите "Управление" > "Тестировать ролик", чтобы запустить приложение.

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

По теме:

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