.NET RIA Services+Silverlight3 Charting DomainDataSource Binding step by step


 

Prerequisites

  1. Microsoft Silverlight 3 Tools for  VS2008 SP1
  2. Microsoft Expression Blend 3 + SketchFlow Trial
  3. Silverlight 3 Toolkit July 2009 Installer
  4. Microsoft .NET RIA Services July 2009 Preview

 

Microsoft ได้พัฒนา framework สำหรับการพัฒนาแอปพลิเคชันทางด้านสายงานธุรกิจ (Line of Business :LoB) ภายใต้ Silverlight โดยใช้codename ว่า Alexandria เพื่อช่วยให้นักพัฒนาสามารถพัฒนา แอปพลิเคชัน ด้วย Silverlight กับงานด้านสายงานธุรกิจ ได้ง่ายขึ้น

และประมาณปลายเดือนมีนาคม 2009 ที่ผ่านมา Microsoft เปิด .NET RIA Services ที่เรียกว่า Alexandria project ในงาน MIX 09 โดย Microsoft กล่าวว่า การทำงานจัดการข้อผิดพลาดกับ SilverLight ยังมีปัญหามาก ในการย้าย Presentation layer business logic จาก server สู่ client แต่สำหรับ .NET RIA Services สามารถกระทำได้ง่าย และมีเมตาดาต้าเพื่อตรวจสอบการสร้าง Objects โอนข้อมูลจาก Domain Objects โดยไม่จำเป็นต้องมี DTO layer ช่วยให้สามารถตรวจสอบ การจัดการข้อมูล (CRUD) ได้ง่ายขึ้น

และ Objects ที่มาพร้อมกับ .NET RIA Services คือแหล่งข้อมูลออบเจ็กต์ (DomainDataSource) ใช้เพื่อสื่อสารกับ โดเมนคลาส(DomainClasses) ช่วยให้การ Binding สามารถกระทำได้ง่ายขึ้น วิธีการของ .NET RIA Services นั้นจะช่วยให้การพัฒนาแอปพลิเคชันเพื่อจัดการ, เข้าถึงข้อมูลได้ง่ายขึ้น และรองรับการพัฒนาแอปพลิเคชันในรูปแบบ N-Tier ดูรูปภาพที2 และ3 ประกอบ และในบทความนี้ ขอนำเสนอการใช้งาน Microsoft .NET RIA Services ซึ่งเวอร์ชันที่กำลังเขียนบทความอยู่นี้เป็น .NET RIA Services Overview July 2009 Preview เราจะไปทำการดึงข้อมูลผ่าน DomainDataSource แล้วผูกข้อมูลให้กับ Chart control โดยที่เราไม่ต้องใส่โค้ดแต่ประการใด
หน้าจอแอปพลิเคชันขอลเราจะเป็นดังรูปที่1
 

SL3ChartingRIAService

รูปที่1 Charting DomainDataSource Binding

 

N-tier แอปพลิเคชันอย่างง่าย

image 
Ref:> Document Microsoft .NET RIA Services Overview July 2009 Preview

รูปที่2 แสดง N-tier แอปพลิเคชันอย่างง่าย

.NET RIA Services เชื่อม logic ระหว่าง Presentation layer และ DataAccess layer

image
Ref:> Document Microsoft .NET RIA Services Overview July 2009 Preview

รูปภาที่3 .NET RIA Services

และจากรูปที่ 3 กลายเป็น Rich Internet Application เสมือนว่า Presentation logic เชื่อมกับ Application logic ทำให้นักพัฒนาสามารถใส่โค้ดจัดการข้อมูล CRUD ได้ง่ายขึ้น

image 
Ref:>http://www.nikhilk.net/Silverlight3-RIA-Services-Update.aspx

รูปที่4 Rich Internet Application

 

ขั้นตอนการสร้างแอปพลิเคชัน

  • ขั้นตอนที่ หนึ่ง สร้างโปรเจ็กต์ Silverlight
  • ขั้นตอนที่ สอง สร้าง ADO.NET Entity Data Model
  • ขั้นตอนที่ สาม สร้าง Domain Service Class
  • ขั้นตอนที่ สี่ ออกแบบหน้าจอแอปพลิเคชันด้วย Expression Blend 3
  • ขั้นตอนที่ ห้า เพิ่มคอนโทรล Chart และ DomainDataSource
  • ขั้นตอนที่ หก ผูกข้อมูล DataContext ให้กับ DomainDataSource control 
  • ขั้นตอนที่ เจ็ด ผูกข้อมูล DataContext ให้กับ Chart contro
  • ขั้นตอนที่ แปด ทดสอบรันแอปพลิเคชัน

 

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

