จากบทความที่ผมเขียนตีพิมพ์ลง นิตยสาร CODE IT [สอดอยู่ในเล่ม Windows ITPro ฉบับเดือน ธันวาคม 2551] ซึ่งผมได้ขออนุญาตในการนำบทความไปเผยแพร่จากทางสำนักพิมพ์เป็นที่เรียบร้อยแล้ว ติดตามกันได้เลยครับ:

Download source:

จากตอนที่หนึ่ง,http://greatfriends.biz?97984  หลังจากที่เราทำการสร้าง ADO.NET Data Services เป็นที่เรียบร้อยแล้ว เราจะไปเรียกใช้งานข้อมูลบน ADO.NET Data Services โดยการผูกข้อมูลเข้ากับคอนโทรล ComboBox ด้วยเครื่องมือ Expression Blend และไปใช้งาน Popup คอนโทรล

ขั้นตอนที่ สี่: การเรียกใช้ข้อมูล ADO.NET Data Services

ก่อนอื่นให้เราไปอ้างอิงคลาส System.Data.Services.Client.dll เข้าในโปรเจ็กต์ Silverlight ก่อน โดยคลิกเมาส์ขวาบน References ของโปรเจ็กต์ Silverlight จากนั้นในหน้าต่าง Add Reference เลือกในคอลัมน์ Component Name ให้เลือก System.Data.Services.Client และคลิกปุ่ม OK ลำดับต่อไปเป็นการเรียกใช้งาน ADO.NET Data Services สำหรับบน VS2008 SP1 และ Silverlight 2 ตัวจริง สามารถกระทำได้สองวิธี กล่าวคือ

วิธีที่ หนึ่ง: สร้างคลาส Proxy อัตโนมัติ

สร้างคลาส Proxy อัตโนมัติโดยใช้ Microsoft (R) DataSvcUtil version 3.5.0.0 ซึ่งอยู่ที่พาธ C:\Windows\Microsoft.NET\Framework\v3.5\DataSvcUtil.exe และเราสามารถเรียกใช้งานผ่าน Visual Studio 2008 Command Prompt เราสามารถเรียกโปรแกรมได้จากพาธ C:\ProgramData\Microsoft\Windows\Start Menu\Programs\Microsoft Visual Studio 2008\Visual Studio Tools\Visual Studio 2008 Command Prompt จะได้หน้า Visual Studio 2008 Command Prompt ขึ้นมาดังรูปที่ 1 ในหมายเลข 1 และเราสามารถสร้างคลาส Proxy โดยใช้คำสั่ง ดังต่อไปนี้:

DataSvcUtil /out:"E:\Article\CODE_IT_Article\Part2\Silverlight2ADONETDataServices_Part2\Silverlight2ADONETDataServices\NorthwindDataService.cs" /uri:"http://localhost:1109/NorthwindWebDataService.svc"

เราจะได้ไฟล์ NorthwindDataService.cs บนในพาธเดียวกับโปรเจ็กต์ Silverlight2 ตามพารามิเตอร์ที่เราใส่ในแทก {/out:} ให้เราทำการเพิ่มเข้าไปในโปรเจ็กต์ เพื่อว่าเราสามารถเรียกใช้งานได้ในอนาคต

รูปที่ 1 สร้างคลาส Proxy อัตโนมัติโดยใช้ DataSvcUtil.exe

วิธีที่ สอง: การอ้างอิงบริการ (Add Service Reference)

วิธีการเช่นเดียวกับการอ้างอิงบริการใน WCF ที่เราเคยทำไปแล้วในหลายบทความก่อนหน้านี้ และต่อจากนี้เราไปอ้างอิงบริการกันเลยครับ ในโปรเจ็กต์ Silverlight 2 ทำการคลิกที่ References > Add Service Reference... จากนั้นเราจะได้หน้าต่าง Add Service Reference ให้คลิกไปที่ปุ่ม Discover เมื่อเราคลิกปุ่ม Discover แล้ว ในช่อง Address: VS2008 จะทำการใส่ URL ของ DataService ที่เราสร้างไว้บนโปรเจ็กต์ ASP.NET ให้ และในช่อง Namespace: ให้ทำการตั้งชื่อ Namespace ได้ตามต้องการ ในบทความนี้ขอใช้ชื่อ ServiceReference1 ที่ VS2008 ได้ตั้งค่าเป็นชื่อตั้งต้น (Default) ให้ ดังรูปที่ 2 และบทความนี้เราจะไปเรียกใช้ข้อมูล ADO.NET Data Services ด้วยวิธีที่สองกันครับ

