Qt Quick 1 of n

This is first of the n post on Qt Quick.
Qt is a great C++ framework that spans Platforms( Windows, OS X, Linux, ...), UI, XML, Web, and lot more please feel free to visit http://qt.nokia.com/products/ for further exploration.

One of the coolest things about Qt is the introduction of new declarative language QML. QML is one of the technologies in Qt Quick Suite. QML is fully declarative and very intuitive to read and write. It is meant to be designer & developer friendly.

UIs created in QML can run on mobile as well as computers.
To get started first download the Qt SDK from Qt website here, please choose your platform and install LGPL for now.

Once done installing launch Qt Creator. Qt Creator is kind of Qt Studio which can act as Qt designer and IDE at the same time.

Here is what it looks like:

You can explore provided examples with Qt SDK for self education or you can create a new project. For now we will create a new project. Click Create Project button it will launch the following window:

Now as Qt QML is all about great UIs select Qt C++ Project and Qt Gui Application
click choose:

Give your project some name, for example QtQuick1 and click continue and you will come to next form:

Now it is important that you uncheck the Generate form checkbox. Qt already supports form based Gui, which are xml files saved as ui files, I guess some time later I will cover that aspect of Qt. We are dealing with new UI paradigm in Qt so lets move on press continue and you are all set to code.

Now once you are in Qt Project your IDE will look very similar to what I have here:

Take a moment to look around the IDE, on the left side is stack of buttons:
Welcome: This is where you create new project
Edit: Here you are in Project you can work with various files in project
Design: Not yet explored but I will get back on this one soon
Debug: you stay in editor but with debugging windows switched on, for stack, threads, output and so on
Projects: Configuring project settings like Build settings, Runtime Settings and so on
Help: Qt has a great help system built into the IDE

To the right of these buttons you will see the Project structure, Solution Explorer for VS addits :)
qtquick1.pro is the project file, it contains information regarding what libraries of Qt our application depends on and what are the various files in the project, and I believe rest the structure is self-explanatory.

To tryout qml files from C++ application we will have to refer declarative module of Qt so in the qtquick1.pro add dependency like this:

QT += core gui declarative

Ok now add a new qml file to the project:
File -> New File or Project ->

Pick Qt in File and Classes and QML template as in image above
click choose

As in the image give your file some name, I have named it QtQuick2.qml, since I already have QtQuick.qml in my project. click continue

Now Qt will as add this new qml file to the project so that it can be made part of the project, also you have flexibility of adding it to some version control software like peforce, git or your fav one.
click Done to add the file in your project.


The QtQuick2.qml file looks like this:

import Qt 4.7

Rectangle
{
width: 640
height: 480
}

The first statement imports Qt 4.7 functionality: import is very similar to #include for C++ fellows and adding reference to .NET fellow

next there is declaration of Rectangle element, note in Qt Quick every element is an Item, and thus it is feasible to created a highly & creatively :) nested structures, we will get to these slowly as the series progresses.

Rectangle, actually Item being visual (can be non-visual also) has width and height property, has width of 640 and height of 480

That what you will get in the ui you create from this qml. however to make things little, just little interesting lets change the colour of this rectangle to blue.

The new rectangle definition looks like this:

save the qml file.


Now we have the qml ui ready but we need to launch this as well, for launching this from C++ code we need to use Qt Declarative engine, and that's why we added a dependency in pro file

So open the mainwindow.cpp file and add a header

#include

in the constructor of the MainWindow class add the following code:


QDeclarativeView *qmlView = new QDeclarativeView;
this->setCentralWidget(qmlView);

// I already have QtQuick.qml with same contents in my project so I will go with it
//
qmlView->setSource(QString("QtQuick.qml"));

first we create an object of type QDeclarativeView, this is used to show what is in QML file in window. Here we kind of hookup with Qt UI system with QML ui system. Second like informs main window that view stays in the center and is the main widget, and in this case since it is the only one so it occupies all the window real estate

Then we set the source of qmlView to the qml file that we created earlier. QmlView will load this file and create the UI elements accordingly.

Just one tweak on Mac, in project run settings you need to change the working directory so that you can pick up the code from correct directory else you will get warnings in output window of debugging session that could not qml file and the application window will stay blank.

Set the working directory as in image below:

you are all set to see the fruits of you effort, note this project henceforth is our sandbox, we will build on top of this project as series progresses.
I will upload contents of project shortly.

Now build the project --> Build -> Build All
To debug press F5
and here it is:

Hurray, we have managed to create an empty window using QML, we will explore more aspects of Qt & QML in coming posts.

Stay tuned.

Sarang

stay hungry, stay foolish :)