5-2 Creating a New QML Project

In this tutorial, you will learn how to create a new project in Qt Creator and the structure of a Qt Quick project.

---

Creating a New Project

To create a new Qt Quick project, follow these steps:

Go to File > New File or Project.

Select Application > Qt Quick Controls Application.

Choose the default kit: Desktop Qt 5.6.3 GCC 64-bit (most development work will be done on a PC).

Editing and Running the Project

• Use Edit mode to modify .cpp and .qml source files.

• Use Design mode to edit the MainForm.ui.qml user interface file.

• Ctrl + B → Build the project.

• Ctrl + R → Run the project.

Switching to Target Board (RZ/G2L or RZ/V2H)

Once the project is developed and tested on a PC, switch to the RZ/G2L or RZ/V2H kit for deployment.

Ctrl + B → Build the project for the target board.

Use scp to transfer the compiled application to the Renesas board for execution.

bash

scp [file_name] root@[ip_address]:[target_directory]

Project Configuration (.pro File)

Reference: Qt qmake Project Files

TEMPLATE = app

QT += qml quick widgets

CONFIG += c++11

SOURCES += main.cpp

RESOURCES += qml.qrc

# Additional import path used to resolve QML modules in Qt Creator's code model
QML_IMPORT_PATH =

# Default rules for deployment.
include(deployment.pri)

Main C++ Source Code (main.cpp)

#include <QApplication>
#include <QQmlApplicationEngine>

int main(int argc, char *argv[])
{
    QApplication app(argc, argv);

    QQmlApplicationEngine engine;
    engine.load(QUrl(QStringLiteral("qrc:/main.qml")));

    return app.exec();
}

QML User Interface Structure

Application Window (main.qml)

Reference: Qt ApplicationWindow QML Type

ApplicationWindow {
    visible: true
    visibility: "FullScreen"
    width: 640
    height: 480
    title: qsTr("Hello World")

    MainForm {
        anchors.fill: parent
        btn1.onClicked: messageDialog.show(qsTr("Button 1 pressed"))
        btn2.onClicked: messageDialog.show(qsTr("Button 2 pressed"))
    }
}

Main Form UI (MainForm.ui.qml)

import QtQuick 2.5
import QtQuick.Controls 1.4
import QtQuick.Layouts 1.2

Item {
    width: 640
    height: 480

    property alias btn1: button1
    property alias btn2: button2

    RowLayout {
        anchors.centerIn: parent

        Button {
            id: button1
            text: qsTr("Press Me 1")
        }

        Button {
            id: button2
            text: qsTr("Press Me 2")
        }
    }
}

QML Imports and Design Mode Compatibility

The .ui.qml file includes the following imports:

import QtQuick 2.5
import QtQuick.Controls 1.4
import QtQuick.Layouts 1.2

These imports enable additional QML Types in Design mode, allowing better visual UI editing.

---

Summary of Key Actions

Action	Shortcut
Build the project	Ctrl + B
Run the project	Ctrl + R
Switch to target kit (RZ/G2L or RZ/V2H)	Select Kit in Qt Creator
Transfer compiled files to the Renesas board	scp command

---