Microsoft Silverlight adalah Teknologi yang membuat halaman web menjadi lebih kaya, interaktif dan responsif. Dengan menggunakan Silverlight, maka pada halaman web dapat ditambahkan animasi, media seperti image, audio dan video. Selain itu juga ditambahkan item-item untuk pembuatan aplikasi bisnis seperti textbox, data grid, dropdownlist, button dan lain-lain.
Untuk menikmati content Silverlight pada diperlukan web browser yang sudah terinstall Silverlight Plugin. Plugin dapat juga disebut runtime. Silverlight runtime ini tersedia untuk sistem operasi Windows dan Mac, dan dapat berjalan pada web browser Opera, IE, Firefox. Bagaimana dengan Linux? Ada beberapa solusi yang dapat digunakan agar Silverlight dapat dinikmati oleh web browser pada sistem operasi Linux yaitu dengan menggunakan Moonlight. Silverlight runtime bersifat gratis.
Pada gambar-gambar di bawah ini dapat dilihat contoh content-content Silverlight.
![4[1]](http://www.rezafaisal.net/files/media/image/WindowsLiveWriter/MicrosoftSilverlightExpressionBlend_AB06/4%5B1%5D.png "4[1]")
![collectionflow[1]](http://www.rezafaisal.net/files/media/image/WindowsLiveWriter/MicrosoftSilverlightExpressionBlend_AB06/collectionflow%5B1%5D.png "collectionflow[1]")
Expression Blend, adalah tool yang dapat digunakan untuk membuat content Silverlight. Tool ini sangat membantu untuk membuat content Silverlight karena bersifat WYSIWYG (what you see is what you get). Berikut ini adalah antarmuka dari Expression Blend.
Dengan Expression Blend, dapat dibuat item-item seperti kurva, media, animasi, textbox, dropdownlist dan lain-lain dengan cara yang sangat mudah, yaitu dengan cara drag dan drop pada area kerja. Area kerja itu biasanya berupa file dengan tipe/extensi *.XAML (zamel). File ini adalah file dengan format text, sehingga dapat dibuka dengan text editor biasa seperti Notepad.
Pada gambar di atas dapat dilihat tulisan “Hello Silverlight” berwarna biru serta tiba kurva bulat yang berwara merah, biru dan orange, item-item itu ‘digambarkan’ pada file MainPage.xaml. Bila dilirik isi dari file ini akan dilihat seperti pada baris-baris kode di bawah ini.
<UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity" xmlns:ii="clr-namespace:Microsoft.Expression.Interactivity.Input;assembly=Microsoft.Expression.Interactions" xmlns:im="clr-namespace:Microsoft.Expression.Interactivity.Media;assembly=Microsoft.Expression.Interactions" x:Class="_1_CaraKerjaSilverlight.MainPage" Width="640" Height="480"> <Grid x:Name="LayoutRoot" Background="White"> <TextBlock x:Name="Nama" Height="64" Margin="19,8,18,0" VerticalAlignment="Top" FontSize="48" FontWeight="Bold" Foreground="#FF000E9D" Text="Hello Silverlight" TextAlignment="Center" TextWrapping="Wrap" RenderTransformOrigin="0.5,0.5"> <TextBlock.RenderTransform> <TransformGroup> <ScaleTransform/> <SkewTransform/> <RotateTransform/> <TranslateTransform/> </TransformGroup> </TextBlock.RenderTransform> </TextBlock> <Ellipse x:Name="ellipse2" Fill="#FFE4AF22" Stroke="Black" Height="101" HorizontalAlignment="Left" Margin="122,137,0,0" VerticalAlignment="Top" Width="101" RenderTransformOrigin="0.5,0.5"> <Ellipse.RenderTransform> <TransformGroup> <ScaleTransform/> <SkewTransform/> <RotateTransform/> <TranslateTransform/> </TransformGroup> </Ellipse.RenderTransform> </Ellipse> <Ellipse x:Name="ellipse1" Fill="#FF2272E4" Stroke="Black" Height="75" HorizontalAlignment="Left" Margin="87,103,0,0" VerticalAlignment="Top" Width="75" RenderTransformOrigin="0.5,0.5"> <Ellipse.RenderTransform> <TransformGroup> <ScaleTransform/> <SkewTransform/> <RotateTransform/> <TranslateTransform/> </TransformGroup> </Ellipse.RenderTransform> </Ellipse> <Ellipse x:Name="ellipse" Fill="#FFFA0000" Stroke="Black" Height="37" HorizontalAlignment="Left" Margin="72,94,0,0" VerticalAlignment="Top" Width="37" RenderTransformOrigin="0.5,0.5"> <Ellipse.RenderTransform> <TransformGroup> <ScaleTransform/> <SkewTransform/> <RotateTransform/> <TranslateTransform/> </TransformGroup> </Ellipse.RenderTransform> </Ellipse> </Grid> </UserControl>
Ternyata text dan gambar di atas hanya dibuat dengan baris-baris kode seperti yang telah ditulis di atas.
Bagaimana perjalanan file XAML yang didalamnya terdapat media, kurva dan text sampai bisa dinikmati pada web browser ?
Dilihat dari gambar, maka file *.XAML, media, kurva dan lain-lain akan dikompilasi menjadi *.DLL, kemudian akan dikemas menjadi file *.XAP. File *.XAP adalah file archive biasa seperti file *.ZIP. Sehingga bila ingin melihat isi file *.XAP, maka file XAP dapat direname menjadi ZIP kemudia diextraks.
Setelah menjadi *.XAP, maka dapat digunakan baris kode seperti dibawah ini untuk menampilkan ke halaman HTML.
1: <object data="data:application/x-silverlight," type="application/x-silverlight-2" width="100%" height="100%">
2: <param name="source" value="ClientBin/01_CaraKerjaSilverlight.xap"/>
3: <param name="onerror" value="onSilverlightError" />
4: <param name="background" value="white" />
5: <param name="minRuntimeVersion" value="3.0.40624.0" />
6: <param name="autoUpgrade" value="true" />
7: <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=3.0.40624.0" style="text-decoration: none;">
8: <img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight" style="border-style: none"/>
9: </a>
10: </object>
Pada baris ke-2, dapat dilihat cara untuk cara memanggil file XAP sehingga halaman HTML ini dapat menampilkan content Silverlight.
Sekian dulu untuk posting perkenalan Silverlight & Blend. Selanjutnya akan dipaparkan lebih dalam lagi tentang Silverlight & Blend pada posting berikutnya.
3 comment(s)
Yapz..
Silverlight memang mantap.
saya sekarang lagi coba bikin dengan Expression Blend 3, hanya bisa drawing aja, tapi untuk animasi sih belum bisa, mungkin mas bisa post tutorial untuk EBlend ini. Thx.
teman saya ada yang telah membuat ebooknya, mungkin bisa diunduh di sini : geeks.netindonesia.net/.../entry72720.aspx tinggal daftarkan diri sebelum mengunduh.gratis.
selain itu juga bisa unduh ebook ini, pembahasan silverlight+blend : www.4shared.com/.../FirstTouchtoSil