โปรแกรมแรกจาก Qt และรายละเอียดในไฟล์ต่างๆ

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

ขั้นตอนการสร้างโปรแกรม

หลังจากเปิดโปรแกรมและคลิก New Project แล้วให้เลือก Application > Qt Widgets Application แล้วคลิก Choose

กำหนดชื่อในช่อง Name และเลือกแหล่งเก็บไฟล์ในช่อง Create in หรือจะปล่อยให้เก็บตามปกติก็ได้ แล้วคลิก Next

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

รายละเอียด Class ปกติจะกำหนดเป็น MainWindow เราสามารถเปลี่ยนแปลงได้ แต่เริ่มแรกให้คลิก Next ก่อน

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

เมื่อคลิก Finish จะได้หน้าจอหลักในการเขียนโปรแกรมโดยจะเปิดไฟล์ mainwindow.cpp ซึ่งเป็นไฟล์หลักของ GUI

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

รายละเอียดโปรเจกต์

รายละเอียดไฟล์ใน Project

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

ในรายละเอียดโปรเจกต์ให้คลิกที่ Edit จากทูลบาร์ด้านซ้ายมือ จะมีรายละเอียดในส่วนโปรเจกต์ (Todo) ภายใต้โปรเจกต์จะมีส่วนของ Headers, Sources และ Forms โดยมีรายละเอียดดังนี้

Todo เป็นชื่อโปรเจกต์จะมีไฟล์ Todo.pro เก็บรายละเอียดเกี่ยวกับโปรเจกต์ไว้ เมื่อใช้เมาส์ดับเบิลคลิกที่ Toto.pro จะมีรายละเอียดดังนี้

รายละเอียดไฟล์ .pro

โดยพื้นฐานแล้วในไฟล์ .pro จะประกอบด้วย

QT += core gui

เป็นการระบุโมดูลของ Qt ที่จะใช้ในระบบในนี้มี core เป็นระบบหลัก และ gui ที่เกี่ยวกับ Graphics ต่างๆ

TAGET = Todo 

ชื่อไฟล์ที่สร้างเป็น Application ในที่นี้จะสร้างไฟล์ Todo เก็บไว้ในโฟลเดอร์ที่ระบุไว้แต่แรก ผู้เขียนเก็บไฟล์ทั้งหมดไว้ใน Qt-Projects ภายในโฟลเดอร์นั้นจะมีโฟลเดอร์ย่อย Todo ตามชื่อโปรเจกต์ และจะสร้างโฟลเดอร์ Build-... อีกโฟลเดอร์หนึ่งมื่อมีการสั่งรันหรือสร้างโปรแกรม

โฟลเดอร์ Qt-Projects สำหรับเก็บโปรเจกต์ที่สร้างขึ้น เมื่อคลิกรันหรือสร้างโปรแกรมจะมีโฟลเดอร์ build-Todo- เพิ่มขึ้น 

ภายในโฟลเดอร์ build-Todo... จะมีไฟล์ที่สร้างขึ้นโดยมีชื่อ Todo ตามที่กำหนดไว้ใน Todo.pro

TEMPLATE = app

กำหนดให้ใช้รูปแบบโปรแกรมเป็น Application


SORCES += main.cpp mainwindow.cpp

ไฟล์โค้ดโปรแกรมประกอบด้วย main.cpp เป็นระบบไฟล์หลักของภาษา C++ และไฟล์ MainWindow.cpp เป็นพื้นที่ควบคุมการทำงานของ gui โดยปกติแล้วทั่วไปจะใช้ main.cpp ในการเขียนโปรแกรมแต่ Qt จะแยก mainwindow.cpp ออกมาเพื่อสะดวกต่อการเขียนโปรแกรมเกี่ยวกับ gui

HEADER += mainwindow.h

เป็นไฟล์เก็บส่วนที่เรียกใช้งานของระบบอื่นๆ ตามรูปแบบของภาษาซีในที่นี้จะเก็บไว้ในไฟล์ชื่อ mainwindow.h

FORMS += mainwindow.ui

เป็นไฟล์ xml เก็บรายละเอียดของแบบฟอร์มที่เป็น gui ของระบบ ซึ่งเป็นจุดเด่นของการพัฒนาโปรแรกมด้วย Qt ที่สามารถแก้ไข เปลี่ยนแปลง โปรแกรมผ่านหน้าจอแบบ gui ทำให้มีรูปแบบการทำงานคล้ายๆ กับ Visual Studio เลยทีเดียว ซึ่งแตกต่างจาก IDE อื่นๆ เช่น Eclipse หรือ NetBean

