Top Banner
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
11

Membuat Applikasi Android Sederhana Menggunakan Adobe Flash Builder

Jan 15, 2016

Download

Documents

adrigiovanni

Membuat Applikasi Android Sederhana Menggunakan Adobe Flash Builder
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Membuat Applikasi Android Sederhana Menggunakan Adobe Flash Builder

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

Page 2: Membuat Applikasi Android Sederhana Menggunakan Adobe Flash Builder

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

Page 3: Membuat Applikasi Android Sederhana Menggunakan Adobe Flash Builder

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.

Page 4: Membuat Applikasi Android Sederhana Menggunakan Adobe Flash Builder

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.

Page 5: Membuat Applikasi Android Sederhana Menggunakan Adobe Flash Builder

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.

Page 6: Membuat Applikasi Android Sederhana Menggunakan Adobe Flash Builder

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

Page 7: Membuat Applikasi Android Sederhana Menggunakan Adobe Flash Builder

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.

Page 8: Membuat Applikasi Android Sederhana Menggunakan Adobe Flash Builder

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

Page 9: Membuat Applikasi Android Sederhana Menggunakan Adobe Flash Builder

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.

Page 10: Membuat Applikasi Android Sederhana Menggunakan Adobe Flash Builder

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,

Page 11: Membuat Applikasi Android Sederhana Menggunakan Adobe Flash Builder

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