Silverlight 2 beta 2 + WCF + LINQ + DataGrid


 

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

Download source code:

บทนำ

ใน Silverlight 2 เบต้า1 เมื่อเราสร้าง WCF Service เราจะใช้ WCF Service template ใน VS2008 ซึ่งในการ binding แล้ว เราจะต้องเข้าไปปรับเปลี่ยนไฟล์ config ใน ASP.NET web.config จาก wsHttpBinding ไปเป็น basicHttpBinding เนื่องจาก Silverlight Support การ binding แบบ basicHttpBinding นั่นเอง [ดูตัวอย่างใน: สร้างแอพพลิเคชันง่ายๆ ด้วย Silverlight 2 RIA WCF และ LINQ]

แต่สำหรับใน Silverlight 2 เบต้า 2 หลังจากที่เราทำการติดตั้ง tools เครื่องมือสำหรับ VS2008 แล้วเราจะได้ item ชนิดใหม่ขึ้นมา ชื่อ Silverlight-enabled WCF Service  ดังรูปที่ 1:

xx

รูปที่ 1:

สำหรับ Silverlight-enabled WCF Service นั้น ส่วน interface และ implementation ถูกรวมเป็นเพียงหนึ่งคลาส เพื่อช่วยให้การใส่โค้ดนั้นง่ายขึ้น และทางไมโครซอฟท์มีการพัฒนาคอนโทรลที่ซับซ้อนอย่างเช่น DataGrid, Calendar, TabPanel สำหรับคอนโทรลใน Silverlight 2.0 ตัวจริงที่จะปล่อยออกมา คือมีคอนโทรลมากกว่า 100 คอนโทรลให้เหล่านักพัฒนาได้เลือกใช้งาน: จาก [ScottGu Blog]

ในบทความนี้เราไปลองใช้เครื่องมือมีระดับอย่าง: Microsoft Expression Blend 2.5 June 2008 Preview และ VS2008 ในการพัฒนาแอพพลิเคชันบน Silverlight 2 เบต้า2 และจะใช้คอนโทรล DataGrid ซึ่งใน Silverlight 2 เบต้า2  จะเพิ่มปมเด่นคือมันสามารถ Autogenerated Columns, Automatic Sizing และ Automatic Sorting โดยไม่ต้องใส่โค้ดแต่อย่างใด และเป้าประสงค์ของเราหน้าตาแอพพลิเคชันจะเป็นดัง รูปที่ 2: โดยเมื่อเราคลิกบนปุ่ม Load Data จะแสดงข้อมูล Product บน DataGrid  เมื่อเราทำการคลิกเมาส์บนคอลัมน์ มันจะทำการเรียงข้อมูลให้

30

รูปที่ 2:

 

สร้างโปรเจ็กต์ (New Project)

หยิบเครื่องมีระดับอย่าง VS2008 ขึ้นมา ไปที่เมนู File=> New Project… ดังรูปที่ 3: จากนั้นเลือกเทมเพลตโปรเจ็กต์เป็น  Silverlight Application ดังรูปที่ 4 และ 5 ตามลำดับ

1 2 3

รูปที่ 3:                รูปที่ 4:                                                                รูปที่ 5:

 

ในรูปที่ 6 ใช้ตามดีฟอลด์กด OK จะได้สองโปรเจ็กต์ดังรูปที่ 7: คือโปรเจกต์ SL2B2_WCF_LINQWeb (ASP.NET) จะทำงานฝั่ง Server และให้บริการข้อมูล (WCF Service) ให้กับไคลเอ็นต์ โปรเจ็กต์ที่สอง คือโปรเจ็กต์ SL2B2_WCF_LINQ (Silverlight 2) ทำงานฝั่งไคลเอ็นต์ และเป็นผู้ร้องขอข้อมูล

4 5

รูปที่ 6:                                                   รูปที่ 7:

 

สร้าง LINQ:

ในขั้นตอนนี้ เรามาทำการสร้าง LINQ เพื่อดึงข้อมูลจากฐานข้อมูล ให้คลิกเมาส์ขวาบนโปรเจ็กต์ SL2B2_WCF_LINQWeb เลื่อนเมาส์ลงมาเลือกเมนู AddNew Item… จากนั้นทำการเลือกเทมเพลต LINQ to SQL Classes ดังรูปที่ 8:

6

รูปที่ 8:

 

ทำการคลิกเมาส์บน Server Explorer แล้วทำการสร้างคอนเนคชันชี้ไปที่ดาต้าเบส Northwind แล้วทำการเลือกตาราง Category และ Products จากนั้นทำการลากตารางทั้งสองไปวางบน พื้นที่ออกแบบ dbml ดังรูปที่ 9:

 9

รูปที่ 9:

 

ทำการปรับ Serialization Mode จาก None ไปเป็น Unidirectional เพื่อให้โปรเจ็กต์ทั้งสองสื่อสาร แลกเปลี่ยนข้อมูลกันได้ (สามารถรับส่งข้อมูลผ่าน WCF Service) ดังรูปที่ 10:

10

รูปที่ 10:

 

สร้าง WCF Service:

