Flex 4 SDK dengan Eclipse IDE, Solusi Gratis

Berawal dari tutorial dari teman yang saya posting beberapa hari yang lalu mengenai WebGIS menggunakan Flex. Anda akan lihat bahwa kita memerlukan software dengan harga yang tidak sedikit, anda memerlukan ArcGIS Desktop dan ArcGIS Server , dan tentu saja Adobe Flash Builder sebagai IDE untuk pembuatan widget-widget di webgisnya nanti. :cd

Nah untuk alternatif platform ArcGIS Server yang gratis akan kita bahas nanti saja, karena itu merupakan pembahasan yang sangat berbeda dan tidak terkait dengan tutorial webgis dengan Flex, disini kita fokus untuk mencari versi alternatif dari IDE untuk Flex yang gratisan :malu:

Berawal dari iseng,saya search di mbah google, akhirnya ketemu artikel mengenai mengkombinasikan antara FLEX SDK dengan Eclipse IDE. perlu diketahui, untuk SDK FLEX sendiri anda dapat mendownload dan menggunakannya secara gratis, tetapi IDE dari Adobe untuk membangun aplikasi FLEX itu berbayar, nah bagaimana kalo IDEnya kita ganti dengan Eclipse saja yang gratis ? bukannya kita bisa mendapatkan solusi IDE FLEX yang gratis, :ngakak

Apa yang dibutuhkan :

1. FLEX 4 SDK

2. ECLIPSE IDE

Anda direkomendasikan menggunakan Eclipse Classic (links di atas) atau jika familiar dengan PHP anda dapat mendownload Eclipse untuk PHP  DISINI. install Eclipse di tempat yang anda suka dan ekstrak flex SDK di tempat yang mudah di akses. pada tutorial kali ini digunakan windows Vista dan SDK di ekstrak pada folder C:\AdobeSDK\Flex\4.0

Buka eclipse dan mulai proyek baru dengan mengklik File -> New -> Project. wizard “New Project” akan terbuka, pilih “project” dari grup “general” pada daftar dan klik “next”

 

Pada contoh kali ini kita namai proyek kita “Test Project.” tulis pada kolom nama proyek di bagian atas, dan beri centang pada “Use default location” dan klik “Finish”

 

Eclipse akan membuat proyek baru dan menambahkan ke explorer proyek anda. Kita akan meniru struktur standar folder yang digunakan Flex Builder dan membuat tiga subfolder kedalam proyek kita dengan nama “bin,” “libs” dan “src.”. Klik kanan pada folder proyek anda dan pilih “new” dan klik pada “new folder” masukkan “bin” pada nama foldernya dan klik “finish”. lakukan ini untuk membuat dua folder lainnya, yaitu untuk “libs” dan “src”

 

folder bin digunakan untuk menyimpan file swf hasil kompilasi. folder libs digunakan untuk menyimpan librari file swc yang digunakan proyek, sedangkan folder src digunakan untuk menyimpan semua source code proyek anda. Sebelum kita lanjutka, direkomendasikan untuk menambah editor untuk ekstensi file .as pada Eclipse dan mengasosiasikan dengan Java Editor, karena Actionscript 3 sangat mirip syntaxnya. Untuk melakukannya klik “window” pada menu, ini akan mengeluarkan window dialog “preferences”. expand pada node “General” dan expand pada “editors”, klik pada “File Assosiations” untuk memunculkan panel asosiasi file. Setelah masuk ke panel, klik tombol “Add…” di sebelah daftar “File types”

 

masukkan “.as” pada kolom “File type” dan klik OK. tipe file akan ditambahkan pada daftar, jangan lupa untuk menseleksinya dengan mengkliknya

 

Selanjutnya, klik tombol “add…” pada daftar ‘assciated editors”, yang seharusnya kosong. Pastikan opsi “Internal editors” diseleksi dan kemudian pilih “Java Editor” dari daftar. kemudian klik OK

 

Asosiasi editor yang baru akan tampil pada kolom “Associated editors”. Klik OK dan keluar dari menu Preferences

 

Sekarang kita akan membuat file MXML yang akan mendefinisikan layout dan kenampakan aplikasi kita. Dan berfungsi juga sebagai “entry point” yang digunakan compiler ketika melakukan linking. Klik kanan pada folder src, pilih “New” dan klik “File”. window “new File” akan muncul. pada tutorial kali ini akan dinamakan application.mxml

 

file application.mxml akan berada pada folder src dan editor akan secara otomatis membukanya. karena ini bukan mengenai tutorial flex, kita akan secara langsung memberikan kerangka dari format MXML Flex 4 untuk dites pada compiler. masukkan kode berikut pada window editor application.mxml :

<?xml version=”1.0″ encoding=”utf-8″?>
<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:Application>

Sekarang kita akan membuat builder untuk proyek kita. klik kanan pada folder proyek kita, kemudian klik “Properties”. pada daftar sebelah kanan klik Builder dimana kita bisa mensetting compiler.

Klik “New…” untuk membuat builder yang baru. windows akan muncul dengan “Program” pada daftar. pilih kemudian klik OK

ini akan memunculkan window “edit Configuration”. Sekarang anda harusnya ada di tab “Main”. Pada bagian atas ada kolom “Name” yang diisi nama builder kita. Karena ini merupakan langkah yang terus akan diulang setiap kali kita membuat proyek, maka direkomendasikan untuk membuat penamaan yang sama dengan proyeknya sehingga kita tau peruntukan untuk setiap builder. Oke kita namai dengan “Test Project” lali klik pada “Browse File System…” kemudian navigasikan ke folder dimana anda mengekstrak FLEX 4 SDK dan tunjukkan pada folder bin, pilih mxmlc.exe. klik pada tombol “Browse Workspace…” kemudian pilih direktori proyek anda. kemudian yang terakhir definisikan argumen untuk kompiler kita. pada kolom argumen, masukkan :

src/application.mxml -output=bin/application.swf -library-path+=libs/ -target-player=10.0.0

NOTE : UNTUK FLEK SDK 4.5 Adobe mengharuskan untuk menggunakan flash player 10.2 , untuk itu ganti target player pada skrip di atas dengan versi yang sesuai yaitu 10.2.0

Setelah memasukkan opsi di atas, window akan nampak seperti di bawah ini :

Sebelum mengklik tombol OK, ada beberapa opsi yang sangat berguna, pada tab “Build Options” pilih opsi “Launch in background” dan “During auto builds”.  ini akan membuat proyek terkompile setiap kali kita menyimpannya. Sangat berguna jika kita ingin mendapatkan feedback dari compiler apakah ada kesalahan kode. tetapi untuk proyek data SWF yang sangat besar, opsi ini sangat tidak disarankan

klik OK, maka proyek akan ter compile, jika semuanya berjalan benar maka pada console compiler akan keluar notifikasi seperti ini :

Loading configuration file C:\AdobeSDK\Flex\4.0\frameworks\flex-config.xml
C:\Users\Sean\workspace\Test Project\bin\application.swf (37842 bytes)

Jika anda tidak melihat error dengan warna merah, maka kompilasi berjalan dengan sempurna, dan anda mempunya IDE Flex di Eclipse anda, happy coding :cendolbig

Source : Sean Smith Blog

Tinggalkan Pesan