DASAR-DASAR FLEX MENGGUNAKAN FLASH BUILDER 4 Sabtu, 9 Oktober 2010 Lab Praktikum Ilmu Komputer UPI
Page | 0
Apa itu RIA? Rich Internet Application adalah suatu teknologi yang menggabungkan kelebihan-kelebihan dari aplikasi berbasis web dan desktop. RIA menyajikan antarmuka visual yang cantik dan interaktif. Sifatnya tidak tergantung terhadap suatu sistem operasi menjadikan RIA bisa menjangkau pengguna komputer lebih banyak lagi.
Karakteristik RIA Berikut ini adalah karakteristik RIA secara umum: 1.
Responsif : Sebagai aplikasi web, RIA memiliki perbedaan yang amat mencolok dengan web konvensional. RIA tidak me-reload halaman ketika suatu tombol atau link diklik. RIA hanya meng-update bagian-bagian tertentu ketika kita melakukan suatu aksi. Sementara pada web konvensional, halaman akan diupdate secara keseluruhan ketika kita melakukan suatu aksi.
2.
Dapat Melakukan Banyak Hal : Dengan memanfaatkan RIA, kita bisa melakukan sesuatu seperti apa yang kita lakukan pada sebuah aplikasi desktop. Tingkat interaktifitas yang tinggi memungkinkan developer untuk memindahkan fitur-fitur pada sebuah aplikasi desktop ke dalam aplikasi web. Sudah banyak aplikasi RIA yang bisa kita manfaatkan seperti word processor, instant mesengger, dan sebagainya.
3.
Menjangkau User yang Lebih Banyak : RIA bisa dijalankan pada sistem operasi manapun dengan spesifikasi hardware yang tidak harus tinggi. Asalkan sistem operasi itu bisa menjalankan browser. RIA dapat dijalankan dengan baik.
4.
Komunikasi Menjadi Lebih Mudah : Dengan RIA, kita bisa memanfaatkan banyak media untuk melakukan sesuatu. Misalnya : Chatting berbasis teks, misalnya melalui Yahoo! Web Mesengger, Gmail Chat, Ebuddy, Meebo, Facebook Chat Audio-Video Conference melalui Gmail Video Chat Video Streaming pada Youtube, Metacafe, Dailymotion Sharing pada Google Docs, Facebook, Scribd, Google Calendar Server Push pada Facebook, Gmail, Google News, Twitter Collaboration pada MindMeister, SingJelas (coming soon!)
Page | 1
Flex Framework Flex adalah framework yang bersifat free dan open source untuk membangun aplikasi web yang interaktif. Aplikasi web berbasis flex bisa dijalankan pada sebagian besar browser maupun desktop. Flex terdiri atas MXML yang digunakan untuk mendeskripsikan UI dan aturan mainnya, serta Actionscript 3.0 sebagai logika pemrogramannya. Di samping itu, Flex juga menyertakan banyak library yang bisa digunakan untuk membuat Rich Internet Application (RIA). RIA yang dibuat dengan Flex dapat berjalan di dalam browser dengan menggunakan Flash Player, maupun di luar browser menggunakan Adobe AIR.
Flash Builder 4 Adobe Flash Builder 4, merupakan IDE berbasis Eclipse untuk mengembangkan aplikasi Flex. Fitur utama yang dimilikinya adalah intelligent coding, debugging, dan visual design. Flex framework, compiler, dan library-nya sudah termasuk di dalamnya.
Page | 2
Membuat Flex Project 1. Buka aplikasi Flash Builder 4. 2. Klik menu File > New > Flex Project. Maka akan muncul dialog seperti di bawah ini.
3. Isi nama project. Tentukan lokasi project. Tentukan tipe aplikasi. Tentukan versi Flex SDK yang akan digunakan. Pilih teknologi server yang akan digunakan. Klik Finish jika tidak menggunakan server. Klik Next jika menggunakan server. Maka akan muncul dialog baru untuk mengkonfigurasi settingan server.
Page | 3
4. Isi konfigurasi server sesuai dengan kebutuhan. Klik Finish. Project baru siap untuk dikembangkan.
CATATAN: Dialog konfigurasi server berbeda-beda tergantung jenis server yang digunakan.
Page | 4
Hello World! Pada bagian awal ini, kita akan membuat aplikasi sederhana yang sangat terkenal, yaitu “Hello World”. 1. Buat project baru dengan nama Hello World dan tipe aplikasi Web. 2. Ketikan kode berikut pada file Main.mxml. <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/halo"> <s:Label text="Hello World!!!" fontSize="64"/>
3. Jalankan project dengan cara menekan Ctrl+F11. Atau Klik Run > Run Main. Atau dengan klik tombol
pada bagian toolbar.
Page | 5
Menangani Event Dalam mengembangkan aplikasi flex, kita tidak akan lepas dari dua hal utama, event dan data binding. Pada bagian ini, kita akan mencoba bagaimana cara menangani suatu event. Pada bagian ini, kita akan membuat aplikasi yang memiliki tiga buah tombol. Ketika tombol diklik. Aplikasi akan men-dispatch suatu event (MouseEvent.CLICK). Dalam aplikasi ini, kita akan menangani event itu dengan beberapa cara. Buat sebuah project baru. Beri nama Event Handling. Pada file Main.mxml ketikkan kode berikut. <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/halo" initialize="init()">
<s:VGroup width="100%"> <s:Button id="button1" label="Button 1" click="label.text += 'Button 1 clicked\n'"/> <s:Button id="button2" label="Button 2" click="handleClick(event)"/> <s:Button id="button3" label="Button 3"/> <s:Label id="label"/>
Kode Actionscript ditulis dalam tag
sementara komponen visual dideklarasikan dalam format MXML. Blok CDATA merupakan suatu hal yang wajib disertakan dalam menulis kode Actionscript 3.0. Hal pertama yang harus diperhatikan adalah event initialize pada tag Application. Event ini otomatis di-dispatch ketika aplikasi flex dijalankan. Aplikasi akan otomatis menjalankan fungsi init() ketika event initialize dijalankan. Fungsi init() ini akan membuat sebuah event listener pada tombol dengan id button3.
Page | 6
Ketika masing-masing tombol diklik: button1 langsung mengerjakan instruksi pada bagian yang di-highlight. button2 akan memanggil fungsi handleClik(). Sementara event listener pada button3 akan menunggu event click pada tombol tersebut dan memanggil fungsi handleClick ketika tombol itu diklik.
Page | 7
Bermain dengan Data Binding Data binding adalah suatu proses pengikatan data dalam suatu obyek ke obyek lain. Biasanya digunakan untuk melewatkan data dalam sebuah aplikasi. Dengan menggunakan data binding, jika nilai properti pada suatu source berubah, maka secara otomatis nilai pada destination juga akan berubah/update secara otomatis. Ada beberapa cara untuk mendefinisikan data binding, 1. Menggunakan kurung kurawal <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"> <s:layout> <s:VerticalLayout/> <s:TextInput id="myTI" text="Enter text here"/> <s:Label id="myText" text="{myTI.text}"/>
2. Menggunakan tag <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"> <s:layout> <s:VerticalLayout/> <s:TextInput id="myTI"/> <s:Label id="myText"/>
3. Menggunakan static method BindingUtils.bindProperty() pada Actionscript 3.0 <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"> <s:layout> <s:VerticalLayout/>
Page | 8
public function initBindingHandler():void { BindingUtils.bindProperty(myText, "text", myTI, "text"); } ]]> <s:TextInput id="myTI"/> <s:Label id="myText" preinitialize="initBindingHandler();"/>
Tampilan dari ketiga contoh aplikasi diatas adalah sebagai berikut.
Selain properti suatu objek, data binding juga bisa diterapkan pada semua variable yang memiliki tag metadata [Bindable]. <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"> <s:layout> <s:VerticalLayout/>
Page | 9
<s:TextInput id="operand1" restrict="0-9" /> <s:TextInput id="operand2" restrict="0-9" /> <s:Button label="Calculate" click="calculate()"/> <s:Label text="{operand1.text +' + '+ operand2.text + ' = ' + c}"/>
Hasil eksekusi kode di atas adalah sebagai berikut.
Page | 10
Berkenalan dengan List dan Datagrid List (termasuk dropdown dan combobox) dan datagrid merupakan data-driven control yang umum digunakan dalam suatu aplikasi Flex. Data-driven control mengambil input dari sebuah data provider, sebuah objek yang terdiri dari data dengan format tertentu. Setiap control akan menampilkan data secara berbeda tergantung jenisnya. Berikut ini adalah contoh visualisasi data pada List dan Datagrid. 1. List <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"> <s:layout> <s:VerticalLayout/> <mx:List id="dList" width="140" dataProvider="{list}"> <s:Label text="{'Selected city: ' + city.label}"/> <s:Label text="{'Selected data: ' + city.data}"/>
Page | 11
2. Datagrid <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"> <s:layout> <s:VerticalLayout/>
Page | 12
<mx:DataGrid id="dList" width="140" dataProvider="{list}"> <s:Label text="{'Selected city: ' + city.label}"/> <s:Label text="{'Selected data: ' + city.data}"/>
Page | 13
Latihan 1 Soal 1 Buat sebuah aplikasi pengelolaan data mahasiswa dengan fitur menampilkan daftar nama mahasiswa beserta NIM dalam sebuah datagrid. Aplikasi dapat menambahkan dan menghapus data mahasiswa. Datagrid selalu menampilkan data yang up-to-date.
Untuk menghapus data, klik baris data yang akan dihapus pada datagrid. Form sebelah kiri akan menampilkan data yang akan dihapus lalu klik tombol hapus. Soal 2 Modifikasi soal 1, sehingga aplikasi dapat mengubah data mahasiswa.
Untuk mengubah data, klik baris data yang akan diubah pada datagrid. Form sebelah kiri akan menampilkan data yang dipilih. Ubah data sesuai dengan keinginan. Klik tombol ubah untuk mengubah data. Kata kunci : array collection, data binding, datagrid, text input, button, selectedItem, selectedIndex
Page | 14
AMF dan Flash Remoting Apa itu Flash Remoting? Aplikasi berbasis Flash dapat berkomunikasi dengan webserver dengan mudah. Satu hal yang memungkinkan Flash dapat berkomunikasi dengan database adalah adanya remoting component. Remoting component berfungsi sebagai jembatan antara webserver dan Flash yang ada di sisi client.
Flash
Remoting Component
Webserver (PHP)
Database
Cara kerjanya, webserver menyediakan sebuah service yang bisa diakses oleh Flash melalui remoting component. Service ini dikemas dalam suatu class dan method PHP. Setiap class disimpan dalam sebuah file PHP. Setiap class bisa memiliki banyak method. Flash memanggil method yang telah disediakan webserver melalui perantara remoting component. Lalu, webserver mengerjakan method itu. Hasil dari pengerjaan method itu akan dikirim oleh webserver ke Flash melalui remote component.
Hello World Menggunakan Remoting PHP Aplikasi Hello World ini akan menampilkan sebuah kalimat “Hello, [parameter]” yang berasal dari server PHP dalam bentuk Alert. Parameter dikirim melalui aplikasi Flex. Ikuti langkah berikut untuk membuat aplikasi remoting sederhana Hello World.
Sisi server – PHP 1. Buat sebuah class PHP dengan nama file HelloWorld.php. Simpan di dalam sebuah folder dengan nama PHPService. Folder tersebut terletak dalam root webserver 2. Isi file HelloWorld.php adalah sebagai berikut.
Page | 15
} ?>
Sisi Client – Flex 1. Klik menu File > New > Flex Project. 2. Pada dialog New Flex Project, beri nama projek RemotingHelloWorld dengan server technology PHP. Lalu klik tombol Next.
3. Dialog berikutnya, Configure PHP Server akan muncul. Isi bagian Web Root dan Root URL. Klik tombol Validate Configuration sehingga muncul keterangan The web root folder and root URL are valid.
Page | 16
4. Klik tombol Finish dan project baru siap untuk dikembangkan. 5. Pada tab Data/Services klik Connect to Data/Services
6. Pilih PHP pada dialog Select Service Type. Klik Next
Page | 17
7. Masukan alamat file HelloWorld.php yang telah dibuat sebelumnya. Klik Finish.
8. Tunggu beberapa saat hingga class Hello World beserta method yang tersedia muncul pada bagian Data/Services.
9. Klik kanan pada method say() lalu pilih Configure Return Type. 10. Pilih auto detect the return type from sample data. Lalu klik tombol Next.
Page | 18
11. Untuk parameter name, pilih String pada Kolom Select Type dan masukan sebuah nama pada kolom Enter Value. Klik Next. Lalu Klik Finish.
12. Method say() telah dikonfigurasi dengan baik.
13. Pada tag Application , tambahkan namespace xmlns:helloworld="services.helloworld.*" 14. Buat sebuah component text input dan tombol pada file RemotingHelloWorld.mxml <s:HGroup> <s:TextInput id="nameTI" /> <s:Button id="sendBtn" label="say" click="sendBtn_clickHandler(event)"/>
15. Buat deklarasi untuk remote object HelloWorld dan method say() <s:CallResponder id="sayResult" result="sayResult_resultHandler(event)"/>
Page | 19
16. Buat fungsi click handler untuk tombol sendBtn dan result handler untuk call responder sayResult. import mx.controls.Alert; import mx.rpc.events.ResultEvent; protected function sendBtn_clickHandler(event:MouseEvent):void { sayResult.token = helloWorld.say(nameTI.text); } protected function sayResult_resultHandler(event:ResultEvent):void { Alert.show(event.result.toString()); }
17. Berikut ini adalah kode pada file RemoteHelloWorld.mxml secara lengkap. <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" xmlns:helloworld="services.helloworld.*"> <s:CallResponder id="sayResult" result="sayResult_resultHandler(event)"/> <s:HGroup> <s:TextInput id="nameTI" /> <s:Button id="sendBtn" label="say" click="sendBtn_clickHandler(event)"/>
18. Tes aplikasi.
Page | 20
Latihan 2 Modifikasi aplikasi pada latihan 1 soal nomor 2 sehingga aplikasi tersebut dapat menyimpan, mengedit dan menghapus data mahasiswa dalam database dengan bantuan remote object. Kata kunci: AMF, remote object, flex php database
Page | 21
