Getting started with qml

Remarks#

QML is an acronym that stands for Qt Meta-object Language. It is a declarative programming language that is part of the Qt framework. QML’s main purpose is fast and easy creation of user interfaces for desktop, mobile and embedded systems. QML allows seamless integration of JavaScript, either directly in the QML code or by including JavaScript files.

Versions#

Qt Version	QtQuick Version	Release Date
4.7	1.0	2010-09-21
4.8	1.1	2011-12-15
5.0	2.0	2012-12-19
5.1	2.1	2013-06-03
5.2	2.2	2013-12-12
5.3	2.3	2014-05-20
5.4	2.4	2014-12-10
5.5	2.5	2015-07-01
5.6	2.6	2016-03-15
5.7	2.7	2016-06-16
5.8	2.7	2017-01-23

Installation

QML comes with newer Version of the cross-platform application framework Qt. You can find the newest Version of Qt in the Downloads section.

To create a new QML Project in the Qt Creator IDE, select “File -> New …” and under “Applications” select “Qt Quick-Application”. After clicking “select” you can now name and set the path for this project. After hitting “next” you can select which components you want to use, if unsure just leave the default and click on “next”. The two next steps will allow you to setup up a Kit and Source Control if you want to, otherwise keep the default settings.

You now have created a simple and ready to use QML application.

Hello World

A simple application showing the text “Hello World” in the center of the window.

import QtQuick 2.3
import QtQuick.Window 2.0

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World") //The method qsTr() is used for translations from one language to other.

    Text {
        text: qsTr("Hello World")
        anchors.centerIn: parent
    }
}

Creating a simple button

You can easily transform every component in a clickable button using the MouseArea component. The code below displays a 360x360 window with a button and a text in the center; pressing the button will change the text:

import QtQuick 2.0

Rectangle {
    width: 360
    height: 360

    Rectangle {
        id: button

        width: 100
        height: 30
        color: "red"
        radius: 5     // Let's round the rectangle's corner a bit, so it resembles more a button
        anchors.centerIn: parent

        Text {
            id: buttonText
            text: qsTr("Button")
            color: "white"
            anchors.centerIn: parent
        }

        MouseArea {
            // We make the MouseArea as big as its parent, i.e. the rectangle. So pressing anywhere on the button will trigger the event
            anchors.fill: parent

            // Exploit the built-in "clicked" signal of the MouseArea component to do something when the MouseArea is clicked.
            // Note that the code associated to the signal is plain JavaScript. We can reference any QML objects by using their IDs
            onClicked: {
                buttonText.text = qsTr("Clicked");
                buttonText.color = "black";
            }
        }
    }
}

Display an image

This example shows the simplest usage of the Image component to display an image.

The Image source property is a url type that can be either a file with an absolute or relative path, an internet URL (https://) or a Qt resource (qrc:/)

import QtQuick 2.3

Rectangle {
    width: 640
    height: 480

    Image {
         source: "image.png"
    }
}

Mouse Event

This example shows how mouse event is used in QML.

import QtQuick 2.7
import QtQuick.Window 2.2

Window {
    visible: true
    Rectangle {
        anchors.fill: parent
        width: 120; height: 240
        color: "#4B7A4A"

        MouseArea {
            anchors.fill: parent // set mouse area (i.e. covering the entire rectangle.)
            acceptedButtons:  Qt.AllButtons
            onClicked: {
                // print to console mouse location
                console.log("Mouse Clicked.")
                console.log("Mouse Location: <",mouseX,",",mouseY,">")

                //change Rectangle color
                if ( mouse.button === Qt.RightButton )
                    parent.color = 'blue'
                if ( mouse.button === Qt.LeftButton )
                    parent.color = 'red'
                if ( mouse.button === Qt.MiddleButton )
                    parent.color = 'yellow'
            }
            onReleased: {
                // print to console
                console.log("Mouse Released.")
            }
            onDoubleClicked: {
                // print to console
                console.log("Mouse Double Clicked.")
            }

        }
    }


}