MX 2004 數(shù)據(jù)綁定[高級(jí)] | ||||||||||||
本文作者:Mizarli 文章出處:ultrashock 文章性質(zhì):翻譯 閱讀次數(shù):5854 發(fā)布時(shí)間:2005-01-18 |
||||||||||||
聲明:本譯文只供個(gè)人學(xué)習(xí)參考之用;本文所有權(quán)屬于ultrashock所有,英文原版鏈接為:http://www.ultrashock.com/tutorials/flashmx2004/databinding.php 由于水平有限,其中難免有誤,請(qǐng)多多包涵!如要轉(zhuǎn)載請(qǐng)通知本站,謝謝合作! 討論及源文件這里:http://www.webstudio.com.cn/forum/showthread.php?p=86#post86 創(chuàng)世之初... 創(chuàng)世之初上帝創(chuàng)造了天空和大地。當(dāng)時(shí)大地是無(wú)定形的、方塊的,所以上帝創(chuàng)造了Flash并發(fā)現(xiàn)它用起來(lái)還不錯(cuò)。那是第一天的事了。到了第四天,上帝已經(jīng)不滿足于普通的動(dòng)畫了,所以他引入了ActionScript。到了第五天,上帝摒棄了舊式的ActionScript并重新開始構(gòu)建,但僅僅是使AS更規(guī)范了些。到了第六天,AS得到了補(bǔ)充并且上帝創(chuàng)造了組件。后來(lái),上帝發(fā)現(xiàn)組件很孤獨(dú)就創(chuàng)造了數(shù)據(jù)流,通過(guò)它,組件可以被綁定在一起,分享數(shù)據(jù)綜合的樂趣。第七天,上帝打算休息了,但在發(fā)明了Flash甚至更好的是在創(chuàng)作環(huán)境中整合了數(shù)據(jù)綁定功能和整齊的組件構(gòu)架。 那么,什么是數(shù)據(jù)綁定呢? 也許你已經(jīng)認(rèn)識(shí)到:數(shù)據(jù)綁定對(duì)于Flash來(lái)說(shuō)已經(jīng)不是新特性了,但是自從加強(qiáng)了對(duì)FlashMX的改善后,已經(jīng)有了極大的提高。簡(jiǎn)單地說(shuō),數(shù)據(jù)綁定是一種簡(jiǎn)單的方法——不費(fèi)太多功夫,就可以把你的數(shù)據(jù)捆綁在一起。你可以協(xié)調(diào)不同用UI(user interface)組件的屬性,甚至可以通過(guò)數(shù)據(jù)組件把它們與服務(wù)器端的數(shù)據(jù)相連。數(shù)據(jù)綁定不需要懂得復(fù)雜的AS或者懂得操作XML,而是把這項(xiàng)操作減小到用簡(jiǎn)單的“點(diǎn)擊”操作就能完成。數(shù)據(jù)綁定是快速應(yīng)用程序開發(fā)(RAD)的一個(gè)關(guān)鍵的特性也是原型開發(fā)的利器。 點(diǎn)對(duì)點(diǎn)(point-and-click)數(shù)據(jù)綁定本質(zhì)上是通過(guò)運(yùn)行時(shí)數(shù)據(jù)綁定應(yīng)用程序接口(API)實(shí)現(xiàn)的。假如在你的影片里包含了需要的資源,你也可以通過(guò)腳本來(lái)訪問它。這僅僅需要復(fù)制公用庫(kù)里的數(shù)據(jù)綁定類符號(hào)(Data Binding Classes),可以在Flash菜單中找到它: 窗口——其他面板——公用庫(kù)——類。這是最好的方法,如果你僅需要建立到動(dòng)態(tài)內(nèi)容的綁定或者僅僅喜歡在代碼環(huán)境下工作。然而,我們現(xiàn)在關(guān)注的是可視化的界面。 在開始之前,在這里請(qǐng)先下載源文件并解壓縮到一個(gè)新目錄中。 尋找你的方向 開始吧!讓我們來(lái)看看用來(lái)實(shí)現(xiàn)數(shù)據(jù)綁定的新面板。開始時(shí)會(huì)有點(diǎn)心慌,但我們將很快適應(yīng)它。我已經(jīng)把它們布置好了,以組件面板開始,結(jié)束于組件檢查器中的“架構(gòu)標(biāo)簽”。別多想,繼續(xù)學(xué)習(xí)! ![]() ![]() 組件面板 組件檢查器:參數(shù)標(biāo)簽 ![]() ![]() 組件檢視面板:綁定標(biāo)簽 組件檢視面板:架構(gòu)標(biāo)簽 基本的組件 既然組件面板讓我們有點(diǎn)慌亂,那就從這開始學(xué)習(xí)吧。我們要建立一個(gè)非常簡(jiǎn)單的在兩個(gè)單選按鈕(CheckBox)之間的綁定,像這樣:演示 單點(diǎn)每個(gè)單選按鈕時(shí),你會(huì)發(fā)現(xiàn)另外一個(gè)也發(fā)生了同樣的變化。這就是我們要達(dá)到的目的。 1、 從組件面板拖拽出兩個(gè)單選按鈕,分別給這兩個(gè)實(shí)例命名為checkBox1和checkBox2 ; 2、 打開組件面板的“綁定”標(biāo)簽,然后選擇checkBox1,這時(shí)的面板應(yīng)該是空的,因?yàn)檫€沒有建立任何綁定; 3、 點(diǎn)擊 ![]() 4、 我們要綁定的是已選的checkBox的selected屬性,所以點(diǎn)擊名為“selected:Boolean”即可,然后點(diǎn)擊“OK”; ![]() 5、 在綁定標(biāo)簽下顯示了一個(gè)新建的綁定。現(xiàn)在我們把它和其他對(duì)象連接起來(lái)。雙擊參數(shù)列表中的“bound to”參數(shù)的空白區(qū)(會(huì)有“綁定到”窗口彈出),通過(guò)選擇“組件路徑”checkBox2的“架構(gòu)位置” selected屬性,完成綁定,如下所示: ![]() ![]() 6、 好了,測(cè)試你的影片吧! 盡管看起來(lái)不錯(cuò),但是還不是很嚴(yán)密的。有一個(gè)面板我們還沒看到。最使人煩亂的“架構(gòu)”標(biāo)簽。組件的架構(gòu)標(biāo)簽是對(duì)組件數(shù)據(jù)結(jié)構(gòu)的一個(gè)概括。在一個(gè)單選按鈕的情況下,是最簡(jiǎn)單的,默認(rèn)為一個(gè)屬性——決定它是被選中還是未被選中。你可以看到“selected”字樣顯示在剛建立的單選按鈕的列表里。源文件名為CheckBoxes.fla 架構(gòu) 使用架構(gòu)面板,我們不會(huì)受限制于默認(rèn)條件。我們可以在這加入新的屬性,并且這些屬性是可控的有用的。通常這不用做太多,因?yàn)閷傩圆⒉灰馕度魏螙|西,但事實(shí)上你可以建立更多的組件屬性來(lái)提供數(shù)據(jù)綁定。 第二個(gè)例子,我們要綁定兩個(gè)單選按鈕,不過(guò)這次綁定一個(gè)組件的“可用”屬性,用它來(lái)激活另一個(gè)組件。:演示 注意選擇或者取消選擇單選按鈕1可以激活或不激活單選按鈕2。這更有用處。你可以用這樣的功能,在表單中根據(jù)用戶的選擇來(lái)激活或者不激活表單中的其他部分。讓我們開始吧。 1、 開始前去掉例1中已綁定的選項(xiàng),選擇任何一個(gè)單選按鈕,然后選擇綁定標(biāo)簽,單擊 ![]() 2、 選擇組件實(shí)例“checkBox2”,點(diǎn)擊架構(gòu)標(biāo)簽,點(diǎn)擊 ![]() 3、 在架構(gòu)面板下會(huì)有很多信息顯示出來(lái),但是別擔(dān)心,本例中不需要太多的設(shè)置。僅僅設(shè)置“field name”參數(shù)為“enabled”,“data type”參數(shù)為“Boolean”。 ![]() 4、 現(xiàn)在象前面所做的一樣,建立幫定。不過(guò)這回是綁定單選按鈕1的“selected”屬性到單選按鈕2的“enabled”屬性上,測(cè)試一下! 是不是目前所有的數(shù)據(jù)都是基于XML呢? 是的!所以要熟悉它,否則就有被淘汰的可能!除XML以外其他的方法都會(huì)在數(shù)據(jù)綁定上遇到困難!接下來(lái),我們將引入XML架構(gòu),然后從外部的XML文件移植數(shù)據(jù)做菜單條,用XMLConnector組件。 首先你應(yīng)該知道菜單條組件,實(shí)際上有許多XML驅(qū)動(dòng)的組件(比如菜單、菜單條、目錄樹),只是XML節(jié)點(diǎn)的名字被忽略了,僅僅使用了XML的屬性。下面就是一個(gè)XML文件例子:
xmlMenu.swf文件演示 演示 架構(gòu)面板將給我們帶來(lái)的更多的便利。我們將用XMLConnector組件載入數(shù)據(jù),而用架構(gòu)面板指引菜單引用相應(yīng)部分的XML文件。 1、 首先,我們需要在舞臺(tái)上放置一個(gè)菜單條組件Menu和一個(gè)XMLConnector組件,分別為組件實(shí)例命名menuBar和xmlConnector。你可以把XMLConnector組件放在舞臺(tái)的任意位置,因?yàn)榘l(fā)布時(shí),它是不可見的; 2、 接下來(lái),需要設(shè)置XMLConnector組件來(lái)加載數(shù)據(jù)。要達(dá)到這個(gè)目的,請(qǐng)?jiān)诮M件參數(shù)面板中使用如下的設(shè)置: ![]() menu.xml是XML文件名,請(qǐng)注意在direction參數(shù)設(shè)置為receive,因?yàn)檫@是一個(gè)靜態(tài)的XML文檔; 3、 接下來(lái)增加些智能化設(shè)置。我們用架構(gòu)面板來(lái)告訴XMLConnector,什么樣的XML文件是可以接受的。確定XMLConnector組件處在被選擇狀態(tài),打開組件屬性檢查器的架構(gòu)標(biāo)簽; 4、 選擇架構(gòu)標(biāo)簽下的“results”屬性,因?yàn)閿?shù)據(jù)將加載到這里。點(diǎn)擊[IMAGES]http://www.ultrashock.com/tutorials/flashmx2004/images-databinding/import_schema_button.gif[IMAGES] 按鈕導(dǎo)入一個(gè)XML架構(gòu),導(dǎo)航欄中選擇“menu.xml”文件,選擇打開選項(xiàng)。你的架構(gòu)面板看起來(lái)將會(huì)是如下的樣子: ![]() 所有這些信息是為了說(shuō)明你的XML文檔的結(jié)構(gòu)。Flash會(huì)發(fā)現(xiàn)重復(fù)的元素并將它們視為數(shù)組,F(xiàn)lash也偵查象這樣的值“true”或者“1”并把它們做為Boolean或 Number類型的值。現(xiàn)在我們只對(duì)根節(jié)點(diǎn)和菜單感興趣; 5、 選擇 menuBar組件并打開屬性檢查器的綁定標(biāo)簽。menuBar組件默認(rèn)有一個(gè)可綁定屬性、數(shù)據(jù)源屬性; 6、 增加一個(gè)到數(shù)據(jù)源的綁定,象我們?cè)诶?中做的那樣: ![]() 選擇菜單節(jié)點(diǎn),數(shù)據(jù)綁定完成 7、 還有件事我們還沒有做:加載XML文檔;只需要在主時(shí)間線放一小段代碼: xmlConnector.trigger(); 8、 測(cè)試影片吧! 數(shù)組和索引 現(xiàn)在,大部分的數(shù)據(jù)綁定是使用數(shù)組完成的,這是通過(guò)基于列表的組件(比如List組件、DataGrid組件或ComboBox組件)完成的。Flash可以探測(cè)到XML架構(gòu)中重復(fù)的節(jié)點(diǎn),并且把它們作為一個(gè)數(shù)組來(lái)處理。作為示范,我們將建立一個(gè)小的簡(jiǎn)單的應(yīng)用程序,它 用來(lái)顯示家務(wù)活的值班表。 selectIndex.swf文件演示在這里 演示 以下是驅(qū)動(dòng)這一程序的XML 代碼:
那么我們從哪里入手呢? 首先導(dǎo)入我們的XML架構(gòu),在舞臺(tái)上放置一個(gè)XMLConnector組件實(shí)例(并命名,因?yàn)闆]有命名的組件實(shí)例是不允許進(jìn)行綁定的),導(dǎo)入文件“chores2.xml”——確認(rèn)把它導(dǎo)入到results參數(shù)里而不是其他參數(shù);接下來(lái)我們要綁定驅(qū)動(dòng)應(yīng)用程序的數(shù)據(jù)到comboBox組件上。注意XML的屬性——存儲(chǔ)一周中的每一天作為標(biāo)簽。這會(huì)是很便利的,因?yàn)檫@正是comboBox組件需要的,但通常這不是最好的習(xí)慣。我們將在名字為“格式化”的部分看到更適合的用法。 綁定comboBox的數(shù)據(jù)驅(qū)動(dòng)程序到XML文檔源: 1、新建comboBox組件實(shí)例,并命名; 2、選擇列表框組件,打開組件檢查器的綁定標(biāo)簽; 3、在數(shù)據(jù)驅(qū)動(dòng)程序?qū)傩灾行陆ㄒ粋€(gè)綁定; 4、點(diǎn)擊“Bound To”域,指向XMLConnector組件,從構(gòu)架中選擇天數(shù)的數(shù)組day:Array ![]() 接下來(lái),我們需要配置數(shù)據(jù)柵格DataGrid組件和XML數(shù)據(jù)源。這有點(diǎn)復(fù)雜因?yàn)檎麄€(gè)數(shù)據(jù)源需要改變——無(wú)論列表框中日期選擇了哪一天。如果比較XML文檔和Flash解釋的XML架構(gòu),你會(huì)發(fā)現(xiàn)它的結(jié)構(gòu)象一個(gè)嵌套的數(shù)組。在“天數(shù)數(shù)組”day的每一天包括一個(gè)“工作數(shù)組”job。既然每個(gè)東西在架構(gòu)中只提及一次,我們下一步就使用架構(gòu)來(lái)綁定day數(shù)組中的N個(gè)索引的job數(shù)組。現(xiàn)在你獨(dú)立可以完成這一步了;在XMLConnector架構(gòu)中,用DataGrid組件實(shí)例的dataProvider屬性綁定job數(shù)組節(jié)點(diǎn)。 到目前為止,我們還不能說(shuō)job數(shù)組已經(jīng)綁定到實(shí)際的XML文檔里,事實(shí)上,有7個(gè)選擇——而我們只綁定了第N天的數(shù)組;但是Flash在確定N的取值時(shí),有個(gè)秘密。 1、 再次選擇XMLConnector并打開綁定標(biāo)簽; 2、 選擇從job數(shù)組到dataGrid組件實(shí)例的綁定——results.chores.day.[n].job。你也許注意到一個(gè)新的參數(shù)Index for ‘day’已經(jīng)出現(xiàn)在底端。這個(gè)參數(shù)讓我們指定day數(shù)組的索引值。在這里你可以輸入一個(gè)值,但是我們想讓它隨comboBox組件實(shí)例的選項(xiàng)而變化。本質(zhì)上,在其他的可綁定的屬性上都可以這么用,所以我們僅僅把它和comboBox組件實(shí)例的selectedIndex屬性綁定在一起,就象我們所做過(guò)的其他綁定一樣——雙擊Index for ‘day’參數(shù)的空白值區(qū),彈出綁定索引窗口,取消使用常數(shù)值選項(xiàng),選擇“組件路徑”ComboBox的“架構(gòu)位置”selectedIndex:Number選項(xiàng)。 ![]() 3、 測(cè)試影片好了吧。 格式化 好了!我們已經(jīng)知道怎樣從一個(gè)組件中得到一個(gè)值并且把這個(gè)值放在另外一個(gè)組件中。但是這通常是不夠的。有時(shí)我們需要在組件中的數(shù)據(jù)以不同方式展現(xiàn);有時(shí)需要兩個(gè)組件展示不同的數(shù)據(jù)。 我們用格式化來(lái)實(shí)現(xiàn)這個(gè)目標(biāo)。有幾個(gè)內(nèi)建的格式化工具你可以選擇,同時(shí)你也可以自定義的格式,用AS2類。你可以選擇在選擇綁定時(shí)選擇格式化工具并且從列表中選擇它們。選擇自定義的格式需要用到你自己的類。 ![]() 我們以內(nèi)建的格式開始,比如 Boolean(布爾值) 也許是最簡(jiǎn)單的內(nèi)建格式化方式。它僅僅是一個(gè)布爾值(或真或假)并且輸出一個(gè)字符串。你可以通過(guò)真或假來(lái)選擇要描述的值——在格式化選項(xiàng)中。 Bool_formatter.swf演示 Compose String(排列字符串) 轉(zhuǎn)換一個(gè)對(duì)象的域,形成單個(gè)字符串。你可以結(jié)合任何數(shù)量的域,也可以插入其他的字符。建立一個(gè)字符串模板,選擇格式化選項(xiàng)并鍵入字符串。你也可以放置任何文本在這里,但是任何在”<>”表示符中的內(nèi)容將被做為一個(gè)域來(lái)處理。如果對(duì)象有子對(duì)象(比如XML)那么,你可以使用它們——通過(guò)點(diǎn)語(yǔ)法來(lái)獲得它們的路徑。字符串模板的例子如下: Compose_formatter.swf演示 Date(日期) 把日期轉(zhuǎn)換成字符串,簡(jiǎn)單的模板如“MM/DD/YYYY”。允許的格式“M”(月份),“D”(日期),“Y”(年份),“H”(小時(shí)),“N”(分鐘)和“S”(秒)。你可以用格式化工具反向格式化字符串為日期,但是由于某種原因,這種做法僅僅用在雙向綁定中。 Date_formatter.swf演示 Number (數(shù)字) 非常簡(jiǎn)單的格式化選項(xiàng)。可以顯示十進(jìn)制的數(shù)字。 Number_formatter.swf演示 Rearrange Fields (重新排列的域) 讓你可以協(xié)調(diào)域,比如一個(gè)組件的數(shù)據(jù)源中的域名和另一個(gè)組件數(shù)據(jù)源的域名不同的情況下。域是以列表的形式成對(duì)出現(xiàn)在格式化選項(xiàng)中。比如一個(gè)簡(jiǎn)單的字符串:”label=name;data=colour;otherField=yetAnotherField”。這對(duì)于顯示數(shù)據(jù)很有用,比如以下拉列表框和列表框顯示數(shù)據(jù);相應(yīng)改變組件標(biāo)簽域?qū)傩裕梢杂弥匦屡帕械挠蚋袷交阆腼@示的作為標(biāo)簽的域。在這個(gè)例子中,一些XML文件已經(jīng)加載了,用來(lái)移植到下拉列表框和它的域(重新排列的),所以名稱屬性被用作標(biāo)簽。 Rearrange_formatter.swf演示 Custom Formatter(自定義格式化) 要自定義格式,需要定義一個(gè)很簡(jiǎn)單的類,它有兩個(gè)方法:格式化和非格式化,為每種類型提供一個(gè)依據(jù),并且可以返回任何東西。在這個(gè)例子中,類格式化數(shù)字為英鎊符號(hào):
鍵入一個(gè)數(shù)值在左邊,看看有邊會(huì)有什么格式產(chǎn)生 Custom_formatter.swf演示 局限、防范、實(shí)踐 創(chuàng)作時(shí)的數(shù)據(jù)綁定是基于mc路徑的,這將帶來(lái)一些局限和危險(xiǎn)。主要的問題是當(dāng)你建立一個(gè)在兩個(gè)組件之間的綁定時(shí),這兩個(gè)組件的實(shí)例必須被唯一的標(biāo)識(shí),而且這也依賴它們的路徑。因此,如果你改變了一個(gè)組件的路徑,之后再提供綁定,將會(huì)丟失這個(gè)綁定。盡管我已經(jīng)注意到你可以安全的改變組件實(shí)例的名字不必改變它們的綁定。 通常,在運(yùn)行時(shí),組件可以從絕對(duì)路徑上解決綁定問題。但是如果你提供到一個(gè)舞臺(tái)上不存在的mc的綁定,綁定將從可以被識(shí)別的mc中選擇“最遠(yuǎn)的”。問題是同樣的mc將被不同的解釋,如果該mc是在舞臺(tái)上編輯過(guò)的或者在庫(kù)中編輯的。要避免混亂、沖突、遺失已完成的內(nèi)容,你需要遵循如下的指導(dǎo)方針: 1、 不要對(duì)這樣的mc使用綁定:即在創(chuàng)作過(guò)程中加到舞臺(tái)上,又使用了動(dòng)態(tài)附加的; 2、 不要對(duì)舞臺(tái)上選擇了“編輯”過(guò)的符號(hào)提供數(shù)據(jù)綁定。使用“本地編輯”保護(hù)mc的內(nèi)部結(jié)構(gòu)關(guān)系; 3、 在加入綁定之前,謹(jǐn)慎的規(guī)劃你的應(yīng)用程序,如果程序很復(fù)雜的話。當(dāng)你覺悟到因?yàn)樗械慕M件嵌套在一個(gè)mc里而使所有的綁定失去了作用,將是一件無(wú)法啟齒的錯(cuò)誤。 4、 如果要將應(yīng)用程序動(dòng)態(tài)的加載到其他的影片里,使用 _level替代影片的target。 總的說(shuō)來(lái),以上的講解只是引導(dǎo)你用窗體建立最簡(jiǎn)單的應(yīng)用程序的開始,你還要添加很多的場(chǎng)景和組件。使場(chǎng)景都這場(chǎng)運(yùn)轉(zhuǎn)起來(lái)后再加入數(shù)據(jù)綁定。最后一點(diǎn)要說(shuō)明(有點(diǎn)討厭但它也確實(shí)是個(gè)尖銳的問題,在很多情況都會(huì)發(fā)生)。 如果你已經(jīng)看過(guò)源文件,你就會(huì)發(fā)現(xiàn)我在引導(dǎo)層加入了一些箭頭符號(hào)。這對(duì)于簡(jiǎn)單的綁定來(lái)說(shuō)無(wú)關(guān)緊要,但是一些復(fù)雜的系統(tǒng)綁定是很難跟蹤的,所以我提倡這樣做:用最原始的“文檔”來(lái)說(shuō)明你在做著什么。用語(yǔ)言來(lái)描述你所做的綁定是比較困難的,但是圖示可以很只管的表達(dá)綁定的意思。如果一些東西需要比較詳細(xì)的說(shuō)明,那么在一個(gè)引導(dǎo)層用文本來(lái)注釋是很有幫助的。這些箭頭不是正是的符號(hào),重要的是可以保留一些對(duì)將要發(fā)生的事情的暗示。 結(jié)束 數(shù)據(jù)綁定在MX2004中是個(gè)重要的主題,并且有很多方面我還沒有涵蓋到,包括運(yùn)行時(shí)的API和身份認(rèn)證。這本身就是個(gè)主題,但是很值得掌握——它涵蓋了很多的功能,你可以節(jié)省很多的時(shí)間和精力,不用重新構(gòu)建它。 然而你也許不會(huì)選擇數(shù)據(jù)綁定面板來(lái)開發(fā)企業(yè)級(jí)應(yīng)用程序,你也許直接會(huì)用運(yùn)行時(shí)的API。但是數(shù)據(jù)綁定面板可以快速的提供一個(gè)原型或小型應(yīng)用程序,因?yàn)樗鼈兲峁┝朔浅:?jiǎn)單的方法來(lái)構(gòu)建復(fù)雜的數(shù)據(jù)交互。身份認(rèn)證和格式化都可以通過(guò)AS2實(shí)現(xiàn)可擴(kuò)展功能,是沒有限制的。 討論及源文件這里:http://www.webstudio.com.cn/forum/showthread.php?p=86#post86 |