Windows8 eBook

ii

prakata

Puji syukur kepada Allah SWT yang telah memberikan kesempatan dan kekuatan untuk menyusun

dan menyelesaikan buku elektronik yang berjudul “Membuat Aplikasi untuk Windows 8”. Penulis

mengucapkan terima kasih kepada keluarga yang selalu sabar membimbing penulis. Penulis juga

mengucapkan terima kasih yang mendalam kepada Ronald Rajagukguk dan Narenda Wicaksono yang

telah mengenalkan penulis kepada dunia komunitas dan menjadi inspirasi penulis untuk terus belajar

dan mengembangkan diri. Tidak lupa ucapan terima kasih kepada tim DPE Microsoft Indonesia,tim

Nokia Indonesia staf dan dosen Teknik Informatika ITB, rekan-rekan di Microsoft Innovation Center

ITB, Microsoft User Group Indonesia, M Reza Faisal untuk foto-foto yang digunakan di buku ini,

Irlanda, serta berbagai pihak yang tidak dapat penulis sebutkan satu per satu.

Buku elektronik ini disusun untuk menyambut sistem operasi terbaru Microsoft yaitu Windows 8.

Pembaca dapat mempelajari apa itu Windows 8, Windows Runtime (WinRT) dan bagaimana

perbedaan membangun aplikasi Windows 8 dengan aplikasi yang lain, bagaimana menggunakan

kakas untuk mengembangkan aplikasi Windows 8, fitur-fitur yang tersedia dan diakhiri dengan

contoh aplikasi sederhana untuk Windows 8. Dengan adanya buku elektronik ini diharapkan para

pengembang aplikasi dapat mempelajari platform tersebut untuk mengembangkan aplikasi.

Pengetahuan tentang bahasa C# dan XAML akan sangat membantu meskipun bukan menjadi

keharusan untuk dapat mempelajari buku elektronik ini. Contoh kode dan proyek buku ini dapat

diperoleh di : http://win8ebook.codeplex.com/ .

Akhir kata, penulis mengucapkan selamat membaca dan semoga buku elektronik ini bermanfaat dan

dapat menjadi langkah awal bagi pembaca dalam mempelejari pengembangan aplikasi untuk

Windows 8.

Bandung, 31 Januari 2013

Penulis

http://win8ebook.codeplex.com/

iii

daftar isi

prakata ......................................................................................................................................................................................... ii

daftar isi ......................................................................................................................................................................................iii

WINDOWS 8 ............................................................................................................................................................................. 1

Windows reimagined ........................................................................................................................................................ 2

Windows Runtime .............................................................................................................................................................. 3

Lingkungan Eksekusi Aplikasi Windows 8 ................................................................................................................ 4

Windows Store .................................................................................................................................................................... 6

Kebutuhan Pengembangan ........................................................................................................................................... 8

Windows 8 ............................................................................................................................................................ 8

Visual Studio 2012 ............................................................................................................................................. 8

FUNDAMENTAL ....................................................................................................................................................................... 1

Hello World Windows 8 ................................................................................................................................................... 2

Membuat project baru di Visual Studio .................................................................................................... 2

Modifikasi Start Page........................................................................................................................................ 4

Visual Studio 2012 ............................................................................................................................................................. 6

Suspend & Resume ........................................................................................................................................... 6

Template Proyek ................................................................................................................................................ 7

Simulator ............................................................................................................................................................. 10

XAML .................................................................................................................................................................................... 12

Deklarasi Obyek ................................................................................................................................................ 13

Pengaturan Properti ........................................................................................................................................ 13

Operator async & await ................................................................................................................................................. 15

Kontrol.................................................................................................................................................................................. 19

Kontrol Layout ................................................................................................................................................... 21

Kontrol untuk menampilkan koleksi ......................................................................................................... 24

Webview .............................................................................................................................................................. 27

iv

Application Bar .................................................................................................................................................. 29

MANIPULASI DATA ................................................................................................................................................................ 1

Data Binding ........................................................................................................................................................................ 2

Implementasi Data Source ............................................................................................................................. 3

Implementasi Binding Target ........................................................................................................................ 4

Konsumsi Web Service ..................................................................................................................................................... 9

Akses Menggunakan Generated Class....................................................................................................... 9

Akses Menggunakan HttpClient ................................................................................................................ 16

Operasi File Windows RT............................................................................................................................................... 17

File Pickers .......................................................................................................................................................... 17

Membaca dan Menulis File .......................................................................................................................... 22

Application Data ............................................................................................................................................................... 27

Penyimpanan Lokal ......................................................................................................................................... 28

Roaming .............................................................................................................................................................. 32

KONTRAK & EKSTENSI ......................................................................................................................................................... 1

Integrasi dengan Pengalaman Windows 8 ............................................................................................................... 1

File Picker Contract ............................................................................................................................................................ 2

Search Contract .................................................................................................................................................................. 5

Menambahkan Rekomendasi Kata Kunci ................................................................................................. 9

Pencarian Ketika Aplikasi Tidak Aktif ........................................................................................................ 11

Share Contract ................................................................................................................................................................... 12

Berbagi Konten ................................................................................................................................................. 13

Menerima Konten ............................................................................................................................................ 17

INTEGRASI DENGAN PERANGKAT KERAS ................................................................................................................... 21

Perangkat Keras Yang Didukung Windows 8 ........................................................................................................ 22

Kamera ................................................................................................................................................................................. 22

CameraCaptureUI............................................................................................................................................. 23

MediaCapture .................................................................................................................................................... 28

Lokasi .................................................................................................................................................................................... 32

Sensor ................................................................................................................................................................................... 37

SIKLUS HIDUP APLIKASI ....................................................................................................................................................... 1

Siklus Hidup Aplikasi Windows 8-style UI ................................................................................................................ 2

v

Suspended dan Resumed ............................................................................................................................................... 3

Aktivasi Aplikasi .................................................................................................................................................................. 8

TILE & NOTIFIKASI .................................................................................................................................................................. 1

Tile 2

Mengirimkan informasi ke Tile ..................................................................................................................... 5

Secondary Tile ................................................................................................................................................... 10

Notifikasi ............................................................................................................................................................................. 13

Windows NotificationService ....................................................................................................................................... 16

#LATIHAN .................................................................................................................................................................................. 1

Pendahuluan ........................................................................................................................................................................ 2

Membuat Proyek Aplikasi Windows 8 ....................................................................................................................... 2

Memulai Proyek .................................................................................................................................................. 2

Menampilkan data ............................................................................................................................................. 5

Mempercantik tampilan .................................................................................................................................. 6

Orientasi,Snapping dan Semantic Zoom ................................................................................................................ 11

Menangani Orientasi Perangkat ................................................................................................................. 11

Snapping ............................................................................................................................................................. 19

Tampilan Semantic Zoom ............................................................................................................................. 22

Searching dan Sharing ................................................................................................................................................... 25

Berbagi Konten ................................................................................................................................................. 25

Fitur Pencarian .................................................................................................................................................. 27

Menjaga Data Aplikasi ................................................................................................................................................... 30

Secondary Tile ................................................................................................................................................................... 31

Penutup ............................................................................................................................................................................... 35

TENTANG PENULIS ................................................................................................................................................................. v

DAFTAR PUSTAKA ................................................................................................................................................................... v

WINDOWS 8

2

Windows reimagined Windows 8 adalah sistem operasi terbaru dari Microsoft untuk PC, laptop dan tablet. Windows

8 hadir dengan antarmuka yang dioptimasi untuk layar sentuh, hadir dan dipersiapkan untuk

generasi baru perangkat komputasi dengan berbagai tipe perangkat keras dan skenario

seperti komputasi awan. Sistem operasi ini direncanakan untuk berjalan di atas perangkat

keras yang sama dengan kebutuhan Windows 7, yaitu keluarga prosesor 32-bit dan 64-bit

Intel atau AMD. Selain itu juga akan terdapat varian dari Windows 8, yaitu Windows RT yang

diperuntukkan khusus untuk perangkat yang menggunakan prosesor berarsitektur ARM.

Windows 8 dibangun dengan tampilan antarmuka awal yang baru, segar, namun tetap

mempertahankan keunggulan yang dimiliki Windows 7. Seluruh aplikasi yang berjalan di

Windows 7 akan tetap berjalan di Windows 8 ( tidak berlaku di Windows RT untuk ARM).

Sehingga pada Windows 8 terdapat dua varian aplikasi yaitu :

Aplikasi Desktop

Aplikasi Windows 8 Style (sebelumnya disebut Aplikasi bergaya Metro)

Aplikasi Dekstop adalah aplikasi tradisional yang sudah kita kenal sebelumnya, berjalan di atas

Windows 7 dan berinteraksi melalui Windows API yang biasa kita sebut Win32 API. Sementara

Aplikasi Windows 8 Style adalah tipe aplikasi baru, yang mana menggunakan bahasa desain

“Metro” atau Windows 8 UI. Antarmuka ini sudah kita lihat dibeberapa produk Microsoft

lainnya,seperti Windows Phone, dan X-BOX.

Aplikasi Windows 8 merupakan tipe yang sangat berbeda dengan aplikasi tradisional. Aplikasi

ini secara umum berjalan dalam keadaan full-screen , dioptimasi untuk layar sentuh dan hanya

dapat dibeli dan diperoleh melalui pasar aplikasi yang disebut Windows Store.

Gambar 1 Antarmuka Windows 8 dengan Live Tile

3

Windows Runtime Untuk mengembangkan aplikasi yang dapat berjalan di Windows 8 , pemrogram memiliki

banyak pilihan. Kita masih dapat untuk mengembangkan aplikasi desktop menggunakan .NET

ataupun Win32. Aplikasi ini kita sebut aplikasi desktop. Sementara untuk mengembangkan

aplikasi Windows 8-style UI pemrogram dapat memilih apakah ingin menggunakan C/C++ ,

C#/VB atau HTML5/Javascript. Seluruh bahasa ini adalah first class citizen di dunia Windows 8.

Keragaman pilihan bahasa pemrograman ini diakomodasi dengan sebuah runtime baru, yang

disebut dengan Windows Runtime (WinRT). Untuk aplikasi Windows 8-style , WinRT

menyediakan API yang sangat lengkap untuk mengakses dan terhubung ke layanan OS. Bagi

Anda yang sudah biasa menggunakan XAML maka pengembangan aplikasi di Windows 8 tidak

akan menbawa kesulitan bagi Anda karena UI framework yang digunakan adalah XAML untuk

bahasa C,C++,C# dan VB. Sementara untuk web developer , Anda bisa menggunakan

HTML5/Javascript untuk mengembangkan aplikasi.

Gambar 2 Platform pengembangan Aplikasi Windows 8-style UI

Setiap bahasa pemrograman akan mengalami proses language projection yang menyebabkan

penggunakan WinRT API menjadi sangat familiar dengan yang sintaks biasa kita gunakan.

Bagi pemrogram, ini adalah win-win, kita dapat menggunakan skillset yang kita miliki untuk

mulai melakukan pengembangan. Meskipun dari sisi sintaks tidak akan menjadi masalah,

untuk beberapa konsep baru tetap harus kita pelajari dan untuk penggunakan base class

libraries tetap menjadi PR tersendiri karena jumlah nya yang sangat banyak. Selalu gunakan

MSDN library untuk mengetahui secara detail mengenai kelas-kelas yang terdapat pada

WinRT.

4

Lingkungan Eksekusi Aplikasi Windows 8 Selain platform pengembangan, pada Windows 8 juga terdapat hal baru, yaitu bagaimana

aplikasi Windows 8 diperoleh dan bekerja. Secara umum, pengguna hanya dapat memperoleh

aplikasi Windows 8-style dengan membelinya dari Windows Store. Windows Store adalah

pasar aplikasi Windows 8-style yang diperkenalkan Microsoft sebagai satu tempat terintegrasi

untuk pengguna,mencari,memperoleh dan membeli aplikasi.

Melalui aplikasi Windows Store client di Windows 8,kita dapat mencari aplikasi yang kita

inginkan. Ketika kita menemukan aplikasi yang kita inginkan, kita dapat melanjutkan instalasi

dan aplikasi akan diunduh dari Store. Windows 8 akan memvalidasi dan melakukan instalasi

ke perangkat pengguna. Berbeda dengan aplikasi Windows tradisional dimana instalasi

dilakukan per mesin maka untuk aplikasi Windows 8-style adalah per pengguna. Meskpiun

demikian ,dibalik layar, instans dari aplikasi tersebut hanyalah 1 instalasi. Jadi aplikasi diperoleh

sekali,namun didaftarkan untuk setiap pengguna.

Gambar 3 Lingkungan eksekusi aplikasi Windows 8-style

Aplikasi Windows 8-style akan dipaketkan dalam berkas berekstensi .appx atau app package.

Di dalam paket ini terdapat segala hal yang diperlukan untuk keperluan instalasi. Di dalam

paket terdapat satu file AppManifest yang berisikan metadata mengenai deklarasi

kemampuan aplikasi, aspek perangkat keras apa saja yang diakses dan versi dari aplikasi.

Keberadaan metadata di dalam AppManifest memberikan kepercayaan diri kepada pengguna

mengenai kemampuan aplikasi dan bagaimana aplikasi menggunakan resource dari perangkat

pengguna.

Aplikasi Windows 8-style UI berjalan sendiri-sendiri, dan secara umum tidak dapat

berkomunikasi antar aplikasi,kecuali untuk beberapa skenario tertentu seperti yang

diilustrasikan pada Gambar 4. Kondisi ini dikenal dengan istilah sandbox, yang sudah mulai

diimplementasikan di aplikasi yang berjalan di Windows Phone. Setiap aplikasi berjalan

sendiri-sendiri,di dalam kontainer aplikasi dan berinteraksi dengan Windows OS dan dapat

mengakses secara langsung layanan yang tersedia melalui WinRT API. Untuk beberapa

5

skenario,misalnya mengambil gambar, mengambil berkas menggunakan picker pengguna

berinteraksi melalui Brokers. Brokers adalah suatu cara dimana untuk melakukan sesuatu di

dalam Windows 8 yang sebenarnya terjadi adalah kita memanggil semacam program

kecil,menggunakan program tersebut – biasanya alur penggunaan sudah diatur – dan

mendapatkan nilai kembalian dari program kecil tersebut. Meskipun antar aplikasi tidak saling

dapat berkomunikasi, Windows 8 menyediakan mekanisme yang dinamakan Contracts.

Dengan contract aplikasi yang satu dengan yang lain dapat bertukar data, misalnya untuk

keperluan pencarian dan berbagi ke media sosial atau aplikasi. Implementasi Contracts akan

kita bahas pada bagian Integrasi dengan Charm Bar .

Gambar 4 Isolasi aplikasi yang berjalan di Windows 8

Siklus aplikasi Windows 8-style UI juga berbeda dengan aplikasi desktop tradisional. Jika pada

Aplikasi desktop tradisional, pengguna memiliki kendali penuh mengenai aplikasi yang sedang

berjalan namun tidak begitu dengan aplikasi Windows 8-style UI. Hanya ada satu aplikasi pada

satu waktu yang dapat berada di layar depan (foreground) , selebihnya ada pada layar belakang

(background). Aplikasi yang berada di foreground mendapatkan CPU, dan resources , kode

dieksekusi dan sebagainya. Sementara aplikasi yang lain, berada dalam kondisi yang

dinamakan suspended. Aplikasi yang berada dalam kondisi suspended tidak dieksekusi namun

tetap berada di dalam memori sehingga jika pengguna berpindah maka aplikasi dengan cepat

dapat dipanggil kembali. Dengan demikian diharapkan dapat menjaga keadaan baterai

sehemat mungkin.

Kadangkala, ada suatu ketika dimana sistem mengalami kekurangan resources atau dimana

ketika aplikasi mengalami crash. Pada saat demikian, aplikasi yang berada di background akan

dinonaktifkan secara paksa oleh sistem, dikenal dengan proses termination. Kondisi terminated

adalah saat dimana aplikasi dikenakan proses paksa ini. Implikasi dari kondisi ini adalah

memungkinkan hilangnya data yang sedang dikerjakan oleh pengguna. Kita ambil contoh,

seorang pengguna sedang melakukan entri data menggunakan aplikasi Windows 8-style UI.

Misalkan ditengah proses tersebut, pengguna membuka aplikasi lain, sehingga aplikasi

pertama masuk kondisi suspended. Bayangkan, jika aplikasi yang tadinya pada kondisi

suspended, karena suatu hal masuk ke dalam kondisi terminated maka data – data yang sedang

dikerjakan oleh pengguna akan hilang begitu saja. Tentunya hal ini tidak kita inginkan. Karena

itu untuk pemrogram perlu menangani kasus seperti ini, yaitu menjaga agar dikala suatu

6

aplikasi masuk kondisi terminated , data-data yang sedang dikerjakan oleh pengguna

disimpan disuatu tempat sedemikian sehingga ketika pengguna memanggil aplikasi tersebut,

pengguna dihadapkan pada kondisi yang sama ketika ia meninggalkan aplikasi. Implementasi

siklus aplikasi Windows 8-style UI akan dibahas pada bagian Siklus Aplikasi Windows 8.

Gambar 5 Siklus aplikasi Windows 8-style UI

Beberapa hal baru diperkenalkan di lingkungan eksekusi Windows 8, terutama untuk aplikasi

Windows 8-style UI. Pemrogram harus mengetahui aspek-aspek baru ini seperti siklus aplikasi,

konektivitas, dan isolasi proses sehingga dapat merencanakan aplikasi yang ingin

dikembangkan untuk sesuai dengan sistem operasi baru ini.

Windows Store Windows Store adalah pasar aplikasi, satu tempat terintegrasi dan menjadi satu-satu nya cara

bagi pengguna umum untuk mendapatkan aplikasi. Dikatakan pengguna umum,karena

terdapat skenario lain bagi enterprise untuk memperoleh aplikasinya. Windows Store diklaim

sebagai pasar dengan potensi terbesar untuk aplikasi yang kita bangun. Store akan tersedia

untuk lebih dari 100 bahasa dan mulai dari 45 negara dimana pengembang bisa menempatkan

aplikasinya untuk dibeli oleh lebih dari 213 negara konsumen. Di Windows Store juga memiliki

fleksibilitas dalam penentuan harga sehingga pengembang dapat memaksimal keuntungan

dari aplikasi yang dijual. Saat ini tercatat lebih dari 600 juta pengguna Windows 7 yang

perangkat kerasnya sudah mumpuni untuk melakukan upgrade ke Windows 8. Belum lagi PC,

tablet dan laptop baru yang akan diluncurkan ketika Windows 8 diluncurkan secara resmi oleh

Microsoft.

7

Gambar 6 Aplikasi Windows Store untuk memperoleh aplikasi Windows 8 Style-UI

Bagi pengembang Windows Store menyediakan berbagai fasilitas yang membantu untuk

dapat memperoleh keuntungan yang maksimal. Pengembang boleh mengembangkan aplikasi

berbayar, yang disertai fitur coba (trial), atau aplikasi yang sepenuhnya gratis. Pada Windows

Store juga sudah mendukung in-app purchase . Pembagian keuntungan pengembangan dan

Microsoft adalah 70 : 30 untuk $25.000 pertama. Ketika sudah melebihi angka tersebut,

pengembangan mendapatkan 80% bagian,dan Microsoft 20% bagian. Fasilitas berikutnya

adalah pemasangan iklan. Pengembang dapat memanfaatkan Microsoft Advertising atau

layanan iklan pihak lain untuk diintegrasikan ke dalam aplikasi mereka. Pengembang juga akan

mendapatkan data analitik terkait kinerja dari aplikasi mereka. Data tersebut meliputi

demografi pengguna, kelas device, pembagian aplikasi berbayar dan gratis, jumlah unduhan,

rating, review, jumlah kegagalan aplikasi, referral dan banyak lagi.

Untuk menjadi publisher, pengembang harus memiliki akun developer yang dengan biaya

berlangganan $49 untuk individu dan $99 untuk perusahaan. Langkah-langkah pendaftaran

adalah sebagai berikut :

1. Buka dashboard di pranala http://msdn.microsoft.com/en-us/library/windows/apps/

2. Daftar dengan akun Microsoft atau dengan membuat akun Microsoft yang baru

3. Jika Anda tidak memiliki sebuah akun Microsoft Developer Service maka buatlah sebuah

akun baru. Pilih tipe akun Windows Store Developer. Pastikan informasi info anda sudah

benar. Jika Anda mendaftar sebagai perusahaan maka diperlukan nama,alamat email dan

telelpon orang yang akan menyetujui akun perusahaan.

4. Masukkan informasi registrasi (khusus yang memiliki kode registrasi)

5. Masukkan informasi pembayaran

6. Konfirmasi bahwa info akun dan pembayaran sudah benar lalu klik Purchase

7. Sistem akan mengirimkan konfirmasi ke email Anda.

Daftar negara yang sudah mendukung pendaftaran akun pengembang dapat dilihat di pranala

berikut ini : http://nlmt.us/11y

http://msdn.microsoft.com/en-us/library/windows/apps/

http://nlmt.us/11y

8

Kebutuhan Pengembangan Untuk memulai pengembangan dan belajar membuat aplikasi Windows 8 maka kita harus

memiliki perangkat yang dibutuhkan, yaitu Windows 8 OS dan Visual Studio. Tools ini telah

mencapai versi RTW pada 15 Agustus 2012 dan dapat diperoleh

http://msdn.microsoft.com/en-US/windows/apps/br229516/ .

Windows 8

Windows 8 dapat dijalankan pada perangkat keras yang menjalankan Windows 7, dengan

spesifikasi minimal adalah sebagai berikut :

Prosesor : 1 gigaherts (Ghz)

RAM : 1 gigabyte (GB) (32 bit) atau 2 GB (64 bit)

Ruang kosong Hard disk : 20 GB

Graphic card : Microsoft DirectX 9 dengan driver WDDM

Selain kebutuhan utama, untuk beberapa fitur khusus seperti fitur sentuh maka tablet atau

monitor yang digunakan harus mendukung multitouch, untuk mengakses aplikasi Windows

Store dan mengunduh serta menjalankan aplikasi membutuhkan koneksi internet dan resolusi

layar minimal 2014 x 768. Sementara untuk tampilan snap, membutuhkan resolusi layar

minimal 1366 x 768.

Visual Studio 2012

Jika Anda hendak menggunakan Visual Studio 2012 Express (versi gratis) maka berikut ini

adalah kebutuhan sistem yang harus dipenuhi

Sistem Operasi : Windows 8 (x86 dan x64)

Arsitektur : 32 bit dan 64 bit

Proseror 1.6 Ghz

RAM : 1 GB ( 1.5 GB jika berjalan di atas mesin virtual)

Ruang kosong harddisk 4GB

DirectX 9 yang berjalan pada resolusi minimal 1024 x 768

Jika Anda menggunakan Visual Studio 2012 versi berbayar maka kebutuhan sistem yang harus

dipenuhi adalah sama dengan versi gratis namun dapat berjalan pada Windows 7 SP1 baik 64

bit dan 32 bit.

Pada buku ini saya menggunakan Windows 8 versi Enterprise dan Visual Studio 2012 Ultimate.

http://msdn.microsoft.com/en-US/windows/apps/br229516/

FUNDAMENTAL

2

Hello World Windows 8 Sejak publikasi buku The C Programming Language pada tahun 1978, sudah menjadi tradisi

untuk memulai suatu buku pemrograman dengan sebuah program yang menampilkan “hello,

world”. Untuk itu demi tidak melanggar tradisi , perjalanan kita pun akan kita mulai dengan

membuat aplikasi Windows 8-style UI dan menampilkan “hello world”.

Jalankan Visual Studio dari Windows 8 start screen dan mari mulai belajar.

Membuat project baru di Visual Studio

1. Jalankan Visual Studio 2012 Anda (selanjutnya disebut Visual Studio)

2. Pilih File > New Project

Kotak New Project akan muncul. Panel disebelah kiri akan menyediakan pilihan template

yang dapat digunakan

3. Pada panel kiri, klik Installed sehingga akan menampilkan Visual Basic atau Visual C#

dan pilih Windows Store.

4. Pilih template Blank App

5. Pada kotak Nama masukkan “HelloWorld”

6. Klik OK untuk membuat project.

Meskipun template Blank App merupakan template yang paling minimum, namun

pembuatan proyek aplikasi dengan tipe ini akan menyediakan beberapa file standar yaitu

:

Berkas manifest , yang berisikan deskripsi aplikasi

Berkas gambar untuk logo pada start screen

3

Sebuah gambar (storelogo.png) yang akan menjadi logo aplikasi di Windows Store

Sebuah gambar yang akan menjadi splash screen ketika aplikasi dijalankan

File XAML dan berkas kode (App.xaml dan App.xaml.cs)

Sebuah berkas MainPage.xaml dan berkas kode untuk yang akan dieksekusi ketika

aplikasi dijalankan

Berkas MainPage pada template Blank App didasarkan pada template Blank Page yang

hanya terdiri dari sedikit kode untuk instansiasi sebuah halaman. Template proyek lainnya yang

tersedia pada Visual Studio menyediakan sejumlah kode tambahan dan beberapa berkas

pembantu untuk membuat aplikasi berbasis Windows 8-style UI. Pada contoh kali ini kita akan

mengganti halaman Main Page menggunakan template lain yang tersedia sehingga kita dapat

memanfaatkan sejumlah kode tambahan dan berkas bantuan untuk memulai aplikasi kita.

Untuk mengganti MainPage berikut adalah langkah-langkah yang dilakukan :

1. Pada Solution Explorer , klik kanan MainPage.xaml dan pilih Delete . Klik OK untuk

konfirmasi

2. Pilih Project > Add New Item lalu pilih Visual C# dan Windows Store.

3. Pada panel ditengah pilih Basic Page dan berikan nama,misalnya “MainPage”

4. Pilih Add. Jika kita pertama kali menambahkan sebuah halaman pada proyek dengan

template Blank App maka Visual Studio akan menambahkan dialog untuk menambahkan

secara otomatis berkas-berkas terkait yang diperlukan ke dalam proyek tersebut. Pilih Yes

untuk menambahkan berkas tersebut. Berkas akan berada pada direktori Common di

dalam proyek.

Kita akan lihat beberapa berkas yang otomatis ditambahkan ketika membuat proyek

menggunakan template. App.xaml adalah tempat dimana kita mendefinisikan berbagai hal

yang akan digunakan oleh aplikasi. Berkas ini mengandung sebuah Resource Dictionary yang

didalamnya mengandung referensi ke berkas StandardStyles.xaml. Berkas ini mengandung

berbagai properti standar untuk membuat tampilan ala Windows 8-style UI. Bagi yang akrab

dengan pemrograman web, dapat kita anggal berkas ini sebagai berkas CSS untuk mengatur

tampilan dari aplikasi. Seperti berkas kode lainnya, disini terdapat fungsi InitializeComponen,

yang dihasilkan otomatis oleh Visual Studio.

MainPage.xaml adalah tempat kita mendefinisikan antarmuka dari aplikasi. Kita dapat

