Display icons in ComboBox/Menu/Menubar

This is one very very simple solution. Before going into solution, lets see what I meant by "display icons in ComboBox/Menu/Menubar". Mmmm.

Icons in ComboBox

Certain requirements demand you to display icons in combobox like below where the icon will act as some kind of indicator. Here in the below picture, the dropdown values have an "information" icon where I am kind of mentioning that selecting any value will give information about the selected state.


Icons in ComboBox

To show icon in the dropdown of ComboBox, you just need to make one change, as simple as it is. Lets say you have a ComboBox like below and you are initializing the array collection in the init() function and each object in the array collection has a property called "icon". You need to set what icon (String) you are intending to use for each combo value. You can use different icons for different values. Now to show the icon in the dropdown of the ComboBox, you jsut need to specify the property you are using for the icon field as iconComboBox.dropdown.iconField = "icon". Check this.


<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
  xmlns:mx="http://www.adobe.com/2006/mxml" 
  layout="absolute" 
  ... >

  <mx:Script>
    <![CDATA[
      import mx.collections.ArrayCollection;
      [Bindable]
      private var stateArrayColl:ArrayCollection = new ArrayCollection();

      [Bindable]
      [Embed(source="/assets/information.png")]
      public var Information:Class;

      public function onCreationComplete():void {
        iconComboBox.dropdown.iconField = "icon";
      }

      public function init():void {
        stateArrayColl.addItem(new ValueObject("AZ", "Arizona", "Information"));
        stateArrayColl.addItem(new ValueObject("CA", "California", "Information"));
        ...
      }

    ]]>
  </mx:Script>

  <mx:VBox width="100%" horizontalAlign="center" verticalAlign="middle">
    ...
    <mx:ComboBox id="iconComboBox" 
      dataProvider="{this.stateArrayColl}" initialize="init()"
      labelField="label" prompt="Select States.." creationComplete="onCreationComplete()"/>

  </mx:VBox>        

</mx:Application>

Easy, isn't it? Now lets see how to set icon in the Menu.

Icons in Menu

This is even more easier than above one.


Icons in PopUp Menu

In this example when you click on "Open Menu" button, the popup menu will be created and shown on screen. When creating the menu, set what property you are intending to use for iconField using myMenu.iconField="icon" as shown below and thats it, your job is done.


<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" ... />

  <mx:Script>
    <![CDATA[
      import mx.controls.Menu;
      import mx.collections.ArrayCollection;
			
      [Bindable]
      private var myMenuData:ArrayCollection = new ArrayCollection();

      // Create and display the Menu control.
      private function createAndShow():void {
        var myMenu:Menu = Menu.createMenu(null, myMenuData, false);
        myMenu.labelField="label";
        myMenu.iconField="icon";
        //Position the menu and show it when the button is clicked
        myMenu.show((this.width/2 - this.myButton.width/2), 50);
      }
            
      [Bindable]
      [Embed(source="/assets/information.png")]
      public var Information:Class;
        
      public function init():void {
        myMenuData.addItem(new ValueObject("MA", "MenuItem A", "Information"));
        myMenuData.addItem(new ValueObject("MB", "MenuItem B"));
        ...
      }
    ]]>
  </mx:Script>

  <mx:VBox>
    <mx:Button id="myButton" initialize="init()" label="Open Menu" 
      click="createAndShow();"/>
  </mx:VBox>
</mx:Application>

Icons in Menubar

This is similar to displaying icon in popup menu.


Icons in MenuBar

Here also you need to mention the property you are intending to use as iconField in the MenuBar control constructor as "<mx:MenuBar id="myMenuBar" labelField="label" iconField="icon" />". Done.


<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" ...
  initialize="init()">

  <mx:Script>
    <![CDATA[
      import mx.collections.ArrayCollection;
            
      [Bindable]
      private var myMenuData:ArrayCollection = new ArrayCollection();

      [Bindable]
      [Embed(source="/assets/information.png")]
      public var Information:Class;
        
      public function init():void {
        myMenuData.addItem(new ValueObject("MA", "MenuItem A", "Information"));
        myMenuData.addItem(new ValueObject("MB", "MenuItem B"));
        ...             

        myMenuBar.dataProvider = this.myMenuData;
      }
    ]]>
  </mx:Script>
    
  <mx:MenuBar id="myMenuBar" labelField="label" iconField="icon" />
</mx:Application>


You can download the example source code here. In this sample source code, there are 3 different classes for the above mentioned three different controls. I used ArrayCollection instead of Array or XML collection as in most practical scenarios we use dynamically built ArrayCollection as dataProvider.

Download the example code.





blog comments powered by Disqus