Развитие сервис-ориентированного клиента на платформе Flash Player.
ComboBox
Материал из Flexipedia
Содержание |
[править] Введение
Виджет ComboBox - это выпадающий список элеметов, из которого может быть выбран только один. Функционал похож на тег SELECT в HTML.
См. также ComboBox в Adobe Flex 2 Language Reference.
[править] О ComboBox
На следующем рисунке показан виджет ComboBox:
http://livedocs.macromedia.com/flex/2/docs/images/combobox-example8.jpg
В редактируемом режиме виджета пользователь может вводить текст прямо в поле или выбирать один из представленных элементов списка. В нередактируемом режиме, при нажатии символов, список открывается и выделение переходит на более соответствующие элементы; соответствие проверяется только по первому символу.
Если выпадающий список задевает нижнюю границу приложения, он открывается вверх. Если элемент списка не умещается по горизонтали, он обрезается. В зависимости от количества элементов может появляться вертикальная прокрутка.
ComboBox имеет следующие размеры по умолчанию:
- Размер по умолчанию - ширина, достаточная для умещения самого длинного элемента списка + кнопка виджета. Если выпадающий список закрыт, то высота зависит от высоты текста. Высота открытого виджета равна высоте пяти рядов или меньше. Высота каждого ряда по умолчанию равна 22 px.
- Минимальный размер - 0
- Максимальный размер - 5000 x 5000.
- dropdownWidth - ширина виджета.
- rowCount - 5
[править] Создание ComboBox
Для создания виджета используется тег <mx:ComboBox>. Задайте атрибут id, если необходимо ссылаться на элемент из кода.
ComboBox использует списочные ИД.
ИД для ComboBox задается в атрибуте dataProvider тега <mx:ComboBox>:
ИД должен быть массив или класс, реализующий интерфейсы ICollectionView или IList; обычно это ArrayCollection:
<?xml version="1.0"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:ComboBox> <mx:ArrayCollection> <mx:String>AK</mx:String> <mx:String>AL</mx:String> <mx:String>AR</mx:String> </mx:ArrayCollection> </mx:ComboBox> </mx:Application>
Тег <mx:dataProvider> не используется, так как dataProvider является атрибутом по умолчанию виджета ComboBox. Также можно не использовать тег <mx:source> внутри <mx:ArrayCollection>, потому что source является атрибутом по умолчанию класса ArrayCollection. Наконец, не надо задавать тег <mx:Array> для определения массива.
ИД может содержать с несколькими полями:
<?xml version="1.0"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:ComboBox> <mx:ArrayCollection> <mx:Object label="AL" data="Montgomery"/> <mx:Object label="AK" data="Juneau"/> <mx:Object label="AR" data="Little Rock"/> </mx:ArrayCollection> </mx:ComboBox> </mx:Application>
Если в качестве ИД используется массив строк, то строки используют в качестве элементов списка. Если же ИД состоит из объектов, то по умолчанию используется поле label. Но это поведение можно переопределить.
Индексируются элементы ComboBox с нуля. Значением элемента является его текст.
[править] Использование событий ComboBox
События используются для обработки взаимодействий пользователя и виджета.
ComboBox транслирует событие change (flash.events.Event типа flash.events.Event.CHANGE), когда значение selectedIndex или selectedItem изменяется благодаря следующим действиям пользователя:
- Если пользователь закрывает меню кликом, клавишей Enter или Control+Вверх и выбранный элемент отличается от предыдущего выбранного.
- Если список закрыт и пользователь изменяет текущий элемент с помощью клавиш Вверх, Вниз, Page Up или Page Down.
- Если ComboBox редактируемый и пользователь вводит символы, Flex транслирует событие change при каждом изменении текста.
ComboBox транслирует событие broadcasts an mx.events.DropdownEvent типа mx.events.DropdownEvent.OPEN и mx.events.DropdownEvent.CLOSE при открытии и закрытии виджета.
В следующем примере отображается информация о событиях ComboBox:
<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" >
<mx:Script>
[as3]
<![CDATA[
import flash.events.Event;
import mx.events.DropdownEvent;
// текущий тип события - open или close.
private function dropEvt(event:DropdownEvent):void {
forChange.text+=event.type + "\n";
}
// отображение текста выбранного элемента
private function changeEvt(event:Event):void {
forChange.text+=event.currentTarget.selectedItem.label + " " +
event.currentTarget.selectedIndex + "\n";
}
]]>
</mx:Script>
<mx:ComboBox open="dropEvt(event)" close="dropEvt(event)"
change="changeEvt(event)" >
<mx:ArrayCollection>
<mx:Object label="AL" data="Montgomery"/>
<mx:Object label="AK" data="Juneau"/>
<mx:Object label="AR" data="Little Rock"/>
</mx:ArrayCollection>
</mx:ComboBox>
<mx:TextArea id="forChange" width="150" height="100%"/>
</mx:Application>
Если наполнить ComboBox массивом строк, поле currentTarget.selectedItem будет содержать строку. Если использовать массив объектов, currentTarget.selectedItem будет содержать соответствующий объект, а currentTarget.selectedItem.label будет ссылаться на поле label.
В этом примере используются два атрибута selectedItem и selectedIndex. Каждое событие change обновляет в TextArea текст и индекс выбранного элемента.
[править] Определение label
Если наполнить ComboBox массивом строк, поле текст элемента будет содержать строку. Если использовать массив объектов, текст элемента будет содержать текст поля label. Если объект не содержит поле label, то необходимо определить атрибут labelField:
<mx:ComboBox open="dropEvt(event)" close="dropEvt(event)"
change="changeEvt(event)" labelField="state">
<mx:ArrayCollection>
<mx:Object state="AL" capital="Montgomery"/>
<mx:Object state="AK" capital="Juneau"/>
<mx:Object state="AR" capital="Little Rock"/>
</mx:ArrayCollection>
</mx:ComboBox>
Для использования обработчика из предыдущего примера, необходимо изменить поле на state:
[as3]
private function changeEvt(event) {
forChange.text=event.currentTarget.selectedItem.state + " " +
event.currentTarget.selectedItem.capital + " " +
event.currenttarget.selectedIndex;
}
Задавать подписи элементов можно с помощью labelFunction.
[править] Наполнение ComboBox с помощью переменных и моделей
ИД ComboBox можно наполнять из ActionScript переменной или модели данных Flex. Каждый элемент ИД должен содержать поле label и другие поля. В следующем примере наполняются два ComboBox: один из переменной ArrayCollection, которая содержит массив, другой из ArrayCollection, который содержит массив элементов тега <mx:Model>.
<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
initialize="initData();">
<mx:Script>
<![CDATA[
[as3]
import mx.collections.*
private var COLOR_ARRAY:Array=
[{label:"Red", data:"#FF0000"},
{label:"Green", data:"#00FF00"},
{label:"Blue", data:"#0000FF"}];
// определяем переменную ArrayCollection
//делаем ее связываемой
[Bindable]
public var colorAC:ArrayCollection;
// Инициализируем переменную colorAC ArrayCollection из Array.
// Используем обработчик события initialize для инициализации переменных
private function initData():void {
colorAC=new ArrayCollection(COLOR_ARRAY);
}
]]>
</mx:Script>
<mx:Model id="myDP">
<obj>
<item label="AL" data="Montgomery"/>
<item>
<label>AK</label>
<data>Juneau</data>
</item>
<item>
<label>AR</label>
<data>Little Rock</data>
</item>
</obj>
</mx:Model>
<mx:ArrayCollection id="stateAC" source="{myDP.obj.item}"/>
<mx:ComboBox dataProvider="{colorAC}"/>
<mx:ComboBox dataProvider="{stateAC}"/>
</mx:Application>
В этом примере используется простая модель. Но можно наполнять модель из удаленного источника или создать пользовательский класс модели в ActionScript. См. также Хранение данных.
Также можно использовать удаленные ИД с ComboBox. Например, когда операция вебсервиса возвращает массив строк, можно использовать следующие формат для отображения каждой строки в ComboBox:
<mx:ArrayCollection id="resultAC"
source="mx.utils.ArrayUtil.toArray(service.operation.result);"
<mx:ComboBox dataProvider="{resultAC}" />
См. также Использование удаленных источников данных в Использование источников данных и коллекций
[править] Взаимодействие с пользователем
Виджет может быть редактируемым и нередактируемым (атрибут editable). В нередактируемом ComboBox пользователь может выбрать одно значение из выпадающего списка. В редактируемом ComboBox значение можно ввести прямо в поле виджета.
Когда ComboBox (и не выпадающий список) находится в фокусе и редактируемый, все нажатые символы обрабатываются в соответствии с правилами виджета TextInput за исключением комбинации Control+Вниз, которая открывает сисок. В открытом списке можно использовать стрелки Вверх/Вниз для навигации и Enter для выбора.
Когда ComboBox находится в фокусе и нередактируемый, с помощью алфавитно-цифровых клавиш можно перейти к элементу списка, начинающегося с нажатой буквы. Если список открыт, то выделение перемещается на этот элемент.
Если список закрыт:
- Control+Вниз - открывает список и передает ему фокус.
- Вниз - перемещение вниз на один элемент.
- End - перемещение выделения в конец.
- Home - перемещение выделения в начало.
- Page Down - перемещение выделения к элементу через rowcount -1 вниз.
- Page Up - перемещение выделения элементу rowcount -1 вверх.
- Up - перемещение вверх на один элемент.
Если список открыт:
- Control+Вверх - закрывает список и возвращает фокус виджету.
- Вниз - перемещение вниз на один элемент.
- End - перемещение выделения в конец.
- Enter - выбирает элемент, закрывает списка и передает фокуса виджету.
- Escape - закрывает списка и передает фокуса виджету.
- Home - перемещение выделения в начало.
- Page Down - перемещение выделения к последнему нижнему видимому элементу.
- Page Up - перемещение выделения к первому верхнему видимому элементу.
- Shift+Tab - закрывает список и перемещает фокус к предыдущему объекту DisplayList.
- Tab - закрывает список и перемещает фокус к следующему объекту DisplayList.
- Up - перемещение вверх на один элемент.