รูปที่ 2 การอ้างอิงบริการ (Add Service Reference)

เมื่อเราได้ทำการอ้างอิงบริการของ ADO.NET Data Services เป็นที่เรียบร้อยแล้ว เราก็สามารถเข้าถึงข้อมูลบนเซอร์ฟเวอร์แล้วในลำดับต่อไปเราจะดึงข้อมูล จากเซอร์ฟเวอร์ผ่านการให้บริการของ ADO.NET Data Services และนำข้อมูลที่ได้ไปผูกกับคอนโทรลต่างๆ ตามที่เราใช้งาน ในที่นี้เราจะไปใช้งานผ่านคอนโทรล ComboBox

ขั้นตอนที่ ห้า: ผูกข้อมูลบนคอนโทรล ComboBox

ในขั้นตอนผูกข้อมูลบนคอนโทรล ComboBox เราจะกระทำผ่านเครื่องมือ Expression Blend ให้ทำการเปิดโปรเจ็กต์บนเครื่องมือ Expression Blend ขึ้นมาจากนั้นทำการเปิดไฟล์ Page.xaml และทำการเพิ่มคอนโทรล ComboBox ลงไป เราจะไปทำการผูกข้อมูลประเภทสินค้า (Category) ใส่ลงบนคอนโทรล ComboBox โดยการคลิกเมาส์ขวาบนคอนโทรล ComboBox จากนั้นเลื่อนเมาส์ลงมาเลือกเมนู Bind ItemsSource to Data... เราจะได้หน้าต่าง Create Data Binding ขึ้นมา ให้ทำการคลิกที่ปุ่ม [+CLR Object] (Add new Common Language Runtime (CLR) object data source) เมื่อเราคลิกเมาส์บนปุ่ม [+CLR Object] เครื่องมือ Expression Blend จะนำเราเข้าสู่หน้าจอ Add CLR Object Data Source ช่อง Data Source Name ตั้งชื่อเป็น dsCategory และในหน้าต่างSelect the class to create an instance of ให้เราเลือกไปที่บริการที่เราอ้างอิงจาก Server Silverlight2ADONETDataService.ServiceReference1 แล้วเลือกออบเจ็กต์ Categories จากนั้นคลิกปุ่ม OK เราจะกลับมาสู่หน้าต่าง Create Data Binding ในช่อง Data source เราจะได้ dsCategory ให้เราคลิกลงบน dsCategory จากนั้นคลิกบนปุ่ม Defaine DataTemplate เราจะเข้าสู่หน้าจอ Create Data Template ให้เราเลือกที่ปุ่ม New Data Tempalte and Display Fields และทำการเลือกฟิลด์ CategoryID และ CategoryName จากนั้นคลิกปุ่ม OK เป็นการเสร็จสิ้นการผูกข้อมูลใส่คอนโทรล ComboBox

รูปที่ 3 การผูกข้อมูลบนคอนโทรล ComboBox ด้วยเครื่องมือ Expression Blend

จากนั้นเราไปปรับพรอเพอร์ตี้ของคอนโทรล ComboBox โดยคลิกขวาบนคอนโทรล ComboBox จากนั้นเลื่อนเมาส์ลงไปเลือกเมนู Edit Control Parts (Template) > Edit Generalted Items ItemTempalte > Edit Tempalte ดังรูปที่ 4 เครื่องมือ Expression Blend จะนำเราเข้าสู่หน้าจอ DataTemplate จะเห็นว่าภายในคอนโทรล ComboBox หลังจากที่เรากำหนดแหล่งข้อมูล (DataSource) ให้เรียบร้อยแล้วภายในจะมีคอนโทรล เพิ่มขึ้นมา กล่าวคือ มีคอนโทรลของ StackPanel ซึ่งภายในของ StackPanel จะมี TexBlock 2 อัน เนื่องมาจากเราทำการผูกข้อมูลฟิลด์ออบเจ็กต์ของ CategoryID และ CategoName นั่นเอง ให้เราทำการปรับพรอเพอร์ตี้ของ StackPanel ให้แสดงตามแนวนอน โดยคลิกเมาส์ลงบนคอนโทรล StackPanel จากนั้นในกล่อง Layout ให้ตั้งค่าของ Orientation เป็น Horizontal ดังรูปที่ 5 จากนั้นคลิกที่ปุ่ม Return scope to[UserControl] เพื่อออกจากหน้าจอการแก้ไขเทมเพลตของคอนโทรล ComboBox

