meekob

พัฒนา Silverlight Project ด้วย MVVM

Suwitcha Chandhorn — Sun, 19 Apr 2009 04:32:17 GMT

ในการพัฒนา Rich Internet Application ด้วย Silverlight ถึงแม้ว่ากระบวนการทำงานจะถูกออกแบบมาเพื่อให้นักพัฒนา และนักออกแบบสามารถทำงานร่วมกันได้ โดยแบ่งการทำงานออกเป็นส่วนตามความถนัดของแต่ละฝ่าย แต่นักพัฒนาส่วนใหญ่ ยังคงทำการเขียนโค้ดลงในส่วน Code-Behind ของ UserControl เป็นหลัก เนื่องจากมีความสะดวก รวดเร็ว จึงเหมาะกับการพัฒนาโครงการขนาดเล็ก อย่างไรก็ดี การเขียนโค้ดแบบนี้มักจะขาดประสิทธิภาพในการพัฒนาโครงการขนาดใหญ่ ซึ่งมักจะมีนักพัฒนาหลายคนร่วมกันพัฒนา จะทำให้แบ่งส่วนการทำงานไม่ชัดเจน และการทดสอบโค้ดแต่ละส่วน (Unit-Testing) ก็ทำได้ยากด้วยเช่นกัน เพื่อให้การทำงานเป็นไปอย่างคล่องตัว และการพัฒนามีความยืดหยุ่น MVVM จึงเป็นวิธีการหนึ่งซึ่งนักพัฒนาในต่างประเทศนิยมใช้ในการแก้ปัญหา

MVVM หรือ Model View ViewModel เป็น Design Pattern ชนิดหนึ่งซึ่งได้รับอิทธิพลจาก Model View Controller (MVC) Pattern ซึ่งจะแบ่งการเขียนโค้ดออกเป็น 3 ส่วนหลักๆ กล่าวคือ

1. Model เป็นโค้ดส่วนที่แทนโครงสร้างของข้อมูลที่อยู่เบื้องหลังแอพพลิเคชั่น

2. View เป็นส่วนที่เกี่ยวข้องกับส่วนติดต่อผู้ใช้ ซึ่งมักจะเป็นส่วนที่นักออกแบบต้องทำงานด้วยมากที่สุด จึงมักจะเป็นส่วนของ XAML ล้วนๆ และจะมีส่วนที่เป็นโค้ดน้อยที่สุด โดยมากมักจะเป็นโค้ดที่เกี่ยวกับการทำ Data-Binding เพื่อระบุตำแหน่งที่จะแสดงผลของข้อมูลเท่านั้น

3. ViewModel เป็นส่วนที่ใช้เชื่อมระหว่าง Model และ View เป็นส่วนที่ดึงข้อมูลตาม Model จากแหล่งข้อมูลต่างๆ (เช่น เว็บเซอร์วิส หรือฐานข้อมูล) มาเตรียมเพื่อแสดงผลใน View

ที่จริงแล้วยังไม่มีการกำหนดลำดับก่อนหลังให้กับการพัฒนาแบบนี้อย่างเป็นทางการ นักพัฒนาอาจจะเริ่มจากการพัฒนา Model ก่อน แล้วจึงพัฒนา ViewModel หรือ พัฒนาตาม View ที่นักออกแบบเตรียมไว้ให้ก็ได้ ในตัวอย่างที่จะยกต่อไปนี้ จะเริ่มจาก Model ก่อน แล้วจึงพัฒนา ViewModel และนำไปรวมกับ View เป็นลำดับสุดท้าย เพื่อให้เห็นลำดับชั้นการทำงานได้อย่างชัดเจนยิ่งขึ้น

มาดูโจทย์ของเรากันเลยดีกว่า

