สวัสดีครับ หายหน้าหายตากันไปพักใหญ่ๆ เลยทีเดียว เพราะว่าผมไปใช้กรรมเป็นคนรับ Requirement อยู่พักใหญ่ๆ จนหมดแรงทุกวันเลยตอนกลับบ้าน (ผมรู้แล้วว่า เกิดมาเป็น Developer/Coder เท่านั้น!!!) คราวนี้เมื่อผมชดใช้กรรมเรียบร้อยแล้ว ก็ได้เวลากลับมาทดลองของใหม่บ้างซะที นั่นคือ App Windows 8 ซึ่งได้ยินว่า เขียนได้ด้วย JavaScript/HTML ที่ เหมาะมากๆ สำหรับคนที่เคยทำเว็บมาก่อน ที่จะเอา Skill เดิม มาทำ App ผมก็ช่วงนี้ทำเว็บเยอะเหมือนกัน ไหนมาลองดูหน่อยซิ

เมื่อลง Windows 8 และ Dev11 เรียบร้อย ผมก็จัดการสร้าง Project ใหม่  แล้วเลือกจากเทมเพลทที่มีอยู่เพื่อจะด้อมๆ มองๆ ว่าเขาเขียนโค๊ดกันอย่างไร จะเขียนเหมือนเขียนเว็บไหมนะ..

แล้วผมก็ต้องตกตะลึงพรึงเพริด เมื่อพบว่าใน Project ประกอบไปด้วยไฟล์ล้านแปด โค๊ด HTML และ CSS ที่หน้าตาดูไม่คุ้นหูคุ้นตาดูยุ่บยั่บรกรุงรังอีรุงตุงนังไปหมด ในระดับที่ถ้าน้อง Freelance ที่รับงานต่อจากผมไปทำแบบนี้มาส่งละก็ พ่อจะโทรไปด่าคนเขียนหนังสือที่มันอ่านตอนเรียนทำเว็บเลยทีเดียว (ว่าไปนั่น!!!)

ไฟล์อะไรไม่รู้เยอะแยะ

โค๊ดสุดแสนน่าเกลียด

นี่แกคิดว่าคนเขียน JavaScript ทำเว็บ เขาเขียนแบบนี้กันเหรอ!?!!?

และหลังจากพยายามอยู่พักใหญ่ๆ ที่จะแกะรอย พยายามลองทำนู่นทำนี่ แต่ก็ไม่ได้อย่างใจเลยซักกะอย่าง ผมเลยตระหนักว่า เฮ้ย นี่มันดูถูกคนทำเว็บกันมากไปแล้ว! นี่คิดว่าคนทำเว็บเขาจะเขียนโค๊โแบบนี้กันอย่างนั้นเหรอ!?!? ไม่ได้การละ ผมจะต้องกอบกู้สถารการณ์บัดเดี๋ยวนี้ (ใครขอเอ็งอ่ะ?)

เอาละ เรามาเริ่มกันหลังเบรคดีกว่า

สำหรับโจทย์ของผมก็คือ ผมต้องการเขียน App สำหรับอ่านเว็บ Blognone ขึ้นมาด้วย WinJS ส่วนสาเหตุที่ผมไม่ทำของเว็บตัวเอง ก็เพราะเว็บผมมันไม่ค่อยดังง่ะ หึๆ งั้นเรามาดูไปพร้อมๆ กันว่า ผมสร้างมันขึ้นมาได้อย่างไร?

ทุกอย่างเริ่มที่ความว่าง

เอาละ ก่อนที่เราจะทำอะไรได้ เราต้องมีความว่างซะก่อน ว่างในที่นี้ ไม่ใช่ว่างจากตัวตน จากกิเลส แบบพุทธหรอกนะ…แต่ว่า ว่างจากโค๊ดที่เราไม่เข้าใจต่างหาก เราเริ่มจาก Project แบบ Blank Application ดีกว่า  

สำหรับชื่อ App ผมตั้งตามที่ผมเองนิยมว่า NantCom.Blognone คือ ชื่อทีมงาน.ชื่อโปรเจค หลังจาก Create Project แล้ว เราจะได้ไฟล์เหล่านี้ออกมา ซึ่งยุ่งน้อยกว่า และก็มีเฉพาะสิ่งที่ผมต้องการจริงๆ ในการเริ่มทำ จะเห็นว่า ผมได้ใส่ไฟล์  Logo, Background ลงไปใน Folder images แล้วด้วย สำหรับใช้งาน

วาง Background, Logo

สิ่งที่ขาดไม่ได้เวลาเราทำเว็บก็คือ Background/Logo ผมก็จัดการเปิดไฟล์ default.css ขึ้นมา และ ใส่โค๊ดลงไปตามนี้ ตรงที่เป็น Media Selector ผมเอามันออกไปก่อน เดี๋ยวค่อยใส่มา กันงง

