Rico on Flex

Here’s how to create a custom Menu component that can display your own images or swf graphics as menu items instead of just plain text. In this example, we will create a custom Menu component that displays a list of fonts. The fonts will appear in their actual typeface in the Menu. This will improve usability in applications that use fonts such as image or document editors.

We will need to implement the following for this project:

1. create the font swf files that will be displayed in the Menu
2. an item renderer component that uses a SWFLoader object to load the font swf files
3. the Menu component created using Actionscript in our main application

Create the swf files containing the fonts to display and save it in a folder, here we named the folder swf. You can use Flash or Flex or any available authoring tool to do this. The swf contains a static text control with the font set to the desired typeface.

We also create our item renderer component which is a Canvas that contains a SWFLoader component. The Canvas should implement the IMenuItemRenderer interface to be able to work with the custom menu, we do this in MXML by setting the Canvas’ implements property to the needed interface. We are also required to override the IMenuItemRenderer’s get and set methods for its menu property but we don’t add anything to it here in our example. In the SWFLoader component, we set its source property to data.swf. data represents the item in the Menu’s data provider which contains the path to the swf files. Here’s the code:

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Canvas xmlns:mx=”http://www.adobe.com/2006/mxml” width=”100″ height=”25″ verticalScrollPolicy=”off” horizontalScrollPolicy=”off” xmlns:external=”flash.external.*” implements=”mx.controls.menuClasses.IMenuItemRenderer”>
<mx:Script>
<![CDATA[
import mx.controls.Menu;

public function get menu():Menu {
return null;
}

public function set menu(value:Menu):void {
}
]]>
</mx:Script>
<mx:SWFLoader source=”{data.swf}” width=”100″ height=”25″ horizontalCenter=”0″ verticalCenter=”0″/>
</mx:Canvas>

We create the custom Menu in our main application. We set menuData as the Menu’s data provider. menuData is an array of objects that represents the structure of the Menu. We add a swf property representing the path to the swf file to display for each menu item object in the Menu. We also set the Menu’s itemRenderer by creating a new ClassFactory object and passing in our item renderer component to its constructor, this is necessary because the Menu’s itemRenderer property needs to contain an object that implements the IFactory interface. Here’s the code for our main application:

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute” creationComplete=”init();” backgroundGradientColors=”[#c0c0c0, #ffffff]“>
<mx:Script>
<![CDATA[
import mx.events.MenuEvent;
import mx.controls.Menu;

private var menu:Menu;

private function init():void {
var menuData:Array = [
{swf:'swf/coolfonts.swf', children: [
{label: "SubMenuItem A-1", swf:'swf/meridiana.swf'},
{label: "SubMenuItem A-2", swf:'swf/virinda.swf'}
]},
{swf:’swf/scriptfonts.swf’, children: [
{label: "SubMenuItem A-1", swf:'swf/monotypecorsiva.swf'},
{label: "SubMenuItem A-2", swf:'swf/comicsansms.swf'}
]}
];

menu = Menu.createMenu(this, menuData);
menu.itemRenderer = new ClassFactory(FontItemRenderer);
}

]]>
</mx:Script>
<mx:Button x=”10″ y=”10″ label=”Show Menu” id=”btnShowMenu” click=”menu.show(btnShowMenu.x, btnShowMenu.y+btnShowMenu.height);”/>
</mx:Application>