In Flex, How can I use an Fxg file as a MenuBar Icon attribute?

Question

I have a little concern. I started trying to make a MenuBar control 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-menu bar-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>

I learned that you can do it with any image file adding an 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:

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>

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.

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.

Answer 1

It is actually easier then you think, if you just treat it like any ol' MXML class.

So, "assets/graphics/images/MenuIcon.fxg" would become assets.graphics.images.MenuIcon. Since a string is not a class, you will need to use a binding expression to assign the class to your icon attribute.

<menuitem label="Item A" icon="{assets.graphics.images.MenuIcon}">
     <menuitem label="SubItem A1"/>
     <menuitem label="SubItem A2"/>
</menuitem>

You may also need to import the class first... I can't recall off the top of my head.