Flex之旅：第一部分：flex必备基础知识积累(8)---动态填充和修改菜单

于 2015-03-18 16:08:24 发布
阅读量906 收藏 2
点赞数
分类专栏： flex Flex之旅
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/miqi770/article/details/44345287
版权

首先来看看Flex菜单的静态加载


直接上代码：


<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx"
			   minWidth="955" minHeight="600" creationComplete="initApp(event)">
	<fx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			import mx.collections.XMLListCollection;
			import mx.events.FlexEvent;
			[Bindable]
			private var menu_dp:XMLListCollection;
			
			[Bindable] 
			[Embed(source="assets/icon_close.png")] 
			public var myIcon:Class; 
			
			private function initApp(evt:FlexEvent):void {
				menu_dp = new XMLListCollection(menuXML);
			}
			
		]]>
	</fx:Script>
	<fx:Declarations>
		<fx:XMLList id="menuXML" >
			<menuitem label="File">
				<menuitem label="New"/>
				<menuitem label="Open"/>
				<menuitem label="Close" enabled="false" />
			</menuitem>
			<menuitem label="Edit"  />
			<menuitem label="Source"/>
			<menuitem label="View">
				<menuitem label="50%"
						  type="radio" groupName="one" icon="myIcon" />
				<menuitem label="100%"
						  type="radio" groupName="one"
						  toggled="true"
						  />
				<menuitem label="150%"
						  type="radio" groupName="one"
						  />
				
				<menuitem type="separator"  />
				<menuitem label="100"
						  type="check" />
				<menuitem label="200"
						  type="check" />
				<menuitem label="500"
						  type="check" />
			</menuitem>
		</fx:XMLList>
	</fx:Declarations>
	<s:BorderContainer>
		<s:layout>
			<s:VerticalLayout>
			</s:VerticalLayout>
		</s:layout>
		
		<mx:MenuBar id="menuBar" dataProvider="{menu_dp}" iconField="@icon" labelField="@label">
		</mx:MenuBar>		
			
	</s:BorderContainer>
	
		
	
</s:Application>




运行截图：

         图1                                            图2


几点说明：

  • XMLList的标签名称其实是随便定义的，都可以识别，但是尽量不要使用关键字
  • XMLList的标签属性是有一些实现定义好的（MenuBar在读取的时候，会默认去识别这些属性），这些默认属性会有特殊的含义，如下：
    • enabled: 是否可以被选中，见“Close”
    • groupName: 菜单项是单选框类型的按钮时，指定单选框组的名字用来给菜单项分组，见groupName="one" 
    • icon:指定一个图像素材的类标识，见icon="myIcon"
    • label:指定菜单项的显示文本。
    • toggled:当菜单项是复选框或者单选框类型时，指定是否被选中，见图2
    • type:指定如下菜单类型，例如：check，radio，separator。见图2
  • 默认的，MenuBar只是会读取上面罗列出来的字段（比如，label而不是@label），因为上面的例子邦定的是XMLListCollection，所以就必须要设置labelField，使用@运算符去引用属性，
  • 同理iconField
  • 如果MenuBar，邦定的数据源是ArrayCollection就不用设置labelField iconField了。



动态填充和修改菜单


菜单初始化好了之后，可定有需要修改的情况（新增，修改，删除），

请看如下代码：


