`
hereson
  • 浏览: 1450081 次
  • 性别: Icon_minigender_1
  • 来自: 苏州
社区版块
存档分类
最新评论

Flex学习笔记_06 使用组件处理数据和交互_01常用组件（上）

    博客分类：
  • flex
FlexAdobeCSSXMLFlash 
阅读更多

数据处理，实现交互动作的组件在mx.controls包中。

 

1. 常用组件的使用

 

1.1 Button 按钮

btn.addEventListener(MouseEvent.CLICK.doClick); 为按钮添加鼠标单击事件监听器。

所有可视化组件都有addEventListener方法 ，用于添加对特定事件的监听函数。它有5个参数：

type:String, 事件的类型

listener:Function, 执行的函数名

useCapture:Boolean=false,

priority:int=0,

useWeakReference:Boolean=false

 

MouseEvent 包含所有的鼠标事件。

 

使用<mx:Style>为程序设置样式，以下定义了整个程序的字体为12，背景颜色。

 

在按钮上插入图标： 点选按钮，找到Icon属性，在这里选择图标。对应的MXML代码：icon="@Embed('expand.gif')"。 必须将图标嵌入到SWF中。

Xml代码 复制代码
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="initApp()">  
  3. <mx:Style>  
  4.     Application{   
  5.         fontSize:12;       
  6.         backgroundGradientColors: #c0c0c0, #c0c0c0   
  7.     }   
  8. </mx:Style>  
  9. <mx:Script>  
  10.     <![CDATA[  
  11.         import mx.core.MovieClipAsset;  
  12.         [Embed(source="expand.gif")]  
  13.         [Bindable]   
  14.         public var myIcon:Class;  
  15.  
  16.  
  17.         import flash.events.MouseEvent;  
  18.           
  19.         internal function initApp():void{  
  20.             btn.addEventListener(MouseEvent.CLICK,doClick);  
  21.         }  
  22.         internal function doClick(evt:MouseEvent):void{  
  23.             btn.enabled = false;  
  24.             label_tip.text = "我是点击后的标签";  
  25.         }  
  26.     ]]>  
  27. </mx:Script>  
  28.     <mx:Button id="btn" x="26" y="74" label="Button" width="76" fillColors="[#004080, #8080ff]" borderColor="#000000" icon="{myIcon}"/>      
  29.     <mx:Label id="label_tip" x="26" y="121" text="我是一个标签" width="258" height="31"/>  
  30. </mx:Application>  
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="initApp()">
<mx:Style>
	Application{
		fontSize:12;	
		backgroundGradientColors: #c0c0c0, #c0c0c0
	}
</mx:Style>
<mx:Script>
	<![CDATA[
		import mx.core.MovieClipAsset;
		[Embed(source="expand.gif")]
		[Bindable] 
   		public var myIcon:Class;


		import flash.events.MouseEvent;
		
		internal function initApp():void{
			btn.addEventListener(MouseEvent.CLICK,doClick);
		}
		internal function doClick(evt:MouseEvent):void{
			btn.enabled = false;
			label_tip.text = "我是点击后的标签";
		}
	]]>
</mx:Script>
	<mx:Button id="btn" x="26" y="74" label="Button" width="76" fillColors="[#004080, #8080ff]" borderColor="#000000" icon="{myIcon}"/>	
	<mx:Label id="label_tip" x="26" y="121" text="我是一个标签" width="258" height="31"/>
</mx:Application>

 

1.2 CheckBox 复选框

由一段可选的文字和表示状态的图标组成，继承自Button。

记录用户的行为状态（是否选中），文字可选位置：位于组件的左边、右边（默认）、顶部、底部。

visible="{myCheck.selected}" 将visible和myCheck.selected绑定，一旦myCheck.selected变化，visible也会跟着变化。

Xml代码 复制代码
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="340" height="300" fontSize="12" backgroundGradientColors="[#c0c0c0, #c0c0c0]">  
  3.     <mx:CheckBox id="myCheck" x="52" y="247" label="窗口不可见" selected="true" width="111" labelPlacement="right"/>  
  4.     <mx:Panel id="myPanel" x="52" y="30" width="250" height="200" layout="absolute" title="窗口" visible="{myCheck.selected}">  
  5.     </mx:Panel>      
  6. </mx:Application>  
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="340" height="300" fontSize="12" backgroundGradientColors="[#c0c0c0, #c0c0c0]">
	<mx:CheckBox id="myCheck" x="52" y="247" label="窗口不可见" selected="true" width="111" labelPlacement="right"/>
	<mx:Panel id="myPanel" x="52" y="30" width="250" height="200" layout="absolute" title="窗口" visible="{myCheck.selected}">
	</mx:Panel>	
</mx:Application>
 

1.3 RadioButton 单选框

一组Button的集合，供用户多选一。

要保证RadioButton 成为一组，使得选择的结果具有唯一性，groupName属性必须相同。

或者使用RadioButtonGroup组件也可以实现，可以控制一组RadioButton的状态，在监听用户行为时非常方便。RadioButton的groupName属性必须与RadioButtonGroup的id同名。

Xml代码 复制代码
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" label="Radio" fontSize="12">     
  3.     <mx:RadioButtonGroup id="flex"/>  
  4.        
  5.     <mx:RadioButton groupName="flex" x="67" y="106" label="1999" id ="item1"/>  
  6.     <mx:RadioButton groupName="flex" x="67" y="184" label="2004" id ="item2"/>  
  7.     <mx:RadioButton groupName="flex" x="67" y="210" label="2005" id ="item3"/>  
  8.     <mx:RadioButton groupName="flex" x="67" y="132" label="2001" id ="item4"/>  
  9.     <mx:RadioButton groupName="flex" x="67" y="158" label="2003" id ="item5"/>  
  10.     <mx:Label x="55" y="78" text="Flex是哪一年发布的？"/>  
  11.        
  12.     <mx:Label id="answer_txt"  x="159" y="258" width="139"/>  
  13.     <mx:Button x="55" y="257" label="提交" click="answer_txt.text =(flex.selection == item2?'正确!':'错误')"/>  
  14. </mx:Application>  
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" label="Radio" fontSize="12">	
	<mx:RadioButtonGroup id="flex"/>
	
	<mx:RadioButton groupName="flex" x="67" y="106" label="1999" id ="item1"/>
	<mx:RadioButton groupName="flex" x="67" y="184" label="2004" id ="item2"/>
	<mx:RadioButton groupName="flex" x="67" y="210" label="2005" id ="item3"/>
	<mx:RadioButton groupName="flex" x="67" y="132" label="2001" id ="item4"/>
	<mx:RadioButton groupName="flex" x="67" y="158" label="2003" id ="item5"/>
	<mx:Label x="55" y="78" text="Flex是哪一年发布的？"/>
	
	<mx:Label id="answer_txt"  x="159" y="258" width="139"/>
	<mx:Button x="55" y="257" label="提交" click="answer_txt.text =(flex.selection == item2?'正确!':'错误')"/>
</mx:Application>

 

1.4 ButtonBar

也是Button的集合，提供导航功能。

适合只有若干个相关选择，不需要记录用户的状态的情况下使用。

btns.dataProvider = data_arr; 利用AS给ButtonBar传递数据源。根据数据源自动显示。

MXML代码中对ButtonBard的itemClick事件进行了监听。

Xml代码 复制代码
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="initUI()">  
  3. <mx:Style source="style.css"/>           
  4. <mx:Script>  
  5.     <![CDATA[  
  6.         import mx.events.ItemClickEvent;          
  7.         internal function initUI():void{  
  8.             var data_arr:Array = new Array();  
  9.             data_arr.push("Flex");  
  10.             data_arr.push("Flash");  
  11.             data_arr.push("Flash Media Server");  
  12.             data_arr.push("Flex Data Server");  
  13.               
  14.             btns.dataProvider = data_arr;  
  15.         }  
  16.           
  17.         internal function btn_click_handler(evt:ItemClickEvent):void{  
  18.             tip_txt.text = "点击的按钮："+evt.index+":"+evt.label;  
  19.         }  
  20.     ]]>  
  21. </mx:Script>  
  22.   
  23.     <mx:ViewStack id="vs">  
  24.         <mx:VBox label="Accounts"/>  
  25.         <mx:VBox label="Leads"/>  
  26.     </mx:ViewStack>    
  27.        
  28.     <mx:ButtonBar id="btns" styleName="Btns"  horizontalGap="5" x="10" y="122" itemClick="btn_click_handler(event)"/>  
  29.     <mx:Label id="tip_txt" x="10" y="193" text="没有点击按钮" height="27" width="261"/>  
  30.     <mx:TabBar x="69" y="276">  
  31.     </mx:TabBar>  
  32.   
  33. </mx:Application>  
<?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;
		}
		
		internal function btn_click_handler(evt:ItemClickEvent):void{
			tip_txt.text = "点击的按钮："+evt.index+":"+evt.label;
		}
	]]>
</mx:Script>

	<mx:ViewStack id="vs">
        <mx:VBox label="Accounts"/>
        <mx:VBox label="Leads"/>
    </mx:ViewStack> 
    
	<mx:ButtonBar id="btns" styleName="Btns"  horizontalGap="5" x="10" y="122" itemClick="btn_click_handler(event)"/>
	<mx:Label id="tip_txt" x="10" y="193" text="没有点击按钮" height="27" width="261"/>
	<mx:TabBar x="69" y="276">
	</mx:TabBar>

</mx:Application>

 

<mx:Style source="style.css"/> 从外部引入CSS样式表。

.Btns 定义一个样式。在组件的styleName可以设置，如：styleName="Btns"

文件内容如下：

Js代码 复制代码
  1. Application{   
  2.     fontSize:12;       
  3. }   
  4. .Btns{   
  5.     buttonStyleName: "mybuttonBarButtonStyle";   
  6.     firstButtonStyleName: "mybuttonBarFirstButtonStyle";   
  7.     lastButtonStyleName: "mybuttonBarLastButtonStyle";   
  8. }   
  9.   
  10. .mybuttonBarButtonStyle {   
  11.     color: #990000;   
  12. }   
  13.   
  14. .mybuttonBarFirstButtonStyle {   
  15.     cornerRadius: 4;   
  16. }   
  17.   
  18. .mybuttonBarLastButtonStyle {   
  19.     cornerRadius: 4;   
  20. }  
Application{
	fontSize:12;	
}
.Btns{
   	buttonStyleName: "mybuttonBarButtonStyle";
   	firstButtonStyleName: "mybuttonBarFirstButtonStyle";
   	lastButtonStyleName: "mybuttonBarLastButtonStyle";
}

.mybuttonBarButtonStyle {
   	color: #990000;
}

.mybuttonBarFirstButtonStyle {
   	cornerRadius: 4;
}

.mybuttonBarLastButtonStyle {
   	cornerRadius: 4;
}

  LinkBar和ButtonBar 用法相似。不过他是将LinkButton组合在一起。

 

1.5 ComboBox 下拉选择框

使用ComboBox 重点要理解 DropdownEvent 事件。在列表被弹出或收回时，会分别触发DropdownEvent 的OPEN 和 CLOSE 事件。

bookList.addEventListener(DropdownEvent.CLOSE,chooseHandler) 对CLOSE事件进行了监听。

利用 selectedItem 属性，可以跟踪到用户当前的选择项，层级关系： ComboBox -> ComboBase -> UICompoent

 

Xml代码 复制代码
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="initUI()">  
  3.     <mx:Script>  
  4.         <![CDATA[  
  5.             import mx.events.DropdownEvent;           
  6.               
  7.             internal function initUI():void{  
  8.                 var info:Array = new Array();  
  9.                 info.push({label:"Book 1" ,data:"1"});  
  10.                 info.push({label:"Book 2" ,data:"2"});  
  11.                 info.push({label:"Book 3" ,data:"3"});  
  12.                 bookList.dataProvider = info;  
  13.                   
  14.                 bookList.addEventListener(DropdownEvent.CLOSE,chooseHandler)  
  15.             }  
  16.             internal function chooseHandler(evt:DropdownEvent):void{  
  17.                 var item:Object = bookList.selectedItem;                  
  18.                 tip_txt.text = "Select:Label:"+item.label+":data:"+item.data;  
  19.             }  
  20.         ]]>  
  21.     </mx:Script>  
  22.     <mx:ComboBox id="bookList" x="30" y="86" width="160"></mx:ComboBox>  
  23.     <mx:TextArea id="tip_txt" x="30" y="129" height="182" width="178"/>      
  24.        
  25. </mx:Application>  
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="initUI()">
	<mx:Script>
		<![CDATA[
			import mx.events.DropdownEvent;			
			
			internal function initUI():void{
				var info:Array = new Array();
				info.push({label:"Book 1" ,data:"1"});
				info.push({label:"Book 2" ,data:"2"});
				info.push({label:"Book 3" ,data:"3"});
				bookList.dataProvider = info;
				
				bookList.addEventListener(DropdownEvent.CLOSE,chooseHandler)
			}
			internal function chooseHandler(evt:DropdownEvent):void{
				var item:Object = bookList.selectedItem;				
				tip_txt.text = "Select:Label:"+item.label+":data:"+item.data;
			}
		]]>
	</mx:Script>
	<mx:ComboBox id="bookList" x="30" y="86" width="160"></mx:ComboBox>
	<mx:TextArea id="tip_txt" x="30" y="129" height="182" width="178"/>	
	
</mx:Application>
 

1.6 List 列表组件

层级关系： List ->ListBse ->ScrollControlBase ->UICompoent

在获得数据源后，List组件会分析数据，将每条数据以默认的形式展现出来，这种用来控制数据表现形式的机制称之为 itemRenderer 。

可以定义自己的itemRenderer 对象，覆盖默认的属性。

拥有data属性是 可以用来作为 itemRenderer 的组件的特点。

Model 标签主要用于定义数据，这些数据经过编译被转化为一般的AS数据对象，可以用做数据绑定。不同的是这些数据不可修改，并且没有明确的数据类型。

image.item 包括了XML数据中所有节点为item的数据，通过dataProvider 属性将数据传递给List组件。

Xml代码 复制代码
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" fontSize="12">  
  3.     <mx:Model id="images">  
  4.       <image>  
  5.         <item label="图片1" data="images/Baby01.gif"/>  
  6.         <item label="图片2" data="images/Baby02.gif"/>  
  7.         <item label="图片3" data="images/Baby03.gif"/>  
  8.         <item label="图片4" data="images/Baby04.gif"/>  
  9.       </image>  
  10.     </mx:Model>      
  11.     <mx:List dataProvider="{images.item}" itemRenderer=
分享到：
| Flex第一步：基于ActionScript 3.0的Flex ...
评论
1 楼 goagrass 2008-08-21  
一个学习CSS的中文网站 - CSSPLAY中文官方网站 致力于CSS技术的提高
http://www.cssplay.org.cn/


用图片模拟实现超漂亮的选框checkbox效果
http://www.cssplay.org.cn/css-example/20080821/683.html

超炫的单选框与复选框效果
http://www.cssplay.org.cn/css-example/20080821/682.html
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    flex学习笔记 flex学习总结 flex学习教程

    本教程是作者精心编写的Flex学习资料，适合初学者入门，通过图文并茂的方式，帮助读者快速掌握Flex的基本概念和核心技能。 1. **Flex基础**：Flex提供了MXML和ActionScript两种编程方式。MXML是一种声明式语言，...

    FLEX学习笔记

    《FLEX学习笔记》 FLEX，全称为Flex Builder，是由Adobe公司开发的一款基于MXML和ActionScript的开源框架，用于构建富互联网应用程序（RIA）。它允许开发者创建具有交互性、响应性和丰富用户体验的Web应用。FLEX的...

    Flex学习笔记.rar

    本压缩包“Flex学习笔记.rar”显然是一份针对初学者的教程资料，旨在帮助新接触Flex的开发者快速上手。 在“FlexBeginner.pdf”这份文档中，你可以期待找到以下关键知识点： 1. **Flex概述**：介绍Flex技术的基本...

    Flex新手教程_入门级学习笔记

    ### Flex新手教程_入门级学习笔记 #### ActionScript核心概念 **ActionScript（简称AS）** 是一种面向对象的编程语言，主要用于开发Flex应用程序。掌握AS的基础知识对于学习Flex至关重要。 ##### 类和对象 (Class...

    Flex学习笔记

    这篇“Flex学习笔记”可能是作者在深入研究Flex技术过程中整理的心得体会和实践案例，结合了《Flex3权威指南》这本书的内容。 在Flex中，ActionScript是核心编程语言，它是基于ECMAScript的一个版本，专门针对富...

    flex学习笔记

    本篇“Flex学习笔记”将带你深入理解Flex的核心概念、架构以及如何使用它来构建高效的应用程序。 一、Flex基础 1. MXML与ActionScript：Flex主要使用MXML（Markup Language for Flex）和ActionScript两种语言进行...

    flex 学习详细笔记

    本笔记将深入探讨Flex的基本概念、架构、组件、布局管理器以及事件处理机制，帮助初学者全面理解并掌握Flex开发。 1. **Flex简介**：Flex是一种开放源代码的框架，主要用于创建交互式的、基于Web的用户界面。它允许...

    Flex学习笔记.doc

    Flex学习笔记概述 Flex是一种由Adobe开发的企业级富互联网应用（RIA）的表示层解决方案，其主要目的是提供高度交互和动态的用户体验。Flex的核心在于它的编程语言MXML和ActionScript（AS），这两种语言结合在一起，...

    Flex学习笔记，入门材料

    ### Flex学习笔记：ActionScript与Flex开发入门 #### 1. ActionScript核心概念 ##### 1.1 类和对象（Class and Object） 类是对象的模板，定义了一组具有相同特性和行为的对象的共同属性和方法。在ActionScript中...

    flex actionscript学习笔记

    Flex ActionScript 学习笔记是关于使用Adobe Flex技术并结合ActionScript 3.0进行开发的知识总结。ActionScript 3.0是随着Flash CS3一起推出的一种强大的编程语言，相较于之前的ActionScript版本，它有着显著的提升...

    Flex学习笔记-由浅入深

    最后，通过预定义的可视化组件构建用户界面，使用styles和skins自定义外观，编写事件处理和脚本控制应用程序行为，连接数据并使用服务进行通信。最后，编译并运行应用程序。 AS3语言基础是Flex开发的核心，以下是...

    精讲Flex4组件开发(附源码)

    掌握这些生命周期方法对于优化性能和处理用户交互至关重要。例如，`createChildren()` 方法用于创建组件的子元素，`measure()` 方法计算组件大小，`layout()` 处理组件布局，`updateDisplayList()` 更新可视表示，而...

    Away3D_4.1+Flex4.7学习笔记+案例

    本学习笔记结合Flex4.7框架，将深入探讨如何在Flash平台上构建高效的3D图形应用。 一、Away3D 4.1简介 Away3D 4.1是该引擎的一个主要版本，引入了许多性能优化和新特性。它支持硬件加速，提供更流畅的3D渲染效果，...

    《Flex企业应用开发实战》学习笔记之Flex企业应用开发基础[收集].pdf

    《Flex企业应用开发实战》的学习笔记主要探讨了Flex在企业应用开发中的基础知识，包括MXML语言、客户端状态保持、客户端MVC模式以及数据绑定技术。 2.1 MXML语言是Flex应用开发的核心部分，它是一种XML标记语言，与...

    flex + java 初学者 笔记 学习资料

    本文档是针对Flex和Java初学者的学习笔记，涵盖了Flex中的基础组件、文本处理、样式设计、行为对象以及动画效果。 一、Flex基础组件 1. Button：按钮组件，可以设置文字和图标，图标通过`icon="@Embed('图片路径')...

    Flex + Hessian 学习笔记(二)

    在Flex项目中，我们可以使用Flex的HTTPService或WebService组件来与Hessian服务进行交互。通过配置服务URL和方法名，我们可以轻松地调用远端Hessian服务的方法，并处理返回的结果。 "swf"文件"HessianFlexClient....

Magicbox
Global site tag (gtag.js) - Google Analytics