A Desktop UI with QtQuick

A Desktop UI with QtQuick
How QtQuick encouraged us to totally rethink a Desktop
User Interface

1

Freitag, 25. November 2011

my Qt mileage

Nils Jeisecke
saltation GmbH & Co. KG / Bielefeld / Germany
http://www.saltation.de

Qt developer > 10 years (since Qt 2)

2


The Use Case Computer Telephony Integration

The Use Case is called „TK-Suite Client“, a CTI and PIM
application for a PBX.
Personal Information Management

Business telephone system

That Application went through nearly all Qt iterations:
• Qt 2 used for prototype
• Qt 3 used for 1.0, 2.0, 3.0 and the !rst Mac Version
• Qt 4 used for 4.x 1st (!rst rewrite)

3


Evolution of TK-Suite Client
Version 1 and 2

4


Version 3

5


Version 4

6


Highlighting some UI problems

* Live Demo of Version 4 *

7


Building a UI with Qt Widgets
What does a Qt programmer do if he must implement a
UI?

1. I look for the widget that is the nearest match for the
requirements
2. I tune the widget by
• doing some CSS styling
• subclassing and changing behavior
• writing a custom delegate for item views
3. If that’s not possible, I’ll write a widget from scratch

8


A customized TreeView

In order to navigate through contacts and
numbers, we use an expanded tree view

A custom delegate will draw a
special selection

But a customized QTreeView is still a
QTreeView and will always be.

9


A Problem with Toolbars

This is a long distance!
There’s no visual connection.

10


The Problems with Popups

That’s 0x0c (12) entries!

1

2
We repeat the item Text

3

4

5
6

7
8

9

a

b
c

1

+1 completely unrelated to the item

11


Using QMainWindow as a Dashboard

Everything is arranged around a
Screen 1 2 3 4 5 6 central widget that deﬁnes the
“main” functionality of each screen

Resizing a Dockwidget inﬂuences
other dockwidgets

12


Resizing a QMainWindow

sm
al
le
r

ol
d
si
Oh no! My lovely arranged Favorite
ze
Views are totally messed up!

13


I have a certain feeling that we
need to do something about
this!

14


So this is what our interface designer had in mind...

15


...and this was our programmer’s reaction:

If I will have to code this with
QWidgets and CSS styling
I’m going to shoot myself.

16


Short Break for a commercial

17


Whatever the future of Qt on mobile
phones will be...

Nokia gave us a precious gift:

18


...so this is what we have built using QtQuick:

19


* Live Demo of Version 5 *

20


A User Interface with Qml

This is a ListView with a delegate

21


A Contact Delegate
Column {
id: data
anchors.left: parent.left
anchors.leftMargin: 30
anchors.right: parent.right
spacing: 4
clip: true

Text {
visible: text.length > 0
width: data.width
color: "#efefef"
text: model.displayName
Not that exiting:
elide: Text.ElideMiddle
font.bold: true
This could easily be done within
font.pixelSize: 14
QItemDelegate::paint
}
Text {
width: data.width
text: model.company
color: "#a7a07a"
font.pixelSize: model.displayName.length === 0 ? 14 : 10
elide: Text.ElideMiddle
}

Image { source: "images/contact_separator.png" }
}

22


Qml Delegates have a state
CtiExtensionStateProvider {
id: contactExtensionState
contactId: model.objectId
}

Rectangle {
anchors.fill: extensionNo
anchors.margins: -2
color: contactExtensionState.stateColor
Now it’s getting more interesting: opacity: 0.7
visible: contactExtensionState.extensionId != ""
This is a custom C++ QObject based class }
that is created from within Qml and Text {
implements business logic. id: extensionNo
anchors.verticalCenter: parent.verticalCenter
x: 6
color: "white"
text: contactExtensionState.extensionNo
}
In this case we display the status of a PBX
extension (that’s a telephone) by binding
to properties of that object.

I need no longer put logic in a
model where it does not belong to.
23


Putting actions in context

ActionMenu {
id: actionMenu
}

The ActionMenu item extends a Qml
ListView

This is the ActionMenu’s delegate

So you can really have delegates in
ListViews in delegates! How cool is
that. And actually useful!
24


Qml based Dashboard

#2
#3
Repeater {

model: QsltDashboardModel {
id: dashboardModel
canvasRect: Qt.rect(root.x, root.y, root.width, isMaximized ? maximizedSize : 10000)
spacing: 10

#1 }

delegate: DashboardDelegate {}
}

#4
This is the C++ model that cares
about the layout
All these delegates are created by a
Qml Repeater item

This delegate implements all the
animation and manages the content
25


DashboardDelegate caption

Rectangle {
id: captionRect
color: captionColor
width: parent.width
height: 28
radius: 10

Row {
id: captionButtons
DashboardCaptionButton {
imageSource: trashIcon; visible: __settingsItem !== null; onClicked: { removeItem() } }
imageSource: showSettingsIcon; visible: __settingsItem === null; onClicked: { toggleSettings() } }
imageSource: hideSettingsIcon; visible: __settingsItem !== null; onClicked: { toggleSettings() } }
imageSource: maximizeIcon; onClicked: { toggleMaximize() } }
}
}
Text { /* ... */ }

26


Moving a DashboardDelegate around

MouseArea {
id: dragArea
anchors.fill: captionRect

onPressed: root.dragging = true

onPositionChanged: {
if (root.dragging) {
var p = mapToItem(root, mouse.x, mouse.y)
dashboardModel.moveTo(model.index, Qt.point(p.x, p.y))
}
}
}

We let our C++ model do all the hard work
of recalculating the layout.

27


DashboardDelegate content

Loader {
id: content
anchors.left: parent.left
anchors.top: settingsContainer.bottom
anchors.bottom: parent.bottom
source: model.componentPath // the model will tell us which Qml file implements the DashboardItem
opacity: dragArea.pressed && dragArea.pressedButton == Qt.LeftButton ? 0.3 : 1

Behavior on opacity { NumberAnimation { duration: 200 } }

/* ... */
}
I’m going to watch TV
now.

28


Wireframing

If time permits: Demo the Workspace Wireframe

29


Best Practices with QtQuick
• Use the power of Qt and C++ to implement
– Business logic
– Data models
– Network communication
• Use QObject and QAbstractItemModel to interface
between C++ and Qml
• Limit the use of Qml to implement
– Data presentation
– User Interaction
• Don‘t forget to contact a Designer

30


Thanks to QtQuick we can !nally
develop state of the art cross platform
User Interfaces.

Thank your very much for your
Attention and have fun at Qt
DevDays 2011!
31


Session Feedback
Session Feedback

Remember to send your session feedback
via the Qt Developer Days App.

Get the app by
-  Tapping one of the NFC tags on the event !oor
-  Downloading the ”Qt Developer Days” app from Nokia Store
-  Downloading it from qt.nokia.com/qtdevdays2011
-  Visiting m.qtdevdays2011.qt.nokia.com to use web version

32


A Desktop UI with QtQuick

More Related Content

Similar to A Desktop UI with QtQuick (20)

Recently uploaded (20)

A Desktop UI with QtQuick