QML for Desktop Applications Helmut Sedding Michael T. Wagner - - PowerPoint PPT Presentation

▶
qml for desktop applications
SMART_READER_LITE
LIVE PREVIEW

QML for Desktop Applications Helmut Sedding Michael T. Wagner - - PowerPoint PPT Presentation

Nov 10, 2022 403 likes •886 views

QML for Desktop Applications Helmut Sedding Michael T. Wagner IPO.Plan GmbH Qt Developer Days Berlin 2012 About us IPO.Plan GmbH Located in Ulm and in Leonberg near Stuttgart The company is both experienced in factory planning and

slide-1
SLIDE 1

QML for Desktop Applications

Helmut Sedding Michael T. Wagner IPO.Plan GmbH Qt Developer Days Berlin 2012

slide-2
SLIDE 2

About us

 IPO.Plan GmbH  Located in Ulm and in Leonberg near Stuttgart  The company is both experienced in factory planning and in

software development.

 Our software focuses on process and logistics planning

Helmut Sedding and Michael T. Wagner | IPO.Plan

slide-3
SLIDE 3

QML for Desktop Applications

 Real World Usage: IPO.Log  Tight Data Coupling  QML for 2D Editing  Desktop GUI  Résumé

Helmut Sedding and Michael T. Wagner | IPO.Plan

slide-4
SLIDE 4

Real World Usage

 IPO.Log is used by

manufacturing industries for assembly process and logistics planning

 IPO.Log provides a GUI

tailored to its specific needs

 To allow for a modern,

streamlined GUI and rapid development we chose QML

 QML brings the highly

customized graphical Web & Mobile User Interfaces to the desktop

 www.ipolog.de

Helmut Sedding and Michael T. Wagner | IPO.Plan

slide-5
SLIDE 5

Tight Data Coupling: Values

Connect C++ Data Models to QML Views

Helmut Sedding and Michael T. Wagner | IPO.Plan

slide-6
SLIDE 6

Data Binding

 Pro

roper erty ty binding ing

Helmut Sedding and Michael T. Wagner | IPO.Plan

QObject Property Usage in QML Binding Qt Qt Proper perty in C++ Clas ass Access Read & Write ite

Q_PROPERTY(qreal angle READ angle

le WRITE setAngle ngle NOTIFY angleChanged);

Rectangle { rotation: object.angle }

slide-7
SLIDE 7

Data Binding

 Pro

roper erty ty binding ing

Helmut Sedding and Michael T. Wagner | IPO.Plan

QObject Property Usage in QML Binding Qt Qt Proper perty in C++ Clas ass Access Read & Write ite

Q_PROPERTY(qreal angle READ angle

le WRITE setAngl ngle NOTIFY angleChanged);

Rectangle { rotation: object.angle } MouseArea { onClicked: object.angle = 45 }

slide-8
SLIDE 8

Data Binding

 Property binding  Chan

ange ge pro ropag agat ation ion vi via a Noti tific icat ation ion signal als

Helmut Sedding and Michael T. Wagner | IPO.Plan

QObject Property Usage in QML Binding

  • 1. Chang

ange e Notifi ificat ation ion

  • 2. Recalc

alcul ulat ation ion On Change nge:

slide-9
SLIDE 9

Data Binding

 Property binding  Change propagation via Notification signals  Enab

ables es centr tral aliz ized ed dat ata a sto torag age

Helmut Sedding and Michael T. Wagner | IPO.Plan

QObject Property

Usage in QML Binding

slide-10
SLIDE 10

Data Binding

 Property binding  Change propagation via Notification signals  Enables centralized data storage  Advantages:

 Subscription based model views  Q_PROPERTY macros define clear interface

 Disadvantages:

 Signal setup for each binding: 50% slower than const values  On Notify: update time scales linear with usages

Helmut Sedding and Michael T. Wagner | IPO.Plan

slide-11
SLIDE 11

Selection: Example for slow data binding

 Display a list of numbers  Task: display “SEL” at selected index, else “---”

Helmut Sedding and Michael T. Wagner | IPO.Plan

property int selectedIndex: 7 1 2 3 4 5 6 7 8 9

  • SEL
slide-12
SLIDE 12

Selection: Example for slow data binding

 Display a list of numbers  Task: display “SEL” at selected index, else “---”

Helmut Sedding and Michael T. Wagner | IPO.Plan

property int selectedIndex: 7 1 2 3 4 5 6 7 8 9

  • SEL
  • SEL
  • 4
slide-13
SLIDE 13

Selection: Example for slow data binding

 Display a list of numbers  Task: display “SEL” at selected index, else “---”

Helmut Sedding and Michael T. Wagner | IPO.Plan

property int selectedIndex: 7 1 2 3 4 5 6 7 8 9

  • SEL
  • SEL
  • 4

MouseClick

slide-14
SLIDE 14

Selection “naïve”: notifications costly

 Task: display “SEL” at selected index, else “---”  Naïve Solution:  Slow

  • w on change, because all delegates are notified

 Insufficient for big applications

Helmut Sedding and Michael T. Wagner | IPO.Plan

property int selectedIndex: -1 Column { id: rep Repeater { model: 1000 delegate: Text { property bool isSelected: index == selectedIndex text: isSelected ? "SEL" : "---" MouseArea { anchors.fill:parent; onClicked: selectedIndex = index } } } }

re-evaluates on change * Number of Items

slide-15
SLIDE 15

Selection: Example for slow data binding

 Task: display “SEL” at selected index, else “---”

Helmut Sedding and Michael T. Wagner | IPO.Plan

property int selectedIndex: 7 1 2 3 4 5 6 7 8 9

  • SEL
  • SEL
  • 4

Actually, only two items need to change

slide-16
SLIDE 16

Selection “quick”: update selected item only

 Solution with constant update time:  Quick

ick on change: only two delegates are updated

Helmut Sedding and Michael T. Wagner | IPO.Plan

property int selectedIndex: -1 property int selectedIndexBefore: -1

  • nSelectedIndexChanged: {

if(selectedIndexBefore>=0) { rep.children[selectedIndexBefore].isSelected = false } if(selectedIndex>=0) { rep.children[selectedIndex].isSelected = true } selectedIndexBefore = selectedIndex } Column { id: rep Repeater { model: 1000 delegate: Text { property bool isSelected: false text: isSelected ? "SEL" : "---" MouseArea { anchors.fill:parent; onClicked: selectedIndex = index } } } }

re-evaluates on change * 2

slide-17
SLIDE 17

Selection of QObjects: improved handling

 When using C++ data models

 Quick selection handling can be provided efficiently by a hard

coded isSelected property, that is written centrally

Q_PROPERTY(bool isSelected READ isSelected NOTIFY isSelectedChanged);

 Updates in constant time  Selection handling happens at one single point only

Helmut Sedding and Michael T. Wagner | IPO.Plan

slide-18
SLIDE 18

Tight Data Coupling: Lists

Connect C++ Data Models to QML Views

Helmut Sedding and Michael T. Wagner | IPO.Plan

slide-19
SLIDE 19

Data Model Requirements

 How can lists of QObject* be efficiently stored in C++,

and handled transparently by QML?

 Requirements:

 Easy and quick C++ handling  Detailed Repeater updating

 On Add/Remove:

non-changing items remain

 Pass List as function parameters

Helmut Sedding and Michael T. Wagner | IPO.Plan

List

slide-20
SLIDE 20

Data Model: Alternatives

 QList<T>, QVariantList

 No detailed Repeater Updating (only total reset)

 QML ListModel

 No access from C++

 QAbstractListModel

 Slow and tedious access in C++ with QVariant, QModelIndex

 QObjectListModel

 Proposed solution

Helmut Sedding and Michael T. Wagner | IPO.Plan

slide-21
SLIDE 21

Data Model: QObjectListModel*

 QObjectListModel*

 Base class: QAbstractListModel  Stores QList< QObject*> internally  Sends Add/Remove signals

 Provides solution for both C++ and QML:

 C++: Accessors typed by QObject* are quick and easy to handle  Repeaters can deal with its base class: QAbstractListModel  Pointer has small memory footprint in method arguments

 QObjectListModelT<T>*

 Same as above, but additionally typed

 This way, C++ storage is efficient and transparent for QML

Helmut Sedding and Michael T. Wagner | IPO.Plan

slide-22
SLIDE 22

Accessing QObjectListModel items

 Provide Property for QML access:

 Q_PROPERTY(QObjectListModel * list READ list CONSTANT);

 By Integer (array-index):

 list.get(i)

 By Object:

 var i = list.indexOf(object)

 By Name:

 var i = list.indexOfName("Crichton")

 We extended this to provide constant access time with self-

updating index if needed

Helmut Sedding and Michael T. Wagner | IPO.Plan

slide-23
SLIDE 23

Typed List: QObjectListModelT<T>*

 Typed QObjectListModels:

 class RackListModel : public QObjectListModelT<Rack *> {

};

 Statically typed c++ accessors:

 Rack * rack = list.at(3);

 Typed Property for QML access:

 Q_PROPERTY(RackListModel * racks READ racks CONSTANT);

 Beforehand, make the list available in QML:

qmlRegisterUncreatableType<RackListModel>("IpoLog",3,0,"RackListModel",QString());

Helmut Sedding and Michael T. Wagner | IPO.Plan

slide-24
SLIDE 24

Filtering&Sorting QObjectListModels

 Proxy Models can filter or sort other list models.  Updates are forwarded though proxy models

Helmut Sedding and Michael T. Wagner | IPO.Plan

QObjectListModel* ListSortFilterModel

slide-25
SLIDE 25

Filtering&Sorting QObjectListModels

 Proxy Models can filter

ter or sort rt data.

 Updates are forwarded though proxy models

Helmut Sedding and Michael T. Wagner | IPO.Plan

ListSortFilterNameModel { id: sortFilterModel model: dataModel filterWildcard: "abc*" filterRole: "name" filterCaseSensitivity: ListSortFilterNameModel.CaseInsensitive sorted: true sortRole: "birthday" sortDescending: false } Repeater { model: sortFilterModel ... }

INPUT OUTPUT

slide-26
SLIDE 26

Proxy Model Chaining

 Proxy Models can even be chained  Here e.g. multiple string filters

Helmut Sedding and Michael T. Wagner | IPO.Plan

QObjectListModel* ProxyModel ProxyModel ProxyModel

ListSortFilterNameModel { id: modelA model: dataModel filterWildcard: "abc*" filterRole: "name“ } dataModel ListSortFilterNameModel { id: modelB model: modelA filterWildcard: "abc*" filterRole: “surname" } ListSortFilterNameModel { id: modelC model: modelB sorted: true sortRole: "birthday" sortDescending: false }

slide-27
SLIDE 27

Customized Proxy Models

 There often arise custom

filtering needs:

 e.g. object.nr < 100

 Custom filtering achieved by defining javascript methods

that are called from C++

 Sorting is similar, calling lessThan

Helmut Sedding and Michael T. Wagner | IPO.Plan ListFilterModel { model: dataModel filtered: true function filterAccepts(index, obj) { return object.nr < 100 } }

Performance

  • suitable for lists with ca. 1000 items.
  • If it’s not quick enough, simply switch to

a C++ proxy model implementation

slide-28
SLIDE 28

Tight Data Coupling: Summary

 Property binding and QObjectListModel*

 allows for centralized data storage  Usable both in C++ and QML  easy change propagation  Careful when using many bindings at the same time

 Slow setup and teardown

Helmut Sedding and Michael T. Wagner | IPO.Plan

slide-29
SLIDE 29

QML for 2D Editing

Viewing and Editing 2D Objects

Helmut Sedding and Michael T. Wagner | IPO.Plan

slide-30
SLIDE 30

Flickable: A Scrollable 2D Canvas

 Scrolling looks good in QML  Repeater puts objects into scene  Objects positioned using data binding  Polygons drawn by QPainter in QGraphicsItems

Helmut Sedding and Michael T. Wagner | IPO.Plan

slide-31
SLIDE 31

Repeater creates objects

 Data Model of geometric objects  Each object has

 Transformation

 position  angle

 Size

 boundsMinimum  boundsMaximum

Helmut Sedding and Michael T. Wagner | IPO.Plan

Repeater { model: workspace.racks delegate: Item { x:object.position.x y:object.position.y rotation: object.angle Rectangle{ width:(object.boundsMaximum.x-object.boundsMinimum.x) height:(object.boundsMaximum.y-object.boundsMinimum.y) color: "#ccc" } } }

slide-32
SLIDE 32

Flickable: Bounding Calculation

 Flickable starts at coordinate (0,0)  But items don’t do that, they are offset  Therefore offset by childrenRect

Helmut Sedding and Michael T. Wagner | IPO.Plan

Flickable { id: outer contentWidth: inner.width contentHeight: inner.height Item { id: inner x: -childrenRect.x+50 y: -childrenRect.y+50 width: childrenRect.width+100 height: childrenRect.height+100

/* CONTENT HERE */

} }

(0,0)

slide-33
SLIDE 33

Polygon: Drawn by Custom QML Item

 Polygons are not supported by QML  Resorting to QGraphicsItem

 Which lives perfectly fine in QDeclarativeScenes  Drawing with QPainter  Non-Rectangular shape requires custom mouse hit testing

Helmut Sedding and Michael T. Wagner | IPO.Plan

slide-34
SLIDE 34

