First steps with QML

QML is a new markup language for creating user interfaces. Its main task is to provide the ability to easily and quickly create applications with a beautiful, animated interface.

Not so long ago there was a public version. This means that the API as a whole has stabilized, and the version can be safely tested and used.

The Declarative UI is planned to be included in the Qt 4.7 release, for now you can find all the necessary files and installation instructions for ftp trolls.

In this article I would like to show how you can use C ++ objects (QObject) in qml.





First you need to download from ftp and build qt-4.6.0-declarative.tar.gz. Alternatively, you can use the already compiled QtCreator, which contains the necessary libraries

Let's create a project:

The easiest way to create a Qt4 application through QtCreator GUI is that QWidget is perfect as a base class.

qmltest.pro

SOURCES += main.cpp \

widget.cpp \

myobject.cpp

HEADERS += widget.h \

myobject.h

# , qt-declarative

QT += declarative \

script

#INCLUDEPATH += # , include/qt-declarative/



The header file of our widget

widget.h

#ifndef WIDGET_H

#define WIDGET_H



#include <QWidget>

class QmlView;

class MyObject;

class Widget : public QWidget

{

Q_OBJECT

public :

explicit Widget(QWidget *parent = 0);

private :

QmlView *view;

MyObject * object ;

private slots:

void onSceneResized(QSize size);

};



#endif // WIDGET_H



* This source code was highlighted with Source Code Highlighter .

For a start, it would be nice to remove the system header and make the background transparent:

setWindowFlags(Qt::FramelessWindowHint);

setAttribute(Qt::WA_TranslucentBackground);

setAttribute(Qt::WA_NoSystemBackground);

view = new QmlView( this );

view->viewport()->setAutoFillBackground( false );



* This source code was highlighted with Source Code Highlighter .

Now we initialize our QML viewer and give it the path to the file that we are going to execute.

view->setFocus();

QString filename = qApp->applicationDirPath() + "/qmlpopups/default/popup.qml" ;

view->setUrl(QUrl::fromLocalFile(filename));//url - main.qml



* This source code was highlighted with Source Code Highlighter .

Now the most interesting thing comes: make the properties of a C ++ object visible from the qml file. For this, it is necessary that the object be inherited from QObject. Using the Q_PROPERTY macro, properties are made available from qml objects and javascript.

Q_PROPERTY(QString text READ text WRITE setText NOTIFY textChanged)



* This source code was highlighted with Source Code Highlighter .

READ indicates which function to use to get the value.

WRITE indicates which function is used to change

NOTIFY indicates which signal is triggered when the value changes, is used in binders.

By preparing the object accordingly, we can access these properties from qmlya.

view->rootContext()->setContextProperty( "MyObject" , object );

view->rootContext()->setContextProperty( "MyText" , "Hello, QML!" );

view->rootContext()->setContextProperty( "Avatar" ,qApp->applicationDirPath() + "/qmlpopups/default/star.png" );



* This source code was highlighted with Source Code Highlighter .

Adding new objects is done via QmlContext, the pointer to which is returned by the rootContext () function. You can add both individual properties and whole objects.

Now let's move on to the qml file:

Rectangle {

id: rect

width:250

height: 100

height: Behavior { NumberAnimation { duration: 1000; easing: "InOutQuad" } }

color: "transparent"



* This source code was highlighted with Source Code Highlighter .

The code draws us a rectangle 250x100 with a transparent fill. There would be nothing tricky here if it were not for the strange property:

height: Behavior { NumberAnimation { duration: 1000; easing: "InOutQuad" } }

The Behavior property indicates the behavior of an object when the height value changes. In this case, it should be an animation. For any action that sets a new height value, the rectangle will not immediately accept this value, but only by performing a certain sequence of actions, which is very convenient when creating an animated gui.

BorderImage {

source: "background.png"

height: rect.height

width: rect.width

border.left: 20

border.top: 20

border.bottom: 20

border.right: 20

}



* This source code was highlighted with Source Code Highlighter .

This block demonstrates how to create a background image with a frame. And this is all from one picture, you no longer need to cut it with your hands, everything will be done for you, you just need to specify the size of the borders. I think many web designers are now jealous.

In order for the picture to automatically resize to fit the rectangle, you can use property binding in qml objects, its essence is that the value of one parameter is tied to the value of another and automatically changes as the value of the original parameter changes.

Now we will write the text

Text {

id: title

text: MyText

font.pointSize: 14

wrap: true

color: "white"



effect: DropShadow {

color: "white"

blurRadius: 2

offset.x: 0

offset.y: 0

}



anchors.top: rect.top

anchors.topMargin : 5

anchors.left: avatar.right

anchors.leftMargin : 5

}



* This source code was highlighted with Source Code Highlighter .

Anchors are used to place elements in qml, which indicate the position of the object relative to other objects, which is very convenient. Various effects can be applied to the text, for example, the shadow effect. The text itself is taken from the context that we indicated earlier. A wrap value indicates that line wraps are necessary.

')

Text {

id: body

text: MyObject.text

font.pointSize: 12

wrap: true

color: "white"



//ancors

anchors.top: title.bottom

anchors.topMargin: 5

anchors.right: rect.right

anchors.rightMargin: 5

anchors.left: avatar.right

anchors.leftMargin : 5



onTextChanged: rect.height = calculateMyHeight();

}



* This source code was highlighted with Source Code Highlighter .

In this block there is a slot that is activated when any text changes, and it calls the javascript function, recalculating the height of the entire rectangle in which our scene is enclosed. And the text can be changed simply by calling the setText function on our C ++ object.

Script {

function calculateMyHeight() {

console.log( "height : " + (body.y + body.height + 20));

return (edit.y + edit.height + 20);

}



* This source code was highlighted with Source Code Highlighter .

In the scripts block, you can describe javascript'y, through which you can interact in any qml objects

The remaining code can be found here.

In the end, you should get such a nice little window:



That's all for today. Other features can be found by looking at the documentation and looking at examples.

PS

They sent a screenshot from Win7, could not put it out, use qtwin to create blur