User Interface Programming Qt

Jozef Mlích Department of Computer Graphics and Multimedia Faculty of Information Technology, Brno University of Technology Božetěchova 2, 612 66 Brno, Czech Republic http://www.fit.vutbr.cz/~imlich [email protected]

http://www.fit.vutbr.cz/~imlich/ 10.10.2014Qt | 1 / 28 http://www.fit.vutbr.cz/~imlich/ Qt | 2 / 28 Agenda

 Motivation, Features, History ? (1991-NOW)  Architecture of Qt – qmake, other tools – QObject (Meta object model, Events, Signals and slots, Properties, Memory management) – Layouts  QML – MVC  Advanced topics – C++ and QML – Shaders

http://www.fit.vutbr.cz/~imlich/ Qt | 3 / 28 Who is using Qt?

 Skype for Linux  Team Speak  Google Earth  Autodesk Maya  Guitar Pro 6  VLC player  GNU Octave  OpenSCAD

http://www.fit.vutbr.cz/~imlich/ Qt | 4 / 28 Features

 C++, Python, C#, (Java – Jambi)  API for everything (not only GUI)  cross-platform – Windows – Mac – Linux – Embedded systems (via “frame buffer”, Qt on Pi) – Mobile devices (Symbian, Maemo, MeeGo, Jolla, Blackberry, Android, iOS)  Licence – GPL, LGPL, Commercial

http://www.fit.vutbr.cz/~imlich/ Qt | 5 / 28 Architecture

http://www.fit.vutbr.cz/~imlich/ Qt | 6 / 28 Compilation and tools

 qmake, moc, uic  cmake, automoc  Qt Creator, Qt Linguist, Qt Designer, qmlviewer/qmlscene

http://www.fit.vutbr.cz/~imlich/ Qt | 7 / 28 Meta object compiler

 Qt extends C++ - macro language, introspection, etc. – foreach (int value, intList) { ... } // (i.e. Q_FOREACH) – QObject *o = new QPushButton; o->metaObject()->className(); //returns ”QPushButton”// introspection – connect(button, SIGNAL(clicked()), window, SLOT(close()));  It is still C++  QObject – Events class MyClass : public QObject – Signals and slots { Q_OBJECT – “Properties” public: – Memory managenet MyClass(QObject *parent = 0); ~MyClass(); signals: void mySignal(int); public slots: void mySlot(int); };

http://www.fit.vutbr.cz/~imlich/ Qt | 8 / 28 Memory management

 Sample Code QObject *parent = new QObject(); QObject *child1 = new QObject(parent); QObject *child2 = new QObject(parent); QObject *child1_1 = new QObject(child1); QObject *child1_2 = new QObject(child1);

delete parent;  This is used when implementing visual hierarchies.  Heap memory is explicitly allocated and freed using new and delete  Local variables are allocated on Stack

http://www.fit.vutbr.cz/~imlich/ Qt | 9 / 28 Signals and slots

 A “callback” (in other tool kits) is a pointer to a function that is called when an event occurs, any function can be assigned to a callback – No type-safety – Always works as a direct call  Signals and Slots are more dynamic – A more generic mechanism – Easier to interconnect two existing classes – Less knowledge shared between involved classes

http://www.fit.vutbr.cz/~imlich/ Qt | 10 / 28 Widget

 Widget is basic graphical primitive in Qt  Objects are in Tree Hierarchy  Its behavior is given by it source code and by inheritance.  (Almost) Every visual object is child QWidget in terms of inheritance

http://www.fit.vutbr.cz/~imlich/ Qt | 11 / 28 Object positioning

 Layouts – mostly used  Absolute position – “easy way”  Anchors  ...

http://www.fit.vutbr.cz/~imlich/ Qt | 12 / 28 Resources

 Used for data embedded into the executable file – Images – Icons – Sounds – (QML Source code) QUrl(QLatin1String("qrc:/camera-icon.png"));

http://www.fit.vutbr.cz/~imlich/ Qt | 13 / 28 Properties

 Sample Code class QLabel : public QFrame { Q_OBJECT Q_PROPERTY(QString text READ text WRITE setText) public: QString text() const; public slots: void setText(const QString &); };  Why Setters/Getters? – Possible to validate values or to react to changes – Indirect properties (i.e. return m_size.width();) – Qml

Q_PROPERTY(type name READ getFunction [WRITE setFunction] [RESET resetFunction] [NOTIFY notifySignal] [DESIGNABLE bool] [SCRIPTABLE bool] [STORED bool] [USER bool] [CONSTANT] [FINAL])

http://www.fit.vutbr.cz/~imlich/ Qt | 14 / 28 Qt Quick

 QML = language  Qt Declarative = Qt module

import QtQuick 2.0 Rectangle { width: 360 height: 360 Text { text: qsTr("Hello World") anchors.centerIn: parent } MouseArea { anchors.fill: parent onClicked: { Qt.quit(); } } }

http://www.fit.vutbr.cz/~imlich/ Qt | 15 / 28 Hello QML – tree hierarchy import QtQuick 2.0

