After creating your first QtQuick project in the previous post we’re now looking at an auto generated Hello World program. Now the Hello World program isn’t anything to write home about but lets give it a quick look anyways.

Just like in C++ QML scripts can be split up into multiple files. You can include QML from these other files into your QML file via the import keyword (think include <string.h>). In the Hello World program we are including the QtQuick version 2 framework which gives us access to all the primitive types in QtQuick such as Item, Rectangle, MouseArea, etc.

import QtQuick 2.0

The import statement is defined as:
import <ModuleIdentifier> <Version.Number>

The next line defines the root of the application. We know its the root because its the top level element in the main QML file. That is this element declares the parent. In the case of the Hello World program its a Rectangle with a width/height of 360 pixels.

Because this is the root/parent item it also defines the size of the application window. The application displays a white background because the default colour for a QML Rectangle element is white and we didn’t explicitly set a colour value.

import QtQuick 2.0
Rectangle {
    width: 360
    height: 360
}

The Hello World program shows the text “Hello World” in the center of the application window; it does this via the QML Text element.

import QtQuick 2.0

Rectangle {
    width: 360
    height: 360
    Text {
        anchors.centerIn: parent
        text: "Hello World"
    }
}

All elements in QML support the anchors property. This allows you to position elements relative to the size/position of their parent and siblings. In the Hello World program we centered the text in the middle of the application window by setting the anchors.centerIn property to parent. The parent keyword is a special build in keyword that allows you to referance the parent element of the element you are using the keyword in. In this case we are using the parent keyword within the scope of the Text element therefore it referances its parent which happens to be the Rectangle element.

Lastly you’ll notice another QML element this one called MouseArea.

import QtQuick 2.0

Rectangle {
    width: 360
    height: 360
    Text {
        anchors.centerIn: parent
        text: "Hello World"
    }
    MouseArea {
        anchors.fill: parent
        onClicked: {
            Qt.quit();
        }
    }
}

This element allows us to define a rectangle area that will register mouse clicks. That is if the user clicks anywhere within a given MouseArea we can capture that click event (i.e. signal) and have it execute an event handler (i.e. slot). In the Hello World program we used the anchors.fill property with the parent keyword to make the MouseArea the same size as its parent (which is the Rectangle element i.e. the entire surface of the application) and provided an event handler (a.k.a slot) for the clicked event (a.k.a signal).

The MouseArea comes with a number of signals for capturing mouse clicks the one used here is the clicked() signal which we provide the body of the connected onClicked() slot via the onClicked attribute.

onClicked: {
    Qt.quit();
}

What this means is that when the user clicks anywhere within the surface area of the Hello World application we’ll execute the Qt.quit() method; which as you might guess will terminate the application.

Like I said not much to look at but that’s the Hello World program in a nut shell. How about we spice it up a bit and write our own QtQuick application. If you have any questions or comments feel free to leave them below and I’ll respond when time permits.

Until next time think imaginatively and design creatively