Flex - Veri Bağlama

Veri Bağlama nedir?

Veri Bağlama, bir nesnenin verilerinin başka bir nesneye bağlandığı bir işlemdir. Bir kaynak özelliği, hedef özellik ve verilerin kaynaktan hedefe ne zaman kopyalanacağını belirten bir tetikleyici olay gerektirir.

Flex, aşağıdaki gibi Veri Bağlama yapmanın üç yolunu sağlar

• MXML Komut Dosyasında ({}) kıvrık ayraç sözdizimi
• MXML'de <fx: binding> etiketi
• ActionScript'te BindingUtils

Veri Bağlama - MXML'de Kaşlı Ayraç Kullanma

Aşağıdaki örnek, bir kaynağın hedefe veri bağlamasını belirtmek için süslü parantezlerin nasıl kullanılacağını gösterir.

<s:TextInput id = "txtInput1" />
<s:TextInput id = "txtInput2" text = "{txtInput1.text}" />

Veri Bağlama - MXML'de <fx: Binding> etiketini kullanma

Aşağıdaki örnek, nasıl kullanılacağını gösterir Bir kaynağın hedefe veri bağlamasını belirtmek için etiket.

<fx:Binding source = "txtInput1.text" destination = "txtInput2.text" />
<s:TextInput id = "txtInput1" />
<s:TextInput id = "txtInput2" />

Veri Bağlama - ActionScript'te BindingUtils Kullanma

Aşağıdaki örnek, bir kaynağın hedefe veri bağlamasını belirtmek için BindingUtils'in nasıl kullanılacağını gösterir.

<fx:Script>
   <![CDATA[
      import mx.binding.utils.BindingUtils;
      import mx.events.FlexEvent;

      protected function txtInput2_preinitializeHandler(event:FlexEvent):void {
         BindingUtils.bindProperty(txtInput2,"text",txtInput1, "text");
      }      
   ]]>
</fx:Script>

<s:TextInput id = "txtInput1" />
<s:TextInput id = "txtInput2" 
   preinitialize = "txtInput2_preinitializeHandler(event)" />

Flex Veri Bağlama Örneği

Bir test uygulaması oluşturarak bir Flex uygulamasında dış görünümün nasıl işlediğini görmek için aşağıda verilen adımları takip edelim -

Adım	Açıklama
1	Flex - Uygulama Oluştur bölümünde açıklandığı gibi com.tutorialspoint.client paketinin altında HelloWorld adıyla bir proje oluşturun .
2	HelloWorld.mxml'yi aşağıda açıklandığı gibi değiştirin . Geri kalan dosyaları değiştirmeden tutun.
3	İş mantığının gereksinimlere göre çalıştığından emin olmak için uygulamayı derleyin ve çalıştırın.

Aşağıda değiştirilmiş HelloWorld.mxml dosyasının içeriği verilmiştirsrc/com/tutorialspoint/client/HelloWorld.mxml.

<?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
   width = "100%" height = "100%" minWidth = "500" minHeight = "500">
   
   <fx:Style source = "/com/tutorialspoint/client/Style.css" />
   <fx:Script>
      <![CDATA[
         import mx.binding.utils.BindingUtils;   
         import mx.events.FlexEvent;

         protected function txtInput6_preinitializeHandler(event:FlexEvent):void {
            BindingUtils.bindProperty(txtInput6,"text",txtInput5, "text");
         }
      ]]>
   </fx:Script>
   
   <fx:Binding source = "txtInput3.text" destination = "txtInput4.text" />
   <s:BorderContainer width = "500" height = "550" id = "mainContainer" 
      styleName = "container">
      <s:VGroup width = "100%" height = "100%" gap = "50" horizontalAlign = "center" 
         verticalAlign = "middle">
         <s:Label id = "lblHeader" text = "Data Binding Demonstration"
            fontSize = "40" color = "0x777777" styleName = "heading" />
         <s:Panel title = "Example #1 (Using Curly Braces,\{\})" width = "400" 
            height = "100" >
            <s:layout>
               <s:VerticalLayout paddingTop = "10" paddingLeft = "10" />
            </s:layout>
            
            <s:HGroup >
               <s:Label text = "Type here: " width = "100" paddingTop = "6" />
               <s:TextInput id = "txtInput1" />	
            </s:HGroup>
            
            <s:HGroup >
               <s:Label text = "Copied text: " width = "100" paddingTop = "6" />
               <s:TextInput id = "txtInput2" text = "{txtInput1.text}" />
            </s:HGroup>						
         </s:Panel>
         
         <s:Panel title = "Example #2 (Using &lt;fx:Binding&gt;)" width = "400" 
            height = "100" >
            <s:layout>
               <s:VerticalLayout paddingTop = "10" paddingLeft = "10" />
            </s:layout>
            
            <s:HGroup >
               <s:Label text = "Type here: " width = "100" paddingTop = "6" />
               <s:TextInput id = "txtInput3" />	
            </s:HGroup>
            
            <s:HGroup >
               <s:Label text = "Copied text: " width = "100" paddingTop = "6" />
               <s:Label id = "txtInput4" />
            </s:HGroup>						
         </s:Panel>
         
         <s:Panel title = "Example #3 (Using BindingUtils)" width = "400" 
            height = "100" >
            <s:layout>
               <s:VerticalLayout paddingTop = "10" paddingLeft = "10" />
            </s:layout>
            
            <s:HGroup >
               <s:Label text = "Type here: " width = "100" paddingTop = "6" />
               <s:TextInput id = "txtInput5" />	
            </s:HGroup>
            
            <s:HGroup >
               <s:Label text = "Copied text: " width = "100" paddingTop = "6" />
               <s:TextInput enabled = "false" id = "txtInput6" 
                  preinitialize = "txtInput6_preinitializeHandler(event)" />
            </s:HGroup>						
         </s:Panel>
      </s:VGroup>	 
   </s:BorderContainer>	
</s:Application>

Yapılan tüm değişikliklere hazır olduğunuzda, Flex - Create Application bölümünde yaptığımız gibi uygulamayı normal modda derleyip çalıştırmamıza izin verin . Başvurunuzla ilgili her şey yolundaysa, şu sonucu verecektir: [ Çevrimiçi deneyin ]