注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

神魔破杜梓的叨叨堂

Programming every day!

 
 
 

日志

 
 
 
 

FLex 组件 Menu MenuBar 子菜单无法显示图标icon的问题  

2008-03-06 18:54:03|  分类: My Tech |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

今天做项目,使用自带的Menu MenuBar组件,发现无论怎么定义数据和iconField,菜单和子菜单里面就是不显示图标。最后实在没法子,在网上搜了很多资料,发现必须使用如下形式的定义才可以在菜单里显示图标。

   public var _addUser:Class = AppIcons.addUser;
   public var _addGroup:Class = AppIcons.addGroup;
   public var _sendMessage:Class = AppIcons.sendMessage;
   public var _editUser:Class = AppIcons.editUser;
   public var _deleteUser:Class = AppIcons.deleteUser;

 

<mx:MenuBar width="100%" height="30" iconField="@icon" labelField="@label">
  <mx:dataProvider>
   <mx:XMLList>
    <menuitem label="新建" icon="_addUser">
                   <menuitem label="联系人" icon="_addUser">
                     <menuitem label="联系人" icon="_addUser"/>
                     <menuitem label="联系人" icon="_addUser"/>
                   </menuitem>
                   <menuitem label="分组"/>
             </menuitem>
             <menuitem label="加入组" icon="_addGroup">
      <menuitem label="组一" />
      <menuitem label="组二"/>
      <menuitem label="组三"/>
      <menuitem label="组四"/>
      <menuitem type="separator"/>
      <menuitem label="新建联系组"/>
             </menuitem>
             <menuitem label="发送短消息" icon="_sendMessage"/>
             <menuitem label="编辑" icon="_editUser"/>
             <menuitem label="删除" icon="_deleteUser"/>
   </mx:XMLList>
  </mx:dataProvider>
 </mx:MenuBar>

 

AppIcons如下定义:

[Bindable]
 public class AppIcons
 {
  [Embed(source="assets/iPhone Phone.png")]
  public static var sendInfo:Class
  
  [Embed(source="assets/Address Book.png")]
  public static var addressBook:Class
  
  [Embed(source="assets/find.png")]
  public static var infoQuery:Class
  
  [Embed(source="assets/user manage.png")]
  public static var userManage:Class
  
  [Embed(source="assets/note.png")]
  public static var note:Class
  
  [Embed(source="assets/user_add.png")]
  public static var addUser:Class;   

  [Embed(source="assets/group_add.png")]
  public static var addGroup:Class;  

  [Embed(source="assets/phone.png")]
  public static var sendMessage:Class;
 
  [Embed(source="assets/user_edit.png")]
  public static var editUser:Class;
  
  [Embed(source="assets/user_delete.png")]
  public static var deleteUser:Class;
 }

 

但是还是有问题,子菜单里还是没有办法显示图标。于是又开始人肉搜索。可惜搜索了半天也没有结果。没法子,只好老老实实读sdk的源代码。经过不断的调试,发现在MenuBar的getMenuAt方法里面,adobe的同志生成menu的同时没有给其设置document,因此我们在使用menuBar的文档中定义的icon是没有办法被解析的。(参见adobe flex sdk中MenuBar 的getMenuAt方法,itemToIcon方法,以及Menu的makeListData方法,和openSubMenu方法)

 

于是问题就简单了,只需要在getMenuAt和openSubMenu方法中new Menu的时候给新创建的Menu设置一下document就可以了。重写getMenuAt还比较好做,但是重写openSubMenu就比较麻烦了,它是一个内部的方法,最重要的是没有办法像getMenuAt一样获取到新创建的menu,于是乎又郁闷了。

最后,从iconFunction中找到了答案,在openSubMenu里有一句代码: menu.iconFunction = r.iconFunction;

呵呵,现在,通过简单的重写一下MenuBar就可以得到想要的结果了。

 public class MenuBar extends mx.controls.MenuBar
 {
  public function MenuBar()
  {
   super();
  }
  
  public override function getMenuAt(index:int):Menu
  {
   var menu:Menu = super.getMenuAt(index);
   menu.iconFunction = getMenuIcon;
   return menu;
  }
  
  private function getMenuIcon(data:Object):Class
  {
   return super.itemToIcon(data);
  } 
 }

总结一下:

造成这种结果的原因是在sdk MenuBar中的Menu是在动态创建的,无法获取到document,也无法设置iconFunction,所以只要将将document赋予menu就可以使第一级子菜单获得icon,但是二级,三级子菜单还是没有icon,所以就定义一个iconFunction,将MenuBar中ItemToIcon的结果通过这个iconFunction传给子菜单们就可以了,因为MenuBar显然获取了document,可以正确解析定义的icon。

  评论这张
 
阅读(3804)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017