วันศุกร์ที่ 28 มิถุนายน พ.ศ. 2556

Qt 5.0 Programming I : getting start with Qt 5.0

ก่อนจะมาเริ่มถึงการเขียน code เรามาคุยกันก่อนว่า Qt คืออะไรดีอย่างไรนะครับ Qt อ่านออกเสียงว่าคิวต์ (cute) จากที่ใช้มา อาทิตย์กว่าๆ เป็น tools ที่ใช้พัฒนา software บน OS อะไรก็ได้ ไม่ว่าจะเป็น OSX, Linux, Windows โดยที่เขียน source code ครั้งเดียว แล้วเราต้องการจะนำไปใช้กับระบบปฏิบัติการไหนก็นำ source code ไป compile ที่ OS นั้นๆ หากดูแล้วจะคล้ายๆ กับหลักการของ Java แต่แตกต่างกับที่ Java นั้นตัว byte code จะต้องถูก execute ด้วยตัว JVM อีกที (Java virtual machine) แต่ตัว binary ที่ได้จาก Qt นั้นจะเป็น native binary สำหรับใช้ execute ใน OS นั้นๆ ได้โดนตรงเลย Qt application นั้นสามารถนำมารันได้ทั้งใน Windows, Linux, eLinux(เช่น raspberry pi, beaglebone), Blackberry, Andriod, OSX

เครื่องมือที่ใช้ในการพัฒนา Qt นั้นชื่อ Qt Creator โดยสามารถดาวน์โหลดได้ที่ http://qt-project.org/downloads ในการพัฒนา application ด้วย Qt แบ่งได้เป็น 2 รูปแบบหลักๆ คือ

Qt Quick Application

เป็นการพัฒนา Application ด้วยภาษา QML (Qt Meta-Object Language) ซึ่งเป็นภาษาในลักษณะบรรยาย เหมือนกับ HTML ซึ่ง QML ถ้าลองเขียนดูแล้ว syntax ให้ความรู้สึกเหมือน Java script บวกกับ CSS มาก (เข้าทางคนทำเว็ปเลย ^^ ) QML จะใช้ในการเขียนเพื่อจัดการในส่วนของ UI ซึ่งข้อนี้ทำได้ดีมากๆ ส่วนการทำงาน background นั้นก็ใช้ C++ เขียนจัดการได้ เช่นการจัดการไฟล์ network หรืออุปกรณ์อื่นๆ

Qt GUI Application

ตัวนี้ถ้าใครเคยเขียน MFC มาจะรู้เลยว่ามันอารมณ์เดียวกับเลยมี object ให้ลากๆ วางๆ และ code ก็เขียนด้วยภาษา C++

เริ่มกันเบย หลังจากติดตั้ง Qt Creator เสร็จเรียบร้อยแล้วเรามาเริ่มสร้าง project กัน

หน้าตาโปรแกรม Qt Creator

ไปที่ New File or New Project เพื่อสร้าง project ใหม่

เลือก Application แบบ Qt Quick 2 Application (Build-in Elements) เพื่อสร้าง project Qt

ตั้งชื่อ project Qt ในนี้ใช่ชื่อว่า MyFirstQ หลังจากนี้ continue

ตั้งค่า Kits และ folder แบบ debug, release

ในส่วนนี้ใส่ version control และ Done

หลังจากสร้าง project เสร็จทาง Qt จะสร้าง file main.qml เป็น default มาให้เป็นไฟล์หลักพร้อมทั้ง code Hello World ซึ่ง code เมื่อ run ก็จะทำงานโดยสร้าง form และพิมพ์ว่า Hello World ที่กลาง form เมื่อ click ที่ form application จะปิด