|
Компонент ComboBox позволяет пользователю выбрать один элемент в раскрывающемся списке. Компонент ComboBox может быть статическим или редактируемым. Редактируемый компонент ComboBox позволяет вводить текст непосредственно в текстовое поле в начале списка. Если список, открываясь, достигает конца документа, то он открывается не вниз, а вверх. Компонент ComboBox состоит из трех вложенных компонентов: BaseButton, TextInput и List.
В редактируемом компоненте ComboBox областью щелчка является только кнопка, а текстовое поле — нет. В статическом ComboBox область щелчка состоит из кнопки и текстового поля. Эта область реагирует на щелчок, открывая или закрывая раскрывающийся список.
Когда пользователь выбирает элемент в списке с помощью мыши или клавиатуры, метка выделения копируется в текстовое поле в начале ComboBox.
Взаимодействие пользователей с компонентом ComboBox
Компонент ComboBox можно использовать в любых формах или приложениях, где требуется выбрать один элемент из списка. Например, можно добавить раскрывающийся список штатов в форму адреса заказчика. В более сложных сценариях можно использовать редактируемый компонент ComboBox. Например, в приложении, предоставляющем маршрут проезда, можно использовать редактируемый компонент ComboBox для ввода отправного пункта и места назначения. Тогда раскрывающийся список будет содержать адреса, введенные пользователем ранее.
Если компонент ComboBox редактируемый, то есть, свойство
editable
имеет значение
true
, следующие клавиши убирают фокус с поля ввода текста и оставляют предыдущее значение. Исключение составляет клавиша Enter, которая сначала применяет новое значение, если пользователь ввел текст.
|
Клавиша
|
Описание
|
|
Shift+Tab
|
Переводит фокус на предыдущий элемент. Если выбран новый элемент, отправляется событие
change
.
|
|
Табуляция
|
Переводит фокус на следующий элемент. Если выбран новый элемент, отправляется событие
change
.
|
|
«Стрелка вниз»
|
Перемещает выделение на один элемент вниз.
|
|
End
|
Перемещает выделение в конец списка.
|
|
Escape
|
Закрывает раскрывающийся список и возвращает фокус в ComboBox.
|
|
Enter
|
Закрывает раскрывающийся список и возвращает фокус в ComboBox. Если компонент ComboBox редактируемый и пользователь вводит текст, клавиша Enter применяет ввод пользователя в качестве нового значения.
|
|
Домашняя страница
|
Перемещает выделение в начало списка.
|
|
Page Up
|
Перемещает выделение на одну страницу вверх.
|
|
Page Down
|
Перемещает выделение на одну страницу вниз.
|
Когда в приложение добавляется компонент ComboBox, его можно сделать доступным для программ чтения с экрана путем добавления следующих строк кода ActionScript.
import fl.accessibility.ComboBoxAccImpl;
ComboBoxAccImpl.enableAccessibility();
Расширенный доступ для компонента включается только один раз, независимо от числа имеющихся экземпляров.
Параметры компонента ComboBox
В Инспекторе свойств и Инспекторе компонентов можно задать следующие параметры для каждого экземпляра ComboBox:
dataProvider
,
editable
,
prompt
и
rowCount
. Каждый из этих параметров имеет соответствующее свойство ActionScript с тем же именем. Сведения о возможных значениях этих параметров см. в описании класса ComboBox в
справочнике ActionScript® 3.0
для Adobe® Flash® Professional CS5
. Сведения об использовании параметра dataProvider см. в разделе «
Использование параметра dataProvider
».
Создание приложения с компонентом ComboBox
Ниже описывается процедура добавления компонента ComboBox в приложение в ходе разработки. Компонент ComboBox — редактируемый, и если ввести
Добавить
в текстовое поле, элемент добавляется в раскрывающийся список.
-
Создайте новый документ Flash (ActionScript 3.0).
-
Перетащите компонент ComboBox в рабочую область и присвойте ему имя экземпляра
aCb
. На вкладке «Параметры» задайте параметру
editable
значение
true
.
-
Откройте панель «Действия», выберите «Кадр 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);
}
}
-
Выберите «Управление» > «Тестировать ролик».
Создание компонента ComboBox с помощью ActionScript
В следующем примере создается компонент ComboBox с помощью ActionScript и заполняется списком университетов в области Сан-Франциско, Калифорния. Для свойства
width
экземпляра ComboBox задается достаточное значение, чтобы вместить текст запроса, а свойству
dropdownWidth
задается значение побольше, чтобы вместить самое длинное название университета.
В примере создается список университетов в экземпляре Array с использованием свойства
label
для хранения названий учебных заведений и свойства
data
для хранения URL-адресов их веб-сайтов. Экземпляр Array назначается компоненту ComboBox путем определения его свойства
dataProvider
.
Когда пользователь выбирает университет из списка, запускается событие Event.
CHANGE
и функция
changeHandler()
, которая загружает свойство
data
в URL-запрос, чтобы открыть веб-сайт учебного заведения.
Обратите внимание на то, что в последней строке свойству
selectedIndex
экземпляра ComboBox задается значение -1, чтобы после закрытия списка повторно отображался запрос. В противном случае вместо запроса отображалось бы название выбранного учебного заведения.
-
Создайте новый документ Flash (ActionScript 3.0).
-
Перетащите компонент ComboBox с панели «Компоненты» на панель «Библиотека».
-
Откройте панель «Действия», выберите «Кадр 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;
}
-
Выберите «Управление» > «Тестировать ролик».
Этот пример можно реализовать и выполнить в среде разработки Flash, но при попытке открыть веб-сайты университетов щелчком по элементам в экземпляре ComboBox будут появляться предупреждения. Чтобы открыть полностью функциональный компонент ComboBox в Интернете, введите следующий URL-адрес:
http://www.helpexamples.com/peter/bayAreaColleges/bayAreaColleges.html
|
|
|