{"id":2474,"date":"2025-10-17T12:40:42","date_gmt":"2025-10-17T03:40:42","guid":{"rendered":"https:\/\/www.freelifemakers.org\/wordpress\/?p=2474"},"modified":"2025-10-20T10:11:06","modified_gmt":"2025-10-20T01:11:06","slug":"qtexample9-qml-new-window","status":"publish","type":"post","link":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/2025\/10\/17\/qtexample9-qml-new-window\/","title":{"rendered":"[QT]example9-QML-New Window"},"content":{"rendered":"\n<p>\ud83d\udc49 \ubc84\ud2bc \ud074\ub9ad\uc2dc \ub2e4\uc774\uc5bc\ub85c\uadf8 \ucc3d\uacfc \uc0c8\ub85c\uc6b4 \ucc3d\uc744 \uc624\ud508\ud569\ub2c8\ub2e4.<br>When you click the button, a dialog window and a new window open.<\/p>\n\n\n\n<p>\ud83d\udc49 \uc0c8\ub85c\uc6b4 \ucc3d\uc5d0\uc11c \ud14d\uc2a4\ud2b8 \uc785\ub825\ud558\uace0 \ubc84\ud2bc \ud074\ub9ad\uc2dc mainwindow\uc758 \ub77c\ubca8\uc5d0 \ud14d\uc2a4\ud2b8\uac00 \ucd9c\ub825\ub429\ub2c8\ub2e4.<br>Enter text in a new window and click the button to display the text in the label of the mainwindow.<\/p>\n\n\n\n<p>\ud83d\udc49 \uc0c8\ub85c\uc6b4\ucc3d\uacfc \uc774\uc804 \ucc3d \uc0ac\uc774\uc758 \ubcc0\uc218 \uc804\ub2ec\uc740 \uc2dc\uadf8\ub110\uacfc \uc2ac\ub86f\uc744 \uc0ac\uc6a9\ud569\ub2c8\ub2e4.<br>Passing variables between new and old windows uses signals and slots.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"249\" height=\"329\" src=\"https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2025\/10\/9-1.png\" alt=\"\" class=\"wp-image-2481\" srcset=\"https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2025\/10\/9-1.png 249w, https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2025\/10\/9-1-227x300.png 227w\" sizes=\"auto, (max-width: 249px) 100vw, 249px\" \/><\/figure>\n\n\n\n<p>Project WIndow<\/p>\n\n\n\n<p><strong>1.CMakeLists.txt<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>cmake_minimum_required(VERSION 3.16)\n\nproject(example9 VERSION 0.1 LANGUAGES CXX)\n\nset(CMAKE_CXX_STANDARD_REQUIRED ON)\n\nfind_package(Qt6 REQUIRED COMPONENTS Quick)\n\nqt_standard_project_setup(REQUIRES 6.8)\n\nqt_add_executable(appexample9\n    main.cpp\n)\n#-- qml \ud30c\uc77c \ucd94\uac00 \/ Add qml files --\nqt_add_qml_module(appexample9\n    URI example9\n    VERSION 1.0\n    QML_FILES\n        Main.qml\n        qml\/mainwindow.qml\n        qml\/dialog.qml\n        qml\/newwindow.qml\n)\n\n# Qt for iOS sets MACOSX_BUNDLE_GUI_IDENTIFIER automatically since Qt 6.1.\n# If you are developing for iOS or macOS you should consider setting an\n# explicit, fixed bundle identifier manually though.\nset_target_properties(appexample9 PROPERTIES\n#    MACOSX_BUNDLE_GUI_IDENTIFIER com.example.appexample9\n    MACOSX_BUNDLE_BUNDLE_VERSION ${PROJECT_VERSION}\n    MACOSX_BUNDLE_SHORT_VERSION_STRING ${PROJECT_VERSION_MAJOR}.${PROJECT_VERSION_MINOR}\n    MACOSX_BUNDLE TRUE\n    WIN32_EXECUTABLE TRUE\n)\n\ntarget_link_libraries(appexample9\n    PRIVATE Qt6::Quick\n)\n\ninclude(GNUInstallDirs)\ninstall(TARGETS appexample9\n    BUNDLE DESTINATION .\n    LIBRARY DESTINATION ${CMAKE_INSTALL_LIBDIR}\n    RUNTIME DESTINATION ${CMAKE_INSTALL_BINDIR}\n)\n<\/code><\/pre>\n\n\n\n<p><strong>2.qml\/dialog.qml<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\n\/\/ dialog.qml\nimport QtQuick 2.15\nimport QtQuick.Controls 2.15\nimport QtQuick.Layouts 1.15\n\nWindow {\n    id: dialogWindow\n    width: 400\n    height: 300\n    title: \"Dialog Window\"\n    visible: false\n    modality: Qt.ApplicationModal \/\/ \ubaa8\ub2ec\ucc98\ub7fc \ub3d9\uc791 \/ behaves like a modal\n    Rectangle {\n        anchors.fill: parent\n        color: \"#f0f0f0\" \/\/ \ubc30\uacbd \uc0c9\uc0c1 \/ background color\n\n\n        ColumnLayout {\n            anchors.fill: parent\n            spacing: 20\n            \/\/padding: 20\n\n            Label {\n                text: \"\uc774\uac83\uc740 \uc0c8 \ucc3d\uc785\ub2c8\ub2e4 \/ This is a new window\"\n                horizontalAlignment: Text.AlignHCenter\n                Layout.alignment: Qt.AlignHCenter\n            }\n            RowLayout {\n                Layout.alignment: Qt.AlignHCenter\n                spacing: 20\n\n                Button {\n                    text: \"\ud655\uc778\/Confirm\"\n                    Layout.preferredWidth: 80\n                    onClicked: dialogWindow.close()\n                }\n\n                Button {\n                    text: \"\ucde8\uc18c\/Cancle\"\n                    Layout.preferredWidth: 80\n                    onClicked: dialogWindow.close()\n                }\n            }\n\n        }\n    }\n}\n<\/code><\/pre>\n\n\n\n<p><strong>3.qml\/mainwindow.qml<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import QtQuick 2.15\nimport QtQuick.Controls 2.15\nimport QtQuick.Layouts 1.15\n\n\n    \/\/ \uc911\uc559 \uc704\uc82f \/ Central Widget\n    Rectangle {\n        anchors.fill: parent\n        color: \"#f0f0f0\"\n\n        \/\/ \ud14d\uc2a4\ud2b8 \ub77c\ubca8 \/ Text Label\n        Label {\n            id: label\n            text: \"TextLabel\"\n            width: 221\n            height: 20\n            anchors.horizontalCenter: parent.horizontalCenter\n            anchors.top: parent.top\n            anchors.topMargin: 270\n            horizontalAlignment: Text.AlignHCenter\n            verticalAlignment: Text.AlignVCenter\n        }\n\n        \/\/ \uccab \ubc88\uc9f8 \ubc84\ud2bc \/ First Button\n        Button {\n            id: pushButton\n            text: \"PushButton\"\n            width: 75\n            height: 24\n            anchors.horizontalCenter: parent.horizontalCenter\n            anchors.top: label.bottom\n            anchors.topMargin: 30\n\n            onClicked: {\n                var component = Qt.createComponent(\"newwindow.qml\")\n                if (component.status === Component.Ready) {\n\n                    \/\/== \uc2ac\ub86f\/Slot ==\n                    var newWindowInstance = component.createObject(pushButton)\n                    newWindowInstance.textSubmitted.connect(function(text) {\n                        label.text = text\n                        console.log = \"Slot\"\n                    })\n                    \/\/====\n\n                    newWindowInstance.visible = true\n                } else {\n                    console.error(\"\uc0c8 \ucc3d\uc744 \ub85c\ub4dc\ud560 \uc218 \uc5c6\uc2b5\ub2c8\ub2e4.\/The new window cannot be loaded.\")\n                }\n            }\n\n        }\n\n        \/\/ \ub450 \ubc88\uc9f8 \ubc84\ud2bc \/ Second Button\n        Button {\n            id: pushButton2\n            text: \"Dialogue Button2\"\n            width: 131\n            height: 21\n            anchors.horizontalCenter: parent.horizontalCenter\n            anchors.top: pushButton.bottom\n            anchors.topMargin: 16\n\n            onClicked: {\n                var component = Qt.createComponent(\"dialog.qml\")\n                if (component.status === Component.Ready) {\n                    var dialogInstance = component.createObject(pushButton2) \n                    dialogInstance.visible = true\n\n\n                } else {\n                    console.error(\"Dialog component failed to load\")\n                }\n            }\n\n        }\n\n        \/\/ \uc0c1\ud0dc\ubc14 (QML\uc5d0\uc11c\ub294 \uae30\ubcf8\uc801\uc73c\ub85c \uc81c\uacf5\ub418\uc9c0\ub294 \uc54a\uc9c0\ub9cc, \uc544\ub798\ucc98\ub7fc \uad6c\ud604 \uac00\ub2a5)\n        \/\/ Status bar (not provided by default in QML, but can be implemented as shown below)\n        ToolBar {\n            height: 22\n            width: parent.width\n            anchors.bottom: parent.bottom\n\n            RowLayout {\n                anchors.fill: parent\n                Label {\n                    text: \"StatusBar\"\n                    Layout.alignment: Qt.AlignLeft\n                }\n            }\n        }\n    }\n\n<\/code><\/pre>\n\n\n\n<p><strong>4.qml\/newwindow.qml<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import QtQuick 2.15\nimport QtQuick.Controls 2.15\nimport QtQuick.Layouts 1.15\n\nWindow {\n    id: newWindow\n    width: 400\n    height: 300\n    visible: true\n    title: \"new window\"\n\n    \/\/ \ub77c\ubca8\uc5d0 \ucd9c\ub825\ud558\uae30 \uc704\ud55c \uc2dc\uadf8\ub110 \uc815\uc758\n    \/\/ Define a signal to output to the label\n    signal textSubmitted(string text)\n    Rectangle {\n        anchors.fill: parent\n        color: \"#f0f0f0\" \/\/ \ubc30\uacbd\uceec\ub7ec \/ Background Color\n\n        ColumnLayout {\n            anchors.centerIn: parent\n            spacing: 10\n\n            TextField {\n                id: inputField\n                placeholderText: \"\ud14d\uc2a4\ud2b8\ub97c \uc785\ub825\ud558\uc138\uc694 \/ Enter text\"\n                Layout.fillWidth: true\n            }\n\n            Button {\n                id: confirmButton\n                text: \"\ud655\uc778 \/ Confirm\"\n                Layout.alignment: Qt.AlignHCenter\n\n                onClicked: {\n\n                    \/\/ \ucf58\uc194\uc5d0 \ucd9c\ub825\n                    \/\/ output to console\n                    console.log(\"\uc785\ub825\ub41c \ud14d\uc2a4\ud2b8 \/ Entered Text:\", inputField.text)\n\n                    \/\/\uc2dc\uadf8\ub110 \ubc1c\uc0dd\n                    \/\/Signal generation\n                    textSubmitted(inputField.text)\n\n                    \/\/ \ucc3d \ub2eb\uae30 \uc6d0\ud560 \uacbd\uc6b0 \/ If you want to close the window : newWindow.close()\n\n                }\n            }\n        }\n    }\n}\n<\/code><\/pre>\n\n\n\n<p><strong>5.main.cpp<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>#include &lt;QGuiApplication&gt;\n#include &lt;QQmlApplicationEngine&gt;\n\nint main(int argc, char *argv&#91;])\n{\n    QGuiApplication app(argc, argv);\n\n    QQmlApplicationEngine engine;\n    QObject::connect(\n        &amp;engine,\n        &amp;QQmlApplicationEngine::objectCreationFailed,\n        &amp;app,\n        &#91;]() { QCoreApplication::exit(-1); },\n        Qt::QueuedConnection);\n    engine.loadFromModule(\"example9\", \"Main\");\n\n    return app.exec();\n}\n<\/code><\/pre>\n\n\n\n<p><strong>6.Main.qml<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import QtQuick\n\nWindow {\n    width: 850\n    height: 650\n    visible: true\n    title: qsTr(\"Main Window\")\n\n    \/\/ \ub85c\uceec QML \ud30c\uc77c \ub85c\ub4dc \/ Local QML file load\n    Loader {\n        anchors.fill: parent\n        source: \"qml\/mainwindow.qml\"\n    }\n}\n<\/code><\/pre>\n\n\n\n<p><strong>7.\uc2e4\ud589 \/ Run<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"987\" height=\"713\" src=\"https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2025\/10\/9-2.png\" alt=\"\" class=\"wp-image-2483\" srcset=\"https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2025\/10\/9-2.png 987w, https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2025\/10\/9-2-300x217.png 300w, https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2025\/10\/9-2-768x555.png 768w\" sizes=\"auto, (max-width: 987px) 100vw, 987px\" \/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>\ud83d\udc49 \ubc84\ud2bc \ud074\ub9ad\uc2dc \ub2e4\uc774\uc5bc\ub85c\uadf8 \ucc3d\uacfc \uc0c8\ub85c\uc6b4 \ucc3d\uc744 \uc624\ud508\ud569\ub2c8\ub2e4.When you click the button, a dialog window and a new window open. \ud83d\udc49 \uc0c8\ub85c\uc6b4 \ucc3d\uc5d0\uc11c \ud14d\uc2a4\ud2b8 \uc785\ub825\ud558\uace0 \ubc84\ud2bc \ud074\ub9ad\uc2dc mainwindow\uc758 \ub77c\ubca8\uc5d0 \ud14d\uc2a4\ud2b8\uac00 \ucd9c\ub825\ub429\ub2c8\ub2e4.Enter text in a new window and click the button to display the text in the label of the mainwindow. \ud83d\udc49 \uc0c8\ub85c\uc6b4\ucc3d\uacfc \uc774\uc804 \ucc3d \uc0ac\uc774\uc758 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[17,1],"tags":[],"class_list":["post-2474","post","type-post","status-publish","format-standard","hentry","category-qt","category-uncategorized","missing-thumbnail"],"_links":{"self":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/2474","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/comments?post=2474"}],"version-history":[{"count":10,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/2474\/revisions"}],"predecessor-version":[{"id":2502,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/2474\/revisions\/2502"}],"wp:attachment":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/media?parent=2474"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/categories?post=2474"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/tags?post=2474"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}