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

Компонент 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 — редактируемый, и если ввести Добавить в текстовое поле, элемент добавляется в раскрывающийся список.

  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