รูปที่ 4 ปรับพรอเพอร์ตี้เทมเพลตของคอนโทรล ComboBox

รูปที่ 5 ปรับพรอเพอร์ตี้เทมเพลตของคอนโทรล StackPanel

มาถึงตรงนี้การผูกข้อมูลใส่คอนโทรล ComboBox เป็นอันเสร็จสิ้น ในขั้นตอนต่อไปเราจะไปทำการใส่โด้ดเพื่อดึงข้อมูลจากเซอร์ฟเวอร์ และไปใช้งานคอนโทรลอีกตัวหนึ่งนั่นคือคอนโทรล Popup คอนโทรล เราจะไปใช้มันทำเป็นหน้าจอแสดงข้อความออกหน้าเพื่อให้ผู้ใช้งานทราบว่าระบบกำลังดึงข้อมูล หรือกำลังทำงานอยู่

ขั้นตอนที่ หก: ใช้งาน Popup คอนโทรล

มาในขั้นตอนนี้เรายังอยู่บนเครื่องมือ Expression Blend ให้เราไปทำการเพิ่มคอนโทรล Popup คอนโทรลเข้าไปในโปรเจ็กต์ Silverlight ที่กล่องเครื่องมือ (Toolbox) คลิกเมาส์บนเครื่องหมาย >> (Asset Library) เราจะเข้าสู่หน้าจอ Asset Library จากนั้นให้คลิกเลือกคอนโทรล Popup ดังรูปที่ 6

รูปที่ 6 Popup คอนโทรล

ทำการเปลี่ยนชื่อ Popup คอนโทรล เป็น pWait โดยคลิกเมาส์ขวาบนคอนโทรล Popup แล้วเลือกเมนู Rename จากนั้นพิมพ์ pWait ลงไปแทน หรือเราสามารถเปลี่ยนชื่อในหน้าต่างพรอเพอร์ตี้ (Properties) ในช่อง Name ได้เช่นกัน ดังรูปที่ 7 ในหมายเลข 1 จากนั้นเราเข้าไปใส่ป้ายข้อความ "Processing..." บน TextBlock โดยการคลิกเมาส์ข้างหน้าคอนโทรลตรงไอคอน > เพื่อขยาย (Expand) หลังจากที่เราคลิกขยายออกแล้วภายใต้ของคอนโทรล Popup จะเห็นมีคอนโทรล Grid อยู่หนึ่งอัน ให้เราทำการคลิกไอคอน > ข้างหน้าของคอนโทรล Grid เพื่อขยายออก เมื่อเราขยายแล้ว จะเห็นว่ามีคอนโทรล TextBlock อยู่หนึ่งอัน ให้เราไปใส่ข้อความดังกล่าวบน TextBlock อันนี้ครับ โดยคลิกเมาส์ลงบนคอนโทรล TextBlock แล้วไปที่หน้าต่างพรอเพอร์ตี้ ให้ไปที่กล่อง Common Properties ในช่อง Text ให้พิมพ์ข้อความ "Processing...." ลงไป หรือเราสามารถพิมพ์ข้อความอีกทางหนึ่ง โดยคลิกเมาส์ขวาบน TextBlock แล้วเลื่อนเมาส์ไปเลือกเมนู Edit Text จากนั้นเราสามารถพิมพ์ข้อความ "Processing...." ลงบนคอนโทรล TextBlock ได้ทันที จากนั้นเราไปปรับสีพื้นของคอนโทรล Grid ให้เป็นสีเทา ดังรูปที่ 7 ในหมายเลข 2

รูปที่ 7 ปรับพรอเพอร์ตี้ Popup คอนโทรล

เมื่อเราทำการผูกข้อมูลให้คอนโทรล ComboBox และเพิ่มคอนโทรล Popup คอนโทรล เป็นที่เรียบร้อยแล้ว ลำดับต่อไปเราจะใส่โค้ดเพื่อดึงข้อมูลจากเซอร์ฟเวอร์ เพื่อนำข้อมูลดังกล่าวไปผูกใส่คอนโทรล ComboBox และการใส่โค้ดสั่งให้คอนโทรล Popup แสดง เมื่อดึงข้อมูลจากเซอร์ฟเวอร์ และเมื่อดึงข้อมูลเรียบร้อยแล้ว ทำการซ่อนคอนโทรล Popup โค้ดของเราเป็นดังนี้:

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; using System.Data.Services.Client; using Silverlight2ADONETDataServices.ServiceReference1; namespace Silverlight2ADONETDataServices { public partial class Page : UserControl { public Page() { InitializeComponent(); Loaded += new RoutedEventHandler(Page_Loaded); } void Page_Loaded(object sender, RoutedEventArgs e) { //แสดง Popup คอนโทรล pWait.IsOpen = true; //ประกาศตัวแปร ADO.NET Entity NorthwindEntities ctx = new NorthwindEntities(new Uri("NorthwindWebDataService.svc", UriKind.Relative)); //ดึงข้อมูลจาก Categories var cats = (from t in ctx.Categories orderby t.CategoryID select t); DataServiceQuery<Categories> dsCat = (DataServiceQuery<Categories>)cats; dsCat.BeginExecute(new AsyncCallback(OnLoadComplete), dsCat); } void OnLoadComplete(IAsyncResult result) { //ผูกข้อมูลใส่คอนโทรล ComboBox DataServiceQuery<Categories> dsCat = (DataServiceQuery<Categories>)result.AsyncState; cobCategory.ItemsSource = dsCat.EndExecute(result).ToList(); //เมื่อโหลดข้อมูลเรียบร้อยแล้ว ทำการปิด Popup คอนโทรล pWait.IsOpen = false; } } }

เมื่อเราใส่โค้ดดึงข้อมูลจาก ADO.NET Data Services เป็นที่เรียบร้อยแล้ว เราไปดูการทำงานกันครับ ผลการทำงานเป็นดังรูปที่ 8

รูปที่ 8 ผลการทำงานการเรียกใช้ข้อมูลผ่าน ADO.NET Data Services และใช้งาน Popup คอนโทรล

สำหรับในตอนที่ 2 นี้เราก็ได้รู้จักการเรียกใช้ข้อมูล ADO.NET Data Services, การใช้งาน Popup คอนโทรล และการผูกข้อมูลบนคอนโทรล ComboBox ในตอนต่อไปเราจะไปรู้จักการใช้งาน VisualStateManager และการใช้งาน User Control เพื่อเพิ่มความหรูหราให้หน้าจอแอพพลิเคชันของเราให้น่าใช้งานยิ่งขึ้น แล้วพบกันใหม่ในตอนต่อไปครับ

หากเกิดข้อผิดพลาดประการใดในบทความนี้ ผู้เขียนขอน้อมรับความผิดพลาดทั้งหมดนั้นไว้แต่เพียงผู้เดียว และยินดีน้อมรับฟังคำชี้แนะ เพื่อแก้ไข และเปลี่ยนแปลง ให้เกิดสิ่งดีดีในครั้งต่อๆ ไป และหากท่านผู้อ่านพบปัญหาในการอ่านบทความ หรือปัญหาในด้านการโปรแกรมมิ่ง สามารถเข้าไปพบกับผู้เขียน และเพื่อนๆ บนชุมชนออนไลน์ http://www.greatfriends.biz เพื่อแลกเปลี่ยนประสบการณ์ สาระ ความรู้ กันและกัน และไปเยี่ยมกล่าวคำทักทายกันได้บน Blog ส่วนตัว: กรรมกรซอฟต์แวร์ http://janawat.spaces.live.com

Download source: