การทำ binding ข้อมูลใน Silverlight 3 (หรือ Silverlight 2) นั้นสิ่งแรกเราจะต้องรู้ เกี่ยวกับคำสั่งในการ binding ก่อนดังนี้
{Binding} เป็นคำสั่ง default สำหรับโหมด Oneway (ข้อมูลจะมีการไหลจากแหล่งข้อมูลหรือ Data Source ไปที่
User Interface )
{Binding path} เป็นคำสั่งที่มีการกำหนด path สำหรับแหล่งข้อมูลที่ใช้
{Binding properties} เป็นคำสั่งที่ต้องมีการเรียกใช้ properties
{Binding path,properties} เป็นคำสั่งที่ต้องกำหนด path และ properties
ในบทความนี้จะแสดงออกมาสองตัวอย่างคือ การทำ DataBinding จาก Class และ การทำ DataBinding ผ่าน WCF
ตัวอย่างการ ทำ DataBinding Class
หลังจากที่สร้างโปรเจค Silverlight แล้วให้ทำการสร้าง class ขึ้นมาใน project silverlight โดยการคลิกขวาที่
โปรเจคเลือก Add->New Item จากนั้นให้ทำการเลือก class แล้วตั้งชื่อคลาสด้วย ดังรูปที่ 1
รูป 1 แสดงหน้าต่าง Add New Item
จากนั้นคลิกที่ปุ่ม Add แล้วเขียนโค้ดดังนี้
using System;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
namespace SilverlightApplication1
{
public class EmployeeClass
{
public int EmployeeID { get; set; }
public string EmployeeName { get; set; }
public int EmployeeAge { get; set; }
public EmployeeClass(int EmployeeID, string EmployeeName, int EmployeeAge)
{
this.EmployeeID = EmployeeID;
this.EmployeeName = EmployeeName;
this.EmployeeAge = EmployeeAge;
}
}
}
ขั้นตอนต่อไปหลังจากสร้างคลาส EmployeeClass แล้วคือกำหนด ListBox และ TextBlock เพื่อที่จะนำข้อมูลมาใส่ โดยให้ไปที่ไฟล์ Page.xaml เขียนโค้ดดังนี้
<UserControl x:Class="SilverlightApplication1.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400">
<Canvas HorizontalAlignment="Center">
<ListBox x:Name="empListBox" Width="400" Height="300">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<TextBlock Text="ID " Grid.Row="0" Grid.Column="0"></TextBlock>
<TextBlock Text="{Binding EmployeeID}" Grid.Row="1" Grid.Column="0"></TextBlock>
<TextBlock Text="Name " Grid.Row="0" Grid.Column="1"></TextBlock>
<TextBlock Text="{Binding EmployeeName}" Grid.Row="1" Grid.Column="1"></TextBlock>
<TextBlock Text="Age " Grid.Row="0" Grid.Column="2"></TextBlock>
<TextBlock Text="{Binding EmployeeAge}" Grid.Row="1" Grid.Column="2"></TextBlock>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Canvas>
</UserControl>
คำอธิบาย Page.xaml
ใน TextBlock สังเกตว่ามีการเรียกใช้คำสั่ง {Binding properties} ซึ่งเป็นการนำข้อมูลมาใส่ให้กับ TextBlock โดย หลังชื่อ Binding จะเป็น properties ของคลาส EmployeeClass ซึ่งถ้ามี properties อื่นก็สามารถใส่ได้แต่เราต้องกำหนด properties ใน EmployeeClass ด้วย
จากนั้นก็ไปที่ Page.xaml.cs แล้วเขียนโค้ดดังนี้
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
namespace SilverlightApplication1
{
public partial class Page : UserControl
{
private List<EmployeeClass> empList;
public Page()
{
InitializeComponent();
empList = new List<EmployeeClass>();
empList.Add(new EmployeeClass(100, "John", 23));
empList.Add(new EmployeeClass(101, "Jame", 34));
empList.Add(new EmployeeClass(102, "Paula", 27));
empListBox.ItemsSource = empList;
}
}
}
คำอธิบาย Page.xaml.cs
ในหน้านี้จะมีการสร้างอาเรย์เพื่อกำหนดข้อมูลให้กับตัวแปร empList โดยตัวแปรนี้จะเก็บข้อมูลที่เป็นอาเรย์ไว้หลังจากกำหนดข้อมูลแล้วก็นำข้อมูลที่ได้มากำหนดให้
กับ ListBox ที่ชื่อ empListBox โดยใช้คำสั่ง ItemSource อีกที
ผลลัพธ์ แสดงดังรูป 2
รูป 2 แสดงผลลัพธ์ใน ListBox
การ Binding โดยใช้ LINQ ผ่าน WCF Service
ใน binding ข้อมูลใน Silverlight โดยใช้ LINQ เราจะต้องสร้าง WCF Service ขึ้นมาก่อนเพราะในโปรเจค Silverlight นั้นเราไม่สามารถที่จะสร้าง LINQ class ได้โดยตรงแต่จะต้องสร้างผ่านโปรเจค Web Application อีกทีนึงแล้วทำการเรียกผ่าน WCF Service ซึ่งการสร้าง LINQ รวมถึง WCF นั้นอย่างแรกเราต้องเตรียมฐานข้อมูลก่อนโดยในตัวอย่างจะใช้ ฐานข้อมูลที่ชื่อ Northwind ซึ่งวิธีการติดตั้ง ฐานข้อมูล Northwind ใน Microsoft SQL Server 2008 มีดังนี้(ถ้าใคร ใช้Microsoft SQL Server 2005 เวอร์ชั้นเต็มหรือ Express ก็ใช้วิธีเดียวกัน) โดยให้ไป Download Northwind จาก
http://www.microsoft.com/downloads/details.aspx?displaylang=en&FamilyID=06616212-0356-46a0-8da2-eebc53a68034
หลังจาก Download แล้วก็ให้ทำการติดตั้งพอติดตั้งเสร็จแล้ว ไฟล์ที่ติดตั้งจะอยู่ที่ c:\SQL Server 2000 Sample Database (ในกรณีที่ไม่มีการเปลี่ยน path ในการติดตั้ง) หลังจากนั้นก็เปิด Command prompt ขึ้นมาแล้วให้เปลี่ยน path ใน Command Prompt ไปที่ C:\SQL Server 2000 Sample Database(ถ้าติดตั้งที่ path อื่นนอกเหนือจากตัวอย่างก็ให้ย้าย path ให้ถูกต้อง) หลังจากนั้นก็ให้พิมพ์คำสั่ง sqlcmd –S . –i instnwnd.sql ในกรณีที่ใช้เวอร์ชั่นเต็ม(ไม่ใช่เวอร์ชั่น Express) แต่ถ้าเป็นเวอร์ชั่น Express ก็ให้พิมพ์ sqlcmd –S .\sqlexpress -i instnwnd.sql
***ตรง –S ให้พิมพ์ S ตัวใหญ่***
หลังจากพิมพ์คำสั่งแล้วก็กด Enter ฐานข้อมูลก็ได้ถูกติดตั้งลงไปใน Microsoft SQL Server แล้วจากนั้นก็ให้ทดสอบ โดยการใช้คำสั่ง sqlcmd –S . หรือ sqlcmd –S .\sqlExpress แล้วกด Enter ผลลัพธ์จะได้ดังรูป 3
รูป 3 แสดงหน้าต่างของ SQLCMD
จากนั้นก็ให้พิมพ์ คำสั่งดังนี้
USE Northwind (กด Enter)
SELECT * FROM Customers (กด Enter)
GO (กด Enter)
ผลลัพธ์จะได้ข้อมูลที่อยู่ใน Table ที่ชื่อ Customers แสดงใน หน้าต่างๆ SQLCMD
หลังที่ได้ทดสอบกับการติดตั้งฐานข้อมูลเสร็จแล้วต่อไปก็เริ่มทำในส่วน Databinding โดย
ในตัวอย่างนี้จะใช้โค้ดของเดิมแต่ให้ทำการเพิ่ม LINQ และ WCF เข้ามาโดยคลิกขวาเลือก โปรเจค Web Application (โปรเจคที่ถูกสร้างมาพร้อมกับ Silverlight) แล้วเลือก Add ->
New Item จะมีหน้าต่าง Add New Item แสดงขึ้นมาให้เลือกที่ LINQ to SQL Class ดังรูปที่ 4
รูป 4 แสดงหน้าต่าง Add New Item เพื่อเลือก LINQ to SQL Classes
จากนั้นคลิกที่ปุ่ม Add ตรง Solution Explorer จะมีไฟล์ DataClasses1.dbml ถูกสร้างขึ้นมาดังรูปที่ 5
รูป 5 แสดงไฟล์ DataClasses1.dbml
นอกจากไฟล์ DataClasses1.dbml ถูกสร้างใน Solution Explorer แล้วก็จะมี หน้า designer ของ DataClasses1.dbml ถูกสร้างขึ้นมาเพื่อที่สามารถลาก Table ต่างๆมาวางในนี้ได้ดังรูป 6
รูป 6 แสดงหน้าของ DataClasses1.dbml
หลังจากนั้นให้คลิกที่ไฟล์ DataClasses1.dbml แล้วดูใน panel Properties ตรง Serialization Mode เลือกเป็น Unidirectional ในการ เพิ่ม Table ลงไปในหน้า DataClasses1.dbml นี้ก็ให้ทำการเปิด panel ที่ชื่อServer Explorer มาก่อน โดยเลือก menu bar ที่ชื่อ View -> Server Explorer ซึ่งจะได้ panel ดังรูป 7
รูป 7 แสดงหน้า panel ของ Server Explorer
ใน Server Explorer นี้ให้คลิกที่ Connect to Database… ดังรูป 8
รูป 8 แสดง icon Connect to Database
จากนั้นจะมีหน้าต่าง Choose Data Source ขึ้นมาให้เลือก Data Souce ที่ต้องการจะติดต่อในตัวอย่างนี้จะเลือก Microsoft SQL Server แล้วคลิกที่ปุ่ม Continue เพื่อเข้าสู่หน้า Add Connection ในหน้านี้ให้กำหนด Server name , ชนิดของการ Log on ในช่อง Log on to the server และเลือกฐานข้อมูลที่ต้องการติดต่อในช่อง Select or enter a database name(จะต้องมีการติดตั้งฐานข้อมูลใน Microsoft SQL Server ไว้ก่อนในตัวอย่างจะใช้ฐานข้อมูลที่ชื่อ Northwind) ดังรูป 9
รูป 9 แสดงตัวอย่างการใส่ค่าในหน้าต่าง Add Connection
หลังจากใส่รายละเอียดแล้วก็ให้คลิกที่ปุ่ม Test Connection ดูเพื่อทดสอบว่าสามารถติดต่อกับฐานข้อมูลได้หรือไม่ซึ่งถ้าติดต่อไม่ได้ก็ให้ไปตรวจสอบ Data Source ว่าเรากำหนดถูกหรือป่าวและในส่วนของช่องการ Log on to the server ก็ให้ตรวจสอบว่าเราได้ทำการใช้แบบ Window Authentication หรือ SQL Server Authentication และสุดท้ายก็ตรวจสอบชื่อฐานข้อมูลว่ามีใน Microsoft SQL Server หรือเปล่า(ในกรณีที่ใช้ Data Source เป็น Microsoft SQL Server) ถ้าถูกต้องหมดหลังจากคลิกปุ่ม Test Connection จะต้องขึ้น ดังรูปที่ 10
รูป 10 แสดงหน้าต่างว่าสามารถติดต่อกับฐานข้อมูลได้
จากนั้นคลิกที่ปุ่ม OK เพื่อออกจากหน้าต่าง Add Connection ใน Server Explorer ก็จะมีฐานข้อมูลที่ชื่อ Northwind ขึ้นมา ให้ ไปเลือก Table ที่ต้องการในตัวอย่างจะเลือก Table ที่
ชื่อ Employees ดังรูป 11
รูป 11 แสดง Table Employees
หลังจากที่ได้ทำการเลือกแล้วก็ให้ลากมาวางในหน้า DataClasses1.dbml ดังรูป 12
รูป 12 แสดงคลาส Employee
ซึ่งตอนนี้เราก็ได้ Table ที่ต้องการจะทำการ binding แล้วต่อไปก็คือสร้าง Service เพื่อเป็นตัวกลางติดต่อระหว่าง Silverlight กับ LINQ (คลาส Employee) เพื่อที่จะให้ทางฝั่ง Silverlight สามารถที่จะ binding ข้อมูลจาก ฟิลด์ต่างๆในคลาส Employee ได้โดยคลิกขวาที่โปรเจค Web Application แล้วเลือก Add -> New Item แล้วให้เลือก Silverlight-enabled WCF Service ดังรูป 13
รูป 13 แสดงหน้าต่างการ Add New Item เพื่อเลือก WCF Service
จากนั้นคลิกที่ปุ่ม Add โปรแกรมก็จะทำการสร้างไฟล์ Service1.svc.cs ดังรูป 14
รูป 14 แสดงไฟล์ Service1.svc.cs
ในไฟล์ นี้ให้เขียนโค้ดดังนี้
using System;
using System.Linq;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.ServiceModel.Activation;
using System.Collections.Generic;
namespace SilverlightApplication1.Web
{
[ServiceContract(Namespace = "")]
[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
public class Service1
{
[OperationContract]
public List<Employee> GetEmployees()
{
DataClasses1DataContext dContext = new DataClasses1DataContext();
var empVar = from p in dContext.Employees select p;
return empVar.ToList();
}
}
}
คำอธิบาย ไฟล์ Service1.svc.cs
ในไฟล์นี้จะมีการใช้คำสั่งของ LINQ เพื่อที่จะส่งค่า ฟิลด์ต่างๆออกไปในตำแหน่งที่เรียกใช้โดยส่งออกเป็น List
แล้วไปที่ไฟล์ Service1.svc.cs ให้รันที่ไฟล์นี้ (ถ้ารันไม่ได้ก็ให้คลิกขวาที่ไฟล์นี้แล้วเลือก View in Browser ก่อน) พอรันแล้วจะได้ไฟล์ Service1 ดังรูป 15
รูป 15 แสดง Service1
ให้เรา copy url ที่อยู่ในรูป 15 (http://127.0.0.1:2469/Service1.svc ) ไว้แล้วไปที่โปรเจค Silverlight ให้คลิกขวาที่ โปรเจคนี้แล้วเลือก Add Service Reference แล้วจะมีหน้าต่าง Add Service Reference ขึ้นมา ให้เอา url ที่ได้ copy ไว้มาวางในช่อง Address แล้วคลิกที่ปุ่ม Go ผลลัพธ์มีการ add Service ไปที่โปรเจค Silverlight ดังรูป 16
รูป 16 แสดงหน้าต่าง Add Service Reference
จากนั้นคลิกที่ปุ่ม OK แล้วให้ไปที่ไฟล์ Page.xaml ทำการแก้ไขข้อมูลสำหรับ binding ใหม่โดยใช้ใส่ชื่อฟิลด์ลงไปเช่น
<TextBlock Text="ID " Grid.Row="0" Grid.Column="0"></TextBlock>
<TextBlock Text="{Binding EmployeeID}" Grid.Row="1" Grid.Column="0"></TextBlock>
<TextBlock Text="LastName " Grid.Row="0" Grid.Column="1"></TextBlock>
<TextBlock Text="{Binding LastName}" Grid.Row="1" Grid.Column="1"></TextBlock>
<TextBlock Text="Title " Grid.Row="0" Grid.Column="2"></TextBlock>
<TextBlock Text="{Binding Title}" Grid.Row="1" Grid.Column="2"></TextBlock>
จากนั้นที่ไฟล์ Page.xaml.cs เขียนโค้ดดังนี้
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
namespace SilverlightApplication1
{
public partial class Page : UserControl
{
public Page()
{
InitializeComponent();
ServiceReference1.Service1Client wcf = new SilverlightApplication1.ServiceReference1.Service1Client();
wcf.GetEmployeesCompleted += new EventHandler<SilverlightApplication1.ServiceReference1.GetEmployeesCompletedEventArgs>(wcf_GetEmployeesCompleted);
wcf.GetEmployeesAsync();
}
void wcf_GetEmployeesCompleted(object sender, SilverlightApplication1.ServiceReference1.GetEmployeesCompletedEventArgs e)
{
empListBox.ItemsSource = e.Result;
}
}
}
คำอธิบาย Page.xaml.cs
ในไฟล์นี้จะเป็นการเรียก Service ที่เราได้ทำการสร้างขึ้นซึ่งหลังจากที่มีการเรียก event wcf_GetEmployeeCompleted แล้วก็จะทำการ กำหนด ItemsSource ให้กับ Listbox ที่ชื่อ empListBox ผ่านคำสั่ง e.Result;
ให้ทดสอบรันดูโดยกด F5 ผลลัพธ์จะได้ดังรูป 17
รูป 17 แสดงผลลัพธ์ใน ListBox
***ในกรณีที่รันแล้วเกิด Error ดังรูปที่ 18 ก็ให้ไปศึกษาวิธีแก้ได้จาก web
http://msdn.microsoft.com/en-us/library/dd470115(VS.95).asp
รูป 18 แสดง Error
สรุป
บทความนี้ได้กล่าวถึงการ binding แล้วแสดงข้อมูลใน Silverlight ซึ่งในบทความนี้ได้แสดงตัวอย่างออกเป็น 2 รูปแบบคือ binding ข้อมูลโดยมีการสร้างคลาสขึ้นมาแล้วกำหนดข้อมูลผ่าน constructor และ binding โดยมีการดึงข้อมูลจากฐานข้อมูล และใช้ WCF เป็นตัวกลางในการติดต่อระหว่าง Silverlight Application และ Web Application จากตัวอย่างทั้งสองนี้สามารถใช้เป็นแนวทางในการศึกษาเรื่องของ DataBinding และนำไปประยุกต์ใช้กับ Application จริงที่ต้องมีการทำ DataBinding ได้
เนื้อหาที่เกี่ยวข้อง
Microsoft Expression Blend3 + SketchFlow
Posted
10-12-2009 23:04
by
Kreevut Assavakuptanon