สร้างโปรเจ็กต์ Silverlight ด้วยเทมเพลต Silverlight Application

1

 

 

เปิดการใช้งาน .NET RIA Services => ติ๊กเมาส์เลือก Host the Silverlight application in a Web Site เพื่อให้ VS2008 สร้างโปรเจ็กต์ ASP.NET เป็นแหล่งเก็บข้อมูลไฟล์ Silverlight (*.xap) => ติ๊กเมาส์เลือก Enable .NET RIA Services เพื่อเปิดใช้งาน RIA Service

2 

 

ขั้นตอนที่ สอง สร้าง ADO.NET Entity Data Model

เราจะได้สองโปรเจ็กต์ คือโปรเจ็กต์ Silverlight และโปรเจ็กต์ ASP.NET ซึ่งเป็น host แหล่งเก็บข้อมูลไฟล์ Silverlight (*.xap) => ให้คลิกขวาบนโปรเจ็กต์ ASP.NET => Add = > New Item…

3

4

 

เลือกไอเทม ADO.NET Entity Data Model

5

6

 

สร้าง Connection ชี้ไปยังแหล่งฐานข้อมูล => เลือก View Category Sales for 1997 เราจะนำข้อมูลรายงานการขายตามประเภทสินค้าในปี 1997 ไปออกรายงานกราฟ

7

8

 

ตัวอย่างข้อมูลจาก View Category Sales for 1997

9

 

 

สร้างแหล่งเข้าถึงข้อมูล(DAL) เรียบร้อย ลำดับต่อไปจะไปสร้าง Domain Service Class (App logic)

10

 

ขั้นตอนที่ สาม สร้าง Domain Service Class

ให้ทำการ Build โปรเจ็กต์ ASP.NET หนึ่งครั้งเพื่อให้ VS2008 ทำการสร้างคลาสต่างๆ ไว้ตามที่เราได้ทำการเพิ่มไอเทม ADO.NET Entity Data Model เมื่อสักครู่ เพราะเราต้องนำไปใช้งานต่อ => จากนั้นทำการเพิ่มไอเทม Domain Service Class

 11 12

 

เลือก Entities Category_Sales_for_1997 เราไม่ติ๊กเลือก Enable editing เนื่องจากเราไม่ต้องการจัดการข้อมูล(CRUD) => คลิก OK

จากนั้นเราจะได้คลาส NorthwindDomainService ภายในจะใช้ LinqToEntitiesDomainService ในการเข้าถึงข้อมูล

13

14

 

Build Solution สักหนึ่งครั้ง => ไปที่โปรเจ็กต์ Silverlight => คลิก Show All Files

15

16

 

เราจะเห็น Logic ในฝั่ง Presentation ในไฟล์ Silverlight3_Charting_DomainDataSource_Binding.Web.g.cs

18

โดยภายในจะมีเมธอด GetCategory_Sales_for_1997Query() ให้เราใช้งานในการโหลดข้อมูล

19

 

ขั้นตอนที่ สี่ ออกแบบหน้าจอแอปพลิเคชันด้วย Expression Blend 3

ก่อนเปิดโหปรเจ็กต์ใน Blend ให้เรา ref. dll สองตัวนี้เข้าไปในโปรเจ็กต์ Silverlight ก่อน

System.Windows.Controls.Toolkit.dll => ใช้งาน Chart control

System.Windows.Ria.Controls.dll => ใช้งาน DomainDataSource

 20_1 20_2

คลิกขวาบนไฟล์ MainPage.xaml => Open in Expression Blend…

2021

 

 

ขั้นตอนที่ ห้า เพิ่มคอนโทรล Chart และ DomainDataSource

เพิ่ม Chart control และ DomainDataSource control

22

  25

 

ปรับแต่ง Chart นิดหน่อยโดยการขายให้เต็มจอ และยึดติดทั้งสี่ด้าน

2324

 

เปลี่ยนชื่อ DomainDataSource => dsDomainDataSource โดยคลิกเมาส์ลงบน อ็อบเจ็กต์ DomainDataSource แล้วพิมพ์ชื่อลงไป

26 27

 

ขั้นตอนที่ หก ผูกข้อมูล DataContext ให้กับ DomainDataSource control 

ผูกข้อมูล DataContext ให้กับ DomainDataSource control  =>ไปที่แทบ Properties=> Common Properties =>คลิก New ตรง DataContext = > ในหน้าต่าง Select Object => NorthwindDomainContext ชื่อจะตาม Domain Service class ที่เราสร้าง => OK

