Docstoc

Deliver Robust Desktop Application

Document Sample
Deliver Robust Desktop Application Powered By Docstoc
					                                      Kata Pengantar


      Puji syukur kepada Allah SWT yang telah memberikan kekuatan kepada kresna untuk
menyusun dan menyelesaikan buku ini yang berjudul “Deliver Robust Desktop Application with
Visual CSharp 2008 Express Edition”. Kresna mengucapkan terima kasih banyak untuk Naren yang
telah memberikan kesempatan kepada kresna untuk menulis buku ini. Tidak lupa kresna berterima
kasih kepada keluarga kresna yang selalu mendukung kresna, terutama papa yang selalu mengerti
akan kondisi kresna, selalu mendukung dikala kresna sedang susah. Terima kasih yang sepsial untuk
Nurulita Prihasti Kardia, karena hampir selalu menemani dan membantu kresna dalam
menyelesaikan buku ini, serta untuk teman-teman, fu yang sering membantu, niko yang
membuatkan cover, hafiz, dkk.

      Kresna mendapatkan banyak ilmu tambahan saat menulis buku ini. Dan kresna yakin, dengan
.NET Framework 3.0 atau versi terakhirnya dapat membantu para pengembang aplikasi desktop.
Semoga buku ini bermanfaat bagi siapapun yang membacanya.




                                                                           Jakarta, Februari 2008


                                                                                         Kresna
                                                                  DAFTAR ISI



KATA PENGANTAR ................................................................................................................................................. 2

DAFTAR ISI ............................................................................................................................................................... 3

INTRODUCING .NET FRAMEWORK 3.0 ................................................................................................................. 4
  Overview ................................................................................................................................................................ 4
  Yang Disediakan Oleh .NET Framework 3.0 ......................................................................................................... 4
  Windows Workflow Foundation: Men-Support Workflow-Based Applications ...................................................... 5
  Windows Communication Foundation: Support for Service-Oriented Applications .............................................. 6
  Windows CardSpace: User Control yang Konsisten Dari Identitas Digital ............................................................ 7
  Windows Presentation Foundation: Sebuah Pendekatan Secara Menyeluruh ke Berbagai Macam
  User Interface ........................................................................................................................................................ 9
  Mengaplikasikan .NET Framework 3.0: Sebuah Skenario .................................................................................. 11

INTRODUCING WINDOWS COMMUNICATION FOUNDATION ........................................................................... 13
  Latihan 1 - Definisikan dan implementasikan kontrak untuk derivatives calculator service ................................ 16
  Latihan 2 - Tempatkan Service pada sebuah program .NET yang dapat di jalankan ......................................... 19
  Latihan 3 – Memakai Derivatives Calculator Service .......................................................................................... 23
  Latihan 4 – Host Service pada IIS ....................................................................................................................... 27
  Kesimpulan .......................................................................................................................................................... 34

CREATE HELLOWORLD IN XAML WITH VISUAL C# 2008 EXPRESS .............................................................. 35
  Latihan 1 – Membuat 2D content yang statis ...................................................................................................... 35
  Latihan 2 – Menambahkan Animasi dan Media .................................................................................................. 47
  Latihan 3 – Membuat 3-D Content ...................................................................................................................... 54
  Kesimpulan .......................................................................................................................................................... 66

CREATING XAML BROWSER APPLICATION WITH VISUAL C# 2008 EXPRESS ............................................ 67
  Latihan 1 – Membuat XAML Browser Application ............................................................................................... 68
  Latihan 2 – Data Binding ..................................................................................................................................... 76
  Latihan 3 – Menambahkan Custom Fonts ........................................................................................................... 80
  Latihan 4 – Cara Membuat dan Menggunakan Flow Documents ....................................................................... 82
  Kesimpulan .......................................................................................................................................................... 89

CREATE DESKTOP APPLICATION WITH EXPRESSION BLEND AND VISUAL C# 2008 EXPRESS .............. 91
  Overview Microsoft Expression Blend ................................................................................................................. 91
  Latihan 1 – Membuat Proyek InkCanvas dengan Menggunakan Visual C# 2008 Express ................................ 94
  Latihan 2 – Membuat User Interface Proyek InkCanvas dengan Expression Blend ........................................... 98
  Kesimpulan ........................................................................................................................................................ 108

CREATE COOL DESKTOP APPLICATION WITH SPEECH RECOGNITION IN WINDOWS VISTA................. 109
  Latihan 1 – Membuat WPF Menggunakan Expression Blend ........................................................................... 109
  Latihan 2 – Melanjutkan Proyek Dengan Visual C# 2008 Express ................................................................... 111
  Kesimpulan ........................................................................................................................................................ 117

PENUTUP .............................................................................................................................................................. 118
Introducing .NET Framework 3.0


Overview

Tujuan akhir dalam pengembangan sebuah aplikasi adalah selalu sama yaitu membuat software
yang memungkinkan dalam jangka waktu tertentu. Dan sekarang pengembangan software semakin
berkembang, contohnya adalah platform, dimana para developer membuatnya menjadi lebih baik
seiring berjalannya waktu. Contoh pada Windows adalah, .NET Framework yang telah diluncurkan
pada tahun 2002, dan versi 2.0 pada tahun 2005, menyediakan environtment yang cukup signifikan
lebih baik dan lebih menunjang produktifitas untuk orang-orang yang mendesain dan membuat
software Windows.

.NET Framework 3.0 (sekarang dikenal dengan nama WinFX) merupakan langkah berikutnya dalam
progres pengembangan platform dari Windows. Aplikasi yang dibuat dengan menggunakan versi
terbaru dari Framework ini dapat dibuat dengan menggunakan tools Visual Studio 2005 (atau versi
terakhrinya), membuat semakin familiar bagi kebanyakan developer Windows. Tetapi .NET
Framework 3.0 ini juga merupakan sebuah evolusi, menambahkan lebih dari apa yang Framework
versi 2.0 telah sediakan. .NET Framework 3.0 juga bisa dijalankan pada Windows Vista, Windows
Server 2003, dan Windows XP.

Pada e-book ini akan dijelaskan gambaran besar dari .NET Framework 3.0 dan komponennya.
Tujuannya adalah membuat lebih jelas mengenai apa sebenarnya .NET Framework 3.0, bagaimana
penggunaan teknologi ini, dan menyediakan penjelasan mengenai teknologi ini.



Yang Disediakan Oleh .NET Framework 3.0

Jika kita lihat pada gambar dibawah ini, .NET Framework 3.0 dikembangkan berdasarkan pada versi
yang sebelumnya, yaitu .NET Framework 2.0. Dan pada faktanya tidak ada yang berubah pada .NET
Framework 2.0, jadi aplikasi yang sudah dibuat dengan menggunakan versi 2.0 tetap bisa berfungsi
dan berjalan sepeti biasanya. .NET Framework 3.0 menambahkan 4 komponen baru, diantaranya
adalah: Windows Workflow Foundation (WF), Windows Communication Foundation (WCF), Windows
CardSpace, dan Windows Presentation Foundation.
Gambar 1 .NET Framework 3.0 Architecture



Windows Workflow Foundation: Men-Support Workflow-Based Applications



Sebuah workflow sebenarnya merupakan ide yang cukup sederhana yaitu, hanya sebuah rangkaian
langkah-langkah yang ditampilkan dengan berbagai order. Ada sebuah argumentasi yang
mengatakan bahwa setiap aplikasi mengimplementasikan sebuah workflow, karena setiap aplikasi
mengeksekusi beberapa proses. Sekarang pendekatan secara tradisional untuk membuat sebuah
aplikasi menggunakan C# atau Visual Basic atau beberapa programming language lainnya adalah
untuk membuat langkah didalam prosesnya implisit di dalam code. Dan ini seharusnya berhasil,
tetapi ini juga meng-embed proses itu sendiri dalam logika dari program, membuat proses seperti itu
lebih sulit untuk diimplementasikan dan untuk diubah.

Menggunakan teknologi workflow untuk mengimplementasikan proses logika bisa menjadi cara yang
efektif untuk menyelesaikan masalah ini. Dibandingkan dengan menuangkan logika dalam code
biasa, setiap step dalam proses sangat eksplisit didefinisikan, lalu dieksekusi oleh mesin workflow.
Hasilnya adalah sebuah implementasi yang bersih dari proses itu sendiri.

Mesin workflow bukan meupakan ide baru, sekarang sudah ada beberapa yang bisa digunakan untuk
Windows dan untuk sistem lainnya. Bahkan Microsoft menyediakan mesin workflow yang di-embed
pada beberapa produknya. Karena workflow menjadi sebuah pendekatan mainstream untuk
menciptakan aplikasi, menyediakan sebuah teknologi single workflow untuk Windows menjadi
masuk akal. Ini merupakan apa yang sudah dilakukan oleh Windows Workflow Foundation (WF).
Dengan menyediakan teknologi workflow untuk windows, WF memberikan semua aplikasi workflow-
based pondasi yang sama untuk membuatnya. Software yang disediakan oleh Microsoft akan
menggunakan WF, termasuk Microsoft Office 2007 dan Windows SharePoint Services.

Menyediakan sebuah teknologi workflow menghadirkan beberapa tantangan. Sebagai contohnya,
dapatkah sebuah single approach bertemu dengan sekelompok permintaan yang berbeda-beda yang
dipresentasikan oleh aplikasi workflow yang berbeda? Jawaban yang diadopsi oleh WF yaitu
mengambil pandangan yang paling umum terhadap workflow. Seperti yang digambarkan oleh
Gambar 2, sebuah WF workflow hanyalah suatu aktivitas grup yang dieksekusi oleh WF engine. Tiap
aktivitas sebenarnya merupakan sebuah kelas, dan kelas tersebut dapat melakukan pekerjaan
apapun jika menurut pembuat workflow tersebut itu perlu. Suatu aktivitas mungkin saja di-reuse
pada workflow yang berbeda, dengan maksud agar menjadi lebih mudah secara otomatis dalam
membuat solusi terhadap suatu masalah baru.




Gambar 2

Tantangan lainnya dalam menyediakan teknologi workflow umum yang menentang dari tradisi
antara human-oriented dan system-oriented workflows. Aplikasi workflow yang mula-mula
digunakan oleh masyarakat diperlukan adanya fleksibilitas, memperbolehkan hal-hal seperti
perubahan on-the-fly pada suatu proses. Hal-hal tersebut biasanya digunakan oleh sistem, yaitu,
oleh software, dimana cenderung statis tetapi harus seefisien mungkin. WF disediakan untuk kedua
macam penggunaan tersebut, maka dari itu WF mencakupi human-oriented features, seperti
kemampuan untuk membuat suatu perubahan terhadap workflow yang sedang berjalan, seiring
dengan perilaku system-oriented yang mendukung.

Dengan menyediakan teknologi workflow umum untuk Windows pada WF, .NET Framework 3.0
memanfaatkan paradigma yang berguna ini untuk membuat software yang tersedia bagi para
developer. Seiring dengan pandangan process-oriented terhadap software mulai terkenal, kegunaan
dari workflow sepertinya akan berkembang juga.



Windows Communication Foundation: Support for Service-Oriented Applications

Windows Communication Foundation (WCF) adalah sebuah Software Development Kit (SDK) untuk
mengembangkan dan men-deploy service-service pada Windows. WCF menyediakan sebuah runtime
environment untuk service kita, membuat kita bisa mengekspos tipe CLR sebagai sebuah service, dan
untuk memakai service lainnya sebagai sebuah tipe CLR. Walaupun pada teorinya kita dapat
membuat service tanpa WCF, pada praktiknya membuat service jauh lebih mudah menggunakan
WCF. WCF merupakan implementasi dari sebuah kelompok standard industri dari Microsoft
bertujuan untuk mendefinisikan interaksi suatu service, tipe conversion, dan bermacam-macam
manajemen protokol. Maka dari itu, WCF menyediakan interoperability antara service yang ada.
WCF memfasilitasi para developer dengan kemudahan-kemudahan pada hampir setiap aplikasi,
sehingga dapat meningkatkan produktifitas. WCF yang pertama kali dikeluarkan atau di-release
memberikan banyak fasilitas yang berguna untuk membuat atau men-develop service, seperti
hosting, service instant management, asynchronous calls, reliability, transaction management,
disconnected queued calls, dan security. WCF dibuat dengan menggunakan extensibility model yang
elegan. Hampir semua kegunaan WCF termasuk dalam sebuah single assembly yang dinamakan
System.ServiceModel.dll di dalam namespace System.ServiceModel.

WCF merupakan salah satu bagian dari .NET 3.0 dan membutuhkan .NET 2.0, sehingga WCF hanya
bisa berjalan pada sistem operasi yang mendukungnya, seperti Windows Vista (client dan server),
Windows XP SP2, dan Windows Server 2003 SP1 atau versi-versi terakhirnya.



Windows CardSpace: User Control yang Konsisten Dari Identitas Digital



Pikirkan mengenai bagaimana orang merepresentasikan diri mereka sendiri pada internet.
Kebanyakan dari kasus-kasus yang ada, sebuah identitas digital dari seseorang merupakan ekspresi
dari sebuah username yang sederhana. Dikombinasikan dengan password, identitas ini digunakan
untuk mengakses email, melakukan pembelian dengan internet, dan bahkan menggunakan e-
banking atau institusi finansial lainnya. Disamping kemudahannya, username dan password memiliki
beberapa kelemahan. Berikut ini merupakan dua buah kelemahan yang paling penting:
   Orang memiliki kesulitan untuk mengingat semua username dan password yang telah mereka
    pilih untuk sites yang berbeda. Banyak orang yang menggunakan username dan password yang
    sama untuk situs yang berbeda, menyelesaikan bagi yang bermasalah dalam kesulitan untuk
    mengingat tetapi justru meningkatkan resiko keamanan.
   Username, password, dan informasi personal lainnya dapat dicuri oleh hackers. Dengan
    mengirimkan email, hackers menarik target mereka untuk log in ke web site yang terlihat mirip
    dengan, katakanlah web site dari bank yang digunakan oleh si target. Situs yang mirip ini
    sepenuhnya dikendalikan oleh hackers, dan kemudian target memasukan username dan
    password, hackers dapat menggunakan informasi ini untuk log in atau masquarade sebagai user
    pada situs sebenarnya.

Untuk mengurangi masalah-masalah seperti ini dibutuhkan sebuah pendekatan baru untuk
mengatur identitas digital. Windows CardSpace (InfoCard), menjadi bagian yang penting dalam
pendekatan baru tersebut. Windows CardSpace merepresentasikan setiap identitas sebagai sebuah
information card yang jelas. Jika sebuah situs menerima CardSpace login, pengguna atau user
mencoba untuk log in ke situs tersebut akan melihat sebuah CardSpace selection screen seperti pada
gambar 3. Dengan memilih sebuah card, pengguna atau users juga dapat memilih identitas digital
yang akan digunakan untuk mengakses situs tersebut. Dibandingkan dengan mengingat usernames
dan passwords yang bervariasi, user hanya perlu mengenali card yang ingin mereka gunakan. Kartu
yang berbeda juga bisa memiliki informasi yang berbeda.
Gambar 3       CardSpace



Identitas yang direpresentasikan oleh cards ini dibuat dengan satu atau lebih identity providers.
Organisasi manapun dapat menawarkan sebuah identity providers, dan dibandingkan dengan
mengandalkan username dan password yang simpel, setiap identitas yang digunakan pada
CardSpace akan menggunakan mekanisme kriptografi yang powerfull untuk memperbolehkan user
untuk membuktikan identitas mereka. CardSpace sendiri juga mencakupi issue mengenai identity
provider yang berjalan pada mesin client. Dengan provider ini, users dapat membuat identitas
mereka sendiri yang tidak tergantung kepada password untuk proses autentikasi. Web sites dapat
menerima issue ini dibandingan dengan tergantung kepada password, karena mengurangi
permasalahan yang dibawa oleh password itu sendiri.

Jika password tidak digunakan untuk log in ke sebuah situs, hackers tidak dapat mencuri password
tersebut. Tetap, jika hackers dapat menipu user untuk masuk ke dalam situs tiruan, mereka dapat
mencuri informasi user, seperti informasi kesehatan yang sifatnya sensitif. Untuk mencegah hal ini,
users diharapkan dapat membedakan antara situs asli dengan situs palsu yang dibuat oleh si-
hackers. Maka dari itu, organisasi yang memiliki situs dapat mendapatkan sebuah high-assurance
certificate. Tidak seperti sertifikasi SSL sederhana seperti sekarang, untuk memperoleh jenis
sertifikasi baru ini memerlukan proses yang sangat sulit, termasuk bukti yang lebih kuat mengenai
identitas dari organisasi tersebut. Sebuah high-assurance certificate dapat juga membawa logo
perusahaan dan informasi lainnya untuk membantu user menentukan dengan benar apakah sebuah
situs yang menggunakan sertifikat ini adalah legal atau aman. Ketika user mengakses sebuah situs
baru, CardSpace selalu menampilkan informasi didalam sertifikat situs tersebut menggunakan
standart screen. Berbasiskan kekuatan pada sertifikasi yang diterima, screen ini akan
mengindikasikan perbedaan level assurance dari identitas situs tersebut. Tujuannya adalah untuk
memaksa user untuk membuat sebuah keputusan yang explisit ke sebuah situs yang terpercaya,
kemudian membantunya membuat pilihan yang tepat mengenai situs mana yang harus atau bisa
dipercaya. Dengan mementingkan masalah fundamental dari sebuah identitas, CardSpace tentunya
memegang peranan penting dalam .NET Framework 3.0.



Windows Presentation Foundation: Sebuah Pendekatan Secara Menyeluruh ke Berbagai
Macam User Interface



User Interface merupakan sebuah bagian yang penting dalam hampir setiap aplikasi. Apa yang
diharapkan oleh user sekarang dari interface sebuah aplikasi telah meningkat secara signifikan.
Menggunakan GUI tradisional tetap masih dibutuhkan, tetapi aplikasi juga mungkin membutuhkan
untuk menampilkan video, menjalankan animasi, menggunakan grafik 2D atau 3D, dan bekerja
dengan bermacam-macam dokumen. Dan semua itu harus memungkinkan entah aplikasi tersebut
diakses melewati sebuah stand-alone desktop client atau melewati sebuah Web browser.

Secara tradisional, semua aspek dari user interface telah disediakan dalam beberapa cara pada
Windows. Contohnya, seorang developer dapat menggunakan Windows Forms, bagian dari .NET
Framework, untuk membuat sebuah GUI pada Windows. Membuat sebuah interface Web browser
membutuhkan HTML dan mungkin Java applets atau JacaScript code. Menampilkan video mungkin
bisa mengandalkan pada Windows Media Player atau software seperti Adobe's Flash Player,
sementara untuk format dokumen dapat menggunakan Microsoft Word atau Adobe’s PDF atau
semacamnya. Tantangan untuk para developer sangatlah jelas yaitu, membuat sebuah user interface
yang koheren untuk berbagai macam client menggunakan teknologi yang beranekaragam tidaklah
mudah.

Tujuan utama dari Windows Presentation Foundation (WPF) adalah untuk menjawab tantangan ini.
Dengan menawarkan sebuah penyokong teknis yang konsisten untuk seluruh aspek user interface
ini, WPF membuat hidup menjadi lebih simpel bagi para developer. Dengan menggunakan
pendekatan yang modern, seperti video, animasi, grafik dua maupun tiga dimensi, dan berbagai
macam dokumen, WPF mampu memfasilitasi user dengan cara yang baru. Dan dengan menyediakan
sebuah pondasi yang kuat untuk desktop clients and browser clients, WPF membuatnya lebih mudah
untuk membuat kedua aplikasi tersebut.

Contoh dari interface dapat dilihat pada gambar 4, berisi gambar, live graphics, 3D views, dan masih
banyak lainnya, hal ini mengilustrasikan apa saja yang WPF sediakan. Dibandingkan dengan
membutuhkan developers dengan skill untuk bermacam-macam teknologi, sekarang user interface
seperti ini dapat dibuat dalam cara yang konsisten, yaitu menggunakan WPF.
Gambar 4 User Interface in WPF

