小編給大家分享一下Flex數(shù)據(jù)綁定的方式有哪些,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
創(chuàng)新互聯(lián)是一家集網站建設,城步企業(yè)網站建設,城步品牌網站建設,網站定制,城步網站建設報價,網絡營銷,網絡優(yōu)化,城步網站推廣為一體的創(chuàng)新建站企業(yè),幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強企業(yè)競爭力??沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網需求。同時我們時刻保持專業(yè)、時尚、前沿,時刻以成就客戶成長自我,堅持不斷學習、思考、沉淀、凈化自己,讓我們?yōu)楦嗟钠髽I(yè)打造出實用型網站。
Flex數(shù)據(jù)綁定
現(xiàn)在數(shù)據(jù)庫或是某個文件里有一些數(shù)據(jù)需要顯示在界面上該怎么辦呢?我們的目的就是將這些數(shù)據(jù)設法放到界面上去可以顯示出來,這個將數(shù)據(jù)放到界面上去的過程可以叫住Flex數(shù)據(jù)綁定。
在Flex應用中程序中,F(xiàn)lex數(shù)據(jù)綁定的實際是借助事件機制來完成的,當目標使用Flex數(shù)據(jù)綁定的時候,目標對象就會監(jiān)聽數(shù)據(jù)源對象的某一固定事件。當數(shù)據(jù)源發(fā)生變化時,數(shù)據(jù)源會派發(fā)改變事件通知目標對象更新數(shù)據(jù)。實際開發(fā)中我們不需要去關注具體的實現(xiàn)過程,這個過程Flash/Flex會自動去完成。
在Flex中,F(xiàn)lex數(shù)據(jù)綁定主要有四種方式,分別為:"{}"綁定表達式、[Bindable]綁定符號、<mx:Binding>標簽和BindingUtils動態(tài)綁定,下面一一對這四種Flex數(shù)據(jù)綁定方式進行詳細介紹。
一、"{}"綁定表達式
Flex開發(fā)中,"{}"綁定表達式的應用是最為常見的,簡單、方便。好比ASP.NET中的"<%%>"一樣的功效。這里我就簡單介紹下,在Flex下怎么使用"{}"綁定表達式來綁定數(shù)據(jù)。如有這樣一個簡單的需求,我們定義一個變量,通過"{}"綁定表達式將變量的值綁定到文本框或是按扭等類似的UI組件上,變量定義如下:
1<mx:Script> 2<![CDATA[ 3[Bindable] 4internalvartext:String="嗨,這是通過\"{}\"表達式綁定的!"; 5]]> 6</mx:Script>
如上定義了一個字符串的變量text,我們通過"{}"綁定表達式將其綁定在UI組件上呢?如下:
1<mx:Buttonxmx:Buttonx="97"y="122"label="{this.text}"fontSize="12"/> 2<mx:Labelxmx:Labelx="97"y="152"text="{this.text}"fontSize="12"/> 3<mx:Textxmx:Textx="97"y="178"text="{this.text}"fontSize="12"/>
簡潔、簡單、方便且適用。OK,已經學到手了,那下面繼續(xù)看看另一種綁定使用方式--綁定方法返回值。例如需要將一個方法的返回值通過"{}"綁定表達式進行Flex數(shù)據(jù)綁定,讓其在UI組件上呈現(xiàn)該怎么做呢?如下方法定義:
1privatefunctionBindText():String 2{ 3return"通過\"{}\"表達式綁定方法!"; 4}
其實和上面一樣,直接將"{}"里的變量改為方法便OK,如下代碼段:
<mx:Labelx="114"y="277"text="{BindText()}"fontSize="12"/>
如上便完成了對方法的綁定,既將BindText()方法的值綁定在了Label組件上。
二、[Bindable]綁定符號
[Bindable]綁定符號在上面就已經出現(xiàn)過了,他的使用和作用也很容易掌握。如上示例,我們的目的是將定義的變量值綁定在UI組件上,如果要實現(xiàn)這個功能,直接將定義的變量通過"{}"綁定表達式進行Flex數(shù)據(jù)綁定是不能完成功能的,我們必須為所定義的變量標記[Bindable]。在Flex中,只有標記有[Bindable]的數(shù)據(jù)源才能進行Flex數(shù)據(jù)綁定(函數(shù)除外,上面示例中也證實了這一點),當然也可以是其他的數(shù)據(jù)源(xml,數(shù)據(jù)庫,文件等不同地方不同類型的數(shù)據(jù)源)。
上面這樣使用確實很簡單,但還是需要更加深入的了解[Bindable]。當指定了[Bindable]的數(shù)據(jù)源發(fā)生改變的時候,仍然是通過所監(jiān)聽的事件方法來處理的“通知”,默認為"propertyChange"事件。如之前定義的變量text,那么完整的定義應該如下所示:
1[Bindable(event="propertyChange")]
2internalvartext:String="嗨,這是通過\"{}\"表達式綁定的!";
“propertyChange”事件為默認事件,通常我們只需要使用簡寫形式[Bindable]就OK了。除此之外還需要注意兩點(這里就不做介紹,在后續(xù)文章里我會詳細介紹):
1、[Bindable]標簽用于函數(shù)時,只能在setter和getter方式定義的函數(shù)前使用,這種綁定稱之為函數(shù)級綁定。
2、[Bindable]標簽用于公有類時,這個類的所有公共變量,setter和getter方式定義的函數(shù)都可以用于綁定。這種綁定稱為對象級綁定。
三、<mx:Binding>標簽
<mx:Binding>標簽也是使用非常頻繁的Flex數(shù)據(jù)綁定方式。到底怎么個用法呢?下面以兩個小示例使用不同的數(shù)據(jù)源來進行Flex數(shù)據(jù)綁定演示。首先用<mx:Model>標簽定義一個數(shù)據(jù)源(<mx:Model>標簽就相當于的定義一個臨時數(shù)據(jù),這里不做詳細介紹,不清楚它的作用的朋友請查閱相關資料學習)。<mx:Model>標簽定義數(shù)據(jù)源如下:
1<mx:Modelidmx:Modelid="books"> 2<Books> 3<Book> 4<Name>ActionScript3.0</Name> 5<Author>張三</Author> 6</Book> 7<Book> 8<Name>FlashCS3</Name> 9<Author>李四</Author> 10</Book> 11</Books> 12</mx:Model>
如上定義的數(shù)據(jù)源,通過<mx:Binding>標簽來進行Flex數(shù)據(jù)綁定是很簡單的,如下代碼段:
1<mx:Bindingsourcemx:Bindingsource="books.Book[0].Name"destination="txtName.text"/> 2<mx:Bindingsourcemx:Bindingsource="books.Book[1].Name"destination="txtAuthor.text"/> 3 4<mx:TextInputxmx:TextInputx="95"y="71"id="txtName"fontSize="12"/> 5<mx:TextInputxmx:TextInputx="95"y="115"id="txtAuthor"fontSize="12"/>
<mx:Model>標簽可以用來定義XML式的數(shù)據(jù)源,另外還可以通過編程的方式定義數(shù)據(jù)源或從數(shù)據(jù)庫、文件或各種數(shù)據(jù)服務接口來獲取數(shù)據(jù)源,下面是使用xml的數(shù)據(jù)源定義:
1privatevarxml:XML=<Books> 2<Book> 3<Name>ActionScript3.0</Name> 4<Author>張三</Author> 5</Book> 6<Book> 7<Name>FlashCS3</Name> 8<Author>李四</Author> 9</Book> 10</Books>
綁定xml對象的數(shù)據(jù)和通過<mx:Model>標簽定義的數(shù)據(jù)源沒什么區(qū)別,詳細如下代碼塊:
1<mx:Bindingsourcemx:Bindingsource="xml.Book[0].Name"destination="txtXmlName.text"/> 2<mx:Bindingsourcemx:Bindingsource="xml.Book[1].Name"destination="txtXmlAuthor.text"/> 3<mx:TextInputxmx:TextInputx="95"y="177"id="txtXmlName"fontSize="12"/> 4<mx:TextInputxmx:TextInputx="95"y="225"id="txtXmlAuthor"fontSize="12"/>
四、BindingUtils與動態(tài)綁定
在Flex數(shù)據(jù)綁定中,動態(tài)綁定主要是通過BindingUtils類提供的兩個靜態(tài)方法來實現(xiàn)。該類位于包mx.binding.utils下,它提供了bindProperty()和bindSetter()兩個靜態(tài)方法來實現(xiàn)數(shù)據(jù)的動態(tài)綁定。
bindProperty()方法根據(jù)名稱就可以看出大概意思,綁定屬性。那實際開發(fā)中我們應該怎么應用他呢?其實很簡單,一句話概括就是:將xx的YY屬性綁定到AA的BB屬性。更清楚的理解這句話的意思見下面代碼片段:
1<?xmlversionxmlversion="1.0"encoding="utf-8"?> 2<mx:Applicationxmlns:mxmx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"layout="absolute"> 3<mx:Script> 4<![CDATA[ 5importmx.binding.utils.BindingUtils; 6 7privatevarmyName:String="張三"; 8 9internalfunctiononClick():void 10{ 11BindingUtils.bindProperty(nameText,"text",btn,"label"); 12} 13]]> 14</mx:Script> 15<mx:TextInputxmx:TextInputx="84"y="83"id="nameText"text=""/> 16<mx:Buttonxmx:Buttonx="102"y="153"label="動態(tài)綁定"id="btn"click="onClick()"/> 17</mx:Application>
這段代碼很簡單,在界面上分別放置了輸入組件和一個按扭組件,然后定義了一個字符串(String)類型的變量myName,***通過按扭的單擊事件將按扭的"label"屬性綁定到輸入組件的"text"屬性上。其實onClick()方法里的代碼和下面這一句代碼是完全等價的:
1this.nameText.text=this.btn.label;
bindSetter()方法的使用也很簡單,該Flex數(shù)據(jù)綁定方法綁定數(shù)據(jù)需要與setter類似的方法結合,將外部傳遞進去的參數(shù)進行方法委托實現(xiàn)數(shù)據(jù)的動態(tài)綁定,拿上面將按扭顯示值綁定到文本輸入組件的值的示例來說,只需要定義一個setter的方法,該bindProperty()方法為bindSetter()方法既可,詳細見下面代碼片段:
1<?xmlversionxmlversion="1.0"encoding="utf-8"?> 2<mx:Applicationxmlns:mxmx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"layout="absolute"> 3<mx:Script> 4<![CDATA[ 5importmx.binding.utils.BindingUtils; 6 7privatevarmyName:String="張三"; 8 9internalfunctiononClick():void 10{ 11//BindingUtils.bindProperty(nameText,"text",btn,"label"); 12BindingUtils.bindSetter(bindText,btn,"label"); 13} 14 15internalfunctionbindText(text:String):void 16{ 17this.nameText.text=text; 18} 19]]> 20</mx:Script> 21<mx:TextInputxmx:TextInputx="84"y="83"id="nameText"text=""/> 22<mx:Buttonxmx:Buttonx="102"y="153"label="動態(tài)綁定"id="btn"click="onClick()"/> 23</mx:Application>
以上是“Flex數(shù)據(jù)綁定的方式有哪些”這篇文章的所有內容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內容對大家有所幫助,如果還想學習更多知識,歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道!
本文標題:Flex數(shù)據(jù)綁定的方式有哪些
分享URL:http://jinyejixie.com/article12/iicsdc.html
成都網站建設公司_創(chuàng)新互聯(lián),為您提供網站設計、軟件開發(fā)、網站改版、微信小程序、網站導航、網站收錄
聲明:本網站發(fā)布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創(chuàng)新互聯(lián)