Membuat Aplikasi Windows 8 – 6 – View State

Assalamu’alaikum :)

Topik kita selanjutnya dalam serial Membuat Aplikasi Windows 8 adalah tentang View State. Di Windows 8, ketika kita membuka aplikasi maka ada 3 pilihan ukuran untuk menampilkannya di layar. Yaitu, Snap, Fill, dan Full Screen. Di mana Full Screen juga dibagi dua menjadi Full Screen Potrait dan Landscape.

Snap and Fill

Full Screen

BTW Apps di atas adalah Apps kedua saya, “Movie Buster”. Doakan semoga bisa cepat kesubmit dan publish ya :) :)

Nah, karena sebuah Apps bisa menduduki 3 posisi layar. Maka sudah seharusnya menjadi tugas kita  untuk dapat mengupdate layout/tampilan aplikasi kita agar enak di lihat di masing-masing 3 posisi tersebut. Sebagai contohnya aplikasi di atas, ketika dalam posisi Full Screen maka kontennya akan disajikan secara menyamping (Scroll Horizontal) sedangkan kalau sedang dalam posisi Snap maka kontennya akan disajikan panjang ke bawah (Scroll Vertical). Untuk lebih jelasnya silahkan lihat video saya yang menjelaskan tentang Grid App di Membuat Aplikasi Windows 8 – 4 – Template dan Sample

Okay, untuk mendeteksi adanya perubahan View State pada aplikasi kita ada dua cara, dengan dua tujuan yang berbeda.

CSS

Fungsi dari CSS adalah untuk mengatur tata letak dan tata penyajian dari sebuah halaman web, dalam kasus kita sekarang adalah sebuah Aplikasi Windows 8. Maka dari itu, fungsi pendeteksian perubahan View State di CSS  adalah untuk mengatur layout aplikasi kita dalam semua kemungkinan yang ada. Seperti yang sudah kita lihat pada gambar di atas, tampilan Aplikasi ketika di Snap dan ketika Full Screen haruslah berbeda, karena pada posisi Snap lebar layar jauh lebih kecil.

Ketika anda membuat project baru menggunakan template apapun, maka Visual Studio akan membuatkan file default.css yang sudah berisi tempat untuk pengaturan layout berdasarkan View State aplikasi kita. Misalnya saja ini saya ambil dari Blank App template:

Kita dapat mengatur tata letak dan tata penyajian aplikasi kita di situ yang sudah berdasarkan View Statenya.  Misalnya ketika di Snap kita atur menjadi scrolling ke bawah, ketika full screen landscape kita atur menjadi scrolling ke samping, dan sebagainya.

NOTE: Cara ini tidak didukung lagi di Windows 8.1, tetapi masih bisa di Windows 8. Untuk di Windows 8.1 gunakan max-width dan min-width untuk mendeteksi perubahan View State.

JavaScript

Berbeda dengan pendeteksian perubahan View State pada CSS, di JavaScript lebih ditujukan ke pemogramannya. Misalkan saja ketika user men-snap aplikasi kita yang berbentuk Game. Secara logika Game kita tidak akan dapat dimainkan dengan baik pada posisi Snap bukan? Maka dari itu kita harus mem-pause game kita dan menampilkan kepada user bahwa Game kita harus dimainkan dalam posisi Full Screen atau paling tidak Fill.

Contoh ilustrasinya (Game Cut The Rope):

Pause Game Cut The Rope

Semua keterangan mengenai View State disimpan dalam Library   Windows.UI.ViewManagement .
Untuk enumerasi apa saja View State yang tersedia ada di Windows.UI.ViewManagement.ApplicationViewState, dengan value .snapped   .filled   .fullScreenLandscape   .fullScreenPotrait

Ketika user mengubah View State aplikasi kita maka event  resize akan dijalankan, maka dari itu kita harus membuat sebuah EventListener yaitu dengan cara:

window.addEventListener("resize", onResize);

Lalu kita membuat fungsi onResize() tersebut dan mendeteksi sedang berada dalam View State apa sekarang user kita:

Kode di atas diambil dan dimodifikasi sedikit pada bagian bawahnya dari Windows 8 Apps samples – SnapSample

Dan itulah cara kita meng-handle perubahan View State pada aplikasi kita. Hal ini wajib diperhatikan karena ini merupakan salahs atu dari persyaratan Aplikasi yang bisa masuk Store oleh Microsoft, khususnya pada Section 3.6.

Sekian dari saya, see you next time!

Referensi:
Kraig Brockschmid. Programming Windows 8 Apps with HTML, CSS, and JavaScript, 2012.
http://msdn.microsoft.com/en-us/library/windows/apps/hh465826.aspx

AbangFadli, out :cool:

Wassalamu’alailum :kr

Ilmu jangan disimpan sendiri, bagikan ke teman-teman anda:

Comments

comments

Ahmad Fadli Basyari

Mahasiswa IT di President University. Memiliki hobi membuat aplikasi mobile, blogging dan menonton film.

Leave a Reply

Your email address will not be published. Required fields are marked *

CAPTCHA *

[+] kaskus emoticons nartzco