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