2 Replies Latest reply on May 21, 2011 6:01 PM by jefecame

    Fxg's as MenuBar icons?

    jefecame Level 1

      Hello everybody. I have a little concern. I started trying to make a MenuBar with custom icons already made in FXG format.

       

      I have 3 FXG files in "assets.graphics.icons" inside my project folder:

      1. src/assets/graphics/icons/MenuIcon.fxg

      2. src/assets/graphics/icons/ItemAIcon.fxg

      3. src/assets/graphics/icons/ItemBIcon.fxg

       

      After reading the following two links and a bunch of web pages.

       

      1. http://blog.flexexamples.com/2010/01/29/displaying-icons-in-an-mx-menubar-control-in-flex/

      2. http://livedocs.adobe.com/flex/3/html/help.html?content=menucontrols_3.html

       

      I ended up with this code:

       

      <?xml version="1.0" encoding="utf-8"?>
      
      <!-- src/myMenuBarApplication.mxml -->
      
      <mx:Application name="myMenuBarApplication"
                      xmlns:mx="http://www.adobe.com/2006/mxml"
                      xmlns:components="assets.graphics.icons.*">
           <mx:MenuBar id="myMenuBar" iconField="@icon" labelField="@label" showRoot="true">
                <fx:XMLList>
      
                     <menuitem label="Menu" icon="">
                          <menuitem label="Item A" icon="">
                               <menuitem label="SubItem A1"/>
                               <menuitem label="SubItem A2"/>
                          </menuitem>
                          <menuitem label="Item B" icon="">
                               <menuitem label="SubItem B1"/>
                               <menuitem label="SubItem B2"/>
                          </menuitem>
                     </menuitem>
      
                </fx:XMLList>
           </mx:MenuBar>
      
      </mx:Application>
      

       

      The reality is that I have been trying to put anyone of fxg components inside the icon attributes of the MenuBar in many different ways with no luck.

      I really hope someone has already made something like this.

      I would appreciate any help.

        • 1. Re: Fxg's as MenuBar icons?
          jefecame Level 1

           

          I learned that you can do it with any image file adding an <fx:Script> tag with the following code

           

              <mx:Script>

                  <![CDATA[

                      [Embed("assets/graphics/images/MenuIcon.png")]

                      public const MenuIconConst:Class;

                  ]]>

              </mx:Script>

           

          An adding the constant name to the icon attribute of the MenuBar control like this:

           

          <menuitem label="Menu" icon="MenuIconConst">

           

          So I tried to do this with no luck:

           

              <mx:Script>

                  <![CDATA[

                      import assets.graphics.icons.*;

                      [Bindable]

                      public var MenuIconVar:Class = new MenuIcon() as Class;

                      // MenuIcon is one of my FXG files inside assets.graphics.icons

                  ]]>

              </mx:Script>

          ...

          <menuitem label="Menu" icon="MenuIconVar">

           

          I found an a different web page that you have to make a library to embed Fxg files and then use them as Class names or something like this but i did not understand that very well.

          • 2. Re: Fxg's as MenuBar icons?
            jefecame Level 1

            I read that you can probably do something like the code below but I think something is missing cause still does'n work.

             

             

            <?xml version="1.0" encoding="utf-8"?>
            <!-- src/myMenuBarApplication.mxml -->
            <s:Application
            
             xmlns:fx="http://ns.adobe.com/mxml/2009" 
                              xmlns:s="library://ns.adobe.com/flex/spark" 
                              xmlns:mx="library://ns.adobe.com/flex/mx"
                              xmlns:graphics="assets.graphics.icon">
            
                 <fx:Script>
            
                      <![CDATA[
                           import assets.graphics.icon;
                      ]]>
                 </fx:Script>
            
                      <mx:MenuBar id="myMenuBar" iconField="@icon" labelField="@label" showRoot="true">
            
                           <fx:XMLList>
            
                                <menuitem label="Menu">
                                     <menuitem label="Item A" >
                                          <menuitem label="SubItem A1" icon="{icon}"/>
                                          <menuitem label="SubItem A2"/>
                                     </menuitem>
                                     <menuitem label="Item B">
                                          <menuitem label="SubItem B1"/>
                                          <menuitem label="SubItem B2"/>
                                     </menuitem>
                                </menuitem>
                           </fx:XMLList>
            
                      </mx:MenuBar>
            </s:Application>
            
            
            
            

             

            I guess I probably have to do something with the item renderer, but since I´m new to flex I'm not quite sure.