Introduction to QML

Introduction to QML
by Alan Uthoff

History
• Started by Haavard Nord and Erik Chambe-Eng in 1991
• Founded Trolltech three years later
• Acquired by Nokia in 2008
• QML is created for mobile development (n900 and N1)
• Sold to Digia in 2011
• Transfered to QT Company
• Current version of QT is 5.9

QML
• Declarative JavaScript language with built in
hooks for Cpp
• All signal, slots and properties on a c++ class
are automatically exposed to QML
• Can expose C++ method with Q_INVOKABLE
• Prototype inheritance

Basic Types
QML C++
string QString
int int
bool bool
double double
real ﬂoat
url QUrl
var QVariant
list QList

Object Attributes
Rectangle {
id: myRect
property int foo: 1
signal mysignal
Rectangel {
height: myRect
}
Component.onComplete: {
myRect.foo = 3
}
}

Object Types
• Component
• Item
• Rectangle
• Row
• Column
• Repeter
• Etc…

Row
• Layout objects in a row
import QtQuick 2.0
Row {
spacing: 2
Rectangle { color: "red"; width: 50; height: 50 }
Rectangle { color: "green"; width: 20; height: 50 }
Rectangle { color: "blue"; width: 50; height: 20 }
}

Column
• Layout objects in a column
Column {
spacing: 2
Rectangle { color: "red"; width: 50; height: 50 }
Rectangle { color: "green"; width: 20; height: 50 }
Rectangle { color: "blue"; width: 50; height: 20 }
}

Repeater
• Repeats an object n number of times
import QtQuick 2.0
Row {
Repeater {
model: 3
Rectangle {
width: 100; height: 40
border.width: 1
color: "yellow"
}
}
}

Signal And Slots
• QML Supports signals to slots
• QML to QML
• QML to C++
• C++ to QML

Signal QML Example
Item {
Rectangle {
id: myRect
width: 100
signal click(string value)
}
Rectangle {
width: (myRect.width <200) ? myRect.width :200
MouseArea:
{
onClicked:
{
if(mouse == Qt.LeftButton)
{
myRect.click(“Left)
}
}
}
}
}

QML To C++
QList<QObject *> objList = engine.rootObjects();
QObject *qmlObject = nullptr;
qmlObject = objList[0];//assumes the top object has the
signal
QObject::connect(qmlObject, SIGNAL(click(QString)),
&cppObjWithSlot,
SLOT(processClick(QString)));

Exposing C++ to QML
• Signal and Slots
• Methods with Q_INVOKABLE
• Properties Q_PROPERTY

Assume the C++
class MessageBoard : public QObject
{
Q_OBJECT
public:
Q_INVOKABLE bool postMessage(const QString &msg) ;
Q_PROPERTY(MessageBody* body READ body WRITE setBody NOTIFY bodyChanged)
signals:
void newMessagePosted(const QString &subject);
public slots:
void refresh();
};
int main(int argc, char *argv[]) {
MessageBoard msgBoard;
QQuickView view;
view.engine()->rootContext()->setContextProperty("msgBoard", &msgBoard);
view.setSource(QUrl::fromLocalFile("MyItem.qml"));
}

QML Calling C++
// MyItem.qml
import QtQuick 2.0
Item {
MouseArea {
anchors.ﬁll: parent
onClicked: {
var result = msgBoard.postMessage("Hello from QML")
msgBoard.refresh();
}
MessageBoard {
body: MessageBody {
}
onNewMessagePosted: console.log("New message received:", subject)
}
}
}

Javascript in QML
• Can be in a binding
• Standalone function
• Imported from a .js ﬁle

Javascript Example
Item {
Rectangle {
id: myRect
width: 100
function click()
{
}
Rectangle {
width: (myRect.width <200) ? myRect.width :200
MouseArea:
{
onClicked:
{
myRect.click()
}
}
}
}

Javascript From File
//in file myJavascipt.js
function click {
}
//Qml
import QtQuick 2.0
import myJavascript.js as myJavascript
Rectangle
{
Component.OnComplete
{
myJavascrtipt.click()
}
}

GUI Systems
• Make your own with Rectangle
• QT Controls 1.0
• QT Controls 2.0

Layout Systems
• Row Column
• Bindings (set them your self)
• Anchors
• Layout

Models
• QML has build in model (ListModel)
• Can create custom models from C++

Render Backends
• Qml is a scene graph
• Directx 12
• OpenGL
• Software

QML Help
• QML book
• https://qmlbook.github.io
• QML Docs
• http://doc.qt.io/qt-5/qtqml-index.html

Introduction to QML

More Related Content

What's hot (20)

Similar to Introduction to QML (20)

Recently uploaded (20)

Introduction to QML