Berkenalan dengan Adobe Flex 4

Beberapa hari yang lalu saya mendapat tawaran untuk involve di in house development project di kantor yang rencananya di develop menggunakan Adobe Flex 4. Karena project masih dalam tahap pemanasan, aku punya waktu untuk gear up my coding brain setelah lama tidak dipake sekaligus mengevaluasi Flex yang masih dalam tahap procurement. Aku juga bukan programmer by profession, jobdesc ku disini more on the functional side which involve no coding whatsoever before.

sebagai referensi awal untuk adobe Flex 4, silahkan menuju ke Adobe Fx developer centre dan Wikipedia.

Satu hal yang aku dapet sementara  ini, Flex merupakan front end framework (oh ok, that sould be pretty obvious) yang berarti kita butuh bahasa/ framework lain untuk backendnya. Bahasa yang disupport integrasinya oleh flex antara lain adalah Java, .Net, PHP dan Coldfusion. Setelah ini aku akan membuat aplikasi sederhana yang berisi sebuah tabel untuk menampilkan data dari database yang diambil menggunakan webservice. Hopefully, i can share with you guys UI design in flex and simple data services. Contoh dibawah didevelop menggunakan Adobe Flashbuilder 4 (IDE, SDK dan runtime, trial 60 hari), XAMPP (MySQL dan PHP Webserver) dan Notepad++ (edit PHP script).

Prepare the ingredients

Aplikasi yang akan dibuat adalah desktop app menggunakan Air Runtime yang terdiri dari :

• Form sederhana dengan sebuah tabel (DataGrid)
• PHP script untuk mengirim web service berbasis XML
• DB untuk data source, MySQL aja lah ya supaya mudah

Di tulisan ini aku memakai Flex Builder yang berbayar, untuk alternatif open source IDE untuk flex bisa dicoba FlashDevelop. Aku belum coba yang open source itu sih, sepertinya akan sedikit lebih repot karena Flexbuilder ini benar benar memanjakan developer. Im sure you will agree with me after this. FlexBuilder Installer juga bundle dengan flash & Air Runtime jadi tidak perlu repot untuk mendownload runtimenya secara terpisah. Untuk backendnya, kali ini aku memakai AMP (apache+php+mysql) stack yang udah di bundle di XAMPP, install dan check if your localhost already worked or not.

Designing the Front End

Open and fire up your Flexbuilder for the first step. Flexbuilder memakai Eclipse platform sehingga cukup familiar bagi pengguna eclipse IDE atau yang berbasis eclipse. Klik kanan, pilih new Flex Project dan isikan nama project. Setelah itu pilih Adobe Air project, dan finish. Sebuah file default MXML akan dibuat didalam project workspace.

MXML ini berfungsi seperti page HTML yaitu sebagai frame dari UI nya, untuk mengatur behaviournya diperlukan ActionScript. Selanjutnya, pilih design view (klik disebelah menu Source) untuk memulai membuat UI sederhana yang terdiri dari DataGrid dan Label. Its all drag and drop thing just like Netbeans’s Matisse GUI builder, properties dari masing masing komponen bisa dirubah di panel sebelah kiri. Buat seperti gambar di bawah, sebuah label untuk titel dan sebuah data grid. Selanjutnya klik Run (tombol hijau di panel atas) untuk menjalankan aplikasi.

Jika semuanya berjalan lancar seizin tuhan yang maha esa,  akan muncul window aplikasi yang berisi tabel kosong dan label judul sebagai pemanis. Kerangka UI nya sudah jadi, langkah selanjutnya adalah mengisi tabel diatas dengan data yang diambil dari MySQL.

Prepare the database and backend webservice

Next step, bring up your MySQL and Apache services in xampp. Disini aku membuat satu tabel di MySQL dengan konfigurasi seperti dibawah. You can create your own config actually since this is only for example.

Setelah tabel dan datanya jadi, waktunya untuk membiarkan tangan berkotor kotor sedikit dengan kode PHP untuk membroadcast webservicenya. Kenapa webservice ? karena Flex tidak menyediakan class atau fungsi untuk berinteraksi dengan data source eksternal secara langsung (remember, its purpose only for front end). Untuk koneksi data dengan backend, flex menyediakan Flex Data service yang bisa diintegrasikan / remoting dengan PHP, Java, .NET atau Coldfusion. Selain itu Flex Data Service juga bisa mengkonsumsi XML based webservice, aku pilih yang terakhir karena menurutku paling mudah.

Aku menemukan contoh simple PHP webservice bagus di sini, kode untuk membuat xml structurenya mudah sekali untuk dimengerti. Script php diatas aku ringkas dengan membuang bagian yang tidak diperlukan, hasilnya seperti dibawah.

 

 </code><?php

 /* connect to the db, modify the credentials */
 $link = mysql_connect('localhost','kiki','kiki') or die('Cannot connect to the DB');
 mysql_select_db('flextest',$link) or die('Cannot select the DB');

/*select all rows in table, modify it to suit your DB */
$query = "SELECT * from ytpmember ;" ;
 $property = "YTP";

 /* grab the posts from the db */
 $result = mysql_query($query,$link) or die('Something wrong with your query, dude  '.$query);

 /* create one master array of the records */
 $posts = array();
 if(mysql_num_rows($result)) {
 while($post = mysql_fetch_assoc($result)) {
 $posts[] = array($property =>$post);
 }
 }

 /* create XML structure */

 header('Content-type: text/xml');
 echo '<'.$property.'>';
 foreach($posts as $index => $post) {
 if(is_array($post)) {
 foreach($post as $key => $value) {
 echo '<',$key,'>';
 if(is_array($value)) {
 foreach($value as $tag => $val) {
 echo '<',$tag,'>',htmlentities($val),'</',$tag,'>';
 }
 }
 echo '</',$key,'>';
 }
 }
 }
 echo '</'.$property.'>';

?>
<code> 

Taruh file php tersebut di Htdocs dan coba akses URL nya, xml structure yang berisi data dari MySQL db akan muncul di browser.

Dengan ini backend webservice sudah jadi dan langkah selanjutnya adalah bagaimana mengkonsumsi webservice ini dan menampilkannya dalam Flex DataGrid yang sudah dibuat sebelumnya.

Creating Flex Dataservice

Langkah selanjutnya adalah membuat flex data service untuk mengkonsumsi webservice yang telah dibuat sebelumnya. Klik Data > connect to Data/service > pilih XML dan akan muncul window untuk konfigurasi webservice yang akan di pakai.

Masukkan URL webservice, beri nama service tersebut dan klik ok. Data service berhasil dibuat dan akan terlihat di tab data service pada panel bawah. Selain itu Flex akan otomatis membuat beberapa Actionscript class untuk mendefinisikan objek dan servicenya.

Dataservice sudah siap, UI juga sudah, sekarang saatnya untuk menggabungkan keduanya.

Connecting both : this is where the magic happens

Kembali lagi ke MXML files yang sebelumnya telah dibuat. Pertanyaan berikutnya adalah : bagaimana menggabungkan data service dan MXML ini ? simple answer : Just drag the DataService and drop it on the DataGrid. Tidak percaya ? coba saja sendiri.

DataGrid akan otomatis menyesuaikan nama dan jumlah kolom dengan data dari webservice tersebut, just like that. How awesome is that ? suddenly those hours spent on coding JTableModel class stuff in Java Swing back in my college days just feel so prehistoric. Klik run untuk menjalankan aplikasi dan bisa dilihat DataGrid juga secara otomatis menyediakan fungsi sort (klik pada judul kolom).

Sederhana sekali bukan ? untuk membuat aplikasi simple ini diperlukan kurang dari 30 menit untuk ukuran diriku yang not even a professional coder hehe. Mungkin tidak banyak membantu belajar flex, tapi setidaknya memberi sedikit jumpstart tentang Adobe Flex4 dan Flexbuilder. Source code dan Flexbuilder project files bisa di donlot dibawah, didalam file tersebut aku menambahkan sedikit fungsionalitas seperti multiple page, multiple table, multiple webservice dan sedikit interaksi menggunakan javascript.

Download the source files at Kiki Ahmadi CodeForFun [at] GoogleCode

Thats all for this post, terima kasih sudah membaca dan have a good day everyone.