Flex学习笔记_06 使用组件处理数据和交互_02导航类组件

2. 导航类组件

 

2.1 ToggleButtonBar 导航按钮组

ToggleButtonBar 是ButtonBar 的子类，增强来导航功能，可以持续保持客户端状态。

同时在界面上对当前的选中状态做明确的标识。

 

toggleOnClick 属性指明是否可以通过单击取消选中的状态。true：当鼠标单击已经选中的按钮时，该按钮恢复到正常状态。false：则不会恢复。

 

itemClick="btn_click_handler(event);" 监听用户的单击动作。

 

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
 creationComplete="initUI()">
	<mx:Style source="style.css"/>
	<mx:Script>
		<![CDATA[			
			//导入点击事件对象
			import mx.events.ItemClickEvent; 		
			internal function initUI():void{
				var data_arr:Array = new Array();
				data_arr.push("Flex");
				data_arr.push("Flash");
				data_arr.push("Flash Media Server");
				data_arr.push("Flex Data Server");
				//添加数据源
				btns.dataProvider = data_arr;
			}
			//处理itemClick点击事件
			internal function btn_click_handler(evt:ItemClickEvent):void{
				tip_txt.text = "点击的按钮："+evt.index+":"+evt.label;
			}
		]]>
	</mx:Script>
	<mx:ToggleButtonBar toggleOnClick="true" id="btns" itemClick="btn_click_handler(event);" 
horizontalGap="5" x="22" y="82">
    </mx:ToggleButtonBar>
    
    <mx:Label id="tip_txt" text="还没有点击呢" x="22" y="126" width="266"/>
	
</mx:Application>

 

2.2  TabBar 标签组

TabBar 在ToggleButtonBar 的基础上继续扩展，改变了对选中状态的表现形式，将选中项以标签的形式突出显示，这点跟TabNavigator 相同，不过它不包括其他子级容器。

可和任何组件结合使用，而不仅仅限于容器。

TabBar 本身只包括了一组标签，没有其他内容。

myViewstack.selectedIndex = evt.index;

将TabBar 的按钮索引和ViewStack 的被选中元素的位置关联起来。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	
	<mx:Style source="style.css"/>
	<mx:Script>
		<![CDATA[			
		
			import mx.events.ItemClickEvent; 		
		
			internal function btn_click_handler(evt:ItemClickEvent):void{
				myViewstack.selectedIndex = evt.index;
			}
		]]>
	</mx:Script>
	
	<mx:Panel x="43" y="10" width="366" height="310" layout="absolute" horizontalGap="0" verticalGap="0" title="TabBar实例" borderStyle="solid">
	<mx:TabBar id="btns" x="10" y="10" width="308" itemClick="btn_click_handler(event)">
		<mx:dataProvider>
			<mx:Array>
				<mx:String>Flex</mx:String>
				<mx:String>Flash</mx:String>
				<mx:String>FMS</mx:String>
				<mx:String>FDS</mx:String>
			</mx:Array>
		</mx:dataProvider>
	</mx:TabBar>
	<mx:ViewStack x="10" y="40" id="myViewstack" width="308" height="200">
		<mx:Canvas id="child1" label="View 1" width="100%" height="100%">
			<mx:List>
				<mx:Array>
					<mx:Object label="请选择您感兴趣的技术："/>					
					<mx:Object label="Flash"/>
					<mx:Object label="Flex"/>
					<mx:Object label="Flash Media server"/>
					<mx:Object label="Breeze"/>
				</mx:Array>
			</mx:List>
		</mx:Canvas>
		<mx:Canvas id="child2" label="View 2" width="100%" height="100%">
			<mx:TextInput text="请输入您的邮箱地址" />
			<mx:Button x="168" y="1" label="订阅Flash Rss"/>
		</mx:Canvas>
		<mx:Canvas id="child3" label="View 3" width="100%" height="100%">
			<mx:Label text="FMS 2.0.4发布了" />
		</mx:Canvas>
		<mx:Canvas id="child4" label="View 4" width="100%" height="100%">
			<mx:Label text="Breeze" />
		</mx:Canvas>
	</mx:ViewStack>
	</mx:Panel>
	
</mx:Application>

 

5.3 使用菜单导航 -- 创建一个简单的多久菜单

使用MenuBar 菜单条作全局导航。

在使用AS 定义XML 数据时，可以使用换行符保持XML数据的格式，只要XML 的标签正确，编译器自动会识别。

在node 元素中的 enabled 属性 代表是否可用，默认true为可用，false为不可用菜单项变成灰色。

type 属性 为 separator 代表一个分割线。

 

XML 和 XMLList 都是用来定义XML 数据，不同的是，XMLList 是多个XML 数据的集合。

在这个例子中，mXML是XMLList类型，根节点被忽略，item 节点被解析为独立的 XML 数据。 item 节点必须有一个根节点，不可忽略。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="initApp()">
	
	<mx:Style source="style.css"/>			
	<mx:Script>
		<![CDATA[
			import mx.controls.Alert;		
			import mx.events.MenuEvent;
			
			private var mXML:XML =
                <menu label = "系统菜单">
                	<item label="文件">
                        <node label="新建画板" data="new"/>
                        <node label="清除画板" data="clear" enabled="false"/>
                        <node type="separator" />
                        <node label="退出系统" data="logout"/>
                    </item>
                    <item label="帮助">
                     	<node label="帮助" data="help"/>
                     	<node label="关于作者" data="about"/>
                     </item>
                </menu>;
			
			internal function initApp():void{
				//为MenuBar添加数据源
				myMenu.dataProvider = mXML;
				//监听Menu的点击实践
				myMenu.addEventListener(MenuEvent.ITEM_CLICK,menuClickHandler);
			}
			
			internal function menuClickHandler(evt:MenuEvent):void{
				Alert.show("选择菜单："+evt.item.@data,"提示信息");
			}
		]]>
	</mx:Script>
	<mx:VBox width="100%" height="100%">
		<mx:Canvas styleName="windowBar" width="100%">
			<mx:MenuBar labelField="@label"  height="30" id="myMenu" width="100%"></mx:MenuBar>	
		</mx:Canvas>
		<mx:Canvas width="100%" height="100%" id="paper">
			
		</mx:Canvas>			
	</mx:VBox>
	
</mx:Application>

 

2.4 PopUpButton 下拉弹出窗口控件

PopUpButton 是一个特殊的Button， 本身由两个Button组成：主按钮和子按钮。点击子按钮可以将任何组件作为窗口弹出，置于最上层。这个弹出动作由 PopUpMenuButton 完成。

PopUpButton 的open 事件和 close 事件：弹出和弹出窗口关闭时触发。

popUp 属性：将要弹出的对象。

DropdownEvent.CLOSE 和 DropdownEvent.OPEN 事件专门针对弹出窗口。点击主按钮，触发的事件和Button 是一样的，比如click。

 

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="initApp()" layout="absolute">
	<mx:Style>
		Application{
			fontSize:12;
			backgroundGradientColors: #c0c0c0, #c0c0c0;
		}
	</mx:Style>
	<mx:Script>
		<![CDATA[
			import mx.containers.Panel;		
			import mx.controls.Alert;	
			import mx.events.DropdownEvent;

			private var panel:Panel;

			private function initApp():void {
				panel = new Panel();  //声明新的Panel
				panel.title = "panel";
				panel.width = 200;
				panel.height = 200;
				popBtn.popUp = panel;			//指定popUp目标对象		
				popBtn.addEventListener(DropdownEvent.CLOSE,closeHandler);	//			
				popBtn.open();		//将窗口弹出
			}			

			
			private function closeHandler(evt:DropdownEvent):void{
				Alert.show("关闭窗口");
			}
		]]>
	</mx:Script>
    <mx:PopUpButton id="popBtn" label="弹出" width="135"  x="23" y="23"/>
	
</mx:Application>

 

2.5 PopUpMenuButton

继承自PopUpButton，是 PopUpButton的一个特殊实例。只能把Menu 当作弹出窗口，且Menu 只能有1给层级。

Menu 用来创建菜单，不过和 Menu相比，它少了菜单条。且没有对应的MXML标签，只能由代码创建。

PopUpMenuButton 中内置了一个Menu 。

定义XML 数据，将它传给 PopUpMenuButton 的 dataProvider ，作为内置的Menu 的数据源。

MenuEvent.ITEM_CLICK 事件：当菜单项被选中时，事件被触发，同时菜单关闭。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="initApp()" layout="absolute">
	<mx:Style>
		Application{
			fontSize:12;
			backgroundGradientColors: #c0c0c0, #c0c0c0;
		}
	</mx:Style>
	<mx:Script>
		<![CDATA[	
			import mx.controls.Alert;	
			import mx.events.MenuEvent;
			
			private var mXML:XMLList =
                <>
                	<node label="文件">
                        <node label="新建画板" data="new"/>
                        <node label="清除画板" data="clear" enabled="false"/>
                        <node label="退出系统" data="logout"/>
                    </node>
                    <node label="工具"/>                     	
                    <node label="帮助">
                     	<node label="帮助" data="help"/>
                     	<node label="关于作者" data="about"/>
                     </node>
                </>;
			private function initApp():void {
				popBtn.dataProvider = mXML; //弹出菜单的数据源
				popBtn.addEventListener(MenuEvent.ITEM_CLICK,clickHandler);	
			}			
			private function clickHandler(evt:MenuEvent):void{
				Alert.show("选择菜单："+evt.label+":菜单序号："+evt.index);
			}
		]]>
	</mx:Script>
    <mx:PopUpMenuButton id="popBtn" labelField="@label" width="135"  x="23" y="23"/>
	
</mx:Application>