//什么是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通信

總結

以上是生活随笔為你收集整理的《Flex 第一步》的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。