<dl id="3wz6h"></dl><li id="3wz6h"></li>

      1. <dl id="3wz6h"></dl>

      2. <dl id="3wz6h"><ins id="3wz6h"></ins></dl>

            <dl id="3wz6h"></dl>

            <dl id="3wz6h"><ins id="3wz6h"></ins></dl>
            1. 
              
              <output id="3wz6h"><ins id="3wz6h"><nobr id="3wz6h"></nobr></ins></output>

              <li id="3wz6h"><ins id="3wz6h"></ins></li>
              
              

            2. <output id="3wz6h"><ins id="3wz6h"><nobr id="3wz6h"></nobr></ins></output>
              首頁»Flash»Flex4 AS3的簡單綁定總結

              Flex4 AS3的簡單綁定總結

              來源:ituring 發布時間:2013-01-05 閱讀次數:

                Flex開發中,組件的綁定功能是非常強大的,善用綁定,將大大提高開發效率。綁定實質也是事件處理,進一步說,要學好Flex,Flex的事件處理機制一定要理解透徹。接下來就對Flex AS3的簡單綁定做個總結。

                先來看看,不使用綁定時的常規處理方式:

              <?xml version="1.0" encoding="utf-8"?>
              <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
                             xmlns:s="library://ns.adobe.com/flex/spark" 
                             xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
                             fontSize="12" fontFamily="微軟雅黑">
                  <fx:Declarations>
                      <!-- 將非可視元素(例如服務、值對象)放在此處 -->
                  </fx:Declarations>
                  <s:layout>
                      <s:BasicLayout />
                  </s:layout>
                  <s:Group top="30" left="20">
                       <s:layout>
                           <s:HorizontalLayout/>
                       </s:layout>
                      <s:TextInput id="myTextInput1"/>
                      <s:Button label="復制到:" click="myTextInput2.text=myTextInput1.text"/>
                      <s:TextInput id="myTextInput2"/>
                  </s:Group>
              </s:Application>

                效果如下:

                現在來看看使用綁定的3種場景。

                1. 組件內部綁定

              <s:Group top="30" left="20">
                      <s:layout>
                          <s:HorizontalLayout/>
                      </s:layout>
                      <s:TextInput id="myTextInput1"/>
                      <s:TextInput id="myTextInput2" text="{myTextInput1.text}"/>
                  </s:Group>
              

                注意綁定使用花括號標記,效果如下,在第一個TextInput里輸入文字,第二個TextInput自動同步顯示:

                要實現雙向同步綁定,只需這樣:

              <!-- <s:TextInput id="myTextInput1"/> -->
              <s:TextInput id="myTextInput1" text="{myTextInput2.text}"/>
              <s:TextInput id="myTextInput2" text="{myTextInput1.text}"/>

                2. 標簽綁定

                通過標簽<fx:Binding>在組件外部進行綁定,這種方式的優點在于:由于設置在組件的外部進行,代碼修改起來比較方便,只需集中修改就好了。

                  <fx:Binding source="myTextInput1.text" 
                              destination="myTextInput2.text" 
                              twoWay="true"/>
                  <s:Group top="30" left="20">
                      <s:layout>
                           <s:HorizontalLayout/>
                       </s:layout>
                      <s:TextInput id="myTextInput1"/>
                      <s:TextInput id="myTextInput2"/> 
                  </s:Group>
              

                從源(source)到目標(destination)綁定,twoWay屬性設置為true表示雙向同步綁定。

                效果如下:

               3. 變量綁定

                編程過程中將創建很多變量,這些變量也是可以跟組件綁定在一起的,這樣的話,動態生成的數據就能夠同步在對應組件里及時刷新顯示出來。

                可綁定變量要通過Flex的元關鍵字[Bindable]來實現。

                Flex MXML中的元關鍵字主要用途:

              • 用來描述變量、組件和類的額外屬性;
              • 聲明自定義組件所分發的自定義事件。
              <fx:Script>
                      <![CDATA[
                          [Bindable]
                          public var s:String="";
                      ]]>
                  </fx:Script>
                  <s:Group top="30" left="20">
                      <s:layout>
                           <s:HorizontalLayout/>
                       </s:layout>
                      <s:TextInput id="myTextInput1"/>
                      <s:Button label="點我" click="s=myTextInput1.text"/>
                      <s:TextInput id="myText" text="{s}"/> 
                  </s:Group>
              

                效果如下:

                總之,Flex 4在快速開發方面極具優勢,掌握好Flex,不啻于掌握了一門高效強大的開發工具,雖然現在有很多Flash、Flex的各種黑,但Flex在貢獻給Apache之后,迅速成為了Apache的頂級項目,其更新發布的速度更快了,社區支持非常活躍,在企業應用開發中,Flex能夠發揮很大作用。當然,移動應用開發能力也是很強大的,許多移動應用也是用Flash或Flex開發出來的。推薦有興趣的開發者把Flex放進你的開發工具箱里去。

              QQ群:WEB開發者官方群(515171538),驗證消息:10000
              微信群:加小編微信 849023636 邀請您加入,驗證消息:10000
              提示:更多精彩內容關注微信公眾號:全棧開發者中心(fsder-com)
              網友評論(共2條評論) 正在載入評論......
              理智評論文明上網,拒絕惡意謾罵 發表評論 / 共2條評論
              登錄會員中心
              云南十一选往期