1、第7章 菜单实现,在设计页面时,如果要引入类似桌面应用中常用的系统菜单,可以使用Flex中菜单类控件。菜单类控件共包括以下3种。 菜单控件(Menu Control),如图7.1。菜单控件只能使用ActionScript创建。在响应用户交互事件后弹出该控件。 菜单栏控件(MenuBar Control),如图7.2。菜单栏控件是基于菜单控件的。它在菜单的基础上将多个菜单组织成并列的菜单栏。 弹出式按钮菜单控件(PopUpButtonMenu Control),如图。弹出式按钮菜单控件类似于弹出式按钮控件。单击按钮右边的下拉箭头后,即弹出菜单,选择菜单项后,按钮显示被选项的标签和图标。,7.1
2、菜单类控件的属性,菜单类控件的属性可以定义菜单项的名称、类型等特征。菜单类控件中的三种控件均使用相同的属性对菜单项进行定义,同时也为菜单项提供不同的选中模式。下面对菜单类项属性和菜单项选中模式进行简要的介绍。,7.1.1 菜单项的属性,菜单类控件中每个控件都包含具体的菜单项的显示,例如菜单项的名称、事件响应类型等。Flex为菜单项提供了多个属性,以满足不同菜单类控件的需求。这些属性都需要在菜单类控件对应的数据中进行定义。控件在读取数据时,根据相应的属性标签进行区别。菜单项属性如表所示。,7.1.2 菜单项的选中模式,在选中菜单项或者进入该菜单项的子菜单时,Flex提供了4种模式。 normal
3、:默认为该模式。当选中菜单项时,触发change事件。当该菜单项有子菜单时,展开子菜单。 check:该模式在菜单项选中是在菜单项旁边显式一个对号标记,与多选框组件中选中标记相同。当选中该菜单项时该菜单项的toggled属性为true,在菜单名的旁边做对号标记, radio:该模式在菜单项选中是在菜单项旁边显式一个圆点标记,与单选框组件中选中标记相同。由多个该radio类型的菜单项组成radio组,每个菜单项称为改组的一个成员。每次同组中只有一个成员可被选中。当选中该菜单项时,该数据项的toggled属性设为true,同时该组的其他成员的toggled属性设为false, separator:
4、表现为分隔符。如果数据项定义为该类型,则数据项的名称等都不会显示,只显示分割符。该模式的数据项只作为数据项之间分割线。,7.2 菜单类控件的数据,在菜单类控件中,菜单总是呈结构化、层次化显示。与菜单控件对应的数据也需要时结构化层次化的,例如数组、XML等。数据的属性也需要在数据中进行定义。菜单类控件支持结构化的数据类型,如XML、Collections等。下面对菜单类控件中常用的数据类型进行介绍。,7.2.1 XML,使用XML作为菜单类控件数据时,可以在MXML中利用或者定义XML;也可在ActionScript中定义XML或者XMLList对象。XML的格式需遵从e4x。下面是利用定义的数
5、据。,7.2.2 Collections,Collections可以看作数据的集合,例如array和arrayCollection。下面是一个以array作为数据的例子,效果与上面XML一致。 public var menuData:Array = label: “菜单1“, children: label: “菜单1-1“, enabled: false,label: “菜单1-2“, type: “normal“ ,label: “菜单2“, type: “check“, toggled: true,label: “菜单3“, type: “check“, toggled: false,l
6、abel: “菜单4“, children: label: “菜单4-1“, type: “radio“, groupName: “A“,label: “菜单4-2“, type: “radio“, groupName: “A“, toggled: true, label: “菜单4-3“, type: “radio“, groupName: “A“ ;,7.2.3 其他对象,除上述2种方式外,还可以利用标签定义数据。该标签定义的数据与XML相类似。下面是以定义的数据。,7.3 菜单控件,菜单控件(Menu Control)类似于桌面应用界面中常用的菜单元素。图就是是一个菜单控件。在菜单控件中
7、,菜单通常在用户交互事件后弹出。所以MXML中没有相应的标签与菜单控件相对应,只能通过ActionScript定义。,7.3.1 mx.controls.menu类,Flex为菜单控件提供了相应的方法创建、消除组件。这些功能均依靠在mx.controls.menu类实现。在创建菜单控件的时候,首先利用createMenu()方法创建控件,然后使用show()方法弹出控件。在需要的时候,使用hide()方法消去控件。除使用hide()方法以程序方式消去控件外,在用户单击其他控件或者选定菜单项时,菜单会自动消去。 1createMenu() 该方法用来创建并返回菜单控件的实例,即创建菜单组件。该方
8、法接口如下所示。 public static function createMenu(parent:DisplayObjectContainer, mdp:Object, showRoot:Boolean = true):Menu 2show() 该方法用来在创建控件后,弹出菜单。该方法接口如下所示: public function show(xShow:Object = null, yShow:Object = null):void 3hide() 在控件弹出后,可以使用该方法消去控件。该方法无参数,无返回值。,7.3.2 菜单控件中的事件,单击菜单中的菜单项、菜单或者子菜单关闭等都会触发相
9、应的事件。菜单控件中的事件共有5个。事件对象类型均属于mx.events.MenuEvent。这5个事件分别如下所示。change:当用户鼠标停留的菜单项改变时触发该事件。itemClick:当用户鼠标单击菜单项时触发该事件。itemRollOut:当用户鼠标从菜单项滑出时发生的事件。itemRollOver:当用户鼠标从菜单项滑入时触发的事件。menuShow:当菜单或者子菜单展开时触发的事件。menuHide:当菜单或者子菜单消去时触发的事件。 在定义这些事件时,可以使用addEventListener为控件添加事件侦听及处理。例如为控件设置itemClick事件的代码如下。 myMenu
10、.addEventListener(MenuEvent.ITEM_CLICK, itemClickInfo); private function itemClickInfo(event:MenuEvent):void/在此定义itemClick触发的事件 ,7.3.3 创建菜单控件,由于菜单控件只能在ActionScript中创建及定义,且菜单的显示依靠事件的触发。所以在创建和显示菜单控件的时候,使用mx.controls.menu类中的方法。在创建菜单控件后,再根据需求定制相应的事件侦听。图为一个使用菜单控件的例子。,7.4 菜单栏控件,菜单栏控件(MenuBar Control)如图7.2
11、所示。通过单击菜单条上的顶层菜单项,弹出该菜单项的子菜单。 从外形上看,菜单栏控件是在菜单控件的基础上建立的。与菜单控件不同的是,菜单栏控件可以在MXML中创建。菜单栏控件将多个菜单控件并行展示,以满足更为复杂的菜单。,7.4.1 菜单栏控件标签,菜单条控件对应的MXML标签为。控件常用的属性如表所示。,7.4.2 创建菜单栏控件,创建菜单栏控件使用标签,并设置相应的属性。选择子菜单时,触发的事件与菜单控件相对应,可以参照菜单控件。 菜单栏控件与菜单控件不同之处在于,在菜单栏控件中,可以利用中相应的事件属性定义即可,例如在菜单空间中声明MenuEvent.ITEM_CLICK,为itemCli
12、ck事件编写事件侦听处理方法,在菜单栏控件中,只需为itemClick指定相应事件侦听器即可。 子菜单的显示方式以及菜单项的名称仍依靠数据中的属性进行定义。下面以图为例介绍如何创建菜单栏控件,与菜单空间中的例子类似。在单击最后一层菜单项时弹出对话框,显示当前选中菜单项的名称。,7.5 弹出式按钮菜单控件,弹出式按钮菜单控件(PopUpMenuButton Control)是以弹出式按钮控件为基础创建的。弹出式按钮控件菜单是按钮控件的扩展,它包括普通按钮和弹出式按钮两部分,如图所示。在单击按钮的下拉箭头时,显示下拉菜单。弹出式按钮菜单控件与其他菜单类控件不同,它只能显示单层菜单。,7.5.1 弹
13、出式按钮菜单控件的事件,弹出式按钮菜单控件的事件在普通菜单类控件itemClick事件基础上,添加了弹出式按钮控件的事件。下面列出了弹出式按钮菜单控件可触发的事件。 click:单击弹出式按钮菜单控件中的按钮部分时,触发该事件。 itemClick:在选中菜单中的菜单项,或者click事件发生时,触发该事件。 open:打开菜单时触发该事件。 close:关闭菜单时触发的事件 在中,可以利用这些事件相应的属性,为事件指定事件处理方法。,7.5.2 创建弹出式按钮菜单控件,创建弹出式按钮菜单控件的方式与创建菜单栏控件项类似,可以参照菜单栏控件的创建模式。介绍弹出式按钮菜单控件的创建过程。具体的代码如下所示。(详细内容请参照本书),