เขียนโปรแกรมด้วย Qt: ตอนที่ 1 รู้จักส่วนประกอบของหน้าจอ IDE

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

หน้าจอฟอร์มที่สร้างขึ้นใน Qt Creator

หน้าจอฟอร์มเมื่อสั่งรันโปรแกรมและคลิกที่ปุ่ม Play

ส่วนประกอบของฟอร์ม

ส่วนประกอบของฟอร์มโดยจะแบ่งเป็นส่วนใช้งานต่างๆ จัดเรียงแนวตั้ง

ฟอร์มที่สร้างขึ้นใน Qt จะเป็นรูปแบบการสร้างโดยใช้ Widget ทั่วไป หรือหากใครคุ้นชินกับการเขียนโปรแกรมแบบ Visual บนวินโดว์มาก่อนก็จะรู้จักในส่วนที่เรียกว่า Control เช่น ปุ่มกด ป้ายข้อความ ช่องรับตัวอักษร ซึ่งก็มีเหมือนกันเกือบหมด แต่การเรียกชื่อ การใช้งานก็แตกต่างกันบ้างเป็นธรรมดาของโปรแกรมที่สร้างจากหลายๆ ค่าย

IDE คืออะไร

ในการเขียนโปรแกรมสมัยใหม่เราจะได้ยินคำว่า IDE มากขึ้น โดยความหมายแล้ว IDE (Integrated Development Environment) ก็คือ เครื่องมือในการพัฒนาโปรแกรมนั่นแหละ แต่ลักษณะในการพัฒนาโปรแกรมภาษา C และ Java โดยระยะแรกๆ จะเป็นการพัฒนาโดยการเขียนคำสั่ง แล้วก็พิมพ์คำสั่งเพื่อสร้าง หรือรันโปรแกรม แต่ความซับซ้อนยุ่งยากในการพิมพ์คำสั่งยาวๆ และมีพารามิเตอร์เพิ่มมากขึ้น ประกอบกับการทำงานแบบ WYSIWYG ทำให้การเขียนโปรแกรมง่ายขึ้นมีเครื่องมือเพิ่มมากขึ้นโดยผู้พัฒนาไม่จำเป็นต้องพิมพ์คำสั่งยาวๆ อีกต่อไป จึงเป็นที่มาของ IDE

ตามหลักการแล้ว IDE แรกของโลก คือ Dartmouth BASIC ถือว่าเป็น IDE ชุดแรกที่เกิดขึ้น และต่อๆ มาก็พัฒนาเพิ่มเรื่อยมาเป็น GW-Basic และ Visual Basic

ส่วน IDE ที่นิยมในด้านของ C และ C++ ตลอดถึง Java ก็คงเป็น Eclipse และ NetBean (มาพร้อมกับๆ กับ Java) เมื่อก่อนก็จะเหมือนแยกสายกันใครที่ใช้ภาษา C ก็ไปทาง Eclipse ใครที่ใช้ Java ก็ใช้ NetBean แต่เดี๋ยวนี้ IDE นั้นเก่งขึ้นมากพัฒนาได้หลากหลาย ไม่เว้นแม้กระทั่ง PHP และ JavaScripts

หน้าจอ GW-Basic ใครที่เริ่มต้นเขียนโปรแกรมยุคแรกๆ แต่ไม่แรกสุดคงผ่านตากันมาบ้าง

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

1. คลิก New Project แล้วเลือก Application คลิกเลือก Qt Widgets Application แล้วคลิก Choose

2. พิมพ์ชื่อโปรเจกต์ลงในช่อง Name ในที่นี้ใช้ชื่อ QtMPlayer2 แล้วคลิกเลือก Next

3. ส่วนของ Kits และ Details ให้คลิก Next เพื่อผ่านไปเลยไม่ต้องกำหนดอะไรปล่อยให้โปรแกรมจัดการเองจะสะดวกกว่า

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

หน้าจอหลักของ Qt Creator

