Flex - Pengikatan Data

Apa itu Data Binding?

Data Binding adalah proses dimana data dari satu objek diikat ke objek lain. Ini membutuhkan properti sumber, properti tujuan, dan peristiwa pemicu yang menunjukkan, kapan harus menyalin data dari sumber ke tujuan.

Flex menyediakan tiga cara untuk melakukan Data Binding seperti di bawah ini

Sintaks kurung kurawal dalam MXML Script ({})
<fx: binding> di MXML
BindingUtils di ActionScript

Data Binding - Menggunakan Curly Braces di MXML

Contoh berikut menunjukkan cara menggunakan tanda kurung kurawal untuk menentukan data binding dari sumber ke tujuan.

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

Data Binding - Menggunakan tag <fx: Binding> di MXML

Contoh berikut menunjukkan cara menggunakan tag untuk menentukan pengikatan data dari sumber ke tujuan.

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

Data Binding - Menggunakan BindingUtils di ActionScript

Contoh berikut menunjukkan cara menggunakan BindingUtils untuk menentukan data binding dari sumber ke tujuan.

<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)" />

Contoh Pengikatan Data Flex

Mari kita ikuti langkah-langkah yang diberikan di bawah ini untuk melihat skinning beraksi dalam aplikasi Flex dengan membuat aplikasi tes -

Langkah	Deskripsi
1	Buat proyek dengan nama HelloWorld di bawah paket com.tutorialspoint.client seperti yang dijelaskan di bab Flex - Buat Aplikasi .
2	Ubah HelloWorld.mxml seperti yang dijelaskan di bawah ini. Jaga sisa file tidak berubah.
3	Kompilasi dan jalankan aplikasi untuk memastikan logika bisnis berfungsi sesuai kebutuhan.

Berikut ini adalah konten file HelloWorld.mxml yang dimodifikasisrc/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>

Setelah Anda siap dengan semua perubahan yang dilakukan, mari kita kompilasi dan jalankan aplikasi dalam mode normal seperti yang kita lakukan di bab Flex - Membuat Aplikasi . Jika semuanya baik-baik saja dengan aplikasi Anda, itu akan menghasilkan hasil sebagai berikut: [ Coba online ]