Displaying icons in a Flex PopUpButton control (Redux)

In a previous example, “Displaying icons in a Flex PopUpButton control”, we saw how you could add icons to a PopUpButton control’s nested menu using an Array data provider.

The following example shows you how you can add icons to a pop up menu in a PopUpButton control in Flex by specifying the iconField property in the PopUpButton control’s nested Menu control using an XML data provider.

Full code after the jump.

View MXML

<?xml version="1.0"?>
<!-- http://blog.flexexamples.com/2009/01/20/displaying-icons-in-a-flex-popupbutton-control-redux/ -->
<mx:Application name="PopUpButton_popUp_Menu_iconField_test_2"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="horizontal"
        verticalAlign="top"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.controls.Menu;

            [Embed("assets/Button.png")]
            public const ButtonIcon:Class;

            [Embed("assets/ButtonBar.png")]
            public const ButtonBarIcon:Class;

            [Embed("assets/CheckBox.png")]
            public const CheckBoxIcon:Class;

            [Embed("assets/ColorPicker.png")]
            public const ColorPickerIcon:Class;

            [Bindable]
            private var menu:Menu;

            private function initMenu():void {
                menu = new Menu();
                menu.dataProvider = xmlList;
                menu.labelField = "@label";
                menu.iconField = "@icon";
            }
        ]]>
    </mx:Script>

    <mx:Style>
        PopUpButton {
            popUpStyleName: myCustomPopUpStyleName;
        }

        .myCustomPopUpStyleName {
           fontWeight: normal;
           textAlign: left;
        }
    </mx:Style>

    <mx:XMLList id="xmlList">
        <node label="Alert" />
        <node label="Button" icon="ButtonIcon" />
        <node label="ButtonBar" icon="ButtonBarIcon" />
        <node label="CheckBox" icon="CheckBoxIcon" />
        <node label="ColorPicker" icon="ColorPickerIcon" />
    </mx:XMLList>

    <mx:PopUpButton id="popUpButton"
            label="Select a control..."
            popUp="{menu}"
            preinitialize="initMenu();"
            creationComplete="popUpButton.open();" />

</mx:Application>

