ข้อมูลองค์ความรู้โดย
Web Master (IT)
ตำแหน่ง อาจารย์

การสร้างแอพลิเคชันสำหรับ Windows 8 App Store (ตอนที่ 2)

ประเภททางด้าน IT หลัก :   IT Management & Trends
ประเภททางด้าน IT ย่อย :   Emerging Technologies
  ลงข้อมูลเมื่อ 15:22:07 11/02/2013
  Page View (1671) แบ่งปัน

 

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

สร้างโปรเจกต์ใหม่

แอพลิเคชันส่วนใหญ่มักจะมีหลายหน้าจอ รวมถึงแอพลิเคชันที่เรากำลังจะสร้างด้วย เพื่อความง่ายเราจะสร้างแอพลิเคชันจากเทมเพลตที่ Visual Studio เตรียมไว้ให้เลย ดังนี้

  1. เรียกเมนู File > New Project...
  2. เลือกเทมเพลตโดยเลือกหัวข้อ Templates > JavaScript จากเมนูด้านซ้าย จากนั้นเลือก Navigation App
  3. ตั้งชื่อโปรเจกต์ในช่อง Name จากนั้นคลิกปุ่ม OK

รอสักครู่เราจะได้โปรเจกต์ตั้งต้นพร้อมหน้าแรก สามารถคลิกปุ่ม Start Debugging (ปุ่มไอคอน play สีเขียวบนแถบเครื่องมือ) เพื่อลองทดสอบได้ทันที

โครงสร้างของโปรเจกต์

ก่อนจะเริ่มลงมือ เรามาศึกษาโครงสร้างของโปรเจกต์กันก่อน ให้สังเกตที่แถบ Solution Explorer ด้านขวาบนของหน้าจอ ส่วนนั้นจะแสดงส่วนประกอบของโปรเจกต์ ซึ่งมีส่วนหลักๆ ดังนี้

  • default.html เป็นหน้าจอหลักของแอพลิเคชัน (อาจเป็นชื่ออื่นหากค่าในไฟล์ package.appxmanifest กำหนดเป็นอย่างอื่น)
  • css/default.css เป็นไฟล์สไตล์ชีทกำหนดลักษณะการแสดงผลโดยรวมของแอพลิเคชัน
  • js/default.js เป็นไฟล์จาวาสคริปต์ตั้งต้นที่จะทำงานเมื่อเปิดแอพลิเคชัน
  • js/navigator.js เป็นจาวาไฟล์สคริปต์เพื่อควบคุม navigation ระหว่างหน้า
  • package.appxmanifest เป็นไฟล์กำหนดคุณลักษณะต่างๆ ของโปรเจกต์ เช่น แอพลิเคชันชื่ออะไร หน้าหลักของแอพลิเคชันอยู่ที่ไหน แอพลิเคชันต้องการสิทธิ์อนุญาตอะไรบ้าง เป็นต้น (ลักษณะเดียวกับไฟล์ AndroidManifest.xml บนแอนดรอยด์)

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

การใช้คอนโทรลพื้นฐาน

หน้าหลักของแอพลิเคชันคือ default.html จะมีเพียง div ที่ทำหน้าที่เป็น PageControlNavigator เพื่อนำหน้าต่างๆ มาแสดงเท่านั้น เราสามารถกำหนดหน้าแรกที่จะเริ่มแสดงผลได้จากที่นี่ โดยตอนแรกโปรเจกต์ได้กำหนดไว้ให้เปิดหน้า /pages/home/home.html

ในส่วนของหน้า /pages/home/home.html นั้นจะมีโครงสร้างหลักๆ ของหน้าอยู่ โดยปกติ

เราจะลองแก้ไขหน้าแรกให้มีปุ่ม New และ Open ดู โดยเปิดไฟล์ /pages/home/home.html และแก้ไขเนื้อหาในแท็ก section ใหม่ดังนี้

 

1
2
3
4
<section aria-label="Main content" role="main">
    <button id="newButton">New</button>
    <button id="openButton">Open</button>
</section>

 

ลองสั่งรันแอพลิเคชันดูจะพบปุ่มทั้งสองปรากฎบนหน้าจอแล้ว

