《Flex 第一步》

//什么是FlexFlex 是一个针对企业级富互联网应用的表示层解决方案。具体地说，Flex是一种应用程序框架。富互联网应用程序，Rich Internet Application，简称RIA，将桌面应用程序的强交互性和传统Web应用的灵活性结合，对比HTML，表现更花哨，更有趣，更有个性。//Flex的特性使用矢量图形；丰富的组件库；对多媒体的广泛支持；与服务器端的通信：除了可以加载XML和其它文本资料外，Flex还可以和ASP、 ASP.NET、PHP、JSP等多种服务器端程序通信，连接远程WebService，同时Flex还支持Remoting和 Socket等高级数据通信方式。//Flex和FlashFlash 的重用性不好；Flex数据交互能力更突出//Flex程序的组成以 mxml为后缀的程序文件；以as为后缀的ActionScript文件；以css为后缀的样式表文件//MXML文件结构是一个标准的XML文件，包括了版本、编码(可选，默认为utf-8)、命名空间(xmlns)。在一个Flex项目中，可能有很多个MXML文件，但作为程序入口的运行文件只有一个，主文件的标识是根节点为mx:Application，一个程序中只能出现一个mx:Application节点。//添加按钮事件当为一个按钮添加click事件时，系统会自动提示生成EventHandler。注意要先定义按钮的ID。//自定义MXML组件新建 MXML组件，组件会出现在“组件”面板上，像使用Flex自带组件一样，将其拖放到主程序中即可。//在MXML文件中插入 ActionScript块通常情况下，将<mx:Script>标签放在紧跟根节点的位置，放在其他MXML代码的前面：<mx:Application xmlns:...> <mx:Script>  <![CDATA[   // 这里是ActionScript代码  ]]> </mx:Script></mx:Application> //调试F8是运行。F5单步跳入。F6单步跳过。Ctrl+F2终止。//断点断点右键可设置断点属性，定义断点的条件。//生成get,set高亮字段，如_NewsId，右键，源代码，生成Getter/Setter//List(array)和 Tree(xml)的绑定<mx:List x="20" y="20" dataProvider="{array_data}" width="180"></mx:List><mx:Tree x="20" y="200" labelField="@label" dataProvider="{myData}" width="180"></mx:Tree>//常用布局组件Canvas(自由布局)、VBox(垂直布局)、HBox(水平布局)，默认状态下滚动条采用自动适应的原则。Panel具有Canvas、VBox和HBox 的所有功能。如果Panel的layout属性值为“absolute”，则Panel对子级元素的布局方式和Canvas一样；当值为 horizontal时相当于HBox，值为vertical则相当于VBox。TitleWindow组件继承于Panel组件，与Panel 相比，它只多了一个关闭按钮。关闭事件为close。Grid可以像Table一样使用，单元格也有colSpan和rowSpan。Accordion 组件：一个可折叠的导航器，它包含一个子面板的列表，一次仅显示一个面板，可切换。ViewStack组件：由若干个重叠在一起的子容器组成，每次只有一个容器是可见或活动的。要通过AS代码来控制切换，设置viewstack.selectedChild。TabNavigator，继承自ViewStack，类似ajax的tab控件。//事件查看和生成选中控件，点击菜单栏“窗口”“属性”，在属性窗口中，选择“按字母排序视图”。//form表单控件通过 FormItem快速部署了一个用户信息表单。对表单的验证：<mx:StringValidator source="{user_txt}" property="text" minLength="6" maxLength="12" tooShortError="用户名太短了"/>  //自定义提示取代默认提示<mx:StringValidator source="{pass_txt}" property="text" minLength="6" maxLength="12"/>  //默认提示<mx:PhoneNumberValidator source="{phone_txt}" property="text"/>  //电话验证<mx:DateValidator source="{birth_txt}" property="text"/>  //日期验证<mx:EmailValidator source="{email_txt}" property="text"/>  //email验证//DataGrid组件<mx:DataGrid ... dataProvider="{books.book}">...<mx:columns><mx:DataGridColumn dataField="name" headerText="书名"/>...   //Model的id为books在 DataGrid组件中使用itmeRenderer(加入自定义控件):...<mx:DataGridColumn headerText="购买" itemRenderer="view.cartCell"/>...除了itemRenderer，同样可以自定义的还有headerRenderer和itemEditor，前者控制标题栏的界面，后者控制单元格在编辑状态下的界面(DataGrid的 editable为true时)//Tree组件<mx:Tree ... dataProvider="{files}" labelField="@label" change="treeChange(event)"... />  //XMLList的id为files；public function treeChange(event:Event):void { selectedNode = Tree(event.target).selectedItem as XML; txt.text = selectedNode.@label; }//TileList组件和 List一样，它也支持自定义itmeRenderer。<mx:TileList itemRenderer="ImageItem" ... dataProvider="{images.item}">  //ImageItem是mxml自定义控件//文件处理Text、 TextInput和TextArea。Text可以支持html标签(即解释html)，不过需要借助htmlText标签(使用时必须含有CDATA 标签)RichTextEditor编辑器，使用obj.htmlText和obj.text得到文本值。//导航类控件ToggleButtonBar 和TabBar，dataProvider为Array。ViewStack的定义：<mx:ViewStack id="myViewstack" ...> <mx:Canvas id="child1" ...>...</mx:Canvas> <mx:Canvas id="child2" ...>...</mx:Canvas> <mx:Canvas id="child3" ...>...</mx:Canvas></mx:ViewStack>//menuBar组件以特定格式的xml对象作为数据提供者，如<node label="清除画板" data="clear" enabled="false"/>，使用MenuEvent.item.@data取得选择值。//PopUpButton和 PopUpMenuButtonPopUpButton可以将任何组件作为窗口弹出，置于最上层。主要事件有 PopUpButtion.open()和PopUpButton.Close()。PopUpMentButton是前者的一个特例，它只能把 Menu控件当作弹出窗口。Menu控件用来创建菜单，相比MenuBar，它缺少了菜单条，而且没有对应的MXML标签，只能由代码创建。/*Flex事件机制*/as3.0全部采用addEventListener方法来注册监听器，且监听器必须是函数，监听器的作用域和监听器所在对象的作用域一致。EventDispatcher对象负责实现事件模型，它提供了三个关键的函数来运作事件机制：addEventListener、 removeEventListener和dispatchEvent(派发)。DisplayObject作为一切可视化元素的父类，直接继承于EventDispatcher对象，也就是说，as3.0中所有可视化对象都具有派发事件的功能。事件流运行流程分为三步：捕获事件、检测目标的监听器、事件冒泡。默认情况下，捕获功能处理关闭状态。另外，事件只在bubbles属性为true时才进行冒泡，可以冒泡的事件包括：change、click、doubleClick、keyDown,keyUp、mouseDown、mouseUp。不可以在一个监听器中同时打开捕获和冒泡功能。要做到这一点，只能注册两个监听器，一个打开捕获功能，一个打开冒泡功能，比如：canvas1.addEventListener(MouseEvent.CLICK,pressBtn,true);canvas1.addEventListener(MouseEvent.CLICK,pressBtn);evt:MouseEvent，evt 对象的四个属性：target表示派发事件的目标对象，currentTarget表示事件流当前正经过的目标对象；bubbles表示是否打开了冒泡功能；eventPhase则表示事件流当前的阶段，1表示捕获，2表示检测，3表示冒泡。addEventListener(type:String,listener:Function,useCapture:Boolean=false,priority:int=0,useWeakReference:Boolean=false)//useCaptrue 表示是否打开捕获功能，默认为false；priority表示监听器优先级，默认为0；useWeakReference指定是否使用弱引用，默认为 false。当综合使用MXML标签和AS来给同一个对象注册监听器时，很难确立这些监听器之间的前后顺序，即无法控制监听函数的执行顺序。如果事件的执行需要按照某一个顺序来进行时，可以使用 addEventListener方法的priority参数来实现(数字越大，级别越高)，如：btn.addEventListener(MouseEvent.CLICK,press1,false,1);btn.addEventListener(MouseEvent.CLICK,press2,false,4);btn.addEventListener(MouseEvent.CLICK,press3,false,2);注意，给一个对象注册多个监听器，即使第个监听器的优先级别不同，但也无法保证后一个执行时前面的监听函数已经执行完毕。因此，在设计程序时，后面的函数不应该以前者执行完毕为条件，最好让各个监听器互相独立。Flash Palyer的垃圾回收机制：将已经不再使用的对象清除，释放所占的内存资源，提高程序的运行效率。它的运行有自己的规律，而且是周期性的，并不会在第一时间(比如你把一个对象设为null的时候)将系统中的垃圾资源清理，它通常是在系统资源匮乏的情况下才进行。如果在对象注册监听器的时候(addEventListener时)默认使用了强引用，Flash Player为了保证程序的运行，会在内存中保留这个对象。即使把它设成null，也只是表面上被删除，实际还是留在内存中，成为一个“幽灵”。要避免“幽灵”，在注册监听器时，应该养成使用弱引用的习惯，同时，要使用预先定义的函数作为监听函数，而不是临时定义的函数(var f:Function = function():void { ... })。//拖曳事件(List控件为例)List1.dragEnabled = true;  //可拖List1.dropEnabled = true;  //可放List1.dragMoveEnabled = true;  //不出现重复数据，只调整元素位置 /*第6章 使用行为对象和动画效果*/<mx:Move id="myMove" target="{img}" xFrom="50" xTo="150" duration="2000"/>  //移动id为img的图片控件，从x坐标50到150，用时2秒private function initUI():void{ Effect_Blur.targets = [myPanel];  //模糊对象id是myPanel}<mx:Blur id="Effect_Blur" effectEnd="endBlur()" blurXFrom="0" blurXTo="30" blurYFrom="0" blurYTo="30" duration="1500"/>internal function endBlur():void{ if(handlerEnd){  isReverse = !isReverse;  //反向变化  Effect_Blur.play(null,isReverse);      }}Effect_Blur.resume();  //继续Effect_Blur.pause();  //暂停Effect_Blur.end();  //停止Effect_Blur.play();  //播放private function initUI():void{ Effect_Glow.target = myPanel;}  //发光对象<mx:Glow id="Effect_Glow" alphaFrom="1.0" alphaTo="0.3" blurXFrom="0.0" blurXTo="30.0" blurYFrom="0.0" blurYTo="30.0" color="ox6633ff"/>Effect_Glow.play();  //播放myPanel.filters = [];  //停止，将新的数据赋予对象，新的滤镜生效var newResize:Resize = new Resize();  //缩放图片newResize.heightFrom = 200;  //设定高度和宽度的起始值newResize.widthFrom = 200;newResize.heightTo = 240;  //高度的最终值newResize.widthBy = 40;  //宽度增加40相当于 widthTo = 240newResize.hideChildrenTargets = [Panel_1,Panel_2];  //指定要隐藏内部元素的Panel，缩放时隐藏p1和p2newResize.target = Canvas_1;  //缩放对象newResize.duration = 2000;  //持续时间  newResize.addEventListener(TweenEvent.TWEEN_END,myEndHandlerFun);  //监听动画的结束事件 /*第9章 数据绑定*///Canvas背景绑定取色器：<mx:Style source="style.css"/>  //引用样式文件<mx:ColorPicker id="mColor" x="30" y="30"/>  //取色器<mx:Canvas styleName="box" id="box" x="30" y="80" backgroundColor="{ mColor.value.toString() }" width="200" height="160"></mx:Canvas>//数据绑定使用大括号是实现数据绑定的最快捷方式。只需要将源数据对象放在大括号中，作为目标对象的值就可以了。<mx:TextInput id="name_txt" x="89" y="10" width="133"/><mx:Text x="89" y="115" text="{name_txt.text}" width="133"/>  //以name_txt.text为数据源，即时更新<mx:Script> <![CDATA[  [Bindable]  //标识数据源  internal function ShowAge(s:String):String{   var n:Number = Number(s);   if(n>=16) return "成年";   return "未成年";  } ]]></mx:Script><mx:Text x="89" y="150" text="{ShowAge(age_txt.text)}" width="133"/>//使用<mx:Binding>好处在于，可以将数据绑定和描述界面的MXML代码分离开来，使得程序结构井井有条。<mx:Model id="users">  //数据源对象 <users><user><name>Peter Ent</name></user></users></mx:Model><mx:Label id="name_txt" x="10" y="135" width="154"/><mx:Binding source="users.user.name" destination="name_txt.text" />  //id.item.property//绑定类对象[Bindable]public class myTest{ public var className:String = "";}<tree:myTest id="test"/>  //使用MXML标签定义非可视化类对象，在initApp或在点击时为属性赋值<mx:Label id="tip_txt" x="0" y="20" title="{test.className}"/>如果组件是程序创建的(如上面的 test是new出来的)，那就要用：BindingUtils.bindProperty(tip_txt,"title",test,"className");  //将test的className和tip_txt的title属性绑定BindingUtils.bindSetter(setName,test,"className");  //将test的className属性和setName函数绑在一起，setName参数是一个string，参数值是test的className//派发事件在类中，可以通过属性的setter派发，如在myTest类中：[Bindable("NumChange")]  //属性可绑定，定义了一个NumChange事件public function set Num(n:Number):void{ if(num != n){  num = n;  this.dispatchEvent(new Event("NumChange"));  //派发事件 }}在主程序里可以添加监听：test = new myTest(); test.addEventListener("NumChange",handler);  //当test的num被赋值时会触发handler函数注意，数组类型的对象，其子元素是无法作为数据源参与绑定的。如不能期望一个文本控件绑定到array中某一个元素。Object类实例不能实现绑定，因为Object类型属于动态类型，我们可以随意地向里面添加任何属性，而且属性的类型也是任意的，编译器很难正确识别这些属性和属性的数据类型。要解决这个问题，需要使用 mx.utils包中的ObjectProxy对象。//定义绑定类[Bindable]public class people{ public var name:String; public var email:String; public var img:String;  function people(obj:Object):void{  //构造函数  for(var i:String in obj){   this[i]  = obj[i];  } }} /*第10章 组件的使用*/// 应用样式//使用主题//修改组件外观//创建组件/*第11章 Flex2.0新特性实例开发*///处理XML//example oneprivate var myData:XML = <items>              <item type = "流行音乐"><song>每一刻都是崭新的</song></item>              <item type = "古典音乐"><song>拉德斯基进行曲 </song></item>              <item type="乡村音乐"><song>光阴的故事</song></item>             </items>;internal function initApp():void{source_txt.text = myData.toXMLString();  //字符串输出output(" 节点数目："+myData..item.length());  //myData.child("item").length()，输出3for (var prop:String in myData..item){  //var prop:String in myData.child("item"),prop是节点的索引，0，1，2 var node:XML = myData..item[prop];  //myData.child("item")[prop]   output("节点："+prop);   output("属性名："+String(node.@type));  //node.attribute("type")   output(" 子节点："+node.song);  //node.child("song")   output("----------");}output(myData..item.(@type == "流行音乐"));  //属性typeoutput(myData..item.(song != "光阴的故事").song);  //节点song//example twovar xml:XML = new XML("<items></items>");  //定义根var node:XML = <item type = "流行音乐"><song>每一刻都是崭新的</song></item>;xml.appendChild(node);  //添加节点node = <item type = "古典音乐"><song>拉德斯基进行曲 </song></item>;xml.insertChildBefore(xml..item.(@type == "流行音乐"),node);  //插入节点var tmp:XML = node.copy();  //复制节点(含节点值)tmp.@type = "乡村音乐";  //重新赋值(覆盖原值)tmp.song = "光阴的故事";xml.appendChild(tmp);output(xml.toXMLString());//example threeinternal function initApp():void{  var loader:URLLoader = new URLLoader(); loader.load(new URLRequest("http://rss.sina.com.cn/news/allnews/sports.xml"));  //返回请求的页面信息(源代码) loader.addEventListener(Event.COMPLETE, completeHandler);  //完成事件 loader.addEventListener(SecurityErrorEvent.SECURITY_ERROR, securityErrorHandler); loader.addEventListener(IOErrorEvent.IO_ERROR, ioErrorHandler); CursorManager.setBusyCursor();  //鼠标等待}internal function completeHandler(evt:Event):void{ CursorManager.removeBusyCursor();  //移除等待 var myXML:XML = XML(evt.target.data);  //类型转化 parseRSS(myXML);  //输出}internal function parseRSS(xml:XML):void{ var items:ArrayCollection = new ArrayCollection();  //结果集 for(var i:String in xml..item){  var node:XML = xml..item[i];  //结点  var obj:Object = new Object();  //实体  obj.title = node.title;  obj.link = node.link  obj.pubDate = node.pubDate;  obj.description = node.description;  items.addItem(obj); } newsList.labelField = "title";  //显示字体 newsList.dataProvider = items;}internal function showNews():void{  //<mx:List id="newsList" width="100%" change="showNews()"></mx:List> var item:Object = newsList.selectedItem; news_txt.htmlText = "<b><a href='"+item.link+"'>"+item.title+"</a></b><br/>"; news_txt.htmlText += "发布日期："+item.pubDate+"<br/><br/>"; news_txt.htmlText += item.description+"<br/>";} /*第11章 Flex2.0新特性实例开发*///正则表达式//声音控制//Socket通信