main.cpp

#include "mainwindow.h"
#include <QApplication>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    MainWindow w;
    w.show();

    return a.exec(); 
}

ในไฟล์ main.cpp จะมีหน้าที่สองอย่าง คือ

1. กำหนดและแสดงผลหน้าจอหลัก
2. เรียกใช้งาน QApplication เพื่อสร้างระบบต่างๆ ในโปรแกรม

โดยออบเจ็กต์ w จะเชื่อมไปยังคลาส Maindow และโปรแกรมจะแสดงผลหน้าต่างด้วยคำสั่ง w.show(); สุดท้ายก็ย้อนกลับไปแต่ไม่ออกจากโปรแกรมเพราะยังอยู่ในส่วน events ของ QApplication ด้วยคำสั่ง return a.exec() เพื่อกลัยไปรอรับการทำงานอื่นๆ เช่น คลิกเมาส์ กดคีย์บอร์ด 

mainwindow.h

#ifndef MAINWINDOW_H

#define MAINWINDOW_H

#include <QMainWindow>

namespace Ui {

class MainWindow;

}

class MainWindow : public QMainWindow

{

    Q_OBJECT

public: 

    explicit MainWindow(QWidget *parent = 0);

    ~MainWindow();

private:

    Ui::MainWindow *ui;

};

#endif //MAINWINDOW_H

ในไฟล์ mainwindow.h จะสร้างคลาสชื่อ MainWindow ขึ้นมาโดยสืบทอดมาจากคลาส QMainWindow และในไฟล์นี้จะกำหนด namespace ชื่อ Ui เพื่อเรียกใช้ในระบบ

Q_OBJECT เป็นมาโครที่กำหนดไว้ในส่วนไฟล์เฮดเดอร์ เพื่อรองรับการใช้งาน Signal/Slot เคยมีคนเขียนไว้ในอินเตอร์เน็ตบอกว่า ไม่ใส่ไว้ในโปรแกรมก็ได้ถ้าไม่ใช้ Signal และ Slot แต่อย่างไรก็ตามในการเขียนโปรแกรมด้วย Qt จุดเด่นหรือหลักการใหญ่ของระบบคือ การใช้ Signal และ Slot ดังนั้นจึงควรใส่ไว้ในคลาสทุกครั้ง

QWidget เป็นส่วนประกอบของ UI ประกอบไปด้วยชิ้นส่วนต่างๆ ที่เราใช้ประกอบเข้าเป็นโปรแกรม เช่น ข้อความ กล่องรับข้อความ รูปภาพ ปุ่มกดต่างๆ ฯลฯ

mainwindow.cpp

#include "mainwindow.h"

#include "ui_mainwindow.h"

MainWindow::MainWindow(QWidget *parent):

    QMainWindow(parent), ui(new Ui::MainWindow)

{

    ui->setupUi(this);

}

MainWindow::~MainWindow()

{

    delete ui;

}

ในไฟล์ mainwindow.cpp จะกำหนดในส่วนของส่วนประกอบต่างๆ ที่เป็น gui สำหรับในในฟอร์ม mainwindow.ui  โดยกำหนดออบเจ็กต์ไว้ชื่อ ui และกำหนดค่าเริ่มต้นต่างๆ ให้กับ widgets ทั้งหมดผ่านคำสั่ง setupUi(this) 

การเขียนโปรแกรมต่างๆ สามารถเขียนหลังบรรทัด ui-setupUi(this) นี่แหละ

การนำเข้าไฟล์จากส่วน include

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

#include "mainwindow.h"
#include <QApplication>

แต่สองบรรทัดนี้ไปเพิ่มไฟล์ที่เกี่ยวข้องเข้ามาอีกเป็นสิบ จากรูปภาพในกรอบสีน้ำเงินจะเห็นว่าในส่วนของ mainwindow.h และ QApplication จะเพิ่มไฟล์ย่อยอีกหลายไฟล์

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

เราสามารถคลิกดูการนำเข้าไฟล์ต่างๆ ได้จากหน้าต่าง Include Hierarchy