membuat applikasi android sederhana menggunakan adobe flash builder
DESCRIPTION
Membuat Applikasi Android Sederhana Menggunakan Adobe Flash BuilderTRANSCRIPT
Gilang Abdul Aziz – Tutorial 1 – http://Ltheordinary.blogspot.com | 1
Membuat Aplikasi Android sederhana menggunakan Adobe Flash
Builder “Burrito” dengan SDK Flex “Hero”
Oke selamat berjumpa rekan-rekan sekalian.. Ini adalah tutorial pertama saya tentang
teknologi Adobe Flash Platform for Mobile Solution.
Ada beberapa hal fundamental yang harus kita pahami terlebih dahulu sebelum turun untuk
coding, hehe. Pertama adalah bahwa perkembangan Android sedang sangat pesat sekali,
sehingga membuat iri para pesaingnya. Kedua adalah bahwa Adobe dan Android melakukan
kesapakatan sehingga aplikasi berbasis Adobe AIR bisa running-well di platform Android. Itu
yang harus kita pahami dulu.
Sekarang kita tahu bahwa Aplikasi berbasis Adobe AIR bisa berjalan di Android, itu adalah
modal pertama kita untuk membuat Aplikasi Android menggunakan Adobe Flash Builder
“Burrito” dengan SDK Flex “Hero”.
Oke kita langsung praktekan.
1 -> Pastikan PC anda telah terinstall Adobe Flash Builder “Burrito”. (Jika belum, bisa
diunduh di sini) SDK Flex “Hero” sudah terinclude secara default bersama Adobe Flash
Builder “Burrito”.
Tutorial. Intermediate – Android – Adobe Flash Platform
Gilang Abdul Aziz, Mobile & Web Developer | 3D Engineer | Adobe Flash Platform Freak [email protected] http://twitter.com/Ltheordinary http://Ltheordinary.blogspot.com
Gilang Abdul Aziz – Tutorial 1 – http://Ltheordinary.blogspot.com | 2
2 -> Selanjutnya kita buka Adobe Flash Builder “Burrito”
3 -> Buat project baru, pilih Flex Mobile Project
Gilang Abdul Aziz – Tutorial 1 – http://Ltheordinary.blogspot.com | 3
4 -> Isi nama project terserah anda, saya coba dengan nama “helloKita”
Penyimpanan project bisa disesuaikan dengan keinginan anda, dan jangan lupa pastikan
bahwa SDK yang kita pakai adalah Flex “Hero”.
5 -> Selanjutnya atur settingan mobile untuk aplikasi yang akan kita buat.
Pastikan bahwa pada Target platforms terpilih Google Android dant template nya adalah
Mobile Application serta jangan lupa pada Application Setting terpilih Automatically
reorient.
Gilang Abdul Aziz – Tutorial 1 – http://Ltheordinary.blogspot.com | 4
6 -> Selanjutnya kita memilih settingan server. Biarkan saja default karena aplikasi yang kita
buat tidak membutuhkan interaksi dengan server.
8 -> Selanjutnya kita atur build paths, saya lebih senang membiarkannya scara default saja.
Gilang Abdul Aziz – Tutorial 1 – http://Ltheordinary.blogspot.com | 5
Oke DONE! Langkah-langkah untuk membuat project baru sudah dilewati dengan aman, jika
sudah benar maka secara default Adobe Flash Builder “Burrito” akan langsung menampilkan
halaman helloKita.mxml yang merupakan halaman utama dari aplikasi yang akan kita buat.
Tampilan di atas adalah mode source code, kita juga bisa merubahnya ke dalam mode
desain. Maka muncul worksapce seperti di bawah ini.
9 -> Selanjutnya kita akan mendesain GUI untuk aplikasi yang akan kita buat ini. Tapi
sebelum itu, kita pilih jenis device yang akan kita gunakan sebagai template ukuran untuk
aplikasi yang akan kita buat ini. Di sebelah atas ada pilihan Device, di sana tersedia berbagai
yang ber-platform Android, kita tinggal pililh salah satu.
Gilang Abdul Aziz – Tutorial 1 – http://Ltheordinary.blogspot.com | 6
Saya coba untuk memilih Google Nexus One. Hehe :D
10 -> Coba kita ubah title pada halaman utama kita, menjadi “HelloKita”. Caranya kita klik
pada bagian tengah stage, kemudian pada properties kita ubah Title nya.
Kalo sudah benar, maka title Home pada stage akan berubah menjadi HelloKita.
11 -> Selanjutnya kita masukan beberapa komponen, yang pertama kita masukan sebuah
InputText ke dalam stage. Ada beberapa cara, bisa kita mendeklarasikan melalui mode
Gilang Abdul Aziz – Tutorial 1 – http://Ltheordinary.blogspot.com | 7
source code, tentunya dengan mxml, atau kita langsung drag & drop pada mode desain. Kita
coba pada mode desain saja ya, biar gampang.. hehe :D
Di sebelah kiri bawah, ada Components, kita pilih text input, kemudian kita drag & drop
komponen tersebut ke stage.
Jangan lupa kita beri ID untuk komponen ini, karena nanti akan digunakan saat melakukan
aksi yang tentunya berinteraksi dengan ActionScript 3.0 (bagusnya setiap komponen kita
beri ID supaya lebih mantap)
12 -> Seperti pada langkah 11 di atas, kita masukan komponen Label, kita beri ID txt_hello.
Atur penempatan dan ukuran dari label tersebut sesuai dengan keinginan kita.
Gilang Abdul Aziz – Tutorial 1 – http://Ltheordinary.blogspot.com | 8
13 -> Selanjutnya kita masukan juga komponen Button ke Stage, kita beri ID btn_hello, Atur
juga penembaptan dan ukurannya sesuai dengan yang kita ingin kan.
Setelah langkah 12 dan 13 dilewati, maka stage akan jadi seperti di bawah ini.
Setelah semua komponen yang kita butuhkan sudah kita tempatkan di Stage dengan pas
dan mantap, selanjutnya kita akan sedikit coding untuk memberikan sentuhan, hehe.
Sekenario nya, kita akan membuat agar aplikasi ini sedikit interaktif. Saat kita memasukan
nama pada input text yang tersedia, kemudian tombol ditekan, maka akan keluar teks pada
label yang sudah kita buat “Hello, [nama]”.
Oke deh kita langsung turun panggung nih.. hehe :D
14 -> Ubah ke mode source code terlebih dahulu. Pada mode ini kita akan melihat tag-tag
mxml yang mendeklarasikan komponen yang ada pada stage. Kita pahami dulu sejenak
properties-properties yang nampak pada tiap tag nya. Hehe :D
Kita lihat bahwa terdapat properties x dan y. Itu sangan memudahkan kita dalam
penempatan komponen di stage, tentunya sangat berbeda dengan jika membuatnya
menggunakan Eclipse, hehe :D
Gilang Abdul Aziz – Tutorial 1 – http://Ltheordinary.blogspot.com | 9
15 -> Selanjutnya kita akan mendeklarasikan beberapa fungsi, tentunya menggunakan
bahasa pemrograman ActionScript 3.0 yang sangat keren, hehe.
Oke pertama kita akan membuat fungsi initialState() yang diperuntukan untuk mengatur
kondisi awal dari aplikasi ini pada saat dijalankan.
Jangan lupa untuk memasukan fungsi initialState() ke dalam properties di tag <s:View !
Bisa dilihat bahwa masih ada error pada baris pengisian event listener, knp? Karena fungsi
onHello() yang kita panggil pada pengisian event listener belum ada. So..
16 -> Selanjutnya kita akan membuat fungsi onHello() yang merupakan kondisi pada saat
button hello ditekan.
Gilang Abdul Aziz – Tutorial 1 – http://Ltheordinary.blogspot.com | 10
Hoho.. error nya hilang kan? Yo mari kita test aplikasi yang kita buat ini, meski cukup
sederhana tapi lumayan lah buat belajar mah.. hehe :D
17 -> Kita coba untuk melakukan test ato debugging pada aplikasi ini, pada first-run, kita
akan diberikan opsi untuk memilih metode yang akan digunakan saat menjalankan aplikasi
ini.
Pastikan launch method nya adalah on desktop (karena kita akan menjalankan di PC bukan
pada device yang dimaksud), dan pilih Google Nexus One sebagai Virtual Device nya. Lalu
Apply kemudian klik Run! (settingan ini bisa kita ubah pada Run Configuration)
Maka akan tampil aplikasi yang sudah kita buat tadi,
Gilang Abdul Aziz – Tutorial 1 – http://Ltheordinary.blogspot.com | 11
18 -> Selanjutnya kita cek event pada button yang telah kita buat tadi, coba masukan nama
anda pada input text yang tersedia kemudian klik tombol hello!
Terima kasih, semoga tutorial ini bermanfaat. Sampai berjumpa kembali di tutorial-tutorial
sederhana berikutnya. Karena Knowledge is for share..
Gilang Abdul Aziz
–Made on a PC