定制Flex菜单图标

　　默认Menu上的Icon必须通过iconField和iconFunction去指定，但是这两种方式都必须用嵌入资源Class名字去指定Icon，如果想用动态的图片（比如URL）作为Menu的Icon，就必须定制一把MenuItemRenderer。

　　首先写个类CustomMenuItemRenderer继承MenuItemRenderer，里面增加一个如下变量作为自定义Icon的组件：

　　view sourceprint?1 private var image:UIComponent = new UIComponent();

　　然后里面重写measure方法（计算MenuItem的宽高）：

　　view sourceprint?01 override protected function measure():void {

　　03

　　04 if (separatorIcon listData == null) {

　　05 return;

　　06 }

　　07

　　08 var imageAsset:IImageAsset = Utils.getImageAsset(data.@iconName);

　　09 if(imageAsset == null){

　　10 return;

　　11 }

　　12 measuredWidth += imageAsset.width;

　　13 if(imageAsset.height > measuredHeight){

　　14 measuredHeight = imageAsset.height;

　　15 }

　　16 }

　　重写commitProperties方法（重画并增加Icon，指定Icon宽高）：

　　view sourceprint?01 override protected function commitProperties():void {

　　03

　　04 if (separatorIcon listData == null) {

　　05 return;

　　06 }

　　07

　　08 var imageAsset:IImageAsset = Utils.getImageAsset(data.@iconName);

　　09 if(imageAsset == null){

　　10 return;

　　11 }

　　12 image.width = imageAsset.width;

　　13 image.height = imageAsset.height;

　　14 image.graphics.beginBitmapFill(imageAsset.getBitmapData());

　　15 image.graphics.drawRect(0, 0, image.width, image.height);

　　16 image.graphics.endFill();

　　18 this.addChild(image);

　　19 }

　　20 }

　　重写updateDisplayList方法（指定Icon的位置，由于Icon在左边，所以super一把后，再移动Labe等的位置）：

　　view sourceprint?01 override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void{

　　02 super.updateDisplayList(unscaledWidth, unscaledHeight);

　　03

　　04 if (separatorIcon listData == null) {

　　05 return;

　　06 }

　　07

　　08 var imageAsset:IImageAsset = Utils.getImageAsset(data.@iconName);

　　09 if(imageAsset == null){

　　10 return;

　　11 }

　　12 if(typeIcon){

　　13 typeIcon.x += imageAsset.width;

　　14 }

　　15 if(label){

　　16 label.x += imageAsset.width;

　　17 }

　　18 }

　　重写measuredIconWidth方法（计算Icon的宽度）：

　　view sourceprint?1 override public function get measuredIconWidth():Number {

　　2 var imageAsset:IImageAsset = Utils.getImageAsset(data.@iconName);

　　3 if(imageAsset == null){

　　4 return 0 ;

　　5 }else{

　　6 var horizontalGap:Number = getStyle(horizontalGap);

　　7 return imageAsset.width + horizontalGap;

　　8 }

　　9 }

　　最后用自定义的CustomMenuItemRenderer指定Menu的ItemRenderer，注意使用iconName指定icon的名字（这里为TWaver注册图片的名字）。也可以用别的名字，注意把CustomMenuItemRenderer里面的@iconName换一下

　　view sourceprint?1 var menu:Menu = Menu.createMenu(network, myMenuData, false);

　　3 menu.itemRenderer = new ClassFactory(CustomMenuItemRenderer);

　　4 var point:Point = network.getLogicalPoint(event.mouseEvent);

　　5 network.callLater(function():void{

　　6 menu.show(point.x, point.y);

　　7 });

　　指定Menu数据的XML文件如下：

　　view sourceprint?01 <mx:XML format=e4x id=myMenuData>

　　02 <root>

　　03 <menuitem label=

　　04 <menuitem label=TWaver type=check toggled=true>

　　05 <menuitem label=Java type=radio groupName=one/>

　　06 <menuitem label=Web type=radio groupName=one toggled=true/>

　　07 <menuitem label=Flex type=radio groupName=one iconName=bus_icon/>

　　08 <menuitem label=Silverlight type=radio groupName=one/>

　　09 </menuitem>

　　10 <menuitem type=separator/>

　　11 <menuitem label=2BizBox iconName=data_icon/>

　　12 </menuitem>

　　13 <menuitem label=

　　15 </root>

　　16 </mx:XML>

　　17 </code>