<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx"
			   minWidth="955" minHeight="600" creationComplete="initApp(event)">
	<fx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			import mx.collections.XMLListCollection;
			import mx.events.FlexEvent;
			[Bindable]
			private var menu_dp:XMLListCollection;
			
			[Bindable] 
			[Embed(source="assets/icon_close.png")] 
			public var myIcon:Class; 
			
			private function initApp(evt:FlexEvent):void {
				menu_dp = new XMLListCollection(menuXML);
			}
			
			protected function addButton_clickHandler(event:MouseEvent):void
			{
				
				var newOne:XMLListCollection = new XMLListCollection(itemXML);
				
				//第一种： 添加一个节点
				var xml:XML = newOne.getItemAt(1) as XML;
				trace(xml);
				menu_dp.addItem(xml);
				
				//第二种： 添加整个XMLListCollection
				//menu_dp.addAll(newOne);
			}
			
			protected function updateButton_clickHandler(event:MouseEvent):void
			{
				var xml:XML = menu_dp.getItemAt(0) as XML;
				trace(xml);

				var childXMLList:XMLList = xml.children() as XMLList;
				if(childXMLList!=null&&childXMLList.length()>0){
					// XMLList转成XMLListCollection，方便操作
					var xmlListCollection:XMLListCollection = new XMLListCollection(childXMLList);
					var firstItem:XML = xmlListCollection.getItemAt(0) as XML;
					trace(firstItem.toXMLString());
					
					firstItem.@label += "1";
					menu_dp.itemUpdated(firstItem);
				}
			}
			
			protected function deleteButton_clickHandler(event:MouseEvent):void
			{
                                // 删除最后一组节点
				menu_dp.removeItemAt(menu_dp.length-1);
			}
			
		]]>
	</fx:Script>
	<fx:Declarations>
		<fx:XMLList id="menuXML" >
			<menuitem label="File">
				<menuitem label="New"/>
				<menuitem label="Open"/>
				<menuitem label="Close" enabled="false" />
			</menuitem>
			<menuitem label="Edit"  />
			<menuitem label="Source"/>
			<menuitem label="View">
				<menuitem label="50%"
						  type="radio" groupName="one" icon="myIcon" />
				<menuitem label="100%"
						  type="radio" groupName="one"
						  toggled="true"
						  />
				<menuitem label="150%"
						  type="radio" groupName="one"
						  />
				
				<menuitem type="separator"  />
				<menuitem label="100"
						  type="check" />
				<menuitem label="200"
						  type="check" />
				<menuitem label="500"
						  type="check" />
			</menuitem>
		</fx:XMLList>
		<fx:XMLList id="itemXML">
			<menuitem label="newXMLNode1" >
				<menuitem label="new11"  />
				<menuitem label="new12"  />
				<menuitem label="new13"  />
			</menuitem>
			<menuitem label="newXMLNode2" >
				<menuitem label="new21"  />
				<menuitem label="new22"  />
				<menuitem label="new23"  />
			</menuitem>
		</fx:XMLList>
	</fx:Declarations>
	<s:BorderContainer>
		<s:layout>
			<s:VerticalLayout>
			</s:VerticalLayout>
		</s:layout>
		
		<mx:MenuBar id="menuBar" dataProvider="{menu_dp}" iconField="@icon" labelField="@label">
		</mx:MenuBar>		
		
		<s:Button id="addButton" label="add" click="addButton_clickHandler(event)">
		</s:Button>
		<s:Button id="updateButton" label="update" click="updateButton_clickHandler(event)">
		</s:Button>
		<s:Button id="deleteButton" label="delete" click="deleteButton_clickHandler(event)">
			
		</s:Button>
			
	</s:BorderContainer>
	
		
	
</s:Application>


几点说明：

  • MenuBar的dataProvider邦定的是XMLListCollection，
  • 为了像操作ArrayCollection一样方便，还是把要新添加的XMLList还是得转换成XMLListCollection，
  • 再添加到MenuBar的dataProvider所邦定的是XMLListCollection上。
  • 添加和删除节点，直接在XMLListCollection上操作即可，因为XMLListCollection邦定到了MenuBar上，添加和删除操作会马上反应到MenuBar上
  • 菜单的修改操作，需要特殊处理：
    • 定位到要修改的节点之后，首先修改节点里面的field(比如：firstItem.@label += "1";)
    • 但是修改了节点里面的field之后，并不会马上反应到MenuBar上，
    • 所以需要再加上这句话：menu_dp.itemUpdated(firstItem); 这样MenuBar上就会显示，更新的内容了~~~



看看截图吧：



茜茜770
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值