My First Flex Project

Dua minggu yang lalu, Vises, MIS di kantor saya tengah sibuk membuat sesuatu. Pelan-pelan saya perhatikan apakah yang sedang dibuatnya, ternyata ia tengah membuat kembali aplikasi absen yang sekitar 6 bulan lalu pernah saya buat. Aplikasi absen yang pernah saya buat menggunakan Java Swing sebagai client, dan J2EE menggunakan Framework Spring sebagai sisi servernya. Aplikasi ini memang saya buat karena permintaan HRD dan Finance di kantor saya sebagai log dari kehadiran karyawan yang bekerja di kantor saya, dengan log ini pihak Finance kantor saya mempunyai sebuah referensi untuk membayarkan uang makan kepada setiap karyawan berdasarkan kehadiran dan jam masuk mereka setiap harinya.

Yang unik dari kegiatan kawan saya ini adalah, ia mencoba membangun kembali aplikasi absen client tersebut dengan menggunakan Adobe Flex. Tertarik juga saya dengan Adobe Flex ini, ketertarikan saya lebih kepada kemampuan Adobe Flex membuat sebuah design GUI yang cantik. Dengan menggunakan IDE Adobe Flex Builder, pembuatan dan design aplikasi GUI cukup dengan men-drag and drop saja. Mirip dengan cara membuat aplikasi Java GUI dengan menggunakan Netbeans dan Matisse Buildernya. Sebetulnya memang ada sedikit kekecewaan saya ketika selesai membuat aplikasi Java GUI dengan Netbeans, kekecewaan saya dipicu karena terkadang hasil dari design Java GUI yang saya buat dengan menggunakan Netbeans, setelah release build tidak sesuai dengan ketika saya mendesignnya. Setelah melihat Adobe Flex ini, saya berfikir untuk mengganti saja metode pembuatan layer presentasi, terutama Desktop Application dengan Adobe Flex ini.

Selama satu minggu tiga hari, saya mencari referensi dan mulai mencoba-coba untuk menggunakan Adobe Flex ini sebagai sebuah layer presentasi dalam aplikasi yang saya buat. Dan memang ternyata saya dapati saya lebih mudah menggunakan Adobe Flex sebagai sebuah layer presentasi. Dan saya memutuskan sepertinya saya akan terus memakai Adobe Flex ini sebagai sebuah layer presentasi dari program-program yang saya buat.

Adobe Flex mendukung 3 Methode Remote Application yaitu:

1.    Method RPC (Remote Procedure Call).

2.    Method HTTP Service (Membaca kembalian aplikasi web dengan format XML).

3.    Method Web Service.

Dari tiga methode tersebut, methode yang paling saya sukai adalah methode yang kedua yaitu methode HTTP Service. Adobe Flex mampu membaca nilai kembalian sebuah aplikasi web yang berformat XML dan kemudian memasukkan nilai-nilai yang ada pada tag-tag XML tersebut kedalam komponen-komponen yang ada dalam framework Adobe Flex.

Saya berfikir, dari pencarian saya selama satu minggu tiga hari tentang Adobe Flex ini, harus ada satu aplikasi yang bisa saya buat. Hmmm…, saya berfikir aplikasi sederhana apa yang bisa saya buat dengan pengetahuan tentang Adobe Flex sesedikit ini. Saya mendapatkan ide, saya akan buat sebuah aplikasi RSS Reader sederhana. Kenapa RSS Reader ?, saya pikir RSS Reader sudah dalam format XML, maka seharusnya akan lebih mudah membuatnya sebab saya tidak perlu lagi mendesign format XML untuk aplikasi Flex pertama sederhana saya.

Dan setelah oprek-oprek selama satu hari, akhirnya selesai juga Project aplikasi Adobe Flex pertama saya, berikut screen shot dari aplikasi RSS Reader buatan saya:

Gambar-1

Gambar 2:

Saya deskripsikan sedikit mengenai konsep aplikasi RSS Reader buatan saya ini. Aplikasi RSS Reader ini terdiri dari dua tab, dimana tab yang pertama berisi view utama dari RSS Reader ini, seperti terlihat pada gambar 1, sementara tab yang kedua berisi sebuah aplikasi setiap link dari sumber RSS bisa di tambah, di update dan di delete seperti terlihat pada Gambar-2.

Pada gambar-1 kita lihat ada combo box yang berfungsi agar pengguna dapat memilih dari sumber yang mana RSS ingin dibaca. Ketika user mengklik salah satu sumber pada combo box tersebut, aplikasi ini akan me-request RSS Feeder ke link yang memang menjadi value di combo box tersebut. Setelah semua hasil dapat diambil dari link kemudian aplikasi ini akan menampilkan secara otomatis masing-masing item berita pada Data Grid yang ada pada panel Rss List, dan ketika salah satu berita yang ada pada Data Grid tersebut di klik maka Text Area yang ada pada panel Description akan memuat potongan berita berdasarkan item yang dipilih. Kemudian jika pengguna tertarik untuk membaca secara lengkap berita yang dipilih tadi, pengguna dapat mengklik tombol Read This. Ketika tombol ini di klik maka secara otomatis sebuah browser internet akan terbuka dan langsung membuka halaman berita lengkap yang memang ingin dibaca tadi.

Sementara pada gambar-2, adalah tab Rss Entry, dimana di dalam tab ini, pengguna dapat mengatur sumber-sumber RSS Reader yang bisa di baca pada aplikasi RSS Reader ini. Ketika pengguna ingin menambahkan sebuah sumber RSS, pengguna cukup memasukkan entry-entry pada panel Add Rss Entry dan kemudian mengklik tombol Add, dan ketika pengguna ingin menghapus atau mengedit sumber RSS yang ada pengguna tinggal mengklik salah satu source yang ingin di edit atau di hapus pada Data Grid yang ada pada panel Listed RSS Entry, dan secara otomatis item yang ingin dihapus atau di edit tadi akan mengisi entry-entry pada panel Edit RSS Entry, kemudian pengguna tinggal mengklik tombol Delete atau Update sesuai dengan keinginannya. Kemudian pada aplikasi tersebut juga ada tombol Exit pada kanan atas form, dimana fungsi tombol ini adalah untuk menutup aplikasi RSS Reader ini.

Aplikasi RSS Reader sederhana yang saya buat ini memiliki Back-End Application yang saya buat dengan menggunakan PHP dan Database MySQL. Back-End Application ini memproduksi tampilan web dengan format XML berisi list dari sumber RSS Reader yang tersimpan dalam database MySQL, karena saya belum mengerti benar bagaiamana cara menggunakan property file pada Adobe Flex maka link Back-End Application RSS Reader ini saya hardcode saja. Link Back-End Application RSS Reader ini adalah: http://localhost/flex_xml_lab/rss/rss_feeder.php. Jika anda nantinya berminat dengan aplikasi ini, nantinya anda juga harus membuat sebuah Aplikasi Back-End dengan Link yang persis sama dengan Link Back-End yang saya buat.

Sementara untuk format XML yang dihasilkan oleh Back-End Application tersebut formatnya harus seperti ini:

<rss_list>
 <rss>
    <rss_id>1</rss_id>
    <label>Detik</label>
    <data>http://rss.detik.com/index.php/detikcom</data>
 </rss>
 <rss>
    <rss_id>2</rss_id>
    <label>Detik Inet (local sample)</label>
    <data>http://localhost/flex_xml_lab/rss/rss_detikinet.xml</data>
 </rss>
 <rss>
    <rss_id>3</rss_id>
    <label>Google News (local sample)</label>
    <data>http://localhost/flex_xml_lab/rss/rss_google.xml</data>
 </rss>
 <rss>
    <rss_id>10</rss_id>
    <label>Detik Inet</label>
    <data>http://www.detikinet.com/feed</data>
 </rss>
 <rss>
    <rss_id>11</rss_id>
    <label>Antara Terkini</label>
    <data>http://www.antara.co.id/rss/news.xml</data>
 </rss>
 <rss>
    <rss_id>12</rss_id>
    <label>Antara Sains Dan Teknologi</label>
    <data>http://www.antara.co.id/rss/tek.xml</data>
 </rss>
</rss_list>

Pada Back-End Application yang saya buat, saya membuat sebuah table dalam Database MySQL, dengan nama database flex_project dan tablenya bernama rss_feeder, dengan detail tabelnya seperi gambar berikut ini:

Atau anda juga bisa membuatnya dengan syntax mysql seperti berikut ini:

 
   CREATE TABLE `rss_feeder` (
      `RSS_ID` int(100) NOT NULL AUTO_INCREMENT,
      `RSS_NAME` varchar(100) NOT NULL,
      `RSS_LINK` varchar(255) DEFAULT NULL,
      PRIMARY KEY (`RSS_ID`)
   );

Kemudian untuk membuat Back-End Applicationnya pada php, saya membuat aplikasi PHP CRUD (Create, Read, Update, Delete) sederhana untuk melakukan operasi select, update, delete, dan insert  kedalam table mysql tersebut. Saya menyederhanakannya kembali dengan hanya membuat satu file php saja, dimana untuk interaksi eksekusi antara file php dan database, saya membatasinya dengan membuat sebuah paramater bernama action untuk setiap operasi database. Method HTTP yang saya gunakan dalam aplikasi ini adalah method HTTP-GET, sehingga masing-masing operasi database pada file php tersebut bisa di eksekusi dengan detail sebagai berikut:

·      Action Read rss_feeder

http://localhost/flex_xml_lab/rss/rss_feeder.php?action=read

·      Action Insert rss_feeder

http://localhost/flex_xml_lab/rss/rss_feeder.php?action=add&rss_name=[name_of_rss_source]&rss_link=[link_of_rss]

·      Action Edit rss_reader

http://localhost/flex_xml_lab/rss/rss_feeder.php?action=add&rss_id=[id_of_rss]&rss_name=[name_of_rss_source]&rss_link=[link_of_rss]

·      Action Delete rss_reader

http://localhost/flex_xml_lab/rss/rss_feeder.php?action=delete&rss_id=[id_of_rss]

Untuk mewujudkan semua methode diatas maka saya bisa membuat satu file php saja, source untuk file php tersebut adalah seperti di bawah ini:

<?php
//define database paramater
define( "DATABASE_SERVER", "localhost" );
define( "DATABASE_USERNAME", "root" );
define( "DATABASE_PASSWORD", "9mtouche9" );
define( "DATABASE_NAME", "flex_project" );
$conn = mysql_connect(DATABASE_SERVER,DATABASE_USERNAME, DATABASE_PASSWORD);
mysql_select_db( DATABASE_NAME );
//define HTTP GET paramater
$action = $_GET['action'];
$return="";
//action read
if($action=="read"){
    $query = "select * from rss_feeder";
    $res = mysql_query($query);
    //return list of rss link
    $return = "";
    while ($result = mysql_fetch_object($res)) {
              $return .="
         $result->RSS_ID
         $result->RSS_NAME
         $result->RSS_LINK
         ";
    }
    $return .= "";
    mysql_close();
}
//action add
if($action=="add"){
    $rss_name = $_GET['rss_name'];
    $rss_link = $_GET['rss_link'];
    $query = "insert into rss_feeder(RSS_NAME,RSS_LINK) values('$rss_name','$rss_link')";
    $res = mysql_query($query);
    //return list of rss link
    $return = "";
    if($res){
       $return .= "true";
    }else{
       $return .= "false";
    }          
    $return .= "";
}
//action edit
if($action=="edit"){
    $rss_id = $_GET['rss_id'];
    $rss_name = $_GET['rss_name'];
    $rss_link = $_GET['rss_link'];
    $query = "update rss_feeder set RSS_NAME='$rss_name', RSS_LINK='$rss_link' where RSS_ID='$rss_id'";
    $res = mysql_query($query);
    //return list of rss link
    $return = "";
    if($res){
       $return .= "true";
    }else{
       $return .= "false";
    }          
    $return .= "";
}
//action delete
if($action=="delete"){
    $rss_id = $_GET['rss_id'];
    $query = "delete from rss_feeder where RSS_ID='$rss_id'";
    $res = mysql_query($query);
    //return list of rss link
    $return = "";
    if($res){
       $return .= "true";
    }else{
       $return .= "false";
    }          
    $return .= "";
}
//print out result
print($return);
?>

Pada script tersebut memang untuk action selain read, action yang lainnya juga mengembalikan XML juga, karena kembalian dari masing-masing action selain read ini sifatnya boolean maka dalam aplikasi ini saya ignore/ hiraukan saja.

Demikianlah gambaran singkat aplikasi RSS Reader sederhana saya yang saya buat dengan menggunakan Adobe Flex. Saya cukup senang, karena Adobe Flex begitu mudah buat saya dan secara tampilan, output yang dihasilkan memang lebih baik dari pada Java Swing. Kemudian untuk packaging release build-nya Adobe Flex Builder juga sudah memilikinya dengan menggunakan Wizard, sungguh sebuah kemudahan buat saya.

Bagi anda yang ingin mengembangkan atau bersedia mempelajarinya bersama-sama dengan saya, dibawah ini adalah link source-source project Adobe Flex pertama saya.

1.    RSS Reader Source (Zip File)

2.    PHP Back-End Application

3.    MySQL source file.

And Please feel free to rebuild and modify with your own need and desired, and don’t forget to give back your comment through this post.

 

Menteng, 7 Maret 2009.

Semoga Bermanfaat

Josescalia