Rectangle { Text { }

MouseArea { }

Rectangle {

Rectangle {

Rectangle { }

Rectangle { }

Rectangle { }

}

} http://www.fit.vutbr.cz/~imlich/ Qt | 16 / 28 Hello QML – properties import QtQuick 2.0

Rectangle { Text { width: 360; // value height: width/2; // expression text: qsTr("Hello World") // calling function } }

 Cloud contain value / expression / code  What is qtTr()? – See Internalization and Localization section of manual.

http://www.fit.vutbr.cz/~imlich/ Qt | 17 / 28 Hello QML – properties complex code import QtQuick 2.0

Rectangle { Text { id: myText; text: “default value”; anchors.fill: parent; } Component.onCompleted: { myText.text = “new value”; } }

 ID and PARENT are special.  Terminology:

– Class starts with Uppercase letter – e.g. Rectangle, Text – Property with lowercase – e.g. width, id, text – Code is javascript (almost C)

http://www.fit.vutbr.cz/~imlich/ Qt | 18 / 28 Hello QML – function and own properties import QtQuick 2.0

Rectangle { property double myValue: 7.3; Rectangle { x: 10; y: 10; width: 10; height: 10; color: getColor(myValue); } function getColor(v) { if (v < 10) { return “#ff0000”; } return “#00ff00”;

} }  Basic types – int, bool, real, double, string, url, list, variant, var – color, vector2d, vector3d, date, rect, size

http://www.fit.vutbr.cz/~imlich/ Qt | 19 / 28 Hello QML – build in classes

 See http://qt-project.org/doc/qt-5/qtquick-index.html  Item, Component  Visual – Rectangle { color: “red”; } – Image { source: “image.png”; } – Text { text: “hello world”; }  Non visual – MouseArea { anchors.fill: ; onClicked: { console.log(“hello world”); } } – TextInput { text: “”; }  ListModel, ListElement

http://www.fit.vutbr.cz/~imlich/ Qt | 20 / 28 Hello QML – inheritance MyRectangle.qml Rectangle { x: 10; y: 10; width: 10; height: 10; color: “red”; } ... import “directory or namespace” MyRectangle { // color, x, and y are given by inheritance height: 100; // height and width are overriden width: 100; }

http://www.fit.vutbr.cz/~imlich/ Qt | 21 / 28 Design pattern MVC

 Model / View / Controller  Delegate

import QtQuick 2.0 import QtQuick 2.0 import QtQml.Models 2.0 ListView { ListModel { width: 180; height: 200 ListElement { model: ContactModel {} name: "Bill Smith" delegate: Text { number: "555 3264" text: name + ": " + number } } ListElement { } name: "John Brown" number: "555 8426" } ListElement { name: "Sam Wise" number: "555 0473" } }

http://www.fit.vutbr.cz/~imlich/ Qt | 22 / 28 QML and C++ class MyCppObject { Q_PROPERTY(QString foo ...... ) Q_INVOKABLE void bar( QString ); .... }; qmlRegisterType("my.namespace", 1, 0, "MyQMLObject"); engine.rootContext()->setContextProperty( "_network_controler", &network_controler ); import my.namespace 1.0 MyQMLObject { id: myObj; foo: “string”; }

Component.onCompleted: { console.log(myObj.bar()) }

http://www.fit.vutbr.cz/~imlich/ Qt | 23 / 28 Computer Exercise

 Calculator with benefits

 What do we use? – UI with Qt Quick – MVC – Connection of C++ and QML

 What do we get? – knowledge – 5 points

http://www.fit.vutbr.cz/~imlich/ Qt | 24 / 28 Computer Exercise – TODO

 Warm up – Download skeleton – Run Qt Creator IDE – Run skeleton  Add operation of multiplication and division (1pt)  Tune MyClickButton class. – The text should be in the center of the element (1pt) – The button should change color when clicked (1pt)  Incorporate misterious transformation – Use the Look Up Table implmented in C++ (1pt)  Compute result (1pt) – Fix switch / case. – Include all above.

http://www.fit.vutbr.cz/~imlich/ Qt | 25 / 28 Shaders

 Here comes magic!  Using OpenGL for “advanced effects”. – Cinematic experience – http://mynokiablog.com/2011/05/03/qt-quick-shader-effects- running-on-a-nokia-n8-symbian3-maemo-5-mac-os-x- windows-7-and-ubuntu/ – http://www.youtube.com/watch?v=dzHGILAG68g

http://www.fit.vutbr.cz/~imlich/ Qt | 26 / 28 References

 http://qt-project.org/  http://qt-project.org/doc/ Reference manual  http://qmlbook.org/  IRC: #qt and #qt-qml at freenode  Fitzek, Frank H. P., Tommi Mikkonen, and Tony Torp. Qt for Symbian. John Wiley and Sons, 2010.  Molkentin, D: The Book of Qt 4: The Art of Building Qt Applications, No Starch Press, 2007, 440p, ISBN10: 1593271476, ISBN13: 978159327147

http://www.fit.vutbr.cz/~imlich/ Qt | 27 / 28 Questions ?

http://www.fit.vutbr.cz/~imlich/ Qt | 28 / 28