User Interface Programming Qt
Total Page:16
File Type:pdf, Size:1020Kb
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: <itemId>; 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<MyCppObject>("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 .