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

0

Компонент ComboBox дает пользователю возможность выбрать один элемент из раскрывающегося списка. Компонент ComboBox может быть статическим или редактируемым. Редактируемый компонент ComboBox позволяет вводить текст непосредственно в текстовое поле в начале списка. Если список, открываясь, достигает конца документа, то он открывается не вниз, а вверх. Компонент ComboBox состоит из трех подкомпонентов: BaseButton, TextInput и List .

В редактируемом компоненте ComboBox областью щелчка является только кнопка, а текстовое поле — нет. В статическом ComboBox область щелчка состоит из кнопки и текстового поля. Эта область реагирует на щелчок, открывая или закрывая раскрывающийся список.

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

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

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

Если компонент ComboBox редактируемый, то есть, свойство editable имеет значение true, следующие клавиши убирают фокус с поля ввода текста и оставляют предыдущее значение. Исключение составляет клавиша Enter , которая сначала применяет новое значение, если пользователь ввел текст.

Клавиша                                           Описание

Shift+Tab                                           Переводит фокус на предыдущий элемент. Если выбран новый элемент, отправляется событие change. Tab                                                      Переводит фокус на следующий элемент. Если выбран новый элемент, отправляется событие change. "Стрелка вниз"                               Перемещает выделение на один элемент вниз.

End                                                     Перемещает выделение в конец списка.

Escape                                               Закрывает раскрывающийся список и возвращает фокус в ComboBox.

Enter                                                   Закрывает раскрывающийся список и возвращает фокус в ComboBox. Если компонент ComboBox редактируемый и пользователь вводит текст, клавиша Enter применяет ввод пользователя в качестве нового значения.

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

Page Up                                            Перемещает выделение на одну страницу вверх. Page Down                                      Перемещает выделение на одну страницу вниз.

Когда в приложение добавляется компонент ComboBox, его можно сделать доступным для программ чтения с экрана путем добавления следующих строк кода ActionScript.

import fl.accessibility.ComboBoxAccImpl;

ComboBoxAccImpl.enableAccessibility();

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

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

В Инспекторе свойств и Инспекторе компонентов можно задать следующие параметры для каждого экземпляра ComboBox: dataProvider, editable, prompt и rowCount. Каждый из этих параметров имеет соответствующее свойство ActionScript с тем же именем. Сведения о возможных значениях для этих параметров см. в описании класса ComboBox в Справочнике по языку ActionScript 3.0 и компонентам. Сведения об использовании параметра dataProvider см. в разделе «Использование параметра dataProvider» на странице 31.

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

Ниже описывается процедура добавления компонента ComboBox в приложение в ходе разработки. Компонент ComboBox — редактируемый, и если ввести Добавить в текстовое поле, элемент добавляется в раскрывающийся список.

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

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

"Параметры" задайте параметру editable значение true.

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

import fl.data.DataProvider;

import fl.events.ComponentEvent;

var items:Array = [

{label:"screen1", data:"screenData1"},

{label:"screen2", data:"screenData2"},

{label:"screen3", data:"screenData3"},

{label:"screen4", data:"screenData4"},

{label:"screen5", data:"screenData5"},

];

aCb.dataProvider = new DataProvider(items);

aCb.addEventListener(ComponentEvent.ENTER, onAddItem);

function onAddItem(event:ComponentEvent):void {

var newRow:int = 0;

if (event.target.text == "Add") {

newRow = event.target.length + 1;

event.target.addItemAt({label:"screen" + newRow, data:"screenData" + newRow}, event.target.length);

}

}

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

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

В следующем примере создается компонент ComboBox с помощью ActionScript и заполняется списком университетов в области Сан-Франциско, Калифорния. Для свойства width экземпляра ComboBox задается достаточное значение, чтобы вместить текст запроса, а свойству dropdownWidth задается значение побольше, чтобы вместить самое длинное название университета.

В примере создается список университетов в экземпляре Array с использованием свойства label для хранения названий учебных заведений и свойства data для хранения URL-адресов их веб-сайтов. Экземпляр Array назначается компоненту ComboBox путем определения его свойства dataProvider.

Когда пользователь выбирает университет из списка, запускается событие Event.CHANGE и функция changeHandler(), которая загружает свойство data в URL-запрос, чтобы открыть веб-сайт учебного заведения.

Обратите внимание на то, что в последней строке свойству selectedIndex экземпляра ComboBox задается значение -1, чтобы после закрытия списка повторно отображался запрос. В противном случае вместо запроса отображалось бы название выбранного учебного заведения.

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

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

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

ActionScript.

import fl.controls.ComboBox; import fl.data.DataProvider; import flash.net.navigateToURL;

var sfUniversities:Array = new Array(

{label:"University of California, Berkeley", data:"http://www.berkeley.edu/"},

{label:"University of San Francisco", data:"http://www.usfca.edu/"},

{label:"San Francisco State University", data:"http://www.sfsu.edu/"},

{label:"California State University, East Bay", data:"http://www.csuhayward.edu/"},

{label:"Stanford University", data:"http://www.stanford.edu/"},

{label:"University of Santa Clara", data:"http://www.scu.edu/"},

{label:"San Jose State University", data:"http://www.sjsu.edu/"}

);

var aCb:ComboBox = new ComboBox();

aCb.dropdownWidth = 210; aCb.width = 200; aCb.move(150, 50);

aCb.prompt = "San Francisco Area Universities"; aCb.dataProvider = new DataProvider(sfUniversities); aCb.addEventListener(Event.CHANGE, changeHandler);

addChild(aCb);

function changeHandler(event:Event):void {

var request:URLRequest = new URLRequest();

request.url = ComboBox(event.target).selectedItem.data;

navigateToURL(request);

aCb.selectedIndex = -1;

}

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

Этот пример можно реализовать и выполнить в среде разработки Flash, но при попытке открыть веб-сайты университетов щелчком по элементам в экземпляре ComboBox будут появляться предупреждения. Чтобы открыть полностью функциональный компонент ComboBox в Интернете, введите следующий URL-адрес:

http://www.helpexamples.com/peter/bayAreaColleges/bayAreaColleges.html

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

По теме:

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