Yow.. yoww… Basi gak basi, gapapa lah.. namanya juga ilmu. Heheheee!
Buat yang baru banget belajar Silverlight, yuk kita belajar bareng! Jangan khawatir… Silverlight itu umurnya baru sekitar 1 tahun. Jadi sama sekali nggak terlambat kalau baru belajar sekarang.
“Sekarang?”
“Iya sekarang. Gak usah tunggu besok dahh..”
“Tapi kan susah?”
“Siapa bilang? Coba aja ikutin langkah di bawah ini..”
- Supaya rapih, bikin folder dulu deh. Misalnya nama foldernya BelajarSilverlight dan ada di drive D. Jadi lengkapnya D:\BelajarSilverlight\.
- Siapin file JavaScript yang namanya Silverlight.js. Script ini bisa didapat kalau udah install Silverlight 1.0 SDK. Setelah install SDK nya, kita bisa ambil file Silverlight.js di C:\Program Files\Microsoft Silverlight 1.0 SDK\Tools\Silverlight.js\. File Silverlight.js ini merupakan script pembantu yang memungkinkan content Silverlight untuk bisa tampil di halaman web.
- Nah, copy file Silverlight.js ke D:\BelajarSilverlight\. Jangan lupa… copy file Silverlight.js-nya, jangan folder Silverlight.js-nya.
- Yang namanya content Silverlight itu akan tampil di suatu halaman web. Nah, maka dari itu kita buat sebuah halaman web (masih tetep di folder D:\BelajarSilverlight\). Misalnya kita beri nama belajar.html.
<html>
<head>
<title>Belajar Silverlighttitle>
head>
<body>
body>
html> - Nah, pada halaman belajar.html, siapin sebuah elemen div. Elemen div ini nantinya akan berfungsi sebagai “rumah” bagi content Silverlight.
<html>
<head>
<title>Belajar Silverlighttitle>
head>
<body>
<div id="rumahnyaSilverlight" style="width:400px; height:400px;">div>
body>
html> - Trus jangan lupa bikin referensi ke Silverlight.js.
<html>
<head>
<title>Belajar Silverlighttitle>
<script type="text/javascript" src="Silverlight.js">script>
head>
<body>
<div id="rumahnyaSilverlight" style="width:400px; height:400px;">div>
body>
html> - Hmm.. sekarang kita bikin content Silverlight-nya. Gak usah repot-repot deh, kita cuma mau bikin tulisan Silverlight is cool! aja kok. Nah, pertama-tama, buat sebuah file kosong di folder D:\BelajarSilverlight\ dengan nama belajar.xaml.
- Di dalam belajar.xaml, kita bikin dulu Canvas utama. Canvas ini adalah induk dari semua objek Silverlight. Artinya, semua objek Silverlight akan berada di dalam Canvas ini. Nah, pada Canvas utama ini kita harus kasih properti xmlns untuk memberitahukan namespace Silverlight mana yang kita pakai dan (kalau perlu) kasih properti xmlns:x untuk memberitahukan namespace XAML mana yang kita pakai. Nah, selain xmlns dan xmlns:x, Canvas juga memiliki properti lain, misalnya Background untuk mengatur warna latar belakang, Width untuk mengatur lebar Canvas dan Height untuk mengatur tinggi Canvas.
<Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Background="Blue" Width="400" Height="400">
Canvas> - Kemudian kita buat tulisan Silverlight is cool! dengan menggunakan TextBlock
<Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Background="Blue" Width="400" Height="400">
<TextBlock Text="Silverlight is Cool!" />
Canvas> - Nah.. urusan halaman web udah selesai, urusan content Silverlight udah selesai. Trus sekarang tinggal menghubungkan halaman web dengan content Silverlight, tentunya dibantu dengan script pada Silverlight.js.
- Kita buat file JavaScript di folder D:\BelajarSilverlight\ dengan nama belajar.js (supaya rapih dan mudah diingat). File JavaScript ini akan menghubungkan content Silverlight dengan Silverlight.js. Pada belajar.js, kita akan membuat sebuah fungsi yang memanggil fungsi. Nah lho?? Gapapa lah… gampang lah itu.. Jadi gini. Di Silverlight.js, ada fungsi yang bernama createObject. Nah, fungsi inilah yang akan kita panggil. Fungsi ini butuh beberapa parameter untuk menentukan tampilan dan perilaku content Silverlight kita. Misalnya, file XAML mana yang jadi content Silverlight, elemen div mana yang jadi rumah bagi content Silverlight, berapa lebar dan tinggi content Silverlight, apa warna background Silverlight, dan seterusnya. Fungsi ini akan kita panggil di dalam file belajar.js, atau lebih tepatnya lagi di dalam sebuah fungsi pada file belajar.js.
- Kenapa harus membuat fungsi lagi untuk memanggil fungsi createObject? Karena untuk memudahkan kita memanggilnya pada halaman web. Yups! Kita gak mau repot menulis script panjang-panjang di halaman web kan? So… idenya adalah: nanti di halaman web nya kita akan memanggil sebuah fungsi pada belajar.js. Nah, cukup dengan memanggil fungsi tersebut, maka kita bisa menampilkan content Silverlight di halaman web.
- Nah kita buat fungsi yang kita bahas barusan dengan nama createMySilverlight.
function createMySilverlight(hostName)
{
var host = document.getElementById(hostName);
Silverlight.createObject
(
"belajar.xaml", host, "MySilverlightControl",
{
width:'400',
height:'400',
inplaceInstallPrompt:false,
background:'Black',
isWindowless:'true',
framerate:'24',
enableFramerateCounter:'false',
version:'1.0'
},
{
onError:null,
onLoad:null
},
null
);
} - Ok! Hampir selesai nih. Kembali ke halaman web, kita panggil fungsi createMySilverlight setelah elemen div dan jangan lupa bikin referensi ke belajar.js.
- Kalau semua sudah beres, maka kita bisa lihat hasilnya (halaman belajar.html) di browser.
<html>
<head>
<title>Belajar Silverlighttitle>
<script type="text/javascript" src="Silverlight.js">script>
<script type="text/javascript" src="belajar.js">script>
head>
<body>
<div id="rumahnyaSilverlight" style="width:400px; height:400px;">div>
body>
html>
Nahh.. gampang kan? Selamat belajar Silverlight!
Category:
programing,
web
You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response.
0 Responses