เพื่อให้ง่ายกับการทำความเข้าใจ เราจะทำแอพพลิเคชั่นง่ายๆ เช่น แบบทดสอบคณิตศาสตร์ขึ้นมา แบบทดสอบที่ว่า จะมีการแสดงโจทย์ เช่น 1+1=? และมีช่องคำตอบซึ่งเป็น TextBox เตรียมไว้ให้ เมื่อผู้ใช้กรอกคำตอบก็จะไปตรวจสอบว่าคำตอบถูกต้องหรือไม่ แล้วแสดงผลบอกผู้ใช้ทาง CheckBox ท้ายที่สุดผู้ใช้สามารถกดปุ่มเพื่อส่งผลไปยังเซอร์ฟเวอร์เพื่อบันทึกคำตอบได้ แอพพลิเคชั่นนี้จะเน้นที่การแบ่งส่วนการทำงานเป็นลำดับชั้น ดังนั้นจะไม่นำเสนอโค้ดส่วนที่ไม่เกี่ยวข้องต่างๆ เช่น การตรวจสอบรูปแบบของคำตอบ เป็นต้น เพื่อไม่ให้เกิดความสับสน ก่อนอื่น ให้เราเปิด Visual Studio ขึ้นมาเพื่อสร้าง Silverlight Project กันก่อน (ผู้เขียนไม่ขอกล่าวถึงขั้นตอนการติดตั้ง Silverlight Templates บน Visual Studio เนื่องจากเป็นเรื่องพื้นฐาน ขอให้ผู้อ่านดูขั้นตอนการติดตั้งได้จาก http://silverlight.net/GetStarted/)

เริ่มจาก Model กันก่อน

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

เมื่อสร้าง Silverlight Project เรียบร้อยแล้ว ให้เราสร้างโฟลเดอร์ชื่อ Model ขึ้นมา จากนั้นเพิ่มคลาสใหม่ชื่อ Question เพื่อใช้บรรจุข้อมูลคำถาม คลาส Question นี้จะอิมพลีเมนท์อินเทอร์เฟส INotifyPropertyChanged ซึ่งจะบังคับให้คลาสจะต้องมีอีเวนท์ที่ชื่อ PropertyChanged เกิดขึ้น จากนั้นเราจะเพิ่มเมธอดชื่อ RaisePropertyChanged เข้าไป เพื่อใช้ช่วยในการสร้างอีเวนท์เมื่อเกิดการเปลี่ยนแปลงของข้อมูล

1 Imports System.ComponentModel

3 Public Class Question

4 Implements INotifyPropertyChanged

6 Public Event PropertyChanged(ByVal sender As Object, _

7 ByVal e As System.ComponentModel.PropertyChangedEventArgs) _

8 Implements System.ComponentModel.INotifyPropertyChanged.PropertyChanged

10 Private Sub RaisePropertyChanged(ByVal propertyName As String)

11 RaiseEvent PropertyChanged(Me, New PropertyChangedEventArgs(propertyName))

12 End Sub

13 End Class

จากนั้นเราจะเพิ่มคุณสมบัติต่างๆของคำถามเข้าไปในคลาส เช่น Text แทนตัวคำถาม, ProvidedAnswer แทนคำตอบที่ผู้ใช้จะป้อนเข้ามา, ActualAnswer แทนคำตอบที่ถูกต้อง และ IsCorrectAnswer แทนความถูกต้องของคำตอบ

3 Public Class Question

4 Implements INotifyPropertyChanged

6 Private _text As String

7 Public Property Text() As String

8 Get

9 Return _text

10 End Get

11 Set(ByVal value As String)

12 _text = value

13 End Set

14 End Property

16 Private _actualAnswer As String

17 Public Property ActualAnswer() As String

18 Get

19 Return _actualAnswer

20 End Get

21 Set(ByVal value As String)

22 _actualAnswer = value

23 End Set

24 End Property

26 Private _providedAnswer As String

27 Public Property ProvidedAnswer() As String

28 Get

29 Return _providedAnswer

30 End Get

31 Set(ByVal value As String)

32 _providedAnswer = value

33 RaisePropertyChanged("ProvidedAnswer")

34 RaisePropertyChanged("IsCorrectAnswer")

35 End Set

36 End Property

38 Public Property IsCorrectAnswer() As Boolean

39 Get

40 Return (ActualAnswer = ProvidedAnswer)

41 End Get

42 Set(ByVal value As Boolean)

43 RaisePropertyChanged("IsCorrectAnswer")

44 End Set

45 End Property

จะสังเกตว่าข้อมูลที่จะมีการเปลี่ยนแปลงจากอินพุตของผู้ใช้ (หรือจากโค้ด) เช่น ProvidedAnswer และ IsCorrectAnswer เมื่อถูก Set จะเรียกไปยังเมธอด RaisePropertyChanged ด้วย เพื่อแจ้งให้สิ่งที่เรียกใช้ออปต์เจ็คตัวนี้ทราบเมื่อมีการเปลี่ยนแปลงของข้อมูลนั่นเอง เมื่อสร้างคลาสนี้เสร็จ เราก็จะไปเรียกใช้งานมันจากส่วน ViewModel กันต่อในลำดับถัดไป

หน้าที่ของ ViewModel

หน้าที่ของ ViewModel ก็คือกาวประสานระหว่างอินเทอร์เฟส (View) กับข้อมูล (Model) ดังนั้นมันจะทำหน้าที่ต่างๆ เช่น การเรียกข้อมูลจากแหล่งข้อมูลต่างๆมาเก็บไว้ใน Model เพื่อให้ตรงกับ View ที่ต้องการนำไปแสดงผล หรือจะบันทึกข้อมูลที่ได้จาก View กลับลงไปยังแหล่งข้อมูลที่กำหนดก็ได้เช่นกัน ให้เราสร้างโฟลเดอร์ชื่อ ViewModel ขึ้นมา จากนั้นเพิ่มคลาส QuestionViewModel เข้าไปภายใน เนื่องจากเราจะเรียกใช้ ObservableCollection ในคลาส จึงต้องอิมพอร์ต System.Collections.ObjectModel ไว้ที่ต้นคลาสด้วย จากนั้นเราจะเพิ่มคุณสมบัติ Questions ซึ่งเป็นลิสต์ของ ObservableCollection(Of Question) เข้าไปเพื่อเก็บรายการคำถาม ObservableCollection เป็นลิสต์ของออปต์เจ็คที่จะแจ้งเตือนทุกครั้งเมื่อมีการเพิ่ม, ลบรายการ หรือมีการรีเฟรชลิสต์ ดังนั้นเมื่อมีการเปลี่ยนแปลงค่าในคำถามแต่ละข้อ แอพพลิเคชั่นก็จะได้รับการอัพเดตโดยอัตโนมัติ

1 Imports System.Collections.ObjectModel

3 Public Class QuestionViewModel

5 Private _questions As ObservableCollection(Of Question)

6 Public Property Questions() As ObservableCollection(Of Question)

7 Get

8 Return _questions

9 End Get

10 Set(ByVal value As ObservableCollection(Of Question))

11 _questions = value

12 End Set

13 End Property

15 End Class

จากนั้นจะเราจะเพิ่มเมธอด FetchQuestions() เพื่อเรียกข้อมูลมาแสดง ในตัวอย่างนี้เราจะสร้างข้อมูลตัวอย่างขึ้นมาเพื่อความสะดวก แต่ในความเป็นจริงเราอาจเรียกข้อมูลจากแหล่งข้อมูลอื่นมาแสดงได้ตามที่ต้องการ จากนั้นนำลิสต์ของข้อมูลที่ได้ไปเก็บไว้ในคุณสมบัติ Questions เพื่อรอให้ View นำไปใช้

15 Public Sub FetchQuestions()

17 Dim q As New ObservableCollection(Of Question)

19 ' You may get actual data from the database

20 q.Add(New Question With {.Text = "1 + 1 = ?", .ActualAnswer = "2"})

21 q.Add(New Question With {.Text = "1 + 2 = ?", .ActualAnswer = "3"})

23 Questions = q

25 End Sub

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

ส่วนติดต่อผู้ใช้ใน View

ส่วนของ View เป็นส่วนติดต่อผู้ใช้ที่โดยมากนักออกแบบจะเป็นผู้รับผิดชอบ หากถูกออกแบบมาดี ก็มักจะมีโค้ดน้อยและเน้นไปในเรื่องของดีไซน์ ซึ่งในที่นี้ก็คือการใช้ Declarative Markup เช่น XAML เสียเป็นส่วนใหญ่ จะมีโค้ดมาเกี่ยวข้องอยู่บ้างก็แต่ในส่วนของการทำ Data-Binding ของข้อมูลไปยังตำแหน่งต่างๆที่จะแสดงผล เราจะสร้างโฟลเดอร์ชื่อ View ขึ้นแล้วเพิ่ม Silverlight UserControl ชื่อ QuestionView.xaml เข้าไปในโฟลเดอร์นั้น เพื่อใช้แสดงรายการคำถาม

1 <UserControl x:Class="SLMVVM1.QuestionView"

2 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

3 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

4 Width="400" Height="300">

5 <Grid x:Name="LayoutRoot" Background="White">

6 <StackPanel Orientation="Vertical">

7 <ItemsControl ItemsSource="{Binding Path=Questions}">

8 <ItemsControl.ItemTemplate>

9 <DataTemplate>

10 <StackPanel Orientation="Horizontal">

11 <TextBlock x:Name="QuestionText"

12 Text="{Binding Path=Text}"></TextBlock>

13 <TextBox x:Name="QuestionAnswer"

14 Text="{Binding Path=ProvidedAnswer, Mode=TwoWay}">

15 </TextBox>

16 <CheckBox x:Name="GradeCheckBox"

17 IsChecked="{Binding Path=IsCorrectAnswer}"></CheckBox>

18 </StackPanel>

19 </DataTemplate>

20 </ItemsControl.ItemTemplate>

21 </ItemsControl>

22 </StackPanel>

23 </Grid>

24 </UserControl>

โดยปรกติ หากเราต้องการจะผูกข้อมูลเข้ากับส่วนติดต่อผู้ใช้ เราจะกำหนดแหล่งข้อมูลให้กับ DataContext ของ View ก่อน จากนั้นจึงจะกำหนดตำแหน่งของข้อมูลด้วยแท็ก “{Binding}” โดยกำหนด Path ให้ตรงกับข้อมูลที่จะแสดง ในที่นี้เรากำหนดรายการคำถามให้กับ StackPanel ผ่านทาง ItemSource ส่วนค่าของแต่ละฟิลด์ที่จะถูกนำไปผูกกับคอนโทรลต่างๆตามชื่อของข้อมูล ก็จะได้รายการคำถามมาแสดง ในส่วนของ DataContext นั้นเราจะไปกำหนดเมื่อเราเรียกใช้ UserControl นี้ในส่วนถัดไป อย่างไรก็ดีจะสังเกตได้ว่า ในส่วนของ View ที่เราสร้างขึ้นมาใหม่นี้ ยังไม่มีการเขียนโค้ดเลย และส่วนของ DataBinding ก็ทำไปเพื่อกำหนดตำแหน่งของข้อมูลที่จะนำมาแสดงเท่านั้น

1 <UserControl x:Class="SLMVVM1.Page"

2 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

3 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

4 xmlns:views="clr-namespace:SLMVVM1"

5 Width="400" Height="300">

6 <Grid x:Name="LayoutRoot" Background="White">

7 <views:QuestionView x:Name="QuestionDataView" />

8 </Grid>

9 </UserControl>

จากนั้นเราจะนำ View ที่สร้างไปใส่ไว้ใน UserControl ที่เป็นหน้าหลัก ซึ่งในที่นี้ก็คือ Page.xaml ซึ่งถูกสร้างมาเมื่อเราสร้าง Silverlight Project ใหม่ โดยกำหนด xmlns ชื่อ views ให้ จากนั้นเพิ่ม UserControl เข้าไปตามปรกติ (นักออกแบบอาจใช้ Microsoft Expression Blend 2 ในการเพิ่ม UserControl นี้เข้ามาก็ได้) จากนั้นเพิ่มโค้ดเพื่อโหลดออปต์เจ็คมาเก็บไว้ใน DataContext ให้กับ View ในส่วนฟังก์ชั่น Page_Loaded ใน Code-Behind

8 Private Sub Page_Loaded(ByVal sender As Object, _

9 ByVal e As System.Windows.RoutedEventArgs) _

10 Handles Me.Loaded

12 Dim qdata = New QuestionViewModel()

13 qdata.FetchQuestions()

14 QuestionDataView.DataContext = qdata

16 End Sub

จากนั้นกด F5 เพื่อทำการ Build ทดสอบ Visual Studio จะเปิดเบราเซอร์ขึ้นมาและแสดงรายการคำถาม เมื่อเรากรอกตัวเลขคำตอบใน TextBox ที่เตรียมไว้ให้ ค่าของออปต์เจ็คคำถามซึ่งอยู่ในลิสต์ใน DataContext ก็จะเปลี่ยนแปลง ทำให้เกิดอีเวนท์ PropertyChanged ของคำถาม ขึ้น ObservableCollection ของคำถามที่อยู่ใน DataContext ก็จะแจ้งให้ View รับรู้และเปลี่ยนแปลงค่าของข้อมูลที่ผูกไว้อีกทอดหนึ่งโดยอัตโนมัติ เช่น หากเรากรอกคำตอบ 2 ให้กับคำถามข้อแรก ซึ่งเป็นคำตอบที่ถูกต้อง คุณสมบัติ ProvidedAnswer ของคำถามจะมีการเปลี่ยนแปลง และมีการเรียกเมธอด RaisePropertyChanged เพื่อสร้างอีเวนท์ไปแจ้งให้กับ ObsevableCollection ได้รู้ เมื่อ ObservableCollection รับรู้, DataContext ของ View ก็จะรู้การเปลี่ยนแปลงและทำการเรียกค่าใหม่มาแสดง ซึ่งเมื่อเรียกไปยังค่า IsCorrectAnswer ของคำถามก็จะพบค่าใหม่ จึงทำการปรับปรุงคุณสมบัติ IsChecked ใน CheckBox ซึ่งเราผูกข้อมูลไว้ โดยเปลี่ยนค่าจากเดิม False ไปเป็น True ทำให้ CheckBox แสดงเครื่องหมายถูกขึ้นมา เป็นต้น

การบันทึกข้อมูลที่เปลี่ยนแปลง

จากรายการคำถามหากเราต้องการบันทึกข้อมูลคำตอบของผู้ใช้ก็สามารถทำได้ผ่าน View และ ViewModel โดยง่าย โดยการเพิ่มเมธอดในการบันทึกเข้าไปใน ViewModel และเพิ่มเมธอดเพื่อสั่งให้บันทึกในส่วน Code-Behind ของ View ในที่นี้จะเราจะเพิ่มเมธอด SubmitChanges() เข้าไปใน ViewModel ดังนี้

27 Public Sub SubmitChanges()

29 ' Persist this ViewModel to the database here.

30 Dim correctQuestions As Integer = 0

31 For Each q In Questions

32 If q.IsCorrectAnswer Then correctQuestions += 1

33 Next

34 MessageBox.Show(correctQuestions)

36 End Sub

โค้ดในฟังก์ชั่นจะแสดง MessageBox บอกจำนวนคำถามที่ผู้ใช้ตอบถูก โดยดึงข้อมูลจากลิสต์ Questions ในออปต์เจ็คเดียวกัน จากนั้นให้เพิ่มปุ่ม Submit เข้าไปใน QuestionView.xaml ดังนี้

<Button x:Name="SubmitButton" Content="Submit" Click="SubmitButton_Click"/>

แล้วเพิ่มเมธอด SubmitButton_Click ในส่วน Code-Behind ของ QuestionView.xaml ดังนี้

9 Private Sub SubmitButton_Click(ByVal sender As System.Object, _

10 ByVal e As System.Windows.RoutedEventArgs)

12 Dim data As QuestionViewModel = CType(Me.DataContext, QuestionViewModel)

13 data.SubmitChanges()

15 End Sub

ใน View จะปรากฎปุ่มเพื่อให้เราส่งข้อมูลขึ้นมา เมื่อผู้ใช้กดก็จะทำการดึงออปต์เจ็คที่อยู่ใน DataContext ออกมาแล้วเรียกเมธอด SubmitChanges() ในออปต์เจ็คนั้น เมื่อเมธอดนี้ถูกเรียกก็จะทำการแสดง MessageBox ตามที่เราต้องการออกมา นักพัฒนาอาจจะปรับปรุงโค้ดส่วนนี้ให้ทำการส่งข้อมูลกลับไปบันทึกยังฐานข้อมูลบนเซอร์ฟเวอร์ได้เช่นกัน

บทสรุป

จากตัวอย่างที่ผ่านข้างต้นคงพอจะอธิบายโครงสร้างง่ายๆของการพัฒนา Silverlight ด้วย Model View ViewModel Pattern ให้ผู้อ่านได้เข้าใจพอสมควรแล้ว ในการพัฒนางานจริง นักพัฒนาอาจเลือกวิธีการที่ซับซ้อนยิ่งขึ้น เช่น การเลือกใช้อินเทอร์เฟสช่วยในการกำหนดโครงสร้างในส่วน ViewModel เพื่อให้สามารถสับเปลี่ยนแหล่งที่มาของข้อมูลได้ง่าย หรือปรับปรุงการทำงานในส่วน ViewModel ให้มีความซับซ้อนยิ่งขึ้นตามความต้องการ อย่างไรก็ดี นักพัฒนาก็จะสามารถแยกส่วนการทำงานระหว่างอินเทอร์เฟสและโค้ดออกมาเพื่อพัฒนาและทำการทดสอบได้สะดวกยิ่งขึ้น รวมถึงสามารถจัดการแบ่งส่วนงานได้อย่างมีประสิทธิภาพยิ่งขึ้นอีกด้วย

รู้จักกับ Silverlight 2.0

Suwitcha Chandhorn — Thu, 13 Nov 2008 11:33:51 GMT

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

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

ความหลากหลายในการใช้งานนี้มาพร้อมกับความสามารถของเบราเซอร์รุ่นใหม่ๆ ที่สนับสนุนเทคโนโลยีที่เราเรียกว่า Asynchronous JavaScript And Xml หรือ AJAX ที่นักพัฒนาในสมัยนี้คงคุ้นชื่อกันดีแล้ว เพราะเป็นองค์ประกอบสำคัญในการพัฒนาเว็บแอพพลิเคชั่นยุค 2.0 นี้เอง

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

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

ดังนั้นผู้ที่จะชนะในการแข่งขันในตลาดซอฟต์แวร์ยุคถัดไป ก็คือผู้ที่เข้าใจถึงการพัฒนา User Experience (UX) หรือ “ประสพการณ์การใช้งาน” ที่ดีให้กับผู้ใช้นั่นเอง

RIA คืออะไร?

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

เทคนิคที่ใช้ในการพัฒนา RIA ยุคเริ่มแรกก็คือ การเอา JavaScript มาจัดการกับ Document Object Model (DOM) ของเอกสาร เพื่อให้สามารถควบคุมการแสดงผลพื้นที่บางส่วนของเอกสารได้โดยไม่ต้องทำการรีเฟรชหน้าจอของเบราเซอร์ทั้งหมด ต่อมาเมื่อเบราเซอร์รุ่นใหม่ๆ เช่น ไฟร์ฟ๊อกซ์ นำเอาคอมโพเนนท์ที่มีชื่อว่า XmlHttpRequest หรือ XHR ซึ่งสมัยก่อนสนับสนุนแต่ในอินเทอร์เน็ตเอ็กซ์พลอเรอร์เข้ามาผนวก และกูเกิ้ลได้ทำให้การใช้งาน AJAX เป็นที่รู้จักจากการทำ TextBox แบบ Auto Complete ก็เลยทำให้เป็นจุดเริ่มต้นของการพัฒนาโปรแกรมแบบ RIA ยุคใหม่ที่สมบูรณ์ขึ้นมา

ในอีกด้านหนึ่งมาโครมีเดียแฟลช หรือในชื่อใหม่ว่า อโดบีแฟลช ซึ่งเป็นผู้นำในการแสดงผลด้านอนิเมชั่นแบบเวคเตอร์บนอินเทอร์เน็ตรายใหญ่มานาน กลับไม่ได้มุ่งเน้นมากนักในด้านการพัฒนาแอพพลิเคชั่นในระยะแรก สังเกตได้จากการไม่ค่อยสนับสนุนการเขียนโปรแกรมเพื่อดึงข้อมูลในฝั่งเซอร์ฟเวอร์มาแสดง รวมถึงการไม่มีคอมโพเนนท์มาตรฐานต่างๆ เช่น DropDownList หรือ DataGrid ให้ใช้งาน เป็นต้น (ถึงแม้ว่าภายหลังจะให้ความสำคัญมากขึ้นโดยการเข็นเอา Flex ออกมาแล้วก็ตาม ก็ยังไม่ได้รับความนิยมจากนักพัฒนาเท่าที่ควร) ในขณะที่ไมโครซอฟท์ ซึ่งใช้เวลาในการพัฒนาเฟรมเวิร์คใหม่สำหรับการแสดงผลบนวินโดวส์ไปมากมาย จนได้ Windows Presentation Foundation หรือ WPF ซึ่งเป็นเฟรมเวิร์คที่สนับสนุนการแสดงผลในแบบ Declarative ก็ได้เล็งเห็นโอกาสที่จะผนวกความสามารถใหม่นี้เข้ากับการแสดงผลผ่านเว็บด้วย เช่นกัน ผลได้ก็คือเฟรมเวิร์คใหม่ภายใต้ชื่ออย่างเป็นทางการว่า Silverlight

Silverlight 2 คืออะไร?

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

Silverlight นั้นเป็นปลั๊กอินที่สามารถติดตั้งได้อย่างรวดเร็วบนเบราเซอร์หลักมากกว่า 95% ของผู้ใช้อินเทอร์เน็ตทั้งหมด ซึ่งก็คือ อินเทอร์เน็ตเอ็กซ์พลอเรอร์, ไฟร์ฟ๊อกซ์ และซาฟารี เราสามารถใช้งานแอพพลิเคชั่นที่รันบน Silverlight ได้บนเบราเซอร์ดังกล่าวทั้งบนวินโดว์ส, แมคอินทอช และลินุกซ์ (โดยผ่านโปรเจ็คที่ชื่อว่า “Moonlight”)

ในขณะที่เขียนบทความนี้ Silverlight เพิ่งจะเปิดตัว Silverlight 2.0 อย่างเป็นทางการไปได้เพียงแค่ไม่กี่วัน ถึงแม้ว่า Silverlight 1.0 จะเพิ่งเปิดตัวอย่างเป็นทางการไปได้เพียงแค่ 1 ปีก่อนหน้านี้ และถือว่าปลั๊กอินที่มีความสามารถสูง สำหรับการแสดงผลแบบมัลติมีเดีย แต่ก็ยังขาดความสามารถบางอย่าง และขาดคอมโพเนนท์ที่น่าสนใจหลายชิ้น ซึ่งก็ได้เพิ่มเติมเข้ามาใหม่ใน Silverlight 2.0 นี้เอง นอกจากนี้ยังมีการปรับการพัฒนาบางส่วนให้เข้ากับการพัฒนาแบบ WPF มากยิ่งขึ้น ดังนั้นสำหรับผู้ที่ไม่เคยพัฒนา RIA ด้วย Silverlight มาก่อน จึงเป็นการดีที่จะเริ่มเรียนรู้และพัฒนาด้วย Silverlight 2.0 ไปเลยโดยไม่จำเป็นต้องมีพื้นฐานจาก Silverlight 1.0 แต่อย่างใด

ในขณะที่ Silverlight 1.0 เน้นหนักฟีเจอร์ไปทางการสนับสนุนการแสดงผลสื่อคุณภาพสูงต่างๆ เช่น วิดีโอ ผ่านเว็บ และสนับสนุนการพัฒนาส่วนการใช้งานต่างๆด้วย JavaScript, Silverlight 2.0 ก็ถูกต่อยอดให้เน้นหนักไปในการสนับสนุนการพัฒนาแอพพลิเคชั่นประเภท RIA โดยมีฟีเจอร์เด่นต่างๆดังต่อไปนี้

มีการรวมเอา .NET Framework เวอร์ชั่นพิเศษซึ่งมีขนาดเล็กและสามารถรันได้บนทุกๆแพลตฟอร์มที่เบราเซอร์ติดตั้งอยู่เข้าไป ทำให้เราสามารถพัฒนา Silverlight Application ได้ด้วยภาษาต่างๆที่ .NET สนับสนุน เช่น VB, C#, JavaScript, IronPython และ IronRuby เป็นต้น นอกจากนี้ยังมีเครื่องไม้เครื่องมือที่ช่วยในการพัฒนาครบครัน ไม่ว่าจะเป็นการสนับสนุนการพัฒนาใน Visual Studio 2008 หรือสนับสนุนการออกแบบอินเทอร์เฟส, อนิเมชั่น และการจัดการวิดีโอด้วย Microsoft Expression Studio 2 เป็นต้น
เมื่อมี .NET Framework Runtime และเน้นเรื่องของการออกแบบที่สวยงาน ก็ย่อมมีการสนับสนุนการทำงานแบบเดียวกับ WPF เช่น Graphics แบบเวคเตอร์ และ Animation Engine รวมถึงคอนโทรลมาตรฐานต่างๆ, การจัดการเลย์เอาท์แบบต่างๆ, การผูกข้อมูล (Data-Binding), ธีม, สไตล์, เทมเพลต และการจัดการสกิน เป็นต้น ถึงแม้ว่า Runtime ตัวนี้จะไม่ใช่ตัวที่มีความสามารถเต็มที่เช่นเดียวกับ WPF (ขาดความสามารถบางอย่างเช่น 3D เป็นต้น) แต่ก็เป็น Runtime ที่มีความสามารถสูงในการพัฒนา RIA และช่วยให้นักพัฒนาไม่จำเป็นต้องเรียนรู้วิธีการพัฒนาใหม่ๆ สามารถนำความรู้เดิมที่เคยใช้กับการพัฒนา WPF มาใช้ได้ในทันที
Silverlight 2.0 จะมาพร้อมกับคอนโทรลมาตรฐานต่างๆเพื่อให้นักออกแบบและนักพัฒนาสามารถเลือกนำไปใช้งานได้ทันที เช่น TextBox, CheckBox, RadioButton, StackPanel, Grid, Slider, ScrollViewer, Calendar, DatePicker, DataGrid และ ListBox เป็นต้น คอนโทรลเหล่านี้จะอนุญาตให้นักออกแบบสามารถแก้ไขรูปร่างหน้าตาให้สวยงามตามที่ต้องการได้โดยที่ไม่กระทบกับส่วนการทำงานของแอพพลิเคชั่น ทำให้การทำงานร่วมกันระหว่างนักออกแบบและนักพัฒนาราบรื่นและรวดเร็วยิ่งขึ้น
สนับสนุนการเชื่อมต่อสื่อสารสมบูรณ์แบบ ไม่ว่าจะเป็นการเรียกดูข้อมูลจากเซอร์ฟเวอร์ผ่าน REST, WS*/SOAP, POX, RSS หรือ HTTP มาตรฐาน นอกจากนี้ยังอนุญาตให้เรียกใช้งานทรัพยากรต่างๆ เช่น วิดีโอ, ฟอนท์ ฯลฯ ผ่านเว็บจากฝั่งไคลเอนท์ได้โดยตรง มีการสนับสนุนการทำงานข้ามโดเมนด้วยการกำหนด Policy รวมถึงสนับสนุนการสื่อสารผ่าน Socket และการสื่อสารในแบบ Duplex อีกด้วย
Base Class Library (BCL) ของเฟรมเวิร์คสนับสนุนส่วนสำคัญต่างๆจากเฟรมเวิร์คใหญ่ เช่น Collection, IO, Generics, Threading, Globalization, XML, Isolated Storage เป็นต้น นอกจากนี้ยังสามารถเชื่อมต่อและเข้าถึง HTML DOM / JavaScript ด้วย .NET Code ในด้านการคิวรีข้อมูลก็มี LINQ และ LINQ To XML ที่ช่วยให้การจัดการกับข้อมูลสะดวกง่ายดายยิ่งขึ้น
ไม่จำเป็นต้องมี .NET Framework ติดตั้งอยู่บนเครื่องก็รันได้ ตัวปลั๊กอินมีขนาดราว 4.8 Mb ซึ่งจะใช้เวลาดาวน์โหลดเพียงราวๆ 10 กว่าวินาทีบนอินเทอร์เน็ตแบบบรอดแบนด์ และมีขั้นตอนการติดตั้งที่ไม่ยุ่งยากซับซ้อน นอกจากนี้เนื่องจากมีการประชาสัมพันธ์อย่างต่อเนื่องมาตลอด ทำให้มีผู้ใช้จำนวนมากมีปลั๊กอินที่พร้อมใช้งานทันที ติดตั้งอยู่แล้วภายในเครื่องที่ใช้งาน
แม้เครื่องไม้เครื่องมือที่ใช้ในการพัฒนา Silverlight Application จะอยู่บนวินโดวส์ แต่เมื่อพัฒนาเสร็จแล้วสามารถนำไปติดตั้งบนเว็บเซอร์ฟเวอร์ที่รันแพลตฟอร์มใดก็ได้ ไม่ว่าจะเป็น Internet Information Server บนวินโดว์ส หรือ Apache บนลินุกซ์ เป็นต้น
สนับสนุนเทคโนโลยี Deep Zoom ช่วยในการสำรวจและขยายภาพขนาดเล็กจิ๋วให้มีรายละเอียดชัดเจนยิ่งขึ้น
มีคอนโทรลเสริมต่างๆมากมาย จาก Silverlight Toolkit ซึ่งเปิดตัวในงาน PDC2008 โดยจะมีการสนับสนุนคอนโทรลเพิ่มเติมทั้งที่มีใน WPF และไม่มีเช่น AutoCompleteBox, Chart, WrapPanel, DockPanel, ImplecitStlyeManager, NumericUpDown, TreeView และ ViewBox เป็นต้น เนื่องจาก Silverlight Toolkit เป็นโปรเจ็คนอกเหนือจากวงจรการพัฒนาปรกติสำหรับ Silverlight ของไมโครซอฟท์ ที่มีการพัฒนาแบบโอเพนซอร์สจึงมีซอร์สโค้ดให้ดาวน์โหลดมาเพื่อศึกษาและต่อยอดเองได้ ตัวโครงการจะได้รับการพัฒนาอย่างต่อเนื่องจากนักพัฒนามืออาชีพของไมโครซอฟท์ ซึ่งจะทำให้มีชุดคอนโทรลใหม่ๆเพิ่มเติมอย่างต่อเนื่องอีกมากในอนาคต

ยังมีฟีเจอร์อื่นๆที่น่าสนใจที่มากับเฟรมเวิร์คนี้อีกมาก ซึ่งคงจะได้มีโอกาสกล่าวถึงโดยละเอียดในตอนต่อๆไป แต่ตอนนี้เรามาดูกันก่อนดีกว่าว่า ถ้าเราจะพัฒนา RIA ด้วย Silverlight 2 นั้นจะต้องใช้เครี่องไม้เครื่องมืออะไรบ้าง

เครื่องมือที่ใช้ในการพัฒนา

แน่นอนว่าการพัฒนาแอพพลิเคชั่นด้วย Silverlight 2 ก็เหมือนกับการพัฒนาแอพพลิเคชั่นด้วย .NET Framework ทั่วไป กล่าวคือ นักพัฒนาสามารถเขียนโค้ดและคอมไพล์ได้ทันที จาก Complier ที่มาพร้อมกับ .NET Framework แต่วิธีการนี้จะไม่ค่อยมีประสิทธิภาพมากนัก เพราะต้องเขียนโค้ดมาก และทดสอบการทำงานของแอพพลิเคชั่นได้ยากกว่าการใช้เครื่องมือช่วยอำนวยความสะดวก

ไมโครซอฟท์จึงได้ตระเตรียมเครื่องไม้เครื่องมือเพื่อช่วยอำนวยความสะดวกในการทำงานให้กับนักพัฒนาด้วยการออกเครื่องมือใหม่ และเพิ่มฟีเจอร์เพื่อสนับสนุนการพัฒนานี้ในเครื่องมือที่มีอยู่เดิม โดยมีการออกเครื่องมือชุด Expression Studio 2 เพิ่มขึ้นสำหรับนักออกแบบ และผนวก Silverlight Tools เข้ากับ Visual Studio 2008 เวอร์ชั่นต่างๆ เพื่อให้นักพัฒนาสามารถพัฒนา Silverlight Application ได้รวดเร็วและมีประสิทธิภาพมากขึ้น

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

Visual Studio 2008 เป็นเครื่องมือหลักสำหรับนักพัฒนาที่ใช้ในการพัฒนาเว็บด้วย ASP.NET โดยสามารถเริ่มต้นได้จากรุ่นเล็กที่สุดคือ Visual Web Developer Express Edition ซึ่งสามารถดาวน์โหลดได้ฟรีจาก http://www.microsoft.com/express/vwd/
Silverlight Tool For Visual Studio 2008 เครื่องมือจำเป็นเพิ่มเติม ที่มาพร้อมกับ Visual Studio Updates, Silverlight Project Templates, Developer Runtime และ Silverlight SDK สำหรับ Visual Studio ช่วยให้นักพัฒนาสร้างโซลูชั่นและโปรเจ็คสำหรับ Silverlight ได้ง่ายขึ้น ดาวน์โหลดได้ฟรีจาก http://go.microsoft.com/fwlink/?LinkId=129043
Microsoft Expression Blend 2 และ Service Pack 1 เป็นเครื่องมือสำหรับนักออกแบบเพื่อใช้ในการออกแบบส่วนติดต่อกับผู้ใช้ (User Interface) ที่เป็นกราฟิกและอนิเมชั่น รวมถึงการสร้าง Resources เพื่อใช้ระหว่างแอพพลิเคชั่น สามารถดาวน์โหลดรุ่นทดลองสำหรับ Blend 2 ได้จาก http://www.microsoft.com/downloads/details.aspx?familyid=5FF08106-B9F4-43CD-ABAD-4CC9D9C208D7&displaylang=en และ SP1 ได้จาก http://www.microsoft.com/downloads/details.aspx?familyid=EB9B5C48-BA2B-4C39-A1C3-135C60BBBE66&displaylang=en

แม้ว่าเครื่องมือดังที่กล่าวมาข้างต้นจะเพียงพอกับความต้องการขั้นต้นในการพัฒนา Silverlight Application แล้ว แต่ไมโครซอฟท์ก็ยังนำเสนอเครื่องมืออื่นๆ เพื่อช่วยให้การพัฒนาเฉพาะทางง่ายขึ้นอีก เช่น

Microsoft Expression Design 2 ซึ่งเป็นเครื่องมือช่วยในการออกแบบกราฟิกแบบเวคเตอร์เป็นชิ้นงาน เพื่อนำไปประกอบใน Expression Blend 2 อีกต่อหนึ่ง มีความสามารถในการสร้างและจัดการกราฟิกได้ดีกว่า Blend และออกแบบมาเพื่อทำกราฟิกทั้งสำหรับ WPF และ Silverlight เป็นหลัก
Microsoft Expression Encoder 2 เป็นเครื่องมือสำหรับแปลงไฟล์วิดีโอให้อยู่ในรูปแบบและขนาดที่เหมาะสมกับการเอาไปใช้ร่วมกับ WPF และ Silverlight สามารถย่อขยายขนาดของวิดีโอ สร้าง Media Player ด้วย Silverlight แบบสำเร็จรูปได้, สามารถดูคุณภาพของวิดีโอได้ในระหว่างที่ถูกเรนเดอร์ หรือนำเข้าวิดีโอจากแหล่งข้อมูลสด เช่น เว็บแคม หรือวีดีโอการ์ดได้ เป็นต้น
Deep Zoom Composer เครื่องมือที่ช่วยในการเตรียมชุดภาพที่จะใช้กับเทคโนโลยี Deep Zoom ซึ่งเป็นฟีเจอร์เด่นฟีเจอร์หนึ่งใน Silverlight 2.0 ที่ทำให้ผู้ใช้สามารถดูภาพผ่านเว็บได้ในแบบที่ไม่เคยมีมาก่อน กล่าวคือผู้ใช้สามารถซูมเข้าออก เลื่อนภาพไปยังทิศทางต่างๆได้อย่างราบรื่น ผู้ใช้จะสามารถชมภาพที่มีความละเอียดสูงผ่านเว็บโดยไม่ต้องรอโหลดนานๆ และสามารถซูมเพื่อเลือกดูรายละเอียดของภาพ เช่น ลายมือบนโปสการ์ดได้ โดยไม่สูญเสียรายละเอียดของภาพไป เป็นต้น เราสามารถดาวน์โหลด Deep Zoom Composer ได้จาก http://www.microsoft.com/downloads/details.aspx?FamilyID=457B17B7-52BF-4BDA-87A3-FA8A4673F8BF&displaylang=en
Silverlight Toolkit เป็นชุดคอนโทรล, คอมโพเนนท์ และเครื่องมือที่ทางไมโครซอฟท์สร้างเสริมขึ้นมาเพื่อเพิ่มฟังก์ชั่นใหม่ๆให้กับ Silverlight โดยไม่ต้องรอเวลาครบรอบในการออกเวอร์ชั่นใหม่ ทั้งนี้เพื่อให้เกิดความรวดเร็ว คล่องตัว รวมถึงต้องการรับความคิดเห็นจากนักพัฒนาและนักออกแบบไปเพื่อใช้ในการพัฒนา Silverlight รุ่นต่อไปให้สมบูรณ์ยิ่งขึ้น Silverlight Toolkit มาพร้อมกับ Source Code, Unit Testing, ตัวอย่าง และเอกสารประกอบการใช้งาน ในเวอร์ชั่นแรกประกอบด้วยคอนโทรล 12 ชนิดที่ครอบคลุมไปถึง คอนโทรลแผนผังข้อมูล คอนโทรลที่ช่วยในการจัดการรูปร่างหน้าตาและตำแหน่ง รวมถึงคอนโทรลที่ใช้ในการรับข้อมูลจากผู้ใช้แบบต่างๆ เราสามารถดาวน์โหลด Silverlight Toolkit มาใช้งานได้จาก http://www.codeplex.com/silverlight

เมื่อติดตั้งเครื่องมือที่ใช้ในการพัฒนา Silverlight ลงบนเครื่องครบแล้วก็ถึงเวลาที่เราจะได้ทดลองสร้างแอพพลิเคชั่นเล็กๆด้วยเครื่องมือเหล่านี้กันดู เพื่อจะศึกษาขั้นตอนการทำงานระหว่างนักออกแบบและนักพัฒนา รวมถึงทำความรู้จักกับเครื่องมือต่างๆ ที่ต้องใช้งาน

Hello Silverlight, Hi twitter

หลังจากติดตั้ง Microsoft Visual Web Developer 2008 Express Edition (VWD), Silverlight Tools และ Microsoft Expression Blend 2 Trial Edition ลงบนเครื่องของเราเรียบร้อยแล้ว เราก็สามารถที่จะเริ่มต้นพัฒนา Silverlight Application ได้ในทันที สำหรับแอพพลิเคชั่นแรกที่เราจะลองทำก็คือ Twitter Reader ซึ่งจะเป็นแอพพลิเคชั่นง่ายๆ ที่จะไปดึงเอา Public Timeline ของ Twitter มาแสดง พร้อมทั้งมีปุ่ม Refresh เพื่อเรียกข้อมูลใหม่ล่าสุดมาแสดงผลเพิ่มเติม

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

จุดเด่นที่ทำให้บริการของ Twitter ได้รับความนิยมก็คือการเปิดให้เข้าถึง API ของบริการ API ย่อมาจาก Application Programming Interfaces หมายถึงบริการจากแอพพลิเคชั่นที่เปิดให้นักพัฒนาสามารถเรียกใช้งานได้ เช่น การเรียกดู Public Timeline ล่าสุด หรือการเรียกดูรายการข้อความใหม่ของสมาชิกคนใดคนหนึ่ง เป็นต้น โดยการทำงานภายในจะถูกกำหนดและทำโดย Twitter เอง โดยที่นักพัฒนาที่ต้องการใช้งาน เพียงแต่ทราบวิธีการใช้งานก็เพียงพอ ไม่จำเป็นที่จะต้องรู้วิธีการทำงานภายในแต่อย่างใด

การเปิดให้ใช้บริการเหล่านี้ ทำให้มีนักพัฒนาจำนวนมาก พัฒนาโปรแกรมเพื่อเรียกใช้บริการในรูปแบบต่างๆมากมาย ไม่ว่าจะเป็น การนำไปผสมผสานกับบริการของตนเองในเว็บอื่น (Mashup) หรือการสร้าง Windows Client เพื่อให้การโพสต์ข้อความ ภาพ หรือวิดีโอลงบน Twitter สะดวกขึ้น ในเครื่องมือสื่อสารพกพาก็มีการพัฒนาบริการที่จะทำให้สามารถส่งภาพถ่ายเข้าสู่ระบบ และแสดงเป็นลิงค์ไปยังภาพบนข้อความของ Twitter ได้เป็นต้น

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

เมื่อทราบความต้องการของระบบแล้วเราลองมาเริ่มสร้างระบบนี้กันเลยดีกว่า

เปิด VWD ขึ้นมา จากนั้นเลือกเมนู File > New Project… จากนั้นเลือก Visual Basic > Silverlight จาก Project Types และเลือก Silverlight Application จาก Templates แล้วตั้งชื่อ Solution ตามต้องการ (หากต้องการพัฒนาด้วย C# ให้เลือก Visual C# > Silverlight จาก Project Types แทน) จากนั้นกด OK เพื่อสร้าง Solution ใหม่

เนื่องจาก Silverlight Application จะต้องรันบนเว็บเพจเท่านั้น VWD จะให้เราเลือก ว่าจะสร้าง Web Application / Web site Project ขึ้นมาใหม่ หรือแค่สร้างหน้าทดสอบ เพื่อที่จะเรียกใช้งาน Silverlight Application ที่เราจะสร้าง ในกรณีนี้ เราจะเลือกตัวเลือกพื้นฐาน คือให้สร้าง Web Application Project ขึ้นใหม่ ภายใน Solution เดียวกันนี้ โดยให้ชื่อเหมือนกับ Silverlight Application แต่ลงท้ายเพิ่มเติมด้วย .Web ดังนั้นให้กด OK เพื่อสร้าง Project ใหม่

VWD จะสร้างโปรเจ็คใหม่ให้เรา 2 โปรเจ็คภายใต้โซลูชั่นที่เราสร้างขึ้น โปรเจ็คแรกจะบรรจุไฟล์ เช่น Page.xaml, App.xaml เป็นต้น จะเป็นส่วนที่เราใช้พัฒนา Silverlight Application ส่วนอีกโปรเจ็คหนึ่งที่มีไฟล์ เช่น Default.aspx และ TestPage.aspx จะเป็นไฟล์ที่ใช้ติดตั้งและเรียกใช้งาน Silverlight Application ของเรา โดยปรกติ VWD จะเปิดหน้าต่างออกแบบของไฟล์ Page.xaml ไว้ให้แล้วเป็นแบบ Split View คือ เห็นทั้งหน้าตาของแอพพลิเคชั่น และโค้ด ให้เราเพิ่มโค้ดลงไปจากโค้ดเดิมที่ VWD เตรียมไว้ให้ดังรายการที่ 1

รายการที่ 1

<UserControl x:Class="HelloTwitter.Page"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Width="400" Height="300">

<TextBlock>Hello, World</TextBlock>
</Grid>

</UserControl>

จากนั้นกด F5 เพื่อรัน เนื่องจากเป็นการรันครั้งแรก VWD จะถามเราว่าต้องการแก้ไข Web.config ให้มีการ Debug เกิดขึ้นหรือไม่ ให้เราตอบ OK เพื่อตกลง แอพพลิเคชั่นที่มีการ Debug จะตรวจหาข้อผิดพลาดได้ง่าย แต่จะทำงานช้าลง อย่างไรก็ดี Debug จะถูกปิดการทำงานโดยอัตโนมัติเมื่อเรา Publish เว็บไซต์จึงไม่ส่งผลต่อการทำงานของเว็บไซต์จริงแต่อย่างใด ในขั้นตอนนี้เราจะเห็นว่า VWD เรียก Internet Exploror (IE) ขึ้นมาพร้อมกับแสดงคำว่า Hello, World บนหน้าเว็บเพจ ถ้าหากคลิ๊กขวาที่เว็บเพจจะเกิด Context Menu ที่มีคำว่า Silverlight Configuration เกิดขึ้น หากเลือกตัวเลือกนี้ IE จะแสดงหน้าต่าง Configuration ของ Silverlight Plug-in ขึ้นมา ในหน้าต่างนี้เราสามารถดูข้อมูลเกี่ยวกับปลั๊กอินต่างๆ เช่น เลขเวอร์ชั่น ได้ เป็นต้น หากทำสำเร็จในขั้นตอนนี้ แสดงว่า Silverlight Application ของเราสามารถรันได้สมบูรณ์ จากนี้เราจะเพิ่มฟีเจอร์ของ Twitter ที่เราต้องการเข้าไป
เนื่องจากเราจะทำการออกแบบหน้าจอ Twitter Reader ของเราใหม่ด้วย Microsoft Expression Blend 2 เราจึงต้องเอาโค้ดที่เราใช้ทดสอบการทำงานก่อนหน้านี้ออกก่อน โดยให้เราทำการลบโค้ด <TextBlock>Hello, World</TextBlock> ที่เพิ่มเติมไปในขั้นตอนก่อนหน้านี้ออกไป จากนั้น Save โปรเจ็ค แล้วจึงคลิ๊กขวาบนไฟล์ Page.xaml ใน Solution Explorer แล้วเลือก Open in Expression Blend…
Blend จะแสดงหน้าต่าง Security Warning เพื่อให้เราแสดงความมั่นใจว่าเราต้องการจะเปิดโซลูชั่นนี้ด้วย Blend เพื่อแก้ไข ให้เราตอบ Yes เพื่อไปยังหน้าจอหลักของ Blend
เมื่อ Microsoft Expression Blend 2 เปิดไฟล์ Xaml ของเราขึ้นมาแสดง เราจะเห็นพื้นที่ว่างเปล่าซึ่งเกิดจากการสร้างขึ้นด้วย VWD อยู่ในส่วนกลางของหน้าจอที่เราเรียกกันว่า Art Board ซึ่งจะเป็นพื้นที่แสดงผลหน้าจอแบบเดียวกับหน้าต่าง Preview ใน VWD จะต่างกันก็แต่เพียงว่า เราสามารถออกแบบคอนโทรลที่ต้องการได้โดยตรงบน Art Board นี้เลย ไม่ใช่แค่ดูการแสดงผลได้อย่างเดียวเช่นในหน้าต่าง Preview ถ้ามองไปรอบๆเราจะเห็นชุดเครื่องมือ Tool Box อยู่ด้านซ้ายสุดของหน้าจอ ถัดมาจะเป็นหน้าต่างย่อย Interaction และ Object and Timeline ถ้ามองไปทางด้านขวาจะเห็นหน้าต่างย่อย Project, Properties, Resources และ Data หน้าต่างเหล่านี้จะแสดงเครื่องมือและวัตถุที่จะใช้เพื่อทำการออกแบบหน้าจอของเรา ในตอนนี้ให้เราพุ่งความสนใจไปเฉพาะเครื่องมือที่เราต้องใช้งานไปก่อน ในที่นี้เราจะลองปรับขนาดของ UserControl เพื่อปรับพื้นที่การแสดงผลหลักให้เป็นขนาดกว้าง 250 Pixel และสูง 400 Pixel เราสามารถปรับขนาดได้โดยการกดเลือกที่ UserControl ในหน้าต่าง Object and Timeline ก่อน เมื่อเลือกแล้วแถบ UserControl จะกลายเป็นสีขาว จากนั้นให้เราเลือกแท็บ Properties ตรงมุมบนขวาของหน้าจอ เพื่อแสดงคุณสมบัติต่างๆของ UserControl ที่เราเลือก ในหน้าต่างย่อยนี้เราจะเห็นกลุ่มของคุณสมบัติที่ชื่อ Layout ซึ่งมีความกว้างและความสูงของ UserControl อยู่ (ปรกติคือกว้าง 400 และสูง 300) ให้เราเปลี่ยนความกว้างให้เป็น 250 และความสูงให้เป็น 400 ตามลำดับ
เมื่อเราสร้างโปรเจ็คใหม่ VWD จะสร้าง Grid คอนโทรลที่ชื่อ LayoutRoot ให้เราโดยอัตโนมัติ เพื่อให้เราสามารถวางคอนโทรลอื่นๆลงใน Grid ได้อีกที คอนโทรลใน Silverlight มีสองประเภท คือพวกที่สามารถมีคอนโทรลลูกได้หลายๆคอนโทรล เช่น Grid, StackPanel และคอนโทรลประเภทที่มีคอนโทรลลูกได้คอนโทรลเดียว เช่น UserControl เป็นต้น ในที่นี้เราจะเปลี่ยน Grid คอนโทรลให้เป็น StackPanel คอนโทรล ซึ่งเป็นคอนโทรลที่จะเรียงคอนโทรลลูกภายในให้เป็นชั้นๆแทน เพื่อความสะดวกในการแสดงผล ให้เราคลิ๊กขวาที่ LayoutRoot จากนั้นเลือก Change Layout Type > StackPanel จาก Context Menu Blend จะเปลี่ยน Grid ให้เป็น StackPanel โดยอัตโนมัติ ในขั้นตอนต่อไปเราจะเพิ่มคอนโทรลลูกอีก 3 ชนิดเข้าไปใน StackPanel นี้ นั่นคือ TextBlock, ListBox และ Button ตามลำดับ
เริ่มจาก TextBlock กันก่อน ตรวจดูให้แน่ใจว่า LayoutRoot ยังถูกเลือกอยู่ จากนั้นไปที่ Tool Box แล้วดับเบิ้ลคลิ๊กที่ปุ่ม TextBlock เพื่อเพิ่มคอนโทรลเข้าไปใน StackPanel จะสังเกตในหน้าต่าง Objects and Timeline ได้ว่ามีคอนโทรล [TextBlock] เพิ่มเข้าไปใต้ LayoutRoot แล้วจึงกดเพื่อเลือก TextBlock ที่สร้างขึ้นใหม่ จากนั้นไปที่แท็บ Properties อีกครั้ง แล้วเปลี่ยนคุณสมบัติ Text ให้เป็น “Twitter Public Timeline” จากนั้นในชุดคุณสมบัติ Text ให้กดที่แท็บ Paragraph จากนั้นเปลี่ยน Text Alignment ให้เป็น Center ด้วยการเลือกจากดรอปดาวน์ลิสต์ เพื่อจัดให้ตัวอักษรอยู่กึ่งกลาง
จากนั้นเลือก LayoutRoot ในหน้าต่างย่อย Objects and Timeline อีกครั้ง แล้วไปที่ Tool Box จากนั้นกดปุ่ม Button ค้างไว้ ตัวเลือกใน Tool Box จะขยายออกมาให้เห็นเพิ่มเติม ให้ดับเบิ้ลคลิ๊กที่ ListBox เพื่อเพิ่มคอนโทรลเข้าไปใน StackPanel จากนั้นเลือก [ListBox] ที่เพิ่มขึ้นมาใหม่จากหน้าต่างย่อย Objects and Timeline แล้วเลือกแท็บ Properites แก้ไข Name ให้เป็น TweetList และ Layout > Height ให้เป็น 300
ตามปรกติตัวเลือกของดรอปดาวน์ลิสต์แต่ละรายการจะแสดงผลจากข้อมูลที่ผูกอยู่รายการละฟิลด์ แต่ในที่นี้เราต้องการให้แต่ละรายการแสดงทั้งเวลาที่ถูกโพสต์และข้อความ จึงต้องทำการแก้ไขการแสดงผลของตัวเลือกแต่ละรายการให้แสดงผลข้อมูลจากฟิลด์ที่เราต้องการเพิ่มเติมได้ โดยเริ่มจากตรวจดูให้แน่ใจว่า TweetList ในหน้าต่างย่อย Objects and Timeline ยังถูกเลือกอยู่ จากนั้นสังเกตที่ด้านบนของ Art Board จะเห็นดรอปดาวน์ลิสต์ชื่อ TweetList เช่นกัน ให้กดที่ดรอปดาวน์ลิสต์ จากนั้นเลือก Edit Other Templates > Edit Generated Items (ItemTemplate) > Create Empty… เพื่อเข้าสู่หน้าจอสำหรับออกแบบการแสดงผลของแต่ละตัวเลือกในดรอปดาวน์ลิสต์
สังเกตในหน้าต่างย่อย Objects and Timeline จะเห็นว่าค่าของคอนโทรลต่างๆเปลี่ยนไป เช่น จาก UserControl กลายเป็น DataTemplate เป็นต้น นั่นเป็นเพราะเรากำลังทำการออกแบบการแสดงผลเฉพาะจุด ซึ่งในที่นี้ก็คือการออกแบบให้กับตัวเลือกแต่ละรายการของดรอปดาวน์ลิสต์ซึ่งเป็นส่วนที่ย่อยลงไปจากโปรแกรมหลักนั่นเอง แรกเริ่มเราจะเห็น Grid คอนโทรลวางอยู่โดยอัตโนมัติ ให้เราคลิ๊กขวาบน Grid แล้วเปลี่ยนชนิดของมันให้เป็น StackPanel แล้วเพิ่ม TextBlock คอนโทรลเข้าไปภายใน StackPanel นี้ 2 คอนโทรล
เพื่อผูกข้อมูลเข้ากับรายการ เราต้องกำหนดฟิลด์ที่จะแสดงผลสำหรับ TextBlock แต่ละคอนโทรล เริ่มจากเลือกที่ TextBlock คอนโทรลบนก่อน จากนั้นไปที่แท็บ Properties แล้วกดที่จุดเล็กๆทางด้านขวาของคุณสมบัติ Text แล้วเลือก Data Binding… จากตัวเลือกที่ขยายออกมา
เมื่อเข้าสู่หน้าต่างย่อย Create Data Binding ให้เลือกแท็บ Explicit Data Context จากนั้นเลือกที่เช็คบ๊อกซ์ Use a custom path expression แล้วเติมคำว่า DatePosted ลงไป เราจะใช้ฟิลด์นี้ในการแสดงเวลาที่โพสต์ข้อความ จากนั้นกด Finish เพื่อกลับสู่หน้าต่างหลัก
ทำเช่นเดียวกันกับ TextBlock คอนโทรลที่อยู่ด้านล่าง โดยกำหนดให้ชื่อฟิลด์เป็น Text แทน DatePosted เราจะใช้ TextBlock นี้แสดงผลข้อความที่ถูกโพสต์ จากนั้นกดปุ่ม Finish เพื่อกลับสู่หน้าต่างหลัก
กลับสู่หน้าต่างออกแบบอินเทอร์เฟสหลักโดยการกดที่ดรอปดาวน์ลิสต์ TweetList ด้านบนของ Art Board
เมื่อกลับสู่หน้าต่างออกแบบหลักแล้ว ให้เพิ่มปุ่มสำหรับการอัพเดตข้อความโดยการเลือกที่ LayoutRoot ก่อน จากนั้นดับเบิ้ลคลิ๊กเพื่อเพิ่มปุ่มจาก Tool Box แล้วเปลี่ยนคุณสมบัติ Name ให้เป็น RefreshButton และ Content ให้เป็น “Refresh” เราจะใช้ปุ่มนี้ในการอัพเดตข้อมูลใหม่จาก Public Timeline ของ Twitter ในเวลาที่เราต้องการ
เซฟงานทั้งหมดใน Blend จากนั้นกลับไปทำงานด้วย VWD เมื่อเราเรียก VWD ซึ่งเปิดพักไว้กลับมาใช้งาน VWD จะเตือนเราว่ามีการแก้ไขไฟล์เอกสารนอกระบบของ VWD และถามเราว่าจะ Reload เอกสารหรือไม่ ให้เราตอบ Yes เพื่ออัพเดตการแก้ไขเอกสารใน VWD

ขั้นตอนต่อไปจะเป็นการเขียนโค้ดเพื่อรองรับการทำงานของ Twitter Reader ที่เราออกแบบไว้ เราจะเริ่มต้นโดยการสร้างคลาสที่ชื่อ Tweet ขึ้นมาก่อน เพื่อใช้เป็นคลาสที่จะรองรับข้อมูลสำหรับการทำ Data Binding ให้กับดรอปดาวน์ลิสต์ที่เราออกแบบไว้ก่อนหน้านี้ โค้ดตัวอย่างคลาส Tweet นี้สามารถดูได้จากรายการที่ 2 โดยเราจะออกแบบให้คลาสมีคุณสมบัติเฉพาะเท่าที่เราจะใช้งานเท่านั้น เพื่อประหยัดเวลาในการทดสอบ

รายการที่ 2

Public Class Tweet

Private _text As String
Public Property Text() As String
Get
Return _text
End Get
Set(ByVal value As String)
_text = value
End Set
End Property

Private _datePosted As String
Public Property DatePosted() As String
Get
Return _datePosted
End Get
Set(ByVal value As String)
_datePosted = value
End Set
End Property

End Class

เมื่อได้คลาส Tweet แล้ว ขั้นตอนต่อไปเราจะทำการดึงข้อมูล Public Timeline จาก Twitter มาใช้งานกัน โดยปรกติ Twitter จะเปิดให้เราเรียกข้อมูล Public Timeline นี้ได้ผ่าน RSS Feed ที่ URL ดังต่อไปนี้

http://twitter.com/statuses/public_timeline.rss

แต่ในกรณีนี้เราจะไม่สามารถจะเรียกไปยัง URL นี้โดยตรงจาก Silverlight Application ของเราได้ เนื่องจากเมื่อเรา Build โปรเจ็คแล้ว VWD จะทำการคอมไพล์ Silverlight Application ของเราให้กลายเป็นไฟล์ .xap เพื่อติดตั้งไว้บนเว็บเซอร์ฟเวอร์ เมื่อถูกเรียกใช้งานไฟล์ดังกล่าวนี้จะถูกดาวน์โหลดไปเพื่อทำงานในฝั่งไคลเอนท์ จึงทำให้การเรียกไปยัง URL เป้าหมายโดยตรงนั้นเกิด Security Error ขึ้น เพราะเป็นการเรียกไปยัง URL ที่อยู่ต่างโดเมนเนมกันหรือ Cross-domain นั่นเอง

อย่างไรก็ดี จะมีข้อยกเว้นสำหรับเว็บไซต์ที่มีการกำหนดสิทธิ์ไว้ให้ Silverlight Application สามารถเข้าถึงบริการได้เช่นกัน โดยเว็บนั้นจะต้องระบุสิทธิ์ในการเข้าถึงลงไปในไฟล์ clientaccesspolicy.xml หรือ crossdomain.xml ซึ่งวางไว้ที่ Root ของเว็บไซต์นั้นในรูปแบบที่ Silverlight กำหนด ในกรณีของ Twitter ถึงแม้ว่าจะมีไฟล์ crossdomain.xml วางอยู่ แต่เนื้อหาภายในไม่อยู่ในรูปแบบที่เข้ากันได้กับ Silverlight ดังนั้น จึงทำให้ไม่สามารถเข้าถึงข้อมูลได้ ดังนั้นเราจึงต้องใช้วิธีทางอ้อมในการดึงข้อมูลมาแสดง ซึ่งมีหลายวิธี เช่น การเขียนโมดูล Web Proxy ไว้บนเซอร์ฟเวอร์ของเราเองแล้วให้ Silverlight Application ของเราไปเรียกใช้ หรือในกรณีนี้ เราจะไปใช้บริการของ Yahoo! Pipes (http://pipes.yahoo.com/pipes/) แทน

Yahoo! Pipes เป็นเครื่องมือบนเว็บที่ใช้ในการรวบรวม, ปรับแต่ง และผสมผสานเนื้อหาที่ได้จากเว็บต่างๆเข้าด้วยกัน ทั้งนี้เพื่อให้เกิดรูปแบบข้อมูลใหม่สำหรับผู้สร้างเอง สำหรับวิธีการสร้าง Pipes นั้นทำได้ง่าย และสามารถดูตัวอย่างได้จากเว็บ Yahoo! Pipes เอง จึงจะไม่ขอกล่าวถึง อย่างไรก็ดี เราจะต้องสร้าง Pipes ของ Twitter Public Timeline ขึ้นมาใหม่จาก URL ของ RSS Feed ข้างต้นสำหรับใช้งานในแอพพลิเคชั่นของเรา เมื่อเราสร้างและ Publish Pipes แล้ว เราจะได้ URL ของ Pipes ที่เราสามารถเข้าถึงได้จากเว็บมา เช่น

http://pipes.yahoo.com/pipes/pipe.info?_id=...

หากลองเรียก URL ขึ้นมาได้สำเร็จ จะเห็นตัวเลือก More Options ซึ่งจะมีตัวเลือก Get as RSS ไว้ให้ ให้เราบันทึก URL ของ RSS Feed นี้มา

http://pipes.yahoo.com/pipes/pipe.run?_id=...&_render=rss

จากนั้นแก้ไขโดเมนเนมให้เป็นดังนี้

http://pipes.yahooapis.com/pipes/pipe.run?_id=...&_render=rss

สาเหตุที่ต้องมีการแก้ไขโดเมนก็เพราะว่า โดเมนเนม yahoo.com จะกำหนดสิทธิ์ไว้เช่นเดียวกันกับ twitter.com คือไม่อนุญาตให้แอพพลิเคชั่นในฝั่งไคลเอนท์ไปเรียกใช้บริการโดยตรงได้ ต่างกับโดเมนเนม yahooapis.com ซึ่งเปิดให้บริการไว้แล้วนั่นเอง

เมื่อได้ URL ของ RSS Feed ที่ต้องการแล้ว เราก็จะมาทำการเรียกข้อมูล จากนั้นจึงนำไปผูกกับ ListBox ที่สร้างไว้ก่อนหน้านี้เพื่อแสดงผล โดยเริ่มจากการเปิดไฟล์ Code-Behind ของ Page.xaml ขึ้นมาก่อน ไฟล์นี้จะมีชื่อว่า Page.xaml.vb หรือ Page.xaml.cs ขึ้นอยู่กับภาษาที่เลือกใช้ตอนสร้างโปรเจ็ค การทำงานของ Code-Behind กับ Xaml ก็จะมีความคล้ายคลึงกับไฟล์ .aspx ใน ASP.NET ทั่วไปนั่นเอง โดยมีโค้ดตัวอย่างตามรายการที่ 3

รายการที่ 3

Private Sub Page_Loaded(ByVal sender As Object, _
ByVal e As System.Windows.RoutedEventArgs) _
Handles Me.Loaded

BindTweets()

End Sub

Private Sub BindTweets()

    Dim twitterUrl As String = _
        "http://pipes.yahooapis.com/pipes/pipe.run?" +
        "_id=<your pipe id>&_render=rss"

Dim twitterService As New WebClient()

AddHandler twitterService.DownloadStringCompleted, _
AddressOf TweetReq_Callback

twitterService.DownloadStringAsync(New Uri(twitterUrl), _
UriKind.Absolute)

End Sub

Private Sub TweetReq_Callback(ByVal sender As Object, _
ByVal e As DownloadStringCompletedEventArgs)

    If e.Error Is Nothing Then
        DisplayTweets(e.Result)
    End If

End Sub

โดยแอพพลิเคชั่นจะทำการเรียกฟังก์ชั่น BindTweets() ใช้งานเมื่อถูก Load ฟังก์ชั่นนี้จะทำการสร้างออปต์เจ็ค WebClient ขึ้น เพื่อดาวน์โหลด RSS Feed ของเราจากเว็บเป้าหมาย ซึ่งในที่นี้ก็คือ Pipes ของ Twitter Public Timeline ที่เราสร้างขึ้น และเมื่อดาวน์โหลดเสร็จ ก็จะส่งข้อมูลที่ได้จากการดาวน์โหลดมายังฟังก์ชั่น Callback ที่เรากำหนดไว้ หลังจากตรวจสอบว่าไม่เกิด Error ระหว่างที่ดาวน์โหลดแล้ว ก็จะส่งข้อมูลที่ได้ไปยังฟังก์ชั่นที่ใช้แสดงผลข้อมูลอีกทอดหนึ่ง

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

รายการที่ 4

Private Sub DisplayTweets(ByVal xmlResponse As String)

Dim xTweets As XDocument _
= XDocument.Parse(xmlResponse)

    Dim tweets = From t In xTweets.Descendants("item") _
        Select New Tweet With { _
            .Text = CType(t.Element("description"), String), _
            .DatePosted = CType(t.Element("pubDate"), String) _
            }

TweetList.ItemsSource = tweets

End Sub

เราจะนำข้อมูลที่ได้รับกลับมาในรูปแบบ Xml (String) มาแปลงให้เป็นออปต์เจ็ค XDocument เสียก่อน เพื่อให้เราสามารถใช้ LINQ to XML ในการคิวรีข้อมูลได้ โดยใช้ Object Initializer ในการสร้างและบรรจุข้อมูลที่คิวรีได้ไปยังออปเจ็คต์ Tweet ใหม่ สุดท้ายเราก็จะได้ลิสต์ของออปต์เจ็ค Tweet เพื่อเอาไปผูกกับ ItemSource ของดรอปดาวน์ลิสต์ TweetList เพื่อแสดงข้อมูล หากเราไม่สามารถหาคลาสต่างๆที่เกี่ยวกับ LINQ to XML เจอ ให้ Imports System.Xml.Linq เข้ามาที่ต้นเอกสารก่อน ก็จะสามารถใช้งานได้ตามปรกติ

จากนั้นกด F5 เพื่อทดสอบการทำงาน หากแอพพลิเคชั่นของเราทำงานได้ถูกต้อง เราจะพบว่าเมื่อเริ่มใช้งาน จะมีข้อความล่าสุดจาก Twitter Public Timeline มาแสดงในดรอปดาวน์ลิสต์ของเรา เราสามารถทำให้ปุ่ม Refresh อัพเดตข้อมูลได้โดยการเรียกใช้งานฟังก์ชั่น BindTweets() เพิ่มเติมในอีเวนท์ Click ได้เช่นกัน หากการแสดงผลเรียบร้อยดี ก็เป็นอันว่าเสร็จสิ้นขั้นตอนในการทดสอบกระบวนการสร้าง Silverlight Application ด้วยเครื่องมือต่างๆตามที่ได้ตั้งใจเอาไว้แต่แรกเสียที
จากขั้นตอนทั้งหมดที่ผ่านมา นักออกแบบและนักพัฒนาอาจจะเห็นว่ามันดูซับซ้อนและใช้เวลานาน แต่ความจริงแล้ว เครื่องมือแต่ละชิ้นถูกออกแบบมาสำหรับการทำงานแบบแยกส่วน นักออกแบบสามารถใช้ Microsoft Expression Blend 2 ในการออกแบบรูปร่างหน้าตาของอินเทอร์เฟสไปได้พร้อมๆกับนักพัฒนา ซึ่งจะใช้ VWD ในการทำงานเป็นหลัก เนื่องจากเครื่องมือทั้งสองถูกออกแบบมาให้ใช้งานร่วมกันได้เป็นอย่างดี จึงทำให้การทำงานระหว่างนักออกแบบและนักพัฒนามีความสะดวก ราบรื่น ประหยัดเวลา และมีประสิทธิภาพเพิ่มขึ้น

บทสรุป

ในบทนี้เราได้เรียนรู้ประวัติความเป็นมาของนวัตกรรมใหม่สำหรับ RIA จากไมโครซอฟท์นั่นก็คือ Silverlight รวมถึงได้สำรวจฟีเจอร์ใหม่ๆที่เพิ่มเติมเข้ามาใน Silverlight 2.0 นอกจากนี้ก็ยังได้ทำความรู้จักกับเหล่าเครื่องมือชนิดต่างๆที่ใช้ในการพัฒนาแอพพลิเคชั่น รวมถึงได้ทดลองพัฒนาแอพพลิเคชั่นง่ายๆด้วยเครื่องมือดังกล่าว เพื่อทำความเข้าใจกระบวนการพัฒนาแอพพลิเคชั่นร่วมกันอย่างมีประสิทธิภาพระหว่างนักออกแบบและนักพัฒนา ซึ่งเป็นพื้นฐานทั่วไปที่ควรรู้ในการพัฒนา Silverlight Application หวังว่าผู้อ่านจะเข้าใจภาพรวมในการพัฒนาและสามารถนำไปใช้เป็นข้อมูลเพื่อเริ่มต้นในการพัฒนาแอพพลิเคชั่นของตนเองได้ต่อไป

Visual Studio 2008 SP1 และ Silverlight Tools Beta 2 สำหรับ Visual Studio 2008 ออกแล้ว

Suwitcha Chandhorn — Tue, 12 Aug 2008 18:55:14 GMT

เมื่อวันจันทร์ที่ 11 สิงหาคมที่ผ่านมา ไมโครซอฟท์ได้ปล่อยอัพเดตสำคัญสำหรับ Visual Studio 2008 ออกมานั่นคือ Service Pack 1 หรือ SP1 นั่นเอง ซึ่งเป็นการรวมเอาอัพเดตสำคัญๆหลายๆตัวที่ปล่อยออกมาในช่วงที่ผ่านมาไว้ด้วยกัน รวมถึงฟีเจอร์ใหม่ๆของ WPF เช่น Client Deployment Pack สำหรับ .Net Framework ซึ่งจะทำให้ขนาดไฟล์ที่ใช้ในตอนติดตั้งโปรแกรมที่เราเขียนลดลงมากกว่า 80% (เฉพาะส่วนของ .Net Framework) ครับ

ส่วนทางทีม Silverlight ก็ไม่ยอมน้อยหน้า ออก Tools สำหรับ SP1 ตามมาในวันเดียวกัน ในการติดตั้งต้องทำตามลำดับโดยการไปดาวน์โหลดไฟล์ตามนี้มาก่อน

Visual Studio 2008 Service Pack Preparation Tool (14.5 Mb)
Microsoft Visual Studio 2008 Service Pack 1 (831.5 Mb)
Microsoft Silverlight Tools Beta 2 for Visual Studio 2008 (84.4 Mb)

จากนั้นก็รันไฟล์ตามลำดับครับ การอัพเดตทั้งหมดน่าจะใช้เวลาไม่เกิน 5 ชม. ขึ้นอยู่กับความซับซ้อนของโปรแกรมที่ลงไว้ในเครื่องของเรา (รวมถึง Beta อื่นๆทั้งหลาย) ก่อนจะลงแต่ละไฟล์ควรอ่านคำแนะนำในส่วน Overview ของหน้า Download ให้ละเอียดก่อนครับ โดยเฉพาะส่วนที่เกี่ยวกับการ Remove Windows Update Patch เก่าๆออก ขั้นตอนโดยละเอียดดูเพิ่มเติมได้ที่ Silverlight Hack ครับ

MVP Hall of Fame Announced!

Suwitcha Chandhorn — Fri, 04 Jul 2008 06:57:14 GMT

MVP Hall of Fame เกิดขึ้นครั้งแรกในปี 2006 เพื่อเป็นการประกาศเกียรติคุณกับ MVP ที่ได้รับรางวัลต่อเนื่องยาวนานมากกว่า 3 ปี จากในปีแรกที่มีผู้ได้รับรางวัล (เฉพาะ South East Asia) เพียง 12 ท่าน ในปีนี้มีถึง 59 ท่าน โดยเป็นชาวไทยเรา 7 ท่านด้วยกัน (ประเทศที่มีรายชื่อมากที่สุดคือ Singapore โดยมีผู้ได้รับการประกาศชื่อถึง 21 ท่าน) สำหรับรายชื่อของประเทศไทยมีดังต่อไปนี้ครับ

MVP	Expertise	Award Since	Award Year
Henry Habermacher	Access	Oct 02	6
Suwitcha Chandhorn	Client App Dev	Oct 03	5
Suthep Sangvirotjanaphat	Client App Dev	Oct 04	4
Rames Gantanant	ASP/ASP.NET	Jan 05	4
Smith Suksmith	Team System	Jan 05	4
Songsak Channarukul	Visual C#	Jul 05	4
Chalermpon Areepong	Client App Dev	Jul 06	3
Wiennat Mongkulmann	ASP/ASP.NET	Jul 06	3

ดีใจที่ได้รับเกียรตินี้อีกครั้ง และอยากเห็น MVP หน้าใหม่ๆเกิดขึ้นในประเทศไทยอีกหลายๆคน :-)

Minimize to Tray ด้วย VB.Net

Suwitcha Chandhorn — Mon, 05 May 2008 05:29:22 GMT

ถึงแม้ปรกติเราจะสามารถใช้ NotifyIcon Control ในการสร้าง Icon ใน Tray ของ Windows ได้โดยไม่จำเป็นต้องเขียนโค้ดเพิ่มเติมแต่อย่างใด แต่จะทำอย่างไรล่ะ ถึงจะสามารถซ่อนหน้าต่างหลักเมื่อเรากดปุ่ม Minimize ของฟอร์มนั้น มันทำอย่างนี้ครับ

เมื่อกดปุ่ม Minimize จะเกิดอีเวนท์ Resize ขึ้น ให้เราดักดูว่า WindowState เป็น Minimized หรือไม่ ถ้าใช่ก็ให้ซ่อนฟอร์มซะ แล้วแสดง NotifyIcon ใน Tray เช่น

' เพิ่ม Private Property ในฟอร์มเพื่อให้จำ WindowState ล่าสุดไว้
Private currentWindowState As FormWindowState

จากนั้นใน Form.Resize ก็ใช้โค้ดตามนี้

If Me.WindowState = FormWindowState.Minimized Then
    Me.Hide()
    MainNotifyIcon.Visible = True
Else
    ' จำค่าปัจจุบันก่อนจะ Minimize ไว้
    currentWindowState = Me.WindowState
End
เมื่อจะ Restore Window สู่ขนาดเดิม ก็ให้ไปดักที่อีเวนท์ MouseDoubleClick ของ NotifyIcon แล้วดูว่าฟอร์มเรา Minimized ไว้หรือไม่ ถ้าใช่ก็ให้ Show และคืนค่า WindowState เดิมให้มันซะ ดังนี้

If Me.WindowState = FormWindowState.Minimized Then
    MainNotifyIcon.Visible = False
    Me.Show()
    Me.WindowState = Me.currentWindowState
End If

แค่นี้เองครับ

การรักษาความปลอดภัยใน ASP.Net 2.0 (1)

Suwitcha Chandhorn — Wed, 16 Apr 2008 07:59:35 GMT

ASP.Net 2.0 มาพร้อมกับระบบรักษาความปลอดภัยที่ใช้งานได้สะดวกยิ่งขึ้นกว่าเดิม จากที่เราเคยต้องลงมือเขียนโค้ดเองในงานที่ต้องทำเป็นประจำหลายๆส่วน อาทิ การทำเว็บเพจสำหรับ Login หรือ สร้างบัญชีผู้ใช้ใหม่ ใน .Net Framework 2.0 ได้จัดเตรียมชุดคอนโทรลสำหรับรักษาความปลอดภัยนี้มาให้อย่างครบครัน นอกจากนี้ชุดเครื่องมือที่ชื่อ Login นี้ยังช่วยเพิ่มประสิทธิภาพในการทำงานบางอย่างที่ควรทำเพื่อให้ข้อมูลปลอดภัยและถูกจัดเก็บแบบมีระบบมากขึ้น ซึ่งช่วยได้มากโดยเฉพาะสำหรับนักพัฒนาที่ยังขาดประสพการณ์ หรือมีเวลาจำกัดในการทำงาน เช่น การเข้ารหัสพาสเวิร์ด เป็นต้น

เครื่องมือชุด Login ในทูลบ๊อกซ์ของ Visual Studio นั้นประกอบด้วยคอนโทรลต่างๆ เช่น Login, LoginView, PasswordRecovery, LoginStatus, LoginName, CreateUserWizard และ ChangePassword คอนโทรล ซึ่งทำหน้าที่ช่วยในการรักษาความปลอดภัยของระบบ ดังที่ระบุไว้ในตารางที่ 1

ตารางที่ 1: หน้าที่ต่างๆของชุด Login คอนโทรล

คอนโทรล	หน้าที่
Login	ใช้เพื่อให้ผู้ใช้ล๊อคอินเข้าใช้งานระบบ
LoginView	ใช้เลือกแสดงผลระหว่างผู้ใช้ที่ล๊อคอินแล้วและยังไม่ได้ล๊อคอิน
PasswordRecovery	ใช้กู้คืนพาสเวิร์ดในกรณีที่ผู้ใช้ลืม
LoginStatus	ใช้แสดงสถานะการใช้งานของผู้ใช้ปัจจุบัน โดยแบ่งเป็นปุ่ม Login ซึ่งเชื่อมต่อไปยังหน้าล๊อคอิน และปุ่ม Logout เพื่อออกจากระบบรักษาความปลอดภัย
LoginName	ใช้แสดงชื่อผู้ใช้ปัจจุบัน
CreateUserWizard	ใช้เพื่อสร้างบัญชีผู้ใช้ใหม่
ChangePassword	ใช้เพื่อเปลี่ยนพาสเวิร์ด

เพื่อให้เราได้เห็นภาพการใช้งานจริง เราจะลองทำระบบล๊อคอินอย่างง่ายๆขึ้นใช้งานกัน โดยปรกติขั้นตอนในการสร้างระบบรักษาความปลอดภัยให้แก่เว็บไซต์นั้น มักจะประกอบด้วยการสร้างเว็บเพจที่ใช้สำหรับล๊อคอิน, การตั้งค่าสำหรับ Form Authentication, การตั้งค่า Membership Provider และทดสอบการใช้งาน นอกจากนี้เรายังจะทดสอบการใช้งานคอนโทรลอื่นๆ เช่น CreateUserWizard คอนโทรล, LoginView คอนโทรล ฯลฯ เป็นต้น อีกด้วย เนื่องจากเราจะเก็บข้อมูลของบัญชีผู้ใช้ไว้ใน Microsoft SQL Server จึงต้องติดตั้งเตรียมไว้ในเครื่องที่จะใช้พัฒนาก่อนจะทดลองทำตามขั้นตอนต่อไป

ให้เราเปิด Visual Studio 2005 แล้วสร้าง ASP.Net Website ใหม่ ชื่อ ASPNetSecureSample ขึ้นมา
เพิ่มเว็บฟอร์มใหม่เข้ามาในโปรเจ็ค ตั้งชื่อว่า Login.aspx จากนั้นลาก Login คอนโทรลจากทูลบ๊อกซ์ เข้ามาวางในเว็บฟอร์ม

รูปที่ 1: คอนโทรลต่างๆในชุด Login จาก Toolbox ของ Visual Studio

จากนั้นเปิดหน้าต่าง Visual Studio 2005 Command Prompt จากเมนู Visual Studio Tools แล้วพิมพ์ aspnet_regsql เพื่อเปิดวิซาร์ดสำหรับสร้างฐานข้อมูลระบบรักษาความปลอดภัย โดยเราจะสร้างฐานข้อมูลนี้ไว้ใน Microsoft SQL Server (ผู้เขียนใช้เวอร์ชั่น 2005 แต่เราอาจใช้เวอร์ชั่น 2000 ทดแทนได้เช่นกัน)
ทำตามขั้นตอนการสร้างฐานข้อมูลไปเรื่อยๆจนจบ โดยเลือกเซอร์ฟเวอร์ที่ต้องการใช้ แล้วตั้งชื่อฐานข้อมูลว่า ASPNetAuthSample เมื่อเสร็จสิ้นขั้นตอนแล้วให้กด Finish เพื่อปิดหน้าต่างวิซาร์ด พิมพ์ Exit ที่ Command Prompt เพื่อปิดหน้าต่าง
จากนั้นเราจะต้องตั้งค่าเพื่อกำหนดให้ระบบรักษาความปลอดภัยของเราใช้ฐานข้อมูลที่เพิ่งสร้างขึ้นเป็นที่เก็บข้อมูลเสียก่อน จึงจะสามารถใช้งานได้ ซึ่งสามารถทำได้โดยการกำหนดค่า Connection String และ Membership ในไฟล์ web.config ดังรายการที่ 1 และรายการที่ 3 ทั้งนี้ค่าของ connectionString อาจแตกต่างไปบ้างตามแต่เครื่องที่ใช้พัฒนา เราสามารถหาดูค่านี้อย่างง่ายๆได้ โดยการติดต่อไปยังฐานข้อมูลที่ต้องการผ่านหน้าต่าง Server Explorer แล้วจึงดูค่านี้ในหน้าต่าง Properties ของการเชื่อมต่อดังกล่าวนั่นเอง

รายการที่ 1: การกำหนด Connection String ใน web.config

<add name="LocalSQLServer" connectionString="Data Source=.;

Initial Catalog=ASPNetAuthSample; Integrated Security=True" />

</connectionStrings>

แล้วจึงกำหนดค่า Authentication และ Authorization ใน web.config เพื่อบังคับให้ผู้ใช้ต้อง Login ทุกครั้งเมื่อใช้งานเว็บไซต์

รายการที่ 2: การตั้งค่า Authentication และ Authorization ใน web.config

</authentication>

</authorization>

ลาก Label คอนโทรลมาวางใน Default.aspx กำหนดค่า Text ให้เป็น Hello, World! และค่าขนาดฟ้อนท์ให้เป็น x-large เพื่อแสดงผลคำนี้หลังจากผู้ใช้ล๊อคอิน
กด F5 เพื่อทดสอบ Visual Studio จะเปิด Internet Explorer ขึ้นมา และระบบจะ Redirect เราไปยังหน้าล๊อคอินเสมอตามที่ตั้งค่า Authorization ไว้ใน web.config แต่เนื่องจากเรายังไม่มีบัญชีผู้ใช้ใดๆ จึงต้องสร้างขึ้นมาใหม่เสียก่อนจึงจะสามารถล๊อคอินเข้าใช้งานระบบได้
ให้ปิด Internet Explorer แล้วเปิดไฟล์ Login.aspx ขึ้นมา จากนั้นลาก CreateUserWizard คอนโทรลจากทูลบ๊อกซ์เข้ามาวางในฟอร์ม ตรงด้านล่างของ Login คอนโทรล
กด F5 เพื่อทดสอบระบบอีกครั้ง คราวนี้ให้ลองสร้างบัญชีผู้ใช้ใหม่โดยใช้ชื่อว่า “user1” และพาสเวิร์ด “qwerty!!!” โดยทั่วไป CreateUserWizard คอนโทรลจะกำหนดค่ากฏพื้นฐานของพาสเวิร์ดไว้ให้ไม่ต่ำกว่าหกตัวอักษรและมีเครื่องหมายใดเครื่องหมายหนึ่งอย่างน้อยหนึ่งเครื่องหมาย ทั้งนี้ก็เพื่อความปลอดภัย แต่เราสามารถปรับแต่งส่วนนี้ได้ภายหลัง
เมื่อสร้างบัญชีผู้ใช้สำเร็จให้ลองทดสอบ Login ดู คราวนี้เมื่อใส่ข้อมูลผู้ใช้ที่ถูกต้อง ระบบก็จะนำเราไปยังหน้า Default.aspx โดยอัตโนมัติ

เมื่อถึงขั้นตอนนี้จะเห็นว่าเราสามารถล๊อคอินเข้าใช้งานระบบได้อย่างสมบูรณ์พอสมควรแล้ว แต่ยังมีรายละเอียดปลีกย่อยอื่นที่จำเป็นต้องกล่าวถึงอีกพอสมควร เพื่อให้สอดคล้องกับการใช้งานจริง เช่น ระบบควรจะแสดงชื่อผู้ใช้งานและปุ่มล๊อคเอาท์เมื่อผู้ใช้ล๊อคอินเข้ามาใช้งานระบบ หรือระบบควรอนุญาตให้ผู้ใช้ที่ยังไม่ได้ล๊อคอินสามารถใช้งานระบบบางส่วนได้ เป็นต้น เราจึงจะทดลองใช้งานคอนโทรลอื่นๆที่มีในชุดเครื่องมือ Login นี้กันต่อ
ปิด Internet Explorer แล้วเปิด Default.aspx ขึ้นมา ลาก LoginView คอนโทรลเข้าไป กดปุ่ม Tasks ตรงมุมบนขวาของคอนโทรลดูให้แน่ใจว่า Views: ของคอนโทรลเป็น AnonymousTemplate เพื่อให้ส่วนการแสดงผลที่จะกำหนดต่อไปนี้เป็นส่วนที่ผู้ใช้ที่ยังไม่ได้ทำการล๊อคอินเห็น
ลาก Label1 คอนโทรลที่เราทำไว้เดิมไปปล่อยบน LoginView คอนโทรลที่เราเพิ่งสร้างขึ้น เปลี่ยนค่า Text เดิมให้เป็นคำว่า “Hello Guest!” จากนั้นลาก LoginStatus คอนโทรลเข้ามาวางไว้ต่อจาก Label1 คอนโทรลนี้จะแสดงปุ่มเพื่อเชื่อมต่อผู้ใช้ไปยังหน้าสำหรับล๊อคอินในกรณีที่ยังไม่ได้ล๊อคอิน และแสดงค่าเป็นล๊อคเอาท์เพื่อให้ผู้ใช้กดเมื่อต้องการออกจากระบบรักษาความปลอดภัย
เลือก Label1 คอนโทรลแล้วกด Ctrl+C เพื่อ Copy หลังจากนั้นกดปุ่ม Tasks ของ LoginView คอนโทรลแล้วเปลี่ยน Views: ไปยัง LoggedInTemplate ซึ่งจะเป็นส่วนที่ผู้ใช้เห็นหลังจากที่ได้ล๊อคอินแล้ว
เมื่อคอนโทรลแสดง Template ว่างๆ ให้กดด้านในแล้วกด Ctrl+V เพื่อวาง Label คอนโทรลที่ Copy มาลงไป แล้วลบค่า Text ของคอนโทรลออกให้เหลือเพียงคำว่า “Hello”
จากนั้นลาก LoginName คอนโทรลและ LoginStatus คอนโทรลไปวางต่อจาก Label คราวนี้ใน Tasks ของ LoginStatus ให้เลือก Views: เป็น LoggedIn ลิงค์จะแสดงค่าคำว่า “Logout” ขึ้นมาแทนค่าเดิม
เปิดไฟล์ web.config ขึ้นมาแล้ว ลบส่วนที่เราตั้งค่าของ Authorization ไว้ก่อนหน้านี้ออกไป เพื่อกำหนดสิทธิ์ให้เว็บไซต์สามารถเข้าถึงได้จากผู้ใช้ทั่วไป
หลังจากนั้นกด F5 เพื่อทดสอบ ในหน้า Default.aspx เราจะเห็นคำว่า “Hello, Guest!” แสดงพร้อมกับลิงค์เพื่อไปยังหน้า Login เมื่อเราลอง Login ดูด้วยบัญชีผู้ใช้ “user1” ที่เพิ่งสร้างขึ้นจะพบว่าระบบนำเรากลับมายังหน้า Default.aspx พร้อมกับแสดงค่า “Hello, user1” แทน นอกจากนี้เรายังสามารถกด Logout เพื่อออกจากระบบได้อีกด้วย

รูปที่ 2: การแสดงผลเมื่อผู้ใช้ล๊อคอิน
ปิด Internet Explorer เปิดหน้า Login.aspx แล้วลบ CreateUserWizard คอนโทรลออก เราจะสร้างหน้าเว็บเพจใหม่สำหรับการสร้างบัญชีผู้ใช้ใหม่โดยเฉพาะในขั้นตอนต่อไป
สร้างไฟล์ Register.aspx ขึ้นใหม่ในโปรเจ็ค จากนั้นลาก CreateUserWizard คอนโทรลมาวาง เลือกกำหนดค่า ContinueDestinationPageUrl ให้เป็นไฟล์ Default.aspx เพื่อกำหนดให้เมื่อสร้างบัญชีใหม่เสร็จ ให้ระบบนำเราไปยังหน้าหลัก
กลับไปที่ไฟล์ Login.aspx ให้คลิ๊กที่ Login คอนโทรล แล้วตั้งค่า CreateUserText เป็น “Register” และเลือกไฟล์ Register.aspx สำหรับค่า CreateUserUrl เมื่อสังเกตที่คอนโทรลจะเห็นว่ามีลิงค์ไปยังหน้าลงทะเบียนเพิ่มขึ้นมา กด F5 เพื่อทดลองสร้าง account ผ่านหน้าที่สร้างขึ้นมาใหม่ เช่น user2 เป็นต้น

รายการที่ 3: การกำหนดค่า MembershipProvider ให้ระบบรักษาความปลอดภัย

<add name="LocalMembershipProvider"

connectionStringName="LocalSQLServer"

minRequiredPasswordLength="5"

minRequiredNonalphanumericCharacters="0"

passwordStrengthRegularExpression="^[0-9a-zA-Z'.\s]{5,40}$"

type="System.Web.Security.SqlMembershipProvider"/>

</providers>

</membership>

เนื่องจาก CreateUserWizard คอนโทรลถูกตั้งค่าไว้ให้รับพาสเวิร์ดไม่ต่ำกว่าหกตัวอักษร และต้องมีเครื่องหมายอย่างน้อยหนึ่งตัวอักษรดังที่กล่าวไปแล้วข้างต้น อาจทำให้ไม่สะดวกกับผู้ใช้หรือไม่เข้ากับกฏที่เว็บไซต์เคยใช้อยู่เดิม เราสามารถปรับแต่งข้อบังคับนี้ได้ ด้วยการกำหนดค่า PasswordRegularExpression ในคอนโทรล และค่า passwordStrengthRegularExpression ของ LocalMembershipProvider ในไฟล์ web.config ให้ลองกำหนดค่าทั้งสองเป็น ^[0-9a-zA-Z'.\s]{5,40}$ ซึ่งเป็น Regular Expression ที่แทนการรับค่าตัวอักษร เช่น 0-9, a-z, A-Z, ช่องว่างและเครื่องหมาย . หรือ ‘ เป็นต้น โดยมีความยาวระหว่าง 5 ถึง 40 ตัวอักษร เพื่อกำหนดให้ขอบเขตของกฏกว้างขึ้น
กฏที่เราตั้งบังคับความยาวของพาสเวิร์ดให้เริ่มที่ 5 ตัวอักษรและจะไม่กำหนดว่าต้องมีเครื่องหมายพิเศษ เราจึงต้องกำหนดค่า minRequiredPasswordLength และ minRequiredNonalphanumericCharacters ของ LocalMembershipProvider ให้เท่ากับ 5 และ 0 ตามลำดับ

รูปที่ 3: CreateUserWizard คอนโทรลขณะใช้งาน
เมื่อลองทดสอบสร้างบัญชีของผู้ใช้ใหม่เช่น user3 จะพบว่าเราสามารถตั้งพาสเวิร์ดได้อย่างอิสระมากขึ้น ทั้งนี้เราสามารถปรับแต่งกฏของเราได้ตามต้องการ โดยสามารถหาอ่านเรื่องเกี่ยวกับการใช้ Regular Expression เพิ่มเติมได้จากบทความเรื่อง How To: Use Regular Expressions to Constrain Input in ASP.NET ในเว็บไซต์ของไมโครซอฟท์ที่ http://msdn2.microsoft.com/en-us/library/ms998267.aspx

หากเราต้องการให้ผู้ใช้สามารถเปลี่ยนพาสเวิร์ดของตนเองได้ก็สามารถทำได้ง่ายๆ โดยใช้ ChangePassword คอนโทรล ดังตัวอย่าง

สร้างไฟล์ใหม่โดยตั้งชื่อว่า ChangePassword.aspx จากนั้นลาก ChangePassword คอนโทรลลงมาวาง กำหนดค่า ContinueDestinationPageUrl ให้เป็นไฟล์ Default.aspx
ต่อมาให้เราเปิดไปที่ไฟล์ Default.aspx เลือก LoggedInTemplate จาก Tasks ของ LoginView จากนั้นลาก HyperLink คอนโทรลมาวางระหว่าง LoginName คอนโทรลและ LoginStatus คอนโทรล กำหนดค่า Text เป็น “Change Password” และค่า NavigateUrl ให้เป็น “~/ChangePassword.aspx”
กด F5 เพื่อทดสอบ โดยการล๊อคอินด้วยบัญชีที่เราสร้างขึ้นในขั้นตอนก่อนๆ จากนั้น Browse ไปยังหน้า ChangePassword.aspx เพื่อทดลองเปลี่ยนพาสเวิร์ด

นอกจากนี้เรายังสามารถอนุญาตให้ผู้ใช้รีเซตพาสเวิร์ดได้ในกรณีที่ลืม โดยใช้ PasswordRecovery คอนโทรลซึ่งก็มีวิธีการใช้งานที่คล้ายคลึงกันกับ ChangePassword คอนโทรลมาก จะเห็นได้ว่าการใช้งานชุดเครื่องมือ Login เพื่อสร้างระบบรักษาความปลอดภัยพื้นฐานนั้นสะดวกและมีประสิทธิภาพมาก นอกจากนี้เรายังสามารถควบคุมคอนโทรลเหล่านี้ผ่านโค้ด และนำไปปรับใช้ได้ในหลายๆสถานการณ์ สามารถตรวจสอบสถานะการล๊อคอินผ่าน User.Identity.IsAuthenticated ก่อนจะแสดงผล และสามารถปรับแต่งการแสดงผลของคอนโทรลด้วย Auto Format… ใน Tasks ของแต่ละคอนโทรลได้ เป็นต้น นับว่าเป็นชุดเครื่องมือที่ช่วยทุ่นแรงนักพัฒนาไปได้อย่างยิ่งยวดจริงๆ ใช่ไหมครับ

ป้องกันการโพสต์ข้อความไม่พึงประสงค์ด้วย CAPTCHA ตอนที่ 2

Suwitcha Chandhorn — Mon, 31 Mar 2008 16:21:18 GMT

ความเดิมจากตอนที่แล้ว เราเริ่มต้นด้วยการสร้างคลาสสำหรับสร้างรูปภาพ CAPTCHA ขึ้นมาคลาสหนึ่งให้ชื่อว่า CaptchaImage และได้อธิบายวิธีโครงสร้างของมันไปพอสมควร คราวนี้เราจะมาดูกันถึงวิธีการเรียกใช้งานคลาสดังกล่าวนี้จากหน้าเว็บเพจใน ASP.Net กันดูบ้างดีกว่า

ดังที่เคยกล่าวไว้ในฉบับที่แล้ว การสร้าง Captcha แบบง่ายๆขึ้นใช้งานนั้น ทำได้โดยการสร้างคลาสสำหรับใช้ Generate Captcha ที่ต้องการขึ้นมาก่อน เมื่อต้องการใช้ก็เรียกใช้งานคลาสนั้น โดยผ่านข้อความที่สุ่มขึ้นมาเข้าไปเพื่อให้ได้รูปภาพกลับคืนมาแสดงผล นอกจากนี้เราต้องเก็บข้อความที่สร้างขึ้นไว้ใน Session เพื่อนำมาเทียบกับสิ่งที่ผู้ใช้ป้อนในภายหลัง ถ้าหากป้อนข้อความกลับมาได้ถูกต้อง จึงอนุญาตให้ผู้ใช้ทำงานต่อไปได้ ดังนั้นขั้นตอนถัดไปเราจึงต้องสร้างเว็บเพจที่จะเรียกใช้ CaptchaImage ขึ้นมา

เรียก CAPTCHA มาแสดงผล

ก่อนอื่นเราต้องแสดงผลรูปภาพที่ได้จากคลาสโดยการเรียกผ่านเว็บเพจเสียก่อน เพื่อจะทำให้สามารถเรียกใช้งานผ่านอินเทอร์เน็ตได้ ซึ่งทำได้ง่ายๆโดยการเพิ่ม WebForm ชื่อ GetCaptchaImage เข้ามาในโปรเจ็ค และเพิ่มโค้ดดังรายการที่ 1 เข้าไปในอีเวนท์ Page_Load โค้ดจะทำการสร้างรูปภาพขึ้นจากข้อความที่เราเก็บไว้ในตัวแปร Session ตามขนาดและตัวอักษรที่เรากำหนด และส่งผลกลับออกไปยังเว็บเพจที่เรียกมาเป็นไฟล์ชนิด Jpeg ซึ่งเป็นรูปแบบการแสดงผลรูปภาพมาตรฐานหนึ่งในอินเทอร์เน็ตโดยการกำหนดค่า ContentType ของ Request ที่เข้ามา ทำให้เราไม่จำเป็นจะต้องแก้ไขโค้ดใดๆในส่วนของไฟล์ .aspx เพิ่มเติม เนื่องจากค่าที่ได้จะถูกคืนไปเป็นรูปภาพเมื่อเว็บเพจถูกเรียกใช้แทน

รายการที่ 1: การเรียกใช้คลาส CaptchaImage และส่งคืนรูปภาพชนิด Jpeg

Partial Class GetCaptchaImage

Inherits System.Web.UI.Page

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

Dim ci As New CaptchaImage(Session("captchaCode").ToString(), 240, 60, "Tahoma")

Me.Response.Clear()

Me.Request.ContentType = "image/jpeg"

ci.Image.Save(Me.Response.OutputStream, System.Drawing.Imaging.ImageFormat.Jpeg)

ci.Dispose()

End Sub

End Class

สร้างฟอร์มสำหรับแสดงและเทียบข้อความ

จากนั้นเราต้องสร้างฟอร์มขึ้นมาสำหรับแสดงและรับค่าเพื่อเทียบหาความถูกต้องเสียก่อน โดยการเพิ่มฟอร์มใหม่เข้ามาในโปรเจ็ค และเพิ่มคอนโทรลต่างๆ ดังตารางที่ 1 เราแสดงผลข้อความที่จะสุ่มขึ้นโดยใช้ Image คอนโทรลโดยกำหนด ImageUrl ไปยังไฟล์ GetCaptchaImage.aspx ที่เราเพิ่งสร้างขึ้น เมื่อโหลดคอนโทรลจะไปเรียกใช้ไฟล์ดังกล่าวและได้ค่าคืนมาเป็นรูปภาพอีกต่อหนึ่ง ทำให้เราไม่จำเป็นต้องสร้างรูปภาพจริงๆเตรียมไว้ในระบบ

ตารางที่ 1: คอนโทรลต่างๆที่ใช้ในเว็บเพจ

Control	Property	Value
Image	ID	imgCaptcha
	ImageUrl	~/GetCaptchaImage.aspx
TextBox	ID	txtMessage
Button	ID	btnCheck
	Text	Check
Label	ID	lblIsMatched

นอกจากนี้เรายังต้องมีกล่องข้อความ, ปุ่ม และแถบข้อความเพื่อใช้แสดงผลการเปรียบเทียบ เมื่อใส่คอนโทรลต่างๆเข้ามาแล้วควรจัดให้เป็นระเบียบสวยงาม เพื่อให้ง่ายต่อการใช้งาน

รูปที่ 1: การจัดวางคอนโทรลต่างๆใน IDE

สุ่มข้อความใน Code Behind

เมื่อจัดแต่งหน้าตาเสร็จ เราต้องมีการสุ่มข้อความหรือในที่นี้คือชุดตัวเลขขึ้นมา โดยทำการเขียนโค้ดไว้ในอีเวนท์ Page_Load ในส่วน Code Behind ของเว็บเพจที่จะใช้ โดยเลือกสุ่มค่าเพื่อมาเก็บไว้ในตัวแปร Session แล้วจึงใช้ค่านั้นสอบเทียบกันเมื่อเกิดการ PostBack ในเว็บเพจ ในโค้ดตัวอย่าง เราจะทำการสุ่มค่าตัวเลขหกหลักขึ้นมาหนึ่งชุดเมื่อเว็บเพจนั้นถูกเรียกใช้ในครั้งแรก และเก็บค่าไว้ในตัวแปร Session เมื่อ Image คอนโทรลถูกโหลดมันจะวิ่งไปเรียกไฟล์ GetCaptchaImage.aspx ซึ่งจะคืนค่ารูปตามตัวแปรที่เก็บไว้กลับมาเพื่อแสดงผล หากเรากรอกข้อมูลแล้วกดปุ่ม Check โปรแกรมก็จะทำการตรวจสอบค่าที่เราป้อนเข้ามากับตัวแปรที่เก็บไว้ใน Session ก่อนจะแสดงผลการเปรียบเทียบออกมาทางหน้าจอ

รายการที่ 2: การสุ่มค่าข้อความเพื่อใช้ตรวจสอบ

Partial Class _Default

Inherits System.Web.UI.Page

Private Function GenerateRandomCode() As String

Dim s As String = String.Empty

Dim r As New Random

For i As Integer = 0 To 6

s = String.Concat(s, r.Next(10).ToString())

Return s

End Function

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

If Not Page.IsPostBack Then

Session("captchaCode") = GenerateRandomCode()

Else

If Not String.IsNullOrEmpty(Session("captchaCode").ToString()) AndAlso txtMessage.Text = _

Session("captchaCode").ToString() Then

lblIsMatched.Text = "Matched!"

Else

lblIsMatched.Text = "Not match, try again!"

txtMessage.Text = String.Empty

Session("captchaCode") = GenerateRandomCode()

End If

End Sub

End Class

ปรับแต่งรูปแบบการแสดงผล

หากเราทดสอบการใช้งานได้ผลสำเร็จเป็นที่น่าพอใจแล้ว เราก็สามารถที่จะปรับแต่งรูปแบบการแสดงผลให้เป็นไปตามรูปแบบที่เราต้องการได้ หากต้องการเปลี่ยนข้อความที่สุ่มขึ้นก็สามารถทำได้เลยโดยการแก้ไขอัลกอริทึมของฟังก์ชั่น GenerateRandomCode() ในอีเวนท์ Page_Load ของเว็บเพจที่เรียกใช้ GetCaptchaImage.aspx แต่ถ้าหากต้องการปรับวิธีการแสดงผลของภาพ ก็ต้องย้อนกลับไปดูโค้ดในคลาส CaptchaImage กันครับ

ในการสร้างและปรับแต่งรูปภาพแบบ 2D หรือ 2 dimension (สองมิติ) เนมสเปซที่เกี่ยวข้องจะอยู่ในชุดของ System.Drawing ซึ่งมีเนมสเปซย่อยๆที่จำเป็นต้องเรียกใช้งานอีกหลายเนมสเปซ เช่น System.Drawing.Drawing2D, System.Drawing.Graphics และ System.Drawing.Imaging เป็นต้น เราต้องทำการอิมพอร์ตเข้ามาก่อนจึงจะสามารถเรียกใช้งานคลาสและฟังก์ชั่นต่างๆที่เกี่ยวกับกราฟิกใน .Net Framework 2.0 หรือ GDI+ ได้

เราเริ่มสร้าง Captcha ของเราโดยการสร้างออปเจ็คต์ Bitmap ขึ้นมาก่อน จากนั้น Reference ไปยังคลาส Graphics เพื่อกำหนดให้เป็นพื้นที่ที่ใช้ในการเขียนกราฟิกต่างๆลงไปได้ เมื่อ New Bitmap เรากำหนดให้มีความกว้าง ความสูง และรูปแบบการแสดงผลผ่าน PixelFormat.Format32bppPArgb ซึ่งหมายถึง เรากำหนดรูปแบบของกราฟิกในรูปให้มีขนาด 32 บิตต่อจุด (pixel) และกำหนดค่าสีแบบ Premultiplied Alpha

หลายคนอาจจะสงสัยว่า Premultiplied Alpha คืออะไร ขออธิบายโดยย่อว่า ในการแสดงค่าสีบนจอ เรามีแม่สีทั้งหมดสามสี นั่นคือ แดง เขียว น้ำเงิน สีอื่นๆจะเกิดจากการผสมระหว่างแม่สีสามสีนี้ แต่ในกรณีที่เราต้องการควบคุมความเข้มหรือจางของสี เราต้องกำหนดไว้ที่ค่า Alpha นั่นเอง ยกตัวอย่างเช่น จุดจุดหนึ่งเก็บค่าสีเรียงตามลำดับดังนี้ (r, g, b, a) หากเราต้องการแสดงสีขาว ก็ต้องเก็บค่าเป็น (1,1,1,1) หากต้องการให้โปร่งใสก็ต้องเก็บค่าเป็น (0,0,0,0) เป็นต้น ถ้าเป็นในกรณีที่เราเก็บค่าสีแบบ Premultiplied Alpha ค่าสีจะถูกเก็บแบบ (ar, ag, ab, a) ดังนั้นในกรณีที่เราต้องการแสดงผลเป็นสีขาวโปร่ง (50% White) การเก็บค่าสีแบบ Alpha จะให้ผลเป็นสีเทาเพราะเก็บค่า Alpha ไว้ที่เดียว ในขณะที่การเก็บแบบ Premultiplied Alpha จะให้ค่าสีขาว 50% ได้เพราะเก็บในลักษณะแยกช่องกัน (0.5,0.5,0.5,0.5) จึงสามารถแสดงผลได้ถูกต้องกว่านั่นเอง

จากนั้นเราก็จะทำการวาดพื้นที่สี่เหลี่ยมตามความกว้าง ความสูงที่เรากำหนดลงไปแล้วระบายด้วย HatchBruch หรือลวดลายที่กำหนด ซึ่งในตัวอย่างนี้ก็คือ HatchBrush.SmallGrid หรือรูปสี่เหลี่ยมเล็กนั่นเอง หากเราเปลี่ยนคุณสมบัตินี้ก็จะทำให้เราได้ลวดลายของพื้นหลัง CAPTCHA ที่แตกต่างออกไป ตัวอย่างลวดลายที่น่าสนใจก็มี เช่น DottedGrid, SmallConfetti เป็นต้น เราสามารถดูตัวอย่างของ HatchStyle แบบต่างๆได้ที่ http://www.drewnoakes.com/snippets/GdiColorChart/

รูปที่ 2: ตัวอย่างแบบต่างๆของ HatchStyle

ขั้นต่อไปเราจะหาขนาดที่เหมาะสมของแบบตัวอักษรที่เราจะใช้ โดยการกำหนดให้ขนาดเริ่มแรกเท่ากับความสูงของสี่เหลี่ยมที่เราสร้างขึ้นเสียก่อน จากนั้นจึงวนลูปเพื่อเปรียบเทียบความกว้างของคำกับความกว้างของสี่เหลี่ยมด้วยฟังก์ชั่น MeasureString() ถ้ายังกว้างกว่าก็จะลดขนาดของตัวอักษรลงมาเรื่อยๆ เมื่อได้ขนาดที่เหมาะสมแล้วจึงจัดวางให้อยู่กลางภาพโดยกำหนดให้ StringFormat.Alignment และ StringFormat.LineAlignment เท่ากับ StringAlignment.Center

ต่อมาสร้าง Path ของฟ้อนท์ขึ้นตามข้อความที่ได้ จากนั้นบิดด้วยเมธอด Warp เพื่อให้ชุดตัวอักษรบิดไปจากแนวระนาบ จากนั้นจึงวาดตัวอักษรลงไปบนสี่เหลี่ยมที่เราสร้างขึ้นในตอนแรก ระบายลวดลายลงบนตัวอักษรเพื่อทำให้โปรแกรมสแปมเมอร์อ่านได้ยากขึ้น

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

ขั้นตอนสุดท้ายคือการ Dispose ออปเจ็คต์ที่ไม่ใช้แล้วเพื่อคืน Resource กลับสู่ระบบ และนำ Bitmap ที่ได้ไปเก็บไว้ใน Image Property ของคลาสเป็นอันจบกระบวนการ

รูปที่ 3: ผลสำเร็จของรูปจากคลาส CaptchaImage

บทสรุป

CAPTCHA เป็นวิธีการง่ายๆที่จะใช้ป้องกันการสแปมข้อความที่ไม่พึงประสงค์ และยังได้รับการใช้งานอย่างเป็นสากล วิธีการง่ายๆที่ใช้ในการสร้าง CAPTCHA ด้วย ASP.Net คือการสร้างและเรียกใช้ไฟล์ .aspx ที่คืนค่ากลับมาเป็นรูปภาพ แล้วนำข้อความที่ได้จากรูปภาพนั้นมาเปรียบเทียบกับสิ่งที่ผู้ใช้ป้อนเข้ามา แล้วจึงอนุญาตให้ผู้ใช้ทำงานในขั้นตอนอื่นต่อไป อย่างไรก็ดียังมีวิธีการอื่นๆอีกมากที่ใช้ป้องกันการโพสต์ข้อความขยะเหล่านี้ เช่น การกรองคำ (Filtering) หรือ ReverseDOS ซึ่งเป็นการดักจับพฤติกรรมการโพสต์ข้อความที่ผิดปรกติเป็นต้น แม้จะมีระบบการป้องกันที่ดีสักเพียงใด สิ่งที่นักพัฒนาและเจ้าของเว็บไซต์ปรารถนาเป็นอย่างยิ่งนั่นก็คือ การไม่พบข้อความขยะในระบบเลย ถึงแม้จะไม่มีการป้องกันใดๆนั่นเอง

ป้องกันการโพสต์ข้อความไม่พึงประสงค์ด้วย CAPTCHA ตอนที่ 1

Suwitcha Chandhorn — Tue, 18 Mar 2008 17:08:04 GMT

นักพัฒนาท่านใดที่เคยพัฒนาโปรแกรมประเภทฟอรัม คงไม่พ้นที่จะเคยปวดหัวเมื่อมีผู้ไม่ประสงค์ดีมาโพสต์ข้อความขายของ, Work at Home หรือข้อความไม่พึงประสงค์อื่นๆ ลำพังถ้าเป็นคนมาโพสต์เอง ก็คงจะพอตามลบไหว แต่บางครั้งการโพสต์เกิดจากสคริปต์ที่ผู้ไม่ประสงค์ดีสร้างขึ้น (หรือได้มาใช้งาน) ทำให้เกิดข้อความกระจายตามกระทู้เต็มไปหมด อย่ากระนั้นเลย เรามาป้องกันไม่ให้สคริปต์เหล่านั้นทำได้สมบูรณ์กันดีกว่า

วิธีป้องกันการโพสต์ด้วยสคริปต์นั้นมีด้วยกันหลายวิธี แต่วิธีที่จะกล่าวถึงต่อไปนี้ เราเรียกกันว่า “Captcha” หรือ “แคปชา” ซึ่งย่อมาจาก “Completely Automated Public Turing test to tells Computers and Humans Apart” ซึ่งมหาวิทยาคาเนกี เมลลอน (Carnegie Mellon University) เป็นผู้ตั้งขึ้น เป็นวิธีการทดสอบในการแยกคนออกจากคอมพิวเตอร์ด้วยวิธีการที่คนเราจะเข้าใจได้ง่ายๆ โดยทั่วไปก็คือการสร้างรูปของชุดตัวอักษรหรือตัวเลขขึ้นมาสักรูปหนึ่ง เพื่อให้คนสามารถป้อนข้อมูลจากรูปที่เห็นกลับเข้ามาในระบบได้ ในขณะที่คอมพิวเตอร์จะไม่สามารถตีความหมายออก

รูปที่ 1: ตัวอย่างการใช้งาน Captcha

ในการสร้าง Captcha แบบง่ายๆขึ้นใช้งานนั้น เราอาจทำได้โดยการสร้างคลาสสำหรับใช้ Generate Captcha ที่ต้องการขึ้นมาใช้งาน เมื่อต้องการใช้ก็เรียกใช้งานโดยผ่านข้อความที่สุ่มขึ้นมาเข้าไปเพื่อให้ได้รูปภาพกลับคืนมาแสดง นอกจากนี้เราต้องเก็บข้อความที่สร้างขึ้นไว้ใน Session เพื่อนำมาเทียบกับสิ่งที่ผู้ใช้ป้อนในภายหลัง ถ้าหากป้อนข้อความกลับมาได้ถูกต้อง จึงอนุญาตให้ทำงานในลำดับถัดไป

สร้าง CaptchaImage คลาสกันก่อน

หัวใจของการสร้าง Captcha ก็คือคลาส CaptchaImage ซึ่งจะทำการ Generate ภาพให้เราตามข้อความหรือชุดตัวเลขที่เราส่งเข้าไป คลาสนี้มีเมธอดที่ซับซ้อนเพียงเมธอดเดียวเท่านั้นคือ GenerateGraphic() ซึ่งทำหน้าที่ในการสร้างและปรับแต่งเอฟเฟคต่างๆให้ภาพข้อความ

รายการที่ 1: โค้ดของ CaptchaImage คลาส

' อย่าลืม Imports เนมสเปซต่างๆที่จะใช้งาน

Imports System.Drawing

Imports System.Drawing.Drawing2D

Imports System.Drawing.Graphics

Imports System.Drawing.Imaging

Imports System.Random

Public Class CaptchaImage

Private _width As Integer

Private _height As Integer

Private _familyName As FontFamily

Private _text As String

' เนื่องจากต้องคืนค่าเป็นรูปภาพจึงต้องกำหนดให้มี Property Image

' เพื่อให้สามารถนำไปเรียกใช้งานได้

Private _image As Bitmap

Public ReadOnly Property Image() As Bitmap

Get

Return _image

End Get

End Property

Private Sub GenerateGraphic()

' สร้างภาพแบบ Bitmap ขึ้นมาใหม่เพื่อใช้เป็นภาพพื้นฐานของ Captcha ของเรา

Dim bitmap As New Bitmap(_width, _height, PixelFormat.Format32bppPArgb)

' สร้าง Object กราฟิกขึ้นมาเพื่อใช้วาดสิ่งต่างๆ เช่น ชุดอักษรหรือเอฟเฟคลงบนภาพ

Dim g As Graphics = Graphics.FromImage(bitmap)

g.SmoothingMode = Drawing2D.SmoothingMode.AntiAlias

Dim rect As New Rectangle(0, 0, _width, _height)

' เริ่มจากการลงสีพื้นหลัง เราใช้ HatchBrush ในการกำหนด Pattern ในการวาด เช่น
' ในตัวอย่างคือ การวาด Pattern เป็นตารางโดยใช้สีเทาอ่อนบนพื้นสีขาว

Dim hatchBrush As New HatchBrush(HatchStyle.SmallGrid, _

Color.LightGray, Color.White)

g.FillRectangle(hatchBrush, rect)

' ต่อมาคือการสร้างฟอนท์และปรับขนาดของฟอนท์

Dim size As SizeF

Dim fontSize As Single = rect.Height + 1

Dim font As Font

fontSize = fontSize - 1

font = New Font(_familyName, fontSize, FontStyle.Bold)

size = g.MeasureString(_text, font)

Loop While (size.Width > rect.Width)

' ปรับรูปแบบของการจัดวางชุดอักษร

Dim format As New StringFormat()

format.Alignment = StringAlignment.Center

format.LineAlignment = StringAlignment.Center

' สร้างเส้นพาร์ทจากชุดอักษร และบิดเพื่อให้ชุดอักษรอ่านได้ยากขึ้น

Dim path As New GraphicsPath()

path.AddString(_text, font.FontFamily, CInt(font.Style), font.Size, rect, format)

Dim v As Single = 4.0F

Dim r As New Random

Dim points As PointF() = { _

New PointF(r.Next(rect.Width) / v, r.Next(rect.Height) / v), _

New PointF(rect.Width - r.Next(rect.Width) / v, r.Next(rect.Height) / v), _

New PointF(r.Next(rect.Width) / v, rect.Height - r.Next(rect.Height) / v), _

New PointF(rect.Width - r.Next(rect.Width) / v, rect.Height - r.Next _

(rect.Height) / v) _

}

Dim matrix As New Matrix()

matrix.Translate(0.0F, 0.0F)

path.Warp(points, rect, matrix, WarpMode.Perspective, 0.0F)

' จากนั้นจึงวาดชุดอักษรลงบนภาพตามพาร์ทที่ได้ โดยใช้ Pattern

' ช่วยให้ชุดอักษรมี Texture ที่ทำให้อ่านยากขึ้น

hatchBrush = New HatchBrush(HatchStyle.LargeConfetti, Color.Gray, Color.DarkGray)

g.FillPath(hatchBrush, path)

' เติมจุดบนภาพแบบสุ่มโดยทั่ว เพื่อเพิ่มความยากในการอ่าน

' อาจเปลี่ยนเป็นแบบอื่นหรือไม่ใช้ได้ตามต้องการ

Dim m As Integer = Math.Max(rect.Width, rect.Height)

For i As Integer = 0 To CInt(rect.Width * rect.Height / 30.0F)

Dim x As Integer = r.Next(rect.Width)

Dim y As Integer = r.Next(rect.Height)

Dim w As Integer = r.Next(m / 50)

Dim h As Integer = r.Next(m / 50)

g.FillEllipse(hatchBrush, x, y, w, h)

' เมื่อทุกอย่างสำเร็จเรียบร้อย ให้ล้าง Object ที่ไม่ใช้ออกจากหน่วยความจำ

font.Dispose()

hatchBrush.Dispose()

g.Dispose()

' หลังจากนั้นจึงนำค่ารูปภาพที่ได้ไปใส่ไว้ใน Property เพื่อรอการใช้งานต่อไป

_image = bitmap

End Sub

' กำหนดรูปแบบของฟอนท์ที่จะใช้งาน ถ้าไม่มีฟอนท์แบบนั้นในเครื่อง

' ก็ให้ใช้ฟอนท์ปรกติของเครื่องแทน

Private Sub SetFamilyName(ByVal familyName As String)

Try

Dim font As New Font(familyName, 12.0F)

_familyName = font.FontFamily

font.Dispose()

Catch ex As Exception

_familyName = FontFamily.GenericSansSerif

End Try

End Sub

' Constructor ของคลาสทำหน้าที่กำหนดค่าต่างๆที่จำเป็น

' และสร้างกราฟิกไว้ใน Property Image เพื่อให้โปรแกรมอื่นสามารถเรียกใช้งานได้

Sub New(ByVal text As String, ByVal width As Integer, _

ByVal height As Integer, ByVal familyName As String)

_text = text

_width = width

_height = height

Me.SetFamilyName(familyName)

Me.GenerateGraphic()

End Sub

Public Sub Dispose()

GC.SuppressFinalize(Me)

Me.Dispose(True)

End Sub

Protected Sub Dispose(ByVal disposing As Boolean)

If disposing Then

_image.Dispose()

End If

End Sub

End Class

ในการทำงานของคลาสโดยสรุป เราจะเริ่มจากการส่งค่าตัวแปรที่จำเป็นเช่น ข้อความที่ต้องการจะให้ Generate, ความกว้าง, ความสูงของภาพ และชื่อของรูปแบบฟอนท์ที่ต้องการใช้ เข้าไปในคลาสเสียก่อน ต่อจากนั้นจึงทำการเรียกเมธอด GenerateGraphic() เพื่อสร้างภาพขึ้นมาก่อนจะนำภาพไปเก็บไว้ใน Property Image เพื่อให้โปรแกรมอื่นๆสามารถเรียกใช้งานได้ภายหลัง

ในตอนต่อไป...

เนื่องจากโค้ดที่ใช้ในการสร้าง CaptchaImage คลาสค่อนข้างจะยาว ดังนั้นจึงจะขออธิบายแต่เฉพาะในจุดสำคัญๆเช่นการเรียกใช้เมธอดต่างๆของ System.Drawing เพื่อปรับแต่งเอฟเฟค และแสดงวิธีการเรียกใช้งาน CaptchaImage คลาสใน ASP.Net ต่อในตอนหน้า อย่างไรก็ดีท่านผู้อ่านสามารถศึกษาวิธีการทำงานของคลาสอย่างคร่าวๆได้ก่อนจากหมายเหตุที่เขียนไว้เหนือโค้ดแต่ละส่วนครับ

แหล่งอ้างอิง:

Code Project - CAPTCHA Image by Brian Jar

แนะนำ Captcha ใน Wikipedia

แนะนำ Turing Test

ทำความรู้จัก Microsoft Expression Design

Suwitcha Chandhorn — Wed, 12 Mar 2008 06:30:59 GMT

หนึ่งในแอพพลิเคชั่นที่มาพร้อมกับ Microsoft Expression Studio ก็คือแอพพลิเคชั่นที่มีชื่อว่า Microsoft Expression Design ซึ่งทำหน้าที่ในการออกแบบและตกแต่งกราฟิกที่จำเป็นต้องใช้ในการสร้างแอพพลิเคชั่นด้วย XAML ต่อไป ไม่ว่าจะเป็นแอพพลิเคชั่นบนเดสก์ท๊อปเช่น Windows Presentation Foundation (WPF) หรือประเภท Rich Internet Application (RIA) เช่น Silverlight เป็นต้น

ระบบการแสดงผลที่ใช้ในปัจจุบัน และ XAML

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

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

XAML มักเก็บภาพในลักษณะสองมิติ (2D) ไว้ในกราฟิกแบบเวกเตอร์ ดังนั้นอินเทอร์เฟสที่สร้างด้วย XAML จึงเป็นอินเทอร์เฟสแบบ Scalable กล่าวคือสามารถย่อขยายขนาดได้ตามขนาดของวินโดว์สหรือคอนเทนเนอร์ที่ห่อหุ้มมันอยู่โดยไม่สูญเสียความละเอียดไป จึงเหมาะกับการสร้างแอพพลิเคชั่นสมัยใหม่ที่ต้องแสดงผลในขนาดหน้าจอของอุปกรณ์ที่มีขนาดต่างๆกันไปนั่นเอง

Expression Design กับการพัฒนาแอพพลิเคชั่นยุคใหม่

ไมโครซอฟท์พัฒนา Expression Design ขึ้นเพื่อให้เป็นเครื่องมือ ที่ใช้ในการออกแบบกราฟิกและภาพประกอบ ที่เหมาะกับอินเทอร์เฟสของแอพพลิเคชั่นทั้งในแบบสำหรับเว็บและเดสก์ท๊อป มันจะมีความสามารถในการสร้างกราฟิกชนิดเวกเตอร์ในระดับที่ละเอียดซับซ้อนได้อย่างรวดเร็ว นอกจากนี้ยังสามารถ Export ไฟล์ชิ้นงานไปยังแอพพลิเคชั่นในกลุ่มเดียวกันอื่นๆ เช่น Expression Blend เพื่อทำงานต่อได้ทั้งในรูปแบบของ XAML และไฟล์กราฟิกแบบบิตแมพ เราสามารถสร้างสรรค์กราฟิกให้สวยงามได้ด้วยเครื่องมือชนิดต่างๆที่เตรียมไว้ให้อย่างเพียบพร้อมสำหรับนักออกแบบ ไม่ว่าจะเป็น Pen Tools, Shape Tools หรือเครื่องมือในการจัดการอื่นตามมาตรฐาน เรายังสามารถเพิ่มสีสันของงานได้ด้วยการเพิ่ม Effect ให้กับส่วนต่างๆของภาพ การปรับแต่ง Workspace ก็ทำได้ง่าย ทำให้นักออกแบบที่คุ้นเคยกับการใช้แอพพลิเคชั่นสำหรับการออกแบบอื่น สามารถเรียนรู้การใช้งานได้โดยใช้เวลาไม่นาน

ส่วนประกอบต่างๆในพื้นที่ทำงาน

พื้นที่ทำงานของนักออกแบบใน Expression Design ประกอบด้วย 5 ส่วนหลักๆ คือ Menu, Toolbox, Art Board, Property Inspector และ Action Bar คำสั่งต่างๆจะถูกเรียงไว้อย่างเป็นระเบียบในส่วนของ Menu เหมือนกับวินโดว์สทั่วไป เพื่อให้เรียนรู้ได้ง่าย เครื่องมือที่ใช้ในการวาดและปรับรูปร่างหน้าตาของวัตถุต่างๆจะอยู่ในส่วนของ Toolbox ส่วนรูปวัตถุที่เรากำลังทำงานจะอยู่ในพื้นที่ตรงกลางในส่วนที่เรียกว่า Art Board เมื่อเรากดเลือกเครื่องมือชิ้นใดชิ้นหนึ่ง คุณสมบัติของเครื่องมือที่เราเลือกจะแสดงขึ้นมาที่ส่วนของ Property Inspector คุณสมบัติเหล่านี้จะเปลี่ยนไปได้เรื่อยๆตามแต่เครื่องมือที่เลือกใช้นั่นเอง

รูปที่ 1 พื้นที่ทำงานของ Expression Design

โปรแกรมจัดการกราฟิกมาตรฐานทั่วไปมักจะอนุญาตให้เราสามารถแบ่งเก็บวัตถุต่างๆที่ประกอบเป็นชิ้นงานของเราแยกกันไว้ได้เป็นชั้นๆ หรือที่เรียกกันว่าเลเยอร์ สำหรับ Expression Design ก็เช่นกัน เราสามารถแยกเก็บส่วนต่างๆของชิ้นงานไว้ในเลเยอร์ที่ต่างกันได้ ในแต่ละเลเยอร์เรายังสามารถแยกเก็บวัตถุต่างๆไว้เป็นกลุ่มได้อีกด้วย การจัดเก็บจึงเป็นระเบียบและง่ายต่อการโยกย้ายวัตถุไปมาระหว่างเลเยอร์ต่างๆ อีกทั้งเรายังสามารถกำหนดให้มีการป้องกันการแก้ไขวัตถุต่างๆในชิ้นงานได้จากการล๊อควัตถุต่างๆที่อยู่ภายในแต่ละเลเยอร์ และหากเราไม่ต้องการใช้งานเลเยอร์นั้นๆ เราก็สามารถซ่อนมันไว้ได้อย่างง่ายดายอีกด้วย

และถ้าหากเราเลือกที่วัตถุชิ้นใดชิ้นหนึ่งใน Art Board แถบพื้นที่ที่เรียกว่า Action Bar จะปรากฎขึ้นที่ส่วนล่างของหน้าจอ Action Bar ทำหน้าที่เป็นเหมือนทางลัดเพื่อช่วยให้เราจัดการตำแหน่งหรือรูปทรงของชิ้นงานได้ง่ายและแม่นยำขึ้น ยกตัวอย่างเช่น เมื่อเราเลือกวัตถุหลายๆชิ้นพร้อมกันในชิ้นงานของเรา เราอาจเลือกตำแหน่งของมันจากพิกัด X, Y บน Art Board, กำหนดความกว้างและความสูงของวัตถุ, องศาที่ใช้ในการหมุน (Rotation), ลักษณะการบิด (Skewing) หรือแม้แต่การจัดเรียงวัตถุหลายๆชิ้นด้วยวิธีต่างๆ เช่น Align, Distribute และ Stack เป็นต้น

รูปที่ 2 ตัวเลือกในการปรับแต่งวัตถุต่างๆใน Action Bar

เมื่อทำความรู้จักส่วนประกอบต่างๆบนพื้นที่ทำงานของ Expression Design กันไปแล้ว ต่อไปเรามาทำความรู้จักกับเครื่องไม้เครื่องมือต่างๆและคุณสมบัติในการทำงานของมันกันบ้างดีกว่า

เครื่องมือต่างๆใน Expression Design

เมื่อลองสำรวจเข้าไปใน Toolbox ของ Expression Design เราจะพบเครื่องมือที่ใช้ในการเลือก, สร้าง, แก้ไขพาธ (Path) การหมุนหรือย่อขยายวัตถุ รวมถึงเครื่องมือที่ใช้ในการนำไปยังจุดต่างๆของชิ้นงาน เช่น แว่นขยายและมือ เป็นต้น เครื่องมือเหล่านี้อาจเป็นเครื่องมือเดี่ยวๆ หรือรวมกันอยู่เป็นกลุ่มได้โดยมีสัญลักษณ์สามเหลี่ยมเล็กๆตรงมุมล่างซ้ายของไอคอนเป็นที่สังเกต หากเรากดเมาส์ค้างไว้ที่บนไอคอนที่มีสัญลักษณ์นี้ เครื่องมือต่างๆที่อยู่ภายในก็จะปรากฏออกมาให้เลือกใช้งาน

รูปที่ 3 เครื่องมือต่างๆใน Toolbox

เครื่องมือกลุ่มแรกที่เราเห็นใน Toolbox คือเครื่องมือกลุ่มที่ใช้ไว้เลือกวัตถุต่างๆ ซึ่งประกอบด้วย Selection Tool, Group Selection Tool, Direct Selection Tool และ Lasso Selection Tool เราใช้เครื่องมือเหล่านี้ไว้เลือกวัตถุด้วยวิธีต่างๆกัน Selection Tool จะเป็นเครื่องมือพื้นฐานที่ใช้เลือกวัตถุทั้งชิ้น เพื่อหมุน, ย่อ, ขยาย หรือย้ายตำแหน่ง ในขณะที่ Group Selection Tool จะใช้เลือกวัตถุที่อยู่ในกลุ่ม ส่วน Direct Selection Tool และ Lasso Selection Tool จะใช้เลือกเฉพาะจุดต่างๆที่ประกอบเป็นพาธหรือรูปทรง

ถัดลงมาเป็นเครื่องมือที่ใช้วาดพาธและรูปทรงต่างๆ เช่น Paintbrush Tool, Pen Tool, Polyline Tool, B-spline Tool, Rectangle Tool, Ellipse Tool, Polygon Tool และ Line Tool เมื่อใช้งานเครื่องมือเหล่านี้จะทำให้เกิดวัตถุที่เป็นพาธหรือรูปทรงต่างๆขึ้นในชิ้นงาน เราสามารถปรับแต่งตำแหน่งและรูปทรงของพาธที่เกิดขึ้นได้ด้วย Direct Selection Tool และ Convert Anchor Point Tool รวมถึงสามารถเพิ่มและลดจุดในพาธได้ด้วย Add Anchor Point Tool และ Delete Anchor Point Tool

เราใช้เครื่องมือ Text Tool ในการใส่ตัวอักษรลงในภาพ เราอาจเลือกป้อนตัวอักษรลงไปบนพื้นที่ว่างหรือกำหนดให้ไหลไปกับพาธโดยการวางบนตำแหน่งต่างๆใน Art Board และยังสามารถปรับแต่งชนิดอักษรและขนาดที่ใช้ ชนิดของเส้นกรอบ สี หรือน้ำหนักของตัวอักษรได้จาก Property Inspector หากต้องการปรับแต่งรูปร่างของตัวอักษรให้ดูมีเอกลักษณ์ยิ่งขึ้น เราก็สามารถแปลงชุดตัวอักษรให้เป็นพาธได้ด้วยคำสั่ง เช่น Convert Object to Path อีกด้วย

เครื่องมืออื่นๆที่ยังไม่ได้กล่าวถึงใน Toolbox เช่น Fill Transform, Gradient Transform, Scissors, Reverse Path, Start Point, Color Dropper, Attribute Dropper, Pan หรือ Zoom ล้วนมีส่วนช่วยให้การทำงานใน Expression Design สะดวกสบายขึ้น เราสามารถใช้ Gradient Transform ในการปรับทิศทางของการไล่เฉดสี และใช้ Attribute Dropper ในการกำหนดแอททริบิวต์ของวัตถุหนึ่งให้เหมือนกับอีกวัตถุหนึ่ง เครื่องมือที่ใช้บ่อย เช่น Pan และ Zoom หรือแม้แต่เครื่องมือพื้นฐานทั่วไปล้วนเรียกมาใช้งานได้ด้วย Keyboard Shortcuts ซึ่งจะแสดงให้เห็นเมื่อเอาเมาส์ไปวางบนไอคอนของเครื่องมือแต่ละชนิด

Bezier Path และ B-spline Path

พาธนั้นเกิดจากการกำหนดจุดมากกว่าหนึ่งจุดขึ้นไปลงใน Art Board พาธที่เกิดขึ้นจากเครื่องมือวาดภาพใน Expression Design แบ่งออกได้เป็นสองชนิด คือ Bezier Path และ B-spline Path โดยทั่วไปเราใช้เครื่องมือ เช่น Direct Selection Tool ในการจัดการพาธทั้งสองแบบนี้ได้เช่นเดียวกัน Bezier Path นั้นเกิดจากการใช้เครื่องมือประเภท Pen Tool, Polyline Tool หรือ Shape Tool ในการสร้าง ส่วน B-spline Path จะเกิดจากการใช้ B-spline Tool เป็นตัวกำหนดจุด ส่วนมากนักออกแบบมักคุ้นเคยกับ Bezier Path มากกว่า B-spline Path เนื่องจากมีการใช้งานอย่างแพร่หลายในกราฟิกแอพพลิเคชั่นทั่วไปอยู่แล้ว ส่วน B-spline Path มักพบใช้งานในกราฟิกแอพพลิเคชั่นประเภทสามมิติมากกว่า อย่างไรก็ดีมีนักออกแบบหลายท่านที่พบว่าการลากเส้นด้วย B-spline Tool นั้นถนัดมือมากกว่า เนื่องจากควบคุมส่วนโค้งต่างๆได้ง่ายกว่า ซึ่งเรื่องนี้ก็คงต้องขึ้นอยู่กับความถนัดของแต่ละคน

รูปที่ 4 Bezier Path และ B-spline Path

Bezier Path จะประกอบด้วยจุด (Points / Nodes) และแขนที่กางออกไปจากจุดที่เราเรียกกันว่า Handle เราใช้ Direct Selection Tool และ Convert Anchor Point Tool ในการควบคุมส่วนโค้งของพาธ และกำหนดการหักมุมของพาธ ณ จุดที่ต้องการ หากเราต้องการให้พาธโค้งไปทางใด ให้ลาก Handle ไปในทางตรงกันข้าม ยิ่งแกนของ Handle มีความยาวมาก เส้นพาธก็จะยิ่งโค้งมากขึ้นตามไปด้วย ในทางกลับกัน B-spline Path จะประกอบขึ้นจากจุดต่างๆซึ่งมักอยู่ในตำแหน่งยอดของส่วนโค้ง หากต้องการให้โค้งมากขึ้น ก็ต้องใช้ Direct Selection Tool ในการย้ายตำแหน่งของจุดเพื่อให้เกิดความโค้งหรือเป็นรูปทรงตามต้องการ

ภาพแบบ Bitmap และ Pixel Preview

เนื่องจาก Expression Design เน้นการตกแต่งกราฟิกในแบบเวกเตอร์เป็นหลัก ดังนั้นก่อนที่จะนำชิ้นงานไปใช้ในแอพพลิเคชั่นอื่น อาจจะต้องทำการส่งออกโดยแปลงกราฟิกให้กลายเป็นแบบบิตแมพเสียก่อน ซึ่งบางครั้งอาจต้องทำการปรับแต่งตัวเลือกที่ใช้ในการส่งออกเพื่อให้เหมาะสมกับคุณภาพของกราฟิกที่ต้องการ ในการทำงานจริงหากต้องทำการส่งออกแล้วเปิดไฟล์กราฟิกที่ได้ขึ้นมาตรวจสอบทุกครั้งอาจเป็นการเสียเวลามาก Expression Design จึงมาพร้อมกับฟีเจอร์ที่เรียกว่า Pixel Preview ที่จะช่วยให้เราสามารถตรวจสอบการแสดงผลกราฟิกของเราในแบบบิตแมพได้ ก่อนที่เราจะทำการส่งออกจริง Pixel Preview จะเสนอตัวเลือกในการส่งออกก่อนจะแสดงภาพตัวอย่างที่มีคุณภาพตามแบบตัวเลือกที่เราเลือกใน Art Board แทนที่ภาพต้นฉบับของเรา ทั้งนี้เพื่อให้เราได้ตรวจสอบและปรับค่าต่างๆให้เหมาะสมก่อนการส่งออกจริงนั่นเอง เราสามารถปรับเปลี่ยนค่าเหล่านี้กี่ครั้งก็ได้ตามความต้องการ โดยที่จะไม่มีผลกระทบใดๆกับภาพต้นฉบับของเราเลย

รูปที่ 5 การใช้งาน Pixel Preview

ตกแต่งกราฟิกให้เก๋ด้วย Live Effects

เราสามารถกำหนด Effects หรือที่เรียกอีกอย่างว่า Filters ให้กับกราฟิกประเภทต่างๆได้ โดยการเพิ่ม Effect ต่างๆเข้าไปในช่อง Effects ใน Property Inspector ของวัตถุที่เลือก Effects เหล่านี้มีทั้งที่เป็นประเภทที่ใช้งานบ่อย เช่น Drop Shadow และ Gaussian Blur เป็นต้น และประเภทที่เป็นเชิงศิลป์ เช่น Film Grain, Bas Relief, Graphic Pen และ Note Paper เป็นต้น

รูปที่ 6 ปุ่มที่เกิดจากการใช้งาน Live Effects

Effects ต่างๆที่กำหนดให้กับวัตถุใน Expression Design จะไม่ทำการเปลี่ยนแปลงต้นแบบ ดังนั้นมันจึงเรียกว่า Live Effects ซึ่งหมายความว่านักออกแบบสามารถที่จะปรับค่าของ Effect, ซ่อนมัน หรือเอามันออกได้ตลอดเวลา นักออกแบบยังสามารถจัดเรียงลำดับของการกำหนดค่า Effects และสลับลำดับของมันเพื่อให้เกิดการแสดงผลที่แตกต่างออกไปได้เช่นกัน

ส่งชิ้นงานออกไปใช้ในรูปแบบ XAML

หลังจากสร้างหรือปรับปรุงกราฟิกเสร็จสิ้นแล้ว เราอาจเลือกส่งออกชิ้นงานของเราเพื่อไปใช้งานต่อในแอพพลิเคชั่นอื่นๆได้หลายรูปแบบ หากต้องการนำไปใช้ประกอบในแอพพลิเคชั่นที่สร้างด้วย Windows Presentation Foundation (WPF) หรือ Silverlight ก็สามารถทำได้โดยการเลือก Export จากเมนู File แล้วจึงเลือก Xaml เป็นชนิดของไฟล์ที่จะส่งออก จากนั้นเราจะสามารถเลือกชนิดของการส่งออกได้ว่าจะเก็บภาพเป็นแบบ Canvas, Resource Dictionary หรือ Silverlight อีกทั้งเรายังสามารถเลือกได้ด้วยว่าจะแปลง Live Effects ต่างๆให้เป็นบิตแมพด้วยหรือไม่ก่อนจะเริ่มต้นการส่งออก ภาพที่ส่งออกจะถูกแปลงให้เป็นโค้ด Xaml ซึ่งจะแสดงตัวอย่างให้ดูหากเรากดที่แท็ป Xaml ข้างหน้าต่างพรีวิว จากนั้นเราจึงเอาไฟล์ Xaml ที่ได้ไปเปิดใช้งานในแอพพลิเคชั่นอื่นๆ เช่น Expression Blend ต่อไป

รูปที่ 7 หลากหลายตัวเลือกในการส่งออกแบบ Xaml

บทสรุป

Expression Design เป็นแอพพลิเคชั่นในชุด Microsoft Expression Studio ที่ใช้ในการจัดการกราฟิกสำหรับการสร้างแอพพลิเคชั่นทั้งในแบบเวกเตอร์และบิตแมพ ด้วยเครื่องมือที่เพียบพร้อมทำให้มันเป็นแอพพลิเคชั่นที่ใช้งานง่าย และจะช่วยประหยัดเวลาให้นักออกแบบ เมื่อปรับแต่งกราฟิกต่างๆเสร็จก็สามารถส่งออกไปในรูปแบบของไฟล์ Xaml ซึ่งเป็นรูปแบบมาตรฐานที่จะนำไปใช้ได้ทันทีในแอพพลิเคชั่นแวดล้อมอื่นๆ เช่น Expression Blend เป็นต้น ด้วยความสามารถอันโดดเด่นนี้ทำให้ Expression Design เป็นแอพพลิเคชั่นหนึ่งที่น่าติดตั้งไว้ใช้งาน หากคุณเป็นนักออกแบบหรือนักพัฒนาคนหนึ่งซึ่งต้องการผลิตชิ้นงานกราฟิกดีๆสำหรับ WPF หรือ Silverlight แอพพลิเคชั่นของคุณ

แหล่งข้อมูลเพิ่มเติม

http://www.microsoft.com/Expression/products/overview.aspx?key=design
http://en.wikipedia.org/wiki/Raster_graphics
http://en.wikipedia.org/wiki/Vector_graphics

สวัสดีชาวโลก

Suwitcha Chandhorn — Wed, 12 Mar 2008 06:07:43 GMT

ผมได้รับโอกาสจาก CoreDeveloper.net ให้มาร่วมแบ่งปันความรู้เกี่ยวกับการใช้งาน ASP.Net, VB.Net, Expression Studio และ Silverlight ในเว็บแห่งนี้ รู้สึกยินดีมากครับ คงจะมีโอกาสได้เสนอบทความดีๆให้ทุกท่านเป็นระยะๆนะครับ

meekob

พัฒนา Silverlight Project ด้วย MVVM

มาดูโจทย์ของเรากันเลยดีกว่า

เริ่มจาก Model กันก่อน

หน้าที่ของ ViewModel

ส่วนติดต่อผู้ใช้ใน View

การบันทึกข้อมูลที่เปลี่ยนแปลง

บทสรุป

รู้จักกับ Silverlight 2.0

RIA คืออะไร?

Silverlight 2 คืออะไร?

เครื่องมือที่ใช้ในการพัฒนา

Hello Silverlight, Hi twitter

บทสรุป

Visual Studio 2008 SP1 และ Silverlight Tools Beta 2 สำหรับ Visual Studio 2008 ออกแล้ว

MVP Hall of Fame Announced!

Minimize to Tray ด้วย VB.Net

การรักษาความปลอดภัยใน ASP.Net 2.0 (1)

ป้องกันการโพสต์ข้อความไม่พึงประสงค์ด้วย CAPTCHA ตอนที่ 2

เรียก CAPTCHA มาแสดงผล

สร้างฟอร์มสำหรับแสดงและเทียบข้อความ

สุ่มข้อความใน Code Behind

ปรับแต่งรูปแบบการแสดงผล

บทสรุป

ป้องกันการโพสต์ข้อความไม่พึงประสงค์ด้วย CAPTCHA ตอนที่ 1

สร้าง CaptchaImage คลาสกันก่อน

ในตอนต่อไป...

แหล่งอ้างอิง:

ทำความรู้จัก Microsoft Expression Design

ระบบการแสดงผลที่ใช้ในปัจจุบัน และ XAML

Expression Design กับการพัฒนาแอพพลิเคชั่นยุคใหม่

ส่วนประกอบต่างๆในพื้นที่ทำงาน

เครื่องมือต่างๆใน Expression Design

Bezier Path และ B-spline Path

ภาพแบบ Bitmap และ Pixel Preview

ตกแต่งกราฟิกให้เก๋ด้วย Live Effects

ส่งชิ้นงานออกไปใช้ในรูปแบบ XAML

บทสรุป

แหล่งข้อมูลเพิ่มเติม

http://www.microsoft.com/Expression/products/overview.aspx?key=design http://en.wikipedia.org/wiki/Raster_graphics http://en.wikipedia.org/wiki/Vector_graphics

สวัสดีชาวโลก

http://www.microsoft.com/Expression/products/overview.aspx?key=design
http://en.wikipedia.org/wiki/Raster_graphics
http://en.wikipedia.org/wiki/Vector_graphics