qt framework and tools - github pagessahakornb.github.io/document/introduction_to_qt.pdf ·...
TRANSCRIPT
Qt Framework and tools
Author : Sahakorn Buangam
Email : [email protected]
Developer GuidesBased on windows (c/c++)
qt framework 1
ค ำน ำ
ส ำหรับเอกสำรนี้จะเป็นกำรแนะน ำเบื้องต้นส ำหรับผู้ที่สนใจจะพัฒนำซอฟท์แวร์ บน Qt- Framework
ซึ่งผู้เขียนจะแนะน ำกำรใช้งำนกำรติดตั้งและแนะน ำแนวทำงส ำหรับกำรพัฒนำต่อ ซึ่งหำกผู้อ่ำนทุกท่ำนเข้ำใจเนื้อหำในส่วนนี้ จะสำมำรถน ำไปประยุกต์ ต่อยอดกำรพัฒนำได้ ด้วยตอนนี้ส ำหรับ Qt- framework ของไทย ยังไม่ค่อยมีใครเผยแพร่ และมีผู้พัฒนำยังไม่มำก (แต่มีแนวโน้มจะพัฒนำไกล) แต่ผู้เขียนเห็นว่ำ Qt นั้นมีควำมสำมำรถมำก จึงอยำกที่จะท ำเป็นเอกสำรให้ผู้อ่ำนที่สนใจเบื้องต้นได้น ำไปใช้เริ่มต้นอย่ำงไม่ต้องเสียเวลำ ซึ่งหำกผู้อ่ำนสนใจเนื้อหำรำยละเอียด แนะน ำให้เข้ำไปศึกษำได้จำก Qt Documentation : http://doc.qt.io/
ซึ่งจะมีเนื้อหำที่ละเอียดและครบถ้วน (เป็นภำษำอังกฤษ) ส ำหรับเอกสำรนี้มิได้แสวงหำผลก ำไร หรือน ำมำหำรำยได้ แต่มีควำมมุ่งหวังจะน ำเสนอให้ นิสิต นักศึกษำ หรือผู้สน ได้เข้ำใจหลักกำรและวิธีกำรจะเริ่มต้นพัฒนำ ซึ่งหำกพบว่ำเอกสำรนี้มีกำรอ้ำงถึงบุคคลใด หรือ อ้ำงอิงจำก Material ใดแล้วท ำให้เกิดควำมผิดพลำดหรือควำมเข้ำใจไม่ตรงกัน ผู้เขียนต้องขออภัยมำ ณ ที่นี้
qt framework 2
รู้จักกับ Qt
Qt นั้นเป็นเครื่องมือในกำรพัฒนำซอฟท์แวร์ หรือ แอพพลิเคชั่นตัวหนึ่ง ซึ่งข้อดีคือสำมำรถท ำงำนแบบ ข้ำม แพลทฟอร์ม {Android, IOS, Windows, Linux/X11, OS X , Windows Runtime , WinCE} และข้อดีอีกหนึ่งอย่ำงที่ทำงผู้เขียนประทับใจคือกำรที่ Qt สำมำรถพัฒนำลงบน คอมพิวเตอร์ขนำดเล็ก หรือ Embedded Devices อย่ำงพวก Raspberry pi ฯลฯ และหำกท่ำนใดที่พอจะเข้ำใจภำษำอังกฤษ Documentation ของ Qtio เองก็มีเนื้อหำที่ครบถ้วน และยังมี Community ที่เยอะ และด้วยควำมที่ก่อนหน้ำที่ Qt เริ่มพัฒนำออกมำเขำท ำมำเพื่อ กรำฟฟิคเฟรมเวิร์ก ดังนั้น กำรท ำงำนทำงด้ำน กรำฟฟิคนั้นยอดเยี่ยมมำก ซึ่งหำกเรำจะพัฒนำซอฟท์แวร์บน Qt แล้วสำมำรถท ำได้ในหลำยๆ ระบบปฏิบัติกำร แต่ในเอกสำรนี้ ผู้เขียนจะเน้นไปที่ระบบปฏิบัติกำร windows เป็นหลัก
qt framework 3
Installation
ส ำหรับกำรติดตั้งเครื่องมือส ำหรับพัฒนำส ำหรับบน windows ท่ำนอำจจะต้องไป ดำวน์โหลดผ่ำนเว็บของ Qthttp://www.qt.io/download/ ซึ่งหำกเป็นระบบปฏิบัติกำร Linux อย่ำง Ubuntu จะสำมำรถ ลงผ่ำน apt-get ได้ ซึ่งจะสะดวกกว่ำหำกผู้ที่ช ำนำญ
ซึ่งหำกใครไม่สำมำรถดำวน์โหลดได้ ให้เข้ำไปที่ (เป็นเวอร์ชั่น 5.4.1)
http://ftp.jaist.ac.jp/pub/qtproject/archive/qt/5.4/5.4.1/
เลือกดำวน์โหลด qt-opensource-windows-x86-mingw491_opengl-5.4.1.exe
qt framework 4
Installation
qt framework 6
แถบ Source Components หำกท่ำนต้องกำร Add-Ons เพิ่มก็เลือกที่ท่ำนต้องกำร แต่หำกไม่เลือกไม่เป็นไร ติดตั้งที่หลังได้
แถบ Tools ถ้ำไม่มี MinGW 4.9.1 ก็ให้เลือกด้วย (แนะน ำให้เลือก)ส่วน Qt Extras ถ้ำใช้ก็เลือก
Installation
เมื่อท่ำนติดตั้งเสร็จแล้วจะมีหน้ำต่ำง Qt Creator ขึ้นมำนี่คือหน้ำต่ำงที่เรำจะพัฒนำโปรแกรมกัน
qt framework 7
แนะน ำเบื้องต้นส ำหรับ Qt Creator นั้นจะสำมำรถพัฒนำโปรแกรมได้หลำยแบบซึ่งสำมำรถท ำได้ทัง้ Application Library
หรือว่ำจะเป็น Non-Qt Project (ส ำหรับเป็น Compiler พวก c/c++) ซึ่งโดยทั่วไปผมจะพัฒนำ Application เป็น 2แบบ คือ Qt Widgets Application และ Qt Quick Application (QML) แต่ยังมี Qt Quick UI หรือจะเป็น Console Application ด้วย ซึ่งหำกผู้อ่ำนเข้ำใจหลักกำร คิดว่ำประยุกต์กำรพัฒนำไม่ยำกซ่ึงส ำหรับภำษำที่ใช้พัฒนำจะเป็น c/c++
qt framework 8
เริ่มสร้ำงโปรเจค Qt Widgets Application
หำกเข้ำมำหน้ำแรกจะเห็นปุ่ม New Project ให้คลิ๊กไปที่ปุ่ม หรือไปที่ File New File of Project
ที่แถบเลือก Application Qt Widgets Application Choose…
qt framework 9
เริ่มสร้ำงโปรเจค Qt Widgets Application
โดยหำกท่ำนติดตั้ง MinGW แล้วส่วนของ kits และ Compiler จะได้ดังนี้ (โดยปกติโปรแกรมจะเลือกให้อัตโนมัติ)
qt framework 11
เริ่มสร้ำงโปรเจค Qt Widgets Application
ตั้งชื่อ Class และ เลือก Base class เป็น QMainWindow (หำกไม่ตั้งไม่เป็นไรจะเลือกให้อัตโนมัติ)
qt framework 12
เริ่มสร้ำงโปรเจค Qt Widgets Application
ถ้ำไม่ใช้ Version Control พวก git ก็เลือกเป็น None ( Version Control เดี๋ยวจะพูดถึงหลังๆ)
qt framework 13
เริ่มสร้ำงโปรเจค Qt Widgets Application
ทดสอบ Build & run ปุ่ม เขียว ถ้ำไม่ผิดพลำดจะมีหน้ำต่ำงเด้งขึ้นมำแสดงว่ำติดตั้งสมบูรณ์
qt framework 14
หำกใครพบปัญหำกำร build ให้กลับไปดูกำรติดตั้งใหม่
ส่วนของ UI
qt framework 16
คลิ๊กไปที่ mainwindows.ui
หน้ำต่ำง UI
หน้ำต่ำง property
หน้ำต่ำง เคร่ืองมือ
ส่วนของ UI
qt framework 17
ในหน้ำ mainwindows.ui จะพบว่ำลักษณะจะคล้ำยกับเครื่องมือของทำง .NET (Visual studio) ซึ่งหำกใครประสบกำรณ์กับกำรพัฒนำบน Visual Studio มำก็จะใช้งำนได้อย่ำงรวดเร็ว
ส่วนหลักๆที่เรำจะเป็นต้องเรียนรู้คือ
- Property
ส่วนนี้จะเป็นส่วนที่ปรับคุณลักษณะของเครื่องมือที่เรำใช้ไม่ว่ำจะเป็น ขนำดสี รูปร่ำง ฯลฯ ซึ่งหำกดูดีๆ จะมีส่วนที่เป็น style ซึ่งหำกใครเคยเขียนเว็บ ไฟล์ css จะสำมำรถใช้ค ำสั่งเดียวกันในกำรปรับได้
- เครื่องมือต่ำงๆ ส ำหรับเครื่องมือต่ำงๆ สำมำรถดูได้จำก แถบด้ำนซ้ำย และลำกวำงได้ เลย โดยเรำสำมำรถปรับคุณลักษณะได้ จำก
Property
Hello World
qt framework 18
ให้ท ำกำรเลือกเครื่องมือ ชื่อ Label ลำดวำงบน panel และปรับขนำดให้เหมำะสม
ปรับขนำด label Property เลื่อนลงมำจนเจอ text คลิ๊ก ... และปรับขนำดและสี
ทดสอบเปลี่ยนแปลงข้อควำม mainwindow.cpp
qt framework 20
ให้ไปที่ mainwindow.cpp Edit sources mainwindow.cpp
ทดสอบเปลี่ยนแปลงข้อควำม mainwindow.cpp
qt framework 21
จะเห็นว่ำใน mainwindos.cpp จะประกอบไปด้วย constructor [MainWindow::MainWindow]
ซึ่งจะเข้ำมำท ำงำนใน Method นี้ครั้งแรก (เพิ่มเติมศึกษำ OOP) ซึ่งเรำจะลองเพิ่มค ำสั่งในกำรเปลี่ยนแปลงข้อควำม label ซึ่งมีวิธีกำรเรียกใช้งำนดังนี้
ทดสอบกำร run program