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>