Afief Yona Ramadhana

Ketika kita membuat mobile project baru di Flash Builder 4.5. Kita akan diberikan 3 pilihan template tampilan aplikasi mobile. yaitu Blank, View-Based Application, dan Tabbed Application. Kalau blank, sudah jelas kita akan diberikan tampilan kosong. Sedangkan untuk View-Based Application, akan ada title bar di bagian atas yang juga bisa berfungsi sebagai navigator.  Sedangkan Tabbed Application lebih komplit lagi, ada menu ‘tab’ di bagian bawahnya untuk mempermudah navigasi.

Ketika kita telah selesai menyiapkan project kita dengan View-based Application, maka secara otomatis akan muncul 2 buah dokumen kerja kita. Yang pertama yaitu “[nama_project].xml”, sedangkan yang kedua yaitu “viewbased[judul_initial_view]view.xml”. Initial View merupakan judul dari tampilan awal project kita yang dapat kita atur namanya pada saat memulai membuat project di bagian initial view title.

pada tampilan awal view tersebut, kode nya adalah sebagai berikut :

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
		xmlns:s="library://ns.adobe.com/flex/spark" title="tampilanAwal">
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
</s:View>

Pada properti title, kita dapat merubah judul halaman awal kita. Judul tersebut akan muncul pada bagian atas tampilan halaman awal kita seperti pada gambar berikut

Membuat Halaman Lain

untuk membuat halaman lain, kita perlu membuat sebuah komponen view baru pada project kita. Untuk melakukannya, klik kanan pada package view, pilih new, dan pilih MXML Component.

Berikan nama pada bagian “Name”, lalu klik finish.

Membuat Tombol Navigasi dari Halaman Awal ke Halaman kedua

Pada halaman awal, kita bisa menambahkan tombol navigasi di sebelah kanan atau sebelah kiri judul halaman awal. Apabila di sebelah kiri judul, maka disebut Navigation Content dan kode untuk tombolnya

<s:navigationContent>
	<s:Button label="Pindah" click="keTampilan2(event)"/>
</s:navigationContent>

kode diatas akan menampilkan tombol navigasi seperti pada gambar berikut

tombol di sebelah kanan disebut dengan action content, kodenya yaitu

<s:actionContent>
	<s:Button label="Pindah" click="keTampilan2(event)"/>
</s:actionContent>

dan tampilannya 

pada tombol tersebut, terdapat action ‘click’ yang merujuk pada fungsi keTampilan2(event). maka kita perlu menambahkan 1 buah fungsi pada tampilan awal kita. kodenya yaitu

	<fx:Script>
		<![CDATA[
			protected function keTampilan2(e:MouseEvent):void {
				navigator.pushView(views.tampilan2);
			}
		]]>
	</fx:Script>

navigator berfungsi untuk mengganti tampilan ke tampilan yang lain dengan menggunakan fungsi pushView(). views.tampilan2 merupakan tampilan yang akan ditampilkan ketika fungsi tersebut berjalan. ketika kita memasukkan code views kemudian titik (views.) maka akan keluar code hint yang berisi daftar tampilan – tampilan yang telah kita buat dan yang ada di dalam package views di project kita.

Kembali ke tampilan Awal
Pada tampilan2, akar kita dapat kembali ke tampilan awal lagi, maka kita perlu membuat tombol yang sama, hanya saja pada navigator, masukkan fungsi .popToFirstView(); sehingga fungsi kembali ke tampilan awal yaitu

protected function keTampilan2(e:MouseEvent):void {
	navigator.popToFirstView();
}

demikian sedikit penjelasan mengenai View-Based Application pada Flash Builder 4.5. Semoga dapat membantu 🙂