Flash Builder - Bikin Button di ActionBar

Pada posting sebelumnya kita sudah membuat aplikasi Hello World dan mengkostumisasi skin pada button continue dan back-nya.

Pada tutorial ini kita bikin button tersebut pada action bar, sehingga space pada jendela aplikasi lebih luas.
Sebelum melangkah ke pembuatannya, ada baiknya kita ketahui dulu apa itu actionBar?

ActionBar adalah Bar yang terletak pada bagian atas aplikasi yang berbasis viewNavigator.


Ada 3 bagian dalam actionBar:
1. navigationContent: terletak di sebelah kiri
2. titleContent: terletak di tengah
3. actionContent: terletak di sebelah kanan

Inilah langkah - langkah untuk membuatnya:
1. Buka Flash Builder
2. Expand project HelloWorld/src/(default package) yang terletak di package explorer.
3. Buka HelloWorld.mxml, klik design view.
4. Drag component button ke sisi sebelah kiri ActionBar (pada navigationContent)
5. Pada bilah Properties, ganti label "Button" menjadi "Home", dan ketik pada click: "navigator.popToFirstView()"

6. Drag component button ke sisi sebelah kanan ActionBar (pada actionContent)

7. Pada bilah Properties, ganti label "Button" menjadi "Next", dan ketik pada click: "navigator.pushView(views.MyNewView)"

8. Tekan Ctrl + S untuk menyimpan perubahan.

    Jika kita Run, maka pada actionBar akan muncul tampilan seperti yang kita inginkan.

    Akan tetapi ada beberapa tampilan yang kita tidak inginkan ikut muncul juga, seperti:

a. Button Continue dan Back di tengah layar

b. Button Home tampil pada screen awal

c. Button Next tampil pada MyNewView

Mari bersama kita atasi masalah - masalah tersebut dengan cara :

1. Untuk mengatasi masalah a, sangatlah mudah.

    Buka HelloWorld/src/views/HelloWorldHomeView.mxml, masuk design view lalu hapus button Continue. Hal yang sama juga kita lakukan pada HelloWorld/src/views/MyNewView, masuk design view dan hapus button Back (klik pada button, tekan delete).

    Mudah kan?

2. Untuk mengatasi masalah b, tidak sukar juga.

    Buka HelloWorld/src/views/HelloWorldHomeView.mxml, masuk source view lalu ketik Kode <s:navigationContent/> pada baris di atas </s:View>. (perhatikan huruf n pada navigation bukan CAPITAL, tidak sama dengan NavigationContent, juga tidak sama dengan NavigatorContent)

3. Untuk mengatasi masalah c, hampir sama dengan sama dengan cara ke-2.

    Buka HelloWorld/src/views/MyNewView.mxml, masuk source view lalu ketik Kode <s:actionContent/> pada baris di atas </s:View>.

4. Save, lalu Run aplikasi. Selesai

Demikian tutorial tentang editing pada actionbar dan solving pada masalah kecil yang terjadi.

Sampai bertemu dengan tutorial selanjutnya....