จะสังเกตได้ว่า การพัฒนาในเบื้องต้นแทบไม่ต่างจากการสร้างเว็บเพจตามปกติ โดยเราสามารถใช้แท็ก HTML มาตรฐานต่างๆ ในการสร้างแอพลิเคชันได้เลย

การสร้างหน้าใหม่ เราจะทำให้แอพลิเคชันเปลี่ยนหน้าไปยังหน้า editor เมื่อผู้ใช้คลิกปุ่ม New แต่ก่อนอื่นเราจะต้องสร้างหน้า editor ขึ้นมาเสียก่อน โดยทำดังนี้ 1. ที่ Solution Explorer คลิกขวาที่โฟลเดอร์ pages จากนั้นเลือกเมนู Add > New Folder แล้วกำหนดชื่อโฟลเดอร์เป็น editor 2. คลิกขวาที่โฟลเดอร์ editor ที่สร้างขึ้นใหม่ จากนั้นเลือกเมนู Add > New Item... 3. เลือก Page Control จากนั้นกำหนดชื่อในช่อง Name เป็น editor.html แล้วกดปุ่ม OK

เราจะได้หน้าใหม่ /pages/editor/editor.html พร้อมไฟล์สไตล์ชีทและจาวาสคริปต์ตั้งต้นแล้ว จากนั้นเพิ่มช่องแก้ไขข้อความลงไปในหน้า โดยเพิ่ม textarea เข้าไป หมายเหตุ: ในหน้าที่สร้างขึ้นด้วยวิธีนี้ ส่วนหัวของไฟล์ HTML จะไม่ได้เรียกใช้ไฟล์ default.css เราต้องไปเพิ่มแท็ก <link href="/css/default.css" rel="stylesheet"/> เอาเอง

ข้อควรทราบเกี่ยวกับการเขียนโปรแกรมด้วยภาษาจาวาสคริปต์

สำหรับผู้ที่ไม่คุ้นเคยกับภาษาจาวาสคริปต์ มีเรื่องที่ต้องทำความเข้าใจเบื้องต้นดังนี้

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

 

1
2
3
4
5
องค์ความรู้ที่มีผู้อ่านมากสุด
เรียนรู้เรื่อง เมนบอร์ด (Mainboard, mother board)
แผงวงจรหลัก เป็นหัวใจสำคัญที่สุดที่อยู่ภายในเครื่อง เมื่อเปิดฝาเครื่องออกมาจะเป็นแผงวงจรขนาดใหญ่วางนอนอยู่ นั่นคือส่วนที่เรียกว่า "เมนบอร์ด"

โดย... Web Master (IT)

รายละเอียดของระบบ e-Purchasing Online ของกรมส่งเสริมอุตสาหกรรม กระทรวงอุตสาหกรรม
รายละเอียดของระบบ e-Purchasing Online ของกรมส่งเสริมอุตสาหกรรม กระทรวงอุตสาหกรรม

โดย... Web Master (IT)

AutoCAD คืออะไร
AutoCAD (Computer Aided Drefting/Dedign, CAD) เป็นซอฟต์แวร์ช่วยออกแบบด้วยคอมพิวเตอร์ ที่สามารถรองรับการทำงานทั้งใน 2 มิติ และ 3 มิติ

โดย... Web Master (IT)

ทำความรู้จักกับ IIG (International Internet Gateway ) & NIX(National Internet Exchange )
การใช้งานอินเตอร์เน็ตของเราทุกคน จำเป็นต้องผ่านระบบการให้ บริการของ IIG และ NIX เพราะว่า เป็นเหมือนเส้นทางหลักของศูนย์กลางโครงข่าย ของประเทศไทย ทั้งภายในและ ภายนอกประเทศ ที่จากเดิมเราจะทราบกันอยู่แล้วว่า บริการทั้งสองประเภทนี้จะมีผู้ให้บริการ แบบผูกขาดอยู่เพียงรายเดียวเท่านั้น คือ การสื่อสารแห่งประเทศไทย เพียงเท่านั้น แต่ ณ ปัจจุบันนี้ได้มีหน่วยงานที่เข้ามา กำกับดูแลในเรื่องของโทรคมนาคมของเมืองไทยอย่างเป็น รูปธรรมมากยิ่งขึ้น จึงก่อให้เกิดการแข่งขันอย่างเสรี และปัจจุบัน ทาง กทช. ผู้เป็นหน่วยงานหลัก ของ การกำกับดูแลได้เปิดอนุญาตให้กลุ่มบริษัทเอกชนทั่วไป สามารถขอรับใบอนุญาต การให้ บริการทั้งสองประเภทได้ เพื่อให้เกิดการแข่งขันกันอย่างเป็นธรรม และก่อให้ เกิดประโยชน์สูงสุด แก่ผู้บริโภคกันเลยละครับ

โดย... Web Master (IT)

ความรู้เรื่อง...การ์ดจอ
การ์ดจอ (Video Card) การ์ดแสดงผล หรือ กราฟฟิกการ์ด (Graphic card) เป็น แผงวงจรอิเล็กทรอนิกส์ ที่ทำหน้าที่ในการนำข้อมูลที่ได้จากการประมวลผลของซีพียูมาแสดงบนจอภาพ ทำให้ผู้ใช้ สามารถควบคุมการทำงาน ได้อย่างมีประสิทธิภาพ โดยจอภาพจะเป็นส่วนที่รับข้อมูลจากการ์ดแสดงผลอีกทีหนึ่ง การ์ดกราฟฟิกทีได้รับความนิยมและใช้กันแพร่หลายในอยู่ปัจจุบัน เป็นการ์ดกราฟฟิกที่มี GPU เป็นตัวประมวลผล

โดย... Web Master (IT)

Windows XP Service Pack 3 Overview
ภาพรวม Windows XP Service Pack 3 จะประกอบด้วย security updates hotfix และ patch ต่างๆ ที่ไมโครซอฟท์ปล่อยหลังออก SP2 เป็นต้นมาไม่มีการเปลี่ยนแปลงในเชิงฟังก์ชั่นและการทำงานที่สำคัญ แต่จะอัพเดตองค์ประกอบต่างๆ อย่าง Microsoft Management Console (MMC) 3.0 และ Microsoft Core XML Services 6.0 (MSXML6) เป็นเวอร์ชั่นปัจจุบัน สิ่งที่น่าสนใจประการหนึ่งคือ ไมโครซอฟท์ไม่ได้รวมเอา Windows Internet Explorer 7 เข้ามาไว้ใน SP3 แต่จะใส่มาเฉพาะส่วนที่เป็นอัพเดตและ fix เท่านั้น คล้ายกับว่าไมโครซอฟท์ตั้งใจจะไม่บีบให้ลูกค้าต้องเปลี่ยนจาก IE6 มาใช้ IE7 ใครที่ต้องการอยู่กับ IE6 (ด้วยเหตุผลใดก็ตาม) ก็จะยังสามารถใช้ IE6 ได้ สำหรับใครที่เปลี่ยนไปเป็น IE7 แล้วจะมีอัพเดตมาให้เช่นเดียวกัน

โดย... Web Master (IT)

นวัตกรรมรถบรรทุกขนาดใหญ่ B-double รถกึ่งพ่วงบรรทุกแบบพิเศษ
ในยุคที่ประสิทธิภาพและต้นทุนการขนส่งเป็นเรื่องสำคัญที่ต้องพัฒนาร่วมกันอย่างเร่งด่วน โดยเฉพาะเมื่อต้นทุนหลักของการขนส่งคือน้ำมันเชื้อเพลิงมีสัดส่วนสูงขึ้นอย่างต่อเนื่อง ก๊าซธรรมชาติและไบโอดีเซลกลายเป็นประเด็นสำคัญที่ผู้ประกอบการขนส่งต้องศึกษาและพัฒนากองรถมาทดลองและใช้กันแน่นอน การพัฒนารถไฟและการขนส่งทางลำน้ำให้สามารถขนส่งสินค้าในเส้นทางหลักได้มากขึ้น มีบริการที่แน่นอนและสามารถเชื่อมต่อกับการขนส่งด้วยรถบรรทุกได้สะดวกรวดเร็ว เป็นเรื่องที่ทุกฝ่ายปรารถนา เพราะคาดหมายว่าจะทำให้การขนส่งได้ประสิทธิภาพที่ดีกว่าด้วยต้นทุนที่ต่ำกว่าการขนส่งด้วยรถบรรทุก ประเด็นเรื่องการขนส่งในปริมาณมากๆ ต่อเที่ยว มักจะยกประเด็นในเรื่องการประหยัดพลังงาน การลดปริมาณมลพิษจากน้ำมัน และการประหยัดค่าจ้างแรงงานของพนักงานขับรถ โดยทั้งหมดคิดหารเฉลี่ยจากจำนวนหน่วยสินค้าและระยะทางขนส่งต่อเที่ยวนั้นๆ หลายครั้งที่รถบรรทุกถูกวางตำแหน่งให้ทำหน้าที่ขนส่งและกระจายสินค้าในระยะทางรัศมีสั้นๆ รอบๆ สถานีหรือต้นทางปลายทางที่เป็น hub

