masputih.com - OLD SITE

22 March 2008 in Flex, Tutorial | permalink

Membuat Komponen Sederhana

Komponen di Flex bisa dikategorikan menjadi 2 yaitu visual dan non-visual. Komponen visual adalah komponen yang dapat ditampilkan di stage, sedangkan komponen non-visual tidak. Menurut fungsinya, komponen juga dapat dikategorikan menjadi dua, yaitu komponen Controls dan Containers. Komponen bisa dibuat dengan menggunakan/mengembangkan komponen-komponen yang sudah disediakan oleh framework Flex dan menjadikannya sebagai sebuah komponen baru, bisa juga dibuat dengan menggunakan Flash IDE + Flex Component Kit, atau murni dengan ActionScript.

Cara paling mudah untuk mulai belajar membuat komponen adalah dengan menggunakan komponen yang sudah ada untuk membuat komponen baru. Dalam tutorial ini, saya akan memberi contoh bagaimana membuat komponen sederhana dengan memanfaatkan komponen-komponen yang sudah ada antara lain Label dan VBox plus sedikit ActionScript untuk binding. Kalo Anda belum tahu apa itu MXML dan bagaimana cara menggabungkannya dengan ActionScript, silakan baca tutorial Flex yang sudah saya tulis sebelumnya.

Kenapa kita perlu tahu cara membuat komponen? Jawabannya adalah : code reusability, abstraction, encapsulation, dan efisiensi. Lebih dari itu semua, dengan mengetahui cara membuat komponen kita bisa memecah aplikasi yang kompleks menjadi bagian-bagian kecil yang otomatis lebih mudah dikerjakan. Bagian-bagian kecil ini nantinya bisa kita uji baik secara individual sehingga kita bisa mengetahui dan memperbaiki bug lebih awal. Ingat Divide et Impera ?

Bentuk komponen dan struktur dasar aplikasi yang akan kita buat adalah seperti ini :

Setup

Ok, kita mulai dengan membuat komponen. Komponen ini saya beri nama ShortInfo jenisnya adalah MXML Component dan saya simpan di subdirektori bernama components.

Untuk membuat komponen dengan FlexBuilder 3, langkah-langkahnya adalah:

• Buat direktori baru di /src, beri nama "components"
• Klik kanan direktori "components"
• Klik New
• Klik MXML Component

Pada dialog window yang muncul, isikan ShortInfo pada field “Filename”, pilih VBox pada menu dropdown “Based on”, dan tentukan ukurannya. Seperti gambar berikut ini:

Sekarang susunan direktori project kurang lebih seperti ini:

Sudah? Bagus. Kita lanjutkan.

ShortInfo.mxml

Buka ShortInfo.mxml. Anda lihat bentuk dasarnya mirip dengan bentuk file MXML Application, tapi root-nya bukan mx:Application melainkan mx:VBox. Itu berarti komponen ShortInfo adalah turunan dari VBox. Apa itu VBox? Silakan baca link yang sudah saya beri di atas.

Selanjutnya, kita set beberapa properti dari VBox (warna, ukuran, dsb) dan kita tambahkan beberapa built-in komponen, yaitu 5 buah label dan 2 buah HBox.

<?xml version="1.0" encoding="utf-8"?> <mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" width="200" borderColor="#000000" borderStyle="solid" borderThickness="1" backgroundAlpha="1.0" backgroundColor="#FFFFFF" height="82" > <mx:Label x="10" y="10" text="{titleText}" id="titleLabel" fontWeight="bold" color="#FE0202"/> <mx:HBox x="5" y="36" width="100%"> <mx:Label text="First Name" fontWeight="bold"/> <mx:Label text="{firstName}" width="119"/> </mx:HBox> <mx:HBox x="5" y="36" width="100%"> <mx:Label text="Last Name" fontWeight="bold"/> <mx:Label text="{lastName}" width="119"/> </mx:HBox> </mx:VBox>

Perhatikan Binding Expression dalam kode di atas. Binding akan kita gunakan untuk mengeset teks dari label-label tersebut secara dinamis. Untuk itu, kita tambahkan tag mx:Script dan kita tulis kode berikut:

<mx:Script> <![CDATA[ [Bindable] public var titleText:String = "default title"; [Bindable] public var firstName:String = "firstname"; [Bindable] public var lastName:String = "lastname"; private function init():void{ mouseChildren = false; } ]]> </mx:Script>

Perhatikan init(). Function ini berfungsi untuk mematikan interaktifitas semua subkomponen yang dimiliki oleh ShortInfo. Kenapa? Karena kita ingin hanya ShortInfo yang bereaksi terhadap MouseEvent. Kita juga bisa mematikan interatifitas masing-masing subkomponen secara individual dengan cara mengeset properti mouseEnabled menjadi false. Silakan baca manual untuk melihat properti apa saja yang dimiliki oleh built-in components.

Kembali ke init(), function ini harus dieksekusi sesaat setelah ShortInfo dan semua subkomponennya dibuat, mirip seperti onLoad() di AS2. Untuk itu kita manfaatkan event bernama creationComplete yang dimiliki oleh semua komponen visual, termasuk VBox sebagai ancestor dari ShortInfo untuk mengeksekusi init(). Jadi kita ubah baris kedua dari ShortInfo menjadi:

<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" width="200" borderColor="#000000" borderStyle="solid" borderThickness="1" backgroundAlpha="1.0" backgroundColor="#FFFFFF" height="82" creationComplete="init()">

Sekarang komponen sudah siap kita gunakan.

Aplikasi

Buka file MXML utama ( dalam sourcecode saya, file ini bernama SimpleMXML.mxml dan berada di direktori /src).

Karena ShortInfo berada dalam direktori /src/components/ , maka sebelum kita bisa menggunakan komponen ShortInfo, kita harus mendefinisikan sebuah xml namespaceuntuk komponen ini. Gimana caranya ? gampang, kita tinggal menulis :

xmlns:[nama namespace yang ingin kita gunakan]="[path dari relatif dari file utama ke direktori komponen].*

Nantinya setiap kali kita ingin menggunakan komponen yang kita buat, maka tag yang harus kita tulis adalah [nama namespace]:[nama komponen]. Mirip seperti tag yang kita gunakan untuk membuat/menggunakan komponen built-in, misalnya mx:Label (mx adalah namespace-nya dan Label adalah nama komponennya).

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

Setelah kita membuat namespace, maka secara otomatis, FlexBuilder akan mengenalinya, lihat gambar berikut:

Catatan - statemen xmlns:... dst ini serupa dengan statemen import dalam ActionScript

Untuk menggunakan komponen yang telah kita buat, kita tinggal gunakan tag mx:ShortInfo, lalu set properti-propertinya, misalnya seperti ini :

<comp:ShortInfo titleText="Forward" firstName="Zlatan" lastName="Ibrahimovic" click="clickListener(event)"/> <comp:ShortInfo titleText="Midfielder" firstName="Patrick" lastName="Vieira" click="clickListener(event)"/> <comp:ShortInfo titleText="Defender" firstName="Giuseppe" lastName="Materazzi" click="clickListener(event)"/>

Berikut ini kode SimpleMXML selengkapnya:

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" xmlns:comp="components.*" viewSourceURL="srcview/index.html"> <mx:Script> <![CDATA[ import components.ShortInfo; import mx.controls.Alert; private function clickListener(e:MouseEvent):void{ var info:ShortInfo = ShortInfo(e.target); Alert.show(info.firstName+" "+info.lastName, info.titleText); } ]]> </mx:Script> <comp:ShortInfo titleText="Forward" firstName="Zlatan" lastName="Ibrahimovic" click="clickListener(event)"/> <comp:ShortInfo titleText="Midfielder" firstName="Patrick" lastName="Vieira" click="clickListener(event)"/> <comp:ShortInfo titleText="Defender" firstName="Giuseppe" lastName="Materazzi" click="clickListener(event)"/> </mx:Application>

Silakan liat demonya di sini. Sourcecode bisa diliat dan didonlod di sini

Oke, sekian dulu tutorial tentang komponen. Semoga bermanfaat. Amin!

Next article:

Away3D : Introduksi

Previous article:

Menggunakan Timer Class untuk Menunda Eksekusi Skrip