Satu tantangan yang sudah lama dihadapi oleh pembuat user interface adalah dibutuhkan role yang
berbeda-beda untuk membuat interface yang efektif. Para pengembang software dibutuhkan untuk
membuat logika di belakang interface, tetapi jarang diantara mereka yang terbaik untuk membuat
interface yang bagus. Designers, spesialis terhadap interaksi manusia atau mesin, merupakan tipikial
yang lebih baik untuk dipilih sebagai role ini. Teknologi terdahulu dari Windows yaitu, Windows
Forms fokus sepenuhnya kepada developer. Tidak ada cara yang efektif untuk pada developers dan
designers bekerja sama. Untuk menjawab permasalahan ini, WPF mengandalkan pada eXtensible
Application Markup Language (XAML). Sebuah bahasa XML, XAML dapat menspesifikasi sebuah user
interface secara deklaratif, tidak dalam code-nya. Ini membuat lebih mudah untuk tools, untuk
membuat dan bekerja untuk menghasilkan sebuah spesifikasi interface berdasarkan pada
representasi visual yang telah dibuat oleh designer. Pada faktanya, Microsoft menyediakan produk
baru, Expression Blend untuk mengerjakan ini. Para designer akan dapat menggunakan tool ini untuk
membuat sebuah interface, kemudian memiliki XAML dari interface yang dihasilkan untuk mereka.
Developers meng-import XAML yang telah dibuat oleh designer kedalam Visual Studio, kemudian
membuat logika yang dibutuhkan untuk interface tersebut.

Ketika para developer membuat aplikasi stand-alone WPF, seseorang yang menjalankannya secara
langsung pada Windows, dapat mengakses apa saja yang WPF sediakan. Untuk membuat sebuah
client yang berjalan dalam sebuah Web browser, developer dapat membuat sebuah XAML Browser
application (XBAP). Dibuat pada pondasi yang sama sebagai aplikasi stand-alone WPF, XBAP dapat
menghadirkan style yang sama dari user interface didalam sebuah aplikasi browser yang dapat di
donwnload. Code yang sama dapat digunakan untuk ke dua jenis aplikasi tadi, tentunya dengan ini
para developer tidak perlu skill yang berbeda untuk desktop dan browser clients.

Aplikasi stand-alone dan XBAP dapat mengambil kelebihan dari grafik modern yang di-support oleh
WPF, termasuk kemampuan untuk menggunakan hardware acceleration, mendukung untuk vector
graphics, dan masih banyak lainnya. Dengan menyediakan support untuk grafik yang lebih powerful,
WPF membuat kemungkinan sebuah range dari pilihan visualisasi data untuk XML Paper
Specification (XPS), dimana mendefinisikan sebuah standard untuk melihat, mendistribusikan, dan
mencetak fixed-format documents.

User interface sangatlah kompleks dan bagian yang penting dalam aplikasi modern. Dengan WPF,
.NET Framework menyediakan solusi yang lebih lengkap dan konsisten untuk menjawab tantangan
yang ada pada interface. Tujuannya adalah membuat orang-orang yang membuat user interface
(baik designer dan developer) dapat melakukan pekerjaannya secara efektif.

Mengaplikasikan .NET Framework 3.0: Sebuah Skenario

Salah satu cara untuk memahami bagaimana sebuah kelompok dari suatu teknologi yang bekerja
bersama ialah dengan melihat contoh bagaimana mereka dapat digunakan. Coba bayangkan,
misalnya, sebuah aplikasi yang memperbolehkan konsumen dan agennya mengajukan permohonan
asuransi. Jika hal tersebut diimplementasikan dengan menggunakan .NET Framework 3.0, aplikasi
diatas mungkin saja terlihat seperti Gambar 5.




Gambar 5

Application's business logic, yang ditunjukkan pada bagian atas sebelah kiri diagram,
diimplementasikan menggunakan WF workflow. Menangani sebuah pengajuan pembuatan asuransi
merupakan sebuah multi-step process, termasuk penyesuaian pengajuan terhadap peraturan-
peraturan di organisasi, mungkin dengan mengecek kredit si pemohon, dan bahkan mungkin
mendapatkan persetujuan dari manajer. Workflow mengimplemen setiap tindakannya sebagai
sebuah aktivitas, mengandalkan software lainnya jika diperlukan. Untuk mengakses stored data
misalnya, aktivitas yang ada pada workflow menggunakan ADO.NET.

Perusahaan asuransi tersebut menyediakan call center, yaitu memperbolehkan customer-nya untuk
mengajukan permohonan asuransi melalui telepon. Client software digunakan oleh orang yang
bertugas di call center tersebut, yang ditunjukkan pada bagian atas sebelah kanan diagram,
diimplementasikan sebagai aplikasi stand-alone WPF atau aplikasi WPF yang berdiri sendiri. Client
tersebut berkomunikasi dengan application's business logic menggunakan WCF, menggunakan
binary protocol dengan yang dioptimalisasikan untuk komunikasi WCF-WCF. Seperti yang kita lihat di
gambar, pekerja yang bertugas di call center mengandalkan Windows CardSpace untuk memilih
identitas yang akan mereka gunakan pada saat pembukuan terhadap pengajuan yang bersangkutan.

Customer juga dapat mengajukan asuransi melalui Web, dan agen asuransi dapat menyerahkan
pengajuan asuransi tersebut pula. Untuk memperbolehkan hal ini, aplikasinya menggunakan
ASP.NET untuk berkomunikasi dengan Web browsers. Seperti yang telah digambarkan pada bagian
bawah sudut kiri diagram, customer yang hanya menggunakan Internet Explorer untuk mengakses
aplikasi tersebut melalui interface HTML biasa masih bisa menggunakan CardSpace untuk memilih
identitas yang ingin mereka tampilkan. Pihak ketiga juga dapat mengimplementasi sebuah
mekanisme pemilihan identitas untuk sistem operasi dan browser si pengguna lainnya, dengan
memperbolehkan extending identity metasystem khusus bagi pengguna non-Windows dan Web
browsers.

Agen asuransi yang mengakses aplikasi ini melalui internet memerlukan interface yang
menitikberatkan pada fungsionalitas. Maka dari itu, mereka dapat mengandalkan XBAP daripada
interface HTML yang simpel. Seperti yang digambarkan pada bagian tengah bawah diagram, aplikasi
tersebut memberikan customer peranan yang besar terhadap user interface yang fungsional asalkan
aplikasi desktop WPF digunakan pada call center. Keduanya dibuat dengan fondasi yang sama,
sehingga developer dari aplikasi tersebut dapat me-reuse code yang sama pada dua tipe client yang
berbeda. Sama seperti client, agen juga dapat menggunakan CardSpace untuk memilih identitas
yang ingin mereka tampilkan pada aplikasi tersebut.

Pada akhirnya, aplikasi ini perlu mengakses dan diakses oleh aplikasi lain. Jika menyetujui pengajuan
customer memerlukan pengecekan kredit misalnya, hal ini seharusnya dapat diselesaikan melalui
panggilan ke external service. Atau mungkin aplikasi tersebut menerima permintaan langsung dari
software lain, dimana external service dapat memintanya. Untuk kasus seperti ini, seperti pada
bagian bawah kanan dari gambar diatas, aplikasi mengandalkan WCF untuk berkomunikasi
menggunakan Web service standard. Apapun teknologi yang dipakai dalam membuat aplikasi ini,
kemampuan WCF untuk mendukung SOAP membuat interaksinya lebih menarik lagi.

Skenario ini mengilustrasikan bagaimana sebagian dari komponen dari .NET Framework 3.0 yang
paling penting mungkin saja digunakan dalam aplikasi tertentu. Terdapat beberapa opsi yang lebih
banyak lagi, maka dari itu jangan memandang contoh yang simpel ini sebagai ilustrasi yang lengkap
dari apa yang sudah teknologi tersebut berikan. Tetapi, adalah tujuannya untuk memberikan
gambaran yang jelas bagaimana bermacam-macam bagian dari .NET Framework 3.0 dapat
digunakan secara bersamaan untuk menyelesaikan real business problems.
Introducing Windows Communication Foundation


Perubahan menjadi service oriented pada komunikasi menandakan bagaimana aplikasi-aplikasi
berinteraksi. WCF secara eksplisit dirancang untuk men-support service-oriented applications. Pada
bagian ini akan menjelaskan aspek terpenting pada WCF, termasuk services dan clients,
communication options, dan support terhadap security, komunikasi yang ireliable, dan transactions.

Services dan Clients




Gambar 9

Dapat dilihat pada gambar 9, ide fundamental dari WCF yang sederhana adalah sebuah service yang
mengekspos sebuah interface yang dapat diakses oleh client. Interface tersebut dapat didefinisikan
dengan menggunakan Web Services Description Language (WSDL), kemudian dirubah menjadi code,
atau dapat didefinisikan secara langsung dalam bahasa pemrograman seperti C# atau Visual basic.
Untuk sebuah interface sederhana yang mengekspos sebuah insurance application service, dapat
dilihat seperti dibawah ini:

[ServiceContract]

interface IInsuranceApplication

{

[OperationContract]

int Submit(int policyType, string ApplicantName);



[OperationContract]

bool CheckStatus(int applicationNumber);



[OperationContract]

bool Cancel(int applicationNumber);
}

Pendefinisian dari interface yang dibuat dengan bahasa pemroraman C# ini ditandai dengan atribut
ServiceContract. Atribut ini mengindikasikan bahwa WCF dapat mengekspos method didalam
interface ini sebagai remotely-callable operations. Dimana method dari interface yang diekspos
bergantung kepada method tersebut ditandai dengan atribut OperationContract. Pada contoh
sederhana ini, setiap method ditandai dengan atribut ini, dan juga semua method akan bisa
diekspose untuk remote callers. Ini bukan kebutuhan, walaupun legal untuk meng-apply
OperationContract hanya ke beberapa dari method sebuah interface. Pilihan manapun yang diambil,
beberapa class dalam aplikasi harus mengimplementasi interface ini, menyediakan code yang aktual
untuk method dari interface. Setelah ini selesai, WCF secara otomatis membuat method yang
ditandai dengan OperationContract yang dapat diakses dari clients dari service ini.

Gambar 10 memberikan gambaran yang lebih detail tentang bagaimana sebenarnya sebuah service
dieskpose ke client nya. Dibandingkan dengan mengakses sebuah interface secara langsung, client
lebih baik connect ke sebuah spesifik endpoints. Sebuah service dapat mengekspos banyak
endpoints, yang membuat client yang berbeda-beda dapat mengakses service tersebut dengan
beberapa cara.




Gambar 10



Dari gambar diatas, setiap endpoint menspesifikasikan 3 hal:

   Sebuah contract menjelaskan operasi yang dapat dipanggil menggunakan endpoint tersebut.
    Contract dapat diidentifikasikan dengan hanya menggunakan nama dari interface yang
    mendefinisikan operasi ini, dimana dalam hal ini adalah Insurance Application.
   Binding mendefinisikan bagaimana operasi endpoint dapat dipanggil. Setiap binding
    mendefinisikan beberapa hal, termasuk protokol apa yang harus digunakan untuk memanggil
    operasi, jenis security apa yang harus digunakan, dan lainnya. WCF meliputi sebuah paket dari
    pre-defined bindings, seperti BasicHttpBinding yang ditunjukan disini, dan juga memungkinkan
    untuk mendefinisikan custom bindings. Karena sebuang single service dapat mengekspos
    banyak atau multiple endpoints, WCF juga dapat secara simultan dapat mengakses ke berbagai
    macam jenis client melewati protokol yang berbeda dan dengan security options yang berbeda.
   Sebuah address mengindikasikan dimana endpoints bisa ditemukan. Seperti yang terlihat pada
    gambar, address direpresentasikan sebagai URL.
Latihan 1 - Definisikan dan implementasikan kontrak untuk derivatives calculator service


Dalam menyediakan sebuah Windows Communication Foundation service (WCF), seorang
programmer selalu memulai dengan mendefinisikan kontrak. Pada tahap ini akan mempelajari
pendefinisian dan pengimplementasian kontrak untuk WCF service. Service tersebut akan
mengkalkulasikan nilai dari derivatives.
Derivative adalah sebuah entity finansial yang nilainya berasal dari entity lainnya. Contohnya adalah,
nilai dari saham Microsoft Corporation pada tanggal 11 Oktober 2005 adalah $24.30. Dilihat dari
jumlahnya, salah satunya mungkin saja menawarkan potongan harga dengan pilihan membeli 1000
saham dengan harga satuan $25 pada tanggal 11 Nopember 2005. Pilihan yang dimaksud, yang
disebut sebagai call, mungkin saja dibeli oleh seseorang yang mengantisipasi harga saham tersebut
akan meningkat diatas $25 pada tanggal 11 Nopember 2005 dan terjual oleh seseorang yang
mengantisipasi harga saham tersebut akan turun. Call merupakan derivative, karena nilainya
diturunkan dari nilai saham Microsoft Corporation.
Memberi harga sebuah derivative adalah sebuah pekerjaan yang cukup rumit. Walaupun disamping
itu nilai dari derivatives adalah merupakan masalah yang paling penting dalam mikroekonomi
modern. Pada contoh kasus diatas, terlihat jelas jumlah kuantitas dari saham, harga sekarang dan
harga sebelum dari saham Microsoft Corporation adalah faktor -faktor yang harus dipertimbangkan,
tetapi faktor lainnya dapat berasalkan pada analisis nilai dari kuantitas yang diduga berpengaruh
terhadap harga saham, seperti nilai dari berbagai macam saham pasar, atau bunga rata-rata dari the
U.S. Federal Reserve Bank. Pada umumnya harga dari derivative merupakan beberapa fungsi dari
satu atau lebih kuantitas, satu atau lebih nilai pasar, dan pengeluaran dari satu atau lebih fungsi
analitikal kuantitatif.



Langkah 1 – Membuat Project Derivatives Calculator Service
   1. Jalankan Visual Studio 2008 Express, dan buat project baru blank solution dengan nama
      DerivativesCalculator pada c:\Windows Communication Foundation\Labs\, seperti gambar 1.1
      dibawah.
Gambar 1.1            Membuat blank Visual Studio solution


2.   Tambahkan project C# Class Library ke solution, dengan nama DerivativesCalculatorService,
     seperti gambar 1.2 dibawah ini.




Gambar 1.2 Menambahkan sebuah Class Library project ke solution
Langkah 2 – Tambahkan reference ke Windows Communication Foundation ke project
             DerivativesCalculatorService
   1. Pilih Add reference ke System.ServiceModel .NET assembly, ke project
      DerivativesCalculatorService, seperti pada gambar 1.3, di bawah.




   Gambar 1.3 Menambahkan sebuah reference ke System.ServiceModel .NET assembly


Langkah 3 – Definisikan kontrak dimana Derivatives Calculator Service akan di ekspos
   2. Kontrak Windows Communication Foundation didefinisikan dengan :
        Menulis sebuah interface dengan bahasa pemrograman .NET,
        Menambahkan atribut ServiceContract ke interface untuk menjadikannya sebagai kontrak
         Windows Communication Foundation service,
        Menambahkan atribut OperationContract ke semua method dari interface yang
         seharusnya termasuk kedalam kontrak.

     Lalu rename nama kelas, Class1.cs pada project DerivativesCalculatorService, menjadi
     IDerivativesCalculator.cs, dan ubah isinya seperti dibawah ini:


     using System;
     using System.Collections.Generic;
     using System.ServiceModel;
     using System.Text;

     namespace DerivativesCalculatorService
     {
       [ServiceContract]
          public interface IDerivativesCalculator
          {
            [OperationContract]
            Decimal CalculateDerivative(int days, string[] symbols, string[] functions);
          }
      }


Langkah 4 – Implementasikan kontrak dimana Derivatives Calculator Service akan di ekspos
   3. Setelah kontrak dari Windows Communication Foundation telah didefinisikan, langkah
      berikutnya adalah mengimplementasikannya. Hal itu dapat diselesaikan hanya dengan
      membuat kelas yang mengimplemen interface dimana kontrak tersebut didefinisikan. Dalam
      pemilihan kata pada Windows Communication Foundation, sebuah kelas yang mengimplemen
      kontrak    Windows      Communication     Foundation      merupakan       service  type.

      Kemudian buat sebuah service type untuk kontrak IderivatesCalculator dengan menambahkan
      sebuah kelas dengan nama Calculator.cs ke project, dan modifikasi isinya seperti dibawah ini:


      using System;
      using System.Collections.Generic;
      using System.ServiceModel;
      using System.Text;

      namespace DerivativesCalculatorService
      {
        public class Calculator: IDerivativesCalculator
        {
          #region IDerivativesCalculator Members

              decimal IDerivativesCalculator.CalculateDerivative(int days, string[] symbols, string[] functions)
              {
                return (decimal)(System.DateTime.Now.Millisecond);
              }

              #endregion
          }
      }




Langkah 5 – Build project
     Kemudian build project DerivativesCalculatorService dengan menekan tombol F5. Jika tidak
     ada error, maka implementasi kontrak dari Derivatives Calculator service sudah selesai.


Latihan 2 - Tempatkan Service pada sebuah program .NET yang dapat di jalankan


Pada latihan ini, kita akan menempatkan Derivatives Calculator Service yang sudah didefinisikan dan
sudah diimplementasikan sebelumnya pada latihan 1. Lebih khususnya, kita akan menempatkan
service pada .NET console application.

Langkah 1 – Tambahkan sebuah C# Console Application Project ke Solution

Langkah 2 – Tambahkan sebuah Reference Windows Communication Foundation ke Host Project
     Tambahkan sebuah reference atau Add a Reference ke System.ServiceModel .NET assembly,
     pada Host project.


Langkah 3 – Tambahkan Sebuah Reference System.Configuration .NET Assembly ke Host Project

Langkah 4 – Tambahkan Sebuah Reference Derivatives Calculator Service ke Host Project
     Tambahkan sebuah reference ke project DerivatesCalculatorService ke the Host project,
     seperti gambar 2.1, di bawah ini.




   Gambar 2.1 Menambahkan sebuah reference ke proyek DerivativesCalculatorService



Langkah 5 – Buat code Windows Communication Foundation yang dibutuhkan untuk menyediakan
            host untuk Derivatives Calculator service
   4. Ubah kelas Program.cs pada Host project seperti dibawah ini:


       using System;
       using System.Collections.Generic;
       using System.ServiceModel;
       using System.Text;
 using System.Configuration;
 using DerivativesCalculatorService;

 namespace Host
 {
   public class Program
   {
     public static void Main(string[] args)
     {
       Type serviceType = typeof(Calculator);

             string httpBaseAddress =
                ConfigurationManager.AppSettings["HTTPBaseAddress"];
             string tcpBaseAddress =
                ConfigurationManager.AppSettings["TCPBaseAddress"];
             Uri httpBaseAddressUri = new Uri(httpBaseAddress);
             Uri tcpBaseAddressUri = new Uri(tcpBaseAddress);
             Uri[] baseAdresses = new Uri[] {
                httpBaseAddressUri,
                tcpBaseAddressUri};

             using(ServiceHost host = new ServiceHost(
               serviceType,
               baseAdresses))
             {
               host.Open();

                 Console.WriteLine(
                    "The derivatives calculator service is available."
                 );
                 Console.ReadKey();

                 host.Close();
             }
         }
     }
 }


Code yang telah ditambahkan diatas, mendapatkan base addresses untuk protokol HTTP dan
TCP dari file konfigurasi aplikasi. Base addresses tersebut valid terhadap HTTP addresses dan
TCP addresses. Alamat atau addresses dari Windows Communication Foundation endpoints
relatif terhadap host’s base addresses. Sisa dari code diatas membuat sebuah instance dari
kelas ServiceHost pada Windows Communication Foundation, dan menspesifikasikan bahwa
sisa code tersebut digunakan untuk host instances dari Calculator service type yang sudah
didefinisikan sebelumnya, pada addresses relatif terhadap base addresses yang didapatkan
dari file konfigurasi. Pemanggilan method Open() memulai host untuk mendengarkan pesan
atau message secara langsung pada Calculator service type. Lebih tepatnya, host
     mendengarkan pesan-pesan tersebut yang sudah didefinisikan oleh informasi di dalam file
     konfigurasi aplikasi yang akan kita sediakan sekarang.

