Meet Qt. Justin Noel Senior Consulting Engineer ICS, Inc.

Transcription

1 Meet Qt Justin Noel Senior Consulting Engineer ICS, Inc.

2 Agenda Who is ICS? The Case For Qt Qt Tips and Tricks Effective QML

3 Who is ICS?

4 Delivering World-Class, Touchscreen Applications Embedded Mobile Tablets Kiosks Desktops To maintain client confidentiality, some examples are illustrative not actual.

5 Product Focused Services Full project implementation From UX design to QA Software development Multi-team projects to staff augmentation UX development Technology transfer Agile Coaching, Mentoring, Training, etc.

6 About ICS * Founded 1987 Corvallis Sunnyvale Los Angeles Ottawa Boston Atlanta Warsaw Naples Moscow Kiev Worldwide Offices * Qualifies as Small Business

7 More Info

8 The Case For Qt

9 Agenda What exactly is Qt? Desktop Applications Mobile Devices Embedded Devices QtQuick Model/View Design

10 What is Qt? Application Development Framework More than just a GUI Toolkit Come for the UI. Stay for everything else! Kitchen Sink C++ Library Threads, SQL, XML, Non-Blocking Sockets Over 600 Classes

11 Qt is Cross-Platform Write Once. Compile Anywhere. Windows / WinCE / WinRT Linux QNX, VxWorks Android, ios, BlackBerry

12 Qt Makes Life Easy

13 Qt Makes Life Easy Qt is designed around ease of use Many conveniences for common use cases Roughly zero boilerplate code API is easy to learn and is consistent Qt isms are easier than boost isms + libxml isms

14 Qt Modules and Toolss

15 HelloWorld in Qt #include <QApplication> #include <QLabel> int main(int argc, char *argc[]) { QApplication app(argc, argv); QLabel label = new QLabel( Hello World ); label.show(); app.exec(); }

16 Signals and Slots Inter-object communication Callbacks? Listeners? Events? All flawed in their own way Signals and Slots is Qt s answer Contractless Observer Pattern

17 Signals and Slots void Slider::mousePressEvent(... ) {... emit valuechanged( newvalue ); } void LCDNumber::setNumber(int num) { my_value = num; } Signal Emitted Signal and Slot Connection Slot Implemented connect( slider, SIGNAL( valuechanged( int ) ), lcdnumber, SLOT( display ( int ) ) )

18 Signals and Slots Qt does all the heavy lifting Connection management Delete a sender or receiver? No Problem! Type checking, marshalling, etc. Signals and slots work across threads!

19 Qt is Really Smart Qt implements introspection Much like Java Query for method names, signals, enums, etc. Qt provides moc (Meta-Object Compiler) Reads your headers. Provides introspection sources This is how signals and slots work!

20 Qt is Worldly UNICODE strings from the ground up Built in utilities for internationalization Languages, plurals, dates, numbers Ships with translation tools For use by non-developers

21 Desktop Applications

22 Qt Has History Version 1.0 released in 1995 Happy 20 th Birthday! UNIX and Windows cross-platform Huge list of supported OSs and compilers Qt was 64 bit clean on the DEC Alpha Mac suport was added in 1999

23 Qt Looks Right

24 Qt is Convenient QMainWindow MenuBar, ToolBars, StatusBar Dock Areas Work on what makes your app special Not on coding standard paradigms

25 QMainWindow

26 Mobile Applications

27 Qt is Cross-Platform Android ios Windows Phone 8 / WinRT BlackBerry 4.8 ships on BB10 5.x coming soon

28 Share Backend Code Write C++ backend code once Reuse on all major mobile platforms That can run C++ Threads, Networking, SQL, XML All from one API

29 Even Write the UI QtGui runs on all the above platforms QtQuick too! Each mobile platform has it s own nav Either UI must be severely tweaked for each; or Treat UI as a light wrapper layer Write a new skin for each» More on this in Embedded Devices

30 Even Write the UI QtGui runs on all the above platforms QtQuick too! Each mobile platform has it s own nav Either UI must be severely tweaked for each; or Treat UI as a light wrapper layer Write a new skin for each» More on this in Embedded Devices

31 Embedded Devices

32 Did I Mention Cross-Platform? Linux OpenGL ES, X11, Wayland QNX / VxWorks OpenGL ES WinCE / WEC7 GDI / OpenGL ES

33 Qt Has Qt Quick Build dynamic design driven UIs Animations, Transitions, State Machines Built into a declarative user interface language Clean architecture Enforced Model / View Design

34 Design Driven UI

35 Layered Design (Coffee Maker) UI User chooses Size, Bold, Ice, etc. Core BrewCoffeeCommand Devices Grinder, Pumps, Heat Element Hardware GPIO, SPI, I/O

36 Model / View Design Properties C++ Backend (Model) Signals QML Items (View) Slots

37 Model / View Design C++ code knows nothing about the UI QML Items connect or bind to C++ Objects C++ does not know about UI at all Good Design is Enforced Avoids accidental storage of data inside UI C++ is more portable to other UI frameworks

38 Model / View Design Props C++ Backend Might Use Qt Might Not QML Adapters Signals Slots QML Items

39 QML Adapter Classes Responsible for Qt-ifying application data Wrap state and data objects in QObject Properties, Signals, Slots Wrap list-like objects in QAbstractItemModel Required if your backend does not use Qt

40 Testability Test C++ code separately from UI Unit test and poke it s outer interfaces Verify and certify it works as designed Test UI without the backend Inject mock backend objects Mocks can be written in QML

41 What is QtQuick? Declarative User Interface Language a.k.a QML Execution runtime for QML Custom V4 JavaScript Engine Developer Tools Profiler, Debugger, etc.

42 QML Hello World import QtQuick 1.0 Rectangle { height: 200; width: 200 } Text { } Image { } x: 100; y: 100; width: 200 color: white x: 20; y: 20 width 150; height: 120; source: rocket.jpg

43 Connecting QtQuick to C++ QObject Wrap C++ objects in QObject Introspection! Signals, Slots and Properties Properties Combination of Get / Set / Signal

44 Qt Tips and Tricks

45 Today's Agenda MetaObject Tips Qt Properties, Dynamic Function Calling QVariant and Implicit Sharing Tips Using Your Data Types Model View Tips QAbstractItemModel As Interface To Data Performance Tips Looping, QPixmap/QImage, QNetworkAccessManager

46 Today's Agenda Threading Tips QtConcurrent, Signals/Slots, Event Loops Miscellaneous Tips ComboBox itemdata(), i81n, Designer, casts Testing Tips QTest, Q_ASSERT, Signals/Slots

47 Meta Object Tips

48 Qt s Property System Use Q_PROPERTY() macro in your widget Declares a property with meta-object system Wraps set/get methods and signal Q _PROPERTY ( Type Name READ getfunction [WRITE setfunction ] [RESET resetfunction ] [DESIGNABLE bool ] [SCRIPTABLE bool ] [STORED bool ] [NOTIFY signal] [USER bool])

49 Q_PROPERTY Rules Types must be QVariant compatible Custom types need Q_DECLARE_METATYPE and qregistermetatype<>() To use enums as a property type use Q_ENUMS macro If your enum can be OR d use Q_FLAGS myflag = MyClass::Read MyClass::Write;

50 Q_PROPERTY Example class MyTitleWidget : public QWidget { Q_OBJECT Q_PROPERTY( QString title READ title WRITE settitle RESET cleartitle ) public: QString title(); public slots: void settitle(qstring); void cleartitle(); };

51 Q_ENUM Example class MyClass : public... { Q_OBJECT Q_ENUM( Priority ) Q_PROPERTY( Priority priority READ priority WRITE setpriority ) public: enum Priority { HIGH, MED, LOW }; Priority priority(); public slots: void setpriority(priority); };

52 Q_PROPERTY Advantages Properties can be saved/loaded in Designer Properties are exported to variables in QtScript Enables the generic setproperty(qvariant) and property() generic functions

53 Dynamic Function Calling QMetaObject::invokeMethod( ) Can invoke any slot Sync or Async With parameters and return type No access to return type for async invocations Useful for delayed initialization Like QTimer::singleShot(), but with arguments! Useful for IPC mechanisms

54 QMetaObject::invokeMethod() bool QMetaObject::invokeMethod( QObject* obj, const char* member, Qt::ConnectionType type, QGenericReturnArgument ret, QGenericArgument val0,... QGenericArgument val9 );

55 invokemethod Helper Macros QGenericReturnArgument and QGenericArgument are internal helper classes for argument marshalling Do no use these classes directly; use the convenience macros instead Create a QGenericArgument Q_ARG( Type, const Type & value ) Create a QGenericReturnArgument Q_RETURN_ARG( Type, Type& value )

56 invokemethod Connection Type Invoke method immediately (synchronous) QMetaObject::invokeMethod(obj, "dostuff", Qt::DirectConnection); Place in event queue and invoke method when event is processed (asynchronous) QMetaObject::invokeMethod(obj, "dostuff", Qt::QueuedConnection);

57 invokemethod Connection Type Invoke method immediately (synchronous) QMetaObject::invokeMethod(obj, "dostuff", Qt::DirectConnection); Place in event queue and invoke method when event is processed (asynchronous) QMetaObject::invokeMethod(obj, "dostuff", Qt::QueuedConnection);

