Interactive Silverlight Chart Application
Pada posting sebelumnya di sini, telah diberikan pengetahuan bagianmana membuat project Silverlight 2 pada VS2008. Selain itu juga diberikan contoh untuk menggunakan control-control Silverlight 2 seperti TextBlock, TextBox dan juga Button. Setelah itu juga telah diberikan contoh untuk membuat chart dengan menggunakan Visifire for Silverlight Application.
Berikut ini akan dibuat chart iteraktif yang sederhana. Hasil akhirnya adalah seperti gambar berikut ini.
Idenya adalah nilai-nilai dimasukkan ke dalam TextBox yang telah tersedia, kemudian ketika tombol Submit maka nilai-nilai pada chart akan diupdate.
Berikut ini adalah kode yang terdapat pada file Page.xaml :
<UserControl x:Class="VisifireSilverlightApplication.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="400" Height="500">
<Grid x:Name="LayoutRoot" Background="White">
<TextBlock x:Name="Label1" Text="C#"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Margin="5,5,0,0" />
<TextBox x:Name="TextBox1" Width="50"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Margin="75,5,0,0"/>
<TextBlock x:Name="Label2" Text="VB.NET"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Margin="5,32,0,0" />
<TextBox x:Name="TextBox2" Width="50"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Margin="75,32,0,0"/>
<TextBlock x:Name="Label3" Text="Java"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Margin="5,60,0,0" />
<TextBox x:Name="TextBox3" Width="50"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Margin="75,60,0,0"/>
<TextBlock x:Name="Label4" Text="PHP"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Margin="5,90,0,0" />
<TextBox x:Name="TextBox4" Width="50"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Margin="75,90,0,0"/>
<Button x:Name="Button1" HorizontalAlignment="Left"
VerticalAlignment="Top"
Margin="5,123,0,0"
Click="Button1_Click"
Content="Submit"
Width="75" Height="30"/>
<Grid x:Name="ChartContainer" Background="Black"
Width="390" Height="330"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Margin="5,160,0,0">
</Grid>
</Grid>
</UserControl>
Ada beberapa hal yang baru disini yang belum ditemu pada posting sebelumnya, yaitu pengaturan tata letak. Dari beberapa pengaturan tata letak suatu control, pada contoh di atas adalah cara pengaturan tata letak dengan posisi abolut. Perhatikan baris berikut ini :
<TextBlock x:Name="Label1" Text="C#"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Margin="5,5,0,0" />
Pada baris di atas, dapat dilihat untuk mengatur tata letak suatu kontrol secara absolut terlebih dahulu tentukan nilai dari atribut HorizontalAlignment dan VerticalAlignment sebagai penunjuk titik acuan (0,0). Setelah itu baru berikan nilai pada atribut Margin.
Pola dari nilai atribut Margin adalah : valueLeft, valueTop, valueRight, valueBottom.
Dengan memberikan nilai HorizontalAlignment="Left" dan VerticalAlignment="Top", maka dapat dibilang titik acuan (0,0) berada di ujung kiri atas, sehingga dengan memberikan nilai Margin="5,5,0,0" maka control akan akan berada 5 pixel dari atas dan 5 pixel dari sisi kiri.
Pada file Page.xaml (kode di atas), terdapat area yang akan digunakan untuk menggambar chart, area yang akan digunakan memanfaatkan control Grid.
<Grid x:Name="ChartContainer" Background="Black"
Width="390" Height="330"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Margin="5,160,0,0">
Selanjutnya adalah kode pada file Page.xaml.cs yang untuk menggambar chart secara pemrograman. Caranya hampir sama dengan yang telah ditulis pada posting sebelumnya. Pada contoh berikut ini, akan dibuat sebuah method untuk menggambar chart, yaitu CreateChart.
protected void CreateChart(string value1, string value2, string value3, string value4)
{
// create chart object
Visifire.Charts.Chart visiChart = new Visifire.Charts.Chart();
Visifire.Charts.DataSeries dataSeries = new Visifire.Charts.DataSeries();
Visifire.Charts.DataPoint dataPoint;
Visifire.Charts.Title title = new Visifire.Charts.Title();
// Title Chart
title.Text = "Most Popular Programming Language";
visiChart.Children.Add(title);
// set widht and height
visiChart.Width = 390;
visiChart.Height = 330;
// set value for C#
dataPoint = new Visifire.Charts.DataPoint();
dataPoint.YValue = Convert.ToDouble(value1);
dataPoint.AxisLabel = "C#";
dataSeries.Children.Add(dataPoint);
// set value for VB.NET
dataPoint = new Visifire.Charts.DataPoint();
dataPoint.YValue = Convert.ToDouble(value2);
dataPoint.AxisLabel = "VB.NET";
dataSeries.Children.Add(dataPoint);
// set value for Java
dataPoint = new Visifire.Charts.DataPoint();
dataPoint.YValue = Convert.ToDouble(value3);
dataPoint.AxisLabel = "Java";
dataSeries.Children.Add(dataPoint);
// set value for PHP
dataPoint = new Visifire.Charts.DataPoint();
dataPoint.YValue = Convert.ToDouble(value4);
dataPoint.AxisLabel = "PHP";
dataSeries.Children.Add(dataPoint);
// Mengisi data point ke dalam data series
dataSeries.RenderAs = "Column";
visiChart.Children.Add(dataSeries);
// Set theme
visiChart.Theme = "Theme3";
// Add chart to Grid
// ChartContainer is Grid's ID
// look into Page.xaml
ChartContainer.Children.Clear();
ChartContainer.Children.Add(visiChart);
}
Yang berbeda dari kode pada posting sebelumnya adalah baris-baris berikut :
1: // set value for C#
2: dataPoint = new Visifire.Charts.DataPoint();
3: dataPoint.YValue = Convert.ToDouble(value1);
4: dataPoint.AxisLabel = "C#";
5: dataSeries.Children.Add(dataPoint);
Pada baris ke-3, diisikan nilai dari data point dan pada baris ke-4 memberikan nilai label yang akan menjadi lable dari sumbu X untuk data point tersebut. Selanjutnya tidak menambah method-method berikut pada file Page.xaml.cs.
using System;
using System.Windows;
using System.Windows.Controls;
namespace VisifireSilverlightApplication
{
public partial class Page : UserControl
{
public Page()
{
InitializeComponent();
InitChart();
}
private void Button1_Click(object sender, RoutedEventArgs e)
{
CreateChart(TextBox1.Text, TextBox2.Text, TextBox3.Text, TextBox4.Text);
}
protected void InitChart()
{
CreateChart("0", "0", "0", "0");
}
protected void CreateChart(string value1, string value2, string value3, string value4)
{
. . .
}
}
}
Source code untuk contoh di atas dapat di-download di sisi.
Selanjutnya akan dibuat modifikasi aplikasi sederhana di atas akan lebih terlihat interaktif dan menarik dengan menggunakan theme dan animasi yang telah dimiliki oleh Visifire. Tambahan yang akan ditambahkan meliputi :
- Control untuk pemilihan jenis chart yang akan digunakan, seperti Bar, Line, Pie, Doughnut dan lain-lain.
- Control untuk memilih apakah chart yang ditampilkan dalam 2D atau 3D.
Antarmuka dari hasil modifikasi ini akan dilihat seperti pada gambar berikut ini.
Pada contoh ini kita akan berkenalan dengan 2 control baru, yaitu :
{RadioButton}
Berikut contoh control RadioButton pada file XAML.
<RadioButton x:Name="RadioButton_Bar" Content="Bar"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Margin="235,3,0,0"
Checked="RadioButton_Bar_Checked"/>
Pada control di atas terdapat event Checked. Dan berikut contoh method yang dipanggil oleh event Checked.
private void RadioButton_Bar_Checked(object sender, RoutedEventArgs e)
{
. . .
}
{CheckBox}
Berikut contoh penulisan control CheckBox pada file XAML.
<CheckBox x:Name="CheckBox1"
Unchecked="CheckBox1_Checked"
Checked="CheckBox1_Checked"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Margin="180,35,0,0" />
Pada control di atas terdapat 2 event, yaitu Unchecked dan Checked, kedua event tersebut memanggil 1 method yang sama, yaitu CheckBox1_Checked, seperti contoh di bawah ini.
private void CheckBox1_Checked(object sender, RoutedEventArgs e)
{
. . .
}
untuk lebih jelasnya dapat mengunduh contoh code aplikasi lengkap di sini.
Pada posting berikutnya masih akan bercerita tentanga Visifire for Silverlight Application dengan mencoba mengambil data dari database dengan menggunakan ASP.NET Ajax, ADO Data Service AJAX Client atau Astoria.
Akan dicoba pula posting-posting lain yang membahas Silverlight untuk membangun potongan-potongan aplikasi bisnis.