Sabtu, 02 Juli 2011

"Hello World" dengan Flash Builder

Setelah Anda mengenal Flash Builder, kita lanjutkan untuk membuat aplikasi sederhana berupa "Hello World".
Ketika kita membuat Flex Mobile project, Flash Builder akan secara otomatis membuat 2 file:

  • NamaProject.mxml
  • merupakan file aplikasi untuk project ini. Jangan tambahkan konten pada file ini secara langsung (kecuali Anda akan menambah konten yang akan ditampilkan diseluruh file dalam project ini). Dimana NamaProject adalah nama project yang Anda isikan pada form awal pembuatan project.
  • NamaProjectHomeView.mxml
  • file ini menampilkan Home screen pada aplikasi, ketika user membuka aplikasi ini. File ini berada pada package "views".
Menambahkan kode "Hello World" pada project
Sekarang aplikasi kita hanya sebuah container kosong, kecuali beberapa informasi mengenai layout default. Waktunya untuk menambahkan beberapa text di screen dan button di bawahnya yang menampilkan sesuatu ketika kita pencet.
pastikan tab HelloWorldHomeView.mxml terlihat dalam Flash Builder. (Jika tidak, double-click HelloWorldHomeView.mxml dalam package explorer di samping kiri project window). Masukkan beberapa baris kosong di atas tag . Ketik kode di bawah ini :

<s:VGroup width="100%" height="100%" verticalAlign="middle" horizontalAlign="center">
<s:Label text="Hello, World!"/>
<s:Button label="Continue" click="navigator.pushView(MyNewView)" styleName="next"/>
</s:VGroup>

Kemudian SAVE project ini.















Perhatikan Kode di atas pada baris ke-3 terdapat kode untuk menampilkan button "Continue" 
pada screen "MyNewView". 
Padahal kita belum memiliki screen yang dituju, oleh karena itu kita harus membuatnya.
Cara membuatnya dengan :
  1. Pilih File>New>MXML Component. Anda akan lihat kotak dialog New MXML.
  2. Pastikan "HelloWorld/src" tampak sebagai source folder. 
  3. Jika tidak, klik Browse untuk memilih project HelloWorld.
  4. Ketik views sebagai package-nya, bila belum tampak disana.
  5. Pada Name, ketik "MyNewView".
  6. Klik Finish

 Screen MyNewView sudah kita buat, lalu kita masukkan kode di bawah ini :
 
 Kemudian SAVE project ini.
Semua kode sudah kita masukkan, sekarang tinggal menguji aplikasi tersebut jalan atau tidak.
Gimana cara menjalankan aplikasi tersebut ? mudah saja :
  1. Klik tombol Run.
  2. Pilih Target Platform Google Android.
  3. Pada launch Method, pilih On Desktop dan pilih hp yang dituju.
  4. Klik Run.
Sekarang seharusnya aplikasi sudah berjalan di layar emulator.
Klik tombol Continue pada emulator;
seharusnya tampil screen yang kedua, Klik tombol Back.

Selamat, Anda sudah dapat membuat aplikasi HelloWorld pada mobile.
Silakan ulang dari awal, jika Anda ingin lebih memahaminya lagi sebelum kita melangkah 
ke pembuatan aplikasi lebih lanjut.

Tidak ada komentar:

Posting Komentar