Sabtu, 02 Juli 2011

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.

Tidak ada komentar:

Posting Komentar