Membuat Aplikasi Windows 8 – 10 – App Setting di Charm Bar

Assalamu’alaikum :)

Masih di postingan serial Membuat Aplikasi Windows 8. Pada post ke-10 ini saya akan membahas bagaimana caranya membuat menu untuk setting untuk aplikasi kita di Charm Bar. Untuk mengakses Charmbar anda tinggal mengslide dari tepi kanan ke kiri (kalau yang punya tablet / PC dengan touch) atau kalau dengan mouse di arahkan ke pojok kanan atas sehingga ada beberapa Icon keluar. Lalu pilih Setting. Contoh dari menu Setting dari aplikasinya bisa dilihat pada gambar di bawah:

Windows 8 Setting Bar

Untuk About Us, Privacy Policy, dan How To Play  adalah menu yang ditambahkan dari Script (Coding). Sedangkan Permission sudah default pasti ada, dan Rate and review adalah menu yang ditambahkan apabila Applikasi kita berhasil masuk ke Windows Store.

Dan ketika kita pilih salah satu (misal saya pilih How To Play), maka akan keluar menu seperti di bawah ini:

Setting Content Windows 8

Lalu gunanya untuk apa? Banyak, kalau untuk Game bisa untuk mengatur Setting misal Music On atau Off, Sound On atau Off. Bisa juga ditaruh untuk penjelasan tentang bagaimana cara memakai aplikasi kita. Dan lain-lain.

Ada beberapa Guideline untuk menambahkan App Setting di Charm Bar. Info lengkap mengenai Guideline tersebut bisa dilihat di http://msdn.microsoft.com/en-us/library/windows/apps/hh770544.aspx

Okay, enough with the chit chat and let’s have some coding!

Microsoft sudah menyediakan contoh dari penggunaan App Setting ini di salah satu sample di Windows 8 app samples yang berjudul App setting example.

Okay, sebelum kita mulai, saya harus kasih tau bahwa App Setting itu sebenarnya adalah sebuah file HTML. Jadi tugas kita di sini dibagi menjadi 2:

  1. Membuat file HTMLnya yang berisi class SettingsLayout
  2. Menghubungkan / menambahkan file HTML tersebut ke dalam App Setting kita.

Membuat File HTML dengan Class SettingsLayout

Buat sebuah folder baru di dalam folder “pages” dan beri nama folder baru tersebut “Settings” atau apapun itu yang mencerminkan bahwa direktori ini akan berisi HTML-HTML yang digunakan untuk setting.

Buat file HTML baru di dalam folder Settings tersebut, misalkan namanya “howTo.html“. Usahakan jangan menggunakan spasi. Isi dari HowTo.html adalah:

Kita bisa memasukkan berbagai macam element seperti check box, switch, rating, tombol / button dll ke dalam Setting Flyout / App Setting ini. Tinggal masukkan saja ke dalam div dengan kelas win-content

Menambahkan Setting di JavaScript

Nah, kita sudah memiliki halamannya. Sekarang kita tinggal menghubungkannya ke JavaScript. Cara menghubungkannya kita memiliki 2 langkah, yaitu membuat list App Setting kita sebagai sebuah Object di JavaScript. Lalu memasukkannya ke dalam system.

Pertama kita buat objectnya (letakkan kode berikut tepat sebelum app.start();

Perlu diperhatikan di sini bahwa sebuah object App Setting haruslah memiliki 3 kriteria, pertama nama, yang kedua judul yang akan ditampilkan, yang ketiga adalah URI dari App Setting tersebut.

nama: Harus sesuai dengan yang kita set sebagai value dari setttingCommandId.
title: Judul yang akan ditampilkan
href: URI Halaman yang akan dituju.

Setelah kita buat, kita tambahkan kode ini tepat di bawahnya.

Lalu coba jalankan.

App Setting Example

Untuk live demonya silahkan lihat video di bawah ini:

Okay, sekian penjelasan sederhana dari saya. Kalau ada yang mau ditanyakan jangan sungkan, kalau ada yang salah dari cara saya mohon dibenarkan.

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

AbangFadli, out :cool:

Wassalamu’alaikum :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