{"id":639,"date":"2024-09-08T04:54:45","date_gmt":"2024-09-08T04:54:45","guid":{"rendered":"https:\/\/blog.vishnumuthu.com\/?p=639"},"modified":"2025-02-25T14:41:15","modified_gmt":"2025-02-25T14:41:15","slug":"a-simple-understanding-of-qt-qml-cmake","status":"publish","type":"post","link":"https:\/\/blog.vishnumuthu.com\/index.php\/2024\/09\/08\/a-simple-understanding-of-qt-qml-cmake\/","title":{"rendered":"A simple understanding of qt, QML, cmake"},"content":{"rendered":"\n 

A simple understanding of qt, QML, cmake<\/strong><\/p>\n\n

The Example qt_qml_cmake_pipe github link<\/strong><\/a>,\nCreate a simple working for qt qml with cmake to show the working of QProperty.<\/p>\n\n

* This is a simple example to set up communication between qt6 and qml. <\/p>\n

* The example has simple Qml Rectangle, Text, TextField and Button. <\/p>\n

* The example also show how the QProperty READ, WRITE and NOTIFY works.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

C++<\/strong> is a versatile and powerful programming language widely used for system software, game development, real-time simulations, and large-scale applications. Its object-oriented features make it ideal for writing efficient and high-performance applications.<\/p>\n\n

CMake<\/strong> is a cross-platform build system generator that helps manage and control the build process of software projects written in C++, and other languages. It allows developers to define build processes in a platform-independent manner, generating native build configurations for compilers like Make, Ninja, or MSVC.<\/p>\n\n

QML (Qt Modeling Language)<\/strong> is a declarative language used primarily for designing user interfaces in Qt applications. It enables the creation of dynamic, fluid, and highly customizable UIs with ease. QML, together with C++, is commonly used in modern GUI-based applications to combine robust backend logic with sleek, responsive front-end designs.<\/p>\n\n

In Qt, the Q_PROPERTY macro is used to declare properties of a class that can be accessed by Qt’s meta-object system, making them available to QML or other parts of the Qt framework for binding, signaling, and other features. This macro allows properties to be readable, writable, and notifyable for changes.<\/p>\n\n

Components:<\/strong><\/p>\n\n

READ:<\/strong> Specifies the function to read the property\u2019s value (getter).<\/p>\n

WRITE:<\/strong> Specifies the function to set or modify the property\u2019s value (setter).<\/p>\n

NOTIFY:<\/strong> Specifies a signal that is emitted when the property value changes.<\/p>\n\n\n\n

\/\/ pipe.h\nclass Pipe : public QObject\n{\n    Q_OBJECT\n    QML_ELEMENT\n    \/\/ the NOTIFY property calls the READ function when triggered and the\n    \/\/ WRITE function send the data from qml to cpp code.\n    Q_PROPERTY(int data_1 READ getdata_1 WRITE setData_1 NOTIFY data_1Changed FINAL)\n    Q_PROPERTY(int data_2 READ getdata_2 WRITE setData_2 NOTIFY data_2Changed FINAL)\n\npublic:\n    explicit Pipe(QObject *parent = nullptr);\n\n    int getdata_1();\n    void setData_1(int value);\n\n    int getdata_2();\n    void setData_2(int value);\n\nsignals:\n    void data_1Changed();\n    void data_2Changed();\n\nprivate:\n    int data_1, data_2;\n};\n<\/code><\/pre>\n\n\n\n
Explanation:<\/strong><\/p>\n\n
READ:<\/strong> The getter getdata_1() is called to retrieve the value of data_1.<\/p>\n\n
WRITE:<\/strong> The setter setData_1() is used to change the value of data_1. It ensures that changes are tracked, and the signal is emitted only when the value actually changes.<\/p>\n\n
NOTIFY:<\/strong> The signal data_1Changed() is emitted when the property is updated, allowing other parts of the application (such as UI bindings in QML) to react to the change.<\/p>\n\n
This mechanism is essential for data binding and interaction between the backend (C++) and the front-end (QML) in Qt applications.<\/p>\n\n\n\n
\/\/ pipe.cpp\nPipe::Pipe(QObject *parent)\n    : QObject{parent}\n{\n    data_1 = 0;\n    data_2 = 0;\n}\n\nint Pipe::getdata_1()\n{\n    return data_1;\n}\n\nvoid Pipe::setData_1(int value)\n{\n    std::cout << \"Data: \" << value << std::endl;\n    data_1 = value;\n    data_1++;\n\n    \/\/ emit data_1Changed(); \/\/ Block the NOTIFY property calls the READ function when triggered\n}\n\nint Pipe::getdata_2()\n{\n    return data_2;\n}\n\nvoid Pipe::setData_2(int value)\n{\n    std::cout << \"Data: \" << value << std::endl;\n    data_2 = value;\n    data_2++;\n\n    emit data_2Changed(); \/\/ the NOTIFY property calls the READ function when triggered\n}\n<\/code><\/pre>\n\n\n\n
QML part below:<\/strong><\/p>\n\n\n\n
\/\/Main.qml\nimport QtQuick\nimport QtQuick.Controls\nimport qml_pipe\n\nWindow {\n    width: 640\n    height: 480\n    visible: true\n    title: qsTr(\"QML Pipe Example\")\n\n    \/\/ Fixed size\n    maximumHeight: height\n    maximumWidth: width\n    minimumHeight: height\n    minimumWidth: width\n\n    Pipe{\n        id : process\n    }\n\n    Rectangle{\n        id: left_side\n        anchors.left: parent.left\n        width: parent.width \/ 2\n        height: parent.height\n        color: \"orange\"\n\n        TextField{\n            id: left_field\n            x: 0\n            y: 0\n            width: parent.width\n            height: 40\n        }\n\n        Button{\n            id: left_click\n            x : 0\n            y : 50\n            text: \"Button_1\"\n            width: parent.width\n            height: 40\n            onClicked: process.data_1 = left_field.text\n        }\n\n        Text {\n            id: left_text\n            x : 0\n            y : 100\n            width: parent.width\n            height: 40\n            text: process.data_1\n            font.family: \"Helvetica\"\n            font.pointSize: 12\n            color: \"black\"\n            horizontalAlignment: Text.AlignHCenter\n            verticalAlignment: Text.AlignVCenter\n        }\n    }\n\n    Rectangle{\n        id: right_side\n        anchors.right: parent.right\n\n        width: parent.width \/ 2\n        height: parent.height\n        color: \"green\"\n\n        TextField{\n            id: right_field\n            x: 0\n            y: 0\n            width: parent.width\n            height: 40\n        }\n\n        Button{\n            id: right_click\n            x : 0\n            y : 50\n            text: \"Button_2\"\n            width: parent.width\n            height: 40\n            onClicked: process.data_2 = right_field.text\n        }\n\n        Text {\n            id: right_text\n            x : 0\n            y : 100\n            width: parent.width\n            height: 40\n            text: process.data_2\n            font.family: \"Helvetica\"\n            font.pointSize: 12\n            color: \"black\"\n            horizontalAlignment: Text.AlignHCenter\n            verticalAlignment: Text.AlignVCenter\n        }\n    }\n}\n<\/code><\/pre>\n\n\n\n
Explanation:<\/strong><\/p>\n\n
From QML, when the Button (right_click) is clicked the value in the TextField(right_field) is read and send to the cpp data_2. Here, there is a simple incremental part and emit is triggered to send the data back to Text(right_text). Also since the emit is commented in data_1, there is no change in lift side.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n  \n\n\n\n
\n
Next post: A simple understanding of qthread<\/a><\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
  A simple understanding of qt, QML, cmake The Example qt_qml_cmake_pipe github link, Create a simple working for qt qml with cmake to show the working of QProperty. * This is a simple example to set up communication between qt6 and qml. * The example has simple Qml Rectangle, Text, TextField and Button. * The […]<\/p>\n","protected":false},"author":1,"featured_media":660,"comment_status":"open","ping_status":"open","sticky":false,"template":"wp-custom-template-template-cpp","format":"standard","meta":{"footnotes":""},"categories":[133],"tags":[137,134,136,135],"class_list":["post-639","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-cpp","tag-cmake","tag-cpp","tag-qml","tag-qt"],"_links":{"self":[{"href":"https:\/\/blog.vishnumuthu.com\/index.php\/wp-json\/wp\/v2\/posts\/639","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.vishnumuthu.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.vishnumuthu.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.vishnumuthu.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.vishnumuthu.com\/index.php\/wp-json\/wp\/v2\/comments?post=639"}],"version-history":[{"count":2,"href":"https:\/\/blog.vishnumuthu.com\/index.php\/wp-json\/wp\/v2\/posts\/639\/revisions"}],"predecessor-version":[{"id":662,"href":"https:\/\/blog.vishnumuthu.com\/index.php\/wp-json\/wp\/v2\/posts\/639\/revisions\/662"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.vishnumuthu.com\/index.php\/wp-json\/wp\/v2\/media\/660"}],"wp:attachment":[{"href":"https:\/\/blog.vishnumuthu.com\/index.php\/wp-json\/wp\/v2\/media?parent=639"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.vishnumuthu.com\/index.php\/wp-json\/wp\/v2\/categories?post=639"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.vishnumuthu.com\/index.php\/wp-json\/wp\/v2\/tags?post=639"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}