meekob

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

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

ความหลากหลายในการใช้งานนี้มาพร้อมกับความสามารถของเบราเซอร์รุ่นใหม่ๆ ที่สนับสนุนเทคโนโลยีที่เราเรียกว่า 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 ข้อมูล

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

1. เปิด VWD ขึ้นมา จากนั้นเลือกเมนู File > New Project… จากนั้นเลือก Visual Basic > Silverlight จาก Project Types และเลือก Silverlight Application จาก Templates แล้วตั้งชื่อ Solution ตามต้องการ (หากต้องการพัฒนาด้วย C# ให้เลือก Visual C# > Silverlight จาก Project Types แทน) จากนั้นกด OK เพื่อสร้าง Solution ใหม่
   
    
   
2. เนื่องจาก 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">         <Grid x:Name="LayoutRoot" Background="White">         <TextBlock>Hello, World</TextBlock>     </Grid> </UserControl>

   
   
   
   
3. จากนั้นกด 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 ที่เราต้องการเข้าไป
   
   
   
4. เนื่องจากเราจะทำการออกแบบหน้าจอ Twitter Reader ของเราใหม่ด้วย Microsoft Expression Blend 2 เราจึงต้องเอาโค้ดที่เราใช้ทดสอบการทำงานก่อนหน้านี้ออกก่อน โดยให้เราทำการลบโค้ด <TextBlock>Hello, World</TextBlock> ที่เพิ่มเติมไปในขั้นตอนก่อนหน้านี้ออกไป จากนั้น Save โปรเจ็ค แล้วจึงคลิ๊กขวาบนไฟล์ Page.xaml ใน Solution Explorer แล้วเลือก Open in Expression Blend…
   
5. Blend จะแสดงหน้าต่าง Security Warning เพื่อให้เราแสดงความมั่นใจว่าเราต้องการจะเปิดโซลูชั่นนี้ด้วย Blend เพื่อแก้ไข ให้เราตอบ Yes เพื่อไปยังหน้าจอหลักของ Blend
   
6. เมื่อ 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 ตามลำดับ
   
   
   
7. เมื่อเราสร้างโปรเจ็คใหม่ 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 ตามลำดับ
   
   
   
8. เริ่มจาก TextBlock กันก่อน ตรวจดูให้แน่ใจว่า LayoutRoot ยังถูกเลือกอยู่ จากนั้นไปที่ Tool Box แล้วดับเบิ้ลคลิ๊กที่ปุ่ม TextBlock เพื่อเพิ่มคอนโทรลเข้าไปใน StackPanel จะสังเกตในหน้าต่าง Objects and Timeline ได้ว่ามีคอนโทรล [TextBlock] เพิ่มเข้าไปใต้ LayoutRoot แล้วจึงกดเพื่อเลือก TextBlock ที่สร้างขึ้นใหม่ จากนั้นไปที่แท็บ Properties อีกครั้ง แล้วเปลี่ยนคุณสมบัติ Text ให้เป็น “Twitter Public Timeline” จากนั้นในชุดคุณสมบัติ Text ให้กดที่แท็บ Paragraph จากนั้นเปลี่ยน Text Alignment ให้เป็น Center ด้วยการเลือกจากดรอปดาวน์ลิสต์ เพื่อจัดให้ตัวอักษรอยู่กึ่งกลาง
   
9. จากนั้นเลือก LayoutRoot ในหน้าต่างย่อย Objects and Timeline อีกครั้ง แล้วไปที่ Tool Box จากนั้นกดปุ่ม Button ค้างไว้ ตัวเลือกใน Tool Box จะขยายออกมาให้เห็นเพิ่มเติม ให้ดับเบิ้ลคลิ๊กที่ ListBox เพื่อเพิ่มคอนโทรลเข้าไปใน StackPanel จากนั้นเลือก [ListBox] ที่เพิ่มขึ้นมาใหม่จากหน้าต่างย่อย Objects and Timeline แล้วเลือกแท็บ Properites แก้ไข Name ให้เป็น TweetList และ Layout > Height ให้เป็น 300
   
10. ตามปรกติตัวเลือกของดรอปดาวน์ลิสต์แต่ละรายการจะแสดงผลจากข้อมูลที่ผูกอยู่รายการละฟิลด์ แต่ในที่นี้เราต้องการให้แต่ละรายการแสดงทั้งเวลาที่ถูกโพสต์และข้อความ จึงต้องทำการแก้ไขการแสดงผลของตัวเลือกแต่ละรายการให้แสดงผลข้อมูลจากฟิลด์ที่เราต้องการเพิ่มเติมได้ โดยเริ่มจากตรวจดูให้แน่ใจว่า TweetList ในหน้าต่างย่อย Objects and Timeline ยังถูกเลือกอยู่ จากนั้นสังเกตที่ด้านบนของ Art Board จะเห็นดรอปดาวน์ลิสต์ชื่อ TweetList เช่นกัน ให้กดที่ดรอปดาวน์ลิสต์ จากนั้นเลือก Edit Other Templates > Edit Generated Items (ItemTemplate) > Create Empty… เพื่อเข้าสู่หน้าจอสำหรับออกแบบการแสดงผลของแต่ละตัวเลือกในดรอปดาวน์ลิสต์
    
11. สังเกตในหน้าต่างย่อย Objects and Timeline จะเห็นว่าค่าของคอนโทรลต่างๆเปลี่ยนไป เช่น จาก UserControl กลายเป็น DataTemplate เป็นต้น นั่นเป็นเพราะเรากำลังทำการออกแบบการแสดงผลเฉพาะจุด ซึ่งในที่นี้ก็คือการออกแบบให้กับตัวเลือกแต่ละรายการของดรอปดาวน์ลิสต์ซึ่งเป็นส่วนที่ย่อยลงไปจากโปรแกรมหลักนั่นเอง แรกเริ่มเราจะเห็น Grid คอนโทรลวางอยู่โดยอัตโนมัติ ให้เราคลิ๊กขวาบน Grid แล้วเปลี่ยนชนิดของมันให้เป็น StackPanel แล้วเพิ่ม TextBlock คอนโทรลเข้าไปภายใน StackPanel นี้ 2 คอนโทรล
    
     
    
12. เพื่อผูกข้อมูลเข้ากับรายการ เราต้องกำหนดฟิลด์ที่จะแสดงผลสำหรับ TextBlock แต่ละคอนโทรล เริ่มจากเลือกที่ TextBlock คอนโทรลบนก่อน จากนั้นไปที่แท็บ Properties แล้วกดที่จุดเล็กๆทางด้านขวาของคุณสมบัติ Text แล้วเลือก Data Binding… จากตัวเลือกที่ขยายออกมา
    
13. เมื่อเข้าสู่หน้าต่างย่อย Create Data Binding ให้เลือกแท็บ Explicit Data Context จากนั้นเลือกที่เช็คบ๊อกซ์ Use a custom path expression แล้วเติมคำว่า DatePosted ลงไป เราจะใช้ฟิลด์นี้ในการแสดงเวลาที่โพสต์ข้อความ จากนั้นกด Finish เพื่อกลับสู่หน้าต่างหลัก
    
    
    
14. ทำเช่นเดียวกันกับ TextBlock คอนโทรลที่อยู่ด้านล่าง โดยกำหนดให้ชื่อฟิลด์เป็น Text แทน DatePosted เราจะใช้ TextBlock นี้แสดงผลข้อความที่ถูกโพสต์ จากนั้นกดปุ่ม Finish เพื่อกลับสู่หน้าต่างหลัก
    
15. กลับสู่หน้าต่างออกแบบอินเทอร์เฟสหลักโดยการกดที่ดรอปดาวน์ลิสต์ TweetList ด้านบนของ Art Board
    
16. เมื่อกลับสู่หน้าต่างออกแบบหลักแล้ว ให้เพิ่มปุ่มสำหรับการอัพเดตข้อความโดยการเลือกที่ LayoutRoot ก่อน จากนั้นดับเบิ้ลคลิ๊กเพื่อเพิ่มปุ่มจาก Tool Box แล้วเปลี่ยนคุณสมบัติ Name ให้เป็น RefreshButton และ Content ให้เป็น “Refresh” เราจะใช้ปุ่มนี้ในการอัพเดตข้อมูลใหม่จาก Public Timeline ของ Twitter ในเวลาที่เราต้องการ
    
    
    
17. เซฟงานทั้งหมดใน Blend จากนั้นกลับไปทำงานด้วย VWD เมื่อเราเรียก VWD ซึ่งเปิดพักไว้กลับมาใช้งาน VWD จะเตือนเราว่ามีการแก้ไขไฟล์เอกสารนอกระบบของ VWD และถามเราว่าจะ Reload เอกสารหรือไม่ ให้เราตอบ Yes เพื่ออัพเดตการแก้ไขเอกสารใน VWD
    
    
    
18. ขั้นตอนต่อไปจะเป็นการเขียนโค้ดเพื่อรองรับการทำงานของ 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

    
    
19. เมื่อได้คลาส 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 ระหว่างที่ดาวน์โหลดแล้ว ก็จะส่งข้อมูลที่ได้ไปยังฟังก์ชั่นที่ใช้แสดงผลข้อมูลอีกทอดหนึ่ง
    
20. เมื่อได้รับผลจากฟังก์ชั่น 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 เข้ามาที่ต้นเอกสารก่อน ก็จะสามารถใช้งานได้ตามปรกติ
    
21. จากนั้นกด F5 เพื่อทดสอบการทำงาน หากแอพพลิเคชั่นของเราทำงานได้ถูกต้อง เราจะพบว่าเมื่อเริ่มใช้งาน จะมีข้อความล่าสุดจาก Twitter Public Timeline มาแสดงในดรอปดาวน์ลิสต์ของเรา เราสามารถทำให้ปุ่ม Refresh อัพเดตข้อมูลได้โดยการเรียกใช้งานฟังก์ชั่น BindTweets() เพิ่มเติมในอีเวนท์ Click ได้เช่นกัน หากการแสดงผลเรียบร้อยดี ก็เป็นอันว่าเสร็จสิ้นขั้นตอนในการทดสอบกระบวนการสร้าง Silverlight Application ด้วยเครื่องมือต่างๆตามที่ได้ตั้งใจเอาไว้แต่แรกเสียที
    
    
    

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

บทสรุป

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