พฤศจิกายน 22, 2017, 10:53:48 am *
ยินดีต้อนรับคุณ, บุคคลทั่วไป กรุณา เข้าสู่ระบบ หรือ ลงทะเบียน
ส่งอีเมล์ยืนยันการใช้งาน?

เข้าสู่ระบบด้วยชื่อผู้ใช้ รหัสผ่าน และระยะเวลาในเซสชั่น
   หน้าแรก   ช่วยเหลือ เข้าสู่ระบบ สมัครสมาชิก  
หน้า: [1]   ลงล่าง
  พิมพ์  
ผู้เขียน หัวข้อ: Qt : ส่งผ่าน Parameter จาก C++ ไป QML (Step-By-Step)  (อ่าน 1371 ครั้ง)
0 สมาชิก และ 1 บุคคลทั่วไป กำลังดูหัวข้อนี้
ShadowMan
Administrator
Hero Member
*****
ออฟไลน์ ออฟไลน์

เพศ: ชาย
กระทู้: 8267


ShadowWares


| |
« เมื่อ: มิถุนายน 03, 2015, 04:52:11 pm »

Qt : ส่งผ่าน Parameter จาก C++ ไป QML (Step-By-Step)

ต้องออกตัวก่อนว่าบทความนี้ไม่ได้กล่าวถึง Basic C++ Programming หรือ QML Programming เนื้อหานำเสนอการส่งผ่าน Parameter ระหว่าง C++ และ QML ซึ่งเป็นเรื่องที่มีประโยชน์มาก สำหรับโปรแกรมที่ต้องการทั้งความซับซ้อน และความสวยงาม (C++ จัดการเรื่องความซับซ้อน รวมถึง Hardware Interfacing ในขณะที่ QML จัดการเรื่องการแสดงผลอย่างสวยงาม ทันสมัย)

ถึงแม้เนื่อหาจะไม่ได้เขียนขึ้นสำหรับผู้เริ่มต้น แต่มีหลายขึ้นตอนที่แตกต่างจากการพัฒนาโปรแกรมด้วย Qrt Framework ที่เห็นกันทั่วไป ดังนั้นในที่นี้จะขอเริ่มตั้งแต่การสร้าง Project ใหม่ ไล่เรียงกันไปจนจบ

ในที่นี้ จะเขียบน Application ง่ายๆ โดยการให้ C++ ทำการนับค่าตัวแปรเพิ่มขึ้นทีละ 1 และให้ QML นำไปแสดงผล



1) เริ่มสร้าง Project ใหม่


2) เลือก Application | Qt Quick Application ตามด้วยคลิกปุ่ม "Choose..."


3) กำหนดชื่อ Project


4) เลือก Qt Component Set ในที่นี้เลือก "Qt Quick 2.4"


5) เลือก Kits ที่ต้องการ


6) คลิก "Finish"


7) ลบไฟล์ "MainForm.ui.qml" ออกไป (ในที่นี้จะไม่ใช้ Qt Designer เขียนทุกอย่างเอง)


8) แก้ไขโปรแกรมในไฟล์ "main.qml" ดังนี้
Code: (c)
import QtQuick 2.4
import QtQuick.Window 2.2

Window {
    visible: true
    width:  300
    height: 50
    color: "red";
}

เมื่อรันโปรแกรมจะได้ตามภาพ


9) หยุดรันโปรแกรม และแก้ไขโปรแกรมใหม่ตามนี้ (ยังไม่ต้องรัน)
Code: (c)
import QtQuick 2.4
import QtQuick.Window 2.2

Window {
    visible: true
    width:  300
    height: 50
    color: "red";

    Text {
        anchors.centerIn: parent
        text: "<h2>Counter = " + counter +"</h2>"
        color: counter>20?"green":"blue";
    }
}


บันทึกการเข้า

By SDW: Do No Wrong Is Do Nothing
          If you want to increase your success rate, double your failure rate
ShadowMan
Administrator
Hero Member
*****
ออฟไลน์ ออฟไลน์

เพศ: ชาย
กระทู้: 8267


ShadowWares


| |
« ตอบ #1 เมื่อ: มิถุนายน 03, 2015, 05:36:22 pm »

10) ทำการเพิ่ม C++ class กำหนดชื่อเป็น "MyCounter" และกำหนดการ Inherit (Base class) จาก QObject
10.1)


10.2)


10.3)


10.4)


บันทึกการเข้า

By SDW: Do No Wrong Is Do Nothing
          If you want to increase your success rate, double your failure rate
ShadowMan
Administrator
Hero Member
*****
ออฟไลน์ ออฟไลน์

เพศ: ชาย
กระทู้: 8267


ShadowWares


| |
« ตอบ #2 เมื่อ: มิถุนายน 03, 2015, 05:43:40 pm »

11) ทำการแก้ไขไฟล์ "mycounter.h" ดังนี้
Code: (c)
#ifndef MYCOUNTER_H
#define MYCOUNTER_H

#include <QObject>
#include <QQmlApplicationEngine>
#include <QQmlContext>
#include <QTimer>

class MyCounter : public QObject
{
    Q_OBJECT
public:
    explicit MyCounter(QObject *parent = 0);
    int getCounter(void){return(counter);}
    void strat(void);
private:
    int counter;
    QQmlApplicationEngine *engine;
    QTimer *timer;
signals:

public slots:
    void countUp(void);
};

#endif // MYCOUNTER_H


12) ทำการแก้ไขไฟล์ "mycounter.cpp" ดังนี้
Code: (c)
#include "mycounter.h"

MyCounter::MyCounter(QObject *parent) : QObject(parent)
{
    this->counter = 0;
    engine = new QQmlApplicationEngine();
    engine->rootContext()->setContextProperty("counter", counter);
    engine->load(QUrl(QStringLiteral("qrc:/main.qml")));
    timer = new QTimer(this);
    QObject::connect(timer, SIGNAL(timeout()), this, SLOT(countUp()));
}

void MyCounter::strat()
{
    timer->start(1000);
}

void MyCounter::countUp(void)
{
    this->counter++;
    engine->rootContext()->setContextProperty("counter", counter);
}


13) ทำการแก้ไข "main.cpp" ดังนี้
Code: (c)
#include <QGuiApplication>
#include "mycounter.h"

int main(int argc, char *argv[])
{
    QGuiApplication app(argc, argv);
    MyCounter *c = new MyCounter();
    c->strat();

    return app.exec();
}


บันทึกการเข้า

By SDW: Do No Wrong Is Do Nothing
          If you want to increase your success rate, double your failure rate
ShadowMan
Administrator
Hero Member
*****
ออฟไลน์ ออฟไลน์

เพศ: ชาย
กระทู้: 8267


ShadowWares


| |
« ตอบ #3 เมื่อ: มิถุนายน 03, 2015, 05:49:10 pm »

14) สำคัญมาก เนื่องจากเราได้ทำงานเพิ่มไฟล์ใหม่เข้ามาใน Project ดังนั้นจะต้องทำการรัน "qmake" ใหม่ และเพื่อให้มันใจว่าจะไม่มีปัญหาให้ทำตามขั้นตอนต่อไปนี้
14.1) Clean All
14.2) Run qmake
14.3) Rebuild All




15) ทำการรันโปรแกรม จะเห็น "Counter = x" นับเพิ่มขึ้นทุกๆ 1 วินาที


สิ่งที่ต้องเข้าใจคือ:
ในไฟล์ "mycounter.cpp"
Code: (c)
engine->rootContext()->setContextProperty("counter", counter); 

ตัวนี้คือตัวที่ทำการเขียนค่า counter จาก C++ ไปแสดงผลที่ QML
"counter" คือชื่อของตัวแปรที่ QML มองเห็น
counter คือตัวแปรของ C++


ใน QML เราไม่ได้ประกาศตัวแปรใดๆ แล้วตัวแปรถูกประกาศที่ไหน?
ตัวแปรดังกล่าวที่ QML มองเห็นถูกสร้างขึ้นโดย Qt


และนั่นคือการทำงานของมัน
สำหรับคนที่เขียนโปรแกรมบ่อย จะเห็นได้ว่าโปรแกรมนี้มีถึง 4 ภาษา นั่นคือ C++, HTML, QML และ JavaScript
เราทราบกันดีว่าแต่ละตัวมีความโดดเด่นต่างกัน และเมื่อความโดดเด่นถูกนำมารวมเข้าด้วยกัน ย่อมสร้าง Application มหัสจรรย์ได้ไม่ยาก


อ่านต่อตอนที่ 2: Qt : ส่ง Signal จาก QML ไปให้ C++
บันทึกการเข้า

By SDW: Do No Wrong Is Do Nothing
          If you want to increase your success rate, double your failure rate
หน้า: [1]   ขึ้นบน
  พิมพ์  
 
กระโดดไป: