13 Replies Latest reply on May 20, 2010 10:47 AM by Flex harUI

    Menubar ItemRenderer is not working..?

    Ling's Level 1

      Hi

                I would like to work in Menubar -menuBarItemRenderer. but it's not working..

       

      <mx:MenuBar id="etestmenu"   dataProvider="{Datamenu}" width="100%" itemClick="ClickMenuItem(event);" click="Select_MenuBar(event);" >
                  <mx:menuBarItemRenderer>
                     
                      <fx:Component>
                         
                          <mx:Text text="{data.Label}" />

                          <mx:Image source="{data.Icon}" />
                                         
                      </fx:Component>


                  </mx:menuBarItemRenderer>       
          </mx:MenuBar>

       

      Error ll be displayed.

       

      TypeError: Error #1034: Type Coercion failed: cannot convert MenubarTestingInnerClass0@d53ec29

      to mx.controls.menuClasses.IMenuBarItemRenderer.

       

      How to solve this problem

       

       

      With Regards.,

      Lings

        • 1. Re: Menubar ItemRenderer is not working..?
          Flex harUI Adobe Employee

          Try:

                         

                          <fx:Component>

                              <mx:Hbox>

                              <mx:Text text="{data.Label}" />

                              <mx:Image source="{data.Icon}" />

                              </mx:Hbox>               

                          </fx:Component

           

          • 2. Re: Menubar ItemRenderer is not working..?
            TeotiGraphix Level 3

            Hi,

             

            The error means your inline component doesn't implement the IMenuBarItemRenderer interface which it doesn't.

             

            Your renderer either needs to implement IMenuBarItemRenderer or subclass MenuBarItem.

             

            Here is a very "simple" example, it's not complete but it should help you;

             

            package
            {
            
            import mx.controls.Image;
            import mx.controls.menuClasses.MenuBarItem;
            
            public class MyMenuBarItem extends MenuBarItem
            {
                private var image:Image;
                
                public function MyMenuBarItem()
                {
                }
                
                override protected function commitProperties():void
                {
                    super.commitProperties();
                    
                    if (data)
                    {
                        // <item label="Three" icon="assets/accessories-text-editor.png"/>
                        var icon:String = data.@icon;
                        image = new Image();
                        image.source = icon;
                        addChild(image);
                    }
                }
                
                override protected function measure():void
                {
                    super.measure();
                    
                    if (image)
                    {
                        measuredWidth += image.measuredWidth + 2;
                        measuredHeight = Math.max(image.measuredHeight, measuredHeight);
                    }
                }
                
                override protected function updateDisplayList(unscaledWidth:Number,
                                                              unscaledHeight:Number):void
                {
                    super.updateDisplayList(unscaledWidth, unscaledHeight);
                    
                    if (image)
                    {
                        image.x = (20 - image.measuredWidth) / 2;
                        image.setActualSize(image.measuredWidth, image.measuredHeight);
                        label.x = 20;
                    }
                }
            }
            }
            

             

            Note that the label and it's associated text is taken car of in the super class.

             

            And in the Application;

             

                <mx:MenuBar id="menuBar" 
                            labelField="@label" 
                            iconField="@icon"
                            showRoot="false"
                            menuBarItemRenderer="MyMenuBarItem"
                            dataProvider="{dp}"/>
            

             

             

            Mike

            • 3. Re: Menubar ItemRenderer is not working..?
              Ling's Level 1

              Hi Mike.,

               

                       Your example  Working good.

              Thank u

              Lings

              • 4. Re: Menubar ItemRenderer is not working..?
                Ling's Level 1

                Hi mike .,

                 

                      i need to implement a menubar item renderer in subclass component.

                menubar is loading  to  display all menus icon and labels are working fine.,

                but submenu items  was only displayed labels., could n't loading icons...

                 

                With regards

                Lings

                • 5. Re: Menubar ItemRenderer is not working..?
                  TeotiGraphix Level 3

                  Hi Ling,

                   

                  When you set the menu bar's menuBarItemRenderer, the renderer only applies to the MenuBar buttons, not the actual menus.

                   

                  You would have to create a new item renderer for the popup menus of the MenuBar.

                   

                  See the MenuBar.menus property for more information.

                   

                  Mike

                  • 6. Re: Menubar ItemRenderer is not working..?
                    Ling's Level 1

                    Thank u.,

                             I need to display submenu icon in "Organizations" also..

                        Any Example to create  popup menus  item renderer

                     

                    test.PNG

                     

                    Lings

                    • 7. Re: Menubar ItemRenderer is not working..?
                      Flex harUI Adobe Employee

                      Someone recently changed the menu's item renderer using code like this:

                       

                          // extends MenuBar class in order to gain access to menuBarItems and

                      adjust their label x values

                          // also extended to apply menu ItemRenderer

                          public class ExtendedMenuBar extends MenuBar

                          {

                              public function ExtendedMenuBar()

                              {

                                  super();

                              }

                               

                               

                              override public function getMenuAt(index:int):Menu

                              {

                                  var menu:Menu = super.getMenuAt(index);

                                  menu.itemRenderer = new

                      ClassFactory(renderer.ExtendedMenuItemRenderer);

                                  return menu;

                              }

                      • 8. Re: Menubar ItemRenderer is not working..?
                        Ling's Level 1

                        I need to extended Menubar class..but

                        Classfactor(renderer.ExtendedsMenuItemRenderer)

                         

                         

                        Access of undefined property renderer.. Error

                         

                        Lings

                        • 9. Re: Menubar ItemRenderer is not working..?
                          TeotiGraphix Level 3

                          Hi,

                           

                          The Error means, the compiler cannot find the "renderer" package.

                           

                          You need to have ExtendedsMenuItemRenderer defined in;

                           

                          MyProject/src/renderer/ExtendedsMenuItemRenderer.as

                           

                          Mike

                          • 10. Re: Menubar ItemRenderer is not working..?
                            Ling's Level 1

                            HI.,

                            I have to apply MeubarItemRenderer in submenu item to create a new item renderer for the popup menus of the MenuBar.

                            this is correct..?

                             

                             

                            package com.istmanagement.vo
                            {  
                                import mx.controls.*;
                                import mx.controls.Menu;
                                import mx.controls.MenuBar;
                                import mx.core.ClassFactory;

                                public class ExtendedMenuBar extends   MenuBar
                                        {       
                                    public function ExtendedMenuBar()
                                       
                                    {
                                                super();

                                    }             
                                    override public function getMenuAt(index:int):Menu
                                       
                                    {               var menu:Menu = super.getMenuAt(index);
                                                  menu.itemRenderer = new ClassFactory(MyMenuBarItem);
                                                  return menu;
                                    
                                    }
                               
                            }
                            }

                             

                            MyMenuBarItem.as file

                             

                            package com.istmanagement.vo
                            {
                               
                                import mx.controls.Image;
                                import mx.controls.Text;
                                import mx.controls.menuClasses.MenuBarItem;
                               
                                public class MyMenuBarItem extends MenuBarItem
                                {
                                    private var image:Image;
                                    private var text:Text;
                                   
                                    public function MyMenuBarItem()
                                    {
                                    }
                                       
                                    override protected function commitProperties():void
                                    {
                                        super.commitProperties();
                                       
                                        if (data)
                                        {
                                           
                                            var icon:String = data.menuIcon;
                                            image = new Image();
                                            image.source = icon;
                                            addChild(image);
                                           
                                        }
                                    }
                                   
                                    override protected function measure():void
                                    {
                                        super.measure();
                                       
                                        if (image)
                                        {
                                            measuredWidth += image.measuredWidth +2;
                                            measuredHeight = Math.max(image.measuredHeight, measuredHeight);
                                        }
                                    }
                                   
                                    override protected function updateDisplayList(unscaledWidth:Number,
                                                                                  unscaledHeight:Number):void
                                    {
                                        super.updateDisplayList(unscaledWidth, unscaledHeight);
                                       
                                        if (image)
                                        {
                                            image.x = (20 - image.measuredWidth) / 2;
                                            image.setActualSize(image.measuredWidth, image.measuredHeight);
                                            label.x = 20;
                                        }
                                    }
                                }
                            }

                             

                            Error ll be displayed

                            cannot convert to mx.controls.menuClasses.IMenuBarItemRenderer.

                             

                            Lings

                            • 11. Re: Menubar ItemRenderer is not working..?
                              Flex harUI Adobe Employee

                              Your renderer needs to extend MenuItemRenderer, not MenuBarItem

                              • 12. Re: Menubar ItemRenderer is not working..?
                                Ling's Level 1

                                Any one help this.,

                                I can set the menu bar's menuBarItemRenderer, the renderer  labels and icons only applied to the MenuBaritems, not submenus., how to create new popup menu item render.,

                                .

                                 

                                <mx:MenuBar id="testmenu" labelField="menuLabel" iconField="menuIcon"   menuBarItemRenderer="com.istmanagement.vo.ExtendedMenuBar"
                                                dataProvider="{Datamenu}" width="100%" itemClick="ClickMenuItem(event);" click="Select_MenuBar(event);" >

                                 

                                ExtendedMenuBar.as

                                package com.vo
                                {
                                   
                                    import mx.controls.*;
                                    import mx.controls.Menu;
                                    import mx.controls.MenuBar;
                                    import mx.controls.menuClasses.MenuBarItem;
                                    import mx.controls.menuClasses.MenuItemRenderer;
                                    import mx.core.ClassFactory;

                                 

                                    public class ExtendedMenuBar extends MenuBar
                                       
                                    {
                                public function ExtendedMenuBar()
                                           
                                        {
                                           super();
                                               }
                                    
                                        override public function getMenuAt(index:int):Menu
                                           
                                        {
                                           
                                            var menu:Menu = super.getMenuAt(index);
                                             menu.itemRenderer = new ClassFactory(MyMenuBArItem);
                                          6        return menu;
                                           
                                        }
                                   
                                }
                                }


                                MyMenuBArItem.as

                                 

                                package com.vo
                                {
                                   
                                    import mx.collections.ArrayCollection;
                                    import mx.controls.Image;
                                    import mx.controls.Menu;
                                    import mx.controls.MenuBar;
                                     import mx.controls.menuClasses.MenuBarItem;
                                    import mx.controls.menuClasses.MenuItemRenderer;
                                    import mx.rpc.events.ResultEvent;

                                 

                                    public class MyMenuBArItem extends MenuItemRenderer
                                    {
                                        private var image:Image;
                                        private var imgtest:Image;
                                        private var text:Text;
                                       
                                        public function MyMenuBArItem()
                                        {
                                           }
                                           
                                        override protected function commitProperties():void
                                        {
                                            super.commitProperties();
                                           
                                           
                                            var icon:String = data.menuIcon;
                                            image = new Image();
                                            image.source = icon;
                                            addChild(image);
                                           
                                            var str:ArrayCollection= data.children;
                                            menuImage(str);
                                           
                                       
                                        }

                                 

                                        public function menuImage(str:ArrayCollection):void
                                        {
                                            var str:ArrayCollection= data.children;
                                            if(str == null)
                                            {
                                               
                                            }
                                            else
                                            {
                                                var j:int;
                                                var i:int=0;
                                                for(; i<str.length ; i++)
                                                {
                                                    var test:ArrayCollection=str[i].children;
                                                    for(j=0;j<test.length;j++)
                                                    {
                                                        var menuicon:String =   test[j].menuIcon ;
                                                        imgtest= new Image();
                                                        imgtest.source= menuicon;
                                                        addChild(imgtest);
                                                       
                                                    }
                                                }
                                            }
                                           
                                        }

                                 

                                        override protected function measure():void
                                        {
                                            super.measure();
                                           
                                            if (image)
                                            {
                                                measuredWidth += image.measuredWidth +2;
                                                measuredHeight = Math.max(image.measuredHeight, measuredHeight);
                                            }
                                        }
                                       
                                        override protected function updateDisplayList(unscaledWidth:Number,
                                                                                      unscaledHeight:Number):void
                                        {
                                            super.updateDisplayList(unscaledWidth, unscaledHeight);
                                           
                                            if (image)
                                            {
                                                image.x = (20 - image.measuredWidth) / 2;
                                                image.setActualSize(image.measuredWidth, image.measuredHeight);
                                                label.x = 20;
                                            }
                                        }
                                    }
                                }

                                 

                                It works for top menu but not working for submenu.
                                Do anyone know how to solve it?


                                Lings

                                • 13. Re: Menubar ItemRenderer is not working..?
                                  Flex harUI Adobe Employee

                                  I would expect you to be using ExtendedMenuBar as the tag, not mx:MenuBar