58 When to use invokemethod Use when calling methods by name Method name does not have to be known at compile time Think IPC Use for delayed invocation Method calls will be posted to the event loop potentially the event loop of other threads This is how cross thread signals/slots work

59 QVariant and Implicit Sharing Tips

60 QVariant Template Based Meta Type Can contain C++ types Can contain most Qt Types Can contain custom types If properly registered QVariants are used all over Qt and you can use them too Model-view, properties, cross-thread signals and slots

61 Registering Types Use Q_DECLARE_METATYPE(Type) in header Call qregistermetatype<>(type) at least once in your code

62 class Car { public: Custom Types in QVariant Car(const QString& make, const QString model); QString make() const; QString model() const; private: QString _make; QSrting _model; }; Q_DECLARE_METATYPE(Car); //Anywhere in code before using Car as QVariant in //Properties or Cross-Thread Signals and Slots qregistermetatype<car>( Car )

63 Converting Types You must use the template methods for custom types MyType mytype; QVariant var = QVariant::fromValue(myType); if( var.canconvert<mytype>() ) { MyType type = qvariant_cast<mytype>(var) } QVariant::Type QVariant::type() not useful Only works with C++ and Qt Types

64 Extending QVariant Comparison Doesn t Work for Custom Types Compares object addresses Serialization Can Work Implement Operators QDataStream &operator<<(qdatastream &out, const MyClass &myobj); QDataStream &operator>>(qdatastream &in, MyClass &myobj); Register with QMetaType System qregistermetatypestreamoperators<myclass>( MyClass );

65 Implicitly Shared Classes Most of Qt s Data Classes are Implicitly Shared Copies of classes point to the same internal data Very fast copies. Saves memory Reference counted Data is actually copied on modification Copy-On-Write Semantics QString, QPixmap, QImage, QByteArray, etc You can roll your own Implicitly Shared Classes Using the same classes Qt Engineers use!

66 Custom Implicitly Shared Data Inherit from QSharedData Provides required ref() and deref() impls These are atomic thread-safe impls Create a flyweight object with SharedDataPointer<> as a private member Hides sharing implementation from client code

67 Custom Implicitly Shared Data class EmployeeData : public QSharedData { public: EmployeeData() : id(-1) { name.clear(); } EmployeeData(const EmployeeData &other) : QSharedData(other), id(other.id),name(other.name){} ~EmployeeData() { } }; int id; QString name;

68 Custom Implicitly Shared Data class Employee { public: Employee() { d = new EmployeeData; } Employee(int id, QString name) { } d = new EmployeeData; setid(id); setname(name); Employee(const Employee &other) private: }; : d (other.d) {} QSharedDataPointer<EmployeeData> d;

69 Model View Tips

70 Model View Tips Avoid using all-in-one Model/View Widgets QListWidget, QTableWidget, QTreeWidget Needs to copy data! Syncing issue WILL arise Only really useful for simple lists, etc Avoid using QStandardItem Models Same reasons as above.

71 Model View Tips Use QAbstractItemModel (QAIM) as an Interface Wrap your data with QAIM for use with Qt s Model-View Classes Actual Data Storage Class QAIM Impl Qt View

72 QModelIndex Representation of a cell Row, Column, Parent QAIM::index(int row, int col, QModelIndex parent) Used thought the QAIM API Internal implementation is Row, Column, QAIM*, Identifier (void* or int) QAIM::createIndex(int row, int col, void* ptr) Very Small. Very Fast. Transient objects DO NOT STORE! Could be instantly invalidated by inserts/removes

73 QPersistentModelIndex Storable QModelIndex Implicit conversion to/from QModelIndex Model Index that is maintained by the Model Row incremented on another row inserted Row decremented on another row removed Index set to QModelIndex() when row is removed Watch out for performance issues Updating these indexes does take time

74 QAIM API Read Only Tables (Use QAbstractTableModel) rowcount(qmodelindex parent=qmodelindex()) columncount(qmodelindex parent=qmodelindex()) data(qmodelindex idx, int role) Different roles for display, editing, pixmap, etc. It s like a 3 rd Dimension. Cells have role depth. Editable Tables (Use QAbstractTableModel) setdata(qmodelindex idx, QVariant value, int role) insertrows(int row, int count, QModelIndex parent) removerows(int row, int count, QModelIndex parent)

75 QAIM API Trees (Use QAbstractItemModel) parent(qmodelindex idx) index(int row, int column, QModelIndex parent) Implementations of the above can be a little mind bending But well worth the effort

