Creating a Qt Quick project

This chapter will follow the same project structure we covered in Chapter 12, Conquering the Desktop UI: a parent project ch05-gallery-mobile.pro will host our two subprojects, gallery-core and the new gallery-mobile.

In Qt creator, you can create a Qt Quick subproject from File | New File or Project | Application | Qt Quick Controls Application | Choose.

The wizard will allow you to customize your project creation:

• Location
  • Choose a project name (gallery-mobile) and a location
• Details
  • Deselect With ui.qml file
  • Deselect Enable native styling
• Kits
  • Select your desktop kit
  • Select at least one mobile kit
• Summary
  • Be sure to add gallery-mobile as a subproject of ch05-gallery-mobile.pro

Let's take some time to explain why we created our project with these options.

The first thing to analyze is the application template. By default, Qt Quick only provides basic QML components (Rectangle, Image, Text, and so on). Advanced components will be handled by Qt Quick modules. For this project we will use Qt Quick Controls (ApplicationWindow, Button, TextField, and so on). That is why we chose to begin with a Qt Quick Controls application. Keep in mind that you can always import and use Qt Quick modules later.

In this chapter, we will not use the Qt Quick Designer. As a consequence, .ui.qml files are not required. Even if the designer can help a lot, it is good to understand and write QML files yourself.

The desktop "native styling" is disabled because this project mainly targets mobile platforms. Moreover, disabling "native styling" avoids heavy dependency on the Qt widgets module.

Finally, we select at least two kits. The first one is our desktop kit. The other kits are the mobile platforms you target. We usually use the following development workflow:

• Fast iterations on desktop
• Check and fix behavior on mobile emulator/simulator
• Real test on the mobile device

Deployment on a real device is generally longer so you can do most development with the desktop kit. The mobile kits will allow you to check your application behavior on a real mobile device or on an emulator (for example with a Qt Android x86 kit).

Let's talk about the files automatically generated by the wizard. Here is the main.cpp file:

#include <QGuiApplication> 
#include <QQmlApplicationEngine> 
 
int main(int argc, char *argv[]) 
{ 
    QGuiApplication app(argc, argv); 
 
    QQmlApplicationEngine engine; 
    engine.load(QUrl(QStringLiteral("qrc:/main.qml"))); 
 
    return app.exec(); 
} 

We use here QGuiApplication and not QApplication because we do not use Qt widgets in this project. Then, we create the QML engine and load qrc:/mail.qml. As you may have guessed (with the qrc:/ prefix), this QML file is in a Qt resource file.

You can open the qml.qrc file to find the main.qml:

import QtQuick 2.5 
import QtQuick.Controls 1.4 
 
ApplicationWindow { 
    visible: true 
    width: 640 
    height: 480 
    title: qsTr("Hello World") 
 
    menuBar: MenuBar { 
        Menu { 
            title: qsTr("File") 
            MenuItem { 
                text: qsTr("&Open") 
                onTriggered: console.log("Open action triggered"); 
            } 
            MenuItem { 
                text: qsTr("Exit") 
                onTriggered: Qt.quit(); 
            } 
        } 
    } 
 
    Label { 
        text: qsTr("Hello World") 
        anchors.centerIn: parent 
    } 
} 

The first thing to do is to import types used in the file. Notice the module version at the end of each import. The QtQuick module will import basic QML elements (Rectangle, Image, and so on) while the QtQuick.Controls module will import advanced QML elements from the QtQuick Controls submodule (ApplicationWindow, MenuBar, MenuItem, Label, and so on).

Then, we define the root element of type ApplicationWindow. It provides a top-level application window with the following items: MenuBar, ToolBar and StatusBar. The properties visible, width, height, and title of ApplicationWindow are primitive types. The syntax is simple and intelligible.

The menuBar property is more complex. This MenuBar property is composed of a Menu file, itself composed of two MenuItems: Open and Exit. A MenuItem emits a triggered()signal each time it is activated. In this case, the MenuItem file will log a message on the console. The exit MenuItem terminates the application.

Finally, a Label displaying "Hello World" is added in the content area of our ApplicationWindow type. Positioning items with anchors is useful. In our case the label is centered vertically and horizontally in its parent, ApplicationWindow.

Before going ahead, check that this sample runs correctly on your desktop and on your mobile.