uiComboBox

uiComboBox

The uiComboBox component allows users to make a single selection from a drop-down list.

Using uiComboBox

 1: import com.ghostwire.ui.controls.uiComboBox;
 2: import com.ghostwire.ui.data.uiModel;
 3:
 4: // ** data model **
 5: var model:uiModel = new uiModel();
 6: model.addItem({label:"Item 1",data:"http://url1.com"});
 7: model.addItem({label:"Item 2",data:"http://url2.com"});
 8: model.addItem({label:"Item 3",data:"http://url3.com"});
 9: model.addItem({label:"Item 4",data:"http://url4.com"});
10: model.addItem({label:"Item 5",data:"http://url5.com"});
11: model.addItem({label:"Item 6",data:"http://url6.com"});
12: model.addItem({label:"Item 7",data:"http://url7.com"});
13:
14: // ** combobox **
15: var cbox:uiComboBox = new uiComboBox();
16: cbox.model = model;
17:
18: // ** add to display list **
19: addChild(cbox);

NOTE: The drop-down list will normally be placed below the uiComboBox instance. If the drop-down list hits the bottom of the application area and there is more space above than below the uiComboBox instance, the list will open upwards instead.

Content

As shown in the example code above, the items in the drop-down list of a uiComboBox control is defined using a uiModel object.

16: cbox.model = model;

The data model is accessed via the model property. To modify the data model, you must use members of the uiModel object directly; components in the Aspire UI library generally do not implement members that are already implemented in the data model.

For example, to add an item to the list:

cbox.model.addItem({label:"Another Item",data:"some useful data"});

Size

The default desired size of uiComboBox depends on the text style used, ie the font face and font size affects this default size.

The popup list is a uiListBox instance. The width of this popup list will match the width of the uiComboBox instance, unless the list is wider.

"uilist"

The popup list is a uiListBox instance, which you can access via the uilist property.

For example, in cases where you may want to change the itemRenderer to uiLabel (instead of the default uiText)¹⁾:

import com.ghostwire.ui.controls.uiComboBox;
import com.ghostwire.ui.controls.uiLabel;
import com.ghostwire.ui.data.uiModel;
 
// ** data model **
var model:uiModel = new uiModel();
model.addItem({label:"Item 1",image:"star.png",data:"http://url1.com"});
model.addItem({label:"Item 2",image:"star.png",data:"http://url2.com"});
model.addItem({label:"Item 3",image:"star.png",data:"http://url3.com"});
model.addItem({label:"Item 4",image:"star.png",data:"http://url4.com"});
model.addItem({label:"Item 5",image:"star.png",data:"http://url5.com"});
model.addItem({label:"Item 6",image:"star.png",data:"http://url6.com"});
model.addItem({label:"Item 7",image:"star.png",data:"http://url7.com"});
model.addItem({label:"Item 8",image:"star.png",data:"http://url8.com"});
model.addItem({label:"Item 9",image:"star.png",data:"http://url9.com"});
model.addItem({label:"Item 10",image:"star.png",data:"http://url10.com"});
// ** the "star.png" image file must exist in "assets/images/" **
 
// ** combobox **
var cbox:uiComboBox = new uiComboBox();
cbox.model = model;
cbox.uilist.itemRenderer = uiLabel;
 
// ** add to display list **
addChild(cbox);

User Interaction

When the uiComboBox instance has focus, the user can use the following keys to interact with the component:

Key	Action
Alphanumeric keys	Jumps to the next item with the first character of its label matching the key.
Down Arrow	Selects next item in the list.
End	Selects the last item.
Home	Selects the first item.
Page Down	Selects item one page down on the list.
Page Up	Selects item one page up on the list.
Shift+Tab	Moves focus to previous UI control in the tab focus chain.
Spacebar	Open/close the popup list.
Tab	Moves focus to next UI control in the tab focus chain.
Up Arrow	Selects previous item in the list.

If the editable property is set to true, the user can type into the input text field²⁾. To get this value, use the selectedValue property.

var answer:String = cbox.selectedValue; // ** either user-entered text, or label of selected item **

ComboBoxDemo

ActionScript 3.0 ComboBoxDemo class

 1: package
 2: {
 3:     import com.ghostwire.ui.controls.uiComboBox;
 4:     import com.ghostwire.ui.controls.uiLabel;
 5:     import com.ghostwire.ui.data.uiModel;
 6:     import com.ghostwire.ui.managers.uiSkins;
 7:
 8:     import flash.display.Sprite;
 9:     import flash.events.Event;
10:     import flash.net.navigateToURL;
11:     import flash.net.URLRequest;
12:
13:     public class ComboBoxDemo extends Sprite
14:     {
15:         public function ComboBoxDemo()
16:         {
17:             addEventListener(Event.ADDED_TO_STAGE,init);
18:         }
19:
20:         private function init(evt:Event):void
21:         {
22:             // ** optional but recommended **
23:             stage.scaleMode    = "noScale";
24:             stage.align        = "TL";
25:
26:             // ** uncomment to use "classic" theme **
27:             // uiSkins.initialize("classic");
28:
29:             // ** optional but recommended **
30:             // ** let assets preload before starting application **
31:             uiSkins.manager.addEventListener(Event.INIT,main);
32:         }
33:
34:         private function main(evt:Event):void
35:         {
36:             // ** main application code **
37:             // ** data model **
38:             var model:uiModel = new uiModel();
39:             model.addItem({label:"Item 1",image:"star.png",data:"http://url1.com"});
40:             model.addItem({label:"Item 2",image:"star.png",data:"http://url2.com"});
41:             model.addItem({label:"Item 3",image:"star.png",data:"http://url3.com"});
42:             model.addItem({label:"Item 4",image:"star.png",data:"http://url4.com"});
43:             model.addItem({label:"Item 5",image:"star.png",data:"http://url5.com"});
44:             model.addItem({label:"Item 6",image:"star.png",data:"http://url6.com"});
45:             model.addItem({label:"Item 7",image:"star.png",data:"http://url7.com"});
46:             model.addItem({label:"Item 8",image:"star.png",data:"http://url8.com"});
47:             model.addItem({label:"Item 9",image:"star.png",data:"http://url9.com"});
48:             model.addItem({label:"Item 10",image:"star.png",data:"http://url10.com"});
49:             model.addItem({label:"Item 11",image:"star.png",data:"http://url11.com"});
50:             model.addItem({label:"Item 12",image:"star.png",data:"http://url12.com"});
51:             // ** the "star.png" image file must exist in "assets/images/" **
52:
53:             // ** combobox **
54:             var cbox:uiComboBox = new uiComboBox();
55:             cbox.model = model;
56:             cbox.uilist.itemRenderer = uiLabel;
57:             cbox.addEventListener(Event.CHANGE,on_listSelect);
58:
59:             // ** add to display list **
60:             addChild(cbox);
61:         }
62:         // ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
63:         // ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
64:
65:         // ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
66:         // EVENT HANDLERS
67:         // ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
68:         // handle cbox selection change **
69:         private function on_listSelect(evt:Event):void
70:         {
71:             var request:URLRequest = new URLRequest();
72:             request.url = uiComboBox(evt.target).selectedItem.data;
73:             navigateToURL(request);
74:         }
75:     }
76: }

ComboBoxDemo.as

API Reference

For more information on the members of the com.ghostwire.ui.controls.uiComboBox class, please refer to the API Reference.

¹⁾ Use the uiLabel as the itemRenderer if you wish to use icons and text as the labels.

²⁾ uiComboBox is a subclass of uiTextInput.