Download - Windows8 eBook

Transcript
  • 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


Top Related