1. Menu bar เป็นที่คุ้นเคยกันดีสำหรับผู้ใช้งานเพราะเป็นส่วนประกอบแรกๆ ของโปรแกรมที่ต้องมี (แต่อาจจะไม่มีก็ได้ถ้าระบบไม่ได้ซับซ้อน)
2. Mode Selector ชื่อแปลกๆ แต่โดยรวมก็เหมือนกับ Toolbar แต่จะเป็นการเลือกโหมดของการใช้งาน ในรูปนี้จะเห็นว่ามีแถบสีดำเข้มที่ Edit แสดงว่ากำหลังเลือกโหมดการทำงานแบบการ "แก้ไข" ซึ่งเป็นการแก้ไขไฟล์โดยตรง ในรูปนี้โหมด Design ยังไม่สามารถกดเลือกได้เพราะยังไม่ได้อยู่ในไฟล์ที่มีนามสกุล .ui
3. Side bar ความหมายก็ตรงตัวและตรงการใช้งาน "แถบด้านข้าง" 😏 เป็นแถบที่แสดงรายละเอียดต่างๆ ตามที่เราเลือกในรูปภาพนี้แสดงรายละเอียดไฟล์ใน Project ซึ่งจะแบ่งเป็นกลุ่มใหญ่ คือ ชื่อโปรเจกต์ ในรูปมี QtMPlayer และ QtMPlayer2 ซึ่งอันหลังเป็นโปรเจกต์สร้างใหม่เพื่อใช้ในบทความนี้ และภายใต้โปรเจกต์นั้นก็จะแสดงส่วนประกอบต่างๆ ประกอบด้วย Header, Source, Form และจะเพิ่ม Resources ขึ้นอีก โดยในแต่ละส่วนก็จะแสดงไฟล์จริงๆ ที่มีในระบบสังเกตนามสกุลไฟล์ด้านหลังก็จะพอทราบว่ามีหน้าที่อะไร
4. อีกส่วนหนึ่งของ Side bar เพื่อให้เราสามารถเลือกดูรายละเอียดอื่นๆ ได้อีก
5. File Editor ส่วนนี้จะเป็นส่วนที่ทำงานถ้าเป็นโหมด Edit ก็จะแสดงรายละเอียดภายในไฟล์ ถ้าเป็นโหมด Design ก็จะแสดงหน้าจอเกี่ยวกับฟอร์ม
6. Output Details เป็นส่วนแสดงรายละเอียดการทำงาน หรือแสดงข้อความผิดพลาด และเป็น Console อีกด้วย โดยการเลือกก็จะเลือกจาก Output panes ในหมายเลข 7

ลองเรียกใช้งานโปรแกรม

ลำดับถัดไปให้ใช้เมาส์ดับเบิลคลิกที่ไฟล์ mainwindow.ui ซึ่งอยู่ในส่วนของ Form จะได้หน้าจอ Design และแถบโหมดใช้งานจะอยู่ที่ปุ่ม Design แล้วให้ลองคลิกปุ่มลูกศรสีเขียว สัญลักษณ์ Play หรือ Run (ในกรอบสีแดง) ก็จะได้หน้าจอเปล่าๆ แสดงขึ้นมาตรงกลางจอเหมือนในรูป

ถ้าได้แบบนี้แสดงว่าโปรแกรมไม่มีข้อผิดพลาดอะไร ก็เป็นการเริ่มต้นที่ดี แต่ถ้าพบข้อผิดพลาดอื่นๆ ก็ต้องแก้ไขตามสถานการณ์กันไป

จัดการฟอร์ม

ที่หน้าจอ window ให้คลิกขวาตามจุดที่วงกลมสีแดงแล้วเลือก Remove -> Menu bar, Toolbar และ Status bar เพราะในโปรเจกต์นี้จะไม่ใช้ส่วนประกอบเหล่านี้ แต่จะสร้างปุ่มกดขึ้นมาแทน

รายละเอียดหน้าจอ Form Design, จากรูปภาพจะแยกเป็นส่วนๆ เช่นเดิม คือ
1. Widget box เป็นส่วนที่แสดงรายละเอียด Widget หรือ Control ที่มีอยู่ในระบบ เพื่อนำมาใช้ในฟอร์มที่เราสร้างขึ้น
2. Form Editor เป็นส่วนที่ทำงานเกี่ยวกับฟอร์มของเรา
3. Form toolbar เป็นปุ่มที่เกี่ยวข้องกับฟอร์ม ทำให้กำหนดการทำงานภายในฟอร์มได้
4. Object Inspector ส่วนสำคัญอีกส่วนหนึ่งเป็นการเลือกทำงานกับ Object และทำให้มองเห็นลำดับการวางออบเจกต์ต่างๆ ได้ง่าย
5. Property editor เป็นส่วนกำหนดรายละเอียดต่างๆ ของ Object เราสามารถกำหนดตรงนี้เหมือนโปรแกรม Visual ทั้งหลาย หรือจะกำหนดในคำสั่งก็ได้
6. Signal/Slot Editor และ Action editor เป็นส่วนที่ให้เรากำหนด Action หรือเหตุการณ์ต่างๆ ได้แบบ Visual

การทำงานในส่วนของ Qt Creator จะเป็น What-You-See-Is-What-You-Get หรือ WYSIWG เราเห็นหรือสร้างอย่างไรบนฟอร์มหรือหน้าจออย่างไรก็จะเห็นแบบนั้นเมื่อสั่งรันโปรแกรม แต่รายละเอียดปลีกย่อยก็ว่ากันไปตามรูปแบบของ โปรแรกมนั้นๆ

 ตอนต่อไปจะเป็นการทำงานบนฟอร์ม โปรดติดตามกันต่อไปครับ...