menambahkan secara langsung melalui XAML atau secara drag and drop melalui antarmuka

Visual Studio. Template Basic Page menggunakan LayoutAwarePage. Kelas ini merupakan

kelas turuan dari kelas Page yang sudah menyediakan fungsi navigasi,manajemen state dan

manajemen tampilan (view management). Basic Page juga menyediakan beberapa konten

seperti tombol Back dan teks Title.

4

Modifikasi Start Page

Sekarang kita tambahkan konten MainPage.xaml.

1. Pada Solution Explorer , klik dua kali berkas MainPage.xaml

2. Cari resource ApName pada bagian atas halaman, dan ubah nilainya menjadi “Hello,

world!”.

<x:String x:Key="AppName">Hello, World!</x:String>

3. Pada root Grid, sebelum tag <VisualStateManager.VisualStateGroups> tambahkan sebuah

StackPanel dengan TextBlock untuk meminta nama pada pengguna, dan sebuah TextBox

untuk menerima masukan pengguna, sebuah Button. Penjelasan kontrol yang digunakan

akan dijelaskan kemudian. Listing kode nya adalah sebagai berikut :

4. Pilih Button yang sudah ditambahkan di MainPage.xaml

5. Pada jendela Properties, pilih tombol Events (disebelah kanan pojok atas, yang menyerupai

petir), pilih event Click dan tempatkan sebuah nama fungsi yang akan dipanggil,ketika

Button tersebut diklik. Pada contoh ini, berikan nama Button_Click

6. Tambahkan kode berikut ini di berkas kode sumber untuk halaman tersebut. Event handler

adalah mekanisme memberikan sebuah aksi yang akan dilakukan aplikasi terkait dengan

event yang dibangkitkan oleh pengguna,dalam contoh ini adalah meng-klik Button.

7. Tekan F5 dan jalankan aplikasi. Ketikkan nama Anda dan klik Button untuk menampilkan

hasilnya.

<StackPanel Grid.Row="1" Margin="120,30,0,0"> <TextBlock Text="What's your name?"/>

<StackPanel Orientation="Horizontal" Margin="0,20,0,20"> <TextBox x:Name="nameInput"

Width="300" HorizontalAlignment="Left"/> <Button Content="say hello"/> </StackPanel>

<TextBlock x:Name="greetingOutput"/> </StackPanel>

private void Button_Click(object sender, RoutedEventArgs e) { greetingOutput.Text = "Hello, " + nameInput.Text + "!"; }

5

Selamat, pada tahap ini , Anda sudah berhasil membuat aplikasi Windows 8-style UI pertama

Anda . Nah, sebelum membahas lebih dalam mengenai konsep-konsep baru pada

pengembangan aplikasi Windows 8-style UI, pada bagian-bagian selanjutnya kita akan

berkenalan dengan hal-hal mendasar yang baru dan wajib diketahui pemrogram yang sudah

biasa dengan dunia .NET seperti Visual Studio 2012, XAML, pemrograman asinkronus dan

kontrol-kontrol yang dapat digunakan untuk membangun antarmuka aplikasi.

Developer License

Apabila Anda menggunakan Visual Studio untuk pertama kalinya maka Visual Studio akan

meminta developer license ketika kita ingin mengembangkan aplikasi Windows 8-style UI.

License ini diperoleh secara gratis,pastikan komputer Anda terhubung ke internet dan

masukkan akun Windows Live Anda dan license akan diperoleh.

6

Visual Studio 2012 Visual Studio adalah sebuah kakas pengembangan perangkat lunak terintegrasi atau yang

biasa dikenal dengan IDE (Integrated Development Environtment) milik Microsoft. Visual

Studio digunakan untuk mengembangkan aplikasi konsol maupun GUI dalam berbagai

teknologi yang didukung Microsoft seperti Windows Form,Windows Presentation Foundation,

ASP.NET , Silverlight dan Cloud. Visual Studio 2012 merupakan rilis terbaru dari keluarga Visual

Studio yang mendukung pengembangan aplikasi Windows 8-style UI. Seperti IDE pada

umumnya, Visual Studio memiliki editor kode yang mendukung refactoring, kakas untuk

pengujian, desainer dan berbagai macam hal lainnya. Bagi Anda yang sudah biasa

menggunakan Visual Studio versi sebelumnya maka tidak akan menemui kesulitan berarti

karena VS 2012 merupakan iterasi dari dari rilis yang pernah ada. Pada bagian ini akan

dijelaskan beberapa hal tambahan pada VS 2012 yang terkait dengan pengembangan aplikasi

Windows 8-style UI.

Suspend & Resume

Aplikasi Windows 8-style UI memperkenalkan kondisi suspend dan resume dalam siklus

aplikasi. Pada Visual Studio 2012, untuk menyimulasikan hal tersebut telah ditambahkan

kemampuan untuk memaksa aplikasi masuk ke kondisi suspend, resume atau termination.

Dengan demikian pemrogram dapat leluasa untuk mencoba berbagai kondisi tersebut dan

melihat bagaimana kelakukan aplikasi ketika berpindah dari satu kondisi ke kondisi lainnya.

Hal ini penting dilakukan karena penanganan terhadap kondisi tersebut merupakan syarat

untuk aplikasi dapat masuk ke Windows Store.

Menu ini akan tampil jika aplikasi sedang kita debug.

7

Gambar 7 Simulasi Suspend & Resume

Template Proyek

Salah satu cara untuk memulai pengembangan aplikasi adalah meneruskan dari template

yang tersedia. Untuk aplikasi Windows 8-style UI terdapat dua template yang dapat kita

gunakan untuk keperluan pengembangan. Pada bagian ini akan dijelaskan kegunaan dari

dua template tersebut.

Grid Template

Template ini merupakan sangat tepat digunakan untuk mengembangkan aplikasi dimana

pengguna dapat berinteraksi dengan berbagai kategori dari konten yang tersedia seperti

aplikasi belanja,berita, photo dan video. Aplikasi Grid dimulai dari sebuah halaman yang

menampilkan daftar group. Group merupakan sebuah nama untuk kumpulan benda,

misalnya bagian dari suatu toko swalayan dimana masing-masing bagian mengandung

berbagai jenis barang pada kategori tersebut. Ketika pengguna memilih sebuah grup, maka

aplikasi akan membuka halaman detail dari grup tersebut yang menampilkan daftar koleksi

benda pada grup tersebut disisi samping. Pengguna bisa memilih sebuah benda baik dari

halaman utama maupun halaman grup untuk membuka detail dari benda tersebut.

8

Gambar 8 Struktur Grid Template

Template Grid ini terdiri dari beberapa file

App.xaml yang menyediakan markup untuk keseluruhan konten aplikasi

GroupedItemsPage.xaml, yang bertindak sebagai halaman utama. Menampilkan

sejumlah grup benda dimana pengguna dapat berpindah halaman dengan milih salah

satu benda yang ditampilkan di halaman utama dipilih.

GroupDetailPage.xaml yang memungkinkan pengguna melihat tampilah detail dari

suatu grup

ItemDetailPage.xaml menampilkan secara full-screen sebuah benda

App.xaml.cs yang mengandung kode bagaimana aplikasi dijalankan

GroupedItemsPage.xaml.cs yang mengandung kode yang berhubungan dengan

halaman utama

GroupDetailPage.xaml.cs yang mengandung kode yang berhubungan dengan

halaman detail grup

ItemDetailPage.xam.cs yang mengandung kode yang berhubungan dengan halaman

utama sebuah item.

SampleDataSource.cs yang mengandung kode sumber data yang digunakan oleh

aplikasi.

9

Template ini juga sudah menyediakan package.appxmanifest yang mendeskripsikan aplikasi

untuk Windows, sebuah berkas .pfx untuk menandai berkas .appmanifest dan sejumlah berkas

gambar untuk keperluan icon, splash screen dan logo.

Split Template

Template Split App adalah template yang dapat digunakan untuk membuat aplikasi Windows

8-style UI yang terdiri dari suatu koleksi benda dan detail benda dalam tampilan dua kolom

sehingga memudahkan pengguna untuk berpindah antar tampilan atau untuk menampilkan

koleksi yang datanya selalu diperbaharui seperti aplikasi pembaca berita, aplikasi skor

pertandingan olahraga dan email. Template ini memiliki sebuah halaman utama yang

menampilkan koleksi sebuah grup. Grup adalah nama yang diberikan kepada kumpulan

benda, dan pengguna dapat memilih nama grup tersebut dan membuka halaman

kedua,berupa halaman split yang terdiri dari koleksi dan detail. Halaman ini terdiri dari dua

kolom dimana detail berada pada sisi kanan dan koleksi berada pada sisi kiri.

Gambar 9 Template Split App

Berkas-berkas yang secara otomatis dihasilkan oleh template ini adalah :

App.xaml berisi definisi markup dan titik awal aplikasi akan dijalankan.

ItemsPage.xaml , adalah halaman utama tempat pengguna memilih grup yang hendak

didilihat

SplitPage.xaml , adalah halaman split, yang terdiri dua bagian, koleksi dan detail.

10

App.xaml.cs yang mengandung kode bagaimana aplikasi dijalankan

ItemsPage.xaml.cs yang mengandung kode yang berhubungan dengan halaman

utama

SplitPage.xaml.cs yang mengandung kode yang berhubungan dengan halaman detail

SampleDataSource.cs yang mengandung kode sumber data yang digunakan oleh

aplikasi.

Kedua template tersebut menghasilkan beberapa berkas secara otomatis yang dapat

membantu kita dalam pengembangan aplikasi selanjutnya. Seluruh berkas terdapat pada

direktori Common.

Nama berkas Deskripsi

BindableBase .cs Kelas dasar yang mengimplementasi INotifyPropertyChanged

BooleanNegationConverter

.cs

Kelas converter yang menghasilkan negasi dari nilai boolean

BooleanToVisibilityConverter

.cs

Kelas converter yang mengubah nilai Boolean menjadi tipe Visibility

LayoutAwarePage .cs Kelas dengan tipe Page yang didalamnya sudah diimplementasi

manajamen view, view model, tampilan tombol Back, dan siklus

aplikasi

ReadMe.txt Berisi keterangan template

RichTextColumns .cs Kelas yang mengatur tampilan teks pada Grid untuk mengalir secara

vertical.

StandardStyles.xaml Berisi style dan template yang digunakan proyek seperti format,

margin yang sudah didesain untuk sesuai dengan konsep Windows 8-

style UI

SuspensionManager cs Kelas untuk manajemen state pada siklus aplikasi Windows 8

Simulator

Pengembangan aplikasi Windows 8-style UI dipermudah dengan terdapatnya simulator pada

Visual Studio 2012 untuk melihat bagaimana aplikasi akan berjalan pada perangkat tablet.

Simulator juga dapat digunakan untuk menguji tampilan aplikasi pada berbagai ukuran

resolusi layar, orientasi dan snap view. Untuk menguji aplikasi ke dalam simulator, Anda dapat

menggunakan pilihan debug dan memilih Simulator.

11

Gambar 10 Pilihan Simulator pada menu Debug

Gambar 11 Tampilan simulator

Simulator secara lengkap memiliki fitur berikut ini :

Mouse Mode : mode untuk menyimulasikan pointer menggunakan tetikus

Basic Touch Mode : mode untuk menyimulasikan pointer menggunakan jari

Pinch/zoom Mode : mode untuk meyimulasikan gerakan pinch atau zoom

Rotation Touch Mode : mode untuk menyimulasikan gerakan rotasi menggunakan dua

jari

Rotate clockwise/counterclockwise : untuk merotasi simulator

Change Resolution : untuk mengatur resolusi yang digunakan oleh simulator

Set Location : untuk menyimulasikan atau menentukan lokasi yang akan digunakan

simulator

Copy Screenshot : untuk mengambil gambar screenshot

12

XAML Extensible Application Markup Language (XAML) merupakan bahasa deklaratif. Pada dasarnya

XAML merupakan berkas XML sehingga menuruti kaidah-kaidah bagaimana kita

menghasilkan struktur pada berkas XML. XAML (dibaca : zamel) dapat menginisialiasi objek,

mengatur properti menggunakan hierarki struktur untuk menunjukkan hubungan antar obyek.

XAML merupakan bahasa yang digunakan untuk membuat antarmuka aplikasi Windows 8-

style UI. Sama hal nya dengan penggunaan HTML untuk membuat tampilan antarmuka web.

Sebuah berkas .xaml dapat memiliki sebuah berkas yang berasosiasi, disebut code-behind yang

dapat merupakan definisi parsial dari suatu kelas, atau halaman. XAML mendukung

penggunaan kakas yang berbeda sehingga pada saat pertukaran berkas tidak ada yang hilang.

Kita ambil contoh seorang desainer yang banyak menggunakan Expression Blend sementara

programmer banyak menggunakan Visual Studio.

XAML memiliki sintaks yang didasarkan pada XML sehingga sebuah berkas XAML yang valid

haruslah merupakan berkas XML yang valid. Setiap berkas XAML pada Windows Runtime

menggunakan konvensi XAML language dan ditulis pada namespace yang ditandai dengan

prefix x sebagai elemen paling atas. Dibawah ini contoh penulisan kelas Page menggunakan

sintaks XAML.

Prefix x pada XAML mengandung beberapa struktur program yang sering kita gunakan yaitu :

x:Key : sebuah nama unik untuk menunjuk referensi ke suatu resource atau berkas lain.

Nilai ini dapat dipanggil kembali untuk mengambil atau menggunakan resource

tersebut.

x:Class : menunjukkan bahwa nilai dari x:Class adalah nama kelas. Secara bersama-sama

dengan berkas XAML dan code-behind yang terasosiasi akan dikompilasi dan

dijalankan oleh WinRT.

x:Name : menunjukkan sebuah nama obyek pada saat aplikasi dieksekusi dan untuk

membeddakan antar obyek yang satu dengan obyek yang lain. Pemberian nama

x:Name memungkinkan suatu obyek untuk diakses dari berkas code-behind yang

terasosiasi.

x:Uid : menunjukkan bahwa resource tersebut harus dilokalisasi.

<Page x:Class="Application1.BlankPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" > </Page>

13

Deklarasi Obyek

Biasanya pemrogram yang terbiasa dengan dunia berorientasi obyek selalu berpikir dalam

kerangka obyek dan nilai properti dari obyek tersebut sementara XAML atau bahasa deklaratif

lainnya memiliki konsep elemen dan atribut. Pada hampir banyak kasus setiap elemen yang

dideklarasikan dalam XAML memiliki korespondensi dengan obyek yang dapat

direpresentasikan dalam bahasa pemrograman WinRT yang dipilih.

Sebuah berkas XAML selalu memiliki satu elemen yang bertindak sebagai akar (root) yang

mendeklarasikan secara konseptual sebuah root yang dapat berupa halaman atau graf obyek.

Deklarasi obyek dilakukan dengan menuliskan sintaks elemen tersebut menggunakan pola

objectName adalah tipe elemen yang hendak dibuat dengan sintaks

<objectName></objectName>. Dibawah ini adalah sintaks untuk mendeklarasikan sebuah

obyek Canvas.

Jika sebuah obyek tidak memiliki elemen lain didalamnya maka dapat ditulis langsung dengan

menjadi <Canvas />.

Beberapa obyek UI Element merupakan obyek yang bertipe kontainer, yang artinya obyek

tersebut dapat menampung obyek lain di dalam nya. Sebagai contoh obyek tipe kontainer

adalah Canvas yang dapat menampung obyek-obyek seperti misalnya Rectangle.

Pengaturan Properti

Pada XAML properti berguna salah satunya untuk kepentingan visual,bagaimana obyek akan

ditampilkan di dalam aplikasi. Terdapat beberapa cara untuk mengatur properti pada XAML,

misalnya dengan menggunakan sintaks atribut atau dengan sintaks properti dari elemen.

Dengan sintaks atribut maka pengaturan properti langsung dituliskan pada deklarasi

elemen,biasanya setelah nama elemen dan dipisahkan dengan spasi. Contoh berikut ini adalah

bagaimana mendeklarasikan properti dari obyek Rectangle.

Jika kita menggunakan sintaks properti di dalam elemen maka kita perlu mendefinisikan

sebuah properti, sama halnya seperti mengintansiasi obyek menggunakan tag yang

bersesuaian. Pola yang digunakan biasanya adalah dalam bentuk <object.property>. Dalam

<Canvas> </Canvas>

<Canvas> <Rectangle /> </Canvas>

<Rectangle Name="rectangle1" Width="100" Height="100" Fill="Blue" />

14

XAML, tanda titik pada elemen menunjukkan bahwa elemen tersebut adalah properti dari

elemen tersebut atau anggota dari kelas implementasi elemen tersebut di dunia berorientasi

obyek.

<object>

<object.property>

propertyValueAsObjectElement

</object.property>

</object>

Contoh berikut ini adalah bagaimana mengatur properti dari Rectangle menggunakan sintaks

properti elemen.

Penggunaan XAML sebagai UI framework dalam pengembangan aplikasi Windows 8-style UI

banyak membawa keuntungan, diantaranya adalah kemudahanan pemisahan kerja desainer

dan pemrogram, penggunaan fitur data binding dan kemudahan untuk membangun UI yang

intuitif dengan metode yang mirip dengan pemrograman web menggunakan HTML, yaitu

menggunakan bahasa deklaratif. Untuk itu bagi pengembang aplikasi Windows 8, sangat

memerlukan pengetahuan tentang XAML terutama untuk merancang antarmuka yang

menawan,menarik serta intuitif.

Pada bagian-bagian selanjutnya di buku ini XAML akan digunakan untuk membangun

antarmuka yang diperlukan untuk contoh-contoh kode dan aplikasi Windows 8-style UI yang

dibuat.

Operator async & await Aplikasi Windows 8-style UI adalah aplikasi dengan antarmuka yang full screen, modern dan

responsif. Nilai responsif dicapai dengan memindahkan eksekusi kode sebanyak mungkin

diluar UIThread, sehingga setiap waktu UIThread dapat fokus untuk menerima masukan dari

pengguna. Windows Runtime mempermudah pemrogram untuk melakukan ini dengan

menyediakan banyak API yang asinkronus dan juga memperkenalkan dua operator baru yaitu

await dan async yang dapat kita gunakan untuk membuat fungsi-fungsi menjadi asinkronus.

<Rectangle Name="rectangle1" Width="100" Height="100" > <Rectangle.Fill> <SolidColorBrush Color="Blue"/> </Rectangle.Fill> </Rectangle>

15

Sebagai pemrogram, kita pun wajib untuk cermat melihat di bagian mana saja kode bisa

dibangun dengan gaya asinkronus ini. Dengan pemrograman asinkronus maka aplikasi tidak

perlu selalu menunggu operasi yang mungkin memakan waktu lama dan tetap membiarkan

antarmuka responsif dan dapat menerima masukan dari pengguna. Untuk fungsi yang

asinkronus, secara konvensi dinamakan dengan kata kerja dan diakhiri dengan kata “Async”.

Hal ini berlaku untuk berbagai fungsi di dalam API WinRT dan kepada pemrogram juga

disarankan untuk mengikuti konvensi ini jika membangun fungsi asinkronus di dalam aplikasi.

Setiap fungsi yang hendak dipanggil secara asinkronus , ditandai dengan operator async dan

ketika fungsi tersebut dipanggil diberikan operator await.

Untuk memahami penggunaan kedua operator baru tersebut mari kita membuat sebuah

program sederhana yang mengimplementasikan mekanisme asinkronus. Silahkan ikuti

langkah-langkah dibawah ini :

1. Buatlah sebuah proyek Windows Store dengan template Split App baru dan beri nama

Program_Async.

2. Klik OK untuk membuat project.

3. Tambahkan sebuah halaman baru bertipe Basic Page,dan beri nama FeedPage.xaml

16

4. Pada halaman XAML, tambahkan kode berikut sebelum tag

<VisualStateManager.VisualStateGroups>

5. Buka berkas FeedPage.xaml.cs dan buatlah sebuah fungsi bernama GetTitleFeedAsync.

Potongan kode ini akan mengambil sejumlah judul feed dari sebuah website. Karena

kembalian dari fungsi ini adalah string dan kita mengingikan fungsi ini dieksekusi secara

asinkronus maka kita tambahkan operator Async.

<StackPanel Grid.Row="1" Margin="120,30,0,0"> <TextBlock Style="{StaticResource HeaderTextStyle}"

Text="Feed Result"/> <TextBlock Style="{StaticResource SubheaderTextStyle}"

x:Name="feedOutput"/> </StackPanel>

17

Operator await

Perhatikan baris SyndicationFeed feed = await

client.RetrieveFeedAsync(feedUri) menggunakan operator await untuk

memanggil fungsi asinkronus RetrieveFeedAsync. Bandingkan jika menggunakan blok

kode sinkronus misalnya RetrieveFeed ,sehingga kode kita menjadi SyndicationFeed

feed = client.RetrieveFeed(feedUri) dibandingkan blok kode yang ditulis

sebelumnya. Eksekusi aplikasi akan berhenti hingga RetrieveFeed selesai dieksekusi dan

selama aplikasi berhenti maka aplikasi tidak dapat memberikan respon terhadap event

yang lain. Penggunaan operator await membuat blok kode tidak terlihat begitu berbeda

dengan eksekusi kode sinkronus namun compiler secara otomatis mengeksekusi kode

tersebut secara asinkronus.

private async Task<String> GetTitleFeedAsync() { Windows.Web.Syndication.SyndicationClient client = new SyndicationClient(); // Force the SyndicationClient to download the information. client.BypassCacheOnRetrieve = true; Uri feedUri = new Uri("http://windowsteamblog.com/windows/b/windowsexperience/atom.aspx"); String result = String.Empty; try { // Call SyndicationClient RetrieveFeedAsync to download the list of blog posts. SyndicationFeed feed = await client.RetrieveFeedAsync(feedUri); // The rest of this method executes after await RetrieveFeedAsync completes. result = feed.Title.Text + Environment.NewLine; foreach (SyndicationItem item in feed.Items.Take(10)) { result += item.Title.Text + ", " + item.PublishedDate.ToString() + Environment.NewLine; } } catch (Exception ex) { // Log Error. result = "I'm sorry, but I couldn't load the page," + " possibly due to network problems." + "Here's the error message I received: " + ex.ToString(); } return result; }

18

6. Buat sebuah fungsi baru, kita beri nama InitializeAsync, yang berguna untuk memanggil

fungsi GetTitleFeedAsync dan menuliskan hasilnya ke layar. Jangan lupa gunakan operator

await karena kita memanggil fungsi asinkronus.

7. Fungsi InitializeAsync kita panggil di dalam fungsi LoadState. LoadState merupakan fungsi

standar bawaan dari template. Fungsi ini akan dipanggil setiap kali halaman FeedPage.xaml

dituju.

8. Tekan F5 untuk melihat hasilnya.

private async Task InitializeAsync() { feedOutput.Text = await GetTitleFeedAsync(); }

protected override void LoadState(Object navigationParameter, Dictionary<String, Object> pageState) { InitializeAsync(); }

19

Kontrol Untuk membangun antarmuka aplikasi Windows 8-style UI kita dapat menggunakan berbagai

macam kontrol yang tersedia seperti Button, TextBox atau ComboBox. Daftar kontrol secara

lengkap dapat dilihat pada halaman http://msdn.microsoft.com/en-

us/library/windows/apps/xaml/hh465351.aspx . Pada bagian ini kita akan melihat bagaimana

menambahkan kontrol pada aplikasi Windows 8 dan beberapa kontrol baru yang hanya

tersedia di Windows 8-style UI. Secara umum, pola yang digunakan ketika kita bekerja dengan

kontrol adalah sebagai berikut :

Kita tambahkan kontrol ke dalam aplikasi, bisa melalui Toolbox dari Visual Studio, dari

tampilan XAML ataupun dari kode

Tampilan kontrol diatur,misalnya berapa lebar,berapa tinggi, warna dan jarak kontrol

dari kontrol-kontrol disekitarnya

Menambahkan kode untuk menangani aksi yang ingin dilakukan jika pengguna

melakukan sesuatu terhadap kontrol tersebut.

Manipulasi terhadap kontrol yang sudah ditambahkan ke antarmuka dapat dilakukan melalui

editor Desain, editor XAML atau melalui jendela Properties. Kita dapat menambahkan

kontrol melalui klik ganda dari Toolbox. Sebagai contoh ketika kita menklik ganda pada

kontrol TextBox maka XAML nya ditambahkan ke dalam XAML view. Selain itu kita dapat

melakukan drag and drop pada editor Desain untuk menambahkan kontrol ke dalam aplikasi.

Untuk bekerja dengan kontrol pada kode, kita harus memberikan nilai pada properti Name

sehingga dapat diacu kemudian. Kita dapat melakukannya melalui jendela Properti atau

melalui XAML.

Pengaturan nama kontrol dari editor XAML dilakukan dengan langsung mengubah atribut

Name. Kita juga dapat mengatur nilai lainnya seperti Height, Weight dan sebagainya.

<TextBlock Style="{StaticResource SubheaderTextStyle}" x:Name="feedOutput"/>

http://msdn.microsoft.com/en-us/library/windows/apps/xaml/hh465351.aspx


20

Untuk melakukan di dalam kode, cukup akses nama kontrol melalui atribut Name dan

mengubah nilai atribut yang bersesuain. Misalnya kita ingin mengubah nilai Foreground dari

TextBlock dapat dilakukan dengan kode berikut ini :

Setiap kontrol memiliki events yang memungkinkan setiap aksi dari pengguna ditangkap untuk

melakukan sesuatu. Misalnya , kontrol Button memiliki event Click yang akan dibangkitkan

ketika pengguna mengklik Button tersebut. Dan kita dapat membuat sebuah fungsi, yang

biasa disebut event handler untuk menangani atau memberikan reaksi terhadap event yang

terjadi. Untuk membuat event handler kita dapat menggunakan jendela Properti atau dari

XAML maupun dari berkas code-behind.

Pilih kontrol yang hendak dibuat event handler dan klik tab Events pada bagian atas jendela

properti. Jendala properti akan memberikan daftar berbagai event yang tersedia pada kontrol

tersebut. Gambar dibawah ini memberikan contoh bagaimana menambahkan event handler

pada sebuah TextBlock.

Klik ganda pada event yang ingin dibuatkan event handler-nya. Visual Studio akan memberikan

secara otomatis nama fungsi yang bersesuaian dan langsung membuka berkas code-behind

serta menambahkan blok fungsi tersebut.

feedOutput.Foreground = new Windows.UI.Xaml.Media.SolidColorBrush(Windows.UI.Colors.Red);

private void feedOutput_Tapped(object sender, TappedRoutedEventArgs e) { //our code goes here }

21

Selanjutnya pemrogram dapat mengisi blok kode tersebut dengan lojik dan kelakukan yang

diharapkan. Kita juga dapat menambahkan event handler dari editor XAML dengan

menuliskan atribut yang sesuai.

Selanjutnya kita akan hanya akan membahas beberapa kontrol yang penting untuk diketahui

dan kontrol baru yang hanya tersedia di Windows 8-style UI. Jumlah kontrol yang tersedia

cukup banyak sehingga tidak akan dibahas satu per satu di buku ini.

Kontrol Layout

Terdapat beberapa kontrol yang kita gunakan untuk kontainer terhadap kontrol-kontrol

lainnya. Kontrol tipe kontainer biasa digunakan untuk keperluan layout dari antarmuka

aplikasi.

Border

Kontrol yang akan memberikan garis pembatas, warna latar belakang atau keduanya

disekeliling sebuah obyek.

Canvas

Panel yang mendukung pengaturan posisi kontrol di dalamnya secara absolut relatif terhadap

titik kiri atas kanvas.

<TextBlock Style="{StaticResource SubheaderTextStyle}" x:Name="feedOutput" Tapped="feedOutput_Tapped"/>

<Border BorderBrush="Gray" BorderThickness="4" Height="108" Width="64"> <StackPanel> <Rectangle Fill="Yellow"/> <Rectangle Fill="Green"/> </StackPanel> </Border>

22

Grid

Panel yang dapat mengatur posisi kontrol di dalamnya dalam baris dan kolom.

<Canvas Width="120" Height="120"> <Rectangle Fill="Red"/> <Rectangle Fill="Blue" Canvas.Left="20" Canvas.Top="20"/> <Rectangle Fill="Green" Canvas.Left="40" Canvas.Top="40"/> <Rectangle Fill="Yellow" Canvas.Left="60" Canvas.Top="60"/> </Canvas>

<Grid> <Grid.RowDefinitions> <RowDefinition Height="50"/> <RowDefinition Height="50"/> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="50"/> <ColumnDefinition Width="50"/> </Grid.ColumnDefinitions> <Rectangle Fill="Red"/> <Rectangle Fill="Blue" Grid.Row="1"/> <Rectangle Fill="Green" Grid.Column="1"/> <Rectangle Fill="Yellow" Grid.Row="1" Grid.Column="1"/> </Grid>

23

StackPanel

Panel yang akan mengatur kontrol di dalamnya ke dalam satu baris yang orientasinya dapat

diubah (horizontal atau vertikal).

Viewbox

Kontrol yang akan secara otomatis menyesuaikan ukuran konten yang ada di dalamnya.

<StackPanel> <Rectangle Fill="Red"/> <Rectangle Fill="Blue"/> <Rectangle Fill="Green"/> <Rectangle Fill="Yellow"/> </StackPanel>

<Viewbox MaxWidth="25" MaxHeight="25"> <Image Source="Assets/Logo.png"/> </Viewbox> <Viewbox MaxWidth="75" MaxHeight="75"> <Image Source="Assets/Logo.png"/> </Viewbox> <Viewbox MaxWidth="150" MaxHeight="150"> <Image Source="Assets/Logo.png"/> </Viewbox>

24

Kontrol untuk menampilkan koleksi

Terdapat beberapa kontrol baru dalam Windows 8 SDK untuk menampilkan koleksi, yaitu

FlipView dan GridView. Untuk melihat bagaimana tampilan kedua kontrol ini buatlah sebuah

proyek baru, aplikasi Windows Store dengan template Grid App.

Tekan F5 untuk melihat hasilnya.

Grid View

Kontrol yang digunakan untuk menampilkan koleksi benda dalam baris dan kolom dan dapat

di-scroll secara horizontal. Contoh penggunaan kontrol dalam XAML adalah sebagai berikut :

<GridView x:Name="gridView1" SelectionChanged="GridView_SelectionChanged"> <x:String>Item 1</x:String> <x:String>Item 2</x:String> </GridView>

25

Gambar 12 Tampilan Grid View

Flip View

Kontrol yang digunakan untuk menampilkan suatu koleksi benda, dan pengguna dapat

berpindah (flip) dari satu item ke item yang lain. Contoh penggunaan kontrol dalam XAML

adalah sebagai berikut :

<FlipView x:Name="flipView1" SelectionChanged="FlipView_SelectionChanged"> <Image Source="Assets/Logo.png" /> <Image Source="Assets/SplashScreen.png" /> <Image Source="Assets/SmallLogo.png" /> </FlipView>

26

Klik salah satu judul Grup di Aplikasi ControlUI maka akan ditampilkan halaman detail dari

sebuah item. Flip View memiliki tombol > dan < untuk navigasi dari satu item ke item lainnya.

Gambar 13 Tampilan Flip View

List View

Kontrol yang digunakan untuk menampilkan koleksi item yang dapat di-scroll secara vertikal.

Kontrol ini sering digunakan untuk menampilkan koleksi dalam keadaan snap. Contoh

penggunaan kontrol dalam XAML adalah sebagai berikut :

<ListView x:Name="listView1" SelectionChanged="ListView_SelectionChanged"> <x:String>Item 1</x:String> <x:String>Item 2</x:String> </ListView>

27

Kembali ke halaman utama dari aplikasi. Geser aplikasi ke salah satu sisi layar sehingga berada

dalam kondisi snap. Antarmuka aplikasi akan berganti dari GridView menjadi menggunakan

List View.

Gambar 14 Tampilan Flip View

Webview

Windows 8 SDK menyediakan secara khusus kontrol untuk menampilkan konten dari sebuah

web. Cara menggunakannya dalam XAML adalah sebagai berikut.

Untuk saat ini mari kita lanjutkan proyek sebelumnya, tambahkan sebuah halaman bertipe

Basic Page dan beri nama WebViewPage.xaml.

<WebView x:Name="webView1" Source="http://dev.windows.com" Height="400" Width="800" />

28

Pada bagian sebelum <VisualStateManager.VisualStateGroups> tambahkan kode XAML

berikut ini :

Buka berkas GroupedItemsPage.xaml.cs dan temukan fungsi Header_Click. Modifikasi blok

kode menjadi seperti dibawah ini. Kita akan mengubah lojik dari aplikasi sehingga setiap

sebuah header di klik akan menuju ke halaman WebViewPage.xaml

Tekan F5 dan perhatikan hasilnya. Sebuah halaman dengan halaman web yang ditampilkan

menggunakan kontrol WebView.

<WebView Grid.Row="1" x:Name="webView1" Source="http://dev.windows.com" Height="400" Width="800" />

void Header_Click(object sender, RoutedEventArgs e) { // Determine what group the Button instance represents var group = (sender as FrameworkElement).DataContext; //go to webview this.Frame.Navigate(typeof(WebViewPage), null); // Navigate to the appropriate destination page, configuring the new page // by passing required information as a navigation parameter //this.Frame.Navigate(typeof(GroupDetailPage), ((SampleDataGroup)group).UniqueId); }

29

Application Bar

Sejak awal kita mengetahui bahwa tampilan Windows 8-style UI memiliki banyak kemiripan

dengan pendahulunya, yaitu Windows Phone. Dengan demikian kita dapat menduga bahwa

Windows 8 pun meminjam beberapa hal spesifik dari Windows Phone, salah satunya adalah

penggunaan Application Bar untuk menu atau menampilkan pilihan aksi yang dapat

dilakukan oleh pengguna.

Application Bar pada aplikasi Windows 8-style UI secara normal berada dalam kondisi tidak

terlihat dan pengguna dapat mengaktifkan Application Bar tersebut dengan melakukan

gerakan swipe dari bawah atau klik kanan jika menggunakan tetikus. Terdapat suatu konvensi

dalam pengaturan tata letak Button pada Application Bar. Untuk aksi yang sifatnya umum

dalam aplikasi diletakkan di sebelah kanan sedangkan untuk aksi yang kontekstual,misalnya

hanya muncul jika ada item yang dipilih maka diletakkan disebelah kiri.

Untuk melihat bagaimana implementasi Application Bar, lanjutkan proyek sebelumnya dan

buka berkas WebViewPage.xaml. Pada bagian atas tempatkan blok kode berikut ini :

30

Untuk menggunakan tampilan yang konsisten pada Application Bar, kita dapat menggunakan

style yang sudah tersedia pada StandarStyles.xaml mengenai tipe-tipe Button yang bisa

digunakan,misalnya style untuk tombol Next, Edit dan sebagainya. Untuk sementara kontrol

WebView pada halaman ini kita berikan komentar terlebih dahulu. Jalankan aplikasi dengan

menekan F5. Klik kanan di dalam halaman WebViewPage.xaml dan perhatikan Application Bar

muncul dari sisi bawah.

<Page.BottomAppBar> <AppBar x:Name="BottomAppBar1" Padding="10,0,10,0"> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="50*"/> <ColumnDefinition Width="50*"/> </Grid.ColumnDefinitions> <StackPanel x:Name="LeftPanel" Orientation="Horizontal" Grid.Column="0" HorizontalAlignment="Left"> <Button x:Name="Edit" Style="{StaticResource EditAppBarButtonStyle}" Tag="Edit"/> <Button x:Name="Save" Style="{StaticResource SaveAppBarButtonStyle}" Tag="Save"/> <Button x:Name="Delete" Style="{StaticResource DeleteAppBarButtonStyle}" Tag="Delete"/> </StackPanel> <StackPanel x:Name="RightPanel" Orientation="Horizontal" Grid.Column="1" HorizontalAlignment="Right"> <Button x:Name="Refresh" Style="{StaticResource RefreshAppBarButtonStyle}" Tag="Refresh"/> <Button x:Name="Previous" Style="{StaticResource PreviousAppBarButtonStyle}" Tag="Previous"/> <Button x:Name="Next" Style="{StaticResource NextAppBarButtonStyle}" Tag="Next"/> <Button x:Name="Help" Style="{StaticResource HelpAppBarButtonStyle}" Tag="Help"/> </StackPanel> </Grid> </AppBar> </Page.BottomAppBar>

31

Gambar 15 Application Bar pada Windows 8-style UI

Karena Button pada Application Bar pada dasarnya adalah kontrol Button yang diberikan style

khusus maka untuk menambahkan event handler dilakukan dengan cara yang sama dengan

menambahkan event handler pada Button biasa. Penambahan Button ke dalam ApplicationBar

juga dapat ditambahkan melalui kode secara manual. Potongan kode berikut ini menunjukkan

bagaimana menambahkan sebuah Button ke dalam Application Bar di sisi panel sebelah kiri.

protected override void LoadState(Object navigationParameter, Dictionary<String, Object> pageState) { // We want to add command buttons to the right side StackPanel within the AppBar. StackPanel rightPanel = this.FindName("LeftPanel") as StackPanel; if (rightPanel != null) { // Create the button to add Button starButton = new Button(); // Hook up the custom button style so that it looks like an AppBar button starButton.Style = App.Current.Resources.MergedDictionaries[0]["RefreshAppBarButtonStyle"] as Style; // Set up the Click handler for the new button // starButton.Click += new RoutedEventHandler(starButton_Click); // Add the button to the AppBar rightPanel.Children.Add(starButton); } }

32

Tekan F5 untuk melihat aplikasi. Sekarang pada panel sebelah kanan telah tersedia tambahan

satu Button baru dengan gambar refresh.

ApplicationBar juga memiliki properti IsSticky yang memberikan tanda bahwa setelah

ApplicationBar muncul maka akan tetap dalam kondisi muncul hingga properti IsSticky diubah.

Dengan kata lain, Application Bar menjadi sticked ketika properti IsSticky diberi nilai true.

Windows 8 SDK menyediakan aneka ragam kontrol yang dapat kita gunakan untuk

membangun aplikasi. Jika kontrol yang sudah terdapat dalam SDK masih belum memenuhi

kebutuhan, pemrogram setiap waktu dapat membuat kontrol mereka sendiri dengan

menurunkan dari kelas yang paling mendekati. Selain membuat kontrol baru dengan

membuat kelas turunan, kita juga dapat membuat kontrol baru dengan menggabungkan

beberapa kontrol atau mengubah template yang digunakan kontrol tersebut. Untuk daftar

kontrol Windows 8 yang lebih lengkap dapat dilihat di halaman



MANIPULASI DATA

2

Data Binding Windows RT menyediakan suatu cara yang sederhana dan konsisten untuk menampilkan dan

berinteraksi dengan data. Setiap kontrol yang memiliki properti dapat diasosiasikan dengan

sumber data. Fitur ini disebut Data Binding, yaitu sebuah proses memberikan asosiasi antara

antarmuka dengan lojik aplikasi. Jika data yang di-binding berubah maka tampilan antarmuka

juga secara otomatis berubah dan juga sebaliknya jika suatu properti yang ditampilkan di

antarmuka berubah, perubahan tersebut dapat kita propagasi kan ke data yang sudah

terasosiasi.

Gambar 16 Konsep Data Binding

Data binding dapat kita pandang sebagai jembatan yang menghubungkan sebuah binding

target dengan binding source. Sebuah binding memiliki empat komponen, sebuah target

binding ,properti target, sumber data dan path dari data yang ingin ditampilkan. Sebagai

contoh, kita ingin melakukan binding terhadap TextBox terhadap properti Name dari suatu

kelas model Employee. Pada contoh ini target obyek adalah TextBox, target properti adalah

properti Text dari TextBox, nilai yang di binding adalah Name dan sumber datanya adalah

obyek Employee.

Properti target haruslah sebuah dependency property. Hampir properti UIElement dari kontrol

Windows RT merupakan dependency property dan setiap properti ini, kecuali yang sifatnya

hanya read-only mendukung data binding. Untuk sumber data yang memiliki koleksi benda

maka biasanya kontrol antarmuka yang digunakan untuk obyek data binding juga merupakan

kontrol yang tipe nya koleksi, seperti ListView,GridView dan FlipView.

Untuk melihat bagaimana tampilan implementasi data binding dalam aplikasi, buatlah sebuah

proyek baru, aplikasi Windows Store dengan template Grid App.

Object

Property

DependencyObject

Dependency

Property

Binding Target Binding Source

3

Implementasi Data Source

Pada jendela Solution Explorer buka berkas BindableBase.cs di dalam direktori Common.

Kelas ini memiliki satu event yaitu PropertyChanged.

[Windows.Foundation.Metadata.WebHostHidden] public abstract class BindableBase : INotifyPropertyChanged { /// <summary> /// Multicast event for property change notifications. /// </summary> public event PropertyChangedEventHandler PropertyChanged; protected bool SetProperty<T>(ref T storage, T value, [CallerMemberName] String propertyName = null) { if (object.Equals(storage, value)) return false; storage = value; this.OnPropertyChanged(propertyName); return true; } protected void OnPropertyChanged([CallerMemberName] string propertyName = null) { var eventHandler = this.PropertyChanged; if (eventHandler != null) { eventHandler(this, new PropertyChangedEventArgs(propertyName)); } } }

4

Kelas ini merupakan kelas helper yang dihasilkan oleh template dan sangat berguna untuk

membangun aplikasi yang menggunakan fitur data binding. Untuk membuat obyek-obyek

model yang dijadikan sumber data, kita dapat membuat kelas turunan dari BindableBase

sehingga mewarisi fitur PropertyChanged. Dengan adanya fitur ini maka setiap ada perubahan

nilai dari properti tersebut, akan dipropagasikan kepada kontrol yang direkatkan ke data

tersebut. Dengan demikian mekanisme perubahan data antara model dan antarmuka dapat

dilakukan dengan mudah.

Selanjutnya, bukalah berkas SampleDataSource.cs di dalam direktori DataModel. Di dalam

kelas ini terdapat berbagai deklarasi kelas SampleDataCommon dan SampleDataItem. Kelas

SampleDataCommon merupakan kelas abstrak yang diturunkan dari kelas BindableBase. Kelas

ini berfungsi menjadi kelas bapak SampleDataItem. SampleDataItem merupakan kelas model

yang digunakan template Grid App untuk menampilkan data di dalam aplikasi tersebut.

Contoh implementasi kelas model tersebut adalah seperti dibawah ini. Setiap fungsi setter

dilakukan pemanggilan fungsi SetProperty yang merupakan fungsi yang didapatkan dari kelas

BindableBase. Fungsi ini berguna untuk mempropagasikan perubahan nilai ke kontrol yang

mengikat nilai dari model ini.

Implementasi Binding Target

Untuk implementasi binding target secara sederhana kita bisa memanfaatkan properti

DataContext yang dimiliki kontrol bertipe Page. Setiap obyek yang kita berikan ke dalam

DataContext maka setiap elemen yang terdapat pada pohon antarmuka XAML dapat

mengakses nilai tersebut. Sebagai contoh, jika kita menginstansiasi kelas SampeDataItem dan

kita berikan nilai tersebut ke DataContext, setiap kontrol pada pohon XAML, misalnya

/// <summary> /// Generic item data model. /// </summary> public class SampleDataItem : SampleDataCommon { public SampleDataItem(String uniqueId, String title, String subtitle, String imagePath, String description, String content, SampleDataGroup group) : base(uniqueId, title, subtitle, imagePath, description) { this._content = content; this._group = group; } private string _content = string.Empty; public string Content { get { return this._content; } set { this.SetProperty(ref this._content, value); } }

….

5

TextBlock, akan dapat menampilkan nilai dari anggota kelas tersebut dengan deklarasi binding

yang sesuai.

Bukalah berkas GroupedItemsPage.xaml.cs dan tambahkan kode berikut ini di dalam fungsi

LoadState. Kita akan membuat instans dari kelas SampleDataItem, memberikan nilai tertentu

dan menjadikan nilai tersebut menjadi nilai DataContext. Pada saat ini, suatu kelas bernama

data bertipe SampleDataItem telah menjadi sumber data bagi halaman tersebut. Selanjutnya

pada antarmuka, kita dapat membuat sebuah kontrol dan menampilkan data dari anggota-

anggota kelas SampleDataItem.

Buka GroupedItemsPage.xaml , tepat diatas kontrol GridView tampatkan sebuah TextBlock.

Perhatikan untuk sementara GridView diatur agar tidak tampil terlebih dahulu

(Visibility=Collapsed) . Atribut Text dari TextBlock kita berikan nilai Title melalui deklarasi

binding. Dengan demikian, pada saat runtime, TextBlock akan mencari nilai Title dari apapun

obyek yang direkatkan ke dalam DataContext. Karena DataContext kita rekatkan ke kelas

SampleDataItem, maka TextBlock akan menampilkan nilai “title test” , nilai dari anggota kelas

yang namanya bersesuaian dengan deklarasi binding.

Tekanlah F5 untuk melihat hasilnya.

protected override void LoadState(Object navigationParameter, Dictionary<String, Object> pageState) { // TODO: Create an appropriate data model for your problem domain to replace the sample data //var sampleDataGroups = SampleDataSource.GetGroups((String)navigationParameter); //this.DefaultViewModel["Groups"] = sampleDataGroups; SampleDataItem data = new SampleDataItem("1", "title test", "subtitle", null, null, null, null); this.DataContext = data; }

<TextBlock Grid.Row="2" Text="{Binding Title}" Style="{StaticResource HeaderTextStyle}"/>  <GridView Visibility="Collapsed"

6

Untuk melihat bagaimana implementasi binding target pada template Grid App ini, bukalah

berkas GroupedItemsPage.xaml . Perhatikan kontrol GridView pada XAML editor dan Anda

seharusnya akan dapat melihat blok kode berikut ini :

Untuk kontrol yang bertipe koleksi seperti GridView maka untuk menghasilkan antarmuka

berdasarkan jumlah dari koleksi yang di-binding dilakukan dengan memberikan nilai pada

atribut ItemsSource. Pada contoh diatas, ItemsSource diberikan nilai {Binding Source =

{Static Resource groupedItemsViewsSource}} . Dengan demikian GridView akan

berusaha memperoleh nilai dari sebuah resource bernama groupedItemsViewSource.

<GridView x:Name="itemGridView" AutomationProperties.AutomationId="ItemGridView" AutomationProperties.Name="Grouped Items" Grid.RowSpan="2" Padding="116,137,40,46" ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}" ItemTemplate="{StaticResource Standard250x250ItemTemplate}" SelectionMode="None" IsSwipeEnabled="false" IsItemClickEnabled="True" ItemClick="ItemView_ItemClick">

<CollectionViewSource x:Name="groupedItemsViewSource" Source="{Binding Groups}" IsSourceGrouped="true" ItemsPath="TopItems" d:Source="{Binding AllGroups, Source={d:DesignInstance

Type=data:SampleDataSource, IsDesignTimeCreatable=True}}"/>

7

Perhatikan pada bagian atas berkas, setelah <Page.Resources> , terdapat deklarasi

CollectionViewSource yang diberi nama groupedItemsViewsSource. CollectionViewSource

mengambil nilainya dari variabel. Groups dan mengakses anggota variabel tersebut, yaitu

TopItems. Untuk mengetahui nilai Groups mengacu ke variabel yang mana, cobalah scroll ke

paling atas hingga tampak deklarasi DataContext seperti dibawah ini :

Dari sini kita sudah mengetahui bahwa Groups mengacu pada suatu nilai dari sebuah variabel

DefaultViewModel, yang merupakan nilai dari DataContext pada halaman tersebut. Untuk

mengetahui variabel apa yang terdapat pada kata kunci Groups, bukalah berkas

GroupedItemsPage.xaml.cs dan perhatikan fungsi LoadState.

Ternyata Groups adalah sebuah nilai yang bertipe IEnumerable<SampleDataGroup> sehingga

dapat kita simpulkan bahwa sumber data GridView adalah sebuah

IEnumerable<SampleDataGroup> , dimana untuk masing-masing SampleDataGroup, memiliki

variabel lagi, yaitu sebuah koleksi yang berisi SampleDataItem. Koleksi SampleDataItem ini

akan menjadi sumber data masing-masing grup dari GridView tersebut.

Bagian akhir dari proses data binding ini adalah tampilan antarmuka yang menampilkan

koleksi dari SampleDataItem. Untuk mengetahui struktur tampilan bagaimana GridView akan

menampilkan masing-masing SampleDataItem tersebut, perhatikan blok kode

GridView,dimana nilai atribut ItemsTemplate adalah ItemTemplate="{StaticResource

Standard250x250ItemTemplate}”. Dengan demikian kita mengetahui bahwa masing-

masing SampleDataItem tersebut ditampilkan dengan menggunakan suatu template bernama

Standard250x250ItemTemplate. Bukalah berkas StandardStyles.xaml di dalam direktori

Common dan temukan blok kode yang diberi kata kunci Standar250x250ItemTemplate.

<common:LayoutAwarePage x:Name="pageRoot" x:Class="DataBinding.GroupedItemsPage" DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource

Self}}"

protected override void LoadState(Object navigationParameter, Dictionary<String, Object> pageState) { // TODO: Create an appropriate data model for your problem domain to replace the sample data var sampleDataGroups = SampleDataSource.GetGroups((String)navigationParameter); this.DefaultViewModel["Groups"] = sampleDataGroups; }

8

Dari deklarasi DataTemplate sekarang kita mengetahui bahwa untuk masing-masing

SampleDataItem ditampilkan menggunakan suatu kontrol yang terdiri dari beberapa Text

dengan layout StackPanel. Dan anggota dari SampleDataItem yang diakses adalah

Title,Subtitle dan Image.

Tekanlah F5 untuk melihat bagaimana hasil data binding tersebut.

Memahami dengan baik bagaimana proses data binding bekerja dapat menghemat dan

mempermudah kita dalam pengembangan aplikas di Windows 8-style UI. Dengan data binding

pemisahan antarmuka dan lojik dapat dilakukan dengan lebih intuitif dan mudah.

<DataTemplate x:Key="Standard250x250ItemTemplate"> <Grid HorizontalAlignment="Left" Width="250" Height="250"> <Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}"> <Image Source="{Binding Image}" Stretch="UniformToFill" AutomationProperties.Name="{Binding Title}"/> </Border> <StackPanel VerticalAlignment="Bottom" Background="{StaticResource ListViewItemOverlayBackgroundThemeBrush}"> <TextBlock Text="{Binding Title}" Foreground="{StaticResource ListViewItemOverlayForegroundThemeBrush}" Style="{StaticResource TitleTextStyle}" Height="60" Margin="15,0,15,0"/> <TextBlock Text="{Binding Subtitle}" Foreground="{StaticResource ListViewItemOverlaySecondaryForegroundThemeBrush}" Style="{StaticResource CaptionTextStyle}" TextWrapping="NoWrap" Margin="15,0,15,10"/> </StackPanel> </Grid> </DataTemplate>

9

Konsumsi Web Service Di dunia yang serba terhubung seperti saat ini, sering sekali terdapat skenario dimana suatu

aplikasi membutuhkan suatu data dari internet. Lebih umum lagi, web service sudah menjadi

suatu standar ketika kita ingin menggunakan suatu fungsi yang terdapat pada web. Pada

bagian ini kita akan melihat bagaimana cara mengonsumsi web service dalam aplikasi

Windows 8-style UI. Web service yang dapat dikonsumsi oleh Windows RT dapat berupa

SOAP (baik yang dibangun dengan WCF atau teknologi lain), plain HTTP atau pun REST.

Untuk dapat mengakses web service ini dapat dilakukan secara langsung atau pun melalui

kelas proxy yang dibangkitkan secara otomatis dari metadata yang melekat pada suatu

layanan. Sebuah layanan merupakan service yang Anda buat sendiri dan ditempatkan pada

server Anda, atau sebuah layanan pihak ketika, misalnya sebut saja Facebook,Twitter dan

layanan lainnya. Windows RT dapat bekerja dengan berbagai data format seperti XML,Json

mapun RSS.

Akses Menggunakan Generated Class

Mengakses suatu layanan melalui suatu proxy class yang dibangkitkan dari metadata dapat

meningkatkan produktivitas dalam pengembangan aplikasi. Pada bagian ini akan diberikan

contoh pengaksesan layanan web yang juga dibangun dengan teknologi Microsoft

menggunakan proxy class yang dibangkitkan secara otomatis.

Membuat Web Service

1. Jalankan Visual Studio Anda yang mendukung pembuatan project Web Application buat

sebuah project Web ASP.NET Web Application,beri nama Webservice.

10

2. Pada jendela Solution Explorer tambahkan sebuah file web service dengan cara klik kanan

pada Project | Add | Add New Item . Pilih Web Service dan klik Add

3. Kita hanya akan menggunakan fungsi yang secara otomatis dibangkitkan, yaitu web

service method yang akan mengembalikan suatu string “Hello World”. Pembahasan

mengenai web service tidak akan dijelaskan lebih jauh disini karena fokus kita adalah di

sisi akses Windows 8-style UI.

4. Jalankan web service tersebut dengan menekan F5 atau mengklik tombol play.

11

5. Sekarang web service sederhana sudah siap dikonsumsi. Jangan non-aktifkan browser

Anda .

Menambahkan Referensi Web Service

Untuk melihat bagaimana tampilan implementasi data binding dalam aplikasi, buatlah sebuah

proyek baru, aplikasi Windows Store dengan template Blank App,beri nama

Program_WebService.

12

1. Pada jendela Solution Explorer, klik kanan References dan pilih Add Service

Reference.

2. Copy dan paste alamat akses web service yang sudah dibuat sebelumnya. Kita dapat

