masputih.com - OLD SITE

11 March 2008 in Flex, Tutorial | permalink

Dasar-dasar Flex

Udah pernah dengar tentang Flex? atau mungkin sudah mulai belajar?
Kali ini saya akan membahas dasar-dasar pemrograman dengan Flex. Bener-bener dasar karena saya juga masih baru belajar. :-)

Perlengkapan

Untuk membuat aplikasi Flex, kita tidak harus menggunakan FlexBuilder. Pengguna Windows bisa menggunakan FlashDevelop sedangkan pengguna Mac, saya dengar bisa menggunakan Textmate. Satu kekurangan IDE selain FlexBuilder adalah tidak adanya fitur WYSIWYG untuk mendesain layout.

Kita bisa juga menggunakan text editor apapun untuk menulis kode MXML dan ActionScript tapi kita harus melakukan kompilasi melalui command line. Repot dan rawan error.

Yang wajib kita punya adalah Flex SDK yang berisi Flex compiler dan framework . FlexSDK bisa didonlod di situs Adobe .

Struktur dasar dan MXML

Ada dua bahasa dalam Flex yaitu MXML dan ActionScript. MXML adalah bahasa berbasis XML yang digunakan untuk membangun UI (presentation layer) sedangkan ActionScript sebagai behavior atau logic layer nya. Mirip seperti hubungan antara XHTML dengan Javascript.

Sebuah file MXML Application mempunyai bentuk dasar seperti ini:

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> </mx:Application>

Tag mx:Application menyatakan bahwa file ini adalah file utama ( main file ) yang fungsinya sama dengan Document class di Flash.

Dalam buku “Flex for Developers” dijelaskan bahwa pada umumnya proses pengembangan aplikasi Flex meliputi:

1. Membuat aplikasi MXML dengan FlexBuilder atau IDE yg lain
2. Membuat layout dengan satu atau lebih containers
3. Membuat UI dengan menambahkan UI controls ke dalam container
4. Mendefinisikan data model untuk aplikasi
5. Menambahkan external content seperti web service, koneksi ke file eksternal, dll
6. Menambahkan data binding
7. Memformat data yang ditampilkan
8. Validasi user input
9. Menulis ActionScript untuk menghubungkan komponen UI yg saru dengan yang lain
10. Kompilasi
11. Deployment

Dalam tulisan ini saya hanya akan membahas tentang proses nomor 1,2,3,6, dan 9 (maklum, masih newbie). Proses nomor 10 & 11 nggak perlu dijelaskan lagi.

Berikut ini contoh MXML yang saya gunakan dalam tutorial ini (silakan dikopi lalu coba dikompilasi ):

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="300" height="300"> <mx:VBox x="61.5" y="43"> <mx:Label id="title" text="Type your name" color="#FFFFFF"/> <mx:TextInput id="name_txt" /> <mx:HBox> <mx:Label text="Your name is " color="#FFFFFF"/> <mx:Label id="inputName" color="#FFFFFF"/> </mx:HBox> <mx:Button id="submitBtn" label="Submit" /> </mx:VBox> </mx:Application>

Dalam file MXML di atas, saya menggunakan beberapa komponen sebagai berikut:

1. Containers : VBox , HBox
2. UI controls : Label, TextInput, Button

Detil masing-masing komponen bisa dibaca di manual atau Flex Livedocs.

Tag mx:Script

Tanpa ActionScript, kode MXML di atas nggak ada gunanya.

Sebelum ke ActionScript, silakan berikut ini aplikasi yang akan kita buat :

ActionScript harus ditulis dalam lingkup tag mx:Script. Bentuk dasarnya adalah seperti ini:

<mx:Script> <![CDATA[ //tulis actionscript di sini ]]> </mx:Script>

File ActionScript Eksternal

Selain menulis kode ActionScript dalam file MXML, kita juga bisa menulisnya dalam file .as eksternal. Untuk menggunakan file .as eksternal, kita tinggal mengeset properti source dari tag mx:Script seperti ini:

<mx:Script source="eksternal.as">

Untuk menyederhanakan tulisan ini, saya menulis kode ActionScript dalam file MXML. Kalau Anda ingin menggunakan file eksternal, silakan.

Data Binding Expression

Satu-satunya cara agar komponen/kode MXML bisa “berbicara” dengan kode ActionScript maupun dengan komponen yang lain adalah melalui data binding expression yang berbentuk sepasang tanda kurung kurawal { }.

Kita lihat kode MXML di atas baris 7 – 12.

<mx:TextInput id="name_txt" /> <mx:HBox> <mx:Label text="Your name is " color="#FFFFFF"/> <mx:Label id="inputName" color="#FFFFFF"/> </mx:HBox>

Kita ingin pada apapun yang kita ketikkan ke dalam komponen TextInput dengan id “name_txt” secara real-time ditampilkan oleh komponen Label dengan id “inputName”. Untuk itu kita perlu melakukan data binding antara properti text dari “inputName” dengan properti text dari “name_txt” seperti ini:

<mx:Label id="inputName" text="{name_txt.text}" color="#FFFFFF"/>

Ekspresi data binding yang kita gunakan adalah {name_txt.text}.

Silakan coba dikompilasi dan coba isi TextInput.

Catatan – id dalam MXML sama dengan instance name di Flash.

Oke, itu tadi data binding antara sebuah komponen dengan komponen yang lain. Kita juga bisa melakukan data binding antara MXML dengan ActionScript. Misalnya dalam aplikasi yang kita buat, kita ingin agar Label dengan id “title” diisi dengan sebuah variabel yang ditulis dalam kode ActionScript. Untuk itu kita buat sebuah var di dalam lingkup tag CDATA seperti ini:

[Bindable] private var initText:String = "Type your name:";

Lalu kita lakukan binding di komponen Label dengan id “title” seperti ini:

<mx:Label id="title" text="{initText}" color="#FFFFFF"/>

Gampang kan? Coba dikompilasi dan lihat hasilnya.

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="300" height="300"> <mx:Script> <![CDATA[ import mx.controls.Alert; [Bindable] private var initText:String = “Type your name :”; private function showAlert(e:Event):void{ Alert.show(“Hello “ + name_txt.text,“Flex says”,4,this); } ]]> </mx:Script> <mx:VBox x="61.5" y="43"> <mx:Label id="title" text="{initText}" color="#FFFFFF"/> <mx:TextInput id="name_txt" /> <mx:HBox> <mx:Label text="Your name is " color="#FFFFFF"/> <mx:Label id="inputName" text="{name_txt.text}" color="#FFFFFF"/> </mx:HBox> <mx:Button id="submitBtn" label="Submit" click="showAlert(event)" /> </mx:VBox> </mx:Application>

Penggunaan komponen Button dan Alert akan saya bahas di tutorial selanjutnya. Kalo mau silakan baca sendiri di manual :-)

Thanks for reading.

Next article:

Pindah hosting dari Bluehost ke FusedNetwork

Previous article:

DisplayObject dan Custom Event