แล้วจากนั้น ในไฟล์ default.html ผมก็ใส่โค๊ดแค่นี้ แล้วผมก็ไม่ลืมที่จะเอา css ของ ui-dark ออกไปด้วย เจ้านี่มันใส่ CSS อะไรไม่รู้มาเยอะแยะมาก ผมไม่ค่อยชินเลยกับการที่ทำเว็บ โดยที่มี CSS ของชาวบ้านมาเกะกะ

จากนั้น ก็ได้เวลาทดลองรัน

รัน App ของเรา และ Debug

การรัน App ของเรา ทำได้โดยการกดปุ่มหน้าตาเหมือนปุ่ม Play แต่ว่าไม่ได้กดตรงๆ เลือกเมนูข้างๆ ออกมาก่อน แล้วเลือก Simulator ที่ต้องทำแบบนี้ ก็เเพราะว่า เราจะ Debug บนหน้าต่างแยก ลักษณะเดียวกับเวลาที่เราทำเว็บ เพราะถ้าเลือก Local Machine มันจะมาบังหน้าจอเราหมด และตัว App มันเป็น Metro ด้วย เวลาสลับกลับมาหน้า Visual Studio ก็ค่อนข้างจะลำบาก

พอรันแล้ว เราจะได้หน้าต่าง Windows Simulator ขึ้นมา คิดซะว่ามันเป็นหน้าจอ Browser แล้วกัน ซึ่งมันก็เหมือนเป็นหน้าจอ Browser จริงๆ ด้วยนะ เพราะว่าคุณสามารถใช้หน้าต่าง DOM Explorer เข้าไปเลือกดู Element ต่างๆ บนหน้าเว็บ หน้า App ได้เหมือนเวลาทำเว็บเลย

แต่ถ้าเผลอปิดไปแล้ว ไปเปิดมาใหม่ได้ ตามเมนูนี้

แถมคุณยังมีหน้าต่าง Styles, Trace Styles, Layout เหมือนเวลา Debug จาก IE เลยด้วยนะ และแน่นอนว่า คุณสามารถทดลองปรับ Style เล่นได้ และเห็น Element มันขยับทันทีจากหน้า Simulator ได้เลย

และยังสามารถเพิ่ม Rule/Property เล่นได้ทันทีอีกด้วย (ถ้าเพิ่มแล้ว อย่าลืม Copy กลับไปวางแทนของเดิมด้วยละ)

แล้วถ้าเกิดว่า App มันเละไปแล้วจากการแก้ไขมั่วๆ ของเรา จะทำยังไง? เพียงแค่กด CTRL+SHIFT+R เท่านั้นเองหรือไม่ก็กดปุ่ม Refresh อย่างกับทำเว็บเลยนะเนี่ย ส่วนถ้าอยากเริ่ม App ใหม่แต่ต้น กดปุ่ม Restart ข้างๆ กันแทน

รู้จักกับ Grid Layout และ Display DPI

ทีนี้ ต่อไปเราก็ต้องทำความรู้จักกับ Grid Layout กันเล็กน้อย ต้องอย่าลืมว่า Windows 8 นั้น ทำงานได้บนจอขนาดต่างๆ กัน ดังนั้น App เราก็ต้องสามารถปรับขนาดตัวเองตามได้ด้วย สมัยก่อนถ้าเราทำเองนี่ ยากมาก (แค่ทำ CSS ให้มันอยู่กลางหน้าจอแนวตั้ง ยังยากเลย) แต่เดี๋ยวนี้ เรามี Grid Layout ใน CSS3 มาช่วยแล้ว!

ตัวอย่างเช่น เรามี App Game ที่อยากให้พื้นที่ทางขวาที่เป็นตัวเกมขยายได้ตามภาพ

