eBook English Perilaku Konsumen eBook English Perilaku Konsumen eBook English Perilaku Konsumen
Windows8 eBook
-
Upload
wildangani -
Category
Documents
-
view
69 -
download
0
Transcript of 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
-
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
-
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.
-
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!.
Hello, World!
3. Pada root Grid, sebelum tag 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.
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.
-
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
. Dibawah ini adalah sintaks untuk mendeklarasikan sebuah
obyek Canvas.
Jika sebuah obyek tidak memiliki elemen lain didalamnya maka dapat ditulis langsung dengan
menjadi .
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 . Dalam
-
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.
propertyValueAsObjectElement
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.
-
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
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.
-
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 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 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.
-
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.
-
22
Grid
Panel yang dapat mengatur posisi kontrol di dalamnya dalam baris dan kolom.
-
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.
-
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 :
Item 1 Item 2
-
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 :
-
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 :
Item 1 Item 2
-
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.
-
28
Pada bagian sebelum 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.
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.
-
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 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
http://msdn.microsoft.com/en-us/library/windows/apps/xaml/hh465345.aspx
-
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 { /// /// Multicast event for property change notifications. /// public event PropertyChangedEventHandler PropertyChanged; protected bool SetProperty(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
/// /// Generic item data model. /// 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 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; }
-
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.
-
7
Perhatikan pada bagian atas berkas, setelah , 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 sehingga
dapat kita simpulkan bahwa sumber data GridView adalah sebuah
IEnumerable , 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.
-
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.
-
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
.
3. Klik ganda pada Button untuk menambahkan event handler. Tambahkan blok kode
berikut ini.
Call
-
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.
Call Call HttpClient
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
.
3. Tambahkan event handler Button_Click_1 dengan blok kode berikut ini :
Open
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