Silverlight Desktop Applications Access Local database


image
Silverlight

เป็นโปรแกรมเบราว์เซอร์ปลั๊กอินขนาดเล็ก…

ซึ่งทำงานอยู่ในกรอบของเบราว์เซอร์(sandbox)…

สามารถทำงานข้ามแพลตฟอร์ม…

 

โดยถูกออกแบบมาเพื่อนักพัฒนาโดยเฉพาะ…

ให้สามารถพัฒนาโปรแกรมประเภทแอนิเมชัน…กราฟิก…

และโปรแกรมทางด้านธุรกิจได้ง่าย…

ซึ่งสามารถตอบสนองต่อการใช้งาน….

 

แบบอินเทอร์แอคทีฟ RIA (Rich Internet Application)

ใด้ใกล้เคียง…

เช่นเดียวกับโปรแกรมวินโดวส์ หรือ…เดสก์ทอปแอปพลิเคชัน….

ขณะเดียวกันการดิพลอย์แอปพลิเคชัน…

สามารถทำได้ง่าย….

เหมือน เว็บแอปพลิเคชัน…

เสมือนเป็นการนำข้อดีของเว็บแอปพลิเคชั่น…

 

คือง่ายในการดิพลอย์…และ

ข้อดีของวินโดวส์แอปพลิเคชั่น…คือ…

ตอบสนองต่อการใช้งานได้ดี….

มารวมกันไว้ที่เดียวกัน….

 

ซึ่งในการพัฒนาแอปพลิคชั่นด้วย Silverlight…
คุณจะได้แอปพลิเคชั่นถึงสองตัวในการพัฒนาครั้งเดียว…
กล่าวคือจะได้

            ทั้งเว็บแอปพลิเคชั่น…
            และวินโดวส์แอปพลิเคชั่น…

หลังจากที่ Greatfriends ได้เปิด…
imageหลักสูตร
:
GF250 – Silverlight 4 Business Application
มีหลายๆ ท่านที่สนใจ…
ได้สอบถามผ่านเข้ามาว่า…

Silverlight OOB. หรือ…
Out-Of-Browser
หรือ…
Silverlight Desktop Applications

สามารถเข้าถึงฐานข้อมูลบนเครื่องไคลเอนต์ได้หรือไม่
?…

คำตอบคือได้…
Silverlight ถ้าทำงานเป็น Desktop Applications
มันสามารถเข้าถึงข้อมูลต่างๆ บนเครื่องผู้ใช้งาน…
เฉพาะในโฟลเดอร์พิเศษ(
SpecialFolder)

ดังรูปที่0…

image

รูปที่ 0 SpecialFolder

แต่หากว่าคุณเขียนโปรแกรม Silverlight…
สื่อสารผ่าน COM…
แน่นอนมันสามารถเข้าถึงทุกอนุของทรัพยกร…
บนเครื่องของผู้ใช้งาน…

จึงเป็นที่มาของบทความฉบับนี้…

ซึ่งเป็นการสาธิตการดึงข้อมูลบนโลคอล…
Microsoft SQL Server Express
ตามขั้นตอนดังนี้

ขั้นตอนการพัฒนาแอพพลิเคชั่น

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

·         ขั้นตอนที่สอง: Silverlight Desktop Applications

·         ขั้นตอนที่สาม: เพิ่มไอเทม Silverlight Page

·         ขั้นตอนที่สี่: เพิ่มคลาส CustomerClass           

·         ขั้นตอนที่ห้า: ติดต่อ SQL Server Express

·         ขั้นตอนที่หก: ใช้งาน Silverlight COM Toolkit

 

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

1.
เปิดโปรแกรม…
Microsoft Visual Web Developer 2010 Express(VWD2010
)…
คลิกเมนู…
New Project…

ดังรูปที่1:

image
รูปที่
1 เมนู New Project

2.
ที่หน้าต่าง New Project…
คลิกเทมเพลต Silverlight…
            คลิก Silverlight Navigation Application (Visual C#)
            ช่อง Name:
ใส่ชื่อโปรเจ็กต์
            ช่อง Location:
ระบุแหล่งที่เก็บโปรเจ็กต์
            ช่อง
Solution name: ใส่ชื่อโซลูชั่น

จากนั้นคลิก OK…ดังรูปที่2

image
รูปที่
2 หน้าต่าง New Project

3.

หน้าต่าง New Silverlight Application…

สร้างโฮส Silverlight ติ๊ก Host the Silverlight…
ช่อง
New Web project name:
ใส่ชื่อโปรเจ็กต์โฮส
Silverlight

ที่ดรอปดาวน์ลิส New Web project type:
เลือก
ASP.NET Web Application Project

Option: Silverlight Version: เลือก Silverlight 4
คลิก
OK

image
รูปที่
3 สร้างโฮส Silverlight

4.

คุณจะได้โครงสร้างโปรเจ็กต์ ดังรูปที่ 4

image

รูปที่ 4: โครงสร้างโปรเจ็กต์

 

ขั้นตอนที่สอง: Silverlight Desktop Applications

5.

เมื่อสร้างโปรเจ็กต์เป็นที่เรียบร้อย…
ขั้นตอนต่อไปเป็นการกำหนดให้
Silverlight
ทำงานนอกเบราว์เซอร์(
OOB
)…
หรือเป็น
Desktop Applications

หรือโปรแกรม
Windows Application

โดยการคลิกขวาบนโปรเจ็กต์ Silverlight…
เลือก
Properties…

ดังรูปที่5

image
รูปที่ 5
กำหนดให้ Silverlight เป็น Desktop Applications

6.

หน้าต่าง Properties คลิกบนแทบ Silverlight…
ติ๊กเลือก
Enable running application out of the browser…
เพื่อกำหนดให้ Silverlight เป็น Desktop Applications

ดังรูปที่ 6

image

รูปที่6 Enable running application out of the browser

7.

คลิกบนปุ่ม image
คุณจะเข้าสู่หน้าต่าง
Out-of-Browser Setting…
ให้ติ๊กเลือก
Require elevated trust when running outside the browser…


เพื่อให้โปรแกรมมีความสามารถเหล่านี้:

·         Clipboard direct access

·         Direct access to User folder

·         COM Interoperability

COM Interoperability

เป็นสิ่งที่เราจะใช้งานในบทความนี้…
แล้วคลิก
OK  ดังรูปที่7

image

รูปที่7 หน้าต่าง Out-of-Browser Setting

8.

จากนั้นทำการ Build Solution หนึ่งครั้ง…

จะเห็นไฟล์ Silverlight (*.xap)…
ไปกองไว้ที่โปรเจ็กต์โฮส Silverlight
ดังรูปที่ 8

image

รูปที่8: ไฟล์ Silverlight (*.xap)

9.

กำหนดให้รันโปรเจ็กต์โฮส Silverlight
เป็นโปเจ็กต์แรก…

โดยการคลิกขวาบนโฮส แล้วเลือกเมนู…
Set as StartUp Project…
ดังรูปที่ 9

image

รูปที่9 กำหนดให้รันโปรเจ็กต์โฮส Silverlight

 

10.

ทดสอบรันโปรแกรม…
และลองติดตั้งโปรแกรม…
โดยคลิกขวาบนหน้าจอ…ว่างๆ…
แล้วเลือกเมนู…
Install ….
ดังรูปที่10

image

รูปที่10 ติดตั้งโปรแกรม

11.

คุณจะได้รับหน้าจอเตือน…
เจ้าของโปรแกรมไม่ผ่านการตรวจสอบ…

#ที่ต้องเตือนเนื่องจากจาก…
   เมื่อโปรแกรมถูกติดตั้ง…
   ลงบนเครื่องผู้ใช้งานแล้วสามารถเข้าถึง…
   ข้อมูลภายในเครื่องนั่นเอง…
  
Silverlight runtime
มองว่าไม่ปลอดภัย…
   ให้ถามผู้ใช้งานก่อน…

เรากด Install… แน่นอนมันเป็นโปรแกรมของเราเอง…
ดังรูปที่
11

image

รูปที่11 Security Warrning

12.

เมื่อติดตั้งเรียบร้อย…
คุณจะได้โปรแกรม
Silverlight
ถึงสองตัวในการพัฒนาเพียงครั้งเดียว…
คือ

1.     โปรแกรม Silverlight ที่ทำงานบนเบราว์เซอร์…

o    Silverlight Web Applications…

2.     และโปรแกรมที่ทำงานนอกเบราว์เซอร์…

o    Silverlight Desktop Applications…

ดังรูปที่ 12

image

รูปที่12 Silverlight Web Applications & Silverlight Desktop Applications

13.

คุณจะได้เมนู Shortcut สำหรับเปิดโปรแกรมบน Desktop…
ดังรูปที่ 13

image

รูปที่13 Silverlight Desktop Applications Shortcut

 

 

ขั้นตอนที่สาม: เพิ่มไอเทม Silverlight Page

14.

เพิ่มไอเทม Silverlight Page
เพื่อสร้างหน้าจอโปรแกรม ดึงข้อมูลจาก
SQLExpress


บนโปรเจ็กต์
Silverlight[SL_OOB_AccessLocalDB]
โดยคลิกขวาบนโฟลเดอร์
Views…
เลือกเมนู Add…>New Item…

บนหน้าต่าง Add New Item – …

คลิกเทม Silverlight Page
ตั้งชื่อเป็น
AccessSQLExpressPage.xaml…
คลิก Add… ดังรูปที่14 

image

รูปที่14 เพิ่มไอเทม Silverlight Page

15.

บน Silverlight form
ทำการแบ่ง
Grid Layout
เป็นสองแถว…
โดยคลิกเมาส์บน
Gridline indicator ดังรูปที่ 15

image

รูปที่15 แบ่ง Grid Layout เป็นสองแถว

คุณจะได้ Grid Layout เป็นสองแถว…
แถวบนใส่ป้ายชื่อ…
Access SQL Express

ด้วยคอนโทรล
TextBlock

ดังรูปที่
16

 

image

รูปที่16 Grid Layout สองแถว

 

16.

แถวสองลากคอนโทรล DataGrid ไปวาง…
ดังรูปที่
17
image

รูปที่17 วางคอนโทรล DataGrid

17.

Reset Layout ของคอนโทรล DataGrid
ให้เต็มพื้นที่ของแถวล่าง…
โดยการคลิกขวา…

บนคอนโทรล DataGrid

            เลือกเมนู Reset Layout=>Alll

ดังรูปที่18

image

รูปที่18 Reset Layout คอนโทรล DataGrid

18.

คุณจะได้หน้าจอโปรแกรมดังรูปที่19

 

image

รูปที่19 หน้าจอโปรแกรม

19.

ทำการเพิ่มปุ่ม Load…
ด้วยคอนโทรล
Button… หนึ่งปุ่ม
ดังรูปที่
20

image

รูปที่20 เพิ่มปุ่ม Load

 

ขั้นตอนที่สี่: เพิ่มคลาส CustomerClass

20.

เพิ่มคลาส CustomerClass…
ไว้เก็บข้อมูลที่โหลดมาจากฐานข้อมูล…
โดยการคลิกขวาบนโปรเจ็กต์…
Silverlight[SL_OOB_AccessLocalDB]
เลือกเมนู
Add…>New Item…

เลือกไอเทม Class…
ตั้งชื่อ Class เป็น CustomerClass

จากนั้นคลิก
Add

ดังรูปที่21

image

รูปที่21 เพิ่มคลาส CustomerClass

21.

เปิดไฟลคลาส CustomerClass
ทำการเพิ่มพร็อปเพอร์ตี้ต่างๆ ลงไป…
โดยบน
C# มี Shortcut ในการเพิ่ม Property

โดยการพิมพ
prop แล้วกดปุ่ม Tab บนคีย์บอร์ด…

#Code snippet
สำหรับการอิมพลิเมนต์
Automatic property

image

รูปที่22 Code snippet implement Automatic property

 

//CustomerClass.cs
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 SL_OOB_AccessLocalDB

{

    public class CustomerClass

    {

        public string CustomerID { get; set; }

        public string CompanyName { get; set; }

        public string ContactName { get; set; }

        public string ContactTitle { get; set; }

        public string Address { get; set; }

        public string City { get; set; }     

     

    }

}

 

ขั้นตอนที่ห้า: ติดต่อ SQL Server Express

22.

ในการติดต่อฐานข้อมูลโลคอล(Local) บน Silverlight…
จะกระทำผ่าน COM
…โดยอาศัยการสร้างอ็อบเจ็กต์แบบง่ายๆ…
จากฟีเจอร์
dynamic ของ C# 4.0

โดยการทำการ
References เนมสเปกซ์ Microsoft.CSharp
ดังรูปที่23

image

รูปที่ 23 References เนมสเปกซ์ Microsoft.CSharp

จากนั้นไปเขียนบนอีเว้นต์ปุ่ม Load..ในรูปที่ 20…

ดังนี้:

private void buttoLoad_Click(object sender, RoutedEventArgs e)

{

           

 try

  {

                //ประกาศชุดอ็อบเจ็กต์ใหม่ของ CustomerClass ด้วยคีย์เวิร์ด var

var lsCus = new List<CustomerClass>();

 

//ประกาศตัวแปร conn โดยสร้างอ็อบเจ็กต์ ADODB.Connection ด้วยคีย์เวิร์ด dynamic

 

                using (dynamic conn = AutomationFactory.CreateObject(“ADODB.Connection”))

                {

                                conn.Open(@”Provider=SQLNCLI10.1;Data Source=.\SQLEXPRESS;Initial Catalog=Northwind;Persist Security Info=True;User ID=**;Password=****”);

                    //ประกาศตัวแปร rs โดยสร้างอ็อบเจ็กต์ ADODB.RecordSet ด้วยคีย์เวิร์ด dynamic

                    using (dynamic rs = AutomationFactory.CreateObject(“ADODB.RecordSet”))

                    {

 

                        rs.Open(“SELECT * FROM Customers Order by CustomerID”, conn);

 

                        while (!rs.EOF)

                        {

                            lsCus.Add(new CustomerClass

                                    {

                                        CustomerID = rs.Fields.Item(“CustomerID”).Value,

                                        CompanyName = rs.Fields.Item(“CompanyName”).Value,

                                        ContactName = rs.Fields.Item(“ContactName”).Value,

                                        ContactTitle = rs.Fields.Item(“ContactTitle”).Value,

                                        Address = rs.Fields.Item(“Address”).Value,

                                        City = rs.Fields.Item(“City”).Value

                                    }

                                );

 

                            rs.MoveNext();

                        }

                    }

 

                }

 

                dataGrid1.ItemsSource = lsCus;

 

            }

            catch (Exception ex)

            {

                MessageBox.Show(ex.Message);

            }

}

 

จะเห็นว่า…
การประกาศอ็อบเจ็กต์เป็นประเภท
dynamic…

ทำให้เรียกใช้อ็อบเจ็กต์ได้อย่างอิสระ…
โดยประเภทจะถูกกำหนดในตอนรันไทม์…
โดยมีข้อแม้ว่า…การเรียกใช้เมธอด หรือ พร้อปเพอร์ตี้ต่างๆ…
คุณต้องใส่ชื่อได้อย่างถูกต้อง…
ตอนคุณกำลังเขียนโปรแกรม…และ
Build จะไม่ Error
เพราะมันจะไปตรวจสอบ…ตอนรันโปรแกรม…

23.

ที่หน้า main [ไฟล์ MainPage.xaml]
ทำการสร้างเมนู
Access SQLExpress

ดังนรูปที่ 24

image

รูปที่ 24 เมนู Access SQLExpress

XAML:

<HyperlinkButton  Style=”{StaticResource LinkStyle}”

                                      NavigateUri=”/AccessSQLExpressPage”

                                      TargetName=”ContentFrame”

                                      Content=”Access SQLExpress” /> 

<Rectangle Style=”{StaticResource DividerStyle}” /> 

                  

 

24.

เมื่อเขียนโค้ดโหลดข้อมูลเรียบร้อย…
สร้างเมนู
Link ไปที่หน้าจอ Access SQL Express เรียบร้อย…

ให้ทำการทดสอบรันโปรแกรม…
เมื่อคลิกไปที่เมนู
Access SQLExpress =>

คลิกปุ่ม Load…
รอสักครู่…
คุณจะได้ข้อมูลของ
Customer ดังรูปที่25

image

รูปที่25 โหลดข้อมูลของ Customer

 

 

แหล่งข้อมูลดาวน์โหลด:

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

 


image 

image

** รู้จักกับผู้สอน อ.นุชิต **
JANAWAT Blog: https://janawat.wordpress.com
Nuchit’s Profile @microsoft https://mvp.support.microsoft.com/profile/nuchit
Facebook: https://www.facebook.com/nuchit
Twitter: http://twitter.com/janawat


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

เขียนใน Uncategorized
3 comments on “Silverlight Desktop Applications Access Local database
  1. […] นำโปรเจ็กต์ในบทความ Silverlight 4 OOB Access Local DB […]

  2. สรายุทธ พูดว่า:

    ผมทดสอบแล้วโดยใช้เป็น MS SQL Server 2008 R2 ไมาทราบว่าต้องแก้ ProgID เป็นอะไรครับ ผมหาไม่เจอ
    รบกวนด้วยนะครับ ขอบคุณครับ

  3. Trevor พูดว่า:

    Your style is really unique in comparison to
    other people I’ve read stuff from. Thank you for posting when you have the opportunity, Guess I will just bookmark this site.

ใส่ความเห็น

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: