Chapter 11: Using Menu-Based Controls Defining menu structure and data

 

所有的基于菜单控件的data providers 都有如下特点来指定菜单的结构和内容：

 •data providers经常是有层次的，但是你也可以只有一层菜单。

 • 每一个菜单项中都包括了来决定这个菜单项的外观和行为的field，基于菜单的控件支持这些field：定义label text，icon，菜单项的type，和菜单项的status。

About menu data providers

 基于菜单控件的dataProvider属性具体指定了一个对象，这个对象定义了菜单的结构和内容。如果一个菜单的内容是动态的，你可以通过修改它的data Provider 来改变这个菜单显示内容，菜单控件通常是从具有一定层次的data provider中获得它需要的数据，比如从嵌套的对象数组中，或者一个XML对象。如果这个菜单展示了一个动态变化的数据，你使用实现了ICollectionView接口的对象，比如ArrayCollection 和 XMLListCollection.

菜单控件使用data descriptor来解析和使用data provider中的内容，默认情况下，菜单控件使用DefaultDataDescriptor类作为它的data descriptor，但是你可以创建一个你自己的类然后把它指定给Menu控件的dataDescriptor属性。

DefaultDataDescriptor类支持如下的数据类型：

XML A string that contains valid XML text, or any of the following objects containing valid E4X format XML data:
an <mx:XML> or <mx:XMLList> compile-time tag, or an XML or XMLList object.
Other objects An array of items, or an object that contains an array of items, where a node’s children are contained
in an item named children. You can also use the <mx:Model> compile-time tag to create nested objects that
support data binding, but you must follow the structure defined in “Using the <mx:Model> tag with Tree and
menu-based controls” on page 171.
Collections An object that implements the ICollectionView interface (such as the ArrayCollection or XMLList-
Collection classes) and whose data source conforms to the structure specified in either of the previous bullets. The
DefaultDataDescriptor class includes code to handle collections efficiently. Always use a collection as the data
provider if the data in the menu changes dynamically; otherwise, the Menu displays obsolete data.
For more information on hierarchical objects and data descriptors, including a detailed description of the formats
supported by the DefaultDataDescriptor, see “Data descriptors and hierarchical data structure” on page 168.
As with all data-driven controls, if the data provider contents can change dynamically, and you want the Menu to
update with the changes, ensure that the data source is a collection, such as an ArrayCollection or XMLListCol-
lection object. To modify the menu, change the underlying collection, and the menu will update its appearance
accordingly.
Node (menu item) tags in the XML data can have any name. Many examples in this topic use tags such as <node>
for all menu items, or <menuItem> for top-level items and <subMenuItem> for submenu items, but it might be
more realistic to use tag names that identify the data, such as <person>, <address>, and so on. The menu-
handling code reads through the XML and builds the display hierarchy based on the nested relationship of the
nodes. For more information, see “Specifying and using menu entry information” on page 349.
Most menus have multiple items at the top level, not a single root item. XML objects, such as the XML object
created by the <mx:XML> tag, must have a single root node. To display a menu that uses a data provider that has a
root that you do not want to display, set the Menu, PopUpMenuButton, or MenuBar showRoot property to false.

 

 指定和使用menu entry信息

       菜单控件的data provider中的信息决定了每一个menu entry 是怎样被显示和被使用的，为了能够访问或者改变菜单的内容，你修改data provider中的内容，基于菜单控件的类使用IMenuDataDescriptor中的接口来访问和控制那个定义了菜单行为和内容的data provider中的信息，Flex提供了DefaultDataDescriptor类实现了该接口，基于菜单的控件将会使用DefaultDataDescriptor类如果你没有设置dataDescriptor属性。

 

Menu entry types

每一个data provider的条目都能指定关于这个menu item的item 类型和特定的类型信息。基于菜单控件的类支持如下的item类型（指定type域的值如type:normal）：
normal (the default) Selecting an item with the normal type triggers a change event, or, if the item has children,
opens a submenu.
check Selecting an item with the check type toggles the menu item’s toggled property between true and false
values. When the menu item is in the true state, it displays a check mark in the menu next to the item’s label.
radio Items with the radio type operate in groups, much like RadioButton controls; you can select only one
radio menu item in each group at a time. The example in this section defines three submenu items as radio buttons
within the group “one”.
When a radio button is selected, the radio item’s toggled property is set to true, and the toggled properties of
all other radio items in the group are set to false. The Menu control displays a solid circle next to the radio button
that is currently selected. The selection property of the radio group is set to the label of the selected menu item.
separator(分割线)  Items with the separator type provide a simple horizontal line that divides the items in a menu into different visual groups.

 

菜单的属性

菜单项可以指定一些能够决定how the item is displayed and behaves的属性，下面的表格列出了你可以指定的属性，比如它们的data types，它们的purpose，还有，如果菜单使用DefaultDataDescriptor类来解析data provider，data provider该怎样表示它们。

 

 

Attribute	Type	Description
enabled	Boolean	Specifies whether the user can select the menu item (true), or not (false). If not specified, Flex treats the item as if the value were true. If you use the default data descriptor, data providers must use an enabled XML attribute or object field to specify this characteristic.
groupName	String	(Required, and meaningful, for radio type only) The identifier that associates radio button items in a radio group. If you use the default data descriptor, data providers must use a groupName XML attribute or object field to specify this characteristic.
icon	Class	Specifies the class identifier of an image asset. This item is not used for the check, radio, or separator types. You can use the checkIcon and radioIcon styles to specify the icons used for radio and check box items that are selected. The menu’s iconField or iconFunction property determines the name of the field in the data that specifies the icon, or a function for determining the icons.
label	String	Specifies the text that appears in the control. This item is used for all menu item types except separator. The menu’s labelField or labelFunction property determines the name of the field in the data that specifies the label, or a function for determining the labels. (If the data provider is in E4X XML format, you must specify one of these properties to display a label.) If the data provider is an array of strings, Flex uses the string value as the label.
toggled	Boolean	Specifies whether a check or radio item is selected. If not specified, Flex treats the item as if the value were false and the item is not selected. If you use the default data descriptor, data providers must use a toggled XML attribute or object field to specify this characteristic.
type	String	Specifies the type of menu item. Meaningful values are separator, check, or radio. Flex treats all othevalues, or nodes with no type entry, as normal menu entries. If you use the default data descriptor, data providers must use a type XML attribute or object field to specify this characteristic.

Menu-based controls ignore all other object fields or XML attributes, so you can use them for application-specific
data.

 

举例：使用数组作为menu的 data provider 

<?xml version="1.0"?> <!-- menus/ArrayDataProvider.mxml --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> <mx:Script> <!--[CDATA[ import mx.controls.Menu; // Method to create an Array-based menu. private function createAndShow():void { // The third parameter sets the showRoot property to false. // You must set this property in the createMenu method, // not later. var myMenu:Menu = Menu.createMenu(null, menuData, true); myMenu.show(10, 10); } // The Array data provider [Bindable] public var menuData:Array = [ {label: "MenuItem A", children: [ {label: "SubMenuItem A-1", enabled: false}, {label: "SubMenuItem A-2", type: "normal"} ]}, {label: "MenuItem B", type: "check", toggled: true}, {label: "MenuItem C", type: "check", toggled: false}, {type: "separator"}, {label: "MenuItem D", children: [ {label: "SubMenuItem D-1", type: "radio", groupName: "g1"}, {label: "SubMenuItem D-2", type: "radio", groupName: "g1", toggled: true}, {label: "SubMenuItem D-3", type: "radio", groupName: "g1"} ]} ]; ]]--> </mx:Script> <!-- Button control to create and open the menu. --> <mx:Button x="300" y="10" label="Open Menu" click="createAndShow();"/> </mx:Application>  

 效果如下：

 

举例：用XML作为菜单数据data provider并带有icons

下面的例子用XML作为menu控件的数据提供器，并且为菜单中项指定了自定义icon：

 <?xml version="1.0"?> <!-- SimpleMenuControlIcon.mxml --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" > <mx:Script> <!--[CDATA[ // Import the Menu control. import mx.controls.Menu; [Bindable] [Embed(source="assets/topIcon.jpg")] public var myTopIcon:Class; [Bindable] [Embed(source="assets/radioIcon.jpg")] public var myRadioIcon:Class; [Bindable] [Embed(source="assets/checkIcon.gif")] public var myCheckIcon:Class; // Create and display the Menu control. private function createAndShow():void { var myMenu:Menu = Menu.createMenu(null, myMenuData, false); myMenu.labelField="@label"; // Specify the check icon. myMenu.setStyle('checkIcon', myCheckIcon); // Specify the radio button icon. myMenu.setStyle('radioIcon', myRadioIcon); // Specify the icon for the topmenu items. myMenu.iconField="@icon"; myMenu.show(10, 10); } ]]--> </mx:Script> <!-- Define the menu data. --> <mx:XML format="e4x" id="myMenuData"> <root> <menuitem label="MenuItem A" icon="myTopIcon"> <menuitem label="SubMenuItem A-1" enabled="false"/> <menuitem label="SubMenuItem A-2"/> </menuitem> <menuitem label="MenuItem B" type="check" toggled="true"/> <menuitem label="MenuItem C" type="check" toggled="false" icon="myTopIcon"/> <menuitem type="separator"/> <menuitem label="MenuItem D" icon="myTopIcon"> <menuitem label="SubMenuItem D-1" type="radio" groupName="one"/> <menuitem label="SubMenuItem D-2" type="radio" groupName="one" toggled="true"/> <menuitem label="SubMenuItem D-3" type="radio" groupName="one"/> </menuitem> </root> </mx:XML> <mx:VBox> <!-- Define a Button control to open the menu --> <mx:Button id="myButton" label="Open Menu" click="createAndShow();"/> </mx:VBox> </mx:Application>