mengambilnya dari kotak alamat yang terbuka pada browser lalu pilih Go.

13

3. Jika web service ditemukan dan tersedia maka daftar service berikut operasi yang dapat

digunakan akan ditampilkan. Berikan nama namespace yang sesuai , pada contoh ini

akan diberi nama ServiceReference1 dan klik OK

4. Jika penambahah berhasil maka pada jendela Solution Explorer dapat kita amati suatu

file config dan file Reference terhadap web service yang sudah dibuat.

14

Mengonsumsi Web Service

Untuk mengonsumsi web service kita akan membuat satu halaman baru.

1. Klik kanan pada project, Add New Item dan pilih Basic Page , beri nama

WebService1.xaml dan klik OK.

2. Tambahkan sebuah Button dan TextBlock tepat diatas

<VisualStateManager.VisualStateGroups>.

3. Klik ganda pada Button untuk menambahkan event handler. Tambahkan blok kode

berikut ini.

<StackPanel Grid.Row="1" Margin="120,30,0,0" > <Button>Call</Button> <TextBlock x:Name="outputText" Style="{StaticResource HeaderTextStyle}"/> </StackPanel>

15

Pada fungsi GetHelloWorldAsync, kita menginisiasi proxy layanan dan memanggil fungsi

yang tersedia, yaitu HelloWorldAsync.

4. Buka App.xaml.cs dan temukan fungsi OnLaunched . Modifikasi fungsi tersebut sehingga

aplikasi akan membuka WebService1.xaml ketika aplikasi dijalankan.

5. Tekan F5 dan lihat hasilnya.

private void Button_Click_1(object sender, RoutedEventArgs e) { GetHelloWorldAsync(); } async void GetHelloWorldAsync() { ServiceReference1.WebService1SoapClient client = new ServiceReference1.WebService1SoapClient(); ServiceReference1.HelloWorldResponse result = await client.HelloWorldAsync(); outputText.Text = result.Body.HelloWorldResult; }

if (!rootFrame.Navigate(typeof(WebService1), args.Arguments)) { throw new Exception("Failed to create initial page"); }

16

Akses Menggunakan HttpClient

Pada bagian ini akan kita lihat bagaimana menggunakan HttpClient untuk mengonsumsi

sebuah resource dari internet. Resource yang akan kita gunakan adalah resource yang sama

pada latihan sebelumnya.

1. Modifikasi XAML menjadi seperti berikut ini :

2. Tambahkan event handler Button_Click_2 pada berkas WebService1.xaml.cs

Untuk mengakses fungsi HelloWorld, kita menggunakan HTTP POST dengan memanggil

fungsi PostAsync dan memperoleh hasilnya dengan fungsi ReadAsStringAsync();

3. Tekan F5 untuk melihat hasilnya. Klik Button HttpClient dan aplikasi akan menampilkan

kembalian dari fungsi HelloWorld dalam format xml.

<StackPanel Grid.Row="1" Margin="120,30,0,0" > <Button Click="Button_Click_1">Call</Button> <TextBlock x:Name="outputText" Style="{StaticResource HeaderTextStyle}"/> <Button Click="Button_Click_2">Call HttpClient</Button> <TextBlock x:Name="outputText2" Style="{StaticResource HeaderTextStyle}"/> </StackPanel>

private async void Button_Click_2(object sender, RoutedEventArgs e) { HttpClient client = new HttpClient(); Uri uri = new Uri("http://localhost:23671/WebService1.asmx/HelloWorld"); HttpResponseMessage response = await client.PostAsync(uri, null); outputText2.Text = await response.Content.ReadAsStringAsync(); }

17

Kelas HttpClient memiliki berbagai fungsi yang dapat kita gunakan sesuai dengan jenis operasi

Http yang ingin kita lakukan. Misalnya jika ingin melakukan Http Get , kita dapat menggunakan

GetAsync atau jika kita sudah percaya diri bahwa nilai kembalian dari layanan web adalah

string kita dapat menggunakan fungsi GetStringAsync . Terdapat juga fungsi untuk operasi

Http Put dan Http Delete.

Operasi File Windows RT Berkas atau file merupakan bagian penting dari suatu aplikasi. Seringkali kita membutuhkan

persistensi data,atau membutuhkan suatu masukan berupa berkas untuk menjalankan lojik

dari aplikasi kita. Windows RT menyediakan beberapa cara untuk dapat mengakses berkas

pada filesytem Windows 8. Cara yang pertama adalah menggunakan file pickers, yaitu sebuah

mekanisme dimana aplikasi akan menggunakan suatu antarmuka yang sudah terdefinisi

untuk memilih berkas dan mendapatkan nilai kembalian berupa berkas yang dipilih. Cara

berikutnya adalah secara manual dengan mengakses File API di WindowsRT.

File Pickers

File pickers memiliki suatu area pada atas dan bawah layar untuk menampilkan informasi dan

memberikan kemudahan dan pengalaman yang konsisten bagi pengguna untuk mengakses

berkas. Informasi yang disampaikan diantaranya adalah :

Lokasi saat ini pada bagian atas kiri

Daftar berkas yang sedang dipilih pengguna pada bagian bawa

18

Sebuah daftar drop-drown dimana pengguna dapat memilih dan mencari berkas pada

direktori di file system.

Gambar 17 Tampilan File Picker

Pengguna dapat melihat daftar lokasi yang tersedia dengan memilih panah ke bawah. Lokasi

ini termasuk lokasi sistem seperti direktori Downloads atau Music dan juga aplikasi penyedia

berkas seperti Microsoft SkyDrive dan lainnya.

File Pickers bekerja dengan memanggil File Pickers API dimana pengguna nanti dihadapkan

ke suatu antarmuka yang konsisten dan dapat memilih berkas yang dinginkan. Setelah

pengguna memilih berkas atau folder, aplikasi akan menerima obyek StorageFile dan

StorageFlder. Kemudian obyek ini digunakan di dalam aplikasi.

Diagram dibawah ini menunjukkan bagaimana cara kerja File Pickers.

19

Gambar 18 Diagram alir cara kerja File Pickers

Untuk melihat bagaimana implementasi file pickers dalam aplikasi, buatlah sebuah proyek

baru, aplikasi Windows Store dengan template Blank App,beri nama Program_FilePickers.

1. Hapus dahulu berkas MainPage.xaml lalu tambahkan sebuah Page bertipe Basic Page

lalu beri nama MainPage.xaml. Halaman baru ini akan menjadi halaman pertama aplikasi

20

2. Tambahkan blok kode dibawah ini pada MainPage.xaml tepat sebelum tag

<VisualStateManager>.<VisualStateGroups>

3. Tambahkan event handler Button_Click_1 dengan blok kode berikut ini :

<StackPanel Grid.Row="1" Margin="120,30,0,0" > <Button Click="Button_Click_1">Open</Button> <TextBlock x:Name="outputText" Style="{StaticResource HeaderTextStyle}"/> </StackPanel>

private async void Button_Click_1(object sender, RoutedEventArgs e) { FileOpenPicker openPicker = new FileOpenPicker(); openPicker.ViewMode = PickerViewMode.Thumbnail; openPicker.SuggestedStartLocation = PickerLocationId.PicturesLibrary; openPicker.FileTypeFilter.Add(".jpg"); openPicker.FileTypeFilter.Add(".jpeg"); openPicker.FileTypeFilter.Add(".png"); StorageFile file = await openPicker.PickSingleFileAsync(); if (file != null) { // Application now has read/write access to the picked file outputText.Text = "Picked photo: " + file.Name; } else { outputText.Text = "Operation cancelled."; } }

21

File Pickers memiliki beberapa opsi pengaturan yaitu :

ViewMode : bagaimana berkas-berkas akan ditampilkan

SuggestedStartLocation : lokasi direktori awal ketika File Pickers dipanggil

FileTypeFilter : untuk membatasi tipe berkas yang dapat dibuka

Untuk jumlah berkas lebih dari satu, gunakan fungsi PickMultipleFilesAsync.

Untuk mengambil satu direktori secara langsung gunakan fungsi

FolderPicker.PickSingleFolderAsync

4. Tekan F5 untuk melihat hasilnya.

Pada saat Button Open di klik maka antarmuka File Pickers akan tampil dilayar.

Setelah berkas dipilih maka nama berkas yang dipilih akan ditampilkan dilayar.

22

FilePickers tidak dapat bekerja pada mode Snap sehingga sebaiknya setiap pemanggilan

FilePickers dilakukan pemeriksaan kondisi tampilan pada saat ini.

Membaca dan Menulis File

Untuk bekerja dengan berkas pada Windows RT maka kita dapat menggunakan File API ,

terutama kelas StorageFolder dan StorageFile. Jika Anda hendak menulis berkas ke filesystem

kita harus mendeklarasikan kemampuan tersebut ke dalam aplikasi melalui App CapabilitApp

Capability.

Untuk melihat bagaimana implementasi File API dalam aplikasi, buatlah sebuah proyek baru,

aplikasi Windows Store dengan template Blank App,beri nama Program_FileIO.

23





24

3. Untuk keperluan program ini,akan dibuat sebuah nilai konstan yang akan digunakan

untuk nama berkas yang dibuat :


Disini kita membuka sebuah direktori bernama Documents lalu membuka berkas bernama

filename. Kemudian berkas tersebut ditulis dengan teks yang diperoleh dari TextBox

inputText.


Disini kita membuka sebuah direktori bernama Documents lalu membuka berkas bernama

filename. Kemudian berkas tersebut dibaca dan isinya ditampilkan di layar.

Membaca berkas juga dapat dilakukan dengan membuka berkas terlebih dahulu menjadi

sebuah lalu dengan menggunakan Reader membaca String yang berada di dalam berkas.

<StackPanel Grid.Row="1" Margin="120,30,0,0" > <Button Click="Button_Click_1">save</Button> <TextBox Width="400" HorizontalAlignment="Left" x:Name="inputText"></TextBox> <TextBlock x:Name="outputText" Style="{StaticResource HeaderTextStyle}"/> <Button Margin="0,20,0,0" Click="Button_Click_2">open</Button> <TextBlock x:Name="outputText2" Style="{StaticResource HeaderTextStyle}"/> </StackPanel>

const string filename = "sample.dat";

private async void Button_Click_1(object sender, RoutedEventArgs e) { StorageFolder storageFolder = KnownFolders.DocumentsLibrary; StorageFile sampleFile = await storageFolder.GetFileAsync(filename); await FileIO.WriteTextAsync(sampleFile, inputText.Text); }

private async void Button_Click_2(object sender, RoutedEventArgs e) { StorageFolder storageFolder = KnownFolders.DocumentsLibrary; StorageFile sampleFile = await storageFolder.GetFileAsync(filename); outputText2.Text = await FileIO.ReadTextAsync(sampleFile); }

25

6. Untuk membuat berkas yang akan ditulis dan dibaca, tempatkan blok kode berikut ini

dan panggil di dalam fungsi LoadState.

Untuk membuat sebuah berkas maka fungsi yang digunakan adalah

StorageFolder.CreateFileAsync.

7. Untuk memberikan akses direktori Documents kepada aplikasi kita harus memberikan

deklarasi eksplisit di dalam manifest aplikasi. Buka berkas package.manifest dan pastikan

konfigurasinya seperti gambar dibawah ini.

private async void Button_Click_2(object sender, RoutedEventArgs e) { StorageFolder storageFolder = KnownFolders.DocumentsLibrary; StorageFile sampleFile = await storageFolder.GetFileAsync(filename); var stream = await sampleFile.OpenAsync(FileAccessMode.Read); var size = stream.Size; using (var inputStream = stream.GetInputStreamAt(0)) { DataReader reader = new DataReader(inputStream); uint length = await reader.LoadAsync((uint)(stream.Size)); outputText2.Text = reader.ReadString(length); } }

private async void CreateFileAsync() { StorageFolder storageFolder = KnownFolders.DocumentsLibrary; StorageFile sampleFile = await storageFolder.CreateFileAsync(filename, CreationCollisionOption.ReplaceExisting); outputText.Text = "The file '" + sampleFile.Name + "' was created."; }

protected override void LoadState(Object navigationParameter, Dictionary<String, Object> pageState) { CreateFileAsync(); }

26

8. Lalu pada Tab Declarations berikan akses aplikasi terhadap tipe berkas yang ingin

digunakan oleh program. Pada daftar deklarasi yang tersedia pilih File Type Associations

dan klik Add. Karena pada program tipe berkas yang digunakan adalah file data (.dat) ,

tambahkan informasi tersebut ke metadata berkas seperti dibawah ini.

9. Tekan F5 untuk menjalankan aplikasi. Jika berkas berhasil dibuat maka akan tampil

keterangan teks berkas berhasil dibuat. Untuk menulis berkas tambahkan teks

sembarang di dalam kotak teks dan tekan save. Lalu untuk membaca nya klik open.

27

Bukalah direktori Documents dan periksa apakah isi berkas tersebut sudah sesuai.

Application Data Aplikasi Windows 8 dapat memiliki tempat penyimpanan yang terisolasi, yang hanya dapat

diakses oleh aplikasi tersebut. Dalam Windows Phone dan Silverlight hal ini dikenal dengan

sebutan IsolatedStorage. Konsep serupa juga dimiliki oleh aplikasi Window 8-style UI dimana

masing-masing aplikasi memiliki sejumlah kuota untuk menyimpan berkas-berkas spesifik

yang hanya ingin diketahui atau diakses oleh satu aplikasi.

28

Terdapat dua penyimpanan yaitu lokal (pada perangkat keras) dan roaming .

Penyimpanan Lokal

Untuk melihat bagaimana implementasi application data dalam aplikasi, buatlah sebuah

proyek baru, aplikasi Windows Store dengan template Blank App,beri nama

Program_ApplicationData.



29



3. Tambahkan deklarasi ApplicationDataContainer. Variabel ini akan menjadi referensi,

tempat kita menyimpan data pada penyimpanan lokal aplikasi.

4. Untuk menyimpan dan membaca data yang disimpan ke dalam kontainer lokal

tambahkan blok kode berikut

<StackPanel Grid.Row="1" Margin="120,30,0,0" > <Button Click="Button_Click_1">save</Button> <TextBox Width="400" HorizontalAlignment="Left" x:Name="inputText"></TextBox> <TextBox Width="400" HorizontalAlignment="Left" x:Name="inputText2"></TextBox> <TextBox Width="400" HorizontalAlignment="Left" x:Name="inputText3"></TextBox> <Button Margin="0,20,0,0" Click="Button_Click_2">open</Button> <TextBlock x:Name="outputText2" Style="{StaticResource HeaderTextStyle}"/> <TextBlock x:Name="outputText3" Style="{StaticResource HeaderTextStyle}"/> <TextBlock x:Name="outputText4" Style="{StaticResource HeaderTextStyle}"/> </StackPanel>

protected override void LoadState(Object navigationParameter, Dictionary<String, Object> pageState) { localSettings = Windows.Storage.ApplicationData.Current.LocalSettings; } Windows.Storage.ApplicationDataContainer localSettings;

private async void SaveSettingAsync(string settingKey,string settingValue,ApplicationDataContainer settings) { settings.Values[settingKey] = settingValue; } private async Task<String> LoadSettingAsync(string settingKey, ApplicationDataContainer settings) { return settings.Values[settingKey].ToString(); }

30

ApplicationDataCointainer memiliki anggota Values yang bekerja seperti Dictionary di .NET

framework. Untuk menyimpan data kita cukup menambahkan kata kunci untuk mengacu

nilai tersebut.

5. Untuk menyimpan dan membaca data atomik yang disimpan ke dalam kontainer lokal

tambahkan blok kode berikut.

Untuk menyimpan suatu nilai atomic tanpa harus membentuk tipe bentukan kita dapat

menggunakan kelas ApplicationDataCompositeValue. Kelas ini dapat menampung sejumlah

nilai dan disimpan dengan menggunakan kata kunci. Selanjutnya nilai yang disimpan dapat

diacu menggunakan kata kunci yang sesuai.

6. Di dalam ApplicationDataCointainer kita dapat membuat kontainer-kontainer lain untuk

membuat semacam grup penyimpanan nilai konfigurasi. Untuk melakukannya berikut

contoh penggunaan kontainer pada ApplicationDataContainer.

private async void SaveSettingCompositeAsync(string settingKey,string settingValue,ApplicationDataContainer settings) { ApplicationDataCompositeValue composite = new ApplicationDataCompositeValue(); composite["intVal"] = 1; composite["strVal"] = settingValue; settings.Values[settingKey] = composite; } private async Task<ApplicationDataCompositeValue> LoadSettingCompositeAsync(string settingKey, ApplicationDataContainer settings) { ApplicationDataCompositeValue composite = (ApplicationDataCompositeValue)settings.Values[settingKey]; if (composite == null) return null; else return composite; }

31

7. Untuk mencoba beberapa fungsi diatas tempat kan blok kode berikut pada event handler

Button 1 dan Button 2.

8. Tekan F5 untuk melihat hasilnya. Berikan nilai pada TextBox pertama,kedua dan ketiga.

Lalu tekan save. Kemudian tekan open untuk melihat hasilnya.

private async void SaveSettingViaContainerAsync(string settingKey,string settingValue, string settingContainer,ApplicationDataContainer settings) { ApplicationDataContainer container = settings.CreateContainer(settingContainer, ApplicationDataCreateDisposition.Always); if (settings.Containers.ContainsKey(settingContainer)) { settings.Containers[settingContainer].Values[settingKey] = settingValue; } } private async Task<String> LoadSettingViaContainerAsync(string settingKey, string settingContainer, ApplicationDataContainer settings) { bool hasContainer = settings.Containers.ContainsKey(settingContainer); if (hasContainer) { return settings.Containers[settingContainer].Values[settingKey].ToString(); } else return null; }

private async void Button_Click_1(object sender, RoutedEventArgs e) { SaveSettingAsync("setting1",inputText.Text, localSettings); SaveSettingCompositeAsync("setting2",inputText2.Text, localSettings); SaveSettingViaContainerAsync("setting1",inputText3.Text, "container", localSettings); } private async void Button_Click_2(object sender, RoutedEventArgs e) { outputText2.Text = await LoadSettingAsync("setting1", localSettings); ApplicationDataCompositeValue compositeValue = await LoadSettingCompositeAsync("setting2", localSettings); outputText3.Text = compositeValue["strVal"].ToString(); outputText4.Text = await LoadSettingViaContainerAsync("setting1","container", localSettings); }

32

Perhatikan meskipun kita menyimpan dua nilai dengan satu kata kunci yang sama yaitu

setting1 namun nilai nya tidak akan saling overlap , karena penyimpanan yang kedua disimpan

di kontainer yang berlainan.

Kita juga dapat menggunakan penyimpanan lokal untuk menyimpan berkas. Untuk

mendapatkan referensi terhadap direktori yang akan digunakan aplikasi , panggil fungsi

Windows.Storage.ApplicationData.Current.LocalFolder . Setelah mendapatkan

acuan ke direktori yang digunakan, berbagai fungsi pada subbab Operasi File Windows RT

dapat digunakan. Jika kita menggunakan direktori pada ApplicationData maka hanya aplikasi

kita saja yang dapat mengakses berkas yang tersimpan di dalamnya.

Roaming

Windows 8 ekosistem salah satunya dirancang untuk pengguna yang memiliki mobilitas

tinggi,ingin selalu terkoneksi dan pengalaman yang menyenangkan ketika berpindah

perangkat. Untuk mendukung itu, pada Windows 8 diperkenalkan suatu teknik penyimpanan

yang disebut Roaming. Dengan Roaming maka sejumlah data , biasanya nilai konfigurasi dan

berkas yang ukurannya tidak begitu besar dapat disimpan di-cloud. Namun cloud tempat

penyimpanan ini ‘tidak terlihat’ oleh pengguna atau pemrogram. Kita tidak akan pernah tahu

dimana sesungguhnya data disimpan karena seluruh infrastruktur sudah dibangun dan akses

tersedia hanya melalui Windows RT API.

Dengan Roaming, seseorang dapat berpindah perangkat keras namun tidak kehilangan

konfigurasi atau sesuatu yang sedang dikerjakannya diperangkat sebelumnya. Untuk lebih

jelasnya bayangkan seseorang yang bekerja di kantor dan komputernya sudah menggunakan

33

Windows 8. Sambil menunggu jalanan yang macet, ia membuka berkas-berkas foto yang

dimilikinya. Setelah ia pulang, ia membuka aplikasi foto yang sama di perangkat Windows 8

lain yang ia miliki, mungkin sebuah tablet, dan berkat Roaming, foto terakhir yang mungkin

sedang dilihat atau dimodifikasi akan tampil begitu aplikasinya dibuka.

Gambar 19 Ilustrasi Roaming

Sebuah aplikasi yang menginginkan fitur ini harus mengimplementasikan fungsi

DataChanged untuk menerima informasi jika terdapat perubahan data di Roaming. Aplikasi

harus mendengarkan event DataChanged dan menyediakan fungsi event handler yang akan

menangani perubahan data tersebut.

Untuk melakukan penyimpanan gunakan kelas ApplicationData.Roaming.Settings untuk

konfigurasi dan ApplicationData.RoamingFolder untuk berkas. Referensi direktori setting

adalah Windows.Storage.ApplicationData.Current.RoamingSettings dan untuk

memperoleh referensi direktori roaming dapat diakses melalui referensi ke

Windows.Storage.ApplicationData.Current.RoamingFolder

void InitHandlers() { Windows.Storage.ApplicationData.Current.DataChanged += new TypedEventHandler<ApplicationData, object>(DataChangeHandler); } void DataChangeHandler(Windows.Storage.ApplicationData appData, object o) { // TODO: Refresh your data } }

KONTRAK & EKSTENSI

Integrasi dengan Pengalaman Windows 8 Aplikasi Windows 8-style UI menggunakan kontrak dan ekstensi untuk mendeklarasikan

interaksi antar satu aplikasi dengan aplikasi lain. Dengan menggunakan kontrak dan ekstensi,

suatu aplikasi dapat memberikan integrasi dengan keseluruhan pengalaman Windows 8.

Aplikasi yang menggunakan kontrak dan ekstensi harus mendeklarasikan kemampuan ini di

dalam paket manifest dan memanggil fitur tersebut melalui WinRT API.

Kontrak adalalah perjanjian antara satu aplikasi dan aplikasi lainnya. Kontrak memberikan

kebutuhan tentang hal apa saja yang harus diimpleimentasi untuk memenuhi interaksi dan

pengalaman Windows 8. Sebagai contoh , Windows 8 memberikan kemampuan kepada

pengguna untuk berbagai konten dari satu aplikasi ke aplikasi lainnya. Aplikasi yang menjadi

sumber konten harus memenuhi dan mendukung kontrak sumber dimana aplikas lain yang

menjadi target konten harus memenuhi kontrak yang lain lagi. Dengan menggunakan kontrak,

satu aplikasi dengan yang lain tidak perlu saling mengetahui. Setiap aplikasi yang

berpartisipasi dalam kontrak yang dispesifikasikan maka dapat dipastikan Windows akan

menangani alir kerja yang didefinisikan di dalam kontrak, dari awal proses hingga akhir.

Ekstensi adalah perjanjian antara satu aplikasi dengan Windows 8. Ektensi memungkinkan

pengembang aplikasi untuk menambah atau mengustomisasi beberapa fitur Windows untuk

digunakan didalam aplikasi Windows 8-style UI.

Berikut ini adalah daftar kontrak dan ektensi yang tersedia.

Tabel 1Daftar Kontrak dan Ekstensi Windows 8

Nama Tipe Deskripsi

Account picture

provider

Ekstensi Pengguna dapat memilih dan mengganti gambar

yang akan dijadikan akun. Aplikasi menggunakan

ekstensi ini untuk memberi tahu Windows agar

memasukkan aplikasi ke dalam daftar Account Picture

di kontrol panel.

Autoplay Ekstensi Windows dapat memulai suatu aksi Autoplay ketika

suatu perangkat terhubung ke Windows 8

Background Task Ekstensi Aplikasi dapat menjalankan beberapa tugas di

background meskipun aplikasi dalam status

suspended

Cached file updater

contract

Kontrak Menyediakan kemampuan agar aplikasi dapat

menyimpan versi dari berkas-berkas yang digunakan

di aplikasi

Camera settings Ekstensi Pengguna dapat menyediakan antarmuka berbeda

dalam memilih kamera atau efek video

Contact picker Ekstensi Memungkinkan aplikasi didaftarkan sebagai salah

satu sumber penyedia data kontak

File activation Ekstensi Memungkinkan aplikasi untuk mendefinisikan tipe

berkas baru yang akan dibuka

File Picker Kontrak Aplikasi dapat memilih berkas dari aplikasi lain

2

Game explorer Ekstensi Aplikasi akan dikategorikan menjadi sebuah game

Play To Kontrak Aplikasi dapat menjadi player untuk konten dari

perangkat DLNA

Print task Ekstensi Memungkinkan untuk mendesain antarmuka untuk

keperluan pencetakan

Protocol activation Ektensi Memungkinan aplikasi unuk mendefinisikan atau

menggunakan suatu protokol komunikasi

Search contract Kontrak Memungkinkan suatu konten aplikasi dapat dicari

melalui charm bar

Settings contract Kontrak Memungkinkan antarmuka yang konsisten untuk

keperluan konfigurasi

Share contract Kontrak Memungkinkan aplikasi saling berbagai konten

dengan aplikasi lain

SSL/certificates Ekstensi Memungkinkan instalasi suatu sertifikat digital ke

dalam aplikasi untuk keperluan autentikasi

Pada buku ini akan kita pelajari lebih jauh mengenai dua skenario kontrak yang paling penting

dan sering digunakan yaitu File Picker, Search dan Share .

File Picker Contract File Picker contract menyediakan suatu cara bagi aplikasi untuk mengakses suatu konten

aplikasi , lokasi penyimpanan atau memperbarui suatu kontek berkas melalui antarmuka file

picker. Terdapat beberapa kontrak yang terkait dengan file picker dan pekerjaan pertama

pemrogram ketika hendak mengintegrasikan kontrak ini adalah menentukan layanan yang

aplikasi sediakan bagi file picker Windows 8.

Layanan penyediaan akses terhadap berkas memungkinkan berkas di dalam direktori aplikasi

kita yang terisolasi dapat diakses oleh file picker. Kontrak yang diimplementasi adalah File

Open Picker dan harus menangani event fileOpenPickerActivatedEventArgs.

Layanan lokasi penyimpanan memungkinkan suatu tempat di dalam direktori aplikasi untuk

pengguna dapat menyimpan berkas. Kontrak yang harus diimplementasi adalah File Save

Picker dan harus menangani event fileSavePickerActivatedEventArgs.

Untuk memahami implementasi kontrak File Picker maka ikuti langkah-langkah berikut ini:

1. Buatlah sebuah proyek Windows Store dengan template Blank App dan beri nama

Program_AppToAppPicking.

3

2. Tambahkan kontrak File Picker dengan klik ganda pada package.manifest. Akan tampil

antarmuka metadata dan pilih tab Declarations.

3. Pilih kontrak File Open Contract dari daftar Supported Declarations.

4. Centang pilihan SuportsAnyFileType.

5. Klik menu BUILD dan pilih Deploy Solution.

6. Untuk menguji apakah aplikasi sudah dapat digunakan oleh File Picker UI mari kita aktifkan

aplikasi yang terdapat skenario membuka berkas menggunakan File Picker. Kita akan

gunakan aplikasi Mail. Buatlah sebuah email baru dan pilih Attachment. Maka aplikasi kita

sudah terdaftar di bagian bawah koleksi aplikasi.

4

Klik aplikasi Program_AppToAppPicking dan Anda akan mendapatkan tampilan antarmuka

seperti ini.

5

Sampai tahap ini maka pada dasarnya Anda sudah berhasil mengintegrasikan File Picker

dengan aplikasi Anda. Pekerjaan yang tersisa adalah menyediakan antarmuka untuk pengguna

dapat memilih berkas dari dalam aplikasi Anda. Antarmuka akan ditempatkan pada bagian

hitam di tengah tampilan File Picker tersebut.

Search Contract Search Contract menyediakan suatu cara agar pengguna dapat melakukan pencarian terhadap

konten di dalam aplikasi Windows 8-style UI dari mana pun di dalam sistem dengan

sebelumnya mengaktifkan Search charm. Search charm dapat diaktifkan melalui gerakan swipe

di sisi kanan atau menggunakan tombol log Windows + Q pada keyboard.

Perhatikan gambar dibawah ini untuk menunjukkan anatomi fitur Search di Windows 8.

Gambar 20 Anatomi fitur Search

1. Search Box , adalah tempat pengguna untuk memberi masukan kata kunci pencarian. Jika

terdapat aplikasi yang berjalan di latar depan (foreground) maka ruang lingkup pencarian

akan terjadi pada aplikasi tersebut

2. Query suggestions, adalah lima string rekomendasi kata kunci pencarian. Kata kunci ini

bisa dihasilkan dari aplikasi

3. Daftar aplikasi Windows 8-style UI yang mengimplementasi kontrak Search

6

Untuk melihat bagaimana implementasi kontrak Search di dalam aplikasi ikuti langkah-

langkah berikut ini :

1. Buatlah sebuah proyek Windows Store dengan template Grid App dan beri nama

Program_Search.

2. Jalankan aplikasi dengan menekan F5.

3. Aktifkan Search Bar dengan gerakan swipe di sebelah kanan layar. Perhatikan bahwa

terdapat informasi aplikasi tidak mendukung pencarian.

7

4. Untuk memberikan dukungan pencarian, tambahkan sebuah halaman bertipe Search

Contract beri nama SearchResultPage.xaml

Penambahan halaman Kontrak menggunakan template memberikan beberapa

keuntungan yaitu berkurangnya blok kode yang harus kita tulis. Secara umum, kebutuhan

minimum yang harus dipenuhi aplikasi untuk memiliki fitur Search adalah :

Deklarasi Search Contract pada manifest aplikasi

Membuat sebuah halaman untuk hasil pencarian

Memberikan respon terhadap kata kunci pencarian yang diketikkan pengguna

ketika aplikasi berada di latar depan

Memberikan respon terhadap kata kunci pencarian yang diketikkan pengguna

ketika aplikasi berada di latar belakang

Penggunaan template akan membantu kita dengan mengerjakan beberapa hal diatas

secara otomatis.

5. Buka berkas SearchResultPage.xaml.cs tambahkan deklarasi hasil pencarian.

6. Tuju fungsi LoadState dan tambahkan blok kode ini sebelum komentar yang menyatakan

“Communicate result through the view model”

private System.Collections.Generic.Dictionary<string, List<SampleDataItem>> _results = new Dictionary<string, List<SampleDataItem>>();

8

Kode ini akan menambahkan fungsi pencarian terhadap judul dari item yang terdapat di dalam

aplikasi. Setiap hasil pencarian yang cocok akan ditambahkan sebagai SampleDataItem ke

dalam sebuah koleksi yang menggambarkan seluruh data. Koleksi ini disimpan dalam

Dictionary dengan sebuah tag yang diambil dari nama grup.

7. Cari fungsi Filter_SelectionChanged dan tambahkan fungsi berikut ini tepat setelah blok

komentar TODO.

8. Tekan F5 untuk menjalankan aplikasi

9. Tampilkan Charm Bar pilih Search chartm untuk menampilkan panel pencarian.

10. Ketik “ikan” (tanpa tanda kutip) ke dalam kotak pencarian dan tekan enter atau klik logo

cari.

11. Hasil pencarian akan ditampilkan di halaman pencarian.

var groups = SampleDataSource.GetGroups("AllGroups"); string query = queryText.ToLower(); var all = new List<SampleDataItem>(); _results.Add("All", all); var filterList = new List<Filter>(); filterList.Add(new Filter("All", 0, true)); foreach (var group in groups) { var items = new List<SampleDataItem>(); _results.Add(group.Title, items); foreach (var item in group.Items) { if (item.Title.ToLower().Contains(query) ) { all.Add(item); items.Add(item); } } filterList.Add(new Filter(group.Title, items.Count, false)); } filterList[0].Count = all.Count;

this.DefaultViewModel["Results"] = _results[selectedFilter.Name];

9

Menambahkan Rekomendasi Kata Kunci

Kita dapat menambahkan fungsi rekomendasi ketika pengguna ingin melakukan pencarian.

Rekomendasi akan meningkatkan pengalaman pengguna ketika menggunakan aplikasi kita.

Caranya adalah dengan menambahkan sebuah handler SuggestionRequested.

1. Buka berkas App.xaml.cs dan tambahkan deklarasi using pada bagian atas.

2. Tambahkan blok kode pada awal fungsi OnLaunched. Fungsi ini akan mendaftarkan bahwa

aplikasi kita ingin menerima jika event SuggestionRequested terjadi.

3. Tambahkan fungsi penanganan rekomendasi seperti blok kode dibawah ini

using Windows.UI.Xaml.Media; using Windows.UI.Xaml.Navigation; using Windows.ApplicationModel.Search;

SearchPane.GetForCurrentView().SuggestionsRequested += App_SuggestionsRequested;

10

Kode ini akan menyediakan pola untuk pengcocokan kata kunci untuk kata Ikan tenggiri, ikan

bawal, ayam, kelinci,sapid an oil. Ketika kata “ik” diketikkan maka pengguna akan

mendapatkan rekomendasi ikan bawal dan tenggiri pada kotak pencarian.

4. Tekan F5 dan jalankan Search Charm Bar.

5. Ketik “ika” dan perhatikan bahwa sekarang Search Panel menambahkan beberapa

rekomendasi.

void App_SuggestionsRequested(SearchPane sender, SearchPaneSuggestionsRequestedEventArgs args) { string query = args.QueryText.ToLower(); string[] terms = { "ikan tenggiri", "ikan bawal", "ayam", "kelinci", "sapi", "oil" }; foreach (var term in terms) { if (term.StartsWith(query)) args.Request.SearchSuggestionCollection.AppendQuerySuggestion(term); } }

11

Pencarian Ketika Aplikasi Tidak Aktif

Sampai saat ini pencarian hanya dapat dilakukan ketika aplikasi berada di latar depan. Namun

pencarian tidak bisa dilakukan ketika Search Charm Bar dipanggil dan aplikasi sedang tidak

aktif, baik dalam keadaan di latar belakang atau memang aplikasi belum dipanggil.

1. Buka berkas App.xaml.cs dan temukan fungsi OnSearchActivated. Fungsi ini secara

otomatis ditambahkan ke dalam App.xaml.cs ketika kita menambahkan sebuah Search

Contract ke dalam proyek.

2. Periksa blok kode pada fungsi tersebut.

3. Pada kondisi saat ini aplikasi tetap dapat menjalankan hasil pencarian walaupun dalam

keadaan dari non-aktif. Untuk memeriksanya pastikan aplikasi tidak berjalan (dapat

protected async override void OnSearchActivated(Windows.ApplicationModel.Activation.SearchActivatedEventArgs args) { var previousContent = Window.Current.Content; var frame = previousContent as Frame; if (frame == null) { frame = new Frame(); Program_Search.Common.SuspensionManager.RegisterFrame(frame, "AppFrame"); if (args.PreviousExecutionState == ApplicationExecutionState.Terminated) {

// TODO need initialize and register handler try { await Program_Search.Common.SuspensionManager.RestoreAsync(); } catch (Program_Search.Common.SuspensionManagerException) { //Something went wrong restoring state. //Assume there is no state and continue } } } frame.Navigate(typeof(SearchResultsPage), args.QueryText); Window.Current.Content = frame; Window.Current.Activate(); }

12

menggunakan Task Manager untuk menon-aktifkan aplikasi), ketik “ikan” dan klik

Program_Search dari daftar aplikasi. Perhatikan aplikasi tetap dapat melakuan pencarian.

Hal ini dikarenakan aplikasi saat ini selalu melakuan inisialisasi data setiap aplikasi launch

pada kelas SampleDataSource.

4. Jika Anda membangun aplikasi sendiri dan inisialisasi tidak dilakukan menggunakan pola

Singleton seperti yang digunakan di template Grid App maka ada beberapa hal yang harus

dilakukan lagi agar aplikasi mendukung pencarian dari keadaan tidak aktif.

5. Tambahkan fungsi inisialisasi data Anda dan daftarkan kembali event handler untuk fungsi

SuggestionRequested dibawah baris TODO.

Share Contract Berbagi adalah skenario yang penting dan sangat umum ada di dalam aplikasi modern. Pada

dasarnya manusia suka berbagi. Skenario ini begitu pentingnya sehingga Windows 8 SDK

memiliki kontrak khusus untuk memudahkan pemrogram menambahkan fitur berbagi

(sharing) ke dalam aplikasi Windows 8-style UI .Share Contract menyediakan suatu cara agar

pengguna dapat berbagai konten aplikasi ke aplikasi yang lain. Implementasi fitur share dapat

menambah awareness pengguna terhadap aplikasi dan menarik pengguna untuk kembali

menggunakan aplikasi.

Sebuah aplikasi dapat mendukung fitur berbagi dalam dua cara. Pertama, aplikasi dapat

menjadi aplikasi sumber, yang berfungsi sebagai penyedia konten. Aplikasi ini adalah aplikasi

dimana pengguna menemukan konten yang menarik bagi mereka dan ingin membagi konten

tersebut ke aplikasi lain. Aplikasi lain yang menjadi target, disebut aplikasi target, dimana

pengguna menjadikan aplikasi tersebut tujuan dari konten yang ingin dibagi. Aplikasi tentu

saja dapat mendukung kedua skenario tersebut, sebagai aplikasi sumber dan aplikasi target.

Konten yang dapat dibagi bisa dalam berbagai bentuk. Obyek yang akan dibagi disebut

DataPackage. DataPackage ini dapat mengandung :

Teks

Uniform Resource Identifiers (URIs)

HTML

Teks terformat

Bitmap (gambar)

.. if (frame == null) { // TODO //Initialize Data SearchPane.GetForCurrentView().SuggestionsRequested+=App_SuggestionsRequested;

13

Berkas

Data yang didefiniskan pemrogram.

Kelas penting yang menangani operasi sharing adalah DataTransferManager. Sebuah aplikasi

yang ingin membagi kontennya harus mendaftarkan sebuah event, yaitu DataRequested.

Setiap event ini dibangkitkan maka sebuah DataPackaged dapat dibentuk dan dikirimkan

melalui Broker. Broker merupakan bagian dari WinRT API yang menjembatani satu aplikasi

dengan aplikasi yang lain. Selanjutnya broker akan mengaktifkan aplikasi yang dipilih

pengguna dan memberikan DataPackage ke aplikasi target. Pengguna lalu dapat melakukan

hal yang dikehendakinya terhadap DataPackage di dalam aplikasi target.

Gambar 21 Cara Kerja Share Contract

Berbagi Konten

Untuk memahami implementasi aplikasi sumber buatlah sebuah proyek Windows Store

menggunakan template Grid App dan beri nama Program_AplikasiSumber.

14

Tekan F5 dan jalankan aplikasi. Klik salah satu item dan pada halaman detail, klik Share Charm.

Temukan bahwa terdapat keterangan “this app can’t share” . Tutup aplikasi dan sekarang

perhatikan langkah-langkah berikut untuk menambahkan fungsi share di dalam aplikasi kita.

1. Buka halaman ItemDetailPackage.xaml.cs dan tambahkan namespace

Windows.ApplicationModel.DataTransfer

2. Inisiasi proses berbagi dengan membuat instansiasi DataTransferManager

3. Pada fungsi OnNavigatedTo tambahkan event handler dari DataRequested

4. Implementasikan pembuatan paket data. Pada contoh berikut kita akan mengirimkan teks

using Windows.ApplicationModel.DataTransfer;

DataTransferManager dataTransferManager = DataTransferManager.GetForCurrentView();

protected override void OnNavigatedTo(NavigationEventArgs e) { base.OnNavigatedTo(e); dataTransferManager.DataRequested += dataTransferManager_DataRequested; }

15

Kode ini akan mengambil item yang sedang dipilih pengguna dari kontrol FlipView dan

memberikan nilai tersebut ke paket data.

5. Tekan F5 dan pilih salah satu item.

6. Pada saat di halaman detail, aktifkan Share Charm dan perhatikan bahwa kini paket data

dikirimkan dan terdapat daftar aplikasi yang bisa menerima konten.

7. Pilih salah satu aplikasi tersebut. Dalam contoh ini digunakan aplikasi Mail.

8. Perhatikan bahwa konten dari aplikasi Program_AplikasiSumber berhasil diterima oleh

aplikasi Mail.

void dataTransferManager_DataRequested(DataTransferManager sender, DataRequestedEventArgs args) { DataRequest request = args.Request; SampleDataItem item = flipView.SelectedItem as SampleDataItem; request.Data.Properties.Title = item.Title; request.Data.Properties.Description = item.Description; request.Data.SetText(item.Content); }

16

Untuk mengirimkan tipe data yang lain kita dapat memilih fungsi Set yang lain seperti yang

tertera pada gambar dibawah ini :

Gambar 22 Berbagai fungsi untuk paket data

Pada beberapa skenario kita menginginkan Search Charm dipanggil langsung dari aplikasi

tanpa pengguna harus menggeser Charm Bar. Untuk melakukan ini kita dapat menggunakan

fungsi dibawah ini :

Windows.ApplicationModel.DataTransfer.DataTransferManager.ShowShareUI();

17

Menerima Konten

Untuk memahami implementasi aplikasi target buatlah sebuah proyek Windows Store

menggunakan template Blank App dan beri nama Program_AplikasiTarget.

1. Hapus halaman MainPage.xaml dan tambahkan sebuah halaman baru bertipe Basic Page

dan beri nama MainPage.xaml

2. Tambahkan deklarasi yang menyatakan bahwa aplikasi mendukung Share Target dengan

cara membuka aplikasi package.appxmanifest > Tab Declarations > memilih Share

Target dari daftar deklarasi yang tersedia. Lalu tambahkan spesifikasi format berkas yang

didukung, jika ingin mendukung semua berkas pilih SupportAnyFileType. Dan

tambahkan format data yang ingin diterima pada bagian Data format.

18

3. Kita juga dapat menggunakan template yang disediakan dengan memilih Add New Item

> Windows Store > Share Target Contract

4. Buka berkas App.xaml.cs dan perhatikan fungsi OnShareTargetActivated. Seharusnya blok

kode tersebut tertulis seperti dibawah ini.

protected override void OnShareTargetActivated(Windows.ApplicationModel.Activation.ShareTargetActivatedEventArgs args) { var shareTargetPage = new Program_AplikasiTarget.ShareTargetPage(); shareTargetPage.Activate(args); }

19

5. Buka berkas ShareTargetPage.xaml.cs dan temukan fungsi Activate. Fungsi ini akan

dieksekusi ketika aplikasi lain ingin berbagi konten dengan aplikasi ini.

Fungsi ini menerima paket data melalui argument args.ShareOperation. Argumen ini berisi

paket data yang dikirimkan dan dimasukkan ke dalam variabel DefaultViewModel untuk

ditampilkan ke layar. Data ditampilkan melalui dua TextBlock yang terdapat pada

SearchTargetPage.xaml .

6. Pilih Build pada menu Visual Studio dan pilih Deploy Solution.

7. Jalankan aplikasi Program_AplikasiSumber , pilih salah satu item dan klik Share Charm.

Perhatikan bahwa Aplikasi Program_AplikasiTarget kini sudah terdaftar dalam aplikasi yang

dapat dijadikan target.

this._shareOperation = args.ShareOperation; // Communicate metadata about the shared content through the view model var shareProperties = this._shareOperation.Data.Properties; var thumbnailImage = new BitmapImage(); this.DefaultViewModel["Title"] = shareProperties.Title; this.DefaultViewModel["Description"] = shareProperties.Description; this.DefaultViewModel["Image"] = thumbnailImage; this.DefaultViewModel["Sharing"] = false; this.DefaultViewModel["ShowImage"] = false; this.DefaultViewModel["Comment"] = String.Empty; this.DefaultViewModel["SupportsComment"] = true; Window.Current.Content = this; Window.Current.Activate(); // Update the shared content's thumbnail image in the background if (shareProperties.Thumbnail != null) { var stream = await shareProperties.Thumbnail.OpenReadAsync(); thumbnailImage.SetSource(stream); this.DefaultViewModel["ShowImage"] = true; }

20

8. Klik Program_AplikasiTarget dan konten dari aplikasi Program_AplikasiSumber kini tampil

di dalam Program_AplikasiTarget. Pada tahap ini operasi share sudah berhasil dilakukan.

Tombol Share saat ini tidak berfungsi apa-apa karena tidak terdapat implementasi apapun

pada lojik di berkas code-behind. Namun konsep dasar menerima konten dari aplikasi lain

sudah berhasil dilakukan. Selanjutnya hal yang ingin dilakukan dengan konten tersebut

diserahkan kepada para pembaca. Ini akan jadi eksplorasi yang menyenangkan bagi Anda.

21

INTEGRASI DENGAN

PERANGKAT KERAS

22

Perangkat Keras Yang Didukung Windows 8 WinRT memberikan kenyamanan bagi para pemrogram untuk mengintegrasikan aplikasi

dengan perangkat keras yang tersedia pada perangkat Windows 8. Penggunaan API yang

terkait dengan kamera dan sensor seperti GPS, accelerometer, sensor cahaya, gyroscope serta

kompas sangat intuitif dan konsisten. WinRT menyediakan fondasi yang sangat baik untuk

bekerja dengan perangkat keras yang terdapat pada perangkat Windows 8.

Pada bagian ini kita akan membahas mengenai :

Kamera

Lokasi

Accelerometer

Gyroscope

Sensor Cahaya

Kamera Kamera merupakan salah satu perangkat keras yang cukup sering digunakan terutama untuk

aplikasi lifestyle, hiburan dan media. Windows Runtime menyediakan dua cara untuk

mengakses kamera, yaitu menggunakan CameraCaptureUI atau menggunakan MediaCapture.

CameraCaptureUI merupakan cara yang paling sederhana untuk bekerja dengan kamera.

CameraCaptureUI menyediakan sebuah kontrol kamera dengan cara kerja yang sudah

didefinisikan oleh sistem. Penggunannya hampir sama dengan cara memilih foto dan video

dari file system dimana terdapat beberapa standar seperti timer, kualitas dan konfigurasi yang

bisa langsung digunakan. CameraCaptureUI tidak memberikan akses penuh terhadap proses

pengambilan gambar. Aplikasi hanya menerima keluaran CameraCapture dalam bentuk file

gambar dan tidak bisa melakukan apapun selama proses pengambilan gambar dilakukan.

Untuk beberapa skenario dimana kita ingin memiliki kontrol penuh terhadap seluruh piksel

dilayar maka kita dapat menggunakan MediaCapture. MediaCapture memberikan kebebasan

untuk pemrogram menentukan workflow pengguna memanfaatkan kamera mereka.

Pemrogram memiliki akses penuh terhadap piksel yang sedang diambil, terhadap seluruh

kamera yang terpasang pada perangkat dan mendukung berbagai format video serta

pengaturan encoding. Jika Anda ingin membuat aplikasi efek video atau efek foto secara live

maka MediaCapture adalah pilihan yang paling sesuai.

Untuk memahami penggunaan dua teknik penggunaan kamera ini mari kita buat sebuah

aplikasi bertipe Windows Store dengan template Blank App dan berikan nama

Program_Camera.

23

CameraCaptureUI


dan beri nama MainPage.xaml.



3. Tambahkan dua buah halaman bertipe Basic Page dan beri nama CameraCaptureUI.xaml

dan MediaCapture.xaml

4. Tambahkan event handler pada kedua Button MainPage.xaml hingga menjadi seperti

berikut ini :

5. Implementasi kedua event handler tersebut. Buka berka MainPage.xaml.cs dan

tambahkan blok kode berikut ini :

<StackPanel Grid.Row="1" Margin="120,30,0,0" > <Button >CameraCapture UI</Button> <Button Margin="0,20,0,0">Media Capture</Button> </StackPanel>

<Button Click="GoToCameraCapture" >CameraCapture UI</Button> <Button Click="GoToMediaCapture" Margin="0,20,0,0">Media Capture</Button>

24

6. Buka berkas CameraCapture.xaml , tempatkan blok kode dibawah ini tepat sebelum tag


7. Implementasi event handler Take_Photo menjadi seperti dibawah ini :

Kode diatas akan memanggil antarmuka CameraCaptureUI dan mengembalikan hasil foto

menjadi sebuah berkas gambar. Selanjutnya berkas gambar dibuka dan ditampilkan layar.

8. Implementasi event handler Take_Video menjadi seperti dibawah ini :

private void GoToCameraCapture(object sender, RoutedEventArgs e) { (Window.Current.Content as Frame).Navigate(typeof(CameraCapture), null); } private void GoToMediaCapture(object sender, RoutedEventArgs e) { (Window.Current.Content as Frame).Navigate(typeof(MediaCapture), null); }

<StackPanel Grid.Row="1" Margin="120,30,0,0" > <Button Click="Take_Photo" >Take photo</Button> <Button Click="Take_Video" Margin="0,20,0,0">Take video</Button> <StackPanel Orientation="Horizontal"> <Image x:Name="CapturedPhoto" AutomationProperties.Name="A placeholder image" Source="Assets/StoreLogo.png" HorizontalAlignment="Left" VerticalAlignment="Top" MaxWidth="392" Stretch="Fill" /> <MediaElement x:Name="CapturedVideo" HorizontalAlignment="Left" AutoPlay="True" MaxWidth="392"/> </StackPanel> </StackPanel>

private async void Take_Photo(object sender, RoutedEventArgs e) { CameraCaptureUI dialog = new CameraCaptureUI(); Size aspectRatio = new Size(16, 9); dialog.PhotoSettings.CroppedAspectRatio = aspectRatio; StorageFile file = await dialog.CaptureFileAsync(CameraCaptureUIMode.Photo); if (file != null) { BitmapImage bitmapImage = new BitmapImage(); using (IRandomAccessStream fileStream = await file.OpenAsync(FileAccessMode.Read)) { bitmapImage.SetSource(fileStream); } CapturedPhoto.Source = bitmapImage; } }

25

Kode diatas akan memanggil antarmuka CameraCaptureUI dan mengembalikan hasil video

dalam format mp4 menjadi sebuah berkas video. Selanjutnya berkas video dibuka dan

ditampilkan layar.

9. Buka berkas Package.appxmanifest dan buka tab Capability. Centang Microphone dan

WebCam. Dengan deklarasi ini maka secara eksplisit aplikasi akan diberikan izin untuk

mengakses kedua perangkat keras tersebut.

10. Tekan F5 untuk menjalankan aplikasi.

11. Klik tombol CameraCaptureUI

12. Klik Take Photo. Jika aplikasi dijalankan pertama kali maka aplikasi akan meminta izin

kepada pengguna apakah mengizinkan kameranya untuk diakses. Pilih Allow.

13. Pada saat ini CameraCaptureUI akan ditampilkan, sebuah antarmuka dengan beberapa

konfigurasi standar diberikan. Pengguna dapat mengambil foto dengan mengklik diarea

foto.

private async void Take_Video(object sender, RoutedEventArgs e) { CameraCaptureUI dialog = new CameraCaptureUI(); dialog.VideoSettings.Format = CameraCaptureUIVideoFormat.Mp4; StorageFile file = await dialog.CaptureFileAsync(CameraCaptureUIMode.Video); if (file != null) { IRandomAccessStream fileStream = await file.OpenAsync(FileAccessMode.Read); CapturedVideo.SetSource(fileStream, "video/mp4"); } }

26

14. Setelah diklik foto akan diproses dan muncul fungsi Cropping.

15. Lanjutkan proses cropping dan setelah itu CameraCaptureUI akan ditutup dan hasil

tangkapan foto akan ditampilkan dilayar.

27

16. Anda sudah berhasil mengambil sebuah foto. Sekarang tekan tombol Back dan klik Take

Video.

17. CameraCaptureUI akan muncul dan Anda dapat memulai mengambil video. Klik OK dan

proses akan dilanjutkan lalu video akan dimainkan dilayar.

28

MediaCapture

1. Buka berkas MediaCapture.xaml , tempatkan blok kode dibawah ini tepat sebelum tag


Tampilan antarmuka akan menjadi seperti ini :

<StackPanel Grid.Row="1" Margin="120,30,0,0" > <Button Click="Take_Video" Margin="0,20,0,0">Take video</Button> <StackPanel Orientation="Horizontal" Margin="0,10,0,0" Grid.Row="2"> <TextBlock TextWrapping="Wrap" Text="Brightness" Style="{StaticResource BasicTextStyle}" Margin="0,0,10,0" VerticalAlignment="Center"/> <Slider x:Name="sldBrightness" IsEnabled="False" ValueChanged="sldBrightness_ValueChanged" Width="207" Margin="0,0,10,0"/> <TextBlock TextWrapping="Wrap" Text="Contrast" Style="{StaticResource BasicTextStyle}" Margin="0,0,10,0" VerticalAlignment="Center" /> <Slider x:Name="sldContrast" IsEnabled="False" ValueChanged="sldContrast_ValueChanged" Width="207" Margin="0,0,10,0"/> </StackPanel> <StackPanel> <TextBlock Style="{StaticResource BasicTextStyle}" HorizontalAlignment='Left' VerticalAlignment='Center' TextAlignment='Center' Text='Preview' /> <Canvas x:Name="previewCanvas1" Width="320" Height="240" HorizontalAlignment="Left" Background="Gray"> <CaptureElement x:Name="previewElement1" Width="320" Height="240" /> </Canvas> </StackPanel> </StackPanel>

29

2. Deklarasikan CaptureManager pada bagian atas berkas MediaCapture.xaml.cs

3. Implementasi fungsi sldBrightnessValue_Changed dan sldContrastValueChanged

4. Implementasikan fungsi Take_Video

Windows.Media.Capture.MediaCapture mediaCaptureMgr;

private void sldBrightness_ValueChanged(object sender, RangeBaseValueChangedEventArgs e) { try { bool succeeded = mediaCaptureMgr .VideoDeviceController.Brightness.TrySetValue(sldBrightness.Value); } catch { } } private void sldContrast_ValueChanged(object sender, RangeBaseValueChangedEventArgs e) { try { bool succeeded = mediaCaptureMgr.VideoDeviceController.Contrast.TrySetValue(sldContrast.Value); } catch { } }

30

Fungsi IntializeAsync berguna untuk mempersiapkan webcam agar dapat diakses oleh

aplikasi. Selanjutnya untuk mengambil gambar dan menampilkannya ke layar digunakan

fungsi StartPreviewAsync.


6. Perhatikan bahwa ketika kita menekan tombol Take Video aplikasi langsung

menampilkan hasil pengambilan gambar ke layar tanpa melalui antarmuka perantara

(seperti yang terjadi pada CameraCaptureUI).

private async void Take_Video(object sender, RoutedEventArgs e) { mediaCaptureMgr = new Windows.Media.Capture.MediaCapture(); await mediaCaptureMgr.InitializeAsync(); previewCanvas1.Visibility = Windows.UI.Xaml.Visibility.Visible; previewElement1.Source = mediaCaptureMgr; await mediaCaptureMgr.StartPreviewAsync(); if ((mediaCaptureMgr.VideoDeviceController.Brightness != null) && mediaCaptureMgr.VideoDeviceController.Brightness.Capabilities.Supported) { sldBrightness.IsEnabled = true; sldBrightness.Maximum = mediaCaptureMgr.VideoDeviceController.Brightness.Capabilities.Max; sldBrightness.Minimum = mediaCaptureMgr.VideoDeviceController.Brightness.Capabilities.Min; sldBrightness.StepFrequency = mediaCaptureMgr.VideoDeviceController.Brightness.Capabilities.Step; double controlValue = 0; if (mediaCaptureMgr.VideoDeviceController.Brightness.TryGetValue(out controlValue)) { sldBrightness.Value = controlValue; } } if ((mediaCaptureMgr.VideoDeviceController.Contrast != null) && mediaCaptureMgr.VideoDeviceController.Contrast.Capabilities.Supported) { sldContrast.IsEnabled = true; sldContrast.Maximum = mediaCaptureMgr.VideoDeviceController.Brightness.Capabilities.Max; sldContrast.Minimum = mediaCaptureMgr.VideoDeviceController.Brightness.Capabilities.Min; sldContrast.StepFrequency = mediaCaptureMgr.VideoDeviceController.Brightness.Capabilities.Step; double controlValue = 0; if (mediaCaptureMgr.VideoDeviceController.Brightness.TryGetValue(out controlValue)) { sldContrast.Value = controlValue; } } }

31

7. Aplikasi dapat mendapat akses penuh dari hasil tangkapan misalnya dapat mengatur

tingkat kontras dan pencahayaan dari gambar.

Tampak bahwa dengan menggunakan MediaCapture pemrogram memiliki akses penuh

terhadap proses pengambilan gambar , seperti bagaimana ingin ditampilkan dan apa yang

ingin dilakukan terhadap gambar yang sedang diambil . Media Capture API memberikan

kemudahan akses untuk dapat berkreasi menggunakan webcam yang tersedia pada perangkat

Windows 8.

32

Lokasi Salah satu perangkat keras yang disyaratkan Microsoft kepada para produsen perangkat

Windows 8 adalah GPS (Global Position System). Tersedianya GPS memungkinkan berbagai

skenario aplikasi yang menggunakan lokasi sebagai salah satu elemen penting di dalam

aplikasi. Contoh aplikasi yang menggunakan GPS adalah aplikasi tracking, aplikasi pencarian

restaurant terdekat, aplikasi peta dan lain-lain.

Menggunakan GPS di dalam aplikasi terdapat dua skenario umum. Yang pertama adalah

aplikasi memerlukan data posisi hanya sekali , misalkan di awal atau berdasarkan aktivasi oleh

pengguna. Skenario yang kedua adalah aplikasi memerlukan data posisi sepanjang hidup

aplikasi, seperti misalnya aplikasi tracker. Untuk aplikasi tipe kedua maka kita harus

mendengarkan selalu event yang dibangkitkan sensor dan menggunakannya di dalam aplikasi.

Untuk memahami cara mengakses sensor lokasi ini mari kita buat sebuah aplikasi bertipe

Windows Store dengan template Blank App dan berikan nama Program_Lokasi.





33

3. Deklarasikan sebuah Geolocator. Kelas ini merupakan kelas yang bertanggung jawab

untuk mengakses perangkat keras GPS.

4. Implementasikan fungsi GetOnce pada berkas MainPage.xaml.cs

5. Pastikan bahwa pada package.appxmanifest , pada tab Declaration fitur Location

sudah dicentang untuk memberikan akses kepada aplikasi

6. Untuk menyimulasikan lokasi kali ini kita akan menjalankan aplikasi di simulator. Pilih

Simulator pada pilihan mesin dan tekan F5.

7. Tekan tombol set location , tombol dengan ikon bola dunia di bagian kanan simulator.

<StackPanel Grid.Row="1" Margin="120,30,0,0" > <Button Click="GetOnce">Get Once</Button> <Button Click="GetTrack">Track</Button> <StackPanel Orientation="Horizontal"> <TextBlock Text="Latitude : " Style="{StaticResource BasicTextStyle}"/> <TextBlock x:Name="lat_output" Style="{StaticResource BasicTextStyle}"/> </StackPanel> <StackPanel Orientation="Horizontal"> <TextBlock Text="Longitude : " Style="{StaticResource BasicTextStyle}"/> <TextBlock x:Name="lon_output" Style="{StaticResource BasicTextStyle}"/> </StackPanel> <StackPanel Orientation="Horizontal"> <TextBlock Text="Altitude : " Style="{StaticResource BasicTextStyle}"/> <TextBlock x:Name="alt_output" Style="{StaticResource BasicTextStyle}"/> </StackPanel> </StackPanel>

private Geolocator geolocator = new Windows.Devices.Geolocation.Geolocator();

private async void GetOnce(object sender, RoutedEventArgs e) { Geoposition pos = await geolocator.GetGeopositionAsync(); lat_output.Text = pos.Coordinate.Latitude.ToString(); lon_output.Text = pos.Coordinate.Longitude.ToString(); alt_output.Text = pos.Coordinate.Accuracy.ToString(); }

34

8. Masukkan sembarang koordinat, pada contoh ini digunakan nilai Latitude : 29.101988 ,

Longitude : 31.0188 dan Altitude : 5.0404 . Klik set location.

35

9. Klik tombol GetOnce dan perhatikan nilai posisi GPS berhasil didapatkan aplikasi. Ubahlah

nilai posisi dan tekan kembali set location. Perhatikan bahwa aplikasi tidak mendengarkan

perubahan ini. Hal ini dikarenakan aplikasi menggunakan fungsi GetPositionAsync yang

hanya melakukan pengambilan nilai GPS sekali ketika dipanggil.

10. Untuk mendengarkan perubahan posisi yang ditangkap sensor, kita harus mendengarkan

event PositionChanged dari Geolocator. Implementasi fungsi GetTrack menjadi seperti

dibawah ini :

private void GetTrack(object sender, RoutedEventArgs e) { geolocator.PositionChanged += geolocator_PositionChanged; } async void geolocator_PositionChanged(Geolocator sender, PositionChangedEventArgs args) { await Dispatcher.RunAsync(CoreDispatcherPriority.Normal, () => { Geoposition pos = args.Position; lat_output.Text = pos.Coordinate.Latitude.ToString(); lon_output.Text = pos.Coordinate.Longitude.ToString(); alt_output.Text = pos.Coordinate.Accuracy.ToString(); }); }

36

Fungsi geolocator_PositionChanged adalah event handler yang akan dieksekusi setiap

terjadi perubahan lokasi. Nilai posisi dapat diakses dari argument

PositionChangedEventArgs.

11. Tekan F5 untuk menjalankan aplikasi. Klik tombol Track. Berikan beberapa kombinasi nilai

pada simulator lokasi. Perhatikan bahwa setiap kita menekan tombol set location aplikasi

menangkap nilai baru tersebut dan menampilkannya ke layar.

37

Sensor Windows Runtime API menyediakan tiga tipe data sensor yang dapat dimanfaatkan

pemrogram di dalam aplikasi. Data yang pertama adalah data sederhana berupa orientasi

perangkat. Data berikutnya adalah data yang langsung berasar dari sensor cahaya,

accelerometer dan gyroscope. Ketiga sensor ini secara fisik terdapat pada perangkat Windows

8. Data ketika adalah data fusi. Data fusi merupakan hasil perhitungan dari sensor fisik yang

dipadukan menggunakan formula matematis sehingga menghasilkan informasi yang lebih

berguna, yaitu arah (kompas), nilai inklinasi dan orientasi perangkat yang lebih lengkap. Tiga

sensor ini disebut sensor virtual karena secara fisik barangnya tidak terdapat pada perangkat.

Nilai sensor virtual didapatkan dari fusi nilai-nilai yang dihasilkan sensor fisik.

Untuk memahami cara mengakses sensor lokasi ini mari kita buat sebuah aplikasi bertipe

Windows Store dengan template Blank App dan berikan nama Program_Sensor.





38

3. Untuk bekerja dengan sensor, namespace yang perlu digunakan adalah

Windows.Devices.Sensors.

4. Tambahkan deklarasi untuk sensor orientasi dan acceloremeter.

<StackPanel Grid.Row="1" Margin="120,30,0,0" > <Button Click="Orientation_Click">Orientation</Button> <StackPanel Orientation="Horizontal"> <TextBlock Text="Orientation : " Style="{StaticResource BasicTextStyle}"/> <TextBlock x:Name="orientation_output" Style="{StaticResource BasicTextStyle}"/> </StackPanel> <Button Margin="0,20,0,0" Click="Accelerometer_Click">Accelerometer</Button> <StackPanel Orientation="Horizontal"> <TextBlock Text="AccelerationX : " Style="{StaticResource BasicTextStyle}"/> <TextBlock x:Name="accel_outputX" Style="{StaticResource BasicTextStyle}"/> </StackPanel> <StackPanel Orientation="Horizontal"> <TextBlock Text="AccelerationY : " Style="{StaticResource BasicTextStyle}"/> <TextBlock x:Name="accel_outputY" Style="{StaticResource BasicTextStyle}"/> </StackPanel> <StackPanel Orientation="Horizontal"> <TextBlock Text="AccelerationZ : " Style="{StaticResource BasicTextStyle}"/> <TextBlock x:Name="accel_outputZ" Style="{StaticResource BasicTextStyle}"/> <TextBlock x:Name="light_output" Style="{StaticResource BasicTextStyle}"/> </StackPanel> </StackPanel>

SimpleOrientationSensor orientationSensor = Windows.Devices.Sensors.SimpleOrientationSensor.GetDefault(); Accelerometer accelerometer = Windows.Devices.Sensors.Accelerometer.GetDefault();

Perhatikan bahwa pola Windows.Devices.Sensors.<nama_sensor>.GetDefault() berlaku

untuk seluruh kelas Sensor yang tersedia pada Windows Runtime API. Berikut daftarnya : Gyrometer Compass LightSensor SensorRotationMatrix Inclinometer

39

5. Setiap kelas Sensor memiliki satu fungsi yang bisa kita dengarkan untuk mendapatkan

nilai bacaan dari sensor tersebut. Fungsi tersebut adalah ReadingChanged , kecuali untuk

sensor SimpleOrientation fungsinya bernama OrientationChanged.

6. Implementasi fungsi ReadingChanged accelerometer .

private void Orientation_Click(object sender, RoutedEventArgs e) { if (orientationSensor != null) { orientationSensor.OrientationChanged += orientationSensor_OrientationChanged; } } async void orientationSensor_OrientationChanged(SimpleOrientationSensor sender, SimpleOrientationSensorOrientationChangedEventArgs args) { await Dispatcher.RunAsync(CoreDispatcherPriority.Normal, () => { orientation_output.Text = args.Orientation.ToString(); }); }

private void Accelerometer_Click(object sender, RoutedEventArgs e) { if (accelerometer != null) { accelerometer.ReadingChanged += accelerometer_ReadingChanged; } } async void accelerometer_ReadingChanged(Accelerometer sender, AccelerometerReadingChangedEventArgs args) { await Dispatcher.RunAsync(CoreDispatcherPriority.Normal, () => { accel_outputX.Text = args.Reading.AccelerationX.ToString(); accel_outputY.Text = args.Reading.AccelerationY.ToString(); accel_outputZ.Text = args.Reading.AccelerationZ.ToString(); }); }

40

Untuk menguji penggunaan API sensor, kita tidak dapat menggunakan laptop atau simulator.

Fungsi-fungsi tersebut hanya berjalan jika kita mengujinya di perangkat yang mendukung

peralatan tersebut. Hal tentu sangat disayangkan. Mari kita harapkan bahwa ke depannya

meskipun tidak tersedia perangkat Windows 8 yang memiliki sensor kita memiliki suatu acara

untuk menguji aplikasi yang menggunakan API sensor tersebut, misalnya menggunakan

simulator.

Event handler ReadingChanged adalah tempat dimana kita dapat mendapatkan data

tangkapan sensor. Pola ini berlaku untuk sensor yang lain. Perbedaannya adalah dari

nilai argument args.Reading yang berbeda beda untu masing-masing sensor.

Untuk Gyro misalnya , pembacaan menghasilkan nilai Kecepatan Anguler. args.Reading.AngularVelocityX.ToString(); args.Reading.AngularVelocityY.ToString(); args.Reading.AngularVelocityZ.ToString();

Untuk Compass misalnya, pembacaan menghasilkan perubahan arah args.Reading.HeadingTrueNorth.ToString();

Untuk cahaya, pembacaan menghasilkan perubahan pencahayaan args.Reading.IlluminanceInLux.ToString();

Windows Runtime API untuk mengakses perangkat keras sensor benar-benar sangat

intuitif dan konsisten sehingga memudahkan pemrogram. Satu hal yang harus diingat

bahwa kita sebaiknya selalu memeriksa apakah operasi inisiasi sensor berhasil dilakukan.

Ketika inisiasi berhasil masalah pembacaan data dapat kita lakukan dengan mudah.

Selanjutnya data bacaan sensor dapat kita gunakan di dalam aplikasi. Penggunaan di

dalam aplikasi sangat bervariasi tergantung dari kreativitas pengembang.

SIKLUS HIDUP

APLIKASI

2

Siklus Hidup Aplikasi Windows 8-style UI Perbedaan mendasar antara aplikasi tradisional dengan aplikasi Windows 8-style UI salah

satunya terletak pada siklus hidup aplikasi. Pada aplikasi tradisional di versi Windows

sebelumnya, kapan dan bagaimana aplikasi berjalan ditentukan sepenuhnya oleh pengguna.

Penggunalah yang mengatur kapan aplikasi ingin di non-aktifkan. Hal ini tidak sepenuhnya

berlaku pada aplikasi Windows 8-style UI. Pada satu waktu hanya satu aplikasi yang berjalan

di latar depan, aplikasi yang lain berada pada kondisi suspended. Pada saat kondisi suspended,

aplikasi tidak mendapatkan sumber daya dari sistem. Hal ini dilakukan salah satunya untuk

meningkatkan daya tahan baterai.

Gambar 23 Perbedaan siklus aplikasi pada Windows 7 dan Windows 8

Ada masa-masa tertentu dimana sistem mengalami kekurangan sumber daya, seperti misalnya

memori, maka sistem operasi berhak menonaktifkan aplikasi-aplikasi yang berada dalam

kondisi suspended. Pada kasus ini aplikasi yang dalam kondisi suspended tidak diberikan

notifikasi bahwa aplikasi akan dinon-aktifkan. Dengan demikian, jika ada saat tersebut

terdapat data pengguna yang belum disimpan maka data tersebut akan hilang. Pada saat

pengguna mengaktifkan aplikasi yang dimaksud ia akan mendapatkan pengalaman yang tidak

menyenangkan karena aplikasi menghilangkan data yang sedang ia kerjakan. Kondisi ini

tentunya ingin kita hindari. Terdapat beberapa hal yang dapat pemrogram lakukan agar

aplikasinya selalu berkelakuan sesuai dengan yang diharapkan pengguna. Bagi Anda yang

pernah mengeksplorasi Windows Phone, konsep ini juga diperkenalkan yang disebut

tombstoning.

Gambar 24 Sistem mengatur kapan aplikasi dinon-aktifkan ketika membutuhkan memori

3

Suspended dan Resumed Untuk melakukan penyimpanan data pada saat proses suspended dan resumed kita lakukan

dengan mendengarkan event Suspending dan Resuming. Pada saat masuk kondisi suspended

kita memiliki waktu lima detik untuk melakukan apa pun yang perlu dilakukan,misalnya

menyimpan data,menyimpan halaman terakhir yang sedang dibuka dan sebagainya. Jika

proses yang kita lakukan lebih lama maka aplikasi akan dinon-aktifkan oleh sistem.

Pada saat masuk kondisi resumed seringkali diperlukan proses untuk memeriksa data yang

terbaru, misalnya pada aplikasi berita. Sebagai contoh pada saat suspended kita simpan waktu

terjadinya sehingga pada saat resumed kita periksa berapa lama aplikasi diam di latar

belakang dan jika memenuhi kondisi tertentu aplikasi memeriksa berita terbaru untuk

menampilkan informasi yang lebih aktual.

Perlu diingat pada saat aplikasi suspended seluruh event handler tetap terdaftar (socket¸yang

terkait dengan sistem) namun tidak mendapatkan CPU untuk menjalankan fungsi tersebut.

Untuk memahami penggunaan dua fungsi Suspending dan Resuming mari kita buat sebuah

aplikasi bertipe Windows Store dengan template Blank App dan berikan nama

Program_Siklus.

// Register for the Suspending event and call OnSuspending when

received

App.Current.Suspending += OnSuspending;

// Handle the suspending event and save the current user session

void OnSuspending(object sender,

Windows.ApplicationModel.SuspendingEventArgs e)

{

// We are getting suspended

}

// Register for the Resuming event and call OnResuming when

received

App.Current.Resuming += OnResuming;

void OnResuming(object sender, object e)

{

// We are getting resumed, in general do nothing

}

4





3. Tambahkan event handler Suspending pada MainPage.xaml.cs

Fungsi ini akan menyimpan teks yang sehingga dapat diakses di waktu mendatang. Untuk

menyimpan data pada saat suspended sangat disarankan menggunakan kelas

SuspensionManager, yaitu kelas helper yang kita peroleh jika membuat aplikasi dari template

yang disediakan Visual Studio.

4. Buka App.xaml.cs dan tambahkan blok kode berikut :

<StackPanel Grid.Row="1" Margin="120,30,0,0" > <TextBox x:Name="inputText"/> </StackPanel>

App.Current.Suspending += Current_Suspending; async void Current_Suspending(object sender, Windows.ApplicationModel.SuspendingEventArgs e) { SuspensionManager.SessionState["text"] = inputText.Text; await SuspensionManager.SaveAsync(); }

5

Variabel ini kita gunakan untuk menyimpan kondisi eksekusi terakhir dari aplikasi sehingga

nanti bisa kita periksa apakah aplikasi diaktifkan dari kondisi terminated.

5. Temukan fungsi OnLaunched dan tambahkan kode ini tepat setelah deklarasi Frame

6. Sekarang buka kembali berkas MainPage.xaml.cs, tambahkan event handler Loaded lalu

implementasikan sesuai dengan kode dibawah ini :

Fungsi Loaded akan memeriksa apakah aplikasi diaktifkan dari kondisi Terminated. Jika

demikian maka tampilkan data terakhir yang dilihat pengguna sehingga pengguna

mendapatkan ilusi bahwa aplikasi tidak pernah di terminated dan data tetap terjaga.

7. Tekan F5 lalu masukkan teks sembarang di dalam TextBox, misalnya “limaapril”.

// TODO: keep track of the previous execution state received by OnLaunched() public ApplicationExecutionState PreviousExecutionState { get; set; }

// TODO: keep track of the previous execution status PreviousExecutionState = args.PreviousExecutionState;

public MainPage() { this.InitializeComponent(); App.Current.Suspending += Current_Suspending; this.Loaded += MainPage_Loaded; } async void MainPage_Loaded(object sender, RoutedEventArgs e) { ApplicationExecutionState previousExecutionState = ((App)(App.Current)).PreviousExecutionState; if (previousExecutionState == Windows.ApplicationModel.Activation.ApplicationExecutionState.Terminated) { await SuspensionManager.RestoreAsync(); if (SuspensionManager.SessionState.Count != 0) { inputText.Text = SuspensionManager.SessionState["text"].ToString(); } } }

6

8. Lalu tekan tombol Windows dan beralih ke Visual Studio. Pilih Suspend and Shutdown.

Aplikasi akan di – terminate secara paksa oleh sistem

9. Lalu jalankan aplikasi kembali dengan menekan F5 kembali. Tempatkan sebuah

breakpoint untuk melihat eksekusi aplikasi.

10. Perhatikan bahwa aplikasi tetap mempertahankan data terakhir yang dimasukkan

sehingga terdapat ilusi seakan-akan aplikasi tidak pernah di -terminate.

7

Sistem akan men-suspend aplikasi ketika pengguna berpindah antar aplikasi atau masuk ke

mode desktop. Dan sistem akan me-resume aplikasi ketika pengguna memilih aplikasi itu

kembali. Ketika sistem me-resume sebuah aplikasi seluruh variabel dan data dipertahankan

oleh sistem. Sistem akan mengembalikan kondisi seperti sebelumnya sehingga memberikan

ilusi aplikasi terus berjalan. Namun bisa saja sebuah aplikasi di-suspend dalam waktu yang

lama dan terdapat skenario kita ingin selalu menampilkan informasi yang aktual kepada

pengguna. Untuk melakukannya implementasikan fungsi App.Current.Resuming dan lakukan

fungsi untuk memperbarui data.

Jika aplikasi tidak perlu menampilkan data yang selalu aktual, seringkali event Resuming tidak

perlu di tangani. Namun selalu ingat bahwa aplikasi bisa sewaktu-waktu di-terminate sehingga

kita harus mempersiapkan diri jika hal itu terjadi.

App.Current.Resuming += Current_Resuming; }

void Current_Resuming(object sender, object e) { //TO DO //Refresh your data and UI if needed

}

8

Aktivasi Aplikasi Aplikasi Windows 8-style UI memiliki beberapa skenario bagaimana aplikasi diaktivasi. Hal ini

juga yang membedakannya dari aplikasi tradisional. Sejumlah aktivasi (seperti Share) kadang

tidak mengaktifkan aplikasi secara penuh,hanya beberapa bagian saja. Aplikasi Windows 8-

style UI dapat diaktivasi dari :

Tile

Share

Search

File Picker

File Association

Windows Runtime API menyediakan konteks, yaitu obyek Kind yang menyimpan kondisi

eksekusi terakhir aplikasi.

Gambar 25 Jenis aktivasi aplikasi Windows 8-style UI

Daftar lengkap dari jenis aktivasi dapat diperoleh di pranala berikut ini http://nlmt.us/11x .

Dengan adanya informasi tersebut kita dapat memberikan konteks bagaimana aplikasi

diaktifkan dan menyediakan informasi awal berdasarkan kondisi tersebut.

http://nlmt.us/11x

9

Patut diingat bahwa aplikasi yang diaktivasi dari kontrak tidak akan membangkitkan event

OnLaunched sehingga perlu mengimplementasi event handler spesifik kontrak yang kita

gunakan di aplikasi. Dan jika kondisi eksekusi aplikasi terakhir adalah dari Terminated, sangat

disarankan untuk melakukan pengembalian state seperti kondisi terakhir ditinggalkan

pengguna untuk memberikan pengalaman penggunaan aplikasi yang lebih baik.

// Override App’s OnLaunched for default tile based activation protected async override void OnLaunched(LaunchActivatedEventArgs args) { if (args.PreviousExecutionState == ApplicationExecutionState.Terminated) { // Do an asynchronous restore await SuspensionManager.RestoreAsync(); } // … } // Other App overrides for contracts activation protected override void OnShareTargetActivated(ShareTargetActivatedEventArgs args) protected override void OnSearchActivated(SearchActivatedEventArgs args) protected override void OnFileActivated(FileActivatedEventArgs args) protected override void OnFileOpenPickerActivated(FileOpenPickerActivatedEventArgs args) protected override void OnFileSavePickerActivated(FileSavePickerActivatedEventArgs args)

TILE & NOTIFIKASI

2

Tile Tile adalah hal unik yang terdapat pada Windows 8. Berbeda dengan sistem operasi lainnya ,

dimana aplikasi direpresentasikan ke dalam ikon-ikon statik , pada Windows 8, aplikasi

Windows 8-style UI direpresentasikan dengan sebuah atau banyak tile. Tile ini tidak hanya

statik tapi juga dapat “hidup” , memberikan informasi meskipun pengguna sedang tidak

menjalankan aplikasi.

Gambar 26 Tile pada Windows 8

Perhatikan gambar diatas ini. Aplikasi Windows 8-style UI direpresentasikan dengan tile yang

tetap memberikan informasi meskipun aplikasi sedang tidak berada pada latar depan atau

dijalankan oleh pengguna. Sebagai contoh aplikasi Weather, memberikan informasi aktual

keadaan cuaca di kota Sydney. Aplikasi lain seperti Finance, memberikan informasi terbaru

mengenai kondisi saham perusahaan. Dengan skema seperti ini Windows 8 dengan tile

memberikan pengalaman yang unik, berbeda dan informatif bagi para pengguna.

Tile memiliki dua bentuk yaitu persegi dan persegi panjang dan kedua jenis tile ini dapat

mengakomodasi skenario memberikan informasi yang selalu diperbarui (live update). Tile

memiliki sejumlah template yang langsung kita manfaatkan dan menyediakan beberapa cara

untuk menampilkan informasi. Tile dapat mengandung teks, gambar, ataupun kombinasi

keduanya. Jika kita menggunakan gambar untuk sebuah tile maka terdapat ukuran maksimal

yang harus kita perhatikan yaitu 150 KB. Tile juga memiliki animasi yang dapat membuat

pengalaman yang menyenangkan dan aplikasi terasa lebih “hidup”. Berbagai tipe tileyang

dapat dimanfaatkan dapat dilihat pada gambar dibawah ini.

3

Gambar 27 Berbagai pilihan tampilan tile

Untuk memahami bagaimana membuat tile dan memanfaatkannya untuk menampilkan

informasi mari kita buat sebuah aplikasi bertipe Windows Store dengan template Blank App

dan berikan nama Program_Tile.

4



2. Buka berkas package.appxmanifest dan pilih tab Application UI

3. Siapkan sebuah gambar berukuran 150 x 150 piksel untuk tile kotak dan 310 x 150 untuk

tile persegi panjang. Jika ukuran yang persegi panjang tidak disediakan maka pengguna

tidak akan dapat menggunakan tile yang berukuran lebar.

4. Ganti gambar yang dibangkitkan oleh template dengan gambar yang sudah anda

sediakan.

5. Berikan nama alias aplikasi yang akan ditampilkan pada tile. Maksimal karakter yang dapat

digunakan ada 13 karakter. Lalu pilih apakah tulisan akan ditampilkan dengan tema light

atau dark.

6. Pilih menu Build dan Deploy Solution

7. Masuk ke start screen dan temukan tile aplikasi.

5

8. Klik kanan tile dan ubah ke tile yang lebih kecil.

Mengirimkan informasi ke Tile

1. Buka berkas MainPage.xaml dan tambahkan blok kode dibawah ini tepat sebelum tag


2. Tambahkan event handler pada Button Send Update-Image dengan cara klik ganda.

Berkas MainPage.xaml.cs akan otomatis terbuka.

3. Buat definisi untuk konten tile. Tambahkan blok kode berikut ini :

<StackPanel Grid.Row="1" Margin="120,30,0,0" > <Button Content="Send Update-Image"/> <Button Content="Send Update-Text"/> </StackPanel>

private void Button_Click_1(object sender, RoutedEventArgs e) { }

6

Template yang digunakan untuk mengantur tampilan konten tile menggunakan format

xml. Pada contoh diatas template yang digunakan adalah :

<tile> <visual lang="en-US> <binding template="TileWideImageAndText01"> <image id="1" src="ms-appx:///images/redWide.png"/> <text id="1">Hello World! My very own tile notification</text> </binding> <binding template="TileSquareText04"> <text id="1">Hello World! My very own tile notification</text> </binding> </visual> </tile>

Setiap tipe konten memiliki format yang berbeda-beda. Kita perlu mengetahui bagaimana

mengonfigurasi nilai dari tag-tag diatas untuk menghasilkan konten yang ingin kita buat.

Jika kita menginginkan informasi digunakan oleh dua tipe ukuran tile maka kita harus

secara eksplisit mengirimkan dua konten tile yaitu Wide dan Square seperti pada contoh

diatas. Daftar template lebih lengkap dapat diakses di pranala berikut ini :

http://nlmt.us/120

4. Tekan F5 dan tekan tombol Send Update Image. Perhatikan bahwa tile aplikasi saat ini

sudah berubah sesuai dengan informasi yang kita tambahkan.

private void Button_Click_1(object sender, RoutedEventArgs e) { mlDocument tileXml = TileUpdateManager.GetTemplateContent(TileTemplateType.TileWideImageAndText01); XmlNodeList tileTextAttributes = tileXml.GetElementsByTagName("text"); tileTextAttributes[0].InnerText = "Hello World! This is tile update"; XmlNodeList tileImageAttributes = tileXml.GetElementsByTagName("image"); ((XmlElement)tileImageAttributes[0]).SetAttribute("src", "ms-appx:///live_tile.png"); ((XmlElement)tileImageAttributes[0]).SetAttribute("alt", "red graphic"); XmlDocument squareTileXml = TileUpdateManager.GetTemplateContent(TileTemplateType.TileSquareText04); XmlNodeList squareTileTextAttributes = squareTileXml.GetElementsByTagName("text"); squareTileTextAttributes[0].AppendChild(squareTileXml.CreateTextNode("Hello World! This is tile update")); IXmlNode node = tileXml.ImportNode(squareTileXml.GetElementsByTagName("binding").Item(0), true); tileXml.GetElementsByTagName("visual").Item(0).AppendChild(node); }

http://nlmt.us/120

7

5. Sejauh ini kita menggunakan format xml untuk bekerja dengan tile. Tim engineer Microsoft

telah membuat sebuah proyek helper yang dapat kita gunakan agar bekerja dengan format

xml Tile menjadi lebih mudah dengan gaya berorientasi obyek. Proyek tersebut dapat

diperoleh disini : http://nlmt.us/121

6. Setelah proyek diunduh, klik kanan pada Solution dan pilih Add Existing Project.

http://nlmt.us/121

8

7. Klik kanan pada proyek Program_Tile pilih Add Reference dan pada jendela Reference

Manager pilih tab Solution -> Project dan centang proyek NotificationExtension.

8. Buka MainPage.xaml dan klik ganda pada Button Send Update Text.Implementasi fungsi

Button_Click_2

9

Perhatikan bahwa dengan menggunakan proyek helper tersebut, pengaturan konten tile

dilakukan seperti bekerja dengan obyek-obyek lain di dalam Windows Runtime tanpa perlu

memikirkan skema xml setiap konten tile.

9. Tekan F5 dan klik Button-Send Text

10. Perhatikan startscreen dan bagaimana tile sudah berubah sesuai dengan konten yang kita

buat.

private void Button_Click_2(object sender, RoutedEventArgs e) { ITileWideText03 tileContent = TileContentFactory.CreateTileWideText03(); tileContent.TextHeadingWrap.Text = "Hello World! This is tile update"; ITileSquareText04 squareContent = TileContentFactory.CreateTileSquareText04(); squareContent.TextBodyWrap.Text = "Hello World! This is tile update"; tileContent.SquareContent = squareContent; //send notification TileUpdateManager.CreateTileUpdaterForApplication().Update(tileContent.CreateNotification()); }

10

Secondary Tile

Aplikasi Windows 8-style UI dapat memanfaatkan secondary tile sebagai suatu cara untuk

menyediakan akses secara langung ke halaman tertentu di dalam aplikasi. Secondary tile

memiliki kemampuan yang sama dengan tile utama, dapat mengandung informasi teks ,

gambar atau keduanya.

Secondary tile dapat digunakan untuk berbagai macam skenario. Tentunya semakin kreatif kita

dapat menggunakan secondary tile akan menghasilkan pengalaman yang unik bagi pengguna

ketika menggunakan aplikasi kita. Kita ambil contoh aplikasi resep. Secara umum pengguna

dapat berselancar mencari resep diantara koleksi resep yang tersedia. Suatu waktu ia

menemukan salah satu resep yang ia anggap favorit. Pengguna dapat menggunakan

secondary tile untuk membuat semacam shortcut langsung ke halaman resep favorit tersebut

tanpa ia harus mencari atau mengulang aplikasi dari awal.

Untuk melihat contoh penggunakan secondary tile di dalam aplikasi modifikasi proyek

Program_Tile.

1. Buka berkas MainPage.xaml dan tambahkan blok kode dibawah ini tepat setelah Button

Send Update-Text.

2. Klik kanan pada event Button_Click_3 dan klik Navigate to handler

3. Implementasi fungsi tersebut dengan blok kode dibawah ini :

<Button Content="Create Secondary Tile" Click="Button_Click_3"/>

11

SecondaryTile memiliki konstruktor berparameter berupa TileId,TileShortName,

TileDisplayName,sebuah TileArgument, konfigurasi Tile dan gambar. TileId haruslah unik.

TileDisplayName adalah nama tile yang digunakan untuk pencarian sedangkan TileShortName

adalah teks yang akan muncul dilayar. Untuk menampilkan antarmuka konfirmasi pembuatan

secondary tile panggil fungsi RequestCreateForSelectionAsync.

4. Tambahkan fungsi GetElementRect dan variabel counter. GetElementRect merupakan

fungsi pembantu untuk mendapatkan lokasi Button yang membangkitkan aksi

pembuatan secondary tile agar kotak dialog konfirmasi dapat muncul tepat dibawah

Button tersebut.

private async void Button_Click_3(object sender, RoutedEventArgs e) { // Prepare package images for use as the Tile Logo and small Logo in our tile to be pinned Uri smallLogo = new Uri("ms-appx:///Assets/Logo.png"); string tileActivationArguments = DateTime.Now.ToLocalTime().ToString(); // Create a 1x1 Secondary tile counter++; SecondaryTile secondaryTile = new SecondaryTile(counter.ToString(), "Tile " + counter.ToString(), "Name of the tile the user sees when searching for the tile", tileActivationArguments, TileOptions.ShowNameOnLogo, smallLogo); secondaryTile.ForegroundText = ForegroundText.Dark; secondaryTile.SmallLogo = smallLogo; // OK, the tile is created and we can now attempt to pin the tile. // Note that the status message is updated when the async operation to pin the tile completes. await secondaryTile.RequestCreateForSelectionAsync(MainPage.GetElementRect((FrameworkElement)sender), Windows.UI.Popups.Placement.Below); }

int counter = 0; public static Rect GetElementRect(FrameworkElement element) { GeneralTransform buttonTransform = element.TransformToVisual(null); Point point = buttonTransform.TransformPoint(new Point()); return new Rect(point, new Size(element.ActualWidth, element.ActualHeight)); }

12

5. Tekan F5 dan klik tombol Create Secondary Tile. Setelah tile 1 selesai, klik kembali Create

Secondary Tile dan beri nama tile 2.

13

Perhatikan bahwa sekarang Program_Tile memiliki satu tile utama dan dua secondary tile.

Notifikasi Notifikasi adalah cara untuk menyampaikan informasi yang dapat dengan mudah menangkap

perhatian pengguna. Pengguna tetap memiliki kontrol penuh untuk mematikan kemampuan

notifikasi aplikasi. Dengan notifikasi juga memungkinkan pengguna langsung masuk ke

aplikasi dengan mengklik pesan tersebut ke dalam aplikasi meskipun misalnya aplikasi sedang

tidak berada di latar depan.

Notifikasi menggunakan arsitektur yang sama dengan tile dimana menggunakan format xml

untuk tampilan dan terdiri dari teks,gambar atau keduanya. Contoh tampilan notifikasi dapat

dilihat pada gambar di bawah ini :

14

Gambar 28 Berbagai template notifikasi

Untuk memahami bagaimana membuat notifikasi dan memanfaatkannya untuk menampilkan

informasi mari kita buat sebuah aplikasi bertipe Windows Store dengan template Blank App

dan berikan nama Program_Notifikasi.



2. Buka berkas MainPage.xaml dan tambahkan blok kode dibawah ini tepat sebelum tag


15

3. Tambahkan referensi proyek NotificationExtensions

4. Tambahkan event handler pada Button Send Update-Text dengan cara klik ganda. Berkas

MainPage.xaml.cs akan otomatis terbuka.

5. Tambahkan event handler pada Button Send Update-Image dengan cara klik ganda.

Berkas MainPage.xaml.cs akan otomatis terbuka.

6. Buka package.appxmanifest , pada tab Application UI . Ubah nilai Toast Capable

menjadi Yes

<StackPanel Grid.Row="1" Margin="120,30,0,0" > <Button Content="Send Notif Text"/> <Button Content="Send Notif Image"/> </StackPanel>

private void Button_Click_1(object sender, RoutedEventArgs e) { IToastNotificationContent toastContent = null; IToastText01 templateContent = ToastContentFactory.CreateToastText01(); templateContent.TextBodyWrap.Text = "Body text that wraps"; toastContent = templateContent; // Create a toast, then create a ToastNotifier object to show // the toast ToastNotification toast = toastContent.CreateNotification(); // If you have other applications in your package, you can specify the AppId of // the app to create a ToastNotifier for that application ToastNotificationManager.CreateToastNotifier().Show(toast); }

private void Button_Click_2(object sender, RoutedEventArgs e) { IToastNotificationContent toastContent = null; IToastImageAndText01 templateContent = ToastContentFactory.CreateToastImageAndText01(); templateContent.TextBodyWrap.Text = "Body text that wraps"; templateContent.Image.Src = "ms-appx:///Assets/Logo.png"; toastContent = templateContent; // Create a toast, then create a ToastNotifier object to show // the toast ToastNotification toast = toastContent.CreateNotification(); // If you have other applications in your package, you can specify the AppId of // the app to create a ToastNotifier for that application ToastNotificationManager.CreateToastNotifier().Show(toast); }

16

7. Tekan F5 dan tekan kedua tombol tersebut secara bergantian. Terlihat pada bagian

kanan atas aplikasi tampil notifikasi dengan pesan yang sudah didefinisikan di dalam

kode.

8. Jika pengguna sedang tidak berada di dalam aplikasi, jika mengklik notifikasi akan

mengantar pengguna ke dalam aplikasi yang menghasilkan notifikasi tersebut.

Windows NotificationService Beberapa contoh penggunaan Windows Runtime API yang terkait tile dan notifikasi pada

contoh sebelumnya adalah skenario update secara lokal, artinya diaktifkan oleh aplikasi ketika

aplikasi dijalankan. Untuk dapat mengirimkan informasi ke tile atau notifikasi melalui internet,

Microsoft menyediakan Windows Notification Service yang dapat digunakan pengembang

secara gratis. Windows Notification Service dirancang dengan skalabilitas yang tinggi. Namun

demikian WNS tidak disarankan untuk digunakan pada aplikasi yang memiliki aspek waktu

kritis ,misalnya aplikasi pemantau kondisi vital kesehatan.

Aplikasi Windows 8-style UI yang ingin menggunakan push notification harus mendaftarkan

dan meminta sebuah alamat URI sebagai alamat pengiriman notifikasi. Hal ini dilakukan

dengan memanggil fungsi-fungsi terkait platform notifikasi yang berada di dalam Windows

Runtime API. Selanjutnya aplikasi harus mendaftarkan diri ke sebuah layanan web yang

17

menangani daftar device yang ingin diberikan notifikasi. Layanan web ini dapat merupakan

layanan pihak ketiga atau pun layanan yang kita bangun sendiri. Selanjutnya setiap ingin

mengirimkan push notification, layanan web akan mendorong informasi tersebut ke

infrastruktur Windows Notification Service milik Microsoft. Selanjutny WNS lah yang akan

mengirimkan informasi ke perangkat windows 8 yang menjalankan aplikasi.

Gambar 29 Skema Windows Notification Service

#LATIHAN

2

Pendahuluan Pada bagian ini kita akan mencoba membuat sebuah aplikasi Windows 8-style UI dengan

menerapkan hal-hal yang sudah kita pelajari pada bab-bab sebelumnya. Kita akan mengambil

studi kasus pembuatan aplikasi Photo Labs. Photo Labs adalah sebuah aplikasi yang

memungkinkan pengguna mencari dan menemukan foto-foto terbaik dari fotografer. Pada

sesi latihan ini diharapkan pembaca mendapatkan seri pelatihan untuk membangun sebuah

aplikasi yang cantik, fungsional dan menggunakan beberapa fitur penting di Windows 8. Pada

akhir latihan ini diharapkan pembaca sudah dapat mengimplementasi fitur-fitur penting

sebagai berikut :

Pengalaman Windows 8-style UI dengan kontrol-kontrol seperti

GridView,ListVIew,FlipView,AppBar dan Semantic Zoom

Penangan berbagai kondisi orientasi

Integrasi dengan Charm Bar seperti search dan share

Menangani siklus aplikasi

Penggunaan tile.

Untuk seluruh aset foto yang digunakan di dalam aplikasi Photo Labs ini bersumber dari

koleksi seorang rekan, penggiat komunitas dan fotografer, M Reza Faisal (@mrezafaisal). Hak

cipta dari foto-foto yang digunakan di aplikasi tetap melekat kepada pemilik foto.

Membuat Proyek Aplikasi Windows 8

Memulai Proyek

1. Jalankan Visual Studio dan buatlah sebuah proyek Windows Store dengan template Grid

App. Beri nama PhotoLabs

3

2. Tekan F5 dan perhatikan aplikasi akan ditampilkan. Halaman depan dari aplikasi akan

tampak seperti gambar dibawah ini.

3. Cobalah mengeksplorasi aplikasi tersebut. Gunakan mouse atau scroller untuk berpindah

halaman atau bagian layar. Aplikasi ini menggunakan kontrol GridView yang biasa

digunakan untuk scrolling konten secara horizontal.

4. Klik salah satu item untuk melihat kelakukan aplikasi. Sebagai contoh klik item dengan

nama “Item Title : 1” dan aplikasi akan menampilkan halaman detail seperti di bawah ini:

4

Klik tanda panah pada bagian kiri atau kanan aplikasi. Kita dapat melihat item lain pada

group yang sama. Kontrol ini adalah FlipView yang dapat digunakan untuk menampilkan

koleksi.

5. Tekan tombol Back untuk kembali ke halaman sebelumnya.

6. Klik “Group Title:1” dibawah “PhotoLabs” dan akan menampilkan halaman detail grup.

7. Tutup aplikasi dan Stop Debugging.

8. Buka App.xaml dan perhatikan sebuah resource string bernama AppName dan ubah

nilainya menjadi “Photo Labs”.

9. Sekarang kita akan mengubah branding aplikasi. Bukalah Package.appxmanifest dan

tambahkan berkas Small_Live_Tile.png, Large_Live_Tile.png dan Splash_Screen.png

5

masing-masing untuk Logo, Wide Logo dan Splash Screen. Juga ubah Display Name

menjadi Photo Labs.


11. Perhatikan pada saat aplikasi dijalankan splash screen sudah berbeda dengan yang

sebelumnya.

12. Buka start screedan perhatikan bahwa tile aplikasi sudah berubah menjadi seperti ini.

Menampilkan data

1. Klik kanan pada direktori DataModel dan pilih Add – Existing Item dan pilh berkas

PhotoDataSource.cs. Berkas ini akan menghasilkan data yang dibutuhkan oleh aplikasi.

2. Buka berkas GroupedItemsPage.xaml.cs, GroupDetailPage.xaml.cs dan

ItemDetailPage.xaml.cs lalu ubah seluruh referensi SampleDataSource menjadi

PhotoDataSource dan SampleDataGroup menjadi PhotoDataGroup serta

SampleDataItem menjadi PhotoDataItem.

3. Buatlah sebuah direktori “Images” didalam proyek dan pindahkan seluruh gambar pada

direktori. Perhatikan bahwa penamaan Images sangat krusial karena url pada data

diasumsikan berada pada lokasi tersebut.

6

4. Tekan F5 dan perhatikan aplikasi seharusnya sudah menampilkan data yang baru seperti

gambar dibawah ini.

Mempercantik tampilan

Sekarang kita akan mempercantik tampilan antarmuka aplikasi sehingga sesuai dengan

domain data kita. Kita akan memodifikasi halaman depan, halaman detail dan halaman detail

grup.

1. Buka StandardStyles.xaml di dalam direktori Common

2. Temukan DataTemplate dengan nama Standar250x250ItemTemplate. Ini adalah

templateyang digunakan untuk menampikan item foto pada halaman utama

3. Hapus TextBlock terakhir yang memiliki binding dengan property Subtitle karena

PhotoDataItem tidak memiliki properti tersebut.

4. Pada template yang sama ubah ukuran lebar dan tinggi Grid dari 320 menjadi 240, dan

ubah tinggi TextBlock dari 60 menjadi 48 untuk mengurangi bagian overlay pada bawah

gambar.

7

5. Tekan F5 untuk melihat aplikasi. Halaman depan seharusnya tampil seperti gambar

dibawah ini :

6. Sekarang kita akan mengubah GroupDetailPage.xaml. Temukan <GridVIew.Header> dan

hapus TextBlock pertama. Atur artibut Image, ganti Height=400 menjadi Width=400 dan

ubah margin atas gambar menjadi 10.

<DataTemplate x:Key="Standard250x250ItemTemplate"> <Grid HorizontalAlignment="Left" Width="320" Height="240"> <Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}"> <Image Source="{Binding Image}" Stretch="UniformToFill" AutomationProperties.Name="{Binding Title}"/> </Border> <StackPanel VerticalAlignment="Bottom" Background="{StaticResource ListViewItemOverlayBackgroundThemeBrush}"> <TextBlock Text="{Binding Title}" Foreground="{StaticResource ListViewItemOverlayForegroundThemeBrush}" Style="{StaticResource TitleTextStyle}" Height="48" Margin="15,0,15,0"/> </StackPanel> </Grid> </DataTemplate>

<GridView.Header> <StackPanel Width="480" Margin="0,4,14,0"> <Image Source="{Binding Image}" Width="400" Margin="0,10,18,20" Stretch="UniformToFill" AutomationProperties.Name="{Binding Title}"/> <TextBlock Text="{Binding Description}" Margin="0,0,18,0" Style="{StaticResource BodyTextStyle}"/> </StackPanel> </GridView.Header>

8

7. Sekarang buka StandardStyles.xaml dan temukan DataTemplate dengan nama

Standard500x130ItemTemplate. Template ini digunakan untuk menampikan foto pada

halaman detail grup.

8. Ubah lebar Grid menjadi 360.

9. Hapus Width=110 di dalam Border

10. Hapus kedua buah TextBlock yang menampilkan Subtitle dan Description

11. Dibawah TextBlock yang tersisa tambahkan StackPanel dan TextBlock hingga template

pada akhirnya menjadi seperti ini :

12. Jalankan aplikasi dan klik “Bandung”. Pastikan antarmuka halaman detail grup menjadi

seperti ini:

<DataTemplate x:Key="Standard500x130ItemTemplate"> <Grid Height="110" Width="360" Margin="10"> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto"/> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}" Height="110"> <Image Source="{Binding Image}" Stretch="UniformToFill" AutomationProperties.Name="{Binding Title}"/> </Border> <StackPanel Grid.Column="1" VerticalAlignment="Top" Margin="10,0,0,0"> <TextBlock Text="{Binding Title}" Style="{StaticResource TitleTextStyle}" TextWrapping="NoWrap"/> <StackPanel Orientation="Horizontal"> <TextBlock Text="Location:" Style="{StaticResource BodyTextStyle}" /> <TextBlock Text="{Binding Location}" Style="{StaticResource BodyTextStyle}" Margin="4,0,4,0" /> </StackPanel> </StackPanel> </Grid> </DataTemplate>

9

13. Bagian terakhir untuk mempercantik tampilan antarmuka adalah mengunaan

ItemDetailPage.xaml sehingga menampilkan nama fotografer dan lokasi foto.

14. Temukan kontrol FlipView dan ganti DataTemplate nya menjadi seperti ini :

10

Template terdiri dari dua kolom, dimana kolom pertama menampilkan informasi foto,nama

forografer dan kolom kedua menampilkan informasi deskripsi foto.

15. Jalankan aplikasi dan pastikan antarmuka foto detail terlihat menjadi seperti ini.

<DataTemplate> <UserControl Loaded="StartLayoutUpdates" Unloaded="StopLayoutUpdates"> <ScrollViewer x:Name="scrollViewer" Style="{StaticResource VerticalScrollViewerStyle}" Grid.Row="1"> <Grid Margin="120,0,20,20"> <Grid.ColumnDefinitions> <ColumnDefinition Width="600" /> <ColumnDefinition Width="40" /> <ColumnDefinition Width="360" /> <ColumnDefinition /> </Grid.ColumnDefinitions> <StackPanel Orientation="Vertical" Grid.Column="0"> <TextBlock FontSize="26.667" FontWeight="Light" Text="{Binding Title}" TextWrapping="Wrap"/> <Image x:Name="image" Width="600" Margin="0,20,0,10" Stretch="Uniform" Source="{Binding Image}"/> <StackPanel Orientation="Horizontal"> <TextBlock FontSize="26.667" FontWeight="Light" Text="Location:"/> <TextBlock FontSize="26.667" FontWeight="Light" Text="{Binding Location}" Margin="8,0,8,0"/> </StackPanel> <StackPanel Orientation="Horizontal"> <TextBlock FontSize="26.667" FontWeight="Light" Text="by"/> <TextBlock FontSize="26.667" FontWeight="Light" Text="{Binding Photographer}" Margin="8,0,8,0"/> </StackPanel> </StackPanel> <StackPanel Orientation="Vertical" Grid.Column="2"> <TextBlock FontSize="20" Margin="0,48,0,0" FontWeight="Light" LineHeight="32.5" Text="{Binding Quote}" TextWrapping="Wrap" /> </StackPanel> </Grid> </ScrollViewer> </UserControl> </DataTemplate>

11

Pada bagian ini kita sudah berhasil membuat sebuah proyek aplikasi Windows 8 dengan

sejumlah data, dan mengganti aset gambar sehingga memiliki branding yang sesuai dengan

aplikasi. Kemudian kita juga sudah menyempurnakan antarmuka sehingga lebih cantik dan

sesuai dengan domain aplikasi.

Orientasi,Snapping dan Semantic Zoom Salah satu aspek penting dalam mengembangkan aplikasi Windows 8-style UI adalah

bagaimana aplikasi dapat beradaptasi dengan berbagai ukuran layar, orientasi dan satu

kondisi yang baru diperkenalkan di Windows 8 yaitu snapping. Selain itu hal yang juga

berkaitan dengan tampilan adalah semantic zoom. Pada bagian ini kita akan

mengimplementasikan penanganan orientasi, snapping dan semantic zoom.

Menangani Orientasi Perangkat

Untuk memeriksa apakah aplikasi sudah menangani orientasi dengan benar, gunakan

Simulator pada pilihan Debug Location.

1. Jalankan aplikasi.

2. Pastikan pada kondisi landscape aplikasi tampil seperti gambar dibawah ini:

12

3. Sekarang putar simulator sehingga berada dalam kondisi portrait. Periksa apakah

tampilan dari aplikasi seperti dibawah ini:

13

4. Untuk halaman pertama, GridView sudah menangani orientasi dengan baik sehingga kita

tidak perlu melakukan penanganan khusus.

5. Sekarang pilih “Bandung” untuk masuk ke halaman detail grup. Pada kondisi lanskap

halaman akan ditampilkan seperti dibawah ini :

6. Lalu putar simulator menjadi portrait dan perhatikan bahwa foto-foto ditampilkan pada

secara vertical disebelah foto grup dan menyisakan ruang kosong yang cukup banyak

dibagian bawah.

14

7. Buka GroupDetailPage.xaml dan modifikask kontrol ListView yang bernama itemListView.

8. Tepat setelah kontrol tersebut tambahkan kontrol baru ListView bernama

“portraitListView”.

15

9. Cari elemen VisualState pada bagian bawah, bernama “FullScreenPortrait”

10. Di dalam elemen Visual State, hapus deklarasi berikut ini.

11. Tambahkan deklarasi berikut ini pada bagian yang sudah dihapus.

ListView yang ditambahkan akan digunakan untuk menampilkan data pada kondisi

“FullScreenPortrait”. Perubahan kontrol yang ditampilkan diatur menggunakan

VisualStateManager. Kode yang memeriksa perubahan tampilan ini telah diatur di kelas

LayoutAwarePage, kelas yang otomatis dihasilkan oleh template

12. Jalankan aplikasi dan klik “Bandung”.

 <ListView x:Name="portraitListView" AutomationProperties.AutomationId="ItemListView" AutomationProperties.Name="Items In Group" TabIndex="1" Grid.Row="1" Visibility="Collapsed" Padding="86,0,20,60" ItemsSource="{Binding Source={StaticResource itemsViewSource}}" ItemTemplate="{StaticResource Standard500x130ItemTemplate}" SelectionMode="None" IsItemClickEnabled="True" ItemClick="ItemView_ItemClick"> <ListView.Header> <StackPanel> <Image Source="{Binding Image}" Margin="20,-10,18,0" MaxWidth="480" Stretch="UniformToFill" HorizontalAlignment="Left"/> <TextBlock Margin="20,20,18,30" Text="{Binding Description}" Style="{StaticResource BodyTextStyle}"/> </StackPanel> </ListView.Header> </ListView>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemGridView" Storyboard.TargetProperty="Padding"> <DiscreteObjectKeyFrame KeyTime="0" Value="100,126,90,0"/> </ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemGridView" Storyboard.TargetProperty="Visibility"> <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="portraitListView" Storyboard.TargetProperty="Visibility"> <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/> </ObjectAnimationUsingKeyFrames>

16

Perhatikan bahwa saat ini ruang kosong dibagian bawah sudah digunakan oleh konten

13. Bagian selanjutnya adalah mengubah halaman detail foto agar beradaptasi dengan

orientasi portrait. Perhatikan bahwa saat ini halaman detail akan memotong konten

disebalah kiri.

14. Buka halaman ItemDetailPage.xaml dan temukan kontrol FlipView dengan nama flipView.

17

15. Setelah flipView tambahkan kontrol baru FlipView dan beri nama portraitFlipView

18

16. Pada VisualStateElement dibagian bawah tambahkan animasi untuk mengubah kontrol

FlipView yang digunakan, dari flipView ke portraitFlipView

 <FlipView x:Name="portraitFlipView" AutomationProperties.AutomationId="ItemsFlipView" AutomationProperties.Name="Item Details" Grid.Row="1" Margin="0,-3,20,0" ItemsSource="{Binding Source={StaticResource itemsViewSource}}" Visibility="Collapsed"> <FlipView.ItemTemplate> <DataTemplate> <UserControl Loaded="StartLayoutUpdates" Unloaded="StopLayoutUpdates"> <ScrollViewer x:Name="scrollViewer" Style="{StaticResource VerticalScrollViewerStyle}" Grid.Row="1">  <StackPanel> <StackPanel Orientation="Vertical"> <TextBlock FontSize="26.667" Margin="100,0,0,0" FontWeight="Light" Text="{Binding Title}" TextWrapping="Wrap"/> <Image x:Name="image" Width="600" Margin="0,20,0,10" Stretch="Uniform" Source="{Binding Image}"/> <StackPanel Orientation="Horizontal"> <TextBlock FontSize="26.667" Margin="100,0,0,0" FontWeight="Light" Text="Location:"/> <TextBlock FontSize="26.667" FontWeight="Light" Text="{Binding Location}" Margin="8,0,8,0"/> </StackPanel> <StackPanel Orientation="Horizontal"> <TextBlock FontSize="26.667" Margin="100,0,0,0" FontWeight="Light" Text="by"/> <TextBlock FontSize="26.667" FontWeight="Light" Text="{Binding Photographer}" Margin="8,0,8,0"/> </StackPanel> </StackPanel> <StackPanel Orientation="Vertical" > <TextBlock FontSize="20" Margin="100,12,0,0" FontWeight="Light" LineHeight="32.5" Text="{Binding Quote}" TextWrapping="Wrap" /> </StackPanel> </StackPanel> </ScrollViewer> </UserControl> </DataTemplate> </FlipView.ItemTemplate> </FlipView>

19

17. Jalankan aplikasi dan perhatikan hasilnya.

Snapping

Snapping memungkinkan pengguna Windows 8 untuk menjalankan aplikasi Windows 8-style

UI secara berdampingan. Karena kita menggunakan template Grid App maka kelakuan

snapping untuk halaman sudah ditangani secara otomatis. Pada bagian ini kita akan sedikit

memodifikasi data template sehingga menampilkan data yang kita inginkan.

1. Jalankan aplikasi dan snap aplikasi Photo Labs. Perhatikan halaman pertama

menampilkan data foto dengan hanya nama dari foto tersebut.

2. Bukalah StandardStyles.xaml dan temukan template Standard80ItemTemplate lalu ganti

dengan blok kode dibawah ini :

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="flipView" Storyboard.TargetProperty="Visibility"> <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="portraitFlipView" Storyboard.TargetProperty="Visibility"> <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/> </ObjectAnimationUsingKeyFrames>

20

3. Jalankan aplikasi

4. Snap aplikasi dan perhatikan bahwa saat ini informasi lokasi telah ditampilkan.

5. Sekarang kita akan memodifikasi halaman ItemDetailPage.xaml . Temukan kontrol

itemListView. Tambahkan sebuah kontrol FlipView dibawah kontrol FlipView untuk

kondisi portrait.

<DataTemplate x:Key="Standard80ItemTemplate"> <Grid Margin="6"> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto"/> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}" Width="60" Height="60"> <Image Source="{Binding Image}" Stretch="UniformToFill"/> </Border> <StackPanel Grid.Column="1" Margin="10,0,0,0"> <TextBlock Text="{Binding Title}" Style="{StaticResource ItemTextStyle}" MaxHeight="40"/> <TextBlock Text="{Binding Location}" Style="{StaticResource CaptionTextStyle}" TextWrapping="NoWrap"/> </StackPanel> </Grid> </DataTemplate>

21

6. Temukan VisualState dengan nama “Snapped” pada bagian bawah ItemDetailPage.xaml

7. Tambahkan blok kode berikut ini untuk mengatur tampilan Snap

<FlipView x:Name="snappedFlipView" AutomationProperties.AutomationId="ItemsFlipView" AutomationProperties.Name="Item Details" Grid.Row="1" Margin="0,-3,20,0" ItemsSource="{Binding Source={StaticResource itemsViewSource}}" Visibility="Collapsed"> <FlipView.ItemTemplate> <DataTemplate> <UserControl Loaded="StartLayoutUpdates" Unloaded="StopLayoutUpdates"> <ScrollViewer x:Name="scrollViewer" Style="{StaticResource VerticalScrollViewerStyle}" Grid.Row="1">  <StackPanel> <StackPanel Orientation="Vertical"> <TextBlock FontSize="26.667" Margin="10,0,0,0" FontWeight="Light" Text="{Binding Title}" TextWrapping="Wrap"/> <Image x:Name="image" Width="300" Margin="10,20,0,10" Stretch="Uniform" Source="{Binding Image}"/> <StackPanel Orientation="Horizontal"> <TextBlock Style="{StaticResource BasicTextStyle}" Margin="10,0,0,0" FontWeight="Light" Text="Location:"/> <TextBlock Style="{StaticResource BasicTextStyle}" Text="{Binding Location}" Margin="8,0,8,0"/> </StackPanel> <StackPanel Orientation="Horizontal"> <TextBlock Style="{StaticResource BasicTextStyle}" Margin="10,0,0,0" FontWeight="Light" Text="by"/> <TextBlock Style="{StaticResource BasicTextStyle}" Text="{Binding Photographer}" Margin="8,0,8,0"/> </StackPanel> </StackPanel> <StackPanel Orientation="Vertical" > <TextBlock Style="{StaticResource BasicTextStyle}" Margin="10,12,0,0" LineHeight="32.5" Text="{Binding Quote}" TextWrapping="Wrap" /> </StackPanel> </StackPanel> </ScrollViewer> </UserControl> </DataTemplate> </FlipView.ItemTemplate> </FlipView>

22

8. Jalankan aplikasi. Sekarang tampilan detail foto sudah sesuai dan beradaptasi pada

kondisi snapped.

Tampilan Semantic Zoom

Pada halaman utama PhotoLabs terdapat sejumlah konten yang dapat dilihat dengan cara

bergeser secara horizontal. Bayangkan jika konten tersebut cukup banyak maka pengguna

akan sedikit kesulitan untuk mencari atau melihat secara cepat seluruh konten. Windows 8

menyediakan suatu cara, yang disebut semantic zoom untuk menampilkan koleksi konten

dalam bentuk yang lebih kompak.

1. Buka halaman GroupedItemsPage.xaml

2. Cari GridView bernama “itemGridView”. Hapus blok kode tersebut.

3. Ganti GridView dengan blok kode berikut ini :

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="flipView" Storyboard.TargetProperty="Visibility"> <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="snappedFlipView" Storyboard.TargetProperty="Visibility"> <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/> </ObjectAnimationUsingKeyFrames>

<SemanticZoom Grid.Row="1"> <SemanticZoom.ZoomedInView> </SemanticZoom.ZoomedInView> <SemanticZoom.ZoomedOutView> </SemanticZoom.ZoomedOutView> </SemanticZoom>

23

Di dalam SemanticZoomedInView tambahkan kode berikut ini :

Di dalam SemanticZoomedOutView tambahkan kode berikut ini :

<GridView x:Name="itemGridView" AutomationProperties.AutomationId="ItemGridView" AutomationProperties.Name="Grouped Items" Margin="0,-3,0,0" Padding="116,0,40,46" ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}" ItemTemplate="{StaticResource Standard250x250ItemTemplate}" SelectionMode="None" IsItemClickEnabled="True" ItemClick="ItemView_ItemClick"> <GridView.ItemsPanel> <ItemsPanelTemplate> <VirtualizingStackPanel Orientation="Horizontal"/> </ItemsPanelTemplate> </GridView.ItemsPanel> <GridView.GroupStyle> <GroupStyle> <GroupStyle.HeaderTemplate> <DataTemplate> <Grid Margin="1,0,0,6"> <Button AutomationProperties.Name="Group Title" Click="Header_Click" Style="{StaticResource TextPrimaryButtonStyle}" > <StackPanel Orientation="Horizontal"> <TextBlock Text="{Binding Title}" Margin="3,-7,10,10" Style="{StaticResource GroupHeaderTextStyle}" /> <TextBlock Text="{StaticResource ChevronGlyph}" FontFamily="Segoe UI Symbol" Margin="0,-7,0,10" Style="{StaticResource GroupHeaderTextStyle}"/> </StackPanel> </Button> </Grid> </DataTemplate> </GroupStyle.HeaderTemplate> <GroupStyle.Panel> <ItemsPanelTemplate> <VariableSizedWrapGrid Orientation="Vertical" Margin="0,0,80,0"/> </ItemsPanelTemplate> </GroupStyle.Panel> </GroupStyle> </GridView.GroupStyle> </GridView>

24

Anda baru saja mengganti GridView dengan sebuah kontrol SemanticZoom yang terdiri

dari dua GridView, satu yang digunakan untuk menampilkan data pada keadaan zoomed-

in dan satu untuk keadaan zoomed-out.

4. Pada bagian bawah GroupedItemPage.xaml temukan elemen VisualState dan tambahkan

pada bagian “Snapped” blok kode berikut ini :

5. Buka GroupedItemsPage.aml.cs dan tambahkan blok kode dibawah ini pada fungsi

LoadState

6. Jalankan aplikasi. Tekan Ctrl dan mouse scroller jika anda menggunakan tetikus atau

gerakat mencubit pada halaman utama. Perhatikan bahwa aplikasi akan menampilkan

zoomed-out view , berupa sebuah gambar dengan jumlah foto yang terdapat di dalam

grup.

<GridView x:Name="groupGridView" Margin="116,0,40,46"> <GridView.ItemTemplate> <DataTemplate> <Grid Margin="0,0,24,0"> <Image Opacity="0.5" Source="{Binding Group.Image}" Width="250" Height="500" Stretch="UniformToFill"/> <TextBlock Text="{Binding Group.Title}" Foreground="{StaticResource ListViewItemOverlayForegroundThemeBrush}" Style="{StaticResource TitleTextStyle}" FontSize="28" Margin="12"/> <TextBlock Text="{Binding Group.PhotoCount}" Foreground="{StaticResource ApplicationSecondaryForegroundThemeBrush}" Style="{StaticResource TitleTextStyle}" FontSize="96" Margin="12,64,12,12" HorizontalAlignment="Right"/> </Grid> </DataTemplate> </GridView.ItemTemplate> </GridView> </SemanticZoom.ZoomedOutView>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="groupGridView" Storyboard.TargetProperty="Visibility"> <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/> </ObjectAnimationUsingKeyFrames>

this.groupGridView.ItemsSource = this.groupedItemsViewSource.View.CollectionGroups;

25

Selamat, Anda sudah berhasil menambahkan penyempurnaan terhadap antarmuka dari

aplikasi. Saat ini aplikasi Photo Labs udah dapat beradaptasi pada orientasi, snapping dan

semantic zoom untuk memudahkan navigasi antar konten.

Searching dan Sharing Salah satu fitur unik dari pengalaman Windows 8 adalah Charm Bar yang mengakomodasi

fitur pencarian dan berbagi konten. Pada bagian ini kita akan menambahkan kedua fitur

tersebut pada aplikasi Photo Labs kita.

Berbagi Konten

1. Jalankan aplikasi Photo Labs yang sudah diselesaikan pada bagian sebelumnya.

2. Pilih salah satu foto dan tampilkan charm bar dan pilih Share.

3. Perhatikan bahwa terdapat pesan informasi “This app can’t share”.

4. Buka halaman ItemDetailPage.xaml.cs dan tambahkan blok kode berikut ini pada bagian

atas berkas.

5. Temukan fungsi LoadState dan tambahkan blok kode berikut ini :

6. Tambahkan fungsi berikut ini di dalam berkas ItemDetailPage.xaml.cs

using Windows.ApplicationModel.DataTransfer; using System.Text; using Windows.Storage.Streams;

DataTransferManager.GetForCurrentView().DataRequested += OnDataRequested;

26

7. Pada fungsi SaveState tambahkan blok kode berikut ini:

8. Jalankan aplikasi. Pilih salah satu foto. Lalu klik Share Charm. Pada contoh ini digunakan

aplikasi Share Target yang berasal dari Windows 8 SDK Samples.

9. Perhatikan bahwa konten item yang dipilih berhasil didapatkan oleh aplikasi target.

Fitur Pencarian

Untuk memeriksa apakah aplikasi sudah mendukung fitur pencarian, jalankan aplikasi dan

klik Search Charm. Ketik Bandung dan perhatikan bahwa muncul peringatan “This app can’t

be searched”. Sekarang ikuti langkah-langkah berikut ini :

void OnDataRequested(DataTransferManager sender, DataRequestedEventArgs args) { var request = args.Request; var item = (PhotoDataItem)this.flipView.SelectedItem; request.Data.Properties.Title = item.Title; request.Data.Properties.Description = "Amazing photo collection"; var reference = RandomAccessStreamReference.CreateFromUri(new Uri(item.ImagePath.AbsoluteUri)); request.Data.Properties.Thumbnail = reference; request.Data.SetBitmap(reference); // Share recipe text var photo = "at "; photo += String.Join("\r\n", item.Location); photo += ("\r\n\r\nby\r" + item.Photographer); photo += ("\r\n\r\n\r" + item.Quote); request.Data.SetText(photo); }

DataTransferManager.GetForCurrentView().DataRequested -= OnDataRequested;

27

1. Klik kanan pada Solution Explorer lalu pilih Add – New Item dan tambahkan sebuah

search contract dan beri nama SearchResultsPage.xaml.

2. Gantilah nilai resource AppName menjadi Search

3. Tambahkan ItemClick=”OnItemClick” pada “resultGridView dan pada “resultListView”.

4. Buka SearchResultPage.xaml.cs dan tambahkan fungsi berikut ini untuk keperluan

navigasi.

5. Pada bagian atas deklarasi kelas, tambahkan variabel berikut ini :

6. Cari fungsi LoadState dan tambahkan blok kode berikut ini sebelum “Communicate

results through the view model”

<x:String x:Key="AppName">Search</x:String>

private void OnItemClick(object sender, ItemClickEventArgs e) { // Navigate to the page showing the recipe that was clicked this.Frame.Navigate(typeof(ItemDetailPage), ((PhotoDataItem)e.ClickedItem).UniqueId); }

private Dictionary<string, List<PhotoDataItem>> _results = new Dictionary<string, List<PhotoDataItem>>();

28

Fungsi ini akan melakukan pencocokan kata kunci terhadap judul, lokasi dan nama grup

dari foo. Jika pencarian berhasil maka foto-foto akan dikategorikan berdasarkan group

dari foto tersebut kemudian ditampilkan.

7. Pada Filter_SelectionChanged tambahkan blok kode berikut ini setelah klausa TODO.

8. Buka StandarsStyles.xaml dan temukan template

“StandardSmallIcon300x70ItemTempate”. Hapus TextBlock yang menampilkan Subtitle.

9. Tekan F5 untuk menjalankan aplikasi

10. Klik Search Charm dan ketikkan “in” pada kotak pencarian lalu klik enter atau klik ikon

pencarian.

11. Perhatikan bahwa aplikasi akan menampilkan foto-foto yang mengandung “in”.

var filterList = new List<Filter>(); filterList.Add(new Filter("All", 0, true)); // Search recipes and tabulate results var groups = PhotoDataSource.GetGroups("AllGroups"); string query = queryText.ToLower(); var all = new List<PhotoDataItem>(); _results.Add("All", all); foreach (var group in groups) { var items = new List<PhotoDataItem>(); _results.Add(group.Title, items); foreach (var item in group.Items) { if (item.Title.ToLower().Contains(query) || item.Group.Title.ToLower().Contains(query) || item.Location.ToLower().Contains(query)) { all.Add(item); items.Add(item); } } filterList.Add(new Filter(group.Title, items.Count, false)); } filterList[0].Count = all.Count;

this.DefaultViewModel["Results"] = _results[selectedFilter.Name];

29

12. Selanjutnya mari kita tambahkan fitur rekomendasi kata kunci untuk memudahkan

pencarian . Buka App.xaml.cs dan tambahkan deklarasi berikut ini

13. Tambahkan event handler untuk SugesstionRequested pada fungsi OnLaunched

14. Tambahkan fungsi berikut ini :

15. Jalankan aplikasi dan ketik “pa” pada kotak pencarian. Akan ditampilkan padasuka dan

papuma sebagai rekomendasi kata kunci seperti gambar dibawah ini :

using Windows.ApplicationModel.Search;

SearchPane.GetForCurrentView().SuggestionsRequested += OnSuggestionsRequested;

void OnSuggestionsRequested(SearchPane sender, SearchPaneSuggestionsRequestedEventArgs args) { string query = args.QueryText.ToLower(); string[] terms = { "papuma", "bandung", "turkey", "lok baintan", "padasuka", "caringin tilu", "cicadas", "bromo", "trenggalek" }; foreach (var term in terms) { if (term.StartsWith(query)) args.Request.SearchSuggestionCollection.AppendQuerySuggestion(term); } }

30

Menjaga Data Aplikasi Pada banyak kasus, aplikasi harus menangani kondisi suspended dan terminated agar

memberikan pengalaman yang konsisten. Pada aplikasi Photo Labs kita, yang perlu disimpan

adalah nilai navigasi dan sejarah navigasi selama di aplikasi. Pada contoh ini kita tidak perlu

melakukan hal tersebut secara manual karena kelas SuspensionManager telah ditambahkan

secara otomatis dan berfungsi untuk menjaga data aplikasi.

Perhatikan bahwa pada App.xaml.cs aplikasi mendengarkan event Suspending dan memanggil

SuspensionManager untuk menyimpan data dan halaman terakhir aplikasi. Sebagai tambahan,

pada fungsi OnLaunched, diperiksa kondisi terakhir eksekusi apakah berasal dari terminated.

Jika demikian maka aplikasi akan mengembalikan aplikasi ke kondisi semula menggunakan

fungsi Restore pada SuspensionManger.

Jika Photo Labs di-suspend dan di-terminate maka aplikasi secara otomatis akan kembali ke

halaman terakhir yang dibuka ketika diaktifkan kembali. Kita dapat mengujinya dengan

menjalankan aplikasi melalui Visual Studio, memilih satu foto dan memilih Suspend and

shutdown pada Debug Location.

31

Setelah aplikasi non-aktif, tekan kembali F5 untuk mengaktifkan aplikasi. Perhatikan bahwa

aplikasi tetap menampilkan halaman terakhir sekaligus menyimpan sejarah navigasi sehingga

kita dapat menyusuri halaman-halaman yang pernah kita buka.

Secondary Tile Pada bagian ini kita akan coba menambahkan secondary tile pada aplikasi kita. Bayangkan

pengguna sedang asyik melihat-lihat foto di dalam Photo Labs dan ia menemukan satu foto

favoritnya. Suatu waktu ia ingin memperlihatkan kembali foto tersebut kepada orang lain

tanpa ingin mencari kembali foto dari koleksi foto yang tersedia. Pada contoh kasus seperti ini

maka penggunaan secondary tile dapat kita gunakan sebagai shortcut ke halaman tertentu di

dalam aplikasi kita.

1. Buka halaman ItemDetailPage.xaml dan tambahkan sebuah button pada ApplicationBar

32

2. Buka ItemDetailPage.xaml.cs dan tambahkan deklarasi berikut ini:

3. Sekarang tambahkan fungsi pada ItemDetailPage.xaml.cs

4. Buka App.xaml.cs dan pada fungsi OnLaunched tambahkan kondisi kedua

<Page.BottomAppBar> <AppBar x:Name="PageAppBar" Padding="10,0,10,0"> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="50*"/> <ColumnDefinition Width="50*"/> </Grid.ColumnDefinitions> <StackPanel x:Name="LeftCommands" Orientation="Horizontal" Grid.Column="0" HorizontalAlignment="Left"> <Button x:Name="PinRecipeButton" HorizontalAlignment="Left" Style="{StaticResource PinAppBarButtonStyle}" Click="OnPinRecipeButtonClicked" /> </StackPanel> <StackPanel x:Name="RightCommands" Orientation="Horizontal" Grid.Column="1" HorizontalAlignment="Right"> </StackPanel> </Grid> </AppBar> </Page.BottomAppBar>

using Windows.UI.StartScreen;

private async void OnPinRecipeButtonClicked(object sender, RoutedEventArgs e) { var item = (PhotoDataItem)this.flipView.SelectedItem; var uri = new Uri(item.TileImagePath.AbsoluteUri); var tile = new SecondaryTile( item.UniqueId, // Tile ID item.Title, // Tile short name item.Title, // Tile display name item.UniqueId, // Activation argument TileOptions.ShowNameOnLogo, // Tile options uri // Tile logo URI ); await tile.RequestCreateAsync(); }

// Do not repeat app initialization when the Window already has content, // just ensure that the window is active if (args.PreviousExecutionState == ApplicationExecutionState.Running) { if (!String.IsNullOrEmpty(args.Arguments)) ((Frame)Window.Current.Content).Navigate(typeof(ItemDetailPage), args.Arguments); Window.Current.Activate(); return; }

33

5. Cari fungsi SuspensionManager.RegisterFrame pada fungsi OnLaunched. Dan tambahkan

blok kode berikut ini:

Fungsi ini akan dipanggil jika aplikasi tidak berada dalam kondisi Running.

6. Tekan F5 dan pilih salah satu foto.

7. Klik kanan(jika menggunakan tetikus) dan pilih Pin to Start.

if (!String.IsNullOrEmpty(args.Arguments)) { rootFrame.Navigate(typeof(ItemDetailPage), args.Arguments); Window.Current.Content = rootFrame; Window.Current.Activate(); return; }

34

8. Perhatikan pada start screen terdapat secondary tile.

9. Klik salah satu tile dan perhatikan aplikasi langsung membuka halaman detail foto yang di

klik.

35

Penutup Jika Anda sampai pada bagian ini, selamat. Maka Anda sudah berhasil membuat satu aplikasi

yang menerapkan prinsip desain Windows 8-style UI dan memanfaatkan fitur-fitur unik dari

Windows 8 seperti Charm Bar dan tile. Tentunya masih terdapat beberapa penyempurnaan

yang bisa Anda lakukan. Misalnya dengan menambahkan notifikasi, melakukan pemanggilan

data secara real-time, menggunakan kamera dan sebagainya. Hal-hal tersebut dapat Anda

aplikasikan sehingga dapat menjadikan aplikasi Photo Labs menjadi aplikasi Windows 8-style

UI yang layak digunakan.

Lebih lanjut lagi, buku ini memang didesain untuk membahas berbagai topik pilihan yang

penulis anggap penting dan fundamental untuk para pembaca memulai pemrograman di

Windows 8. Tentunya untuk memahami berbagai aspek pemrograman pada sistem operasi

terbaru ini dibutuhkan ketekunan dan semangat untuk terus berlatih. Contoh kode dan proyek

dapat diperoleh disini : http://win8ebook.codeplex.com/ .

http://win8ebook.codeplex.com/

v

TENTANG PENULIS

Puja Pramudya lahir di Pekanbaru, adalah alumni Teknik Informatika

Institut Teknologi Bandung dan aktif berorganisasi di komunitas INDC

dan Microsoft User Group Indonesia (MUGI) serta menjadi pembicara di

berbagai seminar teknologi informasi.

Pada tahun 2011 ini ia dianugerahi penghargaan Microsoft MVP Award

atas dedikasi dan kontribusinya dalam komunitas teknologi Microsoft di

Indonesia dan memenangkan kompetisi Windows Phone Challenge yang

diselenggarakan Microsoft Indonesia. Dan ditahun yang sama, bersama lima rekan mendirikan Radya

Labs yang berfokus untuk mengembangkan aplikasi-aplikasi pada platform Windows Phone dan

Windows 8. Di waktu senggangnya aktif menulis pada blog yang berfokus pada teknologi Microsoft

http://geeks.netindonesia.net/blogs/poedja_p/ , http://pujalabs.net sambil tidak lupa bermain futsal

dan menonton film yang menarik.

http://geeks.netindonesia.net/blogs/poedja_p/

http://pujalabs.net/

v

DAFTAR PUSTAKA

[1] Brockschmidt, Kraig. Programming Windows 8 Apps with HTML,CSS and JavaScript.

Microsoft Press. 2012

[2] Petzold, Charles. Programming Windows Sixth Edition. Microsoft Press. 2011

[3] Pramudya,Puja. Membuat Aplikasi untuk Windows Phone. Penerbit ANDI. 2012

[4] http://msdn.microsoft.com/en-us/library/windows/apps/xaml/br229566.aspx

http://msdn.microsoft.com/en-us/library/windows/apps/xaml/br229566.aspx

Windows8 eBook

Text of Windows8 eBook

Slide instalacao windows8

Clase2 Windows8.pdf

Usuario windows8

Learn with windows8 ui

Windows8 taller

Windows8 features

Windows8 metro presentation

Mr201209 windows8 exploit_mitigation

3350 Windows8 Surface

Windows8 vs windows7 (2)

windows7 vs windows8 ppt

Windows8 metro presentationupdated

#Windows8 Launch in Indonesia

eduroam windows8

Uni WiFi Windows8

Windows8 Klavye Kısayolları

Guía Windows8

Windows8 무선인터넷 설정 방법

Windows8 eBook

Windows8 매트로스타일 앱개발 개요

Chiffrement Windows8 Avec BitLocker

Windows8 lightningtalk

Windows8 140112140554-phpapp02

Windows8 release preview_productguide_final_spanish

Windows8 Trucos Apps

Instalacion windows8

Users Windows8

Presentacion windows8 kike_para_subir_blog

windows8 vs windows10

Xerox Windows8 Matrix