Monday 23 December 2013

Getting Started Programming with Qt Quick

There is an article on official site which describes how to develop a Qt Quick app,
But it's not the real doc for newer, I read through it for a few minutes, still do not know how to begin my first project. Which file should I put my following descriptive language lines into?
Rectangle {
    id: simpleButton

    MouseArea {
        id: buttonMouseArea

        // Anchor all sides of the mouse area to the rectangle's anchors
        anchors.fill: parent
        // onClicked handles valid mouse button clicks
        onClicked: console.log(buttonLabel.text + " clicked")
And how to set up a Qt Quick project? Any thing must be included in this project?
Nothing, the official article only talked about some code snippets. You have to find a way to integrate all these parts by yourself? So, it's article, but not written for new guys.

Then, I tried my way. First, I create a new Qt project using VS 2012 with QT add-on, select QML & Quick options when creating project. This project has some *.ui files, in this kind of *.ui file, I see XML definition, not above JSON style. I am new to QML, but this project obviously is not what I want.

OK. Let's have a try with Qt Creator. Using this IDE, I can create a real Quick project now, just choose Qt Quick Application at the beginning. My project name is called helloworld.
In the main.cpp file,
#include <QtGui/QGuiApplication>
#include "qtquick2applicationviewer.h"
int main(int argc, char *argv[])
QGuiApplication app(argc, argv);
QtQuick2ApplicationViewer viewer;
return app.exec();
QGuiApplication is the main class for QT GUI app. Doc is here:

QtQuick2ApplicationViewer is generated by project wizard automatically. It inherits from QQuickView, we do not need to modify it. It offers a useful function called setMainQmlFile. The qml file is generated by project wizard too, it defines the GUI on main window.
import QtQuick 2.0

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

qtquick2applicationviewer.pri file was created automatically too. Below is some description about this file. Do not modify this too.
# checksum 0x21c9 version 0x90005
# This file was generated by the Qt Quick 2 Application wizard of Qt Creator.
# The code below adds the QtQuick2ApplicationViewer to the project and handles
# the activation of QML debugging.
# It is recommended not to modify this file, since newer versions of Qt Creator
# may offer an updated version of it.

qml file is JSON style, very easy to read and understand. Define a rectangle which includes two elements: text & mouse area.

Also, the project wizard has created project file:

Run it, a helloworld window will popup.
This is a real getting started doc for new people.

No comments: