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>