<rt id="bn8ez"></rt>
<label id="bn8ez"></label>

  • <span id="bn8ez"></span>

    <label id="bn8ez"><meter id="bn8ez"></meter></label>

    隨筆 - 8  文章 - 55  trackbacks - 0
    <2025年5月>
    27282930123
    45678910
    11121314151617
    18192021222324
    25262728293031
    1234567

    常用鏈接

    留言簿(6)

    隨筆分類

    隨筆檔案

    文章分類

    文章檔案

    朋友的Blog

    最新評論

    閱讀排行榜

    評論排行榜

    MX 2004 數據綁定[高級]
    本文作者:Mizarli
    文章出處:ultrashock
    文章性質:翻譯
    閱讀次數:5854
    發布時間:2005-01-18
    聲明:本譯文只供個人學習參考之用;本文所有權屬于ultrashock所有,英文原版鏈接為:http://www.ultrashock.com/tutorials/flashmx2004/databinding.php
    由于水平有限,其中難免有誤,請多多包涵!如要轉載請通知本站,謝謝合作!

    討論及源文件這里:http://www.webstudio.com.cn/forum/showthread.php?p=86#post86

    創世之初...
    創世之初上帝創造了天空和大地。當時大地是無定形的、方塊的,所以上帝創造了Flash并發現它用起來還不錯。那是第一天的事了。到了第四天,上帝已經不滿足于普通的動畫了,所以他引入了ActionScript。到了第五天,上帝摒棄了舊式的ActionScript并重新開始構建,但僅僅是使AS更規范了些。到了第六天,AS得到了補充并且上帝創造了組件。后來,上帝發現組件很孤獨就創造了數據流,通過它,組件可以被綁定在一起,分享數據綜合的樂趣。第七天,上帝打算休息了,但在發明了Flash甚至更好的是在創作環境中整合了數據綁定功能和整齊的組件構架。

    那么,什么是數據綁定呢?
    也許你已經認識到:數據綁定對于Flash來說已經不是新特性了,但是自從加強了對FlashMX的改善后,已經有了極大的提高。簡單地說,數據綁定是一種簡單的方法——不費太多功夫,就可以把你的數據捆綁在一起。你可以協調不同用UI(user interface)組件的屬性,甚至可以通過數據組件把它們與服務器端的數據相連。數據綁定不需要懂得復雜的AS或者懂得操作XML,而是把這項操作減小到用簡單的“點擊”操作就能完成。數據綁定是快速應用程序開發(RAD)的一個關鍵的特性也是原型開發的利器。

    點對點(point-and-click)數據綁定本質上是通過運行時數據綁定應用程序接口(API)實現的。假如在你的影片里包含了需要的資源,你也可以通過腳本來訪問它。這僅僅需要復制公用庫里的數據綁定類符號(Data Binding Classes),可以在Flash菜單中找到它:
    窗口——其他面板——公用庫——類。這是最好的方法,如果你僅需要建立到動態內容的綁定或者僅僅喜歡在代碼環境下工作。然而,我們現在關注的是可視化的界面。

    在開始之前,在這里請先下載源文件并解壓縮到一個新目錄中。

    尋找你的方向

    開始吧!讓我們來看看用來實現數據綁定的新面板。開始時會有點心慌,但我們將很快適應它。我已經把它們布置好了,以組件面板開始,結束于組件檢查器中的“架構標簽”。別多想,繼續學習!

          
                              組件面板                     組件檢查器:參數標簽
        
                            組件檢視面板:綁定標簽          組件檢視面板:架構標簽

    基本的組件

    既然組件面板讓我們有點慌亂,那就從這開始學習吧。我們要建立一個非常簡單的在兩個單選按鈕(CheckBox)之間的綁定,像這樣:演示
    單點每個單選按鈕時,你會發現另外一個也發生了同樣的變化。這就是我們要達到的目的。
    1、    從組件面板拖拽出兩個單選按鈕,分別給這兩個實例命名為checkBox1和checkBox2 ;
    2、    打開組件面板的“綁定”標簽,然后選擇checkBox1,這時的面板應該是空的,因為還沒有建立任何綁定;
    3、    點擊按鈕,會彈出“添加綁定”面板;
    4、    我們要綁定的是已選的checkBox的selected屬性,所以點擊名為“selected:Boolean”即可,然后點擊“OK”;


    5、    在綁定標簽下顯示了一個新建的綁定。現在我們把它和其他對象連接起來。雙擊參數列表中的“bound to”參數的空白區(會有“綁定到”窗口彈出),通過選擇“組件路徑”checkBox2的“架構位置” selected屬性,完成綁定,如下所示:


    6、    好了,測試你的影片吧!

    盡管看起來不錯,但是還不是很嚴密的。有一個面板我們還沒看到。最使人煩亂的“架構”標簽。組件的架構標簽是對組件數據結構的一個概括。在一個單選按鈕的情況下,是最簡單的,默認為一個屬性——決定它是被選中還是未被選中。你可以看到“selected”字樣顯示在剛建立的單選按鈕的列表里。源文件名為CheckBoxes.fla

    架構
    使用架構面板,我們不會受限制于默認條件。我們可以在這加入新的屬性,并且這些屬性是可控的有用的。通常這不用做太多,因為屬性并不意味任何東西,但事實上你可以建立更多的組件屬性來提供數據綁定。

    第二個例子,我們要綁定兩個單選按鈕,不過這次綁定一個組件的“可用”屬性,用它來激活另一個組件。:演示

    注意選擇或者取消選擇單選按鈕1可以激活或不激活單選按鈕2。這更有用處。你可以用這樣的功能,在表單中根據用戶的選擇來激活或者不激活表單中的其他部分。讓我們開始吧。

    1、    開始前去掉例1中已綁定的選項,選擇任何一個單選按鈕,然后選擇綁定標簽,單擊 按鈕;
    2、    選擇組件實例“checkBox2”,點擊架構標簽,點擊 增加一個新屬性;
    3、    在架構面板下會有很多信息顯示出來,但是別擔心,本例中不需要太多的設置。僅僅設置“field name”參數為“enabled”,“data type”參數為“Boolean”。

    4、    現在象前面所做的一樣,建立幫定。不過這回是綁定單選按鈕1的“selected”屬性到單選按鈕2的“enabled”屬性上,測試一下!

    是不是目前所有的數據都是基于XML呢?

    是的!所以要熟悉它,否則就有被淘汰的可能!除XML以外其他的方法都會在數據綁定上遇到困難!接下來,我們將引入XML架構,然后從外部的XML文件移植數據做菜單條,用XMLConnector組件。

    首先你應該知道菜單條組件,實際上有許多XML驅動的組件(比如菜單、菜單條、目錄樹),只是XML節點的名字被忽略了,僅僅使用了XML的屬性。下面就是一個XML文件例子:
    代碼:
     
    <menu>
        <menu-title label="file">
            <menu-item label="load" />
            <menu-item label="save" />
            <menu-item label="print" />
        </menu-title>
        <menu-title label="edit">
            <menu-item label="cut" />
            <menu-item label="copy" />
            <menu-item label="paste" />
            <menu-item label="sub-menu">
                <menu-item label="nothing here" />
            </menu-item>
        </menu-title>
    </menu>
     

    xmlMenu.swf文件演示
    演示

    架構面板將給我們帶來的更多的便利。我們將用XMLConnector組件載入數據,而用架構面板指引菜單引用相應部分的XML文件。

    1、    首先,我們需要在舞臺上放置一個菜單條組件Menu和一個XMLConnector組件,分別為組件實例命名menuBar和xmlConnector。你可以把XMLConnector組件放在舞臺的任意位置,因為發布時,它是不可見的;
    2、    接下來,需要設置XMLConnector組件來加載數據。要達到這個目的,請在組件參數面板中使用如下的設置:

    menu.xml是XML文件名,請注意在direction參數設置為receive,因為這是一個靜態的XML文檔;
    3、    接下來增加些智能化設置。我們用架構面板來告訴XMLConnector,什么樣的XML文件是可以接受的。確定XMLConnector組件處在被選擇狀態,打開組件屬性檢查器的架構標簽;
    4、    選擇架構標簽下的“results”屬性,因為數據將加載到這里。點擊[IMAGES]http://www.ultrashock.com/tutorials/flashmx2004/images-databinding/import_schema_button.gif[IMAGES] 按鈕導入一個XML架構,導航欄中選擇“menu.xml”文件,選擇打開選項。你的架構面板看起來將會是如下的樣子:

    所有這些信息是為了說明你的XML文檔的結構。Flash會發現重復的元素并將它們視為數組,Flash也偵查象這樣的值“true”或者“1”并把它們做為Boolean或 Number類型的值。現在我們只對根節點和菜單感興趣;
    5、    選擇 menuBar組件并打開屬性檢查器的綁定標簽。menuBar組件默認有一個可綁定屬性、數據源屬性;
    6、    增加一個到數據源的綁定,象我們在例2中做的那樣:

                                              選擇菜單節點,數據綁定完成

    7、    還有件事我們還沒有做:加載XML文檔;只需要在主時間線放一小段代碼:
    xmlConnector.trigger();
    8、    測試影片吧!

    數組和索引
    現在,大部分的數據綁定是使用數組完成的,這是通過基于列表的組件(比如List組件、DataGrid組件或ComboBox組件)完成的。Flash可以探測到XML架構中重復的節點,并且把它們作為一個數組來處理。作為示范,我們將建立一個小的簡單的應用程序,它
    用來顯示家務活的值班表。
    selectIndex.swf文件演示在這里
    演示

    以下是驅動這一程序的XML 代碼:
    代碼:
     
    <chores title="House Work Rota">
    <day label="monday">
      <job description="dishes" person="john" time="15 mins" />
      <job description="cooking" person="sam" time="1 hour" />
      <job description="walking dog" person="david" time="30 mins" />
      <job description="laying the table" person="peter" time="5 mins" />
      <job description="slacking off" person="elisabeth" time="all day" />
      </day>
    <day label="tuesday">
      <job description="dishes" person="david" time="25 mins" />
      <job description="cooking" person="peter" time="1 hour" />
      <job description="walking dog" person="sam" time="20 mins" />
      <job description="laying the table" person="john" time="15 mins" />
      <job description="slacking off" person="elisabeth" time="all day" />
      </day>
    <day label="wednesday">
      <job description="dishes" person="sam" time="20 mins" />
      <job description="cooking" person="david" time="1 hour" />
      <job description="walking dog" person="peter" time="30 mins" />
      <job description="laying the table" person="john" time="15 mins" />
      <job description="slacking off" person="elisabeth" time="all day" />
      </day>
    <day label="thursday">
      <job description="dishes" person="peter" time="3 hours" />
      <job description="cooking" person="john" time="1 hour" />
      <job description="walking dog" person="david" time="30 mins" />
      <job description="laying the table" person="sam" time="10 mins" />
      <job description="slacking off" person="elisabeth" time="all day" />
      </day>
    <day label="friday">
      <job description="dishes" person="sam" time="20 mins" />
      <job description="cooking" person="sam" time="1 hour" />
      <job description="walking dog" person="peter" time="20 mins" />
      <job description="laying the table" person="sam" time="5 mins" />
      <job description="slacking off" person="elisabeth" time="all day" />
      </day>
    <day label="saturday">
      <job description="dishes" person="john" time="1 hour" />
      <job description="cooking" person="john" time="1 hour" />
      <job description="walking dog" person="david" time="30 mins" />
      <job description="clean car" person="sam" time="30 mins" />
      <job description="laying the table" person="david" time="10 mins" />
      <job description="slacking off" person="elisabeth" time="all day" />
      </day>
    <day label="sunday">
      <job description="dishes" person="peter" time="20 mins" />
      <job description="cooking" person="david" time="1 hour" />
      <job description="walking dog" person="peter" time="20 mins" />
      <job description="laying the table" person="john" time="5 mins" />
      <job description="slacking off" person="elisabeth" time="all day" />
      </day>
      </chores>
     

    那么我們從哪里入手呢?
    首先導入我們的XML架構,在舞臺上放置一個XMLConnector組件實例(并命名,因為沒有命名的組件實例是不允許進行綁定的),導入文件“chores2.xml”——確認把它導入到results參數里而不是其他參數;接下來我們要綁定驅動應用程序的數據到comboBox組件上。注意XML的屬性——存儲一周中的每一天作為標簽。這會是很便利的,因為這正是comboBox組件需要的,但通常這不是最好的習慣。我們將在名字為“格式化”的部分看到更適合的用法。

    綁定comboBox的數據驅動程序到XML文檔源:
    1、新建comboBox組件實例,并命名;
    2、選擇列表框組件,打開組件檢查器的綁定標簽;
    3、在數據驅動程序屬性中新建一個綁定;
    4、點擊“Bound To”域,指向XMLConnector組件,從構架中選擇天數的數組day:Array

    接下來,我們需要配置數據柵格DataGrid組件和XML數據源。這有點復雜因為整個數據源需要改變——無論列表框中日期選擇了哪一天。如果比較XML文檔和Flash解釋的XML架構,你會發現它的結構象一個嵌套的數組。在“天數數組”day的每一天包括一個“工作數組”job。既然每個東西在架構中只提及一次,我們下一步就使用架構來綁定day數組中的N個索引的job數組。現在你獨立可以完成這一步了;在XMLConnector架構中,用DataGrid組件實例的dataProvider屬性綁定job數組節點。
    到目前為止,我們還不能說job數組已經綁定到實際的XML文檔里,事實上,有7個選擇——而我們只綁定了第N天的數組;但是Flash在確定N的取值時,有個秘密。
    1、    再次選擇XMLConnector并打開綁定標簽;
    2、    選擇從job數組到dataGrid組件實例的綁定——results.chores.day.[n].job。你也許注意到一個新的參數Index for ‘day’已經出現在底端。這個參數讓我們指定day數組的索引值。在這里你可以輸入一個值,但是我們想讓它隨comboBox組件實例的選項而變化。本質上,在其他的可綁定的屬性上都可以這么用,所以我們僅僅把它和comboBox組件實例的selectedIndex屬性綁定在一起,就象我們所做過的其他綁定一樣——雙擊Index for ‘day’參數的空白值區,彈出綁定索引窗口,取消使用常數值選項,選擇“組件路徑”ComboBox的“架構位置”selectedIndex:Number選項。

    3、    測試影片好了吧。
    格式化
    好了!我們已經知道怎樣從一個組件中得到一個值并且把這個值放在另外一個組件中。但是這通常是不夠的。有時我們需要在組件中的數據以不同方式展現;有時需要兩個組件展示不同的數據。
    我們用格式化來實現這個目標。有幾個內建的格式化工具你可以選擇,同時你也可以自定義的格式,用AS2類。你可以選擇在選擇綁定時選擇格式化工具并且從列表中選擇它們。選擇自定義的格式需要用到你自己的類。


    我們以內建的格式開始,比如

    Boolean(布爾值)

    也許是最簡單的內建格式化方式。它僅僅是一個布爾值(或真或假)并且輸出一個字符串。你可以通過真或假來選擇要描述的值——在格式化選項中。
    Bool_formatter.swf演示

    Compose String(排列字符串)
    轉換一個對象的域,形成單個字符串。你可以結合任何數量的域,也可以插入其他的字符。建立一個字符串模板,選擇格式化選項并鍵入字符串。你也可以放置任何文本在這里,但是任何在”<>”表示符中的內容將被做為一個域來處理。如果對象有子對象(比如XML)那么,你可以使用它們——通過點語法來獲得它們的路徑。字符串模板的例子如下:
    Compose_formatter.swf演示

    Date(日期)
    把日期轉換成字符串,簡單的模板如“MM/DD/YYYY”。允許的格式“M”(月份),“D”(日期),“Y”(年份),“H”(小時),“N”(分鐘)和“S”(秒)。你可以用格式化工具反向格式化字符串為日期,但是由于某種原因,這種做法僅僅用在雙向綁定中。
    Date_formatter.swf演示

    Number (數字)
    非常簡單的格式化選項。可以顯示十進制的數字。
    Number_formatter.swf演示

    Rearrange Fields (重新排列的域)
    讓你可以協調域,比如一個組件的數據源中的域名和另一個組件數據源的域名不同的情況下。域是以列表的形式成對出現在格式化選項中。比如一個簡單的字符串:”label=name;data=colour;otherField=yetAnotherField”。這對于顯示數據很有用,比如以下拉列表框和列表框顯示數據;相應改變組件標簽域屬性,可以用重新排列的域格式化你想顯示的作為標簽的域。在這個例子中,一些XML文件已經加載了,用來移植到下拉列表框和它的域(重新排列的),所以名稱屬性被用作標簽。
    Rearrange_formatter.swf演示

    Custom Formatter(自定義格式化)
    要自定義格式,需要定義一個很簡單的類,它有兩個方法:格式化和非格式化,為每種類型提供一個依據,并且可以返回任何東西。在這個例子中,類格式化數字為英鎊符號:
    代碼:
     
    // class used to convert numbers to sterling currency and back again
    class SterlingFormatter {

        // turns a number into a string
        function format (data:Number) : String{
            var currency:String;
            var pounds:Number = Math.floor(data);
            var pence:Number = Math.round((data - pounds)*100);
            var poundsStr:String = String(pounds);
            var penceStr:String;
            if(pence<10){
                penceStr = "0" + String(pence);
            }else{
                penceStr = String(pence);
            }
            currency = "&pound;" + pounds + "." + penceStr;
            return currency;
         }

        // removes sterling format and returns a number
        function unformat (data:String) : Number {
            var str:String = data.substr(1);
            var num:Number = parseFloat(str);
            return num;
         }
    }
     

    鍵入一個數值在左邊,看看有邊會有什么格式產生
    Custom_formatter.swf演示

    局限、防范、實踐
    創作時的數據綁定是基于mc路徑的,這將帶來一些局限和危險。主要的問題是當你建立一個在兩個組件之間的綁定時,這兩個組件的實例必須被唯一的標識,而且這也依賴它們的路徑。因此,如果你改變了一個組件的路徑,之后再提供綁定,將會丟失這個綁定。盡管我已經注意到你可以安全的改變組件實例的名字不必改變它們的綁定。
    通常,在運行時,組件可以從絕對路徑上解決綁定問題。但是如果你提供到一個舞臺上不存在的mc的綁定,綁定將從可以被識別的mc中選擇“最遠的”。問題是同樣的mc將被不同的解釋,如果該mc是在舞臺上編輯過的或者在庫中編輯的。要避免混亂、沖突、遺失已完成的內容,你需要遵循如下的指導方針:
    1、    不要對這樣的mc使用綁定:即在創作過程中加到舞臺上,又使用了動態附加的;
    2、    不要對舞臺上選擇了“編輯”過的符號提供數據綁定。使用“本地編輯”保護mc的內部結構關系;
    3、    在加入綁定之前,謹慎的規劃你的應用程序,如果程序很復雜的話。當你覺悟到因為所有的組件嵌套在一個mc里而使所有的綁定失去了作用,將是一件無法啟齒的錯誤。
    4、    如果要將應用程序動態的加載到其他的影片里,使用 _level替代影片的target。

    總的說來,以上的講解只是引導你用窗體建立最簡單的應用程序的開始,你還要添加很多的場景和組件。使場景都這場運轉起來后再加入數據綁定。最后一點要說明(有點討厭但它也確實是個尖銳的問題,在很多情況都會發生)。

    如果你已經看過源文件,你就會發現我在引導層加入了一些箭頭符號。這對于簡單的綁定來說無關緊要,但是一些復雜的系統綁定是很難跟蹤的,所以我提倡這樣做:用最原始的“文檔”來說明你在做著什么。用語言來描述你所做的綁定是比較困難的,但是圖示可以很只管的表達綁定的意思。如果一些東西需要比較詳細的說明,那么在一個引導層用文本來注釋是很有幫助的。這些箭頭不是正是的符號,重要的是可以保留一些對將要發生的事情的暗示。

    結束
    數據綁定在MX2004中是個重要的主題,并且有很多方面我還沒有涵蓋到,包括運行時的API和身份認證。這本身就是個主題,但是很值得掌握——它涵蓋了很多的功能,你可以節省很多的時間和精力,不用重新構建它。

    然而你也許不會選擇數據綁定面板來開發企業級應用程序,你也許直接會用運行時的API。但是數據綁定面板可以快速的提供一個原型或小型應用程序,因為它們提供了非常簡單的方法來構建復雜的數據交互。身份認證和格式化都可以通過AS2實現可擴展功能,是沒有限制的。

    討論及源文件這里:http://www.webstudio.com.cn/forum/showthread.php?p=86#post86
    posted on 2006-05-09 13:53 blog搬家了--[www.ialway.com/blog] 閱讀(308) 評論(0)  編輯  收藏 所屬分類: AS2.0
    主站蜘蛛池模板: 久章草在线精品视频免费观看| 亚洲精品无码久久| 国内少妇偷人精品视频免费| 亚洲高清无码专区视频| 国产综合激情在线亚洲第一页 | 无码欧精品亚洲日韩一区夜夜嗨 | 免费91麻豆精品国产自产在线观看| 四虎亚洲国产成人久久精品| 美女18一级毛片免费看| 五月婷婷亚洲综合| 一级毛片免费播放试看60分钟| 亚洲国产婷婷综合在线精品| 丁香六月婷婷精品免费观看 | 亚洲影院在线观看| 37pao成人国产永久免费视频| 亚洲AV无码专区国产乱码4SE| 无码日韩精品一区二区三区免费| 亚洲国产精品久久久久网站 | 色视频色露露永久免费观看| 国产精品自拍亚洲| 国产偷窥女洗浴在线观看亚洲| 国产在线观看xxxx免费| 久久精品国产亚洲AV无码麻豆 | 亚洲国产精品日韩在线| 日本在线看片免费| 久久久无码精品亚洲日韩京东传媒| 18级成人毛片免费观看| 亚洲综合小说另类图片动图| 国产精品二区三区免费播放心| 亚洲阿v天堂在线2017免费| 亚洲成在人天堂在线| 丁香花在线观看免费观看| 羞羞视频在线免费观看| 精品国产亚洲一区二区三区 | 黄色三级三级免费看| 亚洲av永久无码精品漫画| 国产2021精品视频免费播放| 亚洲AV成人无码网天堂| 国产aⅴ无码专区亚洲av| 97碰公开在线观看免费视频| 精品久久久久久亚洲中文字幕|