9 thoughts on “Displaying icons in a Flex PopUpButton control (Redux)

  1. How do you do this, specify icon when the XML list is specified in an ActionScript class? This class is then specified as the dataProvider via databinding. When I try this for menus the icon is just not displayed (no errors0 and when I do the same for a PopUpMenuButton I get an error saying that cannot parse value of type Class from text ‘@icon’.

  2. David Passey,

    No reason. The preinitialize event gets run first, but it shouldn’t really matter which event you use (I don’t think — I’m often wrong).

    Peter

  3. Is there a way to move the x position of the menu relative to its PopUpButton?

    By default, the menu is left aligned with the left edge of the PopUpButton, but my menu has a shadow as part of its borderSkin, so I need to shift the x position of the menu 4 pixels left.

    Thanks for your help!

  4. Hi , is there any better way to give popup components to the popupButton ..the problem is when dragging the popup,it seperates from the popup button…Thanks in advance
    regards

    Reny

    1. @Reny Mohan,

      How about setting the isPopUp property to false?

      <?xml version="1.0"?>
      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
       
          <mx:PopUpButton id="popUpButton"
                  label="Select a control..."
                  creationComplete="popUpButton.open();">
              <mx:popUp>
                  <mx:Panel width="300" height="200" id="pnl" creationComplete="pnl.isPopUp = false;">
                      <mx:Button label="I'm a button" />
                      <mx:ControlBar>
                          <mx:Button label="I'm a button in a control bar" />
                      </mx:ControlBar>
                  </mx:Panel>
              </mx:popUp>
          </mx:PopUpButton>
       
      </mx:Application>

      Peter

  5. Hi, I want the same thing working in actionscript instead of mxml. I converted this mxml code to AS(but my cons are not getting displayed) as follows:
    CollectionAction.as File
    package
    {
    import flash.events.Event;

    import mx.binding.utils.BindingUtils;
    import mx.controls.Menu;
    import mx.controls.PopUpButton;
    import mx.events.FlexEvent;
    import mx.events.MenuEvent;

    public class CollectionViewAction extends PopUpButton
    {

    [Bindable]
    private var menu:Menu;
    //[Bindable]
    [Embed(source=”assets/New16.png”)]
    public const printIcon:Class;
    [Embed(source=”New16.png”)]
    public const printIcon1:Class;
    [Embed(“assets/New16.png”)]
    public const ButtonIcon:Class;
    [Bindable]
    public static var menuDataXML:XML =

    ;
    [Bindable]
    public static var menuXMLL:XMLList;

    public function CollectionViewAction()
    {
    super();
    menu = new Menu();
    this.popUp=menu;
    //this.addEventListener(FlexEvent.CREATION_COMPLETE, initData,false,0,true);
    this.addEventListener(FlexEvent.PREINITIALIZE, initData,false,0,true);

    }
    private function initData(e:Event):void
    {
    //this.dataProvider = menuDataXML.menuItem;
    /*
    this.openAlways = true;
    this.labelField=”@label”;
    this.showRoot = true;
    this.iconField=”@icon”;//DropDown Action

    this.dataProvider = menuDataXML.children();
    //callLater(setViewDate);
    trace(“PopupButton Menu$$$$”);
    */
    //menu = new Menu();
    menuXMLL=menuDataXML.children();
    menu.dataProvider = menuXMLL;
    menu.labelField = “@label”;
    menu.iconField = “@icon”;
    //BindingUtils.bindProperty((this,”popUp”,menu
    //this.popUp=menu;

    }
    /*
    private function setViewDate():void
    {

    this.addEventListener(“itemClick”, handleItemClick,false,0,true);
    //Menu(this.popUp).selectedIndex = 0;
    for(var i:int=0; i < this.dataProvider.length; i++)
    {
    this.label = this.dataProvider[i].@label;
    this.iconField=this.dataProvider[i].@icon; //DropDown Action
    break;

    }
    }
    public function handleItemClick(event:MenuEvent):void
    {

    trace("PopupButton Menu handle item click $$$$$");
    var xml:XML = new XML(event.item);
    var str:String;
    switch(String(event.item.@data))
    {
    /*case "New":trace("New");
    str="msf.foundation.actions.NewMdlObjectAction";
    //var cl:Class = str as Class;
    //var cf:ClassFactory = new ClassFactory(cl);
    //action = cf.newInstance() as AbstractAction;
    //action.setUiObject(this);
    //menuItem.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, action.handleExecute);
    //a= new NewMdlObjectAction();
    action = new NewMdlObjectAction();
    action.setUiObject(MdlCollectionView);
    action.handleExecute(event);
    //callLater(a.handleExecute, [new Event("test")]);
    break;
    case "Play":trace("Play");
    break;*/
    /*}

    }*/
    }
    }

    ============================================

    ================================================

    Can you please tell me what else I will have to do to display the icons?

  6. Pasting my cleaned code again:
    Actionscript File:
    package
    {
    import flash.events.Event;

    import mx.binding.utils.BindingUtils;
    import mx.controls.Menu;
    import mx.controls.PopUpButton;
    import mx.events.FlexEvent;
    import mx.events.MenuEvent;

    public class CollectionViewAction extends PopUpButton
    {

    [Bindable]
    private var menu:Menu;
    [Embed(“assets/New16.png”)]
    public const ButtonIcon:Class;
    [Bindable]
    public static var menuDataXML:XML =

    ;
    [Bindable]
    public static var menuXMLL:XMLList;

    public function CollectionViewAction()
    {
    super();
    menu = new Menu();
    this.popUp=menu;
    this.addEventListener(FlexEvent.PREINITIALIZE, initData,false,0,true);

    }
    private function initData(e:Event):void
    {
    menuXMLL=menuDataXML.children();
    menu.dataProvider = menuXMLL;
    menu.labelField = “@label”;
    menu.iconField = “@icon”;

    }

    }
    }

    Can you please tell me what can I do to display the icons?
    My actionscript code is same as the mxml code above, but the icons are not getting displayed at all.
    Thanks in advance!!

  7. I’m having a very similar problem as Shreya, in that something goes mysteriously wrong when setting icons via ActionScript at runtime. Is there an extra step that we’re missing?

Comments are closed.