Qt 5 Programming X : Call C++ Method

     สวัสดีครับ มิตรรักแฟนเพลงทุกท่าน ต้อนรับตัวเองในการกลับมาเขียน Blog เกี่ยวกับ Qt QML อีกครั้งหลังจากห่างหายไปนานถึง 2 ป๊ 555+ พอดีมีเหตุต้องใช้งานกัน เขียนล่าสุดตอนนั้น Qt ยัง version 5.0 อยู่เลย ตอนนี้ไป 5.5 แล้วเอาเฮย์ย์ย์ย์ย์ย์ พอดีต้องไปสอนพี่ๆ น้องๆ เขียน Qt ก็เลยต้องมานั่งอ่านนั่งทำ อันที่จริงวิธีการเเรียก Method ของ Class ใน C++ อันนี้ผมเคยเขียนโค๊ดไว้และตั้งใจจะจดไว้ใน blog แต่ว่าด้วยอะไรหลายๆ อย่างทำให้ไม่ได้ทำ วันนี้ได้ฤกษ์ดี จัดซะหน่อย มาเริ่มกันเลยครับ โดยครั้งนี้จะอธิบายจากตัวอย่างโปรแกรมที่เขียนขึ้นนะครับ เพราะว่าดูแล้วมันซับซ้อน อันที่จริงผมเขียนเอง ผมก็ยัง งง งง กับมันอยู่เลย เอาเป็นว่า มือใหม่ แนะนำมือใหม่กว่าแล้วกันครับ โปรแกรมที่ทำขึ้นเป็นตัวอย่างจะแสดงตัวอย่างการ get, set ผ่าน method และการ call method อย่างเดียว

     โปรแกรมตัวอย่างจะเป็นเป็น 3 ส่วนนะครับ ส่วนสีแดง คือส่วนของการแสดงผล (get) ส่วนสีเขียวคือส่วนการเปลี่ยนค่าโดยจะบวกด้วย 1 ไปเรื่อยๆ  (set) และส่วนสุดท้ายคือการเปลี่ยนค่าเป็น 1 โดยไม่ส่ง parameter

     สร้าง class ใหม่ ผมจะตั้งชื่อว่า calculator นะครับ

     class ที่สร้างใหม่จะต้องเลือก Base เป็น QObject ด้วยนะครับ

ที่ไฟล์ main.cpp และ calculator.h จะต้อง include ตามนี่ครับ

ไฟล์ calculator.h เพิ่ม Q_PROPERTY เพื่อประกาศให้ส่วน QML รู้ว่ามีตัวแปรที่สามารถเข้าถึงได้ จากตัวอย่าง เป็นตัวแปรชื่อ number ถ้าจะอ่านข้อมูลจะเรียกใช้งาน method ชื่อ get_number และถ้าจะเขียนค่าลงที่ตัวแปร number จะเรียกใช้งานผ่าน method set_number ส่วน NOTIFY คือถ้ามี event เปลี่ยนแปลงที่ตัวแปลนี้จะเกิด event ขึ้นกับ QML

ในไฟล์ calculator.h ประกาศตัวแปร Method และ signal ที่ต้องการใช้นะครับ
ตัวแปร num ใช้เก็บตัวเลขที่เราจะบวกนะครับ ประกาศเป็น interger 32 bit
method get_number ใช้อ่านค่าตัวแปร num set_number ใช้กำหนดค่าลงตัวแปร num
signal number_changed เป็น event เวลาที่ค่าตัวเลข num เปลี่ยนแปลง
method do_clear ใช้กำหนดค่าตัวแปร num ให้เท่ากับ 1

ไฟล์ calculator.cpp method ต่างๆ ทำงานแบบนี้ครับ

ไฟล์ main.cpp จะต้อง register type ของ calculator ลงไปให้ QML รู้จัก ซึ่งมีรูปแบบดังนี้

qmlRegisterType<CLASS_NAME>("MODULE_NAME",VERSION,SUB_VERSION,"ELEMENT_NAME")

Note: ELEMENT_NAME ชื่อต้องขึ้นต้นด้วยตัวใหญ่นะครับ

ไฟล์ main.qml  ให้ import module calculator โดยใช้ชื่อและ version ของ module

import my.calculator 1.0

จากนั้นก็สามารถเรียกใช้งานแบบ element ทั่วไปได้เลยครับ

	#include "calculator.h"
	calculator::calculator()
	{
	this->num = 0;
	}
	qint32 calculator::get_number()
	{
	return this->num;
	}
	void calculator::set_number(const qint32 &num)
	{
	this->num = this->num + num;
	emit number_changed();
	}
	bool calculator::do_clear()
	{
	this->num = 1;
	emit number_changed();
	return true;
	}

view raw calculator.cpp hosted with ❤ by GitHub

	#ifndef CALCULATOR_H
	#define CALCULATOR_H
	#include <QObject>
	#include <QGuiApplication>
	#include <QQmlApplicationEngine>
	#include <QQmlEngine>
	#include <QQmlContext>
	#include <QQmlComponent>
	class calculator : public QObject
	{
	Q_OBJECT
	Q_PROPERTY(qint32 number READ get_number WRITE set_number NOTIFY number_changed)
	Q_PROPERTY(bool clear READ do_clear NOTIFY number_changed)
	private:
	qint32 num;
	public:
	calculator();
	qint32 get_number();
	void set_number(const qint32 &num);
	bool do_clear();
	signals:
	void number_changed();
	public slots:
	};
	#endif // CALCULATOR_H

view raw calculator.h hosted with ❤ by GitHub

	#include <QGuiApplication>
	#include <QQmlApplicationEngine>
	#include <QQmlEngine>
	#include <QQmlContext>
	#include <QQmlComponent>
	#include "calculator.h"
	int main(int argc, char *argv[])
	{
	qmlRegisterType<calculator>("my.calculator", 1, 0, "Cal");
	QGuiApplication app(argc, argv);
	QQmlApplicationEngine engine;
	engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
	return app.exec();
	}

view raw main.cpp hosted with ❤ by GitHub

	import QtQuick 2.3
	import QtQuick.Window 2.2
	import my.calculator 1.0
	Window {
	id: main
	visible: true
	width: 400
	height: 300
	Cal
	{
	id : cal
	Component.onCompleted:
	{
	number = 1;
	}
	}
	Rectangle {
	id: rec_show
	x:0
	y:0;
	width: main.width
	height: main.height/3;
	color:"#fa5f5f"
	border.color: "gray"
	border.width: 2
	Text
	{
	anchors.centerIn: parent
	text: cal.number
	font.pixelSize: 80
	}
	}
	Rectangle {
	id: rec_plus
	x:0
	y:rec_show.y + rec_show.height;
	width: main.width
	height: main.height/3;
	color:"#76fa5f"
	border.color: "gray"
	border.width: 2
	Text {
	font.pixelSize: 100;
	text: qsTr("++")
	anchors.centerIn: parent
	}
	MouseArea {
	anchors.fill: parent
	onClicked: {
	cal.number = 1
	}
	}
	}
	Rectangle {
	id: rec_clear
	x:0
	y:rec_plus.y + rec_plus.height;
	width: main.width
	height: main.height/3;
	color:"#5faffa"
	border.color: "gray"
	border.width: 2
	Text {
	font.pixelSize: 80;
	text: qsTr("clear")
	anchors.centerIn: parent
	}
	MouseArea {
	anchors.fill: parent
	onClicked: {
	cal.clear
	}
	}
	}
	}

view raw main.qml hosted with ❤ by GitHub

<< Qt 5.0 Programming IX : Anchor
>> AppStack.cc