a desktop ui with qtquick
DESCRIPTION
"How QtQuick encouraged us to totally rethink a Desktop User Interface"Our Qt Developer Days 2011 Munich/San Francisco presentation about using Qt Quick on the Desktop.TRANSCRIPT
A Desktop UI with QtQuickHow QtQuick encouraged us to totally rethink a Desktop
User Interface
1
Freitag, 25. November 2011
my Qt mileage
Nils Jeiseckesaltation GmbH & Co. KG / Bielefeld / Germanyhttp://www.saltation.de
Qt developer > 10 years (since Qt 2)
2
Freitag, 25. November 2011
The Use CaseThe Use Case is called „TK-Suite Client“, a CTI and PIM application for a PBX.
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
Computer Telephony Integration
Personal Information Management
Business telephone system
Freitag, 25. November 2011
Evolution of TK-Suite ClientVersion 1 and 2
4
Freitag, 25. November 2011
Evolution of TK-Suite ClientVersion 3
5
Freitag, 25. November 2011
Evolution of TK-Suite ClientVersion 4
6
Freitag, 25. November 2011
Highlighting some UI problems
* Live Demo of Version 4 *
7
Freitag, 25. November 2011
Building a UI with Qt WidgetsWhat 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
Freitag, 25. November 2011
A customized TreeView
9
A custom delegate will draw a special selection
In order to navigate through contacts and numbers, we use an expanded tree view
But a customized QTreeView is still a QTreeView and will always be.
Freitag, 25. November 2011
A Problem with Toolbars
10
This is a long distance!There’s no visual connection.
Freitag, 25. November 2011
The Problems with Popups
11
1
2
3
4
5
6
7
8
9
a
b
c
That’s 0x0c (12) entries!
1
+1 completely unrelated to the item
We repeat the item Text
Freitag, 25. November 2011
Using QMainWindow as a Dashboard
12
Everything is arranged around a central widget that defines the
“main” functionality of each screenScreen 1 2 3 4 5 6
Resizing a Dockwidget influences other dockwidgets
Freitag, 25. November 2011
Resizing a QMainWindow
13
smaller
old size
Oh no! My lovely arranged Favorite Views are totally messed up!
Freitag, 25. November 2011
14
I have a certain feeling that we need to do something about this!
Freitag, 25. November 2011
So this is what our interface designer had in mind...
15
Freitag, 25. November 2011
...and this was our programmer’s reaction:
16
If I will have to code this with QWidgets and CSS styling I’m going to shoot myself.
Freitag, 25. November 2011
Short Break for a commercial
17
Freitag, 25. November 2011
Whatever the future of Qt on mobile phones will be...
18
Nokia gave us a precious gift:
Freitag, 25. November 2011
...so this is what we have built using QtQuick:
19
Freitag, 25. November 2011
* Live Demo of Version 5 *
20
Freitag, 25. November 2011
A User Interface with Qml
21
This is a ListView with a delegate
Freitag, 25. November 2011
A Contact Delegate
22
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 elide: Text.ElideMiddle font.bold: true font.pixelSize: 14 } 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" } }
Not that exiting:
This could easily be done within QItemDelegate::paint
Freitag, 25. November 2011
Qml Delegates have a state
23
CtiExtensionStateProvider { id: contactExtensionState contactId: model.objectId}
Rectangle { anchors.fill: extensionNo anchors.margins: -2 color: contactExtensionState.stateColor opacity: 0.7 visible: contactExtensionState.extensionId != ""}Text { id: extensionNo anchors.verticalCenter: parent.verticalCenter x: 6 color: "white" text: contactExtensionState.extensionNo}
Now it’s getting more interesting:
This is a custom C++ QObject based class that is created from within Qml and
implements business logic.
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.
Freitag, 25. November 2011
Putting actions in context
24
ActionMenu { id: actionMenu anchors.right: parent.right anchors.verticalCenter: parent.verticalCenter }
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!
Freitag, 25. November 2011
Qml based Dashboard
25
#1
#2#3
#4
Repeater {
model: QsltDashboardModel { id: dashboardModel canvasRect: Qt.rect(root.x, root.y, root.width, isMaximized ? maximizedSize : 10000) spacing: 10 }
delegate: DashboardDelegate {} }
All these delegates are created by a Qml Repeater item
This is the C++ model that cares about the layout
This delegate implements all the animation and manages the content
Freitag, 25. November 2011
DashboardDelegate caption
26
Rectangle { id: captionRect color: captionColor width: parent.width height: 28 radius: 10
Row { id: captionButtons anchors.verticalCenter: parent.verticalCenter anchors.right: parent.right DashboardCaptionButton { imageSource: trashIcon; visible: __settingsItem !== null; onClicked: { removeItem() } } DashboardCaptionButton { imageSource: showSettingsIcon; visible: __settingsItem === null; onClicked: { toggleSettings() } } DashboardCaptionButton { imageSource: hideSettingsIcon; visible: __settingsItem !== null; onClicked: { toggleSettings() } } DashboardCaptionButton { imageSource: maximizeIcon; onClicked: { toggleMaximize() } } }}Text { /* ... */ }
Freitag, 25. November 2011
Moving a DashboardDelegate around
27
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.
Freitag, 25. November 2011
DashboardDelegate content
28
Loader { id: content anchors.left: parent.left anchors.right: parent.right 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.
Freitag, 25. November 2011
Wireframing
If time permits: Demo the Workspace Wireframe
29
Freitag, 25. November 2011
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
Freitag, 25. November 2011
31
User
Thanks to QtQuick we can !nally develop state of the art cross platform
Interfaces.
Thank your very much for your Attention and have fun at Qt DevDays 2011!
Freitag, 25. November 2011
Session Feedback
32
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
Freitag, 25. November 2011