Langkah 6 – Mengkonfigurasikan Service
   5. Tambahkan file aplikasi konfigurasi dengan nama, app.config, ke Host project dalam
      DerivativesCalculator solution.
   6. Modifikasi isinya seperti dibawah ini:



      <?xml version="1.0" encoding="utf-8" ?>
      <configuration>
      <appSettings>
               <add key="HTTPBaseAddress" value="http://localhost:8000/Derivatives/"/>
               <add key="TCPBaseAddress" value="net.tcp://localhost:8010/Derivatives/"/>
      </appSettings>
      <system.serviceModel>
               <services>
                        <service name="DerivativesCalculatorService.Calculator">
                                 <endpoint
                        address="CalculatorService"
                        binding="basicHttpBinding"
               contract="DerivativesCalculatorService.IDerivativesCalculator"/>
                        </service>
               </services>
      </system.serviceModel>
      </configuration>


   Code yang kita tambahkan ke appSettings section, berguna untuk mendapatkan base addresses
   untuk protocol HTTP dan TCP. Code yang ditambahkan pada system.serviceModel section lebih
   penting dibandingkan pada appSettings section, karena pada section ini didesain secara spesifik
   untuk mengkonfigurasikan Windows Communication Foundation endpoints, dan dapat kita lihat,
   code yang kita tambahkan pada section tersebut mendefinisikan address, binding, dan kontrak
   yang membentuk seperti sebuah endpoint. Secara spesifik, kita telah menambahkan sebuah
   elemen service untuk derivates calculator service type yang kita buat.


   Elemen endpoint mendefinisikan sebuah endpoint untuk service. Atribut address dari elemen
   endpoint mendefinisikan sebuah address yang akan berhubungan dengan salah satu dari base
   addresses. Nilai yang diberikan ke binding attribute dari elemen endpoint, yaitu
   basicHttpBinding, merujuk kepada pre-defined set dari protokol untuk komunikasi. Windows
   Communication Foundation mendefinisikan sebuah angka seperti pre-defined sets dari protokol-
   protokol, dan kita dapat mendefinisikan set kita sendiri, yang dimana mungkin meliputi protokol-
   protokol yang untuk dapat mengimplemennya kita harus meng-extend Windows Communication
   Foundation. Karena BasicHttpBinding yang kita pilih menggunakan protokol HTTP untuk
   memindahkan pesan atau message, address yang kita sediakan untuk endpoint akan
   berhubungan dengan HTTP base address, jadi absolute address untuk endpoint akan menjadi
   http://localhost:8000/Derivates/CalculatorService. Nilai dari atribut contract merujuk kepada
   kontrak Windows Communication Foundation yang service type-nya kita implementasikan.
Langkah 7 – Tes Service
   7. Build DerivativesCalculator solution atau tekan F5.
   8. Lalu Start a new instance dari Host project.
   9. Pilih Run dari Start menu Windows, dan masukan,



          http://localhost:8000/Derivatives/

          Kemudian Internet Explorer seharusnya terbuka, dan menampilkan sebuah halaman seperti
          gambar 2.2 dibawah ini:




    Gambar 2.2 Halaman informasi Windows Communication Foundation Service


    10.   Klik link http://localhost:8000/Derivatives/?wsd yang berada di dekat sisi atas halaman dan
          memeriksa halaman dari WSDL yang muncul.
    11.   Tutup aplikasi Internet Explorer.
    12.   Tekan tombol apapun di keyboard pada console application window untuk mematikan
          Derivatives Calculator Service.

Latihan 3 – Memakai Derivatives Calculator Service


Pada tahap ini, kita akan membuat sebuah client yang akan menggunakan Derivatives Calculator
Service yang sudah kita buat pada latihan-latihan sebelumnya. Untuk melakukannya, kita akan
mengandalkan sebuah tool, yaitu SvcUtil.exe, yang telah disediakan oleh Windows Communication
Foundation untuk menghasilkan client proxies dan mengkonfigurasi file-file dari metadata sebuah
service.

Langkah 1 – Tambahkan sebuah C# Console Application Project untuk ke dua kalinya ke Solution
Tambahkan sebuah C# Console Application project dengan nama Client, ke DerivativesCalculator
solution.


Langkah 2 – Men-generate Typed Proxy dan Konfigurasi File untuk Aplikasi Client
   13. Start new instance dari Host project.
   14. Klik Start->Programs->Microsoft Windows SDK->Cmd Shell command prompt.
   15. Ketik,



          cd c:\Windows Communication Foundation\Labs\DerivativesCalculator

      pada command prompt.

    16.   Kemudian masukan,


          svcutil http://localhost:8000/Derivatives/ /out:Client.cs /config:app.config



    17.   Pilih Debug and Stop Debugging dari menu yang ada pada Visual Studio.


Langkah 3 – Tambahkan Typed Proxy dan File Konfigurasi ke Aplikasi Client
Tambahkan file, Client.cs dan app.config, pada folder, c:\Windows Communication
Foundation\Labs\DerivativesCalculator, ke Client project dari DerivativesCalculator solution. (Pilih
Add Existing Item dari context menu pada Client project)


Langkah 4 – Tambahkan Reference ke Windows Communication Foundation ke Client Project
Kemudian tambahkan reference atau Add a reference ke System.ServiceModel .NET assembly, ke
Client project.


Langkah 5 – Buat dan Konfigurasi Client untuk Memakai DerivativesCalculator Service
   18. Modifikasi file app.config pada Client project dari DerivativesCalculator solution menjadi:


           <?xml version="1.0" encoding="utf-8"?>
           <configuration>
             <system.serviceModel>
               <bindings>
                 <basicHttpBinding>
                   <binding name="BasicHttpBinding_IDerivativesCalculator" bypassProxyOnLocal="false"
                      hostNameComparisonMode="StrongWildcard" maxBufferSize="65536"
                  maxBufferPoolSize="524288" maxReceivedMessageSize="65536"
                  messageEncoding="Text" textEncoding="utf-8" transferMode="Buffered"
                  useDefaultWebProxy="true">
                  <readerQuotas maxDepth="2147483647" maxStringContentLength="2147483647"
                     maxArrayLength="2147483647" maxBytesPerRead="2147483647"
                    maxNameTableCharCount="2147483647" />
                  <security mode="None">
                     <transport clientCredentialType="None" proxyCredentialType="None"
                       realm="" />
                     <message clientCredentialType="UserName" algorithmSuite="Default" />
                  </security>
                </binding>
             </basicHttpBinding>
           </bindings>
           <client>
             <endpoint address="http://localhost:8000/Derivatives/CalculatorService"
                binding="basicHttpBinding"
       bindingConfiguration="BasicHttpBinding_IDerivativesCalculator"
                contract="IDerivativesCalculator"
                name="DerivativesCalculatorConfiguration" />
           </client>
         </system.serviceModel>
       </configuration>


      Modifikasi    ini    membuat       kita   mudah      menyediakan  nama,     label,  dan
      DerivativesCalculatorConfiguration untuk mengkonfigurasi client yang secara otomatis di-
      generate oleh tool. Kita akan menggunakan nama tersebut untuk merujuk kepada
      konfigurasi dari code yang akan kita buat berikutnya.



19.   Ubah code pada file Program.cs pada Client project dari the DerivativesCalculator solution
      seperti dibawah ini:


       using System;
       using System.Collections.Generic;
       using System.Text;

       namespace Client
       {
         class Program
         {
            static void Main(string[] args)
            {
              Console.WriteLine("Press any key when the service is ready.");
              Console.ReadKey();
                 using(DerivativesCalculatorProxy proxy = new
           DerivativesCalculatorProxy("DerivativesCalculatorConfiguration"))
                 {
                    decimal result = proxy.CalculateDerivative(3,new string[]{"MSFT"},new string[]{});
                    Console.WriteLine("Result: {0}",result);

                           Console.WriteLine("Press any key to exit.");
                           Console.ReadKey();
                       }
                   }
               }
           }


          Code ini membuat sebuah instance dari kelas proxy yang di-generate oleh tool SvcUtil.exe,
          dan memberitahu proxy tentang service endpoint dengan merujuk pada konfigurasi
          informasi yang telah kita namakan pada langkah sebelumnya. Kemudian kita menggunakan
          proxy untuk meng-invoke operasi pada service.



Langkah 5 – Mendapatkan Client dalam Menggunakan DerivativesCalculator Service
   20. Modifikasi Startup Project properties dari DerivativesCalculator solution seperti yang terlihat
       pada gambar 3.1 dibawah ini, sehingga client dan server berjalan ketika solution juga dimulai
       atau dijalankan. Kemudian klik kanan pada solution di solution explorer dan pilih “Set startup
       projects”:




Gambar 3.1                        Properti Startup Project dari DerivativesCalculator Solution
    21.   Pilih Debug/Start Debugging pada menu Visual Studio.
    22.   Ketika kita melihat aktifitas pada console untuk aplikasi host, masukan atau ketik apa saja ke
          dalam console untuk aplikasi Client. Kita harus melihat client mendapatkan sebuah estimasi
          nilai derivative dari Derivatives Calculator service, seperti yang terlihat pada gambar 3.2
          dibawah ini. Perhatikan bahwa nilai yang terlihat pada aplikasi client dapat berbeda-beda
          dari nilai yang tampil pada gambar 3.2, tergantung kepada variasi pada kondisi pasar
          sewaktu-waktu.




    Gambar 3.2            Menggunakan Derivatives Calculator Service



    23.   Pada Visual Studio, pilih Debug|Stop Debugging pada menu.



Latihan 4 – Host Service pada IIS

Pada latihan ini, kita akan meng-host Derivatives Calculator Service yang sebelumnya sudah di-host
pada .NET. Meng-host menggunakan IIS lebih baik, karena IIS menyediakan efisiensi, keamanan, dan
powerfull host untuk Windows Communication Foundation Services kita.



Langkah 1 – Mengkonfigurasi DerivativesCalculatorService project untuk meng-compile kedalam
             direktori \bin
Ubah build properties dari DerivativesCalculatorService project sehingga path dari output adalah
sub-direktori bin dari direktori project. Seperti kasus pada aplikasi ASP.NET, IIS terlihat untuk code
yang dapat dieksekusi di dalam sub-direktori bin pada direktori aplikasi by default.
   Gambar 4.1           Mengubah Build Properties dari DerivativesCalculatorService Project



Langkah 2 – Tambahkan sebuah file .SVC ke DerivativesCalculatorService Project
   24. Tambahkan sebuah text file dengan nama Service.svc, ke DerivativesCalculatorService
       project.
   25. Tambahkan isi file sehingga merujuk kepada service type kita, sepeti dibawah ini:




         <%@ServiceHost Service="DerivativesCalculatorService.Calculator" %>



   Seperti yang akan kita lihat beberapa saat lagi, aplikasi client akan dimodifikasi untuk
   menggunakan URL dari file Service.svc sebagai address untuk aplikasi. Ketika sebuah pesan atau
   message yang datang secara langsung pada address tersebut, IIS mengidentifikasi service type
   untuk pesan yang dikehendaki berdasarkan pada informasi yang ada pada file .svc.



Langkah 3 – Buat sebuah Virtual Directory Pointing pada Project Directory in IIS
   26. Pilih Administrative Tools | Internet Information Services (IIS) Manager pada menu Start
       Windows Start.
   27. Expand node pada tree control yang terletak di sebelah kiri sampai node dengan nama
       Default Web Site terlihat.
   28. Klik kanan pada node tersebut, lalu pilih New|Virtual Directory pada isi menu yang muncul.
   29.   Pada Virtual Directory Creation Wizard, masukan, DerivativesCalculator pada Virtual
         Directory atau screen.
   30.   Masukan, c:\Windows Communication
         Foundation\Labs\DerivativesCalculator\DerivativesCalculatorService sebagai path Web Site
         Content Directory screen pada wizard.
   31.   Pilih Read, dan Run Scripts permissions pada Virtual Directory Access Permissions screen
         wizard, lalu klik pada tombol next dan ikuti instruksi untuk keluar dari wizard.

Langkah 4 – Konfigurasi Service
   Konfigurasi pada service yang sudah di-host dengan IIS dapat identik dengan konfigurasi yang
   digunakan untuk meng-host service dengan sebuah custom .NET yang dapat dieksekusi.
   Bagaimanapun juga, address untuk service endpoint dapat dikosongkan untuk menandakan
   bahwa address dari endpoint merupakan address dari file .svc.



   32.   Tambahkan sebuah konfigurasi web baru dengan nama, Web.config, ke
         DerivativesCalculatorService project pada DerivativesCalculator solution.
   33.   Copy app.config dari host project, lalu ubah namanya menjadi web.config dan beri nilai null
         pada atribut address:


          <?xml version="1.0" encoding="utf-8" ?>
          <configuration>
                 <system.serviceModel>
                          <services>
                                   <service name="DerivativesCalculatorService.Calculator">
                                            <endpoint
                                                    address=""
                                                    binding="basicHttpBinding"
          contract="DerivativesCalculatorService.IDerivativesCalculator"/>
                                   </service>
                          </services>
                 </system.serviceModel>
          </configuration>




Langkah 5 – Memastikan berjalan atau tidaknya Service
   34. Build DerivativesCalculator solution atau tekan F5.
   35. Pilih Run pada menu Start Windows, dan masukan,


         http://localhost/DerivativesCalculator/Service.svc
         Internet Explorer harus menampilkan halaman yang mirip dengan gambar 2.2, diatas.

Langkah 6 – Konfigurasi ulang Client untuk memakai Service Hosted pada IIS
   36. Modifikasi file app.config di Client project pada DerivativesCalculator untuk mengubah
       address di endpoint untuk merujuk kepada file .svc, seperti yang ditunjukkan di bawah ini:
          <?xml version="1.0" encoding="utf-8"?>
          <configuration>
            <system.serviceModel>
              <bindings>
                <basicHttpBinding>
                   <binding name="BasicHttpBinding_IDerivativesCalculator" bypassProxyOnLocal="false"
                     hostNameComparisonMode="StrongWildcard" maxBufferSize="65536"
                     maxBufferPoolSize="524288" maxReceivedMessageSize="65536"
                     messageEncoding="Text" textEncoding="utf-8" transferMode="Buffered"
                     useDefaultWebProxy="true">
                     <readerQuotas maxDepth="2147483647" maxStringContentLength="2147483647"
                        maxArrayLength="2147483647" maxBytesPerRead="2147483647"
          maxNameTableCharCount="2147483647" />
                     <security mode="None">
                        <transport clientCredentialType="None" proxyCredentialType="None"
                          realm="" />
                        <message clientCredentialType="UserName" algorithmSuite="Default" />
                     </security>
                   </binding>
                </basicHttpBinding>
              </bindings>
              <client>
          <endpoint address="http://localhost/DerivativesCalculator/Service.svc"
                   binding="basicHttpBinding"
          bindingConfiguration="BasicHttpBinding_IDerivativesCalculator"
                   contract="IDerivativesCalculator" name="DerivativesCalculatorConfiguration" />
              </client>
            </system.serviceModel>
          </configuration>


   37.   Build DerivativesCalculator solution atau tekan F5.
   38.   Start an instance pada Client yang dapat dieksekusi, dan tekan tombol apapun pada
         keyboard ke dalam console untuk aplikasi Client. Kita harus melihat client mendapatkan nilai
         derivative dari Derivatives Calculator service yang di-host pada IIS, seperti yang ada pada
         gambar 3.2, diatas. Perhatikan, sekali lagi, bahwa nilai yang terlihat pada console aplikasi
         Client dapat berubah-ubah dari nilai yang muncul pada gambar 3.2, tergantung variasi pada
         kondisi pasar sewaktu-waktu.
   39.   Tutup aplikasi Client yang tereksekusi.



Latihan 5 – Mengamankan service
   Pada latihan ini, kita akan membuktikan pada diri kita sendiri bahwa komunikasi dengan
   Derivatives Calculator Service tidak selalu terjaga konfidensialnya, dan kita akan memodifikasi
   binding untuk service sehingga komunikasi dengan service tetap terjaga konfidensialnya.
Langkah 1 – Buktikan bahwa komunikasi dengan Derivatives Calculator Service tidak terjaga
            konfidensialnya
  40. Buat folder, c:\logs, jika belum dibuat sebelumnya. Jika sudah ada, hapus isinya. Modifikasi file
      Web.config pada DerivativesCalculatorService project (perhatikan bahwa kita mungkin saja
      mendapatkan skema validasi error pada “source” elemen dan hal ini diharapkan) :


           <?xml version="1.0" encoding="utf-8" ?>
           <configuration>
                  <system.diagnostics>
                           <sources>
                                    <source name="System.ServiceModel.MessageLogging"
           switchValue="Verbose">
                                             <listeners>
                                                      <add name="xml"
           type="System.Diagnostics.XmlWriterTraceListener" initializeData="c:\logs\message.log" />
                                             </listeners>
                                    </source>
                           </sources>
                           <trace autoflush="true" />
                  </system.diagnostics>
                  <system.serviceModel>
                           <diagnostics>
                                    <messageLogging logEntireMessage="true"
                          maxMessagesToLog="300"
                          logMessagesAtServiceLevel="false"
                          logMalformedMessages="true"
                          logMessagesAtTransportLevel="true" />
                           </diagnostics>
                           <services>
                                    <service name="DerivativesCalculatorService.Calculator">
                                             <endpoint address=""
                                                              binding="basicHttpBinding"

           contract="DerivativesCalculatorService.IDerivativesCalculator"/>
                                   </service>
                          </services>
                  </system.serviceModel>
           </configuration>


    41.   Build DerivativesCalculator solution atau tekan F5.
    42.   Start an instance pada Client yang dapat dieksekusi, dan tekan tombol apapun pada
          keyboard ke dalam console untuk aplikasi Client. Kita harus melihat client mendapatkan nilai
          derivative dari Derivatives Calculator service yang di-host pada IIS, seperti yang ada pada
          gambar 3.2, diatas.
    43.   Tutup aplikasi Client yang tereksekusi.
   44.   Buka file, c:\logs\Message.log, pada Notepad. Cari string, MSFT. Kita akan menemukannya,
         karena ia merupakan stock symbol termasuk client’s message terhadap service, dan
         komunikasi dengan Derivatives Calculator service tidak selalu terjaga konfidensialnya.

Langkah 2 – Ubah Binding pada Derivatives Calculator Service sehingga komunikasi dengan Service
            tetap terjaga konfidesialnya


  45.   Buat modifikasi terhadap file Web.config yang sudah ditandai pada
        DerivativesCalculatorService project:


          <?xml version="1.0" encoding="utf-8" ?>
          <configuration>
                 <system.diagnostics>
                          <sources>
                                   <source name="System.ServiceModel.MessageLogging"
          switchValue="Verbose">
                                            <listeners>
                                                     <add name="xml"
          type="System.Diagnostics.XmlWriterTraceListener" initializeData="c:\logs\message.log" />
                                            </listeners>
                                   </source>
                          </sources>
                          <trace autoflush="true" />
                 </system.diagnostics>
                 <system.serviceModel>
                          <diagnostics>
                                   <messageLogging logEntireMessage="true"
                         maxMessagesToLog="300"
                         logMessagesAtServiceLevel="false"
                         logMalformedMessages="true"
                         logMessagesAtTransportLevel="true" />
                          </diagnostics>
                          <services>
                                   <service
          type="DerivativesCalculatorService.Calculator,DerivativesCalculatorService">
                                            <endpoint        address=""
                                                             binding="wsHttpBinding"
          contract="DerivativesCalculatorService.IDerivativesCalculator,DerivativesCalculatorService"/>
                                   </service>
                          </services>
                 </system.serviceModel>
          </configuration>




   46.   Ubah file app.config pada Client project sehingga terlihat seperti di bawah ini:
       <?xml version="1.0" encoding="utf-8"?>
       <configuration>
         <system.serviceModel>
           <bindings>
             <basicHttpBinding>
                <binding name="BasicHttpBinding_IDerivativesCalculator" bypassProxyOnLocal="false"
                  hostNameComparisonMode="StrongWildcard" maxBufferSize="65536"
                  maxBufferPoolSize="524288" maxReceivedMessageSize="65536"
                  messageEncoding="Text" textEncoding="utf-8" transferMode="Buffered"
                  useDefaultWebProxy="true">
                  <readerQuotas maxDepth="2147483647" maxStringContentLength="2147483647"
                     maxArrayLength="2147483647" maxBytesPerRead="2147483647"
       maxNameTableCharCount="2147483647" />
                  <security mode="None">
                     <transport clientCredentialType="None" proxyCredentialType="None"
                       realm="" />
                     <message clientCredentialType="UserName" algorithmSuite="Default" />
                  </security>
                </binding>
             </basicHttpBinding>
           </bindings>
           <client>
       <!—remove bindingConfiguration attribute -->
             <endpoint address="http://localhost/DerivativesCalculator/Service.svc"
                binding="wsHttpBinding"
                contract="IDerivativesCalculator" name="DerivativesCalculatorConfiguration" />
           </client>
         </system.serviceModel>
       </configuration>


47.   Build DerivativesCalculator solution atau tekan F5.
48.   Buat folder, c:\logs, jika belum dibuat sebelumnya. Jika sudah ada, hapus isinya
49.   Start an instance pada Client yang dapat dieksekusi, dan tekan tombol apapun pada
      keyboard ke dalam console untuk aplikasi Client. Kita harus melihat client mendapatkan nilai
      derivative dari Derivatives Calculator service yang di-host pada IIS, seperti yang ada pada
      gambar 3.2, diatas.
