Tampilkan postingan dengan label HelloWorld. Tampilkan semua postingan
Tampilkan postingan dengan label HelloWorld. Tampilkan semua postingan

Sabtu, 02 Juli 2011

Bikin Aplikasi dalam 5 menit

Jika Anda sudah paham atas tutorial awal tentang FB yang terdahulu, cara dibawah merupakan cara tercepat untuk membuat aplikasi menggunakan FB .
Langsung aja  :

1. Buka Flash Builder [FB; punya ane versi 4.5.1]
2. Pilih File>New>Flex Mobile Project
3. Kasih nama "HelloWorld", klik Next, lalu klik finish.

4. Klik design, untuk memilih design view.

5. Pilih Motorola Droid Pro pada device (terserah agan sih mau pilih apa)
6. Pilih Component "Label" pada daftar components (sudut kiri bawah), dan letakkan di tengah layar

7. Double klik tulisan label, lalu ganti dengan Hello World!.

8. Seperti langkah ke-6, sekarang pilih component "button" dan tempatkan di bawah label Hello World!.

9. Double klik tulisan button, lalu ganti dengan "Continue".
10. Pada bilah properties (kanan bawah), klik dibelakang tulisan click lalu isikan "navigator.pushView(views.MyNewView)" (tanpa tanda " ")

11. Klik kanan pada package views dalam package explorer (sebelah kiri tampilan utama), lalu pilih New>MXML component.
 
12. Beri nama "MyNewView", lalu klik finish.

13. Pilih tabs HelloWorldHomeView.mxml, lalu blok label dan button yang tadi kita buat, kemudian klik kanan dan pilih copy.

14. Paste pada MyNewView lalu ganti Hello World! dengan Success dan ganti juga Continue dengan Back.

15. Ulangi langkah 10, ganti dengan "navigator.popView()"
16. Run Aplikasi dengan menekan tombol Run (warna hijau) dan pilih Device Motorola Droid Pro (atau yang lain terserah agan).
 
17. Selesai. Coba agan klik continue, lalu tampil layar ke-2 dan klik back.
      Gampang kan gan??
Selanjutnya......

"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.

Selanjutnya......