Mengubah desain button dengan skins

Pada artikel yang terdahulu, kita sudah membuat aplikasi hello world dalam 5 menit.
Artikel berikut hanya artikel ringan untuk menyempurnakan bentuk button yang ada.
Cara ini bisa Anda terapkan pada skins yang bisa Anda dapatkan secara online.


Ok, untuk mengubah desain tombol, caranya adalah sebagai berikut :
1. Download skins/css yang ada, misalnya disini
2. Buka Flash Builder, pilih File>Import Flash Builder Project.
    Dalam Dialog box Import Flash Builder Project, browse ke file HelloWorldSkins.fxp klik open,
    lalu klik finish.
3. Lihat HelloWorldSkins Project pada package explorer. Expand HelloWorldSkins project dan temukan HelloWorldSkins/src/(default package)/main.css
4. Drag file main.css dari HelloWorldSkins ke folder HelloWorld/src/(default package).

5. Dalam dialog box Move, perhatikan bahwa Anda memasukkannya ke dalam HelloWorld/src/(default package) sebagai destination folder, lalu tekan OK.

6. Bikin package skins dengan meng-klik kanan HelloWorld/src kemudian pilih New>Package. Dalam dialog box, ketik skins sebagai package name, lalu klik finish.

7. Di package explorer, copy dari folder HelloWorldSkins/src/skins file berikut:

• BackButtonSkin1.mxml
• BackButtonSkin2.mxml
• NextButtonSkin1.mxml
• NextButtonSkin2.mxml 

   Lalu paste di folder HelloWorld/src/skins yang baru Anda buat.

8. Agar skin tersebut dapat diterapkan pada aplikasi ini, masukkan kode dalam HelloWorld.mxml, dan letakkan di atas :

9. Save, lalu Run aplikasi untuk melihat perubahan yang terjadi.

10. Di dalam project yang kita import di langkah ke-2, terdapat 2 macam skins. Yang kita lakukan pada langkah diatas merupakan skin yang pertama. Jika Anda ingin mengubah ke tampilan skin yang ke-2 dengan cara :
a. Buka file HelloWorld/src/(default package)/main.css
b. Ganti :

• NextButtonSkin1 menjadi NextButtonSkin2
• BackButtonSkin1 menjadi BackButtonSkin2

 
c. Save file main.css tersebut, lalu Run aplikasi.

Ok, selesai. Sekarang Anda bisa mengubah skins tampilan aplikasi Anda.
Selanjutnya......

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. 
3. Pilih Target Platform Google Android.
4. Pada launch Method, pilih On Desktop dan pilih hp yang dituju.
5. 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......