ต่อจากตอนที่แล้ว ตอนนี้ เราสร้าง Silverlight ที่นำข้อมูลจากเว็บ Digg มาแสดงผล
Silverlight 2 มี API ภายในที่จะติดต่อกับ Network ได้หลายแบบ เช่น REST, SOAP/WS*, RSS, JSON ,XML HTTP service และ Socket API(System.Net.Socket ทำให้ติดต่อกับเน็ตที่ไม่ใช่ HTTP ได้ด้วย)
การติดต่อข้ามโดเมน(เว็บไซต์)
โดยปกติ Silverlight จะติดต่อได้กับเว็บไซต์ตัวเอง การติดต่อกับเว็บไซต์อื่นได้ก็ต่อเมื่อ เว็บไซต์อื่นนั้นได้มีไฟล์ XML Policy ที่ระบุอนุญาตให้ติดต่อด้วย(เป็นฟอร์แมตของ Silverlight เอง) และสามารถใช้ไฟล์ XML Policy ในฟอร์แมตของ Adobe Flash ได้ด้วย
เว็บไซต์ Digg.com มี API ในแบบของ Http เจ๋ง ๆ ให้เราใช้พอสมควร และเว็บนี้ก็มีไฟล์ XML Policy สำหรับ Flash เราจึงสามารถติดต่อกับเว็บนี้ได้
การดึงเอาหัวข้อเนื้อหา จาก feed ของ เว็บ Digg.com
เราจะสร้างโปรแกรมที่ ให้ผู้ใช้พิมพ์คำคีย์เวิร์ดเพื่อหาข้อมูล (เช่น Programming) แล้วกดปุ่ม Search เพื่อไปดึงเอาหัวข้อข้อมูลมาแสดง
โดยเราจะเรียกใช้ Digg REST Feed API โดยเราจะใส่คีย์เวิร์ด(คำที่จะหา)ลงใน URL (ตัวอย่างเช่น GET /stories/topic/programming) แล้วส่งไป โดยเราจะได้ XML คำตอนกลับมา
ตัวอย่างเช่น http://services.digg.com/stories/topic/programming?count=20&appkey=http%3A%2F%2Fscottgu.com
เรียกใช้ Digg API แบบ REST ด้วย คลาส System.Net.WebClient
ทันทีที่กดปุ่ม Search เราจะเข้า Event "Click" เพื่อไปเอาข้อความใน TextBox แล้วเข้าฟังก์ชันเรียกเน็ต Digg เพื่อดึงเอา XML มาแสดงผล และเนื่องจากการรอข้อมูลกลับมาจะใช้เวลานาน เราจึงใช้วิธีแบบไม่ต้องรอ(Asynchronous) โดยให้คลาส WebClient เรียก event ของเราตอนที่ได้ข้อมูลครบแล้ว ดังนี้
จะโค้ดด้านบน เราจะได้ XML ผลลัพท์อยู่ที่ตัวแปร result ของเมทอด DiggService_DownloadStoriesCommpleted
เราจะเอาข้อมูลใน XML มาเก็บเป็นออปเจ็ก ๆ ในรูปแบบคลาส ดังนี้
โดยใช้ฟีเจอร์ LINQ to XML (Language Intregrate Query) เพื่อแปลงข้อมูลมาใส่ในคลาส DiggStory
ดังนี้
เอาข้อมูลจากคลาส DiggStory มาแสดงใน DataGrid
เราจะใส่คอนโทรล DataGrid ในโปรแกรมของเรา โดยเพิ่ม reference แอสเซมบลี้ "Silverlight Data Controls" และเพิ่มแท็ก ดังนี้
ฟีเจอร์ของ DataGrid อนุญาต ให้คุณระบุคอลัมภ์ , ชนิดตัวแปร และอื่น ๆ ได้โดยละเอียด
แต่ถ้าคุณต้องการความสะดวก คุณก็ระบุเพียง ItemSource = ข้อมูลที่ได้ ก็พอ แล้ว DataGrid จะกำหนดค่าต่าง ๆ โดยอัตโนมัติ
และถ้าคุณต้องการบอกว่า ไม่ให้เลือก select บรรทัดไว้ก่อนล่วงหน้า ก็ระบุ SelectedIndex = -1 ดังนี้
ตอนนี้เราก็ได้โปรแกรม silverlight เสร็จขึ้นมาอีกระดับหนึ่งแล้ว(หาข้อมูลได้ แสดงข้อมูลได้) ดังนี้
ตอนต่อไปจะเป็นอีก การกำหนด Style เพื่อให้หน้าตาสวยงามขึ้น
กดปุ่มนี้ จะดาวโหลด source code โปรแกรมที่เสร็จแล้ว
ไม่มีความคิดเห็น:
แสดงความคิดเห็น