สร้างแอพพลิเคชันง่ายๆ ด้วย Silverlight 2 RIA WCF และ LINQ


 

สิ่งที่จำเป็น (Prerequisites)

  • Microsoft Visual Studio 2008 Professional Edition
  • SQL Server 2005 EXPRESS
  • Silverlight 2 Beta Runtime
  • Windows Silverlight 2 runtime
  • Visual Studio 2008 plug – in
  • Silverlight 2 SDK Beta 1

บทนำ

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

ทุกวันนี้นวัตกรรมที่เหมาะกับการพัฒนาเว็บแอพพลิเคชันที่ตอบสนองความต้องการด้าน RIA (Rich Internet Application) คือสามารถตอบสนองอินเทอร์แอ็กทีฟ(Interactive) กับผู้ใช้ได้เป็นอย่างดี คงหนีไม่พ้นเทคโนโลยี Silverlight ของ Microsoft ยุคสมัยนี้ทุกคนคงรู้จักกันดี ซึ่ง Silverlight คือ ปลั๊กอินที่คล้ายกับ Flash Player มาช่วยให้นักออกแบบ และนักพัฒนาสามารถพัฒนาแอพพลิเคชันประเภทมัลติมีเดียสมบูรณ์แบบขึ้น สามารถรันได้ในหลายๆ บราวเซอร์ เช่น IE (Internet Explorer), Firefox, Safari และสามารถรันได้หลายแพลตฟอร์ม เช่น วินโดว์, ลีนุกซ์ และแมคอินทอช

Silverlight version ล่าสุด (ขณะที่เขียนบทความ) เป็นเวอร์ชั่น 2.0 Beta 1 ฟีเจอร์ใหม่ที่มากับ Silverlight 2.0 Beta1 มีคอนโทรลพื้นฐานให้ใช้งานเพิ่มขึ้นจาก Silverlight 1.0 (ฟีเจอร์ใหม่หาข้อมูลได้ที่ตามเอกสารอ้างอิง:Silverlight 2.0 Beta1 ฟีเจอร์) ในบทความนี้เราจะมาสร้างแอพพลิเคชัน Silverlight2 RIA แสดงข้อมูลลูกค้าจากฐานข้อมูล Northwind บน SQL Server 2005 EXPRESS โดยเรียกข้อมูลผ่าน WCF (Windows Communication Foundation) และใช้ LINQ (Language Integrated Query) เพื่อติดต่อกับฐานข้อมูล หน้าจอแอพพลิเคชัน Silverlight2 RIA WCF and LINQ แสดง ดังรูปที่ 1 หน้าจอแอพพลิเคชัน Silverlight2 RIA WCF and LINQ

clip_image002

รูปที่ 1. หน้าจอแอพพลิเคชัน Silverlight2 RIA WCF and LINQ

ตรวจสอบความพร้อมก่อนเริ่มบทความ

ก่อนเริ่มบทความเรามาทำการตรวจสอบเครื่องคอมพิวเตอร์ของเราก่อนว่าพร้อมสำหรับการพัฒนาแอพพลิเคชัน Silverlight2 RIA WCF and LINQ หรือยัง?… โปรแกรมที่ใช้ในบทความ มีดังนี้

ออกแบบแอพพลิเคชัน

ขั้นตอนออกแบบแอพพลิเคชันมีขั้นตอนดังนี้

ขั้นตอนที่ 1: สร้างโปรเจ็กต์ ASP.Net และ โปรเจ็กต์ Silverlight 2 การทำงานของ โปรเจ็กต์ ASP.Net ทำงานบนฝั่งเซอร์ฟเวอร์ (Server) ส่วนโปรเจ็กต์ Silverlight 2 ทำงานฝั่ง ไคลเอ็นต์ (Client)

ขั้นตอนที่ 2: สร้างดาต้าเลเยอร์ (Data Layer: DL) หรือ LINQ เพื่อติดต่อกับฐานข้อมูล

