Setting a prompt on a ComboBox control in Flex

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.

View MXML

<?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:

View MXML

<?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>

15 thoughts on “Setting a prompt on a ComboBox control in Flex

  1. this is of great help….can you also mention how to control 3d zoom using as3.

    thanks

  2. I am trying to figure out how to run my jsp files through a flex application. Can someone help me with this?

  3. 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?

  4. 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

  5. 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.

    1. @Liviu,

      This seems to work for me (Flex 3.4.0.9147):

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
       
          <mx:VBox>
              <mx:ComboBox id="cb" prompt="ok" dataProvider="[One,Two,Three]" editable="true" width="100%" />
              <mx:Label text="text = {cb.text}" />
              <mx:Label text="selectedIndex = {cb.selectedIndex}" />
              <mx:Label enterFrame="event.currentTarget.text = 'prompt = ' + cb.prompt;" />
              <mx:Button label="Set selectedIndex=-1" click="cb.selectedIndex = -1;" />
              <mx:HRule width="100%" />
              <mx:Label fontWeight="bold" initialize="event.currentTarget.text = mx_internal::VERSION;" />
          </mx:VBox>
       
      </mx:Application>

      Peter

  6. 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:

    import fl.data.*;
    cb.editable = true;
    cb.dataProvider = new DataProvider(["one", "two", "3"]);
    cb.prompt = "Choose a number";
    b.addEventListener(MouseEvent.CLICK, onClickButton);
    function onClickButton(e){
    	cb.selectedIndex = -1;
    }

    Whenever you write something into the ComboBox, the button has no effect.

  7. 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?

  8. 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.

Comments are closed.