Flex PopUpMenuButton控件

控件

PopUpMenuButton 控件可创建一个 PopUpButton 控件，带有一个主子按钮和一个辅助子按钮。单击辅助（右）子按钮会下拉一个菜单。

 

UIComponent->Button->PopUpButton　弹出一个菜单
UIComponent->Button->PopUpButton->PopUpMenuButton　数据源自动转成一个菜单

此控件目前只存在于mx命名空间中

 

与 Menu 和 MenuBar 控件不同，PopUpMenuButton 控件仅支持单级菜单。这就意味着此菜单不能包含子菜单

参考文献：[1].Adobe官方文档

 

控件常用属性和方法

 

名称	分类	说明
dataProvider	属性	popUpMenu 的数据源。（示例3.1）
iconField:String	属性	dataProvider Array 中的字段名称，该字段中包含要为每个菜单项显示的图标。（示例3.2）
labelField:String	属性	dataProvider Array 中的字段名称，该字段包含要为每个菜单项显示的文本。labelFunction 属性（如果已设置）将覆盖此属性。如果数据提供程序是一个字符串 Array，则 Flex 会将每个 String 值用作标签。（示例3.1）
labelFunction：function	属性	一个用于确定要为每个菜单项显示文本的函数。如果省略此属性，则 Flex 将使用由 labelField 属性确定的字段内容或属性。如果指定了此属性，则 Flex 将忽略任何 labelField 属性值。（示例3.3）
iconFunction:function	属性	一个用于确定要为每个菜单项显示图标的函数。如果省略此属性，则 Flex 将使用由 iconField 属性确定的字段内容或属性。如果指定了此属性，则 Flex 将忽略任何 iconField 属性值。 默认情况下，该菜单不会尝试将图标与行中的文本一起显示。但是，可以通过指定图标函数来为图形指定一个类，将其作为图标创建并显示在行中。 iconFunction 仅采用数据提供程序中的某个项目作为唯一参数，并返回一个类，默认为Null（待研究）
ShowRoot	属性	指定是显示数据提供程序的一个还是多个顶级节点。如果此属性设置为 false，则该控件将只显示第一个顶级节点的子级节点。其他任何顶级节点都将被忽略。通常，对于顶级节点是文档对象的 E4X 格式的 XML 数据提供程序，需要将此属性设置为 false。 默认值为 true。（多用于使用xml做数据源时）
itemClick	事件	当用户从弹出菜单中选择项目时分派。（示例3.5）

常见属性与事件的用法

属性的用法

功能：当用户点击PopUpMenuButton控件上的子按钮时，下拉菜单显示LableField属性的值

数据源代码：

import mx.collections.ArrayCollection;

                [Bindable] 

                private var myDP:ArrayCollection = new ArrayCollection(

                [ {product:"Flex", price:100},

                    {product:"Air", price:200},

                    {product:"Catalyst", price:300},

                    {product:"FlashBuilder", price:400} ]);

               

主程序代码：

x="187" y="128" label="dataProvider示例" id="pm" dataProvider="{myDP}" labelField="product"/>

代码详见dataProvider.mxml

 

iconField属性的用法

说明：iconField是dataProvider Array 中的字段名称，该字段中包含要为每个菜单项显示的图标。

主程序代码：

x="240" y="151" dataProvider="{myDP}"  iconField="icon" labelField="book" />

在使用iconField属性时要注意图片数据的绑定方法

代码：

            import mx.collections.ArrayCollection;

                [Bindable]

                [Embed(source="res/16.png")]

                public var c1:Class;

[Bindable]

[Embed(source="res/17.png")]

 public var c2:Class;

[Bindable]

                [Embed(source="res/18.png")]

                public var c3:Class;

                [Bindable]

                [Embed(source="res/19.png")]

                public var c4:Class;

                [Bindable]

                private var myDP:ArrayCollection = new ArrayCollection(

            [ {book:"A",icon:"c1"},

            {book:"B",icon:"c2"},

            {book:"C",icon:"c3"},

            {book:"D",icon:"c4"} ]);

 用[Embed]元数据（Metadata）标签嵌入一个图片到一个变量中。这样做的好处是可以多次引用已经嵌入的图片。

代码详见 iconField.mxml

 

属性的用法

说明：一个用于确定要为每个菜单项显示文本的函数。如果省略此属性，则 Flex 将使用由 labelField 属性确定的字段内容或属性。如果指定了此属性，则 Flex 将忽略任何 labelField 属性值。 如果指定此属性，则标签函数必须查找一个或多个合适的字段并返回可显示的字符串。labelFunction 属性非常适用于处理格式设置和本地化。标签函数必须使用 dataProvider 中的项目作为唯一的自变量，并返回一个字符串，如以下示例所示：

                labelFunction(item:Object):String

 

代码：      import mx.collections.ArrayCollection;

                [Bindable] 

            private var myDP:ArrayCollection = new ArrayCollection(

                [ {product:"Flex", price:100},

                    {product:"Air", price:200},

                    {product:"Catalyst", price:300},

                    {product:"FlashBuilder", price:400} ]);

            private function dp(data:Object):String

            {

                return "数组长度是"+myDP.length.toString();

            }  

代码详见 labelFunction.mxml

 

事件

功能：使用itemClick事件在弹出窗口中显示用户选择的数据项

As3.0代码：      

import mx.collections.ArrayCollection;

            import mx.controls.Alert;

            import mx.events.MenuEvent;

            public function itemClickHandler(evt:MenuEvent):void {

                Alert.show("书名是: " + evt.label);

            }

            [Bindable]

            private var myDP:ArrayCollection = new ArrayCollection(

                [ {product:"Flex", price:100},

                    {product:"Air", price:200},

                    {product:"Catalyst", price:300},

                    {product:"FlashBuilder", price:400} ]);

Mxmxl代码：

id="p2" dataProvider="{myDP}" labelField="product"

                                   itemClick="itemClickHandler(event);"/>

文件:	PopupMenuButton.zip
大小:	3050KB
下载:	下载

代码详见 itemClick.mxml