ในบทความตอนที่ผ่านๆ มาเราได้เรียนรู้การพัฒนาแอพลิเคชันโดยใช้ความสามารถต่างๆ ของ Windows 8 กันไปแล้ว ตอนนี้เราจะลองสร้างแอพลิเคชันอย่างรวดเร็ว โดยใช้เทมเพลตที่ทางไมโครซอฟท์เตรียมไว้ให้ พัฒนาให้เป็นแอพลิเคชันที่เราต้องการได้อย่างง่ายดาย
สำหรับเทมเพลตที่ทางไมโครซอฟท์เตรียมไว้ให้มีสองชุด คือ
ในบทความตอนนี้จะแนะนำเฉพาะการแก้ไขเทมเพลต Travel and Place เท่านั้น ส่วนอีกเทมเพลตหนึ่งสามารถอ่านวิธีการแก้ไขได้จากเอกสารที่แนบมาพร้อมกับเทมเพลต
แอพลิเคชัน Travel and Place จะประกอบด้วยหน้าหลัก แสดงข้อมูลเบื้องต้นและสภาพอากาศของจังหวัด (ดึงข้อมูลสภาพอากาศจากอินเทอร์เน็ต) ภาพประกอบ (ดึงภาพจากอินเทอร์เน็ตหรือเลือกใส่รูปภาพเองก็ได้) และรายการสถานที่น่าสนใจต่างๆ (ฝังไว้ในซอร์สโค้ดของแอพลิเคชัน) เมื่อผู้ใช้คลิกที่สถานที่ใดๆ จะปรากฎ FlyOut ให้ค้นหารายละเอียดเพิ่มเติม หรือเพิ่มกำหนดการไปยังสถานที่นั้นๆ ลงใน Hotmail Calendar ได้ทันที
ตัวอย่างแอพลิเคชันที่สร้างจากเทมเพลตนี้ และเผยแพร่บน Windows Store แล้ว เช่น Paradise Beach Phuket, Wonderful Place Hua Hin, Nightlife Chiang Mai เป็นต้น
โดยในบทความนี้เราจะนำเทมเพลต Travel and Place มาแก้ไขข้อมูลและหน้าตาใหม่ให้กลายเป็นแอพลิเคชัน Nan is not a number ซึ่งเป็นแอพลิเคชันแนะนำสถานที่น่าสนใจในจังหวัดน่านแทน
สำหรับการแก้ไขข้อมูลและดีไซน์เล็กๆ น้อยๆ จากเทมเพลตนี้ เราจะเปิดโปรเจกต์ด้วย Blend for Visual Studio (ซึ่งติดตั้งมาพร้อมกับ Visual Studio อยู่แล้ว) โดยเปิดโปรแกรม จากนั้นคลิกที่ปุ่ม Open Project... แล้วเลือกเปิดไฟล์นามสกุล sln ของโปรเจกต์เทมเพลตขึ้นมาเพื่อแก้ไข
การแก้ไขข้อมูลจังหวัด ให้เลือกเปิดไฟล์ jsdb/overviewData.js จากพาเนล Projects ทางด้านซ้ายบนของพื้นที่ทำงาน จะปรากฎตัวแปรต่างๆ ให้เราแก้ไขชื่อจังหวัดที่ตัวแปร cityName, แก้ไขคำอธิบายที่ตัวแปร overviewDescription, ส่วนรหัสจังหวัดซึ่งจะใช้สำหรับแสดงสภาพอากาศนั้น ให้ค้นหาจากเอพีไอของ wxbug โดยเข้าไปยังที่อยู่ http://i.wxbug.net/REST/SP/getLocationsXML.aspx?api_key=mxf782bm8qdy2chx25sn6ej2&SearchString=CityName (เปลี่ยนคำว่า CityName ให้เป็นชื่อเมืองที่ต้องการ) จากนั้นคัดลอก citycode ที่ตรงกับชื่อเมืองที่ต้องการมาใช้
เทมเพลตนี้ได้เตรียมช่องทางให้เรากำหนดรูปภาพได้สองช่องทาง คือค้นหารูปผ่านอินเทอร์เน็ต หรือจะใส่รูปเข้าไปเองก็ได้ โดยเลือกเปิดไฟล์ jsdb/imageData.js จากพาเนล Projects
หากต้องการให้แอพลิเคชันค้นหารูปผ่านอินเทอร์เน็ต ให้แก้ไขค่า useOnlineImageSearch เป็น true และแก้ไขค่า imageSearchKeyword ให้เป็นคีย์เวิร์ดที่ต้องการใช้ค้นรูป
หากต้องการใส่รูปเข้าไปเอง ให้คัดลอกรูปภาพใส่ลงในไดเรกทอรี images จากนั้นแก้ไขค่า heroImageURL ให้เป็นที่อยู่ของภาพที่จะเป็นภาพหลัก (ภาพใหญ่สุดที่จะเห็นเป็นภาพแรก) และแก้ไขค่า thumbImageURL ให้เป็นรายการที่อยู่ของภาพที่จะแสดงในส่วนอื่นๆ โดยจะต้องใส่รูปจำนวนเท่าเดิมที่เทมเพลตได้ระบุไว้(หรือจะใช้วิธีคัดลอกภาพมาใส่แล้วตั้งชื่อให้ตรงกับรูปแบบเดิมก็ได้)
เทมเพลตนี้มีรายการสถานที่ให้แสดงผลทั้งหมด 3 รายการ โดยเราสามารถกำหนดชื่อหัวข้อของแต่ละรายการ (เช่น สถานที่ท่องเที่ยว, ร้านอาหาร) ได้เอง แต่ละรายการจะมีรายละเอียดเหมือนๆ กัน คือสามารถกำหนดชื่อ ที่อยู่ หมายเลขโทรศัพท์ และคำอธิบายเพิ่มเติมได้
เราสามารถแก้ไขได้โดยเลือกเปิดไฟล์ jsdb/listData1.js, jsdb/listData2.js, และ jsdb/listData3.js จากนั้นแก้ไขค่า listName_1 หรือ listName_2 หรือ listName_3 จากพาเนล Projects ให้เป็นชื่อหัวข้อของรายการที่ต้องการ และแก้ไขค่า array1, array2, array3 ให้มีข้อมูลสถานที่ต่างๆ ตามต้องการ
เราสามารถเปลี่ยนสีพื้นหลัง สีของรายการสถานที่ ทั้งส่วนหัวข้อรายการ ส่วนที่แสดงรายการ รวมถึงส่วนหัวของ flyout ได้ง่ายๆ โดยเริ่มจากเลือกเปิดไฟล์ pages/cityDetail/cityDetail.html จากพาเนล Projects
หากโปรเจกต์ตัวอย่างสามารถแสดงผลในพื้นที่ทำงานได้ เราสามารถคลิกที่ส่วนต่างๆ ของเทมเพลตเพื่อปรับตั้งคุณสมบัติต่างๆ ได้เอง แต่หากไม่แสดงผลสามารถเลือกอีลิเมนต์ที่จะแก้ไขผ่านพาเนล Live DOM ที่ด้านซ้ายล่างของพื้นที่ทำงาน โดยเริ่มต้นเราจะแก้ไขสีพื้นหลังของหน้าจอ โดยคลิกเลือกอีลิเมนต์ flexBox ด้านขวาของพื้นที่ทำงานจะปรากฎพาเนล CSS Properties ของอีลิเมนต์ที่คลิกเลือกไว้ ให้คลิกที่สีท้ายคำว่า background-color เพื่อเลือกสีพื้นหลัง
ที่พาเนล Live DOM ด้านซ้ายล่างของพื้นที่ทำงาน คลิกเลือกอีลิเมนต์
<
div> smallHeaderDiv จากนั้นดูที่พาเนล CSS Properties ด้านขวา สามารถแก้สีพื้นหลังของหัวข้อรายการได้โดยคลิกที่สีหลังคำว่า background-color และแก้ไขสีตัวอักษรหัวข้อรายการได้โดยคลิกที่สีหลังคำว่า color
ที่พาเนล Live DOM ด้านซ้ายล่างของพื้นที่ทำงาน คลิกเลือกอีลิเมนต์ placesToEatListView (อยู่ถัดจาก
<
div> smallHeaderDiv ที่เพิ่งเลือกไป) จากนั้นดูที่พาเนล CSS Properties ด้านขวา สามารถแก้สีพื้นหลังของรายการได้โดยคลิกที่สีหลังคำว่า background-color
ที่พาเนล Live DOM ด้านซ้ายล่างของพื้นที่ทำงาน คลิกเลือกอีลิเมนต์ learnMoreFlyoutHeader จากนั้นดูที่พาเนล CSS Properties ด้านขวา สามารถแก้สีพื้นหลังของส่วนหัว flyout ได้โดยคลิกที่สีหลังคำว่า background-color
ที่พาเนล Live DOM ด้านซ้ายล่างของพื้นที่ทำงาน คลิกเลือกอีลิเมนต์ learnMoreFlyoutContent(อยู่ถัดจาก learnMoreFlyoutHeader ที่เพิ่งเลือกไป) จากนั้นดูที่พาเนล CSS Properties ด้านขวา สามารถแก้สีพื้นหลังของ flyout ได้โดยคลิกที่สีหลังคำว่า background-color และแก้สีตัวอักษรของ flyout ได้โดยคลิกที่สีหลังคำว่า color (สีตัวอักษรที่แก้ไขจะไม่มีผลกับบาง flyout)
นอกจากนี้เราสามารถทดสอบแก้ไขคุณสมบัติอื่นๆ หรือคุณสมบัติของอีลิเมนต์อื่นๆ ได้ตามต้องการ โดยเลือกอีลิเมนต์ที่จะแก้ไข จากพาเนล Live DOM แล้วทดลองแก้ไขค่าในพาเนล CSS Properties จากนั้นทดลองรันแอพลิเคชันเพื่อดูผลลัพท์โดยเรียกเมนู Project > Run Project หรือกดปุ่ม F5 บนคีย์บอร์ด
การแก้ไขสีและไอคอนของหน้า splash screen จะต้องใช้โปรแกรม Visual Studio for Windows 8 ดังนี้
เมื่อแก้ไขแอพลิเคชันเสร็จเรียบร้อยแล้ว สามารถนำแอพลิเคชันขึ้นเผยแพร่บน Windows Store ได้ โดยดูวิธีการเพิ่มเติมจากบทความ การเขียนแอพลิเคชันสำหรับ Windows 8 App Store ตอนที่ 6: Notification และการส่งแอพพลิเคชั่นเข้า Store ส่วนผู้อ่านที่ต้องการดาวน์โหลดตัวอย่างแอพลิเคชันที่เราแก้ไขเสร็จแล้วไปทดสอบสามารถดาวน์โหลดซอร์สโค้ดได้ที่นี่
บทความนี้ได้รับการสนับสนุนจากบริษัทไมโครซอฟท์(ประเทศไทย) จำกัด เพื่อสนับสนุนให้นักพัฒนาสามารถพัฒนาแอพลิเคชันสำหรับ Windows 8 ได้ง่ายยิ่งขึ้น