ขั้นตอนที่ 3: สร้างเซอร์วิสเลเยอร์ (Service Layer: SL) หรือบริการ WCF เพื่อดึงข้อมูลจาก LINQ และส่งให้ไคลเอ็นต์ ที่ร้องขอข้อมูล

ขั้นตอนที่ 4: สร้างโคดในโปรเจ็กต์ Silverlight 2 ซึ่งทำงานในฝั่งไคลเอ็นต์ ให้เรียกข้อมูลผ่าน WCF Service มาแสดงบน DataGrid

ขั้นตอนที่ 1: สร้างโปรเจ็กต์

หลังจากเราตรวจสอบเครื่องคอมพิวเตอร์และติดตั้งโปรแกรมต่างๆ ที่มีใช้ในบทความนี้เรียบร้อยแล้ว ก็พร้อมสำหรับการพัฒนาแอพพลิเคชัน ให้เปิดโปรแกรม VS2008 ไปที่เมนู File คลิกและบนเมนู New Project ในหน้าต่าง New Project ช่อง Project types: ให้เลือกภาษาตามที่ผู้อ่านถนัด (ในบทความนี้จะใช้ภาษา C#) ในช่อง Templates: ให้เลือกประเภทโปรเจ็กต์เป็น Silverlight Application แล้ว คลิก OK ดังรูปที่ 2 สร้างประเภทโปรเจ็กต์เป็น Silverlight Application

clip_image004

รูปที่ 2. สร้างประเภทโปรเจ็กต์เป็น Silverlight Application

ในหน้าต่างการเพิ่มแอพพลิเคชัน Silverlight ใน VS2008 เราสามารถเลือกได้สองแบบ แบบแรกเป็นการสร้างแอพพลิเคชัน Silverlight ที่มีทั้งแอพพลิเคชัน ASP.NET และ แอพพลิเคชัน Silverlight แบบที่สองจะสร้างเฉพาะ แอพพลิเคชัน Silverlight ฝั่งไคลเอ็นต์ เท่านั้นโดยจะมี HTML เพ็จทดสอบให้ตอนเรารันแอพพลิเคชัน ในบทความนี้จะเลือกแบบแรก และ Options Project Type ให้เลือกเป็น web Application Project ดังรูปที่ 3 หน้าต่างการเพิ่มแอพพลิเคชัน Silverlight คลิก OK เราจะได้ โซลูชั่น Silverlight ที่มีทั้ง ASP.NET และ Silverlight ดังรูปที่ 4

clip_image006

รูปที่ 3. หน้าต่างการเพิ่มแอพพลิเคชัน Silverlight

จากรูปที่ 4 เราได้โปรเจ็กต์สองโปรเจ็กต์คือ โปรเจ็กต์แรก SilverlightApplication1 ทำงานฝั่งไคลเอ็นท์ และโปรเจ็กต์ที่สอง SilverlightApplication1_Web เป็นโปรเจ็กต์ ASP.NET ทำงานฝั่งเซอร์ฟเวอร์

clip_image008

รูปที่ 4. โซลูชั่น Silverlight ที่มีทั้ง ASP.NET ฝั่งเซอร์ฟเวอร์ และ Silverlight ฝั่งไคลเอ็นต์

ขั้นตอนที่ 2: สร้างดาต้าเลเยอร์ (Data Layer: DL) หรือ LINQ

แอพพลิเคชันฝั่งไคลเอ็นต์ สามารถเรียกใช้งานข้อมูลผ่านบริการ WCF Service โดยใช้ LINQ ในการเข้าถึงข้อมูล การสร้าง LINQ ทำโดยคลิกขวาบนโปรเจ็กต์ของ ASP.NET และเลือก Add New Item จากเลือก LINQ to SQL classes ในช่อง Name ให้ตั้งชื่อตามต้องการ ในบทความนี้ใช้ชื่อ DataClasses1.dbml ดังรูปที่ 5 Add New Item LINQ to SQL classes จากนั้นคลิก Add

clip_image010

รูปที่ 5. Add New Item LINQ to SQL classes

เราจะได้หน้าต่างออกแบบ LINQ to SQL classes ให้เราทำการสร้างคอนเนคชั่น (Connection) ชี้ไปที่ฐานข้อมูลตัวอย่าง Northwind แล้วทำการคลิกบนตารางที่ต้องการลากไปวางบนหน้าต่างออกแบบ LINQ to SQL classes ในบทความนี้เป็นการทำงานกับข้อมูลตารางลูกค้า (Customers) จึงทำการเลือกเพียงหนึ่งตาราง ดังรูปที่ 6 หน้าต่างออกแบบ LINQ to SQL classes

clip_image012

รูปที่ 6. หน้าต่างออกแบบ LINQ to SQL classes

เมื่อเราลากตารางตารางลูกค้าไปวางบนหน้าต่างออกแบบ LINQ to SQL classes VS2008 จะทำการ แมปตารางลูกค้าเป็นออปเจ็กต์ลูกค้าทำให้เราสามารถนำมาใช้งานในการเขียนโปรแกรมแบบเชิงวัตถุ (OOP) ได้

ออปเจ็กต์ตารางที่ LINQ สร้างให้ ยังไม่ได้ซีเรียลไลซ์เอเบิล (serializable) ทำให้ไม่สามารถใช้งานผ่าน WCF Service ได้เราต้องทำการเปลี่ยน Serialization Mode จาก None เป็น Unidirectional โดยคลิกขวาบนหน้าต่างออกแบบ LINQ to SQL classes แล้วเลือก properties ดังรูปที่ 7 การเปลี่ยน Serialization Mode เป็น Unidirectional แล้วทำการบันทึก LINQ โดยคลิกบนไอคอนรูปดิสค์ 1 ครั้ง เป็นการสร้างดาต้าเลเยอร์เสร็จเรียบร้อย

clip_image014

รูปที่ 7. การเปลี่ยน Serialization Mode เป็น Unidirectional

ขั้นตอนที่ 3: สร้างเซอร์วิสเลเยอร์ (Service Layer: SL) หรือบริการ WCF

เมื่อเราทำการสร้างดาต้าเลเยอร์เสร็จเรียบร้อยแล้ว ขั้นตอนนี้ถือว่าแอพพลิเคชันของเราสามารถเข้าถึงข้อมูลเรียบร้อยแล้ว ต่อไปเราจะสร้างส่วนของเซอร์วิสเลเยอร์เพื่อดึง และส่งข้อมูลไปให้ไคลเอ็นต์ ที่ร้องขอข้อมูลมา การสร้าง WCF Service ทำโดยคลิกขวาบนโปรเจ็กต์ของ ASP.NET และเลือก Add New Item จากนั้นเลือก WCF Service และใช้ชื่อเป็น Service1.svc ดังรูปที่ 8 การสร้าง WCF Service

clip_image016

รูปที่ 8. การสร้าง WCF Service

เราทำเปลี่ยนคอนแทรคท์ (Contract) โดยเปลี่ยนเมธอดอินเตอร์เฟซ (Interface) ในไฟล์ IService1.cs จาก void DoWork() ไปเป็น List<Customer> GetAllCustomers() เพื่อดึงข้อมูลลูกค้า ดังรูปที่ 9 เมธอดอินเตอร์เฟซ List<Customer> GetAllCustomers()

clip_image018

รูปที่ 9. เมธอดอินเตอร์เฟซ List<Customer> GetAllCustomers()

คลาส Service1 เป็นการอิมพลีเมนต์ อินเตอร์เฟซ IService1 ดังรูปที่ 10 คลาส Service1

clip_image020

รูปที่ 10. คลาส Service1

ในคลาส Service1 เราทำการอิมพลีเมนต์ อินเตอร์เฟซ IService1 โดยเปิดไฟล์ Service1.svc.cs แล้วทำการคลิกขวาบน IService1 เลือกเมนู Implement Inter และเมนู Implement Interface VS2008 จะทำการสร้างเมธอด ดังรูปที่ 11 การอิมพลีเมนต์อินเตอร์เฟซ IService1

clip_image022

รูปที่ 11. การอิมพลีเมนต์อินเตอร์เฟซ IService1

จากรูปที่ 11 ในเมธอด public List<Customer> GetAllCustomers() ที่ได้จากการอิมพลีเมนต์ อินเตอร์เฟซ IService1 ทำการเขียนโคดด้วย LINQ ดังนี้

public List<Customer> GetAllCustomers()

{

//throw new NotImplementedException();

//สร้างออปเจ็กต์ดาต้าคอนแทรค (Object Datacontract)

using (DataClasses1DataContext db = new DataClasses1DataContext())

{

//คูรี่ข้อมูลในออปเจ็กต์ตารางลูกค้า (Object Customers)

var cus = from c in db.Customers

select c;

//ส่งข้อมูลกลับในรูปแบบของลิสท์ (List)

return cus.ToList<Customer>();

}

}

เราสร้างเซอร์วิสเลเยอร์ (Service Layer: SL) หรือบริการ WCF Service เพื่อดึงข้อมูลจาก LINQ และส่งกลับให้ไคลเอ็นต์ เรียบร้อย

ใน Silverlight ซัพพอร์ต การ binding แบบ basicHttpBinding เท่านั้น เนื่องจากใน SOAP 1.1 endpoint Service ใช้การ binding แบบ Basic HTTP Binding ในโปรเจ็กต์ ASP.NET เราทำการแก้ไขไฟล์ web.config โดยเปลี่ยนจาก wsHttpBinding เป็น basicHttpBinding ดังรูปที่ 12 การตั้งค่า bindingของ WCF Service เป็น basicHttpBinding

clip_image024

รูปที่ 12. การตั้งค่า binding ของ WCF Service เป็น basicHttpBinding

พอร์ต (port) ใน ASP.NET Development Server ดีฟอลต์จะเป็นแบบไดนามิค (dynamic) เราทำการเปลี่ยนเป็นแบบสเปซิฟิค (Specific) เพื่อกำหนดให้โปรเจ็กต์ ASP.NET รันพอร์ตที่เราต้องการ โดยคลิกขวาบนโปรเจ็กต์ ASP.NET เลือกเมนู properties เลือกแทบ Web ตรง Use Visual Studio Development Server ให้เลือก Specific port ดังรูปที่ 13 กำหนดให้โปรเจ็กต์ ASP.NET รันพอร์ตที่เราต้องการ จุดประสงค์ที่ต้องกำหนดพอร์ตเนื่องจาก ในโปรเจ็กต์ Silverlight 2 มีการเรียกใช้งาน WCF Service บนโปรเจ็กต์ ASP.NET เพื่อไม่ให้พอร์ต ASP.NET Development Serverเปลี่ยน ตอนเราเปิด – ปิด VS 2008

clip_image026

รูปที่ 13. กำหนดให้โปรเจ็กต์ ASP.NET รันพอร์ตที่เราต้องการ

การเพิ่ม Service References เข้ามาในโปรเจ็กต์ Silverlight 2 เพื่อเรียกใช้งานเมธอด WCF Service ทำดังนี้

– Copy url ของ WCF Service โดยคลิกขวาบน Service1.svc (บนโปรเจ็กต์ ASP.NET) เลือกเมนู View in Browser ดังรูปที่ 14 Copy url ของ WCF Service

– เพิ่ม Service References เข้ามาในโปรเจ็กต์ Silverlight 2 โดยคลิกขวาบน References เลือกเมนู Add Service Reference แล้ววาง url ของ WCF Service กดปุ่ม Go และคลิก OK ดังรูปที่ 15 เพิ่ม Service References เข้ามาในโปรเจ็กต์ Silverlight 2

clip_image028

รูปที่ 14. Copy url ของ WCF Service

clip_image030

รูปที่ 15. เพิ่ม Service References เข้ามาในโปรเจ็กต์ Silverlight 2

เรามาทำการออกแบบหน้าจอในส่วนของโปรเจ็กต์ Silverlight 2 ดับเบิ้ลคลิกบนไฟล์ Page.xaml แล้วลากคอนโทรล StackPanel, Button และ DataGrid มาวางในส่วนของ โคด XAML ดังรูปที่ 16 คอนโทรล StackPanel, Button และ DataGrid บนไฟล์ Page.xaml

clip_image032

รูปที่ 16. คอนโทรล StackPanel, Button และ DataGrid บนไฟล์ Page.xaml

ที่คอนโทรล Button ให้เพิ่มพร็อพเพอร์ตี (properties) ดังนี้

<Button Content="LoadData" Width="120" Click="btLoad_Click" x:Name="btLoad" />

โดยสังเกตตรงพร็อพเพอร์ตี Click ตอนเราพิมพ์เครื่องหมายเท่ากับ (=) จะขึ้น <New Event Hander> ดังรูปที่ 17 พร็อพเพอร์ตี Click ให้ใช้เมาส์คลิกลงไป VS2008 จะเจนเนอเรตอีเวนต์ btLoad_Click ให้ดังนี้

private void btLoad_Click(object sender, RoutedEventArgs e)

{

}

clip_image034

รูปที่ 17. พร็อพเพอร์ตี Click

ที่คอนโทรล DataGrid เพิ่มพร็อพเพอร์ตี ดังนี้

<my:DataGrid AutoGenerateColumns="True" x:Name="dataGrid" Width="380" Height="260"/>

AutoGenerateColumns="True" ให้ DataGrid สร้างคอลัมน์อัตโนมัติ (ตอนโหลดข้อมูล) โดยจำนวนคอลัมน์เท่ากับจำนวนฟิลด์ของตารางที่โหลด ดังรูปที่ 18 สร้างคอลัมน์อัตโนมัติ

clip_image036

รูปที่ 18. สร้างคอลัมน์อัตโนมัติ

การออกแบบหน้าจอในส่วนของโปรเจ็กต์ Silverlight 2 เสร็จสมบูรณ์ดังรูปที่ 19 หน้าจอในส่วนของ

โปรเจ็กต์ Silverlight 2

clip_image038

รูปที่ 19. หน้าจอในส่วนของโปรเจ็กต์ Silverlight 2

ขั้นตอนที่ 4: สร้างโคดโปแกรมใน Silverlight 2 ซึ่งทำงานในฝั่งไคลเอ็นต์

การโหลดข้อมูลของโปรเจ็กต์ Silverlight 2 เกิดขึ้นเมื่อเราคลิกบนปุ่มบัตตอน (Button) เรามาทำการเขียนโคดโหลดข้อมูลกันครับ คลิกขวาบนพร็อพเพอร์ตีชื่อ btLoad_Click เลือกเมนู Navigate to Event Hander จะเข้าในส่วนของโคดบีไฮน์ (Behind) ดังรูปที่ 20 เมนู Navigate to Event Hander

clip_image040

รูปที่ 20. เมนู Navigate to Event Hander

ประกาศตัวแปร svc โดยสร้างประเภทออปเจ็กต์ใหม่เป็น Service1Client ของ WCF Service ตามชื่อที่เราอ้างอิงมาในโปรเจ็กต์ Silverlight 2 ในบทความนี้ตั้งชื่อเป็น ServiceReference1 จากนั้นใน

เมธอด GetAllCustomersCompleted ให้เพิ่มอีเวนต์แฮนด์เลอร์ (EventHandler) โดยพิมพ์เครื่องหมายบวกและเครื่องหมายเท่ากับติดกัน (+=) แล้วให้กด TAB VS2008 จะเจนเนอเรตอีเวนต์แฮนด์เลอร์ ให้อัตโนมัติ และในเมธอด GetAllCustomersCompletedEventArgs ให้กด TAB เช่นเดียวเพื่อให้ VS2008 เจนเนอเรตโคดให้ดังรูปที่ 21 กด TAB VS2008 เจนเนอเรตอีเวนต์แฮนด์เลอร์ ให้อัตโนมัติ จากนั้นเรียกใช้เมธอด svc.GetAllCustomersAsync() เพื่อดึงข้อมูลของลูกค้าทั้งหมด และในอีเวนต์ void svc_GetAllCustomersCompleted() ให้เพิ่มโคด dataGrid.ItemsSource = e.Result เพื่อดึงข้อมูลมาแสดงบน DataGrid ดังรูปที่ 22 ข้อมูลมาแสดงบน DataGrid

clip_image042

รูปที่ 21. กด TAB VS2008 เจนเนอเรตอีเวนต์แฮนด์เลอร์ ให้อัตโนมัติ

clip_image044

รูปที่ 22. ข้อมูลมาแสดงบน DataGrid

ทดสอบแอพพลิเคชัน

ทดสอบแอพพลิเคชันโดยกด F5 และเมื่อขึ้นหน้าจอของโปรเจ็กต์ Silverlight 2 ให้กดปุ่ม LoadData จะมีข้อมูลลูกค้าแสดงบน DataGrid ตามที่เราออกแบบไว้ ดังรูปที่ 23 ทดสอบแอพพลิเคชัน

clip_image046

รูปที่ 23. ทดสอบแอพพลิเคชัน

บทสรุป:

และแล้วการใช้งาน Silverlight 2 ทำงานกับข้อมูลไม่ใช่เรื่องยากอีกต่อไปสำหรับนักพัฒนายุคใหม่ ต้องขอบคุณ VS2008, Silverlight 2, WCF และ LINQ ที่เข้ามาช่วยให้ชีวิตของผม และนักพัฒนาอีกหลายๆ ท่าน เริ่มสะดวก, สนุก และสดใสขึ้นแล้ว

หากเกิดข้อผิดพลาดประการใดในบทความนี้ ผู้เขียนยินดีน้อมรับคำแนะนำ และพร้อมแก้ไขในครั้งต่อๆ ไปครับ

แหล่งข้อมูลอ้างอิง:

Source: จาก: นิตยสาร CODE IT [สอดอยู่ในเล่ม Windows ITPro ฉบับเดือน พฤษภาคม 2551]

เกี่ยวกับ

Nuchit Atjanawat is a Microsoft MVP, GreatFriends Community Leader, WindowsITPro Columnist(Mr.Nano), Silverlight Business Application Instructor, Speaker in various Microsoft events, Author, passionate Blogger and a Software Engineer by profession. He has a very good skill over Silverlight, LightSwitch, C#, XAML & Blend. He shares his technical findings, tutorials in his technical blog. Follow his Blog and Facebook page to be updated on latest articles. - Technical Blog: https://janawat.wordpress.com - WindowsITPro Columnist(Mr.Nano): http://windowsitpro.net - The GreatFriends.Biz Community Discussion Board (nano): http://greatfriends.biz - witter: https://twitter.com/janawat - Facebook Page: https://www.facebook.com/nuchit - Instructor: http://bit.ly/GF250-01, http://bit.ly/GF150-02

เขียนใน Silverlight
One comment on “สร้างแอพพลิเคชันง่ายๆ ด้วย Silverlight 2 RIA WCF และ LINQ
  1. tum พูดว่า:

    ทำไมบทความไม่มีรูปเลย ละคับ เป็นเกือบทุกบทความ ของ silverlight …

ใส่ความเห็น

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / เปลี่ยนแปลง )

Twitter picture

You are commenting using your Twitter account. Log Out / เปลี่ยนแปลง )

Facebook photo

You are commenting using your Facebook account. Log Out / เปลี่ยนแปลง )

Google+ photo

You are commenting using your Google+ account. Log Out / เปลี่ยนแปลง )

Connecting to %s

In Archive
%d bloggers like this: