Flex Menu 各种数据源定义方式的区别

使用Menu时，需要定义数据源与组件

其中关于数据源的定义方式有4种选择，而常见的菜单一类的组件有Menu与MenuBar

Menu与MenuBar一个比较明显的区别就是：Menu不能在mxml中定义，而MenuBar可以。另外形象外观现实上也有差异

言归正传，重点是数据源的定义。

1.使用XML方式

在使用XML定义menu数据源时，请务必遵守e4x格式(你最好显示声明 format="e4x")，并且通常都包含跟标签<root></root>，然后使所有菜单(包含子菜单)项的表签一致，至于标签名则随意了。一个可能的定义看起来如下：

 

<mx:XML format="e4x" id="menuXML2">
	<root>
		<menuitem label="menuI">
			<menuitem label="menuI-I" enabled="false"/>
			<menuitem label="menuI-II" enabled="true" type="normal"/>
		</menuitem>
		<menuitem label="menuII" toggled="false"/>
		<menuitem label="menuIII" toggled="true"/>
         </root>
</mx:XML>

事实上，这里的root名可以任意，e4x标准解析xml时是根据层次关系的 而不是标签名。

 

这里，我使用menu，前面说过不能在mxml中定义，于是一个可能的定义方式如下：

 

var menu1:Menu = Menu.createMenu(null,menuXML2,false);
menu1.show(100,200);//别忘了这个方法！

试着运行，你会神奇的发现，出来的菜单中全是代码。

 

这是为什么呢？

查阅API：

 

属性	类型	说明
enabled	Boolean	 指定用户可以选择菜单项 (true)，还是不可以选择菜单项 (false)。如果未指定，则 Flex 将假定该值为 true 来处理此项目。如果您使用默认数据说明符，则数据提供程序必须使用 enabledXML 属性或对象字段来指定此特征。
groupName	字符串	 （仅对 radio 类型有意义并且是必需的）用于关联单选组中的单选按钮项目的标识符。如果使用默认数据描述符，则数据提供程序必须使用 groupNameXML 属性或对象字段来指定此特征。
icon	类	 指定图像资源的类标识符。此项目不适用于 check、radio 或 separator 类型。您可以使用 checkIcon 和 radioIcon 样式来指定一些图标，用于所选单选项目和复选框项目。菜单的 iconField 或 iconFunction 属性可以确定数据中用于指定图标的字段名称，或确定用于确定图标的函数。
label	字符串	 指定控件中显示的文本。此项目适用于除 separator 之外的所有菜单项类型。菜单的 labelField 或 labelFunction 属性确定数据中指定标签的字段名称，或确定标签的函数。（如果数据提供程序采用 E4X XML 格式，则必须指定其中一个属性以显示标签。）如果数据提供程序是字符串数组，则 Flex 使用字符串值作为标签。
toggled	Boolean	 指定选择复选项目还是单选项目。如果未指定，则 Flex 处理该项目的方式将视同该值为 false 一样，并且该项目是不选中的。如果使用默认数据描述符，则数据提供程序必须使用切换 XML 属性或对象字段来指定此特征。
type	字符串	 指定菜单项的类型。有意义的值为 separator、check 或 radio。Flex 将其它所有值或无类型条目的节点视为常规菜单条目。如果使用默认数据描述符，则数据提供程序必须使用类型 XML 属性或对象字段来指定此特征。

原来标签名是根据labelField来从xml数据源中获取的。我们未指定，默认便是获取xml代码

 

你只需要加上一行代码就可解决这个问题，完善后的代码看起来像是这样：

 

var menu1:Menu = Menu.createMenu(null,menuXML2,false);
menu1.labelField = "@label";
menu1.show(100,200);

2.使用XMLList

基本用法同xml，但是不同的地方在于，xmlList不需要root标签。因此，类似的代码看起来像是这样：

 

<mx:XMLList id="menuXML">
	<menuitem label="menuI">
		<menuitem label="menuI-I" enabled="false"/>
		<menuitem label="menuI-II" enabled="true" type="normal"/>
	</menuitem>
	<menuitem label="menuII" toggled="false"/>
	<menuitem label="menuIII" toggled="true"/>
</mx:XMLList>

3.使用Array

使用Array是最简单的方法，然而看起来可能并不如xml格式的那么直观，并且书写起来容易出错(你得小心别漏了逗号和花括号以及分号！)

类似的代码声明看起来像是这样“

 

[Bindable]
public var menuArray:Array = [
	{label:"menuI",children:[
		{label:"menuI-I",enabled:false},
		{label:"menuI-II",enabled:true,type:"normal"}
		]
	},
	{label:"menuII",toggled:false},
	{label:"menuIII",toggled:true},
];

然后在as中“绑定”(应该叫调用更合适吧)时的代码和上面基本一致，不过有一点小的不同的地方就是，不需要显示声明menu1.labelField = "@label";flex会自动将label字符串的值作为menu的label

4.使用<mx:Model>

相对来说使用model要受限得多。

从格式上来说model和采用e4x的xml格式相同，一个可能的model声明如下：

 

<mx:Model id="menuXML3">
	<root>
		<menuitem label="menuI">
			<menuitem label="menuI-I" enabled="false"/>
			<menuitem label="menuI-II" enabled="true" type="normal"/>
		</menuitem>
		<menuitem label="menuII" toggled="false"/>
		<menuitem label="menuIII" toggled="true"/>
</mx:Model>

在as的代码调用(即menu的声明语句)也有区别

 

var menu1:Menu = Menu.createMenu(null,menuXML3.menuitem,false);
//menu1.labelField = "@label";//不需要这行语句！
menu1.show(100,200);

运行测试后也会出乎你的意料，只显示第一层次的菜单项而忽略子项！

也许这是Flex menu在处理model时的一个不同，另一方面这也使得model的使用更加灵活（你可以指定特定层次的数据项）

转载于：http://www.cnblogs.com/tech-romance/articles/1943410.html