Textbox dan Button Silverlight dengan Microsoft Expression Blend 3

Hi, guys.. Pada tutorial kali ini, kita akan belajar tentang dasar-dasar Textbox dan Button Silverlight. Tool yang akan kita gunakan adalah Microsoft Expression Blend 3 (pastikan sudah terinstal di komputer kamu) dan tentunya .Net Framework 3.5 SP1 dan pastikan juga browser default kamu sudah terinstal plug-in Silverlight. Kalau semua bahan sudah tersedia, baru kita mulai memasak. Siap? Ayo buka Expression Blend 3 kamu dan kita mulai ngoprek sama-sama..

1. Setelah Expression Blend terbuka, pilih New Project, lalu pilih Silverlight 3 Application + Website. Silahkan pilih nama file yang kamu suka, pilih Visual C# dalam drop-down-list Language (lihat lingkaran merah di Gambar 1), dan tekan OK.

Gambar 1. New Project.

2. Kemudian muncullah MainPage.xaml dengan sebidang ruang kosong yang bisa kita gunakan untuk berekspresi. Sekarang klik tab Assets di sebelah kiri layar (di sebelah tab Project) lalu cari TextBox (Gambar 2). Ketemu? Nah, sekarang drag-drop saja TextBox itu ke bidang kerja kita dan atur ukurannya sesuka hati.

Gambar 2. Tab Assets, cari TextBox.

3. Pastikan TextBox yang telah kita buat dalam keadaan terseleksi. Kemudian pada tab Properties di sebelah kanan layar, masukkan nama TextBox pada kolom Name. Misalkan kita beri nama TextBoxSatu (Gambar 3).

Gambar 3. Ubah nama TextBox.

4. Sekarang, kita akan membuat button. Cari button di tab Assets (seperti langkah 2), kemudian drag-drop ke bidang kerja. Ubah tulisan pada tombol dengan cara klik kanan pada button dan pilih Edit Text (dapat dilakukan juga pada TextBox).

5. Beri nama button seperti pada langkah 3. Beri nama ButtonGue.

6. Cari TextBlok pada tab Assets (seperti langkah 2), drag-drop ke bidang kerja dan ubah nama TextBlok kita (seperti langkah 3) menjadi BoxHasil.

7. Klik button yang telah kita buat tadi, kemudian pada tab Properties (lihat gambar 3), klik gambar petir di bagian paling kanan. Tombol tersebut akan membuka property event tombol kita.

8. Klik dua kali pada input box Click (Gambar 4), maka akan terbuka MainPage.xaml.cs.

Gambar 4. Double Click di sini.

9. Berikutnya, ketikkan kode ini

private void ButtonGue_Click(object sender, System.Windows.RoutedEventArgs e)
{
String IsiTextBox = TextBoxSatu.Text;
/*
Baris di atas ini fungsinya untuk menyimpan
isi text box yang udah kita bikin ke dalam
sebuah variabel string.
*/
BoxHasil.Text = "Halo "+IsiTextBox+"... \nApa kabar?";
/*
Baris berikutnya fungsinya untuk menampilkan kata-kata (string) tertentu
ke dalam text block yang udah kita bikin tadi. Yang dalem tanda
kutip itu adalah string trus tanda plus (+) itu untuk
ngegabung string satu (misalkan "Halo") dengan string IsiTextBox.
*/
}

10. Setelah diketik, tekan F5 (atau klik Project->Run Project) untuk menjalankan program ini, dan.. Poof, lihat apa yang terjadi...

Nah, udah jago dong sekarang pake textbos sama button? Nanti kita belajar lagi yang lebih seru ya...

-- Koding Sambil Ngopi --
-- Farhad Alaydrus --

Galeri Foto Keren Dengan Deep Zoom Composer

Satu lagi teknologi keren dari Microsoft yang bisa kita gunakan untuk berekspresi dengan gambar dan animasi, namanya Deep Zoom Composer. Sesuai namanya, software ini digunakan untuk membuat aplikasi berbasis Silverlight dengan kemampuan zoom (deep zoom) sampai ratusan kali. Pernah liat foto di dalam foto, dan ada foto lagi di dalam foto itu, terus ada foto lagi di dalam foto yang ada di dalam foto itu? Nah, kita bisa buat yang seperti itu dengan Deep Zoom Composer dengan mudah dan cepat. Untuk memulai berkarya, kita perlu mempersenjatai diri dengan .Net Framework 3.5, Silverlight 3.0, dan Deep Zoom Composer-nya sendiri. Kalo mau download Deep Zoom Composer klik aja disini. O ya, jangan lupa beberapa foto yang akan kita utak-utik. Kalau semuanya sudah lengkap, berarti kita siap beraksi dengan beberapa langkah penting:

1. Buka Deep Zoom Composer dan pilih aja New Project di jendela yang muncul pertama kali atau klik File->New Project, beri nama project sesuai keinginan dan tekan OK.

2. Akan ada 3 tombol utama di bagian atas window, yaitu Import, Compose, dan Export (gambar 1). Ketiga tombol ini juga merepresentasikan alur kerja kita di Deep Zoom Composer yaitu pilih foto yang akan diproses, atur penempatan foto, dan export hasil kerja kita.

