News
16th December 2014 | By:

Qt Quick – Very simple rapid app development

Qt Quick is a part of the SDK from Qt. It consists primarily of the following:

  1. QML – markup language to create GUI interfaces
  2. Javascript – scripting language to manage user interactions
  3. C++ – fast and powerful programming language

By creating a Qt Quick application we are connecting all of these three parts into one. The most common use case for this type of application is to create a GUI with QML and Javascript to handle the user interface and user interactions and C++ as the back end to handle complicated calculations and time-consuming processes.

The most interesting part of the aforementioned elements is QML, as this is something new, created by Qt developers from the ground up.

QML was developed to satisfy all types of devices from desktop to mobile devices. It was introduced from Qt 4.7 as a technology to create outstanding graphical interfaces in a C++ applications.

QML is a markup language like HTML. The rendering is based on OpenGL and allows developers to create GUI interfaces for desktop systems (Linux, MAC OS, Windows), tablets and mobile devices. Moreover with Qt IDE it is incredibly easy to write QML. As a first (very simple) example we will implement an application that will show and explain the basics of using QML.

To start we need to create a new project in Qt IDE with QT 5.x.

QML_start_pro_0
QML_start_pro

Qt will create a basic template for us that we can build and run.
QML is built from blocks that can be nested inside each other, each document though can have only one root element with multiple children.

// main.qml
import QtQuick 2.3 // import libraries for QML
import QtQuick.Controls 1.2 // import predefined elements
ApplicationWindow { // define root element
    visible: true // set it's visibility
    width: 640
    height: 480
    title: qsTr("QML test") // set title of our main window
    menuBar: MenuBar { // create menu bar element
        Menu {
            title: qsTr("File") // set name of the menu tab
            MenuItem { // create item for menu
                text: qsTr("&Open") // set title for menu item
                // set action that will be fired when element after click on it
                onTriggered: console.log("Open action triggered");
            }
            MenuItem {
                text: qsTr("Exit")
                onTriggered: Qt.quit();
            }
        }
    }
    Rectangle{
        id: background
        width: parent.width
        height: parent.height
        color: "#0e1011"
        Text { // define element of type Text
            text: qsTr("Hello World") // set title of that element
            color: "#ffffff"
            anchors.centerIn: parent // specify location of the element
        }
    }
}

QML_build_n

Each element can have unique id that we can identify it by. We can access the parent of each element by using the special keyword `parent`(excluding root element). This post simply demonstrates the basics of QML. In the next article we will show how to bind the backend written in C++ with the front end implemented in QML

Tags: , , , , ,