76 Model View Example Example of AQIM as a wrapper. To Qt Application Widget Hierarchy! It s a doubly linked tree! parent() and children() Extremely short code wrapper code. Check out the supplied ObjectBrowser Example!

77 QStyle For Custom Widgets Tips Drawing of Qt Widgets is completely delegated to QStyle. Based on QPainter and not QWidget. Super easy to draw fake widgets Works for great for Item Delegates (think ProgressBars) Use Qt Style to draw parts of your own widgets Implement a SliderSpinBox Implement a Tree Combo Box

78 Painting with QStyle void QicsTreeComboBox::paintEvent(QPaintEvent*) { //Data struct with public members like font, palette QStyleOptionComboBox opt = getstyleoption(); QStylePainter painter(this); painter.setpen(palette().color(qpalette::text)); // draw the combobox frame, focusrect and selected etc. painter.drawcomplexcontrol(qstyle::cc_combobox, opt); } // draw the icon and text painter.drawcontrol(qstyle::ce_comboboxlabel, opt);

79 User Interaction with QStyle void QicsTreeComboBox::mousePressEvent(QMouseEvent* e) { QStyleOptionComboBox opt = getstyleoption(); QStyle::SubControl sc = style()->hittestcomplexcontrol( QStyle::CC_ComboBox, &opt, e->pos(),this); // Was mouse over arrow? if (sc == QStyle::SC_ComboBoxArrow) { if(true == m_viewisopen) hideview(); else showview(); } }

80 Performance Tips

81 Looping Performance Tips Use Iterators! Maps, Hashes, Linked List Iterators are much faster than [i] index loopups. Code is more complex, but worth it. Most data classes in Qt are Implicitly Shared Don t be afraid to copy de-referenced iterator values Const Reference is still better.

82 STL Iterators Compatible with STL Algorithms Const and Non-const Versions Always use const version when appropriate Forwards QList<int>::iterator i; for (i = list.begin(); i!= list.end(); ++i) *i += 2; Reverse QList<QString>::iterator i = list.end(); while (i!= list.begin()) { --i;

83 Reverse (and Mutable) QMutableListIterator<int> i(list); i.toback(); while (i.hasprevious()) { if (i.previous() % 2!= 0) Java-like Iterators Iterators with a Java Style API Roughly Symmetrical Forward and Reverse APIs Mutable Iterator Classes allow list modification Forwards QListIterator<QString> i(list); while (i.hasnext()) qdebug() << i.next()

84 Looping Performance Tips Use const references for foreach() Yes, Qt has it s own foreach macro. Use it! Avoids typos/fence posting when iterating a whole container Using a const ref variable avoids a copy QList<BigData> list; //Lots of code foreach(const BigData& data, list) { } dosomething(data);

85 QImage vs. QPixmap QImage Platform independent array bitmap Lives in Application Memory Space Easy to manipulate pixels Query/set colors Needs to be copied to graphics memory to draw QPixmap Native representation of a bitmap (YUV, etc) Lives in System (XServer) or even Graphics Memory No ability to set individual pixels Very fast to draw. Bitmap is closer to hardware.

86 QNetworkAccessManager Cache QNetworkAccessManager (QNAM) is awesome Multiple Protocols (HTTP/FTP/HTTPS) SSL Integrated Provides Caching of Data Can be persistent across runtimes LightMaps from Qt Labs is a perfect example

87 QNetworkAccessManager Cache LightMaps Example Uses OpenStreetMap Tiles QNAM automatically caches tiles as they are loaded Makes panning much faster And code very clean

88 QNetworkAccessManager Cache In Constructor m_manager = new QNetworkAccessManager(this); QNetworkDiskCache *cache = new QNetworkDiskCache; cache->setcachedirectory(cachepath); m_manager->setcache(cache); connect(m_manager, SIGNAL(finished(QNetworkReply*)), this, SLOT(handleNetworkData(QNetworkReply*)));

89 QNetworkAccessManager Cache In download() (Simplified to fit) QString path = " m_url = QUrl(path.arg(zoom).arg(x).arg(y)); QNetworkRequest request; request.seturl(m_url); request.setattribute(qnetworkrequest::user, grab); m_pendingreplies << m_manager->get(request);

90 Miscellaneous Tips

91 Safer Casts with qobject_cast qobject_cast<>() is a library safe dynamic cast Behaves much like dynamic_cast Returns NULL pointer on error Uses Qt Meta-Object System (Introspection) moc records all signals, slots, properties Also inheritance hierarchy and string class names Naive impl could use the string class name and a static cast Some older compilers did this for dynamic_cast! Actual impl compares static QMetaObject*s Fast!

92 Finding Children T findchildren<t>(qstring name=qstring()) Returns descendants from any level of parenting tree Built-in qobject_cast<>() QList<MyWidget*> children = findchildren<mywidget*>(); //Children has all instance of MyWidget in dialog. QList<MyWidget*> children = findchildren<mywidget*>( Hi ); //Children has one instance of MyWidget with //objectname() == Hi

93 Use QComboBox itemdata() Use User Data when inserting items additem(const QString & text, const QVariant userdata)) QVariant is a wrapper class for many Qt Data Classes Can be extended to support custom classes Easy way to store mappings User Selectable String/Icon to Enum/Color/Font

94 Use QComboBox itemdata() Font Combo Box Example: MyDialog::MyDialog() { QStringList fonts = QFontDatabase::families(); foreach(qsyring family, fontlist) m_combo->additem(family, QFont(family)); } MyDialog::indexChanged(int index) { } setfont(m_combo->itemdata(i).tofont());

95 i18n Tips Wrap all User Visible String in tr() lupdate, lrelease and linguist take care of the rest Use static Qbject::translate() outside of QObject scope Be careful when combining strings File + filename + saved. Can t easily be translated QString( File %1 saved. ).arg(filename); % identifiers can be moved by the translation %1 - %99 can be used in any string

96 Using Designer Code Use Private Pointer to Generated Class Private Pointer Advantages Forward declare the generated class Hides dependency on generated header Binary Compatibility Can change.ui file without affecting dependant libraries/apps Remember to delete generated class in destructor Not a QObject; No parent.

97 Private UI Header Class Ui:: CalculatorForm; class CalculatorForm : public QWidget { Q_OBJECT public: CalculatorForm(QWidget *parent = 0); ~CalculatorForm(); private: Ui::CalculatorForm* ui; };

98 Private UI Implementation #include "ui_calculatorform.h" CalculatorForm::CalculatorForm(QWidget *parent) : QWidget(parent) { ui = new Ui::CalculatorForm(); ui->setupui(this); } CalculatorForm::~CalculatorForm() { delete ui; }

99 Threading Tips

100 Threading Tips Use classes that use background processing QNetworkAccessManager, QHostInfo, Sockets, etc Use Qt Event Loops for Producer Consumer You don t have to write syncronization code

101 Event Loop Work Queues Use Per-Thread Qt Event Loops as Work Queues Use cross thread signals and slots to assign work Use cross thread signals and slots to return results Avoids locking the work queue QEventLoop has built-in locks

102 Threading Tips Create a worker thread with run() {exec();} This is the default impl of run() Connect signals to thread slots to dispatch work Connect to thread signals to get results Watch out for QThread s Thread Affinity It belongs to the the thread CREATED it Not a big deal, just use a helper class created in the spawned thread.

103 Event Loop Work Queues connect(this, SIGNAL(workAvailable(WorkType)), thread->worker(), SLOT(doWork(WorkType))); connect(thread->worker(), SIGNAL(workComplete(WorkType)), this, SLOT(processWorkDone(WorkType)) //Auto Connection will cause events to be dispatched to the other thread emit workavailable(work); void processworkdone(worktype) { //Work is received };

104 Event Loop Work Queues class MyThread : public QThread { public: void run() {exec();} Worker* worker(); }; class Worker : public QObject { signals: workcomplete(worktype work); public slots: dowork(worktype work); };

105 General Threading Tips Use QMutex with QMutexLocker Constructor Locks; Destructor Unlocks void exclusivefunction() { QMutexLocker(m_mutex); //Constructor locks } //Destructor unlocks Qt supports Recursive Mutexes Same thread can lock mutex multiple times Must unlock the same number of times Not by default though. Use Recursive in constructor

106 Testing Tips

107 Regression Testing Unit Test using QTest Library Similar to junit and cppunit Can simulate Key and Mouse Events Test Signals with QSignalSpy Functional Test with tools like Squish Script driven application testing Use Q_ASSERT Set breakpoints on qt_assert() DO NOT put functional code in asserts. Only tests.

108 QTest Testing Framework Qt provides the QTestLib framework for testing Qt applications and libraries Lightweight and easy to use Quickly test: Objects Methods and properties GUIs Keyboard and mouse events Signals and slots

109 Doing Tests Various macros provided to report test pass/fail QVERIFY(condition) Verify condition evaluates to true QVERIFY2(condition, message) message is printed if test fails QCOMPARE(actual, expected) Compares using operator=, tries to write actual and expected to test log on failure QSKIP(description, mode) Causes the test to be skipped

110 Widget Testing Functions QTestLib sends internal Qt events to simulate GUI events No side effects on the host machine Key Events keyclick(qwidget* widget, Qt::Key key) keypress(qwidget* widget, Qt::Key key) Mouse Events mouseclick(qwidget * widget, Qt::MouseButton btn, Qt::KeyboardModifiers modifier, QPoint pos) mousemove(qwidget* widget, QPoint pos = QPoint())

111 Widget Testing Example void GuiTest::guiTest() { QLineEdit lineedit; QTest::keyClicks(&lineEdit, "Hello ); QCOMPARE(lineEdit.text(),QString("Hello")); } QPushButton button; QSignalSpy spy(&button, SIGNAL(clicked())); QTest::mouseClick( &button, Qt::LeftButton, Qt::NoModifier, QPoint(1, 1) ); QCOMPARE(spy.count(), 1); //one emitted signal QList<QVariant> args = spy.takefirst(); QCOMPARE(args.size(), 0); //with no args

112 Regression Testing Testing connect can be troublesome Broken Signal/Slot Connections print to stdout at runtime When someone changes/removes signal there is no compile time error. However, the contract has been changed and errors or loss of functionality will result Look for broken signals/slot connections in test outputs from QTest or Squish Or use Q_ASSERT() on the result of connect

113 Regression Testing Use Q_ASSERT to check connect() bool ok = connect(sender, SIGNAL(a()), this SLOT(b())); //Bombs on false in debug binary Q_ASSERT(ok == true); Q_UNUSED(ok) Be sure not to put code in Q_ASSERT Compiled out in release mode

114 Qt 5 Signal and Slot Connection Compile time checked signals and slots Requires C++ 11 connect( sender, &SenderClass::signalFunction reciever, &RecvClass::slotFunction );

115 Effective QML

116 Agenda Building Blocks of QML Declarative Code Creating New Item Types Dynamic Item Creation States Using C++ and QML

117 Building Blocks of QML

118 QObject Heart and Soul of Qt Object Signals and Slots are implemented here QObjects can have child objects Parents have some control over children Deleting them, laying them out, etc Also Qt Properties!

119 Introspection QObjects can report at runtime Class name, Super class Lists of signals and list their arguments Lists of functions and list their arguments Invoke methods by name QMetaObject::invokeMethod(objPtr, function )

120 Meta Object Compiler Introspection info is generated by moc Reads header files. Writes source code moc -o moc_class.cpp class.h MetaObject is static One instance per QObject subclass

121 QQuickItem Most Qt Objects inherit QObject QQuickItem is no exception Gets many of it s features directly from QObject We will be leveraging these capabilities throughout class

122 Qt Properties

123 Qt Properties Combination of Get/Set/Notify Allows introspection system to use these functions as one concept Properties have been in Qt for a very long time Qt Designer is based on properties QML is also based on properties

124 Declaration of a Qt Property #include <QObject> class Car : public QObject { Q_OBJECT Q_PROPERTY(int value READ value WRITE setvalue NOTIFY valuechanged) public: int getvalue() const; void setvalue(int newvalue); signals: void valuechanged(int value); };

125 Declarative Code

126 Basic QML Syntax QML is declarative language With hooks for procedural JavaScript Use as little JavaScript as possible QML files a read at runtime The declarative parts create C++ instances JavaScript is JIT interpreted

127 QtQuick Hello World import QtQuick 2.2 Rectangle{ id: toplevel color: blue Text { text: Hello World } } MouseArea { anchors.fill: parent onclicked: Qt.quit() }

128 Qt Quick Items Rectangle, Text and MouseArea Are implemented in C++ Instances of QQuickRectangle, QQuickText, Etc Loading QML is slower than compiled code At runtime performance is great

129 QML Bindings : is the binding operator Right of the binding operator is JavaScript Text { text: Hello World + Math.rand() } If the expression is simple assignment or call to C++ the interpreter is skipped

130 Bindings are Declarative When any property used in a binding changes the expression is recalculated Gauge { value: Math.min(gaugeMax, Math.max(gaugeMin, oilpressure.value)) } Value is updated whenever properties change gaugemax, gaugemin or oilpressure.value

131 JavaScript is Procedural Avoid this! Gauge { Component.onCompleted: { setgaugevalue(oilpressure.value) oilpressure.valuechanged.connect(setgaugevalue) } ongaugeminchanged: setgaugevalue(value) ongaugemaxchanged: setgaugevalue(value) } function setgaugevalue(oilvalue) { value = Math.min(gaugeMax, Math.max(gaugeMin, oilvalue)) }

132 Broken Bindings Assignment operator breaks bindings Binding works for awhile. Then doesn t. Gauge { id: gauge visible: Dashboard.isOilPressureVisible } } Button { onclicked: { // Tries to temporarily hide gauge if(gauge.visible) gauge.visible = false else gauge.visible = Dashboard.isOilPressureVisible } }

133 Creating New Items

134 Dividing Code Into Components Often a devs to put too much code in one QML file Common issue for all programming languages QML makes it easy to componentize your code Component refers to an item that can be instanced multiple times

135 Creating New Items Simply create a new.qml file Type is named after the filename Must begin with a capital letter Implement Properties Signals Functions

136 Using Custom Component Rectangle{ // Main.qml id: toplevel color: black } Button { text: Click Me onclicked: toplevel.color = white }

137 Custom Button Component Rectangle{ // Button.qml id: button property alias text: label.text signal clicked() color: blue width: 100; height: 50 Text { id: label anchors.centerin: parent } } MouseArea{ id: ma anchors.fill: parent onclicked: button.clicked() }

138 Alias Properties Proxies properties to child items Allows hiding of implementation details Saves memory and binding recalculations

139 Property Scope Public Scope All public properties of the root item Custom properties defined on the root item Private Scope All child items and their properties

140 Rectangle{ // Button.qml id: button property alias text: label.text signal clicked() color: blue Text { id: label anchors.centerin: parent } Public Members } MouseArea{ id: ma anchors.fill: parent onclicked: button.clicked() }

141 Rectangle{ // Button.qml id: button property alias text: label.text signal clicked() color: blue Text { id: label anchors.centerin: parent } Private Members } MouseArea{ id: ma anchors.fill: parent onclicked: button.clicked() }

142 Private Properties Rectangle { // Button.qml id: button property alias text: label.text signal clicked() QtObject { id: internal property int centerx: button.width()/2 } } Text { x: internal.centerx }

143 Dynamic Creation of Items

144 Creating Items Dynamically Procedural Way Component createobject(parent, bindings) function Declarative Way Loader Item Repeater Item ListView / GridView Items

145 Procedural Creation Item { id: screen property SettingDialog dialog: undefined Button { text: Settings... onclicked: { var component = Qt.createComponent( SettingsDialog.qml ) screen.dialog = component.createobject(screen, { anchors.centerin: screen }) screen.dialog.close.connect(screen.destroysettingsdialog) } } function destroysettingsdialog() { screen.dialog.destroy() screen.dialog = undefined }

146 Declarative Creation Item { Button { text: Settings... onclicked: loader.sourcecomponent = dialogcomponent Loader { id: loader anchors.fill: parent } } Component { id: dialogcomponent SettingsDialog { anchors.centerin: parent onclose: loader.sourcecomponent = undefined } }

147 Item { width: 400; height: 400 color: black Grid { x: 5; y:5 rows: 5; columns: 5 Creating Multiple Items } } Repeater { model: 24 Rectangle { width: 70; height: 70 color: lightgreen Text { anchors.centerin: parent text: index } } }

148 Repeater Repeaters can use all types of data models ListModel JSON QList<QObject*> QAbstractItemModel Model data is accessed via attached properties

149 States and Transitions

150 States State Machines can make your code more declarative A basic state machine is built into every Item No sub states or state history

151 States Every Item has a states property States contain Name When Clause List of PropertyChanges{} objects

152 Setting States Item can be set to a give state two ways 1) state property is set to the name of the State item.state = Pressed 2) The when clause of the State is true When clauses must be mutually exclusive They are evaluated in creation order

153 Button States Item { Rectangle { id: bkg; color: blue } MouseArea { id: ma } } states: [ State { name: Pressed when: ma.pressed PropertyChanges { target: bkg; color: red } }, State { name: Disabled when:!(ma.enabled) PropertyChanges { target: bkg; color: grey } } ]

154 Default State The initial bindings are the Default State The name of the default state is Default state is in effect when No when clauses are satisfied state property is set to

155 Properties When in a State The bindings of a QML document is defined as The default state bindings Overlaid with PropertyChanges from the current state This will save you a ton of typing States do not need to be unwound Set common properties in the default state Avoids writing duplicate PropertyChanges

156 Transitions Run animations on a state change Control how properties will change Qt will automatically interpolate values Control in which order properties change

157 Transitions [... ] transitions: [ Transition { from: ; to: Pressed PropertyAnimation { target: bkg properties: color duration: 500 }, Transition { from: * ; to: Disabled PropertyAnimation { target: bkg properties: color duration: 250 } ] [... ]

158 Transition Defaults Transition{} defaults to from: * ; to: * That Transition will apply to all state changes PropertyAnimation When a target is not specified That animation will apply to all items

159 Button Transition Item { Rectangle { id: bkg; color: blue } MouseArea { id: ma } states: [ State { name: Pressed ; when: ma.pressed PropertyChanges { target: bkg; color: red } }, State { name: Disabled ; when:!(ma.enabled) PropertyChanges { target: bkg; color: grey } } ] transitions: [ Transition { PropertyAnimation { properties: color ; duration: 500 } } ]

160 Using C++ and QML

161 Drive QML with C++

162 Model View Pattern C++ code can know nothing about the UI Properties, Slots and Signals are the interface in QML QML Items connect or bind to C++ Objects Good Design is Enforced C++ cannot depend on UI Avoids accidental storage of data inside UI components C++ is more portable to other UI frameworks

163 C++ Integration Techniques Expose object instances from C++ to QML Objects appear as global variables to QML Effectively singletons Expose C++ types to QML New types are available for QML programmers to use Remember how Rectangle and Text are actually C++?

164 Creating Properties in C++ Properties are the combination of Read function Write function Notify signal Signals/slots is Qt s object communication system

165 C++ Property Header class CoffeeMaker : public QObject { Q_OBJECT Q_PROPERTY(int temp READ gettemp WRITE settemp NOTIFY tempchanged) public: int gettemp() const; void settemp(int temp); signals: void tempchanged(); //Using a parameter is not required by QtQuick };

166 Source is as usual int CoffeeMaker ::gettemp() const { return m_temp; } void CoffeeMaker ::settemp(int temp) { if(m_temp!= temp) { m_temp = temp; emit tempchanged(); } }

167 Complex Proeprties QObject* can be used as a property Used for encapsulation and creating trees of properties Properties can have properties!

168 Invokable C++ Methods Methods can be called from QML Any slot can be called Any Q_INVOKABLE can be called

169 Invokable C++ Return Types Any basic Qt or C++ type int, double, QString, etc Any returned QObject* belongs to QML Will be deleted by QML during GC NOTE: QObject* returned from a Q_PROPERTY Belongs to C++

170 Invokable C++ Functions class CoffeeMaker : public QObject { Q_OBJECT Q_PROPERTY(int temp READ gettemp WRITE settemp NOTIFY tempchanged) public: int gettemp() const; void settemp(int temp); Q_INVOKABLE void startbrew(); public slots: void stopbrew(); signals: void tempchanged(); //Using a parameter is not required by QtQuick };

171 Exposing Instances int main(int argc, char** argv) { QGuiApplication app(argc, argv); CoffeeMaker maker; QQuickView view; view.rootcontext()->setcontextproperty( maker, &maker); view.setsource(qurl( qrc:/main.qml )); view.show(); } return app.exec();

172 Exposing Instances QML import QtQuick 2.2 Rectangle { width: 1024 height: 768 Text { anchors.centerin: parent text: Coffee Temp + maker.temp } } MouseArea { anchors.fill: parent onclicked: maker.startbrew(); }

173 Exposing C++ Types to QML Rather than making 1 CoffeeMaker in main Allow QML Programmer to create N CoffeMaker items All of the above applies to exposed types Instead of using setcontextproperty Use qmlregistertype<>()

174 Expose C++ Types int main(int argc, char** argv) { QGuiApplication app(argc, argv); qmlregistertype<coffeemaker>( MrCoffee, 1, 0, CoffeeMaker ); QQuickView view; view.setsource(qurl( qrc:/main.qml )); view.show(); } return app.exec();

175 Expose C++ Types QML import QtQuick 2.2 import MrCoffee 1.0 Rectangle { CoffeeMaker { id: maker } Text { anchors.centerin: parent text: Coffee Temp + maker.temp } } MouseArea { anchors.fill: parent onclicked: maker.startbrew(); }

176 Reusing Existing Code QML requires that properties READ functions returns correct value Could be called anytime NOTIFY signal emitted when prop changes Immediate call to READ returns new changed value

177 Reuse Techniques Direct Add Q_PROPERTY Model is already QObject based Stores its own data Wrapper Write a new QObject class Model is not (or cannot be) QObject based Model does not store data

178 Wrapper Reuse Technique Class that provides the QObject interface Inheritance Composition Easier to test Less chance of rocking the boat More typing. More code

179 Wrappers can fix a lot of issues Wrappers can work around limitations Class is template based Can t directly inherit QObject Class does not use signals Uses some other callback mechanism Class does not follow get/set/notify pattern Wrapper can implement local data cache

180 Model-View-Presenter Pattern Wrappers can be an implementation of MVP Also called Supervising Controller Pattern Provides flexibility between the Model and U Presentation Layer can reformat data Create strings from multiple model values Convert QList<Foo> into an QAbstractItemModel

181 Model View Presenter Presenter Properties Slots View State Changed Get / Set Model

182 Thank You! Justin Noel Senior Consulting Engineer ICS, Inc.

183