Gambar 1. tombol utama.

3. Pilih Import, lalu klik Add Image di sebelah kanan window. Nah, selanjutnya tinggal browse aja gambar atau foto-foto yang kita inginkan.

4. Setelah kita punya foto-foto, waktunya kita mengatur posisinya. Klik Compose, dan tampilan window akan berubah. Lebih banyak lagi toolbar yang muncul di sebelah kiri layar (Gambar 2). Untuk mengatur posisi gambar, kita hanya cukup melakukan drag and drop sesuka hati. Coba tempatkan satu foto, kemudian zoom jauh ke dalam foto tersebut dengan tool Zoom (scroll up) dan tempatkan foto lain di sana.

Gambar 2. Tool Compose.

5. Setelah puas dengan komposisi yang kita atur, waktunya meng-export hasilnya. Klik Export, lalu pilih tab Custom di sebelah kanan layar (Gambar 3). Pilih format export (Pilih aja Silverlight Deep Zoom), dan tentukan nama file outputnya. Setelah semua lengkap, tekan tombol Export dan BOOM, jadilah galeri foto keren ala Deep Zoom Composer.

Gambar 3. Panel Export.

Tinggal dicobain deh sekarang. Keren kan?

-- Koding Sambil Ngopi --
-- Farhad Alaydrus --

Secangkir Light Latte Dan Perkenalan Dengan Silverlight 3: Jangan Mau Jadi Penonton Doang

Malam ini gw kembali berhadapan dengan Cerz (laptop gw satu-satunya) yang masih aja semangat muter lagu There She Goes-nya Sixpense None The Richer. Secangkir light latte nemenin gw begadang malem ini, cukup kopi ringan karna gw emang ga ada niat bangun sampe pagi. Sambil berusaha ngikutin lirik lagu yang gw cuma tau sepotong-sepotong ini, gw tiba-tiba keinget sama kejadian yang ternyata mengubah hidup gw.
Waktu itu pertengahan Desember 2008 pas kampus gw kedatangan dua orang dari Microsoft Indonesia yang bakal jadi pembicara seminar IT-Today garapan anak Ilkom IPB. Gw sebagai ketua panitia kontan harus menyambut dong pas dua tamu yang udah dinanti itu turun dari taksi (gokil juga naik taksi dari Jakarta ke Darmaga yang jauh dan ngampung abis). Dua orang itu adalah Pak Norman Sasono sama Pak Julius Fenata yang menyampaikan seminar yang inspiratif banget buat anak Ilkom yang masih cupu kayak gw.

Selama ini gw ngeliat software ya cuma sebagai tool aja, tapi hari itu Pak Norman dan Pak Julius memperkenalkan ke gw dan temen-temen barang baru yang bener-bener keren, nyeni dan bikin mangap sampe ngga sadar kalo ada lalet masuk ke mulut (sumpah ada lalet hamper masuk ke mulut waktu itu). Barang baru itu bernama Silverlight. Dan Silverlight bener-bener ngebius gw sampe sekarang (nah gw aja nulis ini setengah sadar jadinya).

Sebenernya gw udah ketinggalan jaman banget waktu pertama kali tau soal Silverlight, karna sebenernya teknologi itu udah dirilis sejak taun 2007 (bayangkan gw telat setaun). Oke, buat lw yang belom tau (sebelum makin ketinggalan) atau mau tau lebih lanjut soal ni barang, gw bakal certain deh...

Silverlight Brief History

Oke, jadi gini ceritanya (Auuuu… Hehe masih inget acara di RCTI yang judulnya Kismis ga? Auuuuuuuu).. Pada zaman dahulu kala, tepatnya taun 2006, Microsoft ngeluarin teknologi buat bikin user interface desktop yang canggih, cantik, menarik dan terintegrasi sama .Net Framework. Teknologi keren itu dinamain Windows Presentation Foundation alias WPF. Aplikasi desktop yang bisa dibangun pake teknologi ini bener-bener bisa ngasih user experience yang luar biasa banget buat penggunanya. Nah, terus setelah kemunculan gilang gemilang dari si cantik WPF, dikembangkanlah adiknya bertugas untuk mempercantik dan memperkaya tampilan website. Adiknya itu adalah WPE/E yang kemudian berganti nama (lengkap dengan bubur merah-putih) menjadi Silverlight.

Silverlight terus dikembangkan mulai dari Silverlight 1 dengan kode pendukung JavaScript dirilis tanggal 5 September 2007, Silverlight 1.1 Alpha yang terintegrasi sama .Net yang ujung-ujungnya menjadi Silverlight 2 pada 14 Oktober 2008. Ga sampe disitu aja, sekarang udah hadir nih Silverlight 3 (Horeee!!!)…
Sekarang ini udah banyak banget web yang pake Silverlight. Kalo mau liat-liat coba deh dateng aja ke http://silverlight.net atau coba aja baca koran dengan gaya baru di , dan masih buanyak lagi web seru lainnya.
So jangan mau jadi penonton aja, kita cobain yuk belajar sama-sama buat bikin sesuatu pake Silverlight 3…


-- Koding Sambil Ngopi --
-- Farhad Alaydrus --