Flex Examples
The following example shows how you can set a prompt on a Flex ComboBox control by setting the prompt property.
Full code after the jump.
You can reset a ComboBox control so that its prompt message is visible again by setting the selectedIndex property to -1.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/06/01/setting-a-prompt-on-a-combobox-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="top"
backgroundColor="white">
<mx:Array id="arr">
<mx:Object abbrev="AL" name="Alabama" />
<mx:Object abbrev="AK" name="Alaska" />
<mx:Object abbrev="AZ" name="Arizona" />
<mx:Object abbrev="AR" name="Arkansas" />
<mx:Object abbrev="CA" name="California" />
<mx:Object abbrev="CO" name="Colorado" />
<mx:Object abbrev="CT" name="Connecticut" />
</mx:Array>
<mx:ApplicationControlBar dock="true">
<mx:Button id="button"
label="Reset ComboBox"
click="comboBox.selectedIndex = -1;" />
</mx:ApplicationControlBar>
<mx:ComboBox id="comboBox"
dataProvider="{arr}"
labelField="name"
prompt="Please select a state..." />
</mx:Application>
View source is enabled in the following example.
Due to popular demand, here is the “same” example in a more ActionScript friendly format:
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/06/01/setting-a-prompt-on-a-combobox-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="top"
backgroundColor="white"
initialize="init();">
<mx:Script>
<![CDATA[
import mx.controls.ComboBox;
import mx.controls.Button;
import mx.containers.ApplicationControlBar;
private var arr:Array;
private var appControlBar:ApplicationControlBar;
private var button:Button;
private var comboBox:ComboBox;
private function init():void {
arr = [];
arr.push({abbrev:"AL", name:"Alabama"});
arr.push({abbrev:"AK", name:"Alaska"});
arr.push({abbrev:"AZ", name:"Arizona"});
arr.push({abbrev:"AR", name:"Arkansas"});
arr.push({abbrev:"CA", name:"California"});
arr.push({abbrev:"CO", name:"Colorado"});
arr.push({abbrev:"CT", name:"Connecticut"});
button = new Button();
button.label = "Reset ComboBox";
button.addEventListener(MouseEvent.CLICK, button_click);
appControlBar = new ApplicationControlBar();
appControlBar.dock = true;
appControlBar.addChild(button);
Application.application.addChildAt(appControlBar, 0);
comboBox = new ComboBox();
comboBox.dataProvider = arr;
comboBox.labelField = "name";
comboBox.prompt = "Please select a state...";
addChild(comboBox);
}
private function button_click(evt:MouseEvent):void {
comboBox.selectedIndex = -1;
}
]]>
</mx:Script>
</mx:Application>
Peter deHaan
Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.
Share
wow, this blog is so great, thank you very much….
Thank you :-)
this is of great help….can you also mention how to control 3d zoom using as3.
thanks
I am trying to figure out how to run my jsp files through a flex application. Can someone help me with this?
Scott,
There are several examples of using Flex and JSP at http://learn.adobe.com/wiki/display/Flex/Getting+Started. You can use the search box in the top right corner to find several code snippets.
Peter
Thanks for this one. It’s helped me out
Thanks for the tip. Problem with the “Prompt” is once you select a value from the drop down then you are done you can’t set it back to “-1″ (only through code). I have 20 comboboxes which are optional and in EDIT mode user might want to select “-1″ for some of the combo boxes for which there is a value. So far i did not find any easy solution for this. Any suggestions?
Srinivas Kusunam,
I believe if you hold down the Ctrl key (on Windows, not sure about Mac) while selecting an already selected item it will de-select that item and set the selectedIndex property back to -1.
Peter
Wow – thanks for this great trick! It’s something I never knew.
Hi Peter
I’m running into a problem on resetting editable ComboBoxes back to prompt. When the user writes their own text, the ComboBox does not respond to selectedIndex=-1 anymore.
@Liviu,
This seems to work for me (Flex 3.4.0.9147):
Peter
Hi
I’m not sure about Flex, I am not familiar with MXML, but in AS3 written in Flash CS3, an editable ComboBox that has been edited by the user does not respond to selectedIndex = -1 anymore;
I just opened a new Document, and threw on stage a ComboBox named cb, and a button named b, and wrote this code:
Whenever you write something into the ComboBox, the button has no effect.
@Liviu,
That may be a bug in the Flash CS3+ ComboBox control.
Can you please submit a bug report via http://www.adobe.com/go/wish/ and include your test code.
Thanks,
Peter
How would you set up a StringValidator (MXML not actionscript) with required set to true for the combobox that is editable AND has a prompt set?
My problem is that if I set a validator with required =true, since the combobox is editable and has a prompt the validator always validates TRUE since the prompt is there, however that is wrong as the prompt is not an actual value (just like in the example above ‘Please select a State’ is not the value you want… )… I tried using NumberValidator but that again will not work as the editable combobox always has SelectedIndex = -1 if you are typing the value in there… any thoughts?
Thanks for the useful information here Peter. Could you tell me how you would format the prompt text to be in italics and after a user has made a selection, set the selected text to be in normal[not italics] style? Setting the textInputStyleName to a style that sets the font to italics affects BOTH the prompt style and any user selection.
Its possible prompt always visible in combobox?