M Reza Faisal

Pada posting di sini, telah diberitahukan bahwa Expression Blend 3 adalah salah satu tool yang dapat digunakan untuk membuat aplikasi berbasis Silverlight dan dapat pula digunakan untuk membantun aplikasi berbasis WPF.  Bagi yang belum memiliki tool ini mungkin bisa mengunduh versi trialnya di http://www.microsoft.com/expression/products/Blend_Overview.aspx atau bagi pelajar dan mahasiswa bisa mendapatkan versi fullnya di https://www.dreamspark.com/default.aspx.

Berikut beberapa software yang bisa didapatkan secara gratis di Dream Spark.

Untuk menginstall Expression Blend 3 maka paling tidak diperlukan sistem operasi windows XP atau yang lebih baru lagi yang didalamnya telah diinstall .NET Framework 3.5 SP1.

{Berkenalan dengan Blend 3}

Setelah proses installasi Blend 3 sukses dilakukan maka sebaiknya berkenalan dulu dengan Blend 3,. Terlebih dahulu dapat berjalan-jalan sambil melihat-lihat contoh aplikasi Silverlight.  Contoh-contoh ini dapat dilihat pada bagian Welcome Screen yang akan ditampilkan saat Blend 3 pertama kali dijalankan.

Welcome Screen ini juga dapat ditampilkan dengan memilih Help > Welcome Screen. Pada tab Samples yang ada pada jendela ini dapat dilihat daftar contoh aplikasi Silverlight dan WPF. Yang menarik diantaranya adalah game BeeHive seperti yang bisa dilihat pada gambar di bawah ini.

Atau PCGamming seperti di bawah ini.

{Memulai Bekerja dengan Blend 3}

Setelah puas berjalan-jalan, maka dapat dimulai menggunakan Blend 3 untuk membuat content Silverlight sederhana. Langkah pertama yang dapat dilakukan adalah memilih File > New Project pada menu.

Kemudian pilih Silverlight pada Project type, maka user akan dihadapkan 4 pilihan, pilih Silverlight 3 Application + Website. Pada kolom Name berikan nama project yang diinginkan, tentukan folder yang digunakan untuk menyimpan project dan tentukan pula bahasa pemrograman yang ingin digunakan (ada 2 pilihan yaitu C# dan VB.NET). Kemudian pilih OK.

Pada tab Projects yang disebelah kanan layar, pada Solution akan bisa dilihat 2 project, yaitu :

1. Project Silverlight (SilverlightApplication2), project ini berisi file-file yang erat kaitan dengan Silverlight, seperti file xaml, xaml.cs dan juga dapat disimpan file-file media seperti gambar, audio dan video yang akan ditampilkan pada file xaml.
2. Project Webapplication/Website (SilverlightApplication2Site), setelah project di atas di-bundle ke dalam file xap, maka pada halaman Default.html dapat dilihat bagaimana file xap didaftarkan agar content Silverlight dapat dinikmati pada web browser.

Saat project dibuat, maka file yang pertama ditemui adalah MainPage.xaml, pada file ini dapat ditambahkan objek-objek seperti kurva dan media. Dapat dilihat pada gambar di atas, lingkaran merah nomor 1 yang ada disebelah kiri adalah toolbox yang berisi objek-objek yang dapat dipilih untuk di-drag ke file MainPage.xaml.

Pada lingkaran nomor 2 yang ada di sebelah kanan, dapat dilihat opsi yang bisa digunakan untuk mengubah mode untuk melihat halaman MainPage.xaml, terdapat beberapa pilihan :

1. Design, adalah mode visual.
2. XAML, adalah model untuk melihat source code dari file xaml.
3. Split, adalah untuk melihat sekaligus kedua mode di atas.

Setelah menambahkan objek pada MainPage.xaml, maka untuk melihat hasilnya pada web browser, dapat dilakukan dengan memilih Project > Run atau langsung menekan tombol F5.

Kalau diperhatikan pada tab Projects, pada project Website/Webapplication (SilverlightApplication2Site), setelah proses Run dapat dilihat terdapat tambahan folder dengan nama ClientBin yang didalamnya terdapat file SilverlightApplication2.xap.

{Asset}

Asset terdiri atas objek-objek seperti kurva, media dan item-item lain seperti tombol, dropdownlist dan lain-lain. Untuk melihat semua daftar aset dapat dilakukan dengan cara memilih tab Asset.

Selain itu juga dapat dipilih dengan memilih seperti pada gambar di bawah ini.

Untuk memasukkan item-item tersebut pada halaman XAML cukup dengan mengklik salah satu item kemudian tinggal mengarahkan mouse ke area pada halaman XAML untuk menggambarkan item tersebut. Setelah item diletakkan pada halaman XAML maka secara otomatis dapat dilihat property dari item tersebut pada bagian sebelah kanan layar.

{Animasi}

Apabila ingin membuat animasi dari item yang ada pada halaman XAML, maka terlebih dahulu tampilan Blend diubah untuk keperluan itu. Caranya dengan memilih Window > Workspaces > Animation. Maka pada bagian bawah akan dapat dilihat tampilan seperti berikut :

Langkah selajutnya adalah menambahkan storyboard dengan cara memilih tombol + (seperti yang dilihat pada lingkaran merah). Setelah menambahkan dan memberi nama storyboard, maka akan dilihat tampilan seperti berikut ini.

{Akhir pengantar}

Sekian dulu ulasan singkat pada posting ini, pada posting selanjutnya akan di bawah lebih detail lagi dari bahasan di atas. Sebagai panduan, mungkin bisa melihat bantuan yang diberikan Blend, dengan cara memilih menu Help > User Guide atau dengan menekat F1.

Selamat mencoba.