- 浏览: 248191 次
- 性别:
- 来自: 厦门
文章分类
最新评论
-
topbox163:
图片显示不了
Flex 学习曲线图 -
彭利贤:
你好,想请教您一些关于flash的问题,您可以加我qq吗 59 ...
全屏flash的尺寸分析 -
jingj6:
是开源的吗?
小日本做的非常强大的一款AS3 3D引擎 -
hugh52066:
LZ牛B。
Flex 学习曲线图 -
sweed0:
a dream~~
一个让人瞠目结舌的传奇电脑高手!
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>
发表评论
-
如何使用Cairngorm3的导航库(Spring AS)
2011-08-29 17:39 2855一、概述 二、LIB库包配置 下载需要的LIB库 ... -
Flex学习笔记_06 使用行为对象和动画效果_ 放缩\调整大小效果
2008-09-28 16:47 37656.3.2 放缩效果和调整大 ... -
Flex学习笔记_06 使用行为对象和动画效果_模糊、发光效果
2008-09-27 22:33 31316.3.1 模糊效果和发光效 ... -
Flex学习笔记_06 使用行为对象和动画效果_认识行为对象、行为和组件
2008-08-17 01:30 21796.1 认识行为对象 6.1.1 什么是行为对象 行 ... -
Flex学习笔记_09 数据绑定_运用实例
2008-07-28 23:41 32159.3.1 实现界面的多语言切换 <?xml vers ... -
Flex学习笔记_09 数据绑定_晋级篇
2008-07-28 22:27 28329.2.1 函数和类级别的绑 ... -
Flex学习笔记_09 数据绑定_概念、使用
2008-07-21 23:32 20429.1 认识数据绑定 9.1.1 数据绑定的概念 ... -
Flex学习笔记_08 Flex的事件机制_高级应用
2008-07-16 23:11 31728.3 事件机制的高级应用 8.3.1 事件的优先级别和 ... -
Flex学习笔记_08 Flex的事件机制_事件工作流程
2008-07-15 09:05 26878.2 事件机制的工作流程 8.2.1 关于事件流 ... -
Flex学习笔记_08 Flex的事件机制_事件架构
2008-07-14 08:54 24558.1 一切从事件开始 8.1.1 关于事件 事件有 ... -
Flex学习笔记_07 ActionScript 3.0 编程基础_数据类型及其运算、程序流程
2008-07-13 19:21 46097.3 数据类型和数据运算 7.3.1 关于数据类型 ... -
Flex学习笔记_07 ActionScript 3.0 编程基础
2008-07-09 23:15 28527.1 了解 ActionScript 3.0 7.1 ... -
Flex学习笔记_06 使用组件处理数据和交互_03控件的实例应用
2008-07-06 14:26 25533. 控件的实例应用 3.1 制作一个简单的涂鸦板 ... -
Flex学习笔记_06 使用组件处理数据和交互_01常用组件(下)
2008-06-30 10:37 4576Flex学习笔记_06 使用组 ... -
Flex学习笔记_06 使用组件处理数据和交互_01常用组件(中)
2008-06-29 22:50 3934Flex学习笔记_06 使用组件处理数据和交互_01常用组件( ... -
Flex学习笔记_06 使用组件处理数据和交互_01常用组件(上)
2008-06-26 23:11 4490Flex学习笔记_06 使用组件处理数据和交互_01常用组件( ... -
Flex学习笔记_05 使用容器控制界面布局_03动态布局、导航容器、表单布局
2008-06-25 08:40 6680本文的相关文章: Flex学习笔记_05 使用容器控制界面布局 ... -
Flex学习笔记_05 使用容器控制界面布局_02窗口布局
2008-06-24 09:07 5070本文的相关文章: Flex学习笔记_05 使用容器控制界面布局 ... -
Flex学习笔记_05 使用容器控制界面布局_01管理程序的布局
2008-06-23 23:52 5609本文的相关文章: Flex学习笔记_05 使用容器控制界面布局 ... -
Flex学习笔记_04 MXML语言简介
2008-06-17 22:52 54211. MXML语法 MXML语言是专门用于Flex程序中, ...
相关推荐
内容包括:F1ex简介、Flex的安装和开发环境的建立、MXML语法简介、使用容器控制界面布局、使用组件处理数据和交互、使用行为对象和动画效果、ActionScript3.0编程知识、Flex的事件机制、数据绑定、组件的使用、F1ex...
Flex学习笔记_09 数据绑定_概念、使用 - Java&Flex - JavaEye技术网站 希望对爱好有帮助!!
flex数据交互_方式
Flex学习笔记Flex学习笔记Flex学习笔记Flex学习笔记Flex学习笔记
1.1类和对象 Class and Object 1 1.2包与命名空间 Package and NameSpace 1 1.3构造方法Constructor 2 1.4变量和值 Variable 2 1.5赋值 2 1.6 AS数据类型 3 1.7数据类型转换 3 1.8实例方法,实例变量和静态方法,静态...
学习了一段时间的flex... 上传点资源,大家分享。 flex,怎么学习flex,Flex_3_Cookbook_中文版
Flex 组件Flex 组件Flex 组件Flex 组件Flex 组件
Flex_3_with_JavaFlex_3_with_JavaFlex_3_with_JavaFlex_3_with_Java
amcharts_flex_components_1.8.1 和开发示例
S32KSDKCAN组件详解-CANPAL-FLEXCAN,学习S32K系列CAN组件的使用和原理
flex4源码 超酷menu导航 flex4
flex学习笔记 flex学习笔记 flex学习笔记 flex学习笔记 flex学习笔记 flex学习笔记
Flex_CookBook_读书笔记(精品) Flex_CookBook_读书笔记(精品)
flex加载资源_loader类的使用实例
arcgis_api_for_flex_3_6 api库文件,现在esri官网需哟注册才能下载了,而且网速超慢,我下了好几次才下载完,希望对大家有用
将_Adobe_Flex_和_JavaFX_与_JavaServer_Faces_2.0_结合使用.pdf
最近开始学习Flex,其中用到了AS,AS2到AS3发生了很大的变化,完全的面向对象,知道这个特点以后我也一直没有特意的好好去学学AS3,但是随着最近学习的深入,还是有必要学习一下
MAPABC_FLEX_API_WEB_V2.4
Flex万年历记事本_flex源码
Flex_I_O_简介