Qt Framework and tools - GitHub Pagessahakornb.github.io/document/introduction_to_qt.pdf · แบบ คือ Qt Widgets Application และ Qt Quick Application (QML) แต่ยังมี

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 5

ให้ท ำกำรเลือก MinGW 4.9.1 ด้วยที่แถบ Qt 5.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

เลือก Location ส ำหรับโปรเจค

qt framework 10

เริ่มสร้ำงโปรเจค 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 ให้กลับไปดูกำรติดตั้งใหม่

โครงสร้ำงเบื้องต้น

qt framework 15

ส่วนโค้ด

ส่วน UI

ไฟล์โค้ด

Header file

ส่วนของ 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 คลิ๊ก ... และปรับขนำดและสี

Hello World

qt framework 19

ปรับขนำดให้แสดงข้อควำมทั้งหมด ทดสอบ build & Run

ทดสอบเปลี่ยนแปลงข้อควำม 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

ทดสอบเปลี่ยนแปลงข้อควำม mainwindow.cpp

qt framework 22

จะพบว่ำตัวอักษรที่เรำตั้งไว้ตอนแรกได้ เป็นสีแดง ขนำด 18 หำยไป กลำยเป็น Default ดังนั้นในกำรสั่งกำรจำก cpp ไปสู่หน้ำ UI เรำต้องตั้งค่ำขนำดและสีด้วยด้วย ซึ่งผมจะใช้ Stylesheet ในกำรสั่งงำน ซึ่งสำมำรถศึกษำเพิ่มเติมได้

ทดสอบกำร run program