50.   Buka      program        svcTraceViewer.exe          pada     C:\Program       Files\Microsoft
      SDKs\Windows\v1.0\Bin
51.   Buka file, c:\logs\Message.log, pada Service Trace Viewer. Cari pesan untuk string, MSFT.
      Kita tidak akan menemukannya, karena sekarang service sudah dikonfigurasikan untuk
      mengenkripsi pesan yang masuk ataupun keluar, agar isinya tetap terjaga konfidensial.
Kesimpulan

Pada Hand on Lab ini kita dapat mempelajari hal-hal seperti dibawah ini.


        Membuat dan mengimplementasikan contract untuk sebuah derivatives
         calculator service
        Meng-host service pada .NET executable
        Menggunakan derivatives calculator service
        Meng-host service pada IIS
        Mengamankan service


Kita telah menggunakan WCF untuk menyediakan dan menggunakan sebuah service yang
sederhana. Kita dapat melihat fleksibilitas dari pilihan untuk meng-host services, dengan services
yang bisa di-host pada semua .NET executable sebaik jika menggunakan IIS. Kita juga dapat melihat
bagaimana address dan bindings dari sebuah service dapat digantikan secara independen pada code
dalam sebuah service, untuk mengubah lokasi dari sebuah service, dan juga bagaimana
berkomunikasi.
Create HelloWorld in XAML with Visual C# 2008 Express


Tujuan dari Hand on Lab kali ini adalah mendemonstrasikan integrasi dari sistem rendering yang
dimiliki oleh Windows Presentation Foundation, atau menunjukan betapa powerfull-nya XAML. Kita
akan membuat 2D content, menganimasikannya, menambahkan video, dan yang terakhir
memindahkannya ke sebuah permukaan 3D.



        Membuat 2D content yang statis
        Menambahkan animasi dan media

        Menambahkan 3D



Latihan 1 – Membuat 2D content yang statis

Pada latihan kali ini, kita akan menggambar dua buah lingkaran dan beberapa text. Kita akan belajar
tentang bagaimana membuat outline dan shape dengan warna solid, gradient, dan visual objek. Kita
juga akan belajar menggunakan text sebagai background. Langkah pertama kita adalah membuat
sebuah lingkaran. Untuk mengambar sebuah lingkaran, kita harus membuat objek elipse dan men-
set properti width serta height menjadi sama sehingga membentuk sebuah lingkaran.

Langkah 1 – Membuat sebuah lingkaran
   1. Jalankan Visual Studio 2008 Express: dari Start menu, pilih All Programs > Microsoft Visual
       C# 2008 Express.
   2. Dari main menu, pilih File > New Project.




   3. Pilih WPF Application, kemudian beri nama misalkan HelloWorld.
4. Lihat Window1.xaml, kemudian tambahkan tag <canvas> dan </canvas> di dalam tag
   <grid> dan </grid>, seperti pada potongan code dibawah ini.
5. Ubah height dan width pada property Window menjadi 600 dan 600.
6. Pastikan bahwa Canvas berada didalam tag Window, tetapi Canvas –nya masih kosong:

     <Window x:Class="HelloWorld.Window1"
       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
       Title="RichContent" Height="600" Width="600"
       >
      <grid>
      <Canvas>
      </Canvas>
      </grid>
     </Window>



7. Buat sebuah lingkaran. Kita melakukan ini dengan membuat sebuah objek elipse dan
   memberikannya height dan width yang sama, sehingga membentuk sebuah lingkaran. Untuk
   membuat elipse visible, lakukan setting pada Stroke dan StrokeThickness. Kemudian
   jalankan aplikasi dengan menekan tombol F5. Elipse merupakan salah satu yang dapat
   digunakan untuk menggambar objek 2D, disamping itu kita dapat menggunakan line,
   polygon, rectangle, atau path.


     <Window x:Class="HelloWorld.Window1"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      Title="RichContent" Height="600" Width="600"
      >

      <Canvas>
            <Ellipse Width="300" Height="300" Stroke="Purple" StrokeThickness="20">
            </Ellipse>
      </Canvas>

     </Window>
   Gambar 1.1: Sebuah lingkaran dengan warna ungu
   Ketika kita men-set property Stroke dari elipse menjadi "Purple", kita juga dapat
   menggunakan syntax lain untuk men-set warna dari elipse menjadi “Purple”, yaitu dengan
   SolidColorBrush. Dapat dilihat dari potongan code dibawah ini:


      <Ellipse Width="300" Height="300" StrokeThickness="20">
       <Ellipse.Stroke>
        <SolidColorBrush Color="Purple" />
       </Ellipse.Stroke>
      </Ellipse>


   Pada WPF, sebuah Brush dapat digunakan untuk mewarnai sebuah area pada screen.
   SolidColorBrush dapat mewarnai sebuah area dengan warna solid. Tipe lain dari brush
   adalah LinearGradientBrush, RadialGradientBrush, ImageBrush, DrawingBrush, dan
   VisualBrush. Kita akan menggunakan LinearGradientBrush untuk langkah selanjutnya untuk
   mewarnai interior dari lingkaran.

8. Gunakan LinearGradientBrush untuk mewarnai interior lingkaran dengan sebuah linear
   gradient dari kuning menjadi merah. LinearGradientBrush digambar sepanjang garis. Start
   point dari garis dan end point-nya berdasarkan oleh property Start point dan end point dari
   LinearGradientBrush.
   Properti start point dan end point dari LinearGradientBrush mendefinisikan gradient axis,
   garis yang mencampurkan gradient pada warnanya. Jika kita tidak menentukan Start point
   dan end point, maka secara default akan menjadi (0,0) dan (1,1), dimana membuat sebuah
   gradient diagonal yang start dari pojok kiri atas dari area yang sedang diwarnai dan meng-
   extend ke pojok kanan bawah.
Kita gunakan objek GradientStop untuk menentukan warna yang akan digradasikan. Setiap
gradient stop digunakan untuk menetapkan warna dan posisi dari warna sepanjang gradient
axis. Kita buat gradient stop yang pertama berwarna kuning dan set property Offset menjadi
0, dimana menempatkan gradient stop pada StartPoint gradient, (0,0). Buat gradient stop
yang kedua berwarna merah dan set property Offset menjadi 1, dimana menempatkan
gradient stop pada EndPoint gradient, (1,1). Diantara dua point warna merupakan
interpolasi linear. Setelah kita mengubah ini, jalankan aplikasi lagi dengan menekan tombol
F5.

 <Ellipse Width="300" Height="300"
  Stroke="Purple" StrokeThickness="20">

  <Ellipse.Fill>
   <LinearGradientBrush>
    <LinearGradientBrush.GradientStops>
      <GradientStop Offset="0" Color="Yellow" />
      <GradientStop Offset="1" Color="Red" />
    </LinearGradientBrush.GradientStops>
   </LinearGradientBrush>
  </Ellipse.Fill>

 </Ellipse>




