เขียนโปรแกรมด้วย Qt: ตอนที่ 4 จัดการฟอร์ม

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

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

การเขียนโปรแกรมด้วย Qt ก็เช่นกัน พื้นฐานเป็นสิ่งสำคัญ นอกจากจะต้องรู้วิธีการเขียนโปรแกรมด้วยภาษา C++ แล้วยังต้องเข้าใจวิธีการของ Qt ตลอดถึงการใช้เครื่องมือในการพัฒนาโปรแกรม นั่นคือ ต้องเข้าใจเกี่ยวกับ IDE ให้มาที่สุด

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

ใน Qt จะมีส่วนที่เป็น Qt Creator ซึ่งเป็นส่วนการพัฒนาและออกแบบโปรแกรม ดังนั้นส่วนใหญ่จะต้องผ่านการออกแบบหน้าจอแบบ GUI อยู่มาก จึงจำเป็นต้องเข้าใจหลักการในการใช้งานก่อน

การกำหนดขนาดและค่าต่างๆ ของฟอร์ม

ฟอร์มที่สร้างขึ้นใน Qt ก็ไม่ต่างจากฟอร์มใน Visual Studio มากนัก เพียงแต่วิธีการและการเรียกในส่วนต่างๆ ไม่เหมือนกัน

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

สิ่งเหล่านี้ใน Qt สามารถจัดการได้หมด ในบทความนี้จะอธิบายในส่วนที่จำเป็นดังนี้

หน้าจอกำหนดขนาดของฟอร์ม

เขียนโปรแกรมด้วย Qt: ตอนที่ 3 Layouts

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

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

บน Windows การวางคอนโทรลส่วนใหญ่จะง่ายในการกำหนดตำแหน่ง เพราะสามารถกำหนดตำแหน่งหรือ Position ได้โดยตรง คือ มีการกำหนดผ่าน Properties ของออบเจ็กต์ แต่สำหรับ Qt ก็มี Properties เหมือนกัน แต่กว่าจะกำหนดได้ บางครั้งก็วุ่นวาย ยากเย็นแสนเข็ญ

แต่กลับกัน การทำงานแบบ Responsive หรือ การเปลี่ยนแปลงตามหน้าจออุปกรณ์ที่ใช้งานในโลกของ Qt กลับทำได้ง่ายกว่า และง่ายมากด้วย (ถ้าเข้าใจหลักการ)

สิ่งที่ทำให้การจัดเรียง widgets บนฟอร์มทำได้ง่ายๆ นั้นเพราะมี Layouts และ Spacer มาช่วยจัดการ โดย Layout จะมี อยู่ 4 แบบ คือ

1. Vertical Layout เป็นการจัดเรียงแนวตั้ง
2. Horizontal Layout เป็นการจัดเรียงแนวนอน
3. Grid Layout เป็นการจัดเรียงแบบกริด คือ จะแบ่งหน้าจอเท่ากันแล้วเรียงจากซ้ายไปขวา และบนลงล่าง เป็นตารางช่องเท่าๆ กัน ก็เหมือนการวาง icon บนหน้าจอโทรศัพท์ หรือ คอมพิวเตอร์นั่นแหละ
4. Form Layout เป็นการวางแบบ Form คือ มีข้อความด้านซ้าย และ widget อยู่ขวามือ

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

เขียนโปรแกรมด้วย Qt: ตอนที่ 2 เล่นกับฟอร์ม

สำหรับ ตอนที่ 1 ก็พาไปรู้จักกับ IDE ของ Qt แล้วตอนนี้ เป็นตอนที่ 2: เล่นกับฟอร์ม, คิดชื่อบทความไม่ค่อยออก และจุดมุ่งหมายก็ยังไม่ชัดเจน แต่จะเป็นการเล่นอะไรหลายๆ อย่างบนฟอร์มที่เราสร้างขึ้น (มีอะไรก็ใส่ๆ ไปครับ) 😅

ก่อนที่จะเข้าไปยำใหญ่เกี่ยวกับฟอร์มก็ขอ ขยายความ เกี่ยวกับศัพท์ที่พบเจอกันบ่อยๆ ใน Qt และจะงงกัน (ผู้เขียนก็ยังงงๆ อยู่เหมือนกัน)

Window, Widget, Dialog สามคำนี้จะวนเวียนอยู่ในโลกแห่งการเขียนโปรแกรมมากพอสมควร โดยแต่ละส่วนก็จะมีความหมายพอจะอธิบายได้ว่า (ความหมายในโลกของ Qt)

Window คือ ส่วนที่อยู่ Top-level หรือบนสุด หรือจะเรียกว่าอยู่ล่างสุดเป็นฉากหลัง เป็นแหล่งกำหนดหรือที่ตั้งอยู่ของสิ่งต่างๆ นั่นแหละ แต่ที่เรียกว่า Top-Level นั้นเพราะมองจากลำดับของ Object

Widget คือ ส่วนประกอบต่างๆ หรือ Object ต่างๆ ที่อยู่บน Window ในโลกของ Unix เรียกว่า Widget ส่วนโลกของ Windows เรียก Controls นั่นก็ คือ objects ทั้งหลายนั่นแล (จะต่างจาก Widget ในโลกมือถือหรือโปรแกรมอื่นๆ นิดหน่อยตรงที่ Widget ในโลกอื่นที่ไม่ใช่ Qt หมายถึงส่วนควบคุมหรือส่วนเล็กๆ ที่สามารถทำงานได้ คล้ายๆ กับ Gadget; อ้าว ยิ่งงงไปกันใหญ่) 😁

Dialog คือ Window ชนิดหนึ่งและเป็นหน้าต่างที่ปรากฏขึ้นเป็นครั้งคราว ไม่ได้แสดงแบบถาวร เช่น สร้างหน้าจอเพื่อแสดงข้อความแจ้งให้ทราบ หรือข้อความถามแล้วให้เลือกต่อ Yes No Ok และ Cancel แต่หลักการแล้วก็เหมือน window ทุกประการเพียงแต่ต่างกันตรงวัตถุประสงค์การใช้งาน

Form Style Sheet

สิ่งแรกที่จะพาไปเล่นกับฟอร์ม คือ การเปลี่ยนแปลงสีของฟอร์มผ่าน Style Sheet และนี่แหละที่เป็นจุดเด่นของ Qt และเด่นมากจนหลังๆ จะกลายเป็น Java Scripts ไปทุกทีแล้ว

ใครที่เขียนเว็บมาบ้างแล้วย่อมรู้จักอานิสงส์ของ Style Sheet เป็นอย่างดี เพราะมันสามารถทำให้หน้าเว็บไซต์ไม่จืดชืด ลูกเล่นแพรวพราว และเมื่อ Qt ได้นำเอาคุณสมบัตินั้นมาใช้กับการเขียนโปรแกรมแล้วจะดีมากแค่ไหน และเขียนด้วย C++ แล้วมี Style Sheet โอ้ววว มันช่างอัศจรรย์เสียจริงๆ (IDE อื่นๆ ก็คงทำได้เหมือนกัน ใครทราบแนะนำด้วย)

Change styleSheet