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

2.1 ToggleButtonBar 导航按钮组

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

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

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

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

1.<?xml version="1.0" encoding="utf-8"?>  
2.<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"  
3. creationComplete="initUI()">  
4.    <mx:Style source="style.css"/>  
5.    <mx:Script>  
6.        <![CDATA[              
7.            //导入点击事件对象  
8.            import mx.events.ItemClickEvent;          
9.            internal function initUI():void{  
10.                var data_arr:Array = new Array();  
11.                data_arr.push("Flex");  
12.                data_arr.push("Flash");  
13.                data_arr.push("Flash Media Server");  
14.                data_arr.push("Flex Data Server");  
15.                //添加数据源  
16.                btns.dataProvider = data_arr;  
17.            }  
18.            //处理itemClick点击事件  
19.            internal function btn_click_handler(evt:ItemClickEvent):void{  
20.                tip_txt.text = "点击的按钮："+evt.index+":"+evt.label;  
21.            }  
22.        ]]>  
23.    </mx:Script>  
24.    <mx:ToggleButtonBar toggleOnClick="true" id="btns" itemClick="btn_click_handler(event);"    
25.horizontalGap="5" x="22" y="82">  
26.    </mx:ToggleButtonBar>  
27.       
28.    <mx:Label id="tip_txt" text="还没有点击呢" x="22" y="126" width="266"/>  
29.       
30.</mx:Application>

2.2 TabBar 标签组

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

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

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

myViewstack.selectedIndex = evt.index;

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

1.<?xml version="1.0" encoding="utf-8"?>  
2.<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">  
3.       
4.    <mx:Style source="style.css"/>  
5.    <mx:Script>  
6.        <![CDATA[              
7.          
8.            import mx.events.ItemClickEvent;          
9.          
10.            internal function btn_click_handler(evt:ItemClickEvent):void{  
11.                myViewstack.selectedIndex = evt.index;  
12.            }  
13.        ]]>  
14.    </mx:Script>  
15.       
16.    <mx:Panel x="43" y="10" width="366" height="310" layout="absolute" horizontalGap="0" verticalGap="0" title="TabBar实例" borderStyle="solid">  
17.    <mx:TabBar id="btns" x="10" y="10" width="308" itemClick="btn_click_handler(event)">  
18.        <mx:dataProvider>  
19.            <mx:Array>  
20.                <mx:String>Flex</mx:String>  
21.                <mx:String>Flash</mx:String>  
22.                <mx:String>FMS</mx:String>  
23.                <mx:String>FDS</mx:String>  
24.            </mx:Array>  
25.        </mx:dataProvider>  
26.    </mx:TabBar>  
27.    <mx:ViewStack x="10" y="40" id="myViewstack" width="308" height="200">  
28.        <mx:Canvas id="child1" label="View 1" width="100%" height="100%">  
29.            <mx:List>  
30.                <mx:Array>  
31.                    <mx:Object label="请选择您感兴趣的技术："/>                     
32.                    <mx:Object label="Flash"/>  
33.                    <mx:Object label="Flex"/>  
34.                    <mx:Object label="Flash Media server"/>  
35.                    <mx:Object label="Breeze"/>  
36.                </mx:Array>  
37.            </mx:List>  
38.        </mx:Canvas>  
39.        <mx:Canvas id="child2" label="View 2" width="100%" height="100%">  
40.            <mx:TextInput text="请输入您的邮箱地址" />  
41.            <mx:Button x="168" y="1" label="订阅Flash Rss"/>  
42.        </mx:Canvas>  
43.        <mx:Canvas id="child3" label="View 3" width="100%" height="100%">  
44.            <mx:Label text="FMS 2.0.4发布了" />  
45.        </mx:Canvas>  
46.        <mx:Canvas id="child4" label="View 4" width="100%" height="100%">  
47.            <mx:Label text="Breeze" />  
48.        </mx:Canvas>  
49.    </mx:ViewStack>  
50.    </mx:Panel>  
51.       
52.</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 节点必须有一个根节点，不可忽略。

1.<?xml version="1.0" encoding="utf-8"?>  
2.<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="initApp()">  
3.       
4.    <mx:Style source="style.css"/>               
5.    <mx:Script>  
6.        <![CDATA[  
7.            import mx.controls.Alert;         
8.            import mx.events.MenuEvent;  
9.              
10.            private var mXML:XML =  
11.                <menu label = "系统菜单">  
12.                    <item label="文件">  
13.                        <node label="新建画板" data="new"/>  
14.                        <node label="清除画板" data="clear" enabled="false"/>  
15.                        <node type="separator" />  
16.                        <node label="退出系统" data="logout"/>  
17.                    </item>  
18.                    <item label="帮助">  
19.                        <node label="帮助" data="help"/>  
20.                        <node label="关于作者" data="about"/>  
21.                     </item>  
22.                </menu>;  
23.              
24.            internal function initApp():void{  
25.                //为MenuBar添加数据源  
26.                myMenu.dataProvider = mXML;  
27.                //监听Menu的点击实践  
28.                myMenu.addEventListener(MenuEvent.ITEM_CLICK,menuClickHandler);  
29.            }  
30.              
31.            internal function menuClickHandler(evt:MenuEvent):void{  
32.                Alert.show("选择菜单："+evt.item.@data,"提示信息");  
33.            }  
34.        ]]>  
35.    </mx:Script>  
36.    <mx:VBox width="100%" height="100%">  
37.        <mx:Canvas styleName="windowBar" width="100%">  
38.            <mx:MenuBar labelField="@label"  height="30" id="myMenu" width="100%"></mx:MenuBar>    
39.        </mx:Canvas>  
40.        <mx:Canvas width="100%" height="100%" id="paper">  
41.               
42.        </mx:Canvas>             
43.    </mx:VBox>  
44.       
45.</mx:Application>

2.4 PopUpButton 下拉弹出窗口控件

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

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

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

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

1.<?xml version="1.0" encoding="utf-8"?>  
2.<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="initApp()" layout="absolute">  
3.    <mx:Style>  
4.        Application{   
5.            fontSize:12;   
6.            backgroundGradientColors: #c0c0c0, #c0c0c0;   
7.        }   
8.    </mx:Style>  
9.    <mx:Script>  
10.        <![CDATA[  
11.            import mx.containers.Panel;       
12.            import mx.controls.Alert;     
13.            import mx.events.DropdownEvent;  
14. 
15.            private var panel:Panel;  
16. 
17.            private function initApp():void {  
18.                panel = new Panel();  //声明新的Panel  
19.                panel.title = "panel";  
20.                panel.width = 200;  
21.                panel.height = 200;  
22.                popBtn.popUp = panel;           //指定popUp目标对象         
23.                popBtn.addEventListener(DropdownEvent.CLOSE,closeHandler);  //            
24.                popBtn.open();      //将窗口弹出  
25.            }             
26. 
27.              
28.            private function closeHandler(evt:DropdownEvent):void{  
29.                Alert.show("关闭窗口");  
30.            }  
31.        ]]>  
32.    </mx:Script>  
33.    <mx:PopUpButton id="popBtn" label="弹出" width="135"  x="23" y="23"/>  
34.       
35.</mx:Application>

2.5 PopUpMenuButton

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

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

PopUpMenuButton 中内置了一个Menu 。

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

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

1.<?xml version="1.0" encoding="utf-8"?>  
2.<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="initApp()" layout="absolute">  
3.    <mx:Style>  
4.        Application{   
5.            fontSize:12;   
6.            backgroundGradientColors: #c0c0c0, #c0c0c0;   
7.        }   
8.    </mx:Style>  
9.    <mx:Script>  
10.        <![CDATA[      
11.            import mx.controls.Alert;     
12.            import mx.events.MenuEvent;  
13.              
14.            private var mXML:XMLList =  
15.                <>  
16.                    <node label="文件">  
17.                        <node label="新建画板" data="new"/>  
18.                        <node label="清除画板" data="clear" enabled="false"/>  
19.                        <node label="退出系统" data="logout"/>  
20.                    </node>  
21.                    <node label="工具"/>                          
22.                    <node label="帮助">  
23.                        <node label="帮助" data="help"/>  
24.                        <node label="关于作者" data="about"/>  
25.                     </node>  
26.                </>;  
27.            private function initApp():void {  
28.                popBtn.dataProvider = mXML; //弹出菜单的数据源  
29.                popBtn.addEventListener(MenuEvent.ITEM_CLICK,clickHandler);   
30.            }             
31.            private function clickHandler(evt:MenuEvent):void{  
32.                Alert.show("选择菜单："+evt.label+":菜单序号："+evt.index);  
33.            }  
34.        ]]>  
35.    </mx:Script>  
36.    <mx:PopUpMenuButton id="popBtn" labelField="@label" width="135"  x="23" y="23"/>  
37.       
38.</mx:Application>