How do you display swf objects as items in a Menu using an item renderer?

Here's how our custom menu will look like:

First we need to 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>

To see the full example, download the zip file associated with this example. You can view similar tips at my site ricoonflex.wordpress.com.