3. Integrate a Qt Quick application

This section creates MyEuiApp from scratch. The window initially displays Clicks: 0. Each click on Add one increases the count and shows a message.

3.1 Create the application directory

Complete 2.2 first. The following path is your new application's directory, separate from the EUI repository:

$appRoot = 'D:/code/MyEuiApp'
New-Item -ItemType Directory -Force -Path $appRoot | Out-Null
Set-Location $appRoot

Create four UTF-8 text files in $appRoot:

MyEuiApp/
  CMakeLists.txt
  main.cpp
  main.qml
  resources.qrc

3.2 Save the complete example

Save each of the following four blocks to its named file. Keep the filenames unchanged; main.qml in resources.qrc must match the actual filename.

CMakeLists.txt: define the application and Qt dependencies.

cmake_minimum_required(VERSION 3.20)
project(MyEuiApp LANGUAGES CXX)

set(CMAKE_CXX_STANDARD 17)
set(CMAKE_CXX_STANDARD_REQUIRED ON)
set(CMAKE_AUTOMOC ON)
set(CMAKE_AUTORCC ON)

find_package(QT NAMES Qt6 Qt5 REQUIRED COMPONENTS Quick Qml)
find_package(Qt${QT_VERSION_MAJOR} REQUIRED COMPONENTS Quick Qml)

add_executable(MyEuiApp main.cpp resources.qrc)
target_link_libraries(MyEuiApp PRIVATE Qt${QT_VERSION_MAJOR}::Quick Qt${QT_VERSION_MAJOR}::Qml)

main.cpp: create the QML engine, add the module search directory, and load the window.

#include <QUrl>
#include <QGuiApplication>
#include <QCoreApplication>
#include <QQmlApplicationEngine>

int main(int argc, char *argv[])
{
    QGuiApplication app(argc, argv);
    QQmlApplicationEngine engine;
    engine.addImportPath(QCoreApplication::applicationDirPath());
    engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
    if (engine.rootObjects().isEmpty())
        return -1;
    return app.exec();
}

resources.qrc: embed the QML window in the application.

<RCC>
    <qresource prefix="/">
        <file>main.qml</file>
    </qresource>
</RCC>

main.qml: create the window, counter, button, and message interaction.

import EUI 1.0
import QtQuick 2.15

EApplicationWindow {
    id: window

    property int clickCount: 0

    width: 640
    height: 420
    visible: true
    title: "EUI Demo"

    Component.onCompleted: {
        ELocale.language = "en"
        ETheme.dark = false
    }

    EApp {
        id: app

        anchors.fill: parent

        Column {
            x: 24
            y: 24
            spacing: 16

            EText {
                text: "Clicks: " + window.clickCount
            }
            EButton {
                text: "Add one"
                styleType: EStyle.Primary

                onClicked: {
                    window.clickCount += 1
                    app.message.open("Clicked " + window.clickCount + " times")
                }
            }
        }
    }
}

EApplicationWindow creates the window. EApp fills it and supplies a message manager. EText.text binds to the count. EButton.onClicked updates the count and calls app.message.open(). This example does not save data or send network requests.

3.3 Build the application and copy the module

Working directory: your new application directory, $appRoot. Reuse $euiRoot and $qtKit from section 1:

Set-Location $appRoot
cmake -S . -B build -G Ninja -DCMAKE_BUILD_TYPE=Release "-DCMAKE_PREFIX_PATH=$qtKit"
cmake --build build
cmake -E copy_directory "$euiRoot/build/eui-install/imports/EUI" "$appRoot/build/EUI"

The key files now look like this:

MyEuiApp/
  CMakeLists.txt
  main.cpp
  main.qml
  resources.qrc
  build/
    MyEuiApp.exe
    EUI/
      qmldir
      euiplugin.dll
      plugins.qmltypes
      controls/
      ...remaining module files

Copy all of EUI/, including the plugin DLL. main.cpp adds the executable directory, build/, to the import path; the engine finds import EUI 1.0 in its EUI/ child directory. The application's CMake links Qt, and QML imports load the EUI plugin.

3.4 Run and check the result

Working directory: $appRoot, keeping the Qt PATH from the same terminal.

& ./build/MyEuiApp.exe

1. The window is titled EUI Demo and displays Clicks: 0.
2. Select Add one. The text becomes Clicks: 1, and Clicked 1 times appears as a message.
3. Click again. The text becomes Clicks: 2.

After editing main.qml, close the application, run cmake --build build, and launch it again. QML is embedded in the executable, so source changes require a rebuild. Qt runtime libraries come from the PATH set in section 1.

3.5 Use an existing project or replace the example control

Keep your existing Qt Quick project's C++ entry point, window, and build configuration. Build EUI, copy the complete module beside the executable, and add that parent directory to your existing QML engine's import paths. Add import EUI 1.0 at the top of your QML file and insert the controls you need. Place your content inside EApp when using its message managers.

Section 4's code blocks are standalone component definitions. To try one in this application's window:

1. Keep EApplicationWindow, EApp, and the window initialization code.
2. Replace the entire Column { ... } inside EApp with the selected example's root object.
3. Keep required imports at the top of main.qml, outside objects.
4. Close the application, rebuild, and run it again.

For example, placing the ETable { ... } example inside EApp displays two rows. Submitting the form example with an empty name shows required-field feedback. Replace the business data and signal handlers with your own logic. Before using EECharts, configure the WebEngine host as described in 4.5.