ทำการเพิ่มเทมเพลต Silverlight-enabled WCF Service เข้ามาในโปรเจ็กต์ (ซึ่งได้เกริ่นไปก่อนหน้านี้แล้ว)  โดยเลือกเทมเพลตดังรูปที่ 11:

11

รูปที่ 11:

 

ใส่โค้ดในฝั่งเซอร์ฟเวอร์: (ให้บริการข้อมูล)

จากนั้นเข้าในโฟลเดอร์ App_Code เปิดไปล์ Service.cs แล้วทำการใส่โค้ดลงไป ดังนี้:

ใส่โค้ดใน Silverlight-enabled WCF Service  ดังนี้:

[OperationContract]
   
public List<Product> getAllProduct()
   
{
       
using (DataClassesDataContext db = new DataClassesDataContext())
       
{
           
return db.Products.ToList();//ทำการ return รายการสินค้าทั้งหมด
       
}
   
}
  

 

โค้ดสมบูรณ์:

using System;
using System.Linq;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.ServiceModel.Activation;

using System.Collections.Generic;

[ServiceContract(Namespace = "")]
[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
public class Service
{
   
[OperationContract]
   
public List<Product> getAllProduct()
   
{
       
using (DataClassesDataContext db = new DataClassesDataContext())
       
{
           
return db.Products.ToList();//ทำการ return รายการสินค้าทั้งหมด
       
}
   
}

}

 
 
 
 
ใส่โค้ดในฝั่ง ไคลเอ็นต์: (ร้องขอข้อมูล)
 
ทำการ Add Service References ดังรูปดังรูปที่ 13 – 16:

12 13 14

รูปที่ 13:                                                       รูปที่ 14:                                                  รูปที่ 15:

 

เราจะได้ Service Reference ดังรูปที่ 17:

15 16

รูปที่ 16:                                                             รูปที่ 17:

 

ออกแบบหน้าตาแอพพลิเคชัน 

ในขั้นตอนี้เรามาทำการออกแบบหน้าตาแอพพลิเคชันกัน ครับ ไม่มีอะไรมากเราต้องการแค่ DataGrid และปุ่มโหลดข้อมูล ก่อนอื่นเราทำการเพิ่ม Reference สองตัวดังรูปที่ 18 เข้ามาในโปรเจ็กต์ จากนั้นทำการลากคอนโทรล DataGrid และ Button ไปวางในส่วนโค้ด XAML ดังรูปที่ 19: จากนั้นทำการคลิกเมาส์ขวาในโปรเจ็กต์ SL2B2_WCF_LINQ บน ไฟล์ Page.xaml เป้าประสงค์คือเราจะไปทำการแก้ไขหน้าจอใน Expression Blend ดังรูปที่ 20:

17 18 19

รูปที่ 18:                                                              รูปที่ 19:                                                              รูปที่ 20:

 

จากรูปที่ 20 มันจะกระโดดพาเราเข้าสู่โปรเจ็กต์ใน Expression Blend ดังรูปที่ 21:

 20

รูปที่ 21:

 

ทำการลดขนาดของปุ่ม Button ให้เล็กลงโดยให้อยู่บนมุมขวาของหน้าจอ ดังรูปที่ 22: จากนั้นดึง DataGrid ให้หดลงมา ดังรูปที่ 23:

21 22

รูปที่ 22:                                                                       รูปที่ 23:

 

ทำการเปลี่ยนให้ ปุ่ม Button ดังรูปที่ 24: และใส่ชื่อให้คอนโทรล DataGrid ดังรูปที่ 25:

24  26

รูปที่ 24:                              รูปที่ 25:    

 

ทำการสร้าง Event Click บนปุ่ม Load Data โดยคลิกเมาส์บน Event Click ดังรูปที่ 26: มันจะพาเรากระโดดอีกครั้ง กลับไปยัง VS2008 เพื่อไปใส่โค้ด ใน Event ดังกล่าว เรียกได้ว่าเราต้องสวมวิญญาณ นักพัฒนาและนักออกแบบ สลับไปมาครับ กล่าวคือ เป็นวิญญาณของกรรมกรซอฟต์แวร์ นั่นเอง

xx1 

รูปที่ 26:    

 

จากรูปที่ 26: VS2008 จะสร้าง Event ดังนี้:

 private void btLoadData_Click(object sender, RoutedEventArgs e)
 
{

 }

 

ให้เราทำการใส่โค้ดลงไปดังนี้:

private void btLoadData_Click(object sender, RoutedEventArgs e)
{
   
ServiceReference1.ServiceClient svc = new SL2B2_WCF_LINQ.ServiceReference1.ServiceClient();

    svc.getAllProductCompleted += new EventHandler<SL2B2_WCF_LINQ.ServiceReference1.getAllProductCompletedEventArgs>(svc_getAllProductCompleted);
    svc.getAllProductAsync();

}

void svc_getAllProductCompleted(object sender, SL2B2_WCF_LINQ.ServiceReference1.getAllProductCompletedEventArgs e)
{

   
//throw new NotImplementedException();
    dataGrid.ItemsSource = e.Result;

}

 

 

ส่วนที่เป็นสีแดง VS2008 สร้างให้ครับ [เมื่อเราพิมพ์ svc.getAllProductCompleted += แล้วทำการกด TAB] 

 

โค้ดสมบูรณ์:

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 SL2B2_WCF_LINQ
{
   
public partial class Page : UserControl
   
{
       
public Page()
       
{
           
InitializeComponent();
       
}

        private void btLoadData_Click(object sender, RoutedEventArgs e)
       
{
           
ServiceReference1.ServiceClient svc = new SL2B2_WCF_LINQ.ServiceReference1.ServiceClient();

            svc.getAllProductCompleted += new EventHandler<SL2B2_WCF_LINQ.ServiceReference1.getAllProductCompletedEventArgs>(svc_getAllProductCompleted);
           
svc.getAllProductAsync();
       
}

        void svc_getAllProductCompleted(object sender, SL2B2_WCF_LINQ.ServiceReference1.getAllProductCompletedEventArgs e)
       
{
           
//throw new NotImplementedException();
            dataGrid.ItemsSource = e.Result;//เราจะผูกข้อมูลให้ DataGrid ผ่าน ItemsSource
       
}

    }
}

 

 

เมื่อทำการใส่โค้ดในการดึงข้อมูลผ่าน WCF Service เรียบร้อยแล้ว ทำการทดสอบเลยครับ กดรันบน VS2008 จะได้หน้าจอว่างๆ ต้องกดปุ่มโหลดดาต้า จากนั้นจะแสดงข้อมูลสินค้าดังรูปที่ 27 สังเกตุเห็นว่า DataGrid ของเรายังแสดงไม่เต็มจอ เพราะว่า LayoutRoot กำหนดความกว้าง-สูง เอาไว้ ให้เราทำการปรับเปลี่ยนให้มันเป็น Auto โดยปรับดังรูปที่ 28

28 27

รูปที่ 27:                                                   รูปที่ 28:     

 

จากนั้นทำการรันใหม่ จะเห็นว่า DataGrid ของเราสามารถแสดงเต็มจอได้ ดังรูปที่ 29                           

30

รูปที่ 29:

 

ลองทำการจัดเรียงข้อมูลดู โดยคลิกเมาส์ลงบนคอลัมน์ที่ต้องการ โดยข้อมูลจะเรียงตามที่เราคลิก เช่น คลิกครั้งแรกเรียงนากมากไปหาน้อย ถ้าคลิกอีก หนึ่งครั้งจากเรียงกลับกัน (สลับกันไปตามที่เราคลิก) ดังแสดงในรูปที่ 30 – 31

31  32

รูปที่ 30:                                     รูปที่ 31:

 

และใน Silverlight 2 เบต้า2 เราสามารถกำนด BufferSize โดยการปรับเปลี่ยนค่าใน ไฟล์ ServiceReferences.ClientConfig ดังนี้:

 

ServiceReferences.ClientConfig:

<configuration>
    <system.serviceModel>
        <bindings>
            <basicHttpBinding>
                <binding name="BasicHttpBinding_Service"
                    maxBufferSize="65536"
                    maxReceivedMessageSize="65536">
                    <security mode="None" />
                </binding>
            </basicHttpBinding>
        </bindings>
        <client>
            <endpoint address="http://localhost:2127/SL2B2_WCF_LINQWeb/Service.svc"
                binding="basicHttpBinding" bindingConfiguration="BasicHttpBinding_Service"
                contract="SL2B2_WCF_LINQ.ServiceReference1.Service" name="BasicHttpBinding_Service" />
        </client>
    </system.serviceModel>
</configuration>

 

บทสรุป:

 

บทความนี้ได้นำเสนอปมเด่นใน Silverlight 2 เบต้า2 โดยกล่าวถึงการใช้งาน Silverlight-enabled WCF Service (ซึ่งเป็นสิ่งใหม่ที่เพิมเข้ามาใน เบต้า2) ใช้งานร่วมกับคอนโทรล DataGrid ซึ่งปมเด่นที่เราได้ใช้งานไปคือ Autogenerated Columns, Automatic Sizing และ Automatic Sorting

 

ท่านผู้อ่านสามารถดาวน์โหลดตัวอย่างโปรเจ็กต์ไปลองทดสอบดู: หวังว่าบทความนี้คงเกิดประโยชน์บ้าง ไม่มากก็น้อย ขอให้ท่านผู้อ่านทุกท่านจงประสบโชคดี

 

ขอบฟ้ากว้างใหญ่ ไร้พรมแดน  ฉันใด… จิตใจของผู้คน ย่อมแตกต่าง ความต้องการ ฉันนั้น

เมื่อแตกต่างกันสุดขั้ว จึงเกิดการรวมตัว เพื่อเรียกร้อง…

ให้ความแตกต่าง นั้นเป็นที่ยอมรับ  แต่…

แท้จริงแล้ว การเรียกร้อง บางครั้งก็มิต้องการ ข้อสรุปใดๆ…

ไม่ต้องการสิ่งใดๆ เป็นการตอบแทน…

 

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

Download source code:

 

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

เกี่ยวกับ

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

ใส่ความเห็น

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