โดย... Web Master (IT)

เรียนรู้เรื่อง CPU
CPU (Central Processing Unit) หรือ โปรเซสเซอร์ (Processor) คือ ส่วนหนึ่งของเครื่องคอมพิวเตอร์ที่มีหน้าที่ควบคุมกา รทำงานของส่วนอื่นๆ โดยทั่วไปแล้ว ซีพียูจะประกอบไปด้วย หน่วยควบคุม (Control Unit), หน่วยประมวลผลคณิตศาสตร์และตรรกศาสตร์ (Arithmetic and Logic Unit; ALU) และหน่วยความจำ ได้แก่ รีจีสเตอร์ (Register), แคช (Cache), แรม (RAM) และรอม (ROM)

โดย... Web Master (IT)

การประยุกต์ใช้ DATA WAREHOUSEING
มีการประมาณการณ์เอาไว้ว่า ถ้าไม่มีการนำเอาระบบ Data Warehouse มาประยุกต์ใช้ในองค์กร จะมีคน เพียง 10 เปอร์เซ็นต์เท่านั้นที่จะสามารถใช้งานระบบสารสนเทศได้ตามความต้องการ และนั่นก็คือจำนวนคนที่มีระดับความรู้ ทาง IT เพียงพอที่จะสร้าง Query ขึ้นด้วยตนเองเพื่อสนองความต้องการด้านข้อมูลของตน นอกจากนั้นแล้ว ระบบ EIS (Executive Information System) และ DSS (Decision Support System) ก็มักจะทำงานได้ไม่ตรงกับที่ต้องการ เพราะข้อมูล ดิบจากฐานข้อมูลประจำวันนั้น เข้าถึงยาก หรือไม่ก็ทำความเข้าใจได้ไม่ง่ายนัก ยิ่งไปกว่านั้น การอนุญาตให้ผู้ใช้ระดับสูง สามารถเข้าถึงและค้นหาฐานข้อมูลได้โดยตรงอาจจะส่งผลต่อประสิทธิภาพของงานข้อมูล รวมไปถึงความเป็นระเบียบ (Data Integrity) ของฐานข้อมูลด้วย

โดย... Web Master (IT)

การเขียนโปรแกรมเชิงวัตถุ (Object Oriented Programming: OOP)
ในปัจจุบันภาษาในการเขียนโปรแกรมเพื่อพัฒนาระบบสารสนเทศที่ใช้ในองค์กรธุรกิจ มีมากมายหลายภาษาให้เลือก การเรียนรู้ภาษาเขียนโปรแกรมหรือการมีความรู้ในหลาย ๆ ภาษาถือเป็นสิ่งที่ดี แต่ไม่ได้หมายความว่าเราจำเป็นต้องเขียนโปรแกรมให้ได้ทุก ๆ ภาษา แต่สามารถเลือกบางภาษาที่เรามีความถนัดหรือเลือกที่จะเริ่มต้นกับภาษาใด ภาษาหนึ่งได้ ซึ่งการเขียนโปรแกรมเชิงวัตถุถือได้ว่าได้รับความนิยมในปัจจุบันรวมถึงแนวโน้มในอนาคต ซึ่ง Java ก็เป็นหนึ่งในการเขียนโปรแกรมเชิงวัตถุ ที่มีพื้นฐานมาจากภาษา C และคิดว่าน่าจะเป็นอีกภาษาหนึ่งที่น่าศึกษาและน่าเรียนรู้ เพราะเทคโนโลยีของ Java ถือว่ากำลังร้อนแรงในแวดวงของ Software

โดย... Web Master (IT)