28

29

Binding DataContext เรียบร้อย จะเห็นว่าใน Datacontext มี NorthwindDomainContext อยู่ภายใน

30

 

ลำดับต่อไปให้ไปที่แทบ Miscellaneous ระบุเพื่อระบุ QueryName และ DomainContext ก่อนอื่นให้ไป Copy เมธอด  GetCategory_Sales_for_1997Query ในไฟล์ logig ฝั่ง presentation ที่ได้กล่าวถึงในขั้นต้น

31

 

ไปวางในช่อง QueryName => ผูกข้อมูลให้กับ DomainContext => DataBinding

32

32_1

 

เลือก NorthwindDomainContext => OK ท่านผู้อ่านจะเห็นว่าช่อง DomainContext เปลี่ยนเป็นสีเหลืองแล้ว ตามประเภทการ Binding และการผูกข้อมูลให้ DomainDataSource ถือเป็นอันเรียบร้อยครับ ลำดับต่อไปจะเป็นขั้นตอนการผูกข้อมูลให้ Chart control

32_2 32_3

 

ขั้นตอนที่ เจ็ด ผูกข้อมูล DataContext ให้กับ Chart contro

ให้คลิกลงบน Chart control => Commaon Properties ให้ระบุตามภาพ

AnimationSequence: FirstToLast เป็นการกำนหดให้แท่งกราฟเคลื่อนใหวจากแท่งแรกไปยังแท่งสุดท้าย

DependentValuePath: กำหนดค่าให้กับกราฟ โดยระบุ filed ที่เป็น Value ในที่นี้เป็น CategorySales

IdependentValuePath: กำหนดป้ายให้แท่งกราฟ โดยระบุ filed ที่เป็น Label  ในที่นี้เป็น CategoryName

33

 

 

Binding ItemSource เพื่อกำหนดแหล่งข้อมูล => DataBinding

34

 

เลือกแทบ Element Properties => dsDomainDataSource=>Data:(IEnumerable) => OK

35

 

 

Binding DataContext => New => NorthwindDomainContext  => OK

36

การผูกข้อมูลให้ Chart control เป็นอันเรียบร้อย ทำการ Save และไปทดสอบรันดูข้อมูลกันเลยครับ

37 38

 

ขั้นตอนที่ แปด ทดสอบรันแอปพลิเคชัน

จะได้รูปกราฟดังรูป

39

 

ถ้าต้องการให้คลิกเมาส์ลงบนแท่งกราฟได้ให้กำหนด IsSelectionEnabled

40

 

เราก็จะสามารถคลิกเมาส์ลงบนแท่งกราฟต่างๆ ได้

41

 

สิ่งเราทำมาตั้งแต่ ขั้นตอนที่ สี่ จนถึงขั้นตอนที่ขั้นตอนที่ เจ็ด สิ่งที่ Expression Blend 3 จัดการให้เราเป็น Script XAML ดังรูป ถ้าผู้อ่านใด ถนัด Script XAML (XAML จ๋า) ก็ไม่ต้องใช้ Blend ครับสามารถระบุด้วยโค้ด XAML ดูเหมือนจะสั้นกว่า แต่ส่วนตัวผู้เขียนแล้วไม่อยากจำ ใช้เครื่องมือช่วยง่ายกว่า การใช้งานแรกๆ อาจจะเหนื่อยหย่อย แต่ใช้งานบ่อยๆ นานๆ เข้าจะกลายเป็นความเคยชิน มันจะกลายเป็นเรื่องง่าย และกลายเป็นการใช้งานที่สนุก

42 

 

ท่านผู้อ่านอาจมองหาโค้ดในการโหลดข้อมูล ต้องบอกว่าเสียใจ ในบทความนี้ไม่มีโค้ดใดๆ ไม่ว่าจะ C# หรือ VB.Net เนื่องจากว่าเราใช้ความสามารถของ .NET RIA Service และ DomainDatasource ในการช่วยโหลดข้อมูลให้อัตโนมัตินั่นเอง

 

แหล่งข้อมูลดาวน์โหลด:
http://cid-7d608959d854cb28.skydrive.live.com/embedrowdetail.aspx/SourcesCode/NET|_RIA|_Services+Silverlight3ChartingDomainDataSourceBindingStepByStep.zip

 

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

 

ผู้เขียน:
nano_mvp_2009_1

 

Advertisements
เกี่ยวกับ

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

เขียนใน RIA Services

ใส่ความเห็น

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: