Displaying icons in a Flex PopUpButton control (Redux)

8 Responses to Displaying icons in a Flex PopUpButton control (Redux)

1. Dave says:

   January 28, 2009 at 8:40 am

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

   Reply
2. David Passey says:

   February 12, 2009 at 9:26 am

   Good example. I’m wondering why you use preinitialize instead of initialize in this code?

   Reply
3. Peter deHaan says:

   February 12, 2009 at 7:12 pm

   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

   Reply
4. Mike says:

   March 19, 2009 at 6:08 pm

   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!

   Reply
5. Reny Mohan says:

   December 24, 2009 at 2:43 am

   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

   Reply
   • Peter deHaan says:

     December 24, 2009 at 12:58 pm

     @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

     Reply
6. Shreya says:

   January 2, 2012 at 10:11 pm

   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?

   Reply
7. Shreya says:

   January 2, 2012 at 10:16 pm

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

   Reply