Gambar 1.2: lingkaran dari langkah sebelumnya, sekarang ditambahkan dengan gradient fill
Karena kita tidak menspesifikasikan StartPoint atau EndPoint, maka LinearGradientBrush
membuat diagonal gradient. Kita bisa mengubah StartPoint atau EndPoint sesuka hati kita,
begitu juga dengan nilai dari Offset dan warna pada objek GradientStop. Kita juga dapat
menambahkan tambahan gradient stops.
9.   Kita dapat memberikan dashed outline pada lingkaran dengan men-set property
     StrokeDashArray menjadi “0.5 2”.


      <Ellipse Width="300" Height="300"
       Stroke="Purple" StrokeThickness="20"
       StrokeDashArray="0.5,2">




     Gambar 1.3: Lingkaran setelah diberi dash outline


     Setiap nilai atau value dari StrokeDashArray akan men-set panjang dari dash, tergantung
     dari StrokeThickness. Dengan code (StrokeDashArray=“0.5,2"), kita membuat sebuah pola
     dash yang panjangnya 50% dari StrokeThickness diikuti dengan sebuah space sepanjang
     StrokeThickness. Untuk lebih jelasnya kita dapat mencobanya dengan nilai StrokeDashArray
     yang berbeda-beda, sehingga kita paham dalam menggunakannya.

10. Kemudian kita dapat membuat dash tersebut memiliki sudut yang rounded (tidak lancip)
    dengan men-set StrokeDashCap menjadi Round.


      <Ellipse Width="300" Height="300"
       Stroke="Purple" StrokeThickness="20"
       StrokeDashArray="0.5,2" StrokeDashCap="Round">
    Gambar 1.4: Lingkaran dengan rounded dash
    Bentuk dash lainnya dapat berupa Flat, Square, dan Triangle.

11. Gantikan warna ungu pada lingkaran dengan sebuah gradient linear yang warnanya transisi
    dari hitam ke putih. Pertama, hilangkan property Stroke dari tag elipse. Kemudian
    tambahkan code XAML dibawah ini kedalam tag elipse.


     <Window x:Class="HelloWorld.Window1"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      Title="RichContent" Height="600" Width="600"
      >

      <Canvas>

       <Ellipse Width="300" Height="300"
              StrokeThickness="20"
              StrokeDashArray="0.5,2" StrokeDashCap="Round">
        <Ellipse.Fill>
         <LinearGradientBrush>
           <LinearGradientBrush.GradientStops>
            <GradientStop Offset="0" Color="Yellow" />
            <GradientStop Offset="1" Color="Red" />
           </LinearGradientBrush.GradientStops>
         </LinearGradientBrush>
        </Ellipse.Fill>

        <Ellipse.Stroke>
         <LinearGradientBrush>
          <LinearGradientBrush.GradientStops>
            <GradientStop Offset="0" Color="Black" />
              <GradientStop Offset="1" Color="White" />
             </LinearGradientBrush.GradientStops>
            </LinearGradientBrush>
           </Ellipse.Stroke>

          </Ellipse>
         </Canvas >

        </Window>




      Gambar 1.5: Lingkaran dengan gradient outline



Langkah 2 – Buat sebuah Shape yang Lebih Kompleks Dengan Menggunakan Path


     Kelas Path merepresentasikan shape secara umum dibandingkan dengan objek shape yang
     sudah ada (seperti Line, Rectangle, Ellipse, Polyline, Polygon). Dengan path kita dapat
     membuat gambar yang lebih kompleks, seperti curves, arcs, dan shape yang dikombinasi. Pada
     kali ini kita akan membuat sebuah path yang ekuivalen dengan lingkaran yang telah kita buat
     sebelumnya. Kita akan menggunakan lingkaran tersebut sebagai bagian dari shape yang lebih
     kompleks.

   1. Gantikan Elipse yang sudah kita buat sebelumnya dengan menggunakan Path. Beri settingan
      yang sama dengan elipse untuk Stroke dan Fill pada Path. Set Width dan Height-nya menjadi
      800. Isi dari path (untuk menggambar sebuah shape) menggunakan properti Data yang
      dimiliki oleh path. Properti data dapat menerima sebuah Geometry. Geometry adalah
      sebuah deskripsi abstrak dari area screen, dan tergantung kepada objek lain untuk
      menampilkannya. Untuk membuat sebuah lingkaran, kita dapat menggunakan
      EllipseGeometry. Untuk lebih jelasnya dapat melihat code dibawah:
<Window x:Class="HelloWorld.Window1"
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 Title="RichContent" Height="600" Width="600"
 >

 <Canvas>

  <Path Width="800" Height="800"
   StrokeThickness="20" StrokeDashArray="0.5,2"
   StrokeDashCap="Round" >

   <Path.Data>
    <EllipseGeometry RadiusX="150" RadiusY="150" Center = "200,200" />
   </Path.Data>

   <Path.Fill>
    <LinearGradientBrush>
     <LinearGradientBrush.GradientStops>
      <GradientStop Offset="0" Color="Yellow" />
      <GradientStop Offset="1" Color="Red" />
     </LinearGradientBrush.GradientStops>
    </LinearGradientBrush>
   </Path.Fill>

   <Path.Stroke>
    <LinearGradientBrush>
     <LinearGradientBrush.GradientStops>
      <GradientStop Offset="0" Color="Black" />
      <GradientStop Offset="1" Color="White" />
     </LinearGradientBrush.GradientStops>
    </LinearGradientBrush>
   </Path.Stroke>
  </Path>

 </Canvas>

</Window>
  Gambar 1.6: Lingkarang yang dibuat menggunakan Path


  Kita baru saja membuat sebuah Path yang sama dengan Elipse yang sudah kita buat
  sebelumnya. Sekarang mari kita ambil keuntungan dari kemampuan path dan membuat shape
  lebih kompleks dengan menggunakan CombinedGeometry untuk membuat sebuah composite
  shape.

  Kelas CombinedGeometry membuat sebuah geometry dengan menggunakan dua input
  geometries dengan men-set property GeometryCombineMode menjadi Union, Intersect,
  Exclude, atau XOR. CombinedGeometry adalah Geometry itu sendiri, dan mungkin dapat
  digunakan untuk men-set properti Data yang merupakan elemen dari Path.

2. Buat sebuah CombinedGeometry yang mengkombinasikan dua objek EllipseGeometry
   dengan menggunakan Union.


    <Window x:Class="HelloWorld.Window1"
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     Title="RichContent" Height="600" Width="600"
     >

     <Canvas>

      <Path Width="800" Height="800"
       StrokeThickness="20" StrokeDashArray="0.5,2"
       StrokeDashCap="Round" >

       <Path.Data>
        <CombinedGeometry GeometryCombineMode="Union">
    <CombinedGeometry.Geometry1>
     <EllipseGeometry Center="200,200" RadiusX="150" RadiusY="150" />
    </CombinedGeometry.Geometry1>
    <CombinedGeometry.Geometry2>
     <EllipseGeometry Center="400,200" RadiusX="150" RadiusY="150" />
    </CombinedGeometry.Geometry2>
   </CombinedGeometry>
  </Path.Data>



  <Path.Fill>
   <LinearGradientBrush>
    <LinearGradientBrush.GradientStops>
     <GradientStop Offset="0" Color="Yellow" />
     <GradientStop Offset="1" Color="Red" />
    </LinearGradientBrush.GradientStops>
   </LinearGradientBrush>
  </Path.Fill>

  <Path.Stroke>
   <LinearGradientBrush>
    <LinearGradientBrush.GradientStops>
     <GradientStop Offset="0" Color="Black" />
     <GradientStop Offset="1" Color="White" />
    </LinearGradientBrush.GradientStops>
   </LinearGradientBrush>
  </Path.Stroke>
 </Path>

</Canvas>

</Window>
     Gambar 1.7: Sebuah kombinasi geometry
     Sejauh ini, kita telah menggunakan SolidColorBrush untuk menggambar sebuah area dengan
     warna yang solid dan menggunakan LinearGradientBrush untuk menggambar sebuah area
     dengan gradient linear. Sekarang kita akan menggunakan VisualBrush untuk menggambar
     sebuah area dengan Visual. Terdapat banyak objek Visual: controls, panels, dan shapes.
     Banyaknya dan variasinya objek visual membuat VisualBrush menjadi salah satu yang paling
     powerfull pada kelas WPF.

     Pada langkah berikutnya kita akan menggunakan VisualBrush untuk menggambar interior dari
     Path yang sudah kita buat dengan beberapa text.

3.   Buat sebuah VisualBrush dan gunakan untuk menggambar interior dari path. Untuk
     menjelaskan content dari VisualBrush, kita set property Visual yang ada pada VisualBrush.
     Kita set property Visual dengan sebuah TextBlock. Kemudian berikan text dari TextBlock
     sebuah background gradient linear yang warnanya transisi dari kuning menjadi merah. Lalu
     ubah text dari TextBlock atau warna dari gradient sesuai yang kita suka.


      <Path.Fill>
       <VisualBrush>
        <VisualBrush.Visual>
         <TextBlock Text="Hello World" FontWeight="Bold" Padding="10">
          <TextBlock.Background>
           <LinearGradientBrush>
            <LinearGradientBrush.GradientStops>
              <GradientStop Offset="0" Color="Yellow" />
              <GradientStop Offset="1" Color="Red" />
            </LinearGradientBrush.GradientStops>
           </LinearGradientBrush>
          </TextBlock.Background>
           </TextBlock>
          </VisualBrush.Visual>
        </VisualBrush>
        </Path.Fill>




      Gambar 1.8: Path dengan VisualBrush fill


      VisualBrush masih banyak memiliki kemampuan yang lebih yang tidak ditunjukan disini. Untuk
      contohnya, dengan men-set Viewport menjadi "0,0,0.1,0.1" dan men-set TileMode, kita dapat
      membuat sebuah pattern dari text yang ada di dalamnya.


Latihan 1 Final Code

 <Window x:Class="HelloWorld.Window1"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Title="RichContent" Height="600" Width="600"
  >

  <Canvas>

   <Path Width="800" Height="800"
    StrokeThickness="20" StrokeDashArray="0.5,2"
    StrokeDashCap="Round" >

    <Path.Data>
     <CombinedGeometry GeometryCombineMode="Union">
     <CombinedGeometry.Geometry1>
      <EllipseGeometry Center="200,200" RadiusX="150" RadiusY="150" />
     </CombinedGeometry.Geometry1>
     <CombinedGeometry.Geometry2>
      <EllipseGeometry Center="400,200" RadiusX="150" RadiusY="150" />
     </CombinedGeometry.Geometry2>
    </CombinedGeometry>
   </Path.Data>



   <Path.Fill>

    <VisualBrush>
     <VisualBrush.Visual>
      <TextBlock Text="Hello World" FontWeight="Bold" Padding="10">
       <TextBlock.Background>
        <LinearGradientBrush>
         <LinearGradientBrush.GradientStops>
          <GradientStop Offset="0" Color="Yellow" />
          <GradientStop Offset="1" Color="Red" />
         </LinearGradientBrush.GradientStops>
        </LinearGradientBrush>
       </TextBlock.Background>
      </TextBlock>
     </VisualBrush.Visual>
    </VisualBrush>

   </Path.Fill>



   <Path.Stroke>
    <LinearGradientBrush>
     <LinearGradientBrush.GradientStops>
      <GradientStop Offset="0" Color="Black" />
      <GradientStop Offset="1" Color="White" />
     </LinearGradientBrush.GradientStops>
    </LinearGradientBrush>
   </Path.Stroke>
  </Path>

  </Canvas>

 </Window>


Latihan 2 – Menambahkan Animasi dan Media


Sekarang kita dapat membuat kreasi baru dengan menambahkan animasi dan media. WPF
menyediakan sebuah sistem animasi yang terintegrasi. Untuk menganimasikan sebuah objek, kita
dapat menerapkan animasi ke propertinya. Terdapat tipe animasi yang berbeda dari tipe-tipe
properti yang berbeda: terdapat ColorAnimation untuk properti yang mengambil Color value,
DoubleAnimation untuk properti dapat mengambil double value, PointAnimation untuk
menganimasikan properti yang mengambil Point value. Untuk membuat sebuah EllipseGeometry
bergerak mengelilingi screen, kita harus menggunakan PointAnimation pada properti Center. Untuk
menganimasikan width dari sebuah Rectangle, kita harus menggunakan DoubleAnimation ke
properti width.
Animasi berisikan sebuah Storyboard, sebuah objek yang mengatur dan mengaplikasikan animasi.
Untuk memberitahu sebuah animasi mengenai objek mana yang dianimasikan, kita menggunakan
property Storyboard.TargetName. Untuk sebuah objek yang dapat dianimasikan, kita harus
memberinya nama. Jika sebuah objek merupakan elemen framework, kita dapat memberikannya
nama dengan men-set pada properti Name. jika sebuah objek bukan merupakan elemen framework,
kita harus memberinya nama dengan x:Name. Untuk memberitahu sebuah animasi mengenai
properti mana yang harus dianimasikan, kita dapat menggunakan Storyboard.TargetProperty.
Animasi akan mulai jika dipicu atau di-trigger oleh events. Untuk men-set kapan dimulainya animasi
dengan event yang spesifik, kita dapat menggunakan sebuah EventTrigger. Kita mengontrol event
triggers dengan men-setting properti RoutedEvent. Ketika sebuah EventTrigger dipicu atau di-
trigger, EventTrigger akan melakukan aksi apa saja yang telah kita asosiasikan. Untuk memulai
animasi, dapat kita gunakan BeginStoryboard.

Langkah 1 – Menambahkan animasi
   1. Buat dash pattern yang sudah kita coba pada latihan sebelumnya. Kita akan menambahkan
       animasi dengan property yang ada pada Path, yaitu StrokeDashOffset dan kita akan
       menggunakan DoubleAnimation. Untuk menjalankan animasi DoubleAnimation dari value
       yang sekarang (karena belum di-set maka nilainya adalah 0) menjadi 20, kita harus men-set
       properti To menjadi 20. Beri Duration 10 detik, dan buat animasi tersebut berulang-ulang
       (infinite). Buat animasi tersebut mulai ketika path sudah loaded. Dan selalu ingat agar
       memberi nama path agar dapat ditargetkan oleh animasi yang kita buat.



         <Window x:Class="HelloWorld.Window1"
          xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
          xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
          Title="RichContent" Height="600" Width="600">

          <Canvas>

           <Path Name="MyPath" Width="800" Height="800"
           StrokeThickness="20" StrokeDashArray="0.5,2"
           StrokeDashCap="Round" >

            <Path.Data>
             <CombinedGeometry GeometryCombineMode="Union">
              <CombinedGeometry.Geometry1>
               <EllipseGeometry Center="200,200" RadiusX="150" RadiusY="150" />
    </CombinedGeometry.Geometry1>
    <CombinedGeometry.Geometry2>
     <EllipseGeometry Center="400,200" RadiusX="150" RadiusY="150" />
    </CombinedGeometry.Geometry2>
   </CombinedGeometry>
  </Path.Data>

  <Path.Fill>
   <VisualBrush>
    <VisualBrush.Visual>
     <TextBlock Text="Hello World" FontWeight="Bold" Padding="10">
      <TextBlock.Background>
       <LinearGradientBrush>
        <LinearGradientBrush.GradientStops>
         <GradientStop Offset="0" Color="Yellow" />
         <GradientStop Offset="1" Color="Red" />
        </LinearGradientBrush.GradientStops>
       </LinearGradientBrush>
      </TextBlock.Background>
     </TextBlock>
    </VisualBrush.Visual>
   </VisualBrush>
  </Path.Fill>

  <Path.Stroke>
   <LinearGradientBrush>
    <LinearGradientBrush.GradientStops>
     <GradientStop Offset="0" Color="Black" />
     <GradientStop Offset="1" Color="White" />
    </LinearGradientBrush.GradientStops>
   </LinearGradientBrush>
  </Path.Stroke>

  <Path.Triggers>
   <EventTrigger RoutedEvent="Path.Loaded">
    <EventTrigger.Actions>
     <BeginStoryboard>
      <Storyboard>
       <DoubleAnimation
        Storyboard.TargetName="MyPath"
        Storyboard.TargetProperty="StrokeDashOffset"
        To="20" Duration="0:0:10"
    RepeatBehavior="Forever" />
      </Storyboard>
     </BeginStoryboard>
    </EventTrigger.Actions>
   </EventTrigger>
  </Path.Triggers>

 </Path >
</Canvas >
     </Window>
   Perhatikan bagaimana sistem dapat mengerti gabungan atau union dari dua geometry
   menjadi sebuah single geometry. Coba ubah kecepatan dari animasi dengan mengubah
   properti Duration dari DoubleAnimation.


2. Kemudian kita buat gambar animasi yang lebih eye-catching, buat satu objek
   EllipseGeometry terbang disekeliling screen. Kita dapat melakukannya dengan
   menganimasikan properti Center dengan PointAnimation. Animasikan dari (150,100) ke
   (650,200) selama 3 detik, dan buat animasinya berulang-ulang secara infinite. Beri nama
   EllipseGeometry sehingga dapat ditarget oleh animasinya. Set mulainya animasi ketika path
   loaded.


     <Path.Data>
      <CombinedGeometry GeometryCombineMode="Union">
       <CombinedGeometry.Geometry1>
        <EllipseGeometry x:Name="MyEllipseGeometry"
         Center="200,200" RadiusX="150" RadiusY="150" />
       </CombinedGeometry.Geometry1>
       <CombinedGeometry.Geometry2>
        <EllipseGeometry Center="400,200" RadiusX="150" RadiusY="150" />
       </CombinedGeometry.Geometry2>
      </CombinedGeometry>
     </Path.Data>

     <Path.Triggers>
      <EventTrigger RoutedEvent="Path.Loaded">
       <EventTrigger.Actions>
        <BeginStoryboard>
         <Storyboard>
          <DoubleAnimation
           Storyboard.TargetName="MyPath"
           Storyboard.TargetProperty="StrokeDashOffset"
           To="20" Duration="0:0:10"
           RepeatBehavior="Forever" />
         </Storyboard>
        </BeginStoryboard>

        <BeginStoryboard>
         <Storyboard>
          <PointAnimation
           Storyboard.TargetName="MyEllipseGeometry"
           Storyboard.TargetProperty="Center"
           From="150,100" To="650,200" Duration="0:0:3"
           RepeatBehavior="Forever" AutoReverse="True"/>
         </Storyboard>
        </BeginStoryboard>
       </EventTrigger.Actions>
           </EventTrigger>

          </Path.Triggers>




         Gambar 2.1: Path yang telah dianimasikan



Langkah 2 – Menambahkan video
   1. Dalam langkah sebelumnya, kita telah membuat LinearGradientBrush dan menggunakannya
       untuk menggambar background dari sebuah TextBlock. Ubah code kita sehingga
       LinearGradientBrush mewarnai foreground dari TextBlock.


          <TextBlock Text="Hello World" FontWeight="Bold" Padding="10">

           <TextBlock.Foreground>
            <LinearGradientBrush>
             <LinearGradientBrush.GradientStops>
              <GradientStop Offset="0" Color="Yellow" />
              <GradientStop Offset="1" Color="Red" />
             </LinearGradientBrush.GradientStops>
            </LinearGradientBrush>
           </TextBlock.Foreground>

          </TextBlock>


   52.   Sekarang, disamping menggunakan sebuah gradient untuk background dari TextBlock, kita
         dapat menggunakan video. Ini dapat dilakukan dengan membuat sebuah VisualBrush yang
   mengandung MediaElement, sebuah tipe dari elemen yang dapat memutar video. Kemudian
   kita set source properti dari MediaElement ke URL dari media file yang ingin kita putar.




     <TextBlock Text="Hello World" FontWeight="Bold" Padding="10">

      <TextBlock.Foreground>
       <LinearGradientBrush>
        <LinearGradientBrush.GradientStops>
         <GradientStop Offset="0" Color="Yellow" />
         <GradientStop Offset="1" Color="Red" />
        </LinearGradientBrush.GradientStops>
       </LinearGradientBrush>
      </TextBlock.Foreground>

      <TextBlock.Background>
       <VisualBrush>
        <VisualBrush.Visual>
          <MediaElement UnloadedBehavior="Play"
     Source="C:\Users\Kresna\Videos\The_lion_sleeps_tonight_1.wmv" />
        </VisualBrush.Visual>
       </VisualBrush>
      </TextBlock.Background>

     </TextBlock>




Gambar 2.2: Path yang telah dimasukkan video
Latihan 2 Final Code

         <Window x:Class="HelloWorld.Window1"
          xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
          xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
          Title="RichContent" Height="600" Width="600"
          >

          <Canvas>

           <Path Name="MyPath"
            Width="800" Height="800"
            StrokeThickness="20" StrokeDashArray="0.5,2"
           StrokeDashCap="Round" >

            <Path.Data>
             <CombinedGeometry GeometryCombineMode="Union">
              <CombinedGeometry.Geometry1>
               <EllipseGeometry x:Name="MyEllipseGeometry"
                Center="200,200" RadiusX="150" RadiusY="150" />
              </CombinedGeometry.Geometry1>
              <CombinedGeometry.Geometry2>
               <EllipseGeometry Center="400,200" RadiusX="150" RadiusY="150" />
              </CombinedGeometry.Geometry2>
             </CombinedGeometry>

            </Path.Data>

            <Path.Fill>
             <VisualBrush>
              <VisualBrush.Visual>
               <TextBlock Text="Hello World" FontWeight="Bold" Padding="10">
                <TextBlock.Foreground>
                 <LinearGradientBrush>
                  <LinearGradientBrush.GradientStops>
                   <GradientStop Offset="0" Color="Yellow" />

                     <GradientStop Offset="1" Color="Red" />

                  </LinearGradientBrush.GradientStops>
                 </LinearGradientBrush>
                </TextBlock.Foreground>
                <TextBlock.Background>
                 <VisualBrush>
                  <VisualBrush.Visual>
         <MediaElement UnloadedBehavior="Play" Source="
         C:\Users\Kresna\Videos\The_lion_sleeps_tonight_1.wmv" />
                  </VisualBrush.Visual>
                 </VisualBrush>
               </TextBlock.Background>
              </TextBlock>
             </VisualBrush.Visual>
            </VisualBrush>
           </Path.Fill>

           <Path.Stroke>
            <LinearGradientBrush>
             <LinearGradientBrush.GradientStops>
              <GradientStop Offset="0" Color="Black" />
              <GradientStop Offset="1" Color="White" />
             </LinearGradientBrush.GradientStops>
            </LinearGradientBrush>
           </Path.Stroke>

           <Path.Triggers>
            <EventTrigger RoutedEvent="Path.Loaded">
             <EventTrigger.Actions>
              <BeginStoryboard>
               <Storyboard>
                <DoubleAnimation To="20" Duration="0:0:10"
                 Storyboard.TargetName="MyPath"
                 Storyboard.TargetProperty="StrokeDashOffset"
                 RepeatBehavior="Forever" />
               </Storyboard>
              </BeginStoryboard>
              <BeginStoryboard>
               <Storyboard>
                <PointAnimation From="150,100" To="650,200" Duration="0:0:3"
                 Storyboard.TargetName="MyEllipseGeometry"
                 Storyboard.TargetProperty="Center"
                 RepeatBehavior="Forever" AutoReverse="True"/>
               </Storyboard>
              </BeginStoryboard>
             </EventTrigger.Actions>
            </EventTrigger>
           </Path.Triggers>
          </Path>
         </Canvas>

        </Window>



Latihan 3 – Membuat 3-D Content

Pada latihan ini kita akan membuat grafik 3D dengan membuat 3D scene dan menampilkannya
dengan Viewport3D.
Viewport3D merupakan 2D FrameworkElement yang mengandung 3D scene. Viewport3D
menggunakan model, lights, dan kamera untuk menampilkan 3D scene. Tidak seperti 3D API
tradisional, 3D dalam WPF benar-benar terintegrasi kedalam platform. Kita bisa tidak hanya
menempatkan 3D content dalam 2D scene, kita juga dapat menempatkan 2D content di dalam 3D
scene (menggunakan DrawingBrush atau VisualBrush).

Langkah 1 – Membuat 3D Scene
   1. Kita bersihkan terlebih dahulu isi dari Window1.xaml. Buat sebuah 3D scene yang sederhana
       dengan meng-copy code dibawah ini kedalam Window1.xaml. Code ini membuat sebuah 3D
       scene yang mengandung satu model, dua lights, dan PerspectiveCamera. Kamera
       mendefinisikan lokasi dari titik mata atau eye point dan kamera mendeskripsikan bagaimana
       sebuah scene diubah menjadi 2D. kamera yang kita gunakan yaitu PerspectiveCamera,
       menggunakan proyeksi perspektif. Terdapat juga OrthographicCamera yang digunakan
       untuk proyeksi orthographic dan MatrixCamera, dimana kita dapat memanipulasi
       ViewMatrix dan ProjectionMatrix sesuka hati kita.


         <Window x:Class="HelloWorld.Window1"
          xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
          xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
          Title="RichContent" Height="600" Width="600"
          >

         <Viewport3D>

           <Viewport3D.Camera>
            <PerspectiveCamera
             FarPlaneDistance="20"
             LookDirection="0,-0.65,-1"
             UpDirection="0,1,0"
             NearPlaneDistance="1"
             Position="0,2,3"
             FieldOfView="40" />
           </Viewport3D.Camera>
           <Viewport3D.Children>
            <ModelVisual3D>
              <ModelVisual3D.Content>
               <Model3DGroup >
                <Model3DGroup.Children>
                 <AmbientLight Color="White" />
                 <GeometryModel3D>

                   <GeometryModel3D.Geometry>
                    <MeshGeometry3D
                     TriangleIndices="0,1,2 2,3,0 6,5,4 4,7,6"
                     TextureCoordinates="1,1 1,0 0,0 0,1 0,1 0,0 1,0 1,1"
         Positions="-0.5,-0.5,0 -0.5,0.5,0 0.5,0.5,0 0.5,-0.5,0 -0.5,-0.5,0 -0.5,0.5,0 0.5,0.5,0 0.5,-
         0.5,0 "/>
                   </GeometryModel3D.Geometry>
        <GeometryModel3D.Transform>
         <RotateTransform3D>
          <RotateTransform3D.Rotation>
<AxisAngleRotation3D x:Name="MyRotation3D" Angle="45" Axis="0 1 0"/>
          </RotateTransform3D.Rotation>
         </RotateTransform3D>
        </GeometryModel3D.Transform>



        <GeometryModel3D.Material>
         <DiffuseMaterial>
          <DiffuseMaterial.Brush>
           <VisualBrush>
            <VisualBrush.Visual>
              <TextBlock Text="Hello" />
            </VisualBrush.Visual>
           </VisualBrush>
          </DiffuseMaterial.Brush>
         </DiffuseMaterial>
        </GeometryModel3D.Material>

       </GeometryModel3D>
      </Model3DGroup.Children>
     </Model3DGroup>
    </ModelVisual3D.Content>
   </ModelVisual3D>
  </Viewport3D.Children>
  <Viewport3D.Triggers>
   <EventTrigger RoutedEvent="Viewport3D.Loaded">
    <EventTrigger.Actions>
     <BeginStoryboard>
      <Storyboard>
       <DoubleAnimation From="0" To="360" Duration="0:0:3"
       Storyboard.TargetName="MyRotation3D"
       Storyboard.TargetProperty="Angle" RepeatBehavior="Forever" />
      </Storyboard>
     </BeginStoryboard>
    </EventTrigger.Actions>
   </EventTrigger>
  </Viewport3D.Triggers>
 </Viewport3D>
</Window>
Gambar 3.1: Text yang telah di mapping menjadi objek 3D



    2. Untuk memutar Model3D, buat RotateTransform3D yang menggunakan Rotation3D untuk
       melakukan rotasi pada Y axis. Gunakan transform ini untuk men-set properti Transform pada
       GeometryModel3D. Beri nama Rotation3D, kita akan menganimasikannya pada langkah
       berikutnya.

        …


              </GeometryModel3D.Geometry>

              <GeometryModel3D.Transform>
               <RotateTransform3D>
                  <RotateTransform3D.Rotation>
                   <AxisAngleRotation3D
                         x:Name="MyRotation3D" Angle="45" Axis="0 1 0"/>
                  </RotateTransform3D.Rotation>
               </RotateTransform3D>
              </GeometryModel3D.Transform>


              <GeometryModel3D.Material>

        …


        Tipe lain dari transform pada 3D meliputi ScaleTransform3D dan TranslateTransform3D.


    2. Kemudian buat 3D objek tersebut berputar dengan menganimasikan Rotation3D yang sudah
       kita buat pada langkah sebelumnya.
         …
             </Viewport3D.Models>

             <Viewport3D.Triggers>
              <EventTrigger RoutedEvent="Viewport3D.Loaded">
               <EventTrigger.Actions>
                <BeginStoryboard>
                 <Storyboard>
                  <DoubleAnimation From="0" To="360" Duration="0:0:3"
                  Storyboard.TargetName="MyRotation3D"
                  Storyboard.TargetProperty="Angle" RepeatBehavior="Forever" />
                 </Storyboard>
                </BeginStoryboard>
               </EventTrigger.Actions>
              </EventTrigger>
             </Viewport3D.Triggers>

          </Viewport3D>

         </Window>




Gambar 3.2: 3D yang dianimasikan



Langkah 2 – Membuat sebuah kubus
   1. Gantikan MeshGeometry3D dibawah ini, dimana code dibawah membuat sebuah kubus,
       dengan MeshGeometry3D yang sudah kita buat pada langkah sebelumnya.


         <GeometryModel3D.Geometry>

          <MeshGeometry3D
           TriangleIndices="0,1,2 3,4,5 6,7,8 9,10,11 12,13,14 15,16,17 18,19,20 21,22,23 24,25,26 27,28,29
         30,31,32 33,34,35 "
   Normals="0,0,-1 0,0,-1 0,0,-1 0,0,-1 0,0,-1 0,0,-1 0,0,1 0,0,1 0,0,1 0,0,1 0,0,1 0,0,1 0,-1,0 0,-1,0 0,-
 1,0 0,-1,0 0,-1,0 0,-1,0 1,0,0 1,0,0 1,0,0 1,0,0 1,0,0 1,0,0 0,1,0 0,1,0 0,1,0 0,1,0 0,1,0 0,1,0 -1,0,0 -
 1,0,0 -1,0,0 -1,0,0 -1,0,0 -1,0,0 "
   TextureCoordinates="1,1 1,0 0,0 0,0 0,1 1,1 0,1 1,1 1,0 1,0 0,0 0,1 0,1 1,1 1,0 1,0 0,0 0,1 1,1 1,0
 0,0 0,0 0,1 1,1 1,0 0,0 0,1 0,1 1,1 1,0 0,0 0,1 1,1 1,1 1,0 0,0 "
   Positions="-0.5,-0.5,-0.5 -0.5,0.5,-0.5 0.5,0.5,-0.5 0.5,0.5,-0.5 0.5,-0.5,-0.5 -0.5,-0.5,-0.5 -0.5,-
 0.5,0.5 0.5,-0.5,0.5 0.5,0.5,0.5 0.5,0.5,0.5 -0.5,0.5,0.5 -0.5,-0.5,0.5 -0.5,-0.5,-0.5 0.5,-0.5,-0.5 0.5,-
 0.5,0.5 0.5,-0.5,0.5 -0.5,-0.5,0.5 -0.5,-0.5,-0.5 0.5,-0.5,-0.5 0.5,0.5,-0.5 0.5,0.5,0.5 0.5,0.5,0.5 0.5,-
 0.5,0.5 0.5,-0.5,-0.5 0.5,0.5,-0.5 -0.5,0.5,-0.5 -0.5,0.5,0.5 -0.5,0.5,0.5 0.5,0.5,0.5 0.5,0.5,-0.5 -0.5,0.5,-
 0.5 -0.5,-0.5,-0.5 -0.5,-0.5,0.5 -0.5,-0.5,0.5 -0.5,0.5,0.5 -0.5,0.5,-0.5 "/>


 </GeometryModel3D.Geometry>




Sekarang kita memiliki sebuah kubus yang berputar dengan permukaan text. Cobalah untuk
ubah Position dari kamera.




Gambar 3.3: text yang dipindahkan ke permukaan kubus
Langkah 3 – Memindahkan Content Lainnya ke Permukaan Kubus
   1. Ubah permukaan dari kubus sehingga dapat menampilkan sebuah video. Kita melakukan ini
       dengan mengubah content dari VisualBrush dari TextBlock dibawah ini:




        <DiffuseMaterial>
         <DiffuseMaterial.Brush>
          <VisualBrush>
           <VisualBrush.Visual>
             <TextBlock Text="Hello" />
           </VisualBrush.Visual>
          </VisualBrush>
         </DiffuseMaterial.Brush>
        </DiffuseMaterial>


       Menjadi MediaElement:

        <DiffuseMaterial>
         <DiffuseMaterial.Brush>
          <VisualBrush>
           <VisualBrush.Visual>
             <MediaElement UnloadedBehavior="Play" Source = "
        C:\Users\Kresna\Videos\The_lion_sleeps_tonight_1.wmv " />
           </VisualBrush.Visual>
          </VisualBrush>
         </DiffuseMaterial.Brush>
        </DiffuseMaterial>




   Gambar 3.4: video yang dipindahkan ke permukaan kubus
   2. Sekarang ubah content dari VisualBrush lagi, kali ini menjadi sebuah elipse.


        <DiffuseMaterial>
         <DiffuseMaterial.Brush>
          <VisualBrush>
           <VisualBrush.Visual>

            <Ellipse Width="300" Height="300"
             Stroke="Purple" StrokeThickness="20">
             <Ellipse.Fill>
              <LinearGradientBrush>
                <LinearGradientBrush.GradientStops>
                 <GradientStop Offset="0" Color="Yellow" />
                 <GradientStop Offset="1" Color="Red" />
                </LinearGradientBrush.GradientStops>
              </LinearGradientBrush>
             </Ellipse.Fill>
            </Ellipse>

           </VisualBrush.Visual>
          </VisualBrush>
         </DiffuseMaterial.Brush>
        </DiffuseMaterial>




        Gambar 3.5: Mengubah content menjadi elips

Langkah 4 –Pindahkan 2D Content yang Beranimasi kedalam Kubus


   3. Pindahkan Path yang sudah kita buat pada latihan 2 ke permukaan dari kubus. Untuk
      melakukan ini hapus elipse dari langkah sebelumnya dan gantikan dengan path pada latihan
      2.
<GeometryModel3D.Material>
 <DiffuseMaterial>
  <DiffuseMaterial.Brush>
   <VisualBrush>
    <VisualBrush.Visual>

    <Path Name="MyPath"
     Width="800" Height="800"
     StrokeThickness="20" StrokeDashArray="0.5,2"
     StrokeDashCap="Round">

     <Path.Data>
      <CombinedGeometry GeometryCombineMode="Union">
       <CombinedGeometry.Geometry1>
        <EllipseGeometry x:Name="MyEllipseGeometry"
         Center="200 200" RadiusX="150" RadiusY="150" />
       </CombinedGeometry.Geometry1>
       <CombinedGeometry.Geometry2>
        <EllipseGeometry Center="400 200" RadiusX="150" RadiusY="150" />
       </CombinedGeometry.Geometry2>
      </CombinedGeometry>
     </Path.Data>

     <Path.Fill>
      <VisualBrush>
       <VisualBrush.Visual>
        <TextBlock Text="Hello World" FontWeight="Bold" Padding="10">
         <TextBlock.Foreground>
          <LinearGradientBrush>
           <LinearGradientBrush.GradientStops>
            <GradientStop Offset="0" Color="Yellow" />
            <GradientStop Offset="1" Color="Red" />
           </LinearGradientBrush.GradientStops>
          </LinearGradientBrush>
         </TextBlock.Foreground>
         <TextBlock.Background>
          <VisualBrush>

            <VisualBrush.Visual>
             <MediaElement UnloadedBehavior="Play"
                Source="C:\Users\Kresna\Videos\The_lion_sleeps_tonight_1.wmv">
             </MediaElement>

           </VisualBrush.Visual>
          </VisualBrush>
         </TextBlock.Background>
        </TextBlock>
       </VisualBrush.Visual>
      </VisualBrush>
     </Path.Fill>

     <Path.Stroke>
      <LinearGradientBrush>
       <LinearGradientBrush.GradientStops>
         <GradientStop Offset="0" Color="Black" />
         <GradientStop Offset="1" Color="White" />
        </LinearGradientBrush.GradientStops>
       </LinearGradientBrush>
      </Path.Stroke>

      <Path.Triggers>
       <EventTrigger RoutedEvent="Path.Loaded">
        <EventTrigger.Actions>
         <BeginStoryboard>
          <Storyboard>
           <DoubleAnimation To="20" Duration="0:0:10"
            Storyboard.TargetName="MyPath"
            Storyboard.TargetProperty="StrokeDashOffset"
            RepeatBehavior="Forever" />
          </Storyboard>
         </BeginStoryboard>
         <BeginStoryboard>
          <Storyboard>
           <PointAnimation From="150,100" To="650,200" Duration="0:0:3"
            Storyboard.TargetName="MyEllipseGeometry"
            Storyboard.TargetProperty="Center"
            RepeatBehavior="Forever" AutoReverse="True"/>
          </Storyboard>
         </BeginStoryboard>
        </EventTrigger.Actions>
       </EventTrigger>
      </Path.Triggers>
     </Path>

    </VisualBrush.Visual>
   </VisualBrush>
  </DiffuseMaterial.Brush>
 </DiffuseMaterial>

</GeometryModel3D.Material>

</GeometryModel3D>
   Gambar 2: Path dari Latihan 2, yang dipindahkan ke permukaan kubus




3. Untuk mendapatkan animasinya berjalan kembali, pindahkan animasi DashOffset dan
   animasi EllipseGeometry dari EventTrigger yang dimiliki path ke EventTrigger dari
   Viewport3D. Hapus tag Path.Trigger dari path dan semua isinya.


     <Viewport3D.Triggers>
      <EventTrigger RoutedEvent="Viewport3D.Loaded">
       <EventTrigger.Actions>
        <BeginStoryboard>
         <Storyboard>
          <DoubleAnimation From="0" To="360" Duration="0:0:3"
           Storyboard.TargetName="MyRotation3D"
           Storyboard.TargetProperty="Angle" RepeatBehavior="Forever" />
         </Storyboard>
        </BeginStoryboard>

        <BeginStoryboard>
         <Storyboard>
          <DoubleAnimation To="20" Duration="0:0:10"
           Storyboard.TargetName="MyPath"
           Storyboard.TargetProperty="StrokeDashOffset"
           RepeatBehavior="Forever" />
         </Storyboard>
        </BeginStoryboard>
        <BeginStoryboard>
         <Storyboard>
     <PointAnimation From="150,100" To="650,200" Duration="0:0:3"
      Storyboard.TargetName="MyEllipseGeometry"
      Storyboard.TargetProperty="Center"
      RepeatBehavior="Forever" AutoReverse="True"/>
    </Storyboard>
   </BeginStoryboard>

  </EventTrigger.Actions>
 </EventTrigger>
</Viewport3D.Triggers>
Kesimpulan

Pada Hand on Lab ini kita dapat mempelajari hal-hal dibawah ini:



        Membuat 2D scene
        Menganimasikan 2D scene tersebut dan memutar video
        Memindahkan seluruh scene diatas ke sebuah permukaan pada kubus 3D
         yang dianimasikan
Creating XAML Browser Application with Visual C# 2008 Express


Tujuan dari Hand on Lab kali ini adalah untuk mempelajari cara menggunakan WPF application
model, layout sistem dari WPF, dan fitur-fitur lainnya untuk membuat aplikasi rich client dengan user
interface yang memukau. Kita akan belajar mengenai XAML dan bagaimana cara membuat XAML
Browser Application (XBAP). XBAP merupakan aplikasi dari WPF yang:

    1. Tidak perlu di-install
    2. Di-host di browser
    3. Berjalan pada security sandbox

XBAP dapat digunakan mempermudah pengembangan dari aplikasi web, dan juga dapat membuat
atau meng-enhance web experience dari pelanggan atau customer. Pada Hand on Lab kali ini kita
akan membuat sebuah “Photo Blog” yang menampilkan sejumlah foto dan menggunakan flow
document untuk menyediakan informasi tambahan untuk setiap foto.

Topik yang akan dibahas pada Hand on Lab ini adalah:

        Membuat Sebuah XAML Browser Application

        Cara Menggunakan Data Binding
        Menambahkan Sebuah Custom Font
        Cara Menggunakan Flow Documents
Latihan 1 – Membuat XAML Browser Application



Terdapat dua jenis utama dari aplikasi yang dapat kita buat dengan menggunakan Windows
Presentation Foundation, yaitu: Installed applications dan Web browser applications. Perbedaan
utama antara ke dua tipe ini adalah dimana aplikasi tersebut di-host, objek aplikasi apa yang dapat
diasosiasikan, dan apakah tipe tersebut dapat membuat kita menavigasikan dari halaman ke
halaman. Setiap aplikasi yang akan kita buat dengan tipe-tipe tersebut, sudah disediakan template
oleh Microsoft Visual C# 2008 Express sehingga dapat kita gunakan untuk membuat dan
mengiplementasikan aplikasi yang ingin kita buat. Pada Latihan ini, kita akan membuat sebuah XBAP
yang sederhana dengan menggunakan template yang sudah disediakan oleh Visual C# 2008 Express.



Langkah 1 – Membuat Sebuah project XBAP dalam Visual C#
 1. Buka Microsoft Visual C# 2008 Express Edition

 2.   Buat sebuah project baru.
                 a. Pada menu File, pilih New Project.
                 b. Pilih Browser Application (WPF) Template.
                 c. Beri nama Project, TesXBAP.
                 d. Click tombol OK.
 3.   Save project files di directory yang diinginkan. (Ctrl+Shift+S)
 4.   Tambahkan sebuah judul dalam TextBlock dengan melakukan hal di bawah ini:
                  a. Double click Page1.xaml file, kemudia kita edit.
                  b. Pada window XAML, tambahkan sebuah <TextBlock> control di dalam sebuah
                     <Grid> control, kemudian set FontSize-nya menjadi 40 dan tulis isinya dengan
                     “Belajar XBAP”

        <Page x:Class="TesXBAP.Page1"
          xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
          xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
          Title="Page1"
          >
          <Grid>
                   <TextBlock FontSize="40"> Belajar XBAP </TextBlock>
          </Grid>
        </Page>

 5.   Kemudian jalankan aplikasinya dengan menekan tombol (F5)
                  a. Perhatikan bahwa aplikasi kita secara otomatis membuka Micorosft Internet
                     Explorer
                  b. XAML Browser Applications (XBAP) hanya bisa di-render di dalam sebuah
                     browser window.



Langkah 2 – Menambahkan Images dan ListBox sebagai tempat untuk Image-image yang ada


Pada langkah ini kita akan menambahkan images dan membuat sebuah ListBox untuk menampung
image dan membuatnya menjadi listbox items yang dapat dipilih.

      1. Buat sebuah folder baru dengan nama “Images” dengan cara, klik kanan pada file project,
         kemudian pilih add, new folder.
2. Tambahkan semua gambar yang diinginkan kedalam folder Images (Misalkan kita memasukan 3
   buah gambar).




                 a. Kita harus merubah “Files of Type” dari dropdown yang ada pada “Add Existing
                    Item” menjadi *.* sehingga file gambar akan muncul.
3. Tambahkan sebua ListBox pada page untuk memunculkan gambar dan gambar tersebut dapat
   dipilih.
                 a. Dibawah tag <TextBlock>, tambahkan sebuah tag <ListBox> baru. Kemudian set
                    BorderThickness=”0” sehingga border dari listbox tidak terlihat.
                          i. Ketika kita menambahkan ListBox, kita akan melihat TextBlock
                             menghilang ketika kita memilih permukaan design. Hal ini dikarenakan
                             kita tidak membuat baris dan kolom untuk Grid. Grid membuat children
                             untuk membagi koordinat kosong yang sama dimana biasanya beguna
                             untuk overlaying objects.


     <Page x:Class=" TesXBAP.Page1"
       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
       Title="Page1"
       >
       <Grid>
                <TextBlock FontSize="40"> Belajar XBAP </TextBlock>
                <ListBox BorderThickness="0">

                 </ListBox>
       </Grid>
     </Page>
4. Tambahkan gambar-gambar atau images kedalam ListBox
                 a. Buat sebuah tag <Border> seperti potongan code dibawah ini (Ditandai dengan
                    warna kuning).
                 b. Buat relative path untuk Image Source yang menunjukan folder Images pada
                    project (Ditandai dengan warna Hijau).

     <Page . . .>
       <Grid>
                 <TextBlock FontSize="40">Belajar XBAP</TextBlock>
                 <ListBox BorderThickness="0">

                 <Border BorderThickness="10" BorderBrush="LightGray" HorizontalAlignment="Center"
                                            VerticalAlignment="Center" CornerRadius="10">
                         <Border.LayoutTransform>
                                 <RotateTransform Angle = "-5"/>
                         </Border.LayoutTransform>
                                 <Image Source="Images\VaticanStairs.jpg" Height="100" Width="100"
                                   Stretch="UniformToFill"/>
                 </Border>

                 </ListBox>
       </Grid>
     </Page>
5. Compile dan Jalankan (F5)
Langkah 3 – Format Grid Layout
Pada langkah ini kita akan men-format Grid Layout dan posisi dari child elements secara benar di
dalam rid Layout.
   1. Berikan nilai width dan height pada Grid yang sudah ada
                  a. Set atribut MinWidth dari <Grid> menjadi 600 dan atribut MinHeight menjadi
                     400.


         <Page . . . >
           <Grid MinWidth="600" MinHeight="400">
                       ...
           </Grid>
         </Page>


2. Tambahkan baris dan kolom ke Grid
                  a. Tambahkan dua baris dan dua kolom ke <Grid> dengan menspesifikasikan
                     <Grid.RowDefinitions> dan <Grid.ColumnDefinitions>.
                  b. Set atribut Height dari RowDefinition yang pertama menjadi Auto (dimana
                     mendistribusikan space berdasarkan pada ukuran dari content di dalam baris),
                     tetapi jangan men-set atribut height yang ke dua dari RowDefinition (dimana
                     memberitahukan WPF untuk mengisi space yang tersisa pada halaman yang
                     menampung content dengan final row).
                  c. Set atribut Width dengan ColumnDefiniton yang pertama menjadi Auto, tetapi
                     jangan men-set atribut Width dari ColumnDefiniton yang ke dua.



      <Page . . . >
        <Grid MinWidth="600" MinHeight="400">

                  <Grid.RowDefinitions>
                          <RowDefinition Height="Auto" />
                          <RowDefinition />
                  </Grid.RowDefinitions>

                  <Grid.ColumnDefinitions>
                          <ColumnDefinition Width="Auto" />
                          <ColumnDefinition />
                  </Grid.ColumnDefinitions>

                  ...
        </Grid>
      </Page>



3. Tambahkan Grid child controls untuk menspesifikasikan baris dan kolom
                  a. Set properti Grid.Row pada TextBlock menjadi 0 dan properti Grid.ColumnSpan
                     menjadi 2.
                          i. Hal ini menempatkan TextBlock pada baris pertama, spanning ke dua
                             kolom dalam grid.
                 b. Set properti Grid.Row dari ListBox menjadi 1 dan properti Grid.Column menjadi
                    0.
                          i. Ini membuat ListBox berada pada baris ke dua, dan pada kolom
                             pertama.


                       <Page . . .>
                         <Grid MinWidth="600" MinHeight="400">
                                    <Grid.RowDefinitions>
                                            <RowDefinition Height="Auto" />
                                            <RowDefinition />
                                    </Grid.RowDefinitions>

                                   <Grid.ColumnDefinitions>
                                           <ColumnDefinition Width="Auto" />
                                           <ColumnDefinition />
                                   </Grid.ColumnDefinitions>

                                   <TextBlock FontSize="40" Grid.Row="0" Grid.ColumnSpan="2">Belajar
                                   XBAP</TextBlock>
                                   <ListBox BorderThickness="0" Grid.Row="1" Grid.Column="0">
                                            ...
                                   </ListBox>
                         </Grid>
                       </Page>



4. Tambahkan sebuah sebuah text bertuliskan “PlaceHolder” pada sebuah TextBlock.
                 a. Tambahkan kontrol <TextBlock> dibawah kontrol <ListBox>, kemudian set
                    FontSize-nya menjadi 20 dan tulis isinya dengan “PlaceHolder”.
                 b. Set properti Grid.Row dari TextBlock menjadi 1 dan properti Grid.Column
                    menjadi 1.



     <Page ...>
       <Grid MinWidth="600" MinHeight="400">
                ...
                <ListBox BorderThickness="0" Grid.Row="1" Grid.Column="0">
                         ...
                </ListBox>

                 <TextBlock FontSize="20" Grid.Row="1" Grid.Column="1">PlaceHolder</TextBlock>

       </Grid>
     </Page>
5. Compile dan Jalankan! (F5)
Latihan 2 – Data Binding

Semua aplikasi yang scalable bergantung kepada data model. Data Binding merupakan proses yang
menghubungkan data dengan user interface pada aplikasi yang kita buat. Komunikasi yang mudah
antara ke duanya memudahkan kita untuk mendapatkan pemisahan yang bersih antara user
interface dan business logic, membuat para designer dan developer dapat bekerja secara parallel
melakukan yang terbaik yang dapat mereka lakuan.
WPF menyediakan data services yang powerfull, dimana kita dapat mengintegrasikan data kedalam
aplikasi kita. Elemen dari user interface dapat ditemukan di dalam CLR Objects dan XML resources.
Data sources mengatur hubungan antara data items (objek business) dan berbagai macam
kemampuan data binding dari aplikasi kita. Ada beberapa jenis tipe dari data sources untuk source
data types yang berbeda, termasuk di dalamnya ObjectDataProvider dan XmlDataProvider.
Keduanya mengimplement IDataSource interface dimana menyediakan sebuah data source dengan
kemampuan untuk menotifikasi bindings yang dependent dari perubahan ke data objek yang
mengacu kepada data source.

Langkah 1 – Buat dan tambahkan XML File pada proyek
   1. Buat sebuah file XML yang berisikan seperti potongan code dibawah ini, dan save dengan
       nama files.xml. Dapat dilihat file XML ini berisikan judul gambar, link (href), dan gambar itu
       sendiri. Untuk link XAML seperti Sunset.xaml, Newyork.xaml, akan kita buat nantinya dengan
       FlowDocument pada bab Latihan terakhir.

         <files>
          <pic title="Sunset" href=" Intro.xaml" src="Images/ Lumayan.bmp "/>
          <pic title="Newyork" href=" Newyork.xaml" src="Images/ newyork.bmp "/>
          <pic title="Lumayan" href=" Lumayan.xaml" src="Images/ Setengah.bmp "/>
         </files>


    2. Kemudian tambahkan file XMl tersebut kedalam proyek dengan mengikuti langkah-langkah
       dibawah ini.
Langkah 2 – Membuat atau MendefinisikanPage Resources
   1. Definisikan sebuah XmlDataProvider dengan nama “FilesData” (definisikan dalam atribut
       x:Key) sebagai sebuah resource di dalam resource section di dalam elemen Page pada
       Page1.xaml.
               a. Atribut Source dari XmlDataProvider di-set menjadi nama dari XML yang telah
                   kita buat diatas, yaitu files.xml.
               b. Atribut Xpath mendefinisikan target elemen di dalam file.
               c. Perhatikan: Elemen Page.Resources harus didefinisikan diatas pendefinisian
                   Grid.



        <Page . . .>

                <Page.Resources>
                        <XmlDataProvider Source="files.xml" x:Key="FilesData" XPath="/files/pic"/>
                </Page.Resources>

          <Grid MinWidth="600" MinHeight="400">
               ...
          </Grid>

        </Page>



Langkah 3 – Mendefinisikan Data Template
   1. Styles membuat sebuah aplikasi, dokumen, atau user interface designer untuk
       menstandarisasi pada tampilan yang istimewa untuk produk mereka. Selanjutnya, data
       template digunakan untuk mendefinisikan tampilan dari data. Untuk memperindah user
       interface pada gambar, kita harus mendefinisikan atau membuat data template.
                a. Buat <DataTemplate> dibawah elemen Page.Resources dengan DataType dari
                   “pic” (dimana merujuk kepada elemen pic pada file xml).
                b. Pindahkan elemen <Border> dan content-nya dari bawah elemen < ListBox>
                   kedalam tag <DataTemplate>. Dapat dilihat pada potongan code dibawah
                   (berwarna kuning).


   2. Gantikan atribut Source yang ditulis secara hard coded dalam elemen image dengan XPath
      binding expression untuk menunjukan atribut src di dalam files.xml. Ditunjukan pada
      potongan code di bawah dengan warna hijau.

       Perhatikan: syntax dari binding adalah seperti ini: {Binding XPath=@src}
       <Page x:Class="TesXBAP.Page1"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         Title="Page1"
         >
       <Page.Resources>
                <XmlDataProvider Source="files.xml" x:Key="FilesData" XPath="/files/pic"/>
                <DataTemplate DataType="pic">
                        <Border BorderThickness="10" BorderBrush="LightGray"
       HorizontalAlignment="Center" VerticalAlignment="Center" CornerRadius="10">
                                 <Border.LayoutTransform>
                                         <RotateTransform Angle = "-5"/>
                                 </Border.LayoutTransform>
                                 <Image Source="{Binding XPath=@src}" Height="100" Width="100"
       Stretch="UniformToFill"/>
                        </Border>
                </DataTemplate>
       </Page.Resources>

         <Grid MinWidth="600" MinHeight="400">
               <Grid.RowDefinitions>
                       <RowDefinition Height="Auto" />
                       <RowDefinition />
               </Grid.RowDefinitions>

               <Grid.ColumnDefinitions>
                       <ColumnDefinition Width="Auto" />
                       <ColumnDefinition />
               </Grid.ColumnDefinitions>

               <TextBlock FontSize="40" Grid.Row="0" Grid.ColumnSpan="2">Belajar XBAP</TextBlock>
               <ListBox BorderThickness="0" Grid.Row="1" Grid.Column="0"></ListBox>
               <TextBlock FontSize="20" Grid.Row="1" Grid.Column="1">PlaceHolder</TextBlock>
         </Grid>
       </Page>



Langkah 4 – Definisikan sebuah Items Source Untuk Listbox
   1. Hal terakhir yang harus dilakukan untuk menyelesaikan databinding adalah memberi tahu
       <ListBox>, item apa yang harus ditampilkan (karena kita menghilangkan border dan image
       pada langkah sebelumnya). Kita harus melakukan ini dengan mendefinisikan properti
       ItemsSource yang merujuk kepada StaticResource FilesData yang telah kita definisikan pada
       langkah sebelumnya.


         <ListBox BorderThickness="0" Grid.Row="1" Grid.Column="0" ItemsSource="{Binding
         Source={StaticResource FilesData}}"></ListBox>