Editing For Many Complex Items

 Naïve Solution: Hide not needed Edit Components  Drawback: memory requirements and setup/teardown times

Helmut Sedding and Michael T. Wagner | IPO.Plan

Si Simple mple View ew Ite tem Comple plex x Edit Item

slide-35
SLIDE 35

Editing: Single Edit Component

 Save memory by using the Single Edit Component pattern

 Split view into simple view items and few complex edit items

Helmut Sedding and Michael T. Wagner | IPO.Plan

Si Simple mple View ew Ite tem Comple plex x Edit Item Always switching to currently selected item

slide-36
SLIDE 36

QML for 2D Editing: Summary

 Flickable works quite well

 Scrolling  Zooming  Content Fit

 For Complex Graphic Items

 use fallback solution: C++ rendering (e.g. for polygons)  limit element count, e.g. use the Single Edit Component pattern

 Next improvements

 Level of Detail  Lazy loading

 Limitations

 Flickable redrawing is not perfect

Helmut Sedding and Michael T. Wagner | IPO.Plan

slide-37
SLIDE 37

Desktop GUI

Viewing and Editing 2D Objects

Helmut Sedding and Michael T. Wagner | IPO.Plan

slide-38
SLIDE 38

Tool Tips

 Defined easily:

Helmut Sedding and Michael T. Wagner | IPO.Plan ImageButton { text: "Do" ToolTip.text: "Does nothing" }

slide-39
SLIDE 39

Tool Tips

 Defined easily:  Implemented as an attached property:

Helmut Sedding and Michael T. Wagner | IPO.Plan

class ToolTipAttached : public QObject { Q_OBJECT; Q_PROPERTY(QString text READ text WRITE setText NOTIFY textChanged); public: static ToolTipAttached *qmlAttachedProperties(QObject *obj); ToolTipAttached(QObject *parent) : QObject(parent) {} … }; QML_DECLARE_TYPEINFO(ToolTipAttached, QML_HAS_ATTACHED_PROPERTIES)

ImageButton { text: "Do" ToolTip.text: "Does nothing" }

slide-40
SLIDE 40

Drag-n-Drop

 Custom DragArea, DropArea items  Using standard Qt Drag-n-Drop implementation

Helmut Sedding and Michael T. Wagner | IPO.Plan

DragArea { enabled:avoDragEnabled anchors.fill: parent supportedActions: Qt.MoveAction data { text: "Process" source: parent }

  • nDragStart: {}
  • nDragEnd: {}

} DropArea { anchors.fill: parent

  • nDragEnter: {}
  • nDragLeave: {}
  • nDrop: {

event.accept(Qt.MoveAction); doDrag(event.data.source); } }

slide-41
SLIDE 41

Desktop GUI: Limitations

 Custom QML Items are handy but not always

 Too many cases make abstraction slow

 When e.g. Button.qml both supports Image and Text

 Rather come up with more specialized items

 e.g. TextButton.qml and ImageButton.qml

 Mouse Input is sufficient for desktop use

 But we did not need context menus

 Keyboard input is tedious:

 tab orders, shortcut keys

 ListViews and Scrollbars don’t fit together well

 Delegate item height can’t be fixed

Helmut Sedding and Michael T. Wagner | IPO.Plan

slide-42
SLIDE 42

Résumé

QML makes desktop GUIs attractive again

Helmut Sedding and Michael T. Wagner | IPO.Plan

slide-43
SLIDE 43

Advantages

 Animations look stunning and are easy to create  Easy to change without recompiling  Pixel-perfect UI is created quickly  Data-Binding simplifies update-routines

Helmut Sedding and Michael T. Wagner | IPO.Plan

slide-44
SLIDE 44

Disadvantages

 Display of many elements requires fine-tuning

 Fallback to fast C++ QGraphicItems is possible

 Keyboard input is tedious  QML itself

 QML lacks certain abstractions  Data-Binding uses QVariant, loss of type-safety

Helmut Sedding and Michael T. Wagner | IPO.Plan

slide-45
SLIDE 45

Futher outlook

 Thanks for your interest  We are looking for companies and developers with similar

QML desktop experiences

 Talk tomorrow, 11:30 in Moskau B:

 SoDeclarative – a declarative wrapper for Coin3D

Helmut Sedding and Michael T. Wagner | IPO.Plan

slide-46
SLIDE 46

Sources

 QObjectListModel

https://bitbucket.org/helmuts/qobjectlistmodel/

 DragNDrop

https://bitbucket.org/gregschlom/qml-drag-drop/

Helmut Sedding and Michael T. Wagner | IPO.Plan