Silverlight 2 BETA 2 Liquid controls
Liquid control yang bisa ditemui pada http://www.vectorlight.net sudah ada sejak jaman Silverlight 1.1. Tujuannya untuk menutupi "kekurangan" Silverlight 1.1 yang saat itu belum memiliki control-control seperti :
- TextBox.
- Date Picker.
- Calendar.
- Dan lain-lain.
Saat Silverlight 2 Beta 2 keluar, Liquid control tidak mau ketinggalan untuk mensupport. Ini terbukti dengan dikeluarkannya Liquid control 4.9.1, pada versi ini dapat dinikmati control-control yang belum didapati pada Silverlight 2 Beta 2, yaitu :
- Calendar
- CheckBox
- Date Picker
- Dropdown List
- Fieldset
- File Upload
- ItemViewer
- ListBox
- Popup Dialog
- NumericUpDown
- Progress Bar
- Radio Button
- Rich TextBox
- TextArea
- Textbox
- Text Label
- Tree View
Gambar berikut memperlihatkan contoh-contoh control yang ada pada Liquid control.
Untuk menggunakan Liquid control maka langkah pertama yang harus dilakukan adalah mengunduh file DLL tempat control-control ini bersemayam. Tingga mengunjungi situ http://www.vectorlight.net dan arahkan mouse ke menu Download, atau langsung mengklik link ini.
Setelah file dengan ukuran 84KB (cuma 84KB) diunduh, ekstrak dan tambahkan Liquid.dll sebagai reference dari project Silverlight Application.
Langkah selanjutnya adalah mendaftarkan Liquid control agar dapat digunakan pada halaman Page.xaml yang ada pada project Silverlight Application. Untuk menggunakan Liquid control maka perlu ditambahkan baris berikut :
xmlns:liquid="clr-namespace:Liquid;assembly=Liquid"
Sehingga akan kode dari halaman Page.xaml akan seperti berikut :
<UserControl x:Class="LiquidControlEx.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:liquid="clr-namespace:Liquid;assembly=Liquid"
Width="400" Height="300">
<Grid x:Name="LayoutRoot" Background="White">
</Grid>
</UserControl>Sekarang tag-tag Liquid control sudah dikenali oleh VS2008.
Berikut ini akan diceritakan beberapa control yang mungkin menarik untuk digunakan.
{TextBoxPlus}
Tentu control ini mempunyai kelebihan dibandingkan control TextBox yang telah dimiliki oleh Silverlight 2. Salah satunya, pada Control TextBoxPlus terdapat atribut Password yang apabila bernilai True maka TextBoxPlus akan berperan sebagai inputan password.
Berikut contohnya :
<liquid:TextBoxPlus HorizontalAlignment="Left"
VerticalAlignment="Top"
Margin="5,5,0,0"
Password="True"
Width="100"
Height="23">
</liquid:TextBoxPlus>
Selain atribut Password, juga terdapat atribut lain yang berguna seperti :
- BlockNonNumerics, atribut ini berfungsi untuk membuat TextBoxPlus hanya menerima karakter numerik saja.
- ExcludeCharacters, atribut ini dapat digunakan untuk aturan berdasarkan regular expression.
- Tooltip, atribut ini akan memberikan tooltip yang menarik ketika pointer mouse diarahakan pada control ini.
Selain penambahan atribut pada TextBoxPlus juga terdapat tambahan event, untuk melihat event-event yang ada dan tidak ada pada TextBoxPlus maka dapat dilihat perbandingannya dengan control TextBox pada Silverlight 2 berikut ini.
<liquid:TextBoxPlus BindingValidationError=""
Clicked=""
EnterPressed=""
GotFocus=""
KeyDown=""
KeyUp=""
LayoutUpdated=""
Loaded=""
LostFocus=""
MouseEnter=""
MouseLeave=""
MouseLeftButtonDown=""
MouseLeftButtonUp=""
MouseMove=""
SizeChanged="">
</liquid:TextBoxPlus>
dan berikut event yang pada control TextBox milik Silverlight 2.
<TextBox BindingValidationError=""
GotFocus=""
KeyDown=""
KeyUp=""
LayoutUpdated=""
Loaded=""
LostFocus=""
MouseEnter=""
MouseLeave=""
MouseLeftButtonDown=""
MouseLeftButtonUp=""
MouseMove=""
SelectionChanged=""
SizeChanged=""
TextChanged="">
</TextBox>
{CalendarPlus}
Dibandingkan control Calendar milik Silverlight 2, control CalendarPlus ini mempunyai kemudahan untuk mengubah nama hari yang dimunculkan pada control. Berikut ini contohnya.
<liquid:CalendarPlus HorizontalAlignment="Left"
VerticalAlignment="Top"
Margin="113,70,0,0"
Monday="Sen"
Tuesday="Sel"
Wednesday="Rab"
Thursday="Kam"
Friday="Jum"
Saturday="Sab"
Sunday="Min">
</liquid:CalendarPlus>
Sedangkan dari segi antarmuka juga terdapat perbedaan dari style dan navigasi seperti yang dapat dilihat pada gambar berikut ini.
{DatePickerPlus}
Berikut contoh penggunaan control DatePickerPlus.
<liquid:DatePickerPlus HorizontalAlignment="Left"
VerticalAlignment="Top"
Margin="113,232,0,0"
EnableTimePicking="True"
DateFormat="dd/MMM/yyy">
Dari segi antarmuka antara control DatePickerPlus dan control DatePicker milik Silverlight 2 mempunyai perbedaan seperti berikut :
{DropDownList}
Silverlight 2 sampai saat ini belum mempunyai control DropDownList. Oleh karena itu control DropDownList yang ada pada Liquid control akan sangat membantu sekali, karena control ini sangat mirip penggunaanya seperti control DropDownList pada ASP.NET. Berikut contoh pemanfaatan control DropDownList pada Liquid control.
<liquid:DropDownList HorizontalAlignment="Left"
VerticalAlignment="Top"
Margin="113,270,0,0"
Width="200"
Height="23">
<liquid:DropDownList.Items>
<liquid:ListItem Key="1" Value="Australia" />
<liquid:ListItem Key="2" Value="Canada" />
<liquid:ListItem Key="3" Value="China" />
</liquid:DropDownList.Items>
</liquid:DropDownList>
{FieldSet}
Control ini juga tidak dimiliki oleh Silverlight 2. Control ini berfungsi untuk mengelompokkan control-control lain, sebagai contoh dapat dilihat pada gambar berikut.
Control ini mempunyai feature untuk show dan hide content dari FieldSet dengan efek animasi yang menarik.
Berikut contoh penggunaan control FieldSet.
<liquid:FieldSet HorizontalAlignment="Left"
VerticalAlignment="Top"
Margin="113,300,0,0"
ExpandedHeight="150"
Width="150"
Text="Lots of options">
<liquid:FieldSet.Children>
<StackPanel>
<CheckBox Content="A.I. Programmer" ></CheckBox>
<CheckBox Content="Graphic Designer" ></CheckBox>
<CheckBox Content="System Engineer" ></CheckBox>
<CheckBox Content="Tester" ></CheckBox>
</StackPanel>
</liquid:FieldSet.Children>
</liquid:FieldSet>
{ItemViewer}
Control ini dapat dimanfaatkan untuk mengelompokan item-item dalam suatu area. Keterangan untuk masing-masing item dapat berikut teks dan juga gambar seperti pada gambar berikut ini.
Dan berikut contoh kode yang dapat digunakan :
<UserControl x:Class="ItemViewer.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:liquid="clr-namespace:Liquid;assembly=Liquid"
Width="400" Height="300">
<liquid:ItemViewer x:Name="myList"
Width="400"
Height="300">
<liquid:ItemViewer.Items>
<liquid:FileItem Text="My File.pdf"
OtherText="300KB"
Icon="images/large/pdf.png" />
<liquid:FileItem Text="My File 2.doc"
OtherText="360KB"
Icon="images/large/doc.png" />
</liquid:ItemViewer.Items>
</liquid:ItemViewer>
</UserControl>
{NumericalUpDown}
Antarmuka control ini dapat dilihat pada gambar di bawah ini :
Dan berikut contoh kode untuk menggunakan control ini :
<UserControl x:Class="NumericUpDown.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:liquid="clr-namespace:Liquid;assembly=Liquid"
Width="400" Height="300">
<Grid x:Name="LayoutRoot" Background="White">
<liquid:NumericUpDown Min="0" Max="500" />
</Grid>
</UserControl>
Masih banyak control-control lain yang menarik seperti control Upload, control Rich TextBox yang berperan seperti TinyMCE (Javascript), control ProgressBar, control TreeView dan control Popup Dialog. Control-control tersebut akan dibahas satu persatu nanti pada posting terpisah :) Kenapa pada posting terpisah? Alasan pertama karena bahasan 1 control tersebut akan memerlukan penjelasan yang panjang dan akan lebih nyaman bila ditulis khusus dalam 1 posting. Alasan kedua ? ... Beberapa orang tahu apa jawaban dari alasan kedua ini :)
Selamat mencoba....have a great weekend.
Souce code dari contoh-contoh kode di atas dapat diunduh di sini.