Langkah 5 – Compile dan Jalankan! (F5)
Latihan 3 – Menambahkan Custom Fonts

Langkah 1 – Tambahkan Font Resource
   1. Buat sebuah folder baru dengan nama Resources pada proyek.




2. Kemudian tambahkan font yang diinginkan kedalam folder Resources yang baru kita buat.




               a. Kita perlu mengubah “Files of Type” pada dropdown yang ada setelah kita pilih
                  “Add Existing Item” menjadi *.* sehingga font.ttf yang diinginkan akan terlihat.
3. Update TextBlock “Belajar XBAP” untuk menggunakan font yang sudah kita tambahkan dengan
   mendefinisikan FontFamily dari Resources/#Lindsey (misalkan font yang digunakan adalah
   Lindsey.ttf). Terdapat OpenTypes fonts yang dapat digunakan pada WPF, untuk lebih jelasnya
   dapat dilihat pada http://msdn2.microsoft.com/en-us/library/ms746705.aspx.


     <TextBlock FontFamily="Resources/#Lindsey" FontSize="40" Grid.Row="0"
     Grid.ColumnSpan="2">Belajar XBAP</TextBlock>
Langkah 2 – Compile dan Jalankan! (F5)
Latihan 4 – Cara Membuat dan Menggunakan Flow Documents