อย่างกรณี Blognone ผมวางแผนไว้ว่า จะให้พื้นที่ตรงกลาง ขยายตามขนาดหน้าจอ ด้านบนก็ให้ขนาดเท่ากับขนาดพื้นที่ของแถบสี Blognone ( ข้างล่างเป็น Footer เว้นไว้สัก 50px พอ

ถ้าผมต้องการแบบนี้ ผมก็จะต้องกำหนด Style และ HTML ดังนี้ (คลิ๊กเพื่อดูภาพใหญ่)

อธิบาย Code

• กล่องที่ 1,2: ทำให้ขนาดของหน้าจอเต็ม 100% ซึ่งตามกฏของ CSS ถ้าเราไม่ทำให้มัน 100% มาตั้งแต่ HTML มา ก็จะไม่สามารถใช้ Width, Height  เป็น 100% ได้ถูกต้องครับ
• กล่องที่ 3: เรากำหนดการแสดงผลเป็น grid ซึ่ง App ของ Windows8 ยังจะต้องใช้ previx –ms ไปก่อน ลอง grid เฉยๆ ยังใช้ไม่ได้
  • -ms-grid-rows: เป็นการกำหนดว่า จะให้หน้าจอเราแบ่งเป็นกี่แถว มีข้อความ 3 ชุด ก็หมายถึงมี 3 แถว
    • 150px = แถวแรกสูง 150px
    • 1fr = แถวที่สองใช้พื้นที่เต็มพื้นที่ว่าง ซึ่ง fr หมาย “Fraction of Available Space” ดังนั้น 1fr ก็คือ มีพื้นที่เหลือเท่าไหร่ ใช้ 100% ถ้าใช้ 0.5 ก็คือใช้ครึ่งหนึ่งของที่ว่างที่เหลือ เป็นต้น
    • 50px = แถวสุดท้าย สูง 50px
  • -ms-grid-columns กำหนดแบบเดียวกับ Row แต่ถึงแม้ว่าเราจะมีแค่คอลัมน์เดียว ก็ต้องใส่ไปครับ ไม่งั้น มันจะทำเหมือนกว้าง auto ไม่สามารถกว้าง 100% ได้
• กล่องที่ 4: เป็นการกำหนดว่า จะให้ Element นี้ อยู่ใน Row ไหน เริ่มนับจาก 1

และจากนั้น ถ้าลองรันดู จะได้ผลดังนี้

และถ้าอยากทดสอบว่า App เรา Scale ตามได้จริงหรือเปล่า ลองเปลี่ยนความละเอียดได้ จากเมนูครับ

จากที่ผมสังเกต ถ้าเกิดว่าเป็นจอที่ DPI สูงๆ (อย่าง 10.6 2560x1440 นี่ Retina Display แน่ๆ) ตัว App เราจะ Scale ตาม DPI แต่ว่าถ้าเป็นจอใหญ่ แต่ขนาด DPI เท่าเดิม App เราจะมีพื้นที่มากขึ้นและตัวอักษรเล็กลงครับ ลองดูจากตัวอย่างที่ผมเก็บภาพมาให้ จะเห็นว่า จอ 10.6 นิ้วทุกจอ ขนาดจะประมาณเท่าๆ กันหมด แต่ว่า ถ้าเป็นจอ 27” เราจะได้พื้นที่ตรงกลางใหญ่มาก

10.6” 1024x768	10.6” 1366x768
10.6” 2560x1440	27” 2560x1440

Horizontal Scroll ในหน้าแรก

สิ่งหนึ่งที่ทุกๆ App บน Windows 8 ทำเหมือนกันคือ หน้าจอแรกมันจะต้องเป็น List กว้างๆ ให้เราถูไปไถมา แบบนี้

ดังนั้น เราก็คงหนีไม่พ้นที่เราจะทำบ้างเหมือนกัน ซึ่งก็ทำได้ง่ายมากครับ (คลิ๊กเปิดรูปใหญ่)

อธิบายโค๊ด

• กล่อง 1: เราทำการตั้งค่าให้ .mainlist นั้นแสดง Scrollbar เฉพาะแนวนอน (-x) เมื่อขนาดของเนื้อหาด้านในนั้นใหญ่กว่าขนาดของตัวมัน
• กล่อง 2: ถ้าให้มัน Scroll ได้ เราก็จะต้องมีเนื้อหาให้ Scroll ซะก่อน
• กล่อง 3: เรากำหนดขนาดหลอกๆ ให้เนื้อหาเรามีความกว้าง 3000px เพื่อให้มันล้นจอ

ทดลองรัน

จะพบว่า ตอนนี้ ตรงกลางของหน้าจอเรา มี Scrollbar แล้ว (ต้องคลิกเข้าไปก่อนทีนึง) แต่ว่าทำไมมันไถไม่ได้ละ??? นั่นก็เพราะว่า เราไม่ได้อยู่ในโหมด Touch ครับ (เราไม่สามารถเอาเมาส์ลากเนื้อหาได้เหมือนใช้นิ้ว) เราต้องทำการเปลี่ยนโหมดเป็น Touch ก่อน โดยการคลิกที่สัญลักษณรูปมือทางขวา สังเกตว่า จะมีสัญลักษณ์คล้ายๆ เป้ายิงปืนโผล่ขึ้นมา เวลาเราเอาเมาส์ไปอยู่เหนือหน้าจอ ตอนนี้เราจะสามารถใช้เมาส์แทนนิ้วไถจอเล่นได้แล้ว ถ้าลอง Restart App อีกรอบ จะพบว่า Scrollbar จะหายไปด้วย และจะปรากฏเมื่อทำการ scroll อยู่เท่านั้น

ยังไงต่อ?

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

ตอนอื่นๆ:

1. สร้าง Project การวางหน้าจอโดยไม่พึ่ง Framework จาก Microsoft ฯลฯ
2. ใช้ jQuery ดึงข้อมูลจาก Blognone
3. หยอดข้อมูลลงไปในหน้าเว็บด้วย Handlebars Template Engine