Pada latihan ini kita akan mengenal Windows Presentation Foundation Flow Documents dan kita
akan meng-enhance solution yang sudah kita buat dengan menambahkan halaman yang
menjelaskan untuk setiap gambar yang ada pada listbox. WPF membagi dokumen menjadi dua
kategori berdasarkan kegunaannya. Ke dua kategori ini adalah "fixed documents" dan "flow
documents."

Fixed documents direncanakan untuk aplikasi yang butuh ketepatan “apa yang kita lihat adalah apa
yang kita dapatkan”, independen dari tampilan atau menggunakan hardware printer. Tipe
penggunaan dari Fixed documents termasuk desktop publishing, word processing, dan form layout,
dimana keaslian dari halaman aslinya sangatlah penting. Sebagai bagian dari tampilannya, sebuah
Fixed documents me-maintain ketepatan perubahan posisi dari elemen content independent dari
display. Untuk contohnya, sebuah halaman Fixed documents dilihat pada display 96 dpi akan tampil
sama persis dengan ketika output-nya ke 600 dpi laser printer, begitu juga jika diganti dengan 4800
dpi phototypesetter. Page layout akan tetap sama pada semua kasus, ketika kualitas dari dokumen
maximal ke kemampuan dari setiap device.

Flow documents di-design optimal untuk melihat dan membaca. Dibandingkan dengan
menggunakan satu layout yang tetap, flow documents secara dinamis menyesuaikan content dengan
run-time variables seperti ukuran Window, resolusi dari device, dan lainya. Flow documents
mengoptimalkan untuk melihat dan reading experience untuk pengguna, berdasarkan pada runtime
environment. Untuk contohnya, untuk flow documents yang sama akan secara dinamis reformat
untuk optimal dibaca pada tampilan high-resolution 19-inch atau pada 2x3-inch PDA screen.



Langkah 1 – Tambahkan sebuah Flow Document Baru
1. Pada file Page1.xaml yang sudah kita kerjakan sebelumnya, gantikan textblock “PlaceHolder”
   dengan sebuah kontrol <Frame>. Kontrol <Frame> merupakan sebuah elemen yang mendukung
   navigasi content di dalam content.
                 a. Set atribut Grid.Row menjadi 1 dan atribut Grid.Column menjadi 1. Posisi ini
                    menyebabkan frame berada pada baris ke dua, di dalam kolom dua dari Grid
                    (seperti kasus pada TextBlock).
                 b. Set atribut Source dari elemen <Frame> menjadi Intro.xaml dimana merujuk
                    kepada XAML flow document yang akan kita buat di langkah selanjutnya.


         <Page . . .>
         ...

                        <TextBlock FontFamily="Resources/#Lindsey" FontSize="40" Grid.Row="0"
      Grid.ColumnSpan="2">Italy Trip</TextBlock>
                        <ListBox BorderThickness="0" Grid.Row="1" Grid.Column="0"
      ItemsSource="{Binding Source={StaticResource FilesData}}"></ListBox>
                       <Frame Grid.Row="1" Grid.Column="1" Source="Intro.xaml"/>

          </Grid>
        </Page>


2. Tambahkan sebuah flow document dengan nama Intro.xaml
               a.   Pada menu Project, klik Add New Item (Ctrl+shift+a).
               b.   Pilih Flow Document (WPF) template.
               c.   Masukan nama: Intro.xaml.
               d.   Click Add.




3. Ubah Font Family pada Intro.xaml menggunakan Lindsey (diwarnai dengan warna kuning).
4. Didalam elemen <Paragraph> masukan text “The Power of Windows Presentation Foundation”
   (diwarnai dengan warna hijau).


     <FlowDocument xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
       ColumnWidth="400" FontSize="14" FontFamily="Resources/#Lindsey"
       >
       <Paragraph>
               The Power of Windows Presentation Foundation
       </Paragraph>
     </FlowDocument>



5. Build dan Jalankan! (F5)
6.   Kemudian kita akan menambahkan content-nya dengan tambahan paragraph dan gambar.
     Pertama, kita akan membuat tulisan “The Power of Windows Presentation Foundation” ukuran
     font-nya lebih besar sehingga menjadi judul dari paragraph di bawahnya.


      <FlowDocument xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        ColumnWidth="400" FontSize="14" FontFamily="Resources/#Lindsey"
        >
        <Paragraph>
                <Figure Margin="0" Padding="0" HorizontalAnchor="ContentLeft"
                  Width="Content" FontSize="20">
                     <Paragraph>The Power of Windows Presentation Foundation</Paragraph>
                </Figure>
        </Paragraph>
      </FlowDocument>



     Dapat dilihat dari potongan code diatas bahwa kita menggunakan properti Figure untuk
     membuat judul dari content. Dengan ini kita dapat men-set FontSize menjadi 20 dan kita dapat
     mengatur Margin, Padding, width, dan HorizontalAnchor.


7.   Kemudian kita akan menambahkan paragraph lagi untuk menjadikannya sebuah artikel yang
     dapat dibaca. Tambahkan tag paragraph lagi dan buat content-nya sesuai selera. Kemudian
    tambahkan gambar di bawah paragraph yang kita buat dengan mengikuti potongan code di
    bawah ini:


     <FlowDocument xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
       ColumnWidth="400" FontSize="14" FontFamily="Resources/#Lindsey"
       >
       <Paragraph>
               <Figure Margin="0" Padding="0" HorizontalAnchor="ContentLeft"
                 Width="Content" FontSize="20">
                    <Paragraph>The Power of Windows Presentation Foundation</Paragraph>
               </Figure>
       </Paragraph>

       <Paragraph>
               //Tulis content sesuai keinginan..
       </Paragraph>

       <Paragraph>
               <Figure>
                       <BlockUIContainer>
                               <Image Source="Images/Lumayan.bmp"
                                MinHeight="100" MinWidth="100" />
                       </BlockUIContainer>
               </Figure>
       </Paragraph>

       <Paragraph>
               //Tulis content sesuai keinginan..
       </Paragraph>


     </FlowDocument>



8. Sebelum kita kelangkah selanjutnya, buat flow document baru untuk mengisi content dari dua
   gambar yang tersisa. Dan beri nama untuk ke-duanya, misalkan nama dari flow document yang
   baru adalah, Newyork.xaml dan Lumayan.xaml.

9. Compile dan jalankan! (F5)
10. Karena kita menggunakan flow document, kita dapat mengubah layout halaman yang ingin kita
    baca sesuai dengan keinginan. Navigasi tersebut terletak pada bagian bawah halaman (dapat
    dilihat pada gambar diatas dengan warna merah). Bahkan untuk paging atau halaman sudah
    disediakan oleh flow document. Fitur-fitur lainnya adalah searching, kita dapat mencari kata-kata
    yang diinginkan pada textbox yang disediakan.
Langkah 2 – Bind Frame Menjadi Resource


   1. Tambahkan file flow documents XAML yang sudah kita buat pada langkah sebelumnya ke
      proyek TesXBAP. Ke-tiga file tersebut merupakan acuan dari files.xml yang sudah kita buat
      sebelumnya, dan ke-tiga file ini diletakan pada atribut href.
               a. Intro.xaml
               b. Newyork.xaml
               c. Lumayan.xaml




   2. Ubah atribut Source dari elemen <Frame> untuk menggunakan binding expression.
               a. Binding expression akan merujuk kepada page resource {StaticResource
                  FilesData dan definisikan XPath menunjuk kepada atribut href. Dapat dilihat
                  pada potongan code dibawah ini.


        <Frame Grid.Row="1" Grid.Column="1" Source="{Binding Source={StaticResource FilesData},
        XPath=@href}"/>
3. Set properti IsSynchronizedWithCurrentItem dari ListBox menjadi true sehingga item yang
   sedang dipilih atau SelectedItem menjadi sinkron dengan item yang ada pada ItemCollection. Hal
   ini memastikan ketika item yang dipilih pada listbox, item yang dirujuk oleh frame juga menjadi
   berubah.


     <ListBox BorderThickness="0" Grid.Row="1" Grid.Column="0" ItemsSource="{Binding
     Source={StaticResource FilesData}}" IsSynchronizedWithCurrentItem="True"></ListBox>




Langkah 3 – Compile and Jalankan! (F5)
Kesimpulan

Pada hand on lab ini kita telah belajar mengenai:



         Membuat Sebuah XAML Browser Application
         Cara Menggunakan Data Binding

         Menambahkan Sebuah Custom Font

         Cara Menggunakan Flow Documents



XAML yang complete dapat dilihat dibawah ini.



<Page x:Class="TesXBAP.Page1"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Title="Page1"
  >
         <Page.Resources>
                 <XmlDataProvider Source="Files.xml" x:Key="FilesData" XPath="/files/pic"/>
                 <DataTemplate DataType="pic">
                         <Border BorderThickness="10" BorderBrush="LightGray"
                          HorizontalAlignment="Center" VerticalAlignment="Center" CornerRadius="10">
                                 <Border.LayoutTransform>
                                         <RotateTransform Angle = "-5"/>
                                 </Border.LayoutTransform>

                                 <Image Source="{Binding XPath=@src}" Height="100" Width="100"
                                  Stretch="UniformToFill"/>
                         </Border>
                 </DataTemplate>
         </Page.Resources>

         <Grid MinWidth="600" MinHeight="400">
                 <Grid.RowDefinitions>
                         <RowDefinition Height="Auto" />
                         <RowDefinition/>
                 </Grid.RowDefinitions>

                 <Grid.ColumnDefinitions>
                         <ColumnDefinition Width="Auto" />
                         <ColumnDefinition />
                 </Grid.ColumnDefinitions>

                 <TextBlock FontFamily="Resources/#Lindsey" FontSize="40" Grid.Row="0"
                   Grid.ColumnSpan="2">Belajar XBAP
                 </TextBlock>


                 <ListBox BorderThickness="0" Grid.Row="1" Grid.Column="0"
             ItemsSource="{Binding Source={StaticResource FilesData}}"
             IsSynchronizedWithCurrentItem="True">
            </ListBox>

            <Frame Grid.Row="1" Grid.Column="1" Source="{Binding Source={StaticResource FilesData},
             XPath=@href}"/>
  </Grid>
</Page>
Create Desktop Application with Expression Blend and Visual C# 2008 Express



Pada hand on lab ini kita akan membuat sebuah aplikasi yang menggunakan Microsoft Expression
Blend yang dikolaborasikan dengan Microsoft Visual C# 2008 Express. Aplikasi yang akan kita buat ini
menggunakan teknologi speech recognition yang ada pada Windows Vista. Pada aplikasi ini kita
dapat menulis pada papan atau board dengan pointer, kemudian jika kita klik tombol Analyze,
aplikasi akan menganalisa tulisan yang kita tulis. Dan kemudian sebuah Window akan muncul,
menuliskan apa yang sudah kita tulis. Setelah kita klik ok pada Window tersebut, window akan
hilang dan akan ada suara yang membacakan tulisan kita tadi dengan menggunakan Bahasa Inggris.

Overview Microsoft Expression Blend

Kita akan mempelajari bagimana cara menggunakan tools yang disediakan oleh Microsoft untuk
membuat aplikasi WPF, yaitu Microsoft Expression Blend September Preview. Pertama kita akan
mempelajari terlebih dahulu fungsi-fungsi yang ada pada Expression Blend. Berikut ini adalah print
screen dari Expression Blend dan dibagi menjadi 6 bagian utama.




   1. Menu utama
    2. ToolBox menyediakan kita bermacam-macam asset dimana kita dapat menggambar pada
       artboard. Berhentikan pointer pada tools untuk melihat namanya. Beberapa dari tools
       meliputi triangle dimana kita bisa klik kanan untuk melihat asset-aset yang lainnya. Untuk
       melihat dan mendapatkan asset yang komplit, kita dapat klik tombol Asset Library
    3. Panel Interaction.
         Bagian Triggers. Di bawah Triggers dalam panel Interaction kita dapat mendefinisikan
           properti triggers atau event triggers untuk control tertentu.
         Bagian Objects dan Timeline. Jika kita memiliki file XAML seperti Window1.xaml, buka
           pada artboard dalam Design view, struktur hirarki dari XAML document berada di
           bawah Objects and Timeline. Sebuah panah muncul disamping sebuah elemen jika
           elemen ini memiliki child, klik panah untuk meng-expand elemen atau sebaliknya. Untuk
           aplikasi WPF, root element adalah antara Window atau Page, dan kita dapat
           menggambar berbagai macam control sesuai keinginan kita dibawah elemen Window
           atau Page.

    4. Artboard, menyediakan dua pilihan untuk masalah tampilan atau views: kita dapat memilih
       Design view atau XAML view. Design view memperlihatkan tampilan dari aplikasi kita.
       Sedangkan XAML view menampilkan seluruh XAML document. Klik Design tab dan XAML tab
       untuk mengganti view antara ke-duanya.

    5. Panel Result, menampilkan informasi seperti warnings, errors dimana berasal dari error yang
       terjadi pada XAML documents, atau informasi output selama proyek sendang di build.

    6. Panel yang berisikan Project/Properties/Resources
        o The Project panel. 
              Bagian Files, kita dapat sebuah list dari semua files yang bersangkutan dengan
               proyek yang sedang dikerjakan dibawah Files pada panel Project. Ini adalah tempat
               dimana kita open files, add files, assemblies atau resources lainnya yang
               berhubungan seperti gambar, dan lain-lain ke proyek kita.
              Bagian Data, dibawah Data pada panel Project kita dapat menambahkan XML atau
               CLR object sources ke dalam proyek.

         o Panel Properties, menampilkan semua properti dan events dari sebuah control yang
           sedang dipilih.
         o Panel Resources, menunjukan kita semua resources yang digunakan untuk proyek yang
           sedang dikerjakan. Untuk contohnya adalah brushses, styles dan control templates.
Gambar di bawah ini merupakan keterangan tambahan untuk dapat lebih mengerti dalam
menggunakan Expression Blend.




Dari overview ini diharapkan kita mengenal tools yang akan kita gunakan untuk hand on lab
berikutnya. Microsoft Expression Blend dapat dikolaborasikan dengan Microsoft Visual C# 2008
Express untuk membuat suatu aplikasi yang powerfull. Selain dari sisi user interface juga dari sisi
code.

Untuk      mendapatkan       tools    Microsoft      Expression       Blend      versi   terakhir pada
www.microsoft.com/expression/. Pada situs tersebut juga terdapat fitur-fitur yang terbaru pada
versi terakhir dari Expression Blend. Agar lebih jelas, mari kita lihat latihan berikutnya.
Latihan 1 – Membuat Proyek InkCanvas dengan Menggunakan Visual C# 2008 Express




Langkah 1 – Membuat dan Menggunakan InkCanvas dengan Visual C# Express

   1. Pilih File, kemudian pilih New Project. Pilih aplikasi WPF dan kemudian beri nama dengan
      BuatInkCanvas.
   2. Pada Window1.xaml, klik kanan pada toolbox, pilih Choose Item.




   3. Pilih WPF components, lalu cari InkCanvas dan check pada checkbox-nya




   4. Kemudian kita harus menambahkan Reference agar dapat mengenali tulisan dengan tangan
      dan dapat aplikasi dapat bicara apa yang sudah kita tulis sebelumnya. Yang harus
      ditambahkan adalah System.Speech.dll dan IAWinFX.dll. System.Speech.dll berada pada
   tab .NET, sedangkan IAWinFX.dll diperoleh dari Windows Mobile SDK 6.0 untuk Windows
   Vista dan dapat di download pada:
   http://www.microsoft.com/downloads/details.aspx?FamilyId=C2B1E300-F358-4523-B479-
   F53D234CDCCF&displaylang=en




5. Jika kita lihat pada toolbox, sudah ada komponen InkCanvas yang siap digunakan. Gambar
   InkCanvas sesuai selera pada Design view. Dan tambahkan Button sebanyak tiga buah.




6. Klik kanan pada button, kemudian pilih Properties.
7. Ubah nama Button tersebut dengan Analyze, Clear, dan Close pada panel Properties.




8. Klik dua kali pada Button Analyze, kemudian kita akan pindah halaman ke Window1.xaml.cs.
   Kita tambahkan code untuk melakukan analisa tulisan yang ada pada board dan tidak lupa
   untuk      menambahkan        using      System.Speech.Synthesis           dan    using
   System.Windows.Ink. Aplikasi kita akan menampilkan sebuah window yang berisi tulisan
   yang sudah kita tulis sebelumnya. Jika kita belum menulis pada board, maka akan muncul
   window dengan pesan "You did not write anything on the canvas". Berikut adalah code yang
   digunakan untuk tombol Analyze (diwarnai dengan warna abu-abu).




     using System.Speech.Synthesis;
     using System.Windows.Ink;

     namespace BuatInkCanvas
     {

       public partial class Window1 : Window
       {
         SpeechSynthesizer _sr;

         public Window1()
         {
           InitializeComponent();

             _sr = new SpeechSynthesizer();
             _sr.Volume = 100;
             _sr.Rate = -2;

         }

         private void Analyze_Click(object sender, RoutedEventArgs e)
         {
           InkAnalyzer ia = new InkAnalyzer();

             if (inkCanvas1.Strokes.Count > 0)
             {
                   ia.AddStrokes(inkCanvas1.Strokes);
                   ia.Analyze();

                   string res = ia.GetRecognizedString();

                   MessageBox.Show("You wrote: " + res);

                   _sr.SpeakAsync("You wrote: " + res);
                 }
                 else
                 {
                   MessageBox.Show("You did not write anything on the canvas");
                 }
             }
         }
     }


   Fungsi dari potongan code “MessageBox.Show("You wrote: " + res);” adalah memunculkan
   Window yang berisikan pesan dari tulisan yang sudah kita tulis pada board. Sedangkan
   “_sr.SpeakAsync("You wrote: " + res);” berfungsi untuk menyuarakan tulisan yang sudah kita
   tulis pada board. Jika kita ingin mengatur besarnya suara ketika aplikasi membacakan
   tulisan, maka kita dapat mengaturnya pada _sr.Volume = 100.


9. Build dan jalankan 1 (F5)
Langkah 2 – Membuat Method untuk Button Clear dan Close

   1. Klik dua kali pada tombol Clear yang ada pada Design view. Kemudian kita akan pindah ke
      halaman Window1.xaml.cs. Begitu juga dengan tombol Close, klik dua kali sehingga kita
      dapat membuat method untuk tombol Close. Tambahkan code di bawah ini untuk method
      ke-dua tombol tersebut.


         private void Clear_Click(object sender, RoutedEventArgs e)
              {
                inkCanvas1.Strokes.Clear();
              }

         private void Close_Click(object sender, RoutedEventArgs e)
              {
                this.Close();
              }

   2. Build dan jalankan! (F5)

       Kita dapat melihat bahwa ke-dua tombol tersebut berjalan dengan baik. Setelah itu kita
       dapat lanjut ke latihan berikutnya.




Latihan 2 – Membuat User Interface Proyek InkCanvas dengan Expression Blend

Pada Latihan ini kita akan membuat user interface dari proyek InkCanvas dengan menggunakan
Expression Blend. Dengan ini kita dapat membuat tampilan atau user interface sesuka hati kita. Tidak
perlu lagi menggunakan bentuk yang kaku, seperti halnya aplikasi-aplikasi windows yang terdahulu.
Bentuknya monoton, dan tidak interaktif.

Langkah 1 – Buka Proyek InkCanvas dengan Expression Blend

   1. Buka tools Microsoft Expression Blend September Preview. Kemudian pilih Open Project,
      pilih direktori dimana terdapat BuatInkCanvas.csproj, klik Open.
2. Klik dua kali pada inkCanvas1 yang terletak pada tree [Window] hingga sekitarnya menjadi
   berwarna kuning, kemudian pada panel Properties pilih warna Background menjadi No
   Brush.




3. Kemudian klik dua kali pada [Grid] Buat sebuah Path dengan menggunakan Pencil (Y)
   dengan cara klik kanan pada Pen yang berada pada toolbox sebelah kiri Window, kemudian
   pilih Pencil.




4. Gambar dengan menggunakan Pencil pada Design view sebuah garis yang mengelilingi kotak
   dari inkCanvas1. Dan kemudian beri warna sesuai dengan keinginan kita.
5. Pilih Brush Transform yang terletak pada toolbox di sebelah kiri, atau cukup menekan
   tombol (B) untuk hotkeys. Kemudian akan muncul gambar seperti anak panah yang dapat
   kita ubah-ubah sesuai dengan selera kita. Brush Transform ini digunakan untuk mengatur
   gradasi warna dari item yang sedang kita pilih (dalam hal ini adalah [Path]).




6. Setelah itu klik kanan, kemudian pilih order, pilih Send to Back. Lalu lakukan hal yang sama
   dengan langkah nomor 3, 4, dan 5, namun untuk kali ini kita buat Path yang mengelilingi
   sekitar Window. Dan tidak lupa untuk klik kanan, kemudian pilih order, Send to Back.
7. Langkah selanjutnya adalah kita ingin menghilangkan tombol-tombol yang biasanya ada
   pada tampilan Window, yaitu minimize, restore, dan close. Dan juga kita ingin aplikasi ini
   berjalan tanpa ada tampilan kotak yang pada umumnya ada pada aplikasi Windows. Garis
   terluar atau boundary dari Window aplikasi ini adalah Path yang kita buat pada langkah
   sebelum ini.



   Untuk melakukannya yang kita perlukan hanyalah dua langkah, yaitu klik dua kali pada
   [window] sampai sekitarnya berwarna kuning, kemudian ubah warna Background yang
   berada pada Brush menjadi No Brush. Langkah yang berikutnya adalah mencentang
   AllowsTransparency yang terletak pada Appearance.




8. Build dan jalankan! (F5)
   Jika dilihat dari aplikasi yang sudah dijalankan, ternyata masih terdapat kekurangan yaitu,
   karena ketidakadaannya kotak atau frame yang biasanya ada pada sebuah Window, maka
   aplikasi yang kita buat tidak dapat dipindahkan ke mana-mana. Untuk itu kita harus
   menambahkan code agar aplikasi yang kita buat dapat digerakan sesuai keinginan (sepeti
   layaknya sebuah aplikasi windows lainnya).

9. Buka kembali Microsoft Visual C# 2008 Express, lalu pilih file, open project, pilih
   BuatInkCanvas.sln. Kemudian klik dua kali pada Window1.xaml.cs yang merupakan child
   dari Window1.xaml. Dalam hal ini, kita akan membuat sebuah window menjadi dapat
   digerakan ketika drag atau menahan klik sambil digerakan ke tempat tujuan yang diinginkan.



   Pertama kita harus membuat sebuah event pada Window1.xaml yaitu,
   MouseLeftButtonDown. Event ini berfungsi ketika kita menekan tombol mouse sebelah kiri
   (klik + tahan), kita dapat melakukan sesuatu, dalam hal ini kita ingin Window dapat
   digerakan sesuai keinginan.

     <Window
       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
       x:Class="BuatInkCanvas.Window1"
       Title="Window1" Height="300" Width="400" Background="{x:Null}" AllowsTransparency="True"
     WindowStyle="None" MouseLeftButtonDown="Window_MouseLeftButtonDown"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2006"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d">




   Kemudiah kita harus menambahkan code pada Window1.xaml.cs. Dapat dilihat pada
   potongan code di bawah ini.

     private void Window_MouseLeftButtonDown(object sender,
     System.Windows.Input.MouseButtonEventArgs e)
               {
                      this.DragMove();
               }
Langkah 2 – Mengubah Design dari Button

Seperti yang kita lihat pada hampir semua aplikasi Windows, menggunakan design tombol atau
button yang bentuknya monoton. Sekarang kita akan mencoba membuat deisgn dari tombol yang
cukup menarik.

   1. Klik dua kali pada tombol Analyze hingga sekelilingnya berwarna kuning, kemudian klik
      kanan, pilih Edit Control Parts (Template), pilih Edit a Copy…




   2. Masukan nama sesuai dari keininan kita, misalkan kita beri nama dengan TesDesign. Klik Ok.




   3. Pada panel Object and Timeline, klik kanan Chrome, pilih Delete. Kemudian pilih Grid yang
      berada pada toolbox sebelah kiri. Klik dua kali sehingga Grid menjadi child dari Template.
4. Pilih Asset Library, ketik “content”, kemudian pilih ContentPresenter. Ini berguna untuk
   memasukan tulisan “Analyze” ke dalam tombol. Klik dua kali pada Grid hingga berwarna
   kuning. Gambarkan ContentPresenter di dalam tombol dengan cara klik dua kali pada
   ContentPresenter yang berada di atas Asset Library dan letakan posisinya di tengah dengan
   mengubahnya pada panel Layout (HorizontalAlignment dan VerticalAlignment.




5. Langkah berikutnya adalah menggambar sebuah Path dengan tools Pencil (Y) untuk
   menggambar layout dari tombol Analyze. Seperti pada langkah sebelumnya, kita klik kanan
   pada Path yang baru kita gambar, pilih Order, kemudian Send to Back. Warnai Path tersebut
   sesuai dengan selera pada properti Fill.
6. Jika sudah selesai men-design, klik Return scope to [Window] yang terletak pada panel
   Oject and Timeline.




7. Untuk tombol berikutnya, yaitu tombol Clear dan Close. Kita cukup menggunakan dari
   design yang sudah kita buat sebelumnya. Caranya adalah dengan klik dua kali pada tombol
   Clear hingga sekitarnya berwarna kuning, klik kanan pada tombol Close, pilih Edit Control
   Parts (Template), kemudian pilih Apply Resource, pilih TesDesign.




   Lakukan juga untuk tombol Close, sehingga memiliki design yang sama. Dengan fungsi ini
   kita tidak perlu repot-repot untuk men-design ulang untuk setiap tombol yang kita buat.
   Cukup membuat satu design untuk semua tombol.

8. Build dan Jalankan! (F5)
   Coba kita tulis suatu tulisan dan kemudian klik tombol Analyze. Maka akan keluar sebuah
   Window yang menuliskan “You wrote: //sesuatu yang sudah kita tulis”. Jika kita klik Ok pada
   Window tersebut maka ada suara yang membacakan apa sudah kita tulis.
   Apabila kita menggambar sebuah shape pada board maka aplikasi juga dapat mengenalinya,
   sebagai contoh kita buat sebuah shape segitiga sama kaki, kemudian klik tombol Analyze.
   Aplikasi akan menganalisanya kemudian menulis dan membacakannya dalam bahasa inggris.




9. Karena aplikasi ini berjalan di Windows Vista, maka kita dapat menggunakan teknologi
   Speech Recognition untuk menjalankan aplikasi ini. Untuk mencobanya kita dapat mulai
   menjalankan aplikasi Speech Recognition. Klik tombol Start Windows (pada pojok kiri
   bawah), ketik Speech Recognition pada search area, kemudian pilih Windows Speech
   Recognition. Tunggu beberapa saat dan aplikasi speech recognition akan muncul di atas
   Window. Setelah muncul nyalakan aplikasi tersebut dengan menekan tombol bergambar
   Microphone.
10. Coba tulis kembali pada board sebuah tulisan atau gambar. Kemudian coba katakana
    “Analyze” dengan bahasa inggris. Maka aplikasi akan secara otomatis meng-klik tombol
    Analyze dan langsung menjalankan fungsinya. Begitu juga bila kita bicara “Clear” atau
    “Close”.




   Windows dapat mengenali kata-kata yang kita sebutkan pada aplikasi InkCanvas (seperti
   mengenali ketika kita sebut “Analyze”, “Clear”, dan “Close”) karena, semuanya adalah
   sebuah button atau tombol yang sudah kita definisikan sewaktu proses coding. Jika kita ingin
   membuat sebuah aplikasi yang dapat menganalisa suatu “suara” yang Windows tidak kenal,
   maka kita harus mendefinisikannya terlebih dahulu. Untuk lebih jelasnya dapat kita lihat
   pada latihan berikutnya.
Kesimpulan

Pada hand on lab ini kita telah belajar mengenai:



        Membuat Aplikasi dengan InkCanvas
        Belajar Menggunakan Speech Recognition pada Aplikasi
        Membuat User Interface dengan Expression Blend



Dari latihan-latihan di atas dapat kita lihat bahwa, aplikasi Windows dapat menggunakan user
interface yang tidak monoton, jika kita lihat contohnya dari latihan diatas kita dapat membuat
sebuah user interface seperti dengan menggunakan pensil. Hal ini membuktikan kita dapat membuat
sebuah interface yang disesuaikan dengan pengguna aplikasi tersebut. Jika dilihat dari sisi teknologi
speech recognition, tentunya ini menjadi sumber ide untuk membuat aplikasi lainnya yang inovatif,
dimana sebuah aplikasi dapat berjalan tanpa perlu kita menggunakan tangan.
Create Cool Desktop Application with Speech Recognition in Windows Vista



Pada hand on lab kali ini kita akan membuat sebuah aplikasi yang menerima input suara dari kita
kemudian aplikasi tersebut melakukan sebuah aksi yang kita inginkan. Aplikasi yang akan kita buat
ini cukup sederhana, tetapi kita dapat belajar meregister suatu suara atau voice yang dapat didengar
atau dapat dikenali oleh Windows. Untuk lebih jelasnya mengenai aplikasi yang akan kita buat, kita
akan menggunakan sebuah gambar yaitu misalkan sebuah foto dari ruangan Microsoft Innovation
Center (MIC) dari Universitas Indonesia (dapat menggunakan gambar lain). Pertama-tama keadaan
ruangan MIC ini dalam keadaan gelap, kemudian kita akan mengucapkan sebuah “mantra” untuk
menerangkan ruangan tersebut. Kemudian terdapat juga “mantra” untuk menggelapkannya
kembali.

Kita akan menggunakan “mantra” yang digunakan oleh Harry Potter untuk menerangkan suatu
ruangan, begitu juga saat mematikannya. “Mantra” itu adalah Lumos (untuk menerangkan suatu
area), Nox (untuk mematikannya), dan Avada Kedavra (untuk mematikan aplikasi yang akan kita
buat). Untuk lebih jelasnya mari kita langsung ikuti langkah-langkah dibawah ini.




Latihan 1 – Membuat WPF Menggunakan Expression Blend


Berbeda dari latihan-latihan sebelumnya, aplikasi kali ini kita akan membuat sebuah proyek baru
dengan menggunakan Expression Blend, karena kita akan membuat user interface-nya terlebih
dahulu baru kemudian kita lakukan proses coding untuk menyelesaikan aplikasi tersebut.

Langkah 1 - Membuat Proyek Baru dengan Menggunakan Expression Blend
   1. Buka aplikasi Microsoft Expression Blend September Preview
   2. Pilih New Project…
   3. Kemudian pilih project type WPF Application (.exe), beri nama proyek dengan HarryPotter,
       tentukan direktori tempat proyek akan disimpan, gunakan bahasa C#, dan target adalah
       .NET Framework 3.0. Klik Ok

Langkah 2 – Menambahkan Gambar pada Proyek

   1. Kita akan memasukan gambar dari ruangan MIC dengan: pilih Project, kemudian Add an
      Existing Item (Ctrl+i). Setelah itu cari gambar dari MIC UI (Ormai.png) dan klik Open.
   2. Kemudian klik dua kali Ormai.png pada panel Project. Maka secara otomatis gambar dari
      MIC UI akan tampil pada Design view. Sesuaikan ukuran gambar dengan ukuran Window.
   3. Beri nama [Image] menjadi MIC. Untuk mengubah nama, klik pada [Image] kemudian pada
      panel Properties ada sebuah texbox nama. Masukan nama MIC.


Langkah 3 – Membuat Sebuah Rounded Rectangle

   1. Pilih Rectangle (M) yang berada pada toolbox di sebelah kiri.
   2. Gambarkan rectangle tersebut sesuai ukuran dari gambar MIC UI. Beri nama [Rectangle]
      tersebut dengan Malam.
   3. Berilah warna hitam pada Malam dengan Opacity 85%. Navigasi warna terdapat pada panel
      Prpoerties (Brushes), sedangkan Opacity terdapat pada Appearance.




   4. Untuk membuat rectangle Malam menjadi rounded, kita perlu mengubah RadiusX dan
      RadiusY yang terdapat pada Appearance. Seuaikan bentuk dari rectangle Malam dengan
      gambar MIC. Set RadiusX dengan 71.5 dan RadiusY dengan 71.5 seperti pada gabar diatas.
   5. Set Background dari Window menjadi No Brush. Centang AllowTransparency yang berada
      pada Appearance.
   6. Build dan jalankan! (F5)



Latihan 2 – Melanjutkan Proyek Dengan Visual C# 2008 Express


Pada latihan 1 di atas kita sudah membuat sebuah user interface untuk aplikasi yang akan kita buat.
Tentunya kita harus membuat code agar aplikasi tersebut bisa berjalan sesuai requirement.
Sebelumnya telah disebutkan bahwa, kita ingin membuat sebuah aplikasi yang dapat menerima
“mantra” yang kita sebutkan melalui Speech Recognition pada Windows Vista.

Langkah 1 – Membuka Proyek Dengan Visual C# 2008 Express
   1. Buka aplikasi Microsoft Visual C# 2008 Express
   2. Pilih File, Open Project, cari dimana HarryPotter.sln berada, kemudian klik Open
   3. Setelah solution terbuka, klik kanan pada gambar, kemudian pilih View Code. Maka kita akan
       pindah halaman ke Window1.xaml.cs

Langkah 2 – Menambahkan Reference System.Speech

   1. Klik kanan pada Reference, pilih add reference
   2. Cari System.Speech, kemudian pilih Ok
   3. Tambahkan namespace baru:

         //Speech Namespaces
         using System.Speech.Recognition;
         using System.Speech.Synthesis;
Langkah 3 – Memasukan “Mantra” Agar dapat Dikenali

   1. Definisikan Speech Instances dan “mantra” yang akan digunakan untuk menjalankan aplikasi.
      Dalam hal ini kita akan memasukan 3 “mantra”, untuk menyalakan ruangan ("Lumos"),
      menggelapkan ("Nox"), dan mematikan aplikasi ("Avada Kedavra"). Definisikan
      konfigurasi Synthesizer menjadi -1.

        // Speech Instances
             private SpeechRecognizer speechRecognizer = new SpeechRecognizer();
             private SpeechSynthesizer speechSynthesizer = new SpeechSynthesizer();

            // Spells
            private const string AVADAKEDAVRA = "Avada Kedavra";
            private const string LUMOS = "Lumos";
            private const string NOX = "Nox";

            //Configuration
            private const int SPEECHRATE = -1;



   2. Kemudian kita isi public Window1() dengan code di bawah ini:

        this.InitializeComponent();

                         // Initialize Recognizer
                         LoadGrammar();
                         speechRecognizer.Enabled = true;

                    // Hook up handler
                    speechRecognizer.SpeechRecognized += new
        EventHandler<SpeechRecognizedEventArgs>(speechRecognizer_SpeechRecog
        nized);

                         // Initialize Synthesizer
                         speechSynthesizer.Rate = SPEECHRATE;


   3. Buat method LoadGrammar() dengan tujuan memasukan “Mantra" agar dapat dikenali oleh
      aplikasi.



        private void LoadGrammar()
             {
               //Choices Instance
               Choices choices = new Choices();

              // Spell Commands Added to choices
              choices.Add(ALOHOMORA);
              choices.Add(WINGARDIUMLEVIOSA);
              choices.Add(IMPERIO);
              choices.Add(CRUCIO);
              choices.Add(AVADAKEDAVRA);
              choices.Add(LUMOS);
              choices.Add(NOX);
            Grammar grammar = new Grammar(choices.ToGrammarBuilder());
            speechRecognizer.LoadGrammar(grammar);
        }




4. Kemudian kita tambahkan syarat jika “Mantra” Lumos, maka Malam (rectangle yang
   menutupi gambar) akan berubah Opacity nya menjadi 0. Jika “Mantra” Nox, maka Opacity
   Malam akan menjadi 85% atau sama dengan 0.85. Dan jika “Mantra” Avada Kedavra, maka
   aplikasi akan ditutup.

    void speechRecognizer_SpeechRecognized(object sender, SpeechRecognizedEventArgs e)
        {
           string result = e.Result.Text;

            if (result == LUMOS)
            {
               Malam.Opacity = 0;
            }
            else if (result == NOX)
            {
               malam.Opacity = 0.85;
            }
            else if (result == AVADAKEDAVRA)
            {
               this.Close();
            }
        }




5. Karena sewaktu menggunakan Expression Blend kita men-set WindowStyle menjadi None.
   Maka kita harus menambahkan event MouseDown pada Window1.xaml (ditandai dengan
   warna abu-abu).

    <Window
           xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
           xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
           x:Class="TechZedDemo.Window1"
           x:Name="Window"
           Title="TechZed Demo"
           Width="1014" Height="740" Opacity="1" Visibility="Visible" Background="{x:Null}"
    AllowsTransparency="True" MouseLeftButtonDown="Window_MouseLeftButtonDown"
    WindowStyle="None">



6. Tidak lupa kita menambahkan code pada Window1.xaml.cs Seperti pada hand on lab
   sebelumnya.

    private void Window_MouseLeftButtonDown(object sender,
    System.Windows.Input.MouseButtonEventArgs e)
         {
             this.DragMove();
         }
7. Build dan Jalankan (F5). Aplikasi Speech Recognition akan secara otomatis terbuka dan jika
   statusnya Sleeping, kita cukup mengatakan “Start Listening” hingga statusnya berubah
   menjadi Listening. Akan terbuka juga window berisikan gambar ruangan MIC yang gelap.
   Coba kita katakan “Lumos”, maka dapat terlihat ruangan MIC menjadi terang.




8. Kemudian coba katakan “Nox”, maka ruangan MIC akan menjadi gelap kembali.
   9. Setelah itu coba katakana mantra “Avada Kedavra”. Maka secara otomatis, aplikasi akan
      tertutup.



Jika mendapat masalah speech recognition tidak dapat menganalisa “Mantra” kita, coba tingkatkan
kemampuan dari speech recognition dengan melatihnya. Semakin sering kita latih, maka Windows
akan semakin familiar dengan suara kita dan tidak perlu meminta ulang perintah kita.
Kesimpulan

Pada hand on lab ini kita telah belajar mengenai:



        Membuat Proyek Baru dengan Expression Blend
        Meregister Suara Agar dapat Dikenali Aplikasi



Dengan berkembangnya teknologi Speech Recognition
                                           Penutup



Tujuan dari pembuatan buku ini adalah agar para pembaca mengetahui dan mengaplikasikan
teknologi C# .NET Framework 3.0 atau versi terakhirnya pada desktop application. Dengan buku ini
penulis berharap para pembaca buku ini menjadi terinspirasi dan termotivasi untuk membuat
aplikasi-aplikasi lainnya yang lebih inovatif, lebih canggih, dan tentunya menggunakan fitur-fitur
yang disediakan oleh C# dengan menggunakan Microsoft Visual C# 2008 Express.

				
DOCUMENT INFO
Shared By:
Categories:
Tags:
Stats:
views:41
posted:9/17/2012
language:Indonesian
pages:118