A Desktop UI with QtQuick
-
Upload
njeisecke -
Category
Technology
-
view
4.996 -
download
0
description
Transcript of A Desktop UI with QtQuick
![Page 1: A Desktop UI with QtQuick](https://reader034.fdocuments.net/reader034/viewer/2022042700/555ada59d8b42a62528b4cb8/html5/thumbnails/1.jpg)
A Desktop UI with QtQuickHow QtQuick encouraged us to totally rethink a Desktop
User Interface
1
Freitag, 25. November 2011
![Page 2: A Desktop UI with QtQuick](https://reader034.fdocuments.net/reader034/viewer/2022042700/555ada59d8b42a62528b4cb8/html5/thumbnails/2.jpg)
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
![Page 3: A Desktop UI with QtQuick](https://reader034.fdocuments.net/reader034/viewer/2022042700/555ada59d8b42a62528b4cb8/html5/thumbnails/3.jpg)
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
![Page 4: A Desktop UI with QtQuick](https://reader034.fdocuments.net/reader034/viewer/2022042700/555ada59d8b42a62528b4cb8/html5/thumbnails/4.jpg)
Evolution of TK-Suite ClientVersion 1 and 2
4
Freitag, 25. November 2011
![Page 5: A Desktop UI with QtQuick](https://reader034.fdocuments.net/reader034/viewer/2022042700/555ada59d8b42a62528b4cb8/html5/thumbnails/5.jpg)
Evolution of TK-Suite ClientVersion 3
5
Freitag, 25. November 2011
![Page 6: A Desktop UI with QtQuick](https://reader034.fdocuments.net/reader034/viewer/2022042700/555ada59d8b42a62528b4cb8/html5/thumbnails/6.jpg)
Evolution of TK-Suite ClientVersion 4
6
Freitag, 25. November 2011
![Page 7: A Desktop UI with QtQuick](https://reader034.fdocuments.net/reader034/viewer/2022042700/555ada59d8b42a62528b4cb8/html5/thumbnails/7.jpg)
Highlighting some UI problems
* Live Demo of Version 4 *
7
Freitag, 25. November 2011
![Page 8: A Desktop UI with QtQuick](https://reader034.fdocuments.net/reader034/viewer/2022042700/555ada59d8b42a62528b4cb8/html5/thumbnails/8.jpg)
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
![Page 9: A Desktop UI with QtQuick](https://reader034.fdocuments.net/reader034/viewer/2022042700/555ada59d8b42a62528b4cb8/html5/thumbnails/9.jpg)
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
![Page 10: A Desktop UI with QtQuick](https://reader034.fdocuments.net/reader034/viewer/2022042700/555ada59d8b42a62528b4cb8/html5/thumbnails/10.jpg)
A Problem with Toolbars
10
This is a long distance!There’s no visual connection.
Freitag, 25. November 2011
![Page 11: A Desktop UI with QtQuick](https://reader034.fdocuments.net/reader034/viewer/2022042700/555ada59d8b42a62528b4cb8/html5/thumbnails/11.jpg)
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
![Page 12: A Desktop UI with QtQuick](https://reader034.fdocuments.net/reader034/viewer/2022042700/555ada59d8b42a62528b4cb8/html5/thumbnails/12.jpg)
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
![Page 13: A Desktop UI with QtQuick](https://reader034.fdocuments.net/reader034/viewer/2022042700/555ada59d8b42a62528b4cb8/html5/thumbnails/13.jpg)
Resizing a QMainWindow
13
smaller
old size
Oh no! My lovely arranged Favorite Views are totally messed up!
Freitag, 25. November 2011
![Page 14: A Desktop UI with QtQuick](https://reader034.fdocuments.net/reader034/viewer/2022042700/555ada59d8b42a62528b4cb8/html5/thumbnails/14.jpg)
14
I have a certain feeling that we need to do something about this!
Freitag, 25. November 2011
![Page 15: A Desktop UI with QtQuick](https://reader034.fdocuments.net/reader034/viewer/2022042700/555ada59d8b42a62528b4cb8/html5/thumbnails/15.jpg)
So this is what our interface designer had in mind...
15
Freitag, 25. November 2011
![Page 16: A Desktop UI with QtQuick](https://reader034.fdocuments.net/reader034/viewer/2022042700/555ada59d8b42a62528b4cb8/html5/thumbnails/16.jpg)
...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
![Page 17: A Desktop UI with QtQuick](https://reader034.fdocuments.net/reader034/viewer/2022042700/555ada59d8b42a62528b4cb8/html5/thumbnails/17.jpg)
Short Break for a commercial
17
Freitag, 25. November 2011
![Page 18: A Desktop UI with QtQuick](https://reader034.fdocuments.net/reader034/viewer/2022042700/555ada59d8b42a62528b4cb8/html5/thumbnails/18.jpg)
Whatever the future of Qt on mobile phones will be...
18
Nokia gave us a precious gift:
Freitag, 25. November 2011
![Page 19: A Desktop UI with QtQuick](https://reader034.fdocuments.net/reader034/viewer/2022042700/555ada59d8b42a62528b4cb8/html5/thumbnails/19.jpg)
...so this is what we have built using QtQuick:
19
Freitag, 25. November 2011
![Page 20: A Desktop UI with QtQuick](https://reader034.fdocuments.net/reader034/viewer/2022042700/555ada59d8b42a62528b4cb8/html5/thumbnails/20.jpg)
* Live Demo of Version 5 *
20
Freitag, 25. November 2011
![Page 21: A Desktop UI with QtQuick](https://reader034.fdocuments.net/reader034/viewer/2022042700/555ada59d8b42a62528b4cb8/html5/thumbnails/21.jpg)
A User Interface with Qml
21
This is a ListView with a delegate
Freitag, 25. November 2011
![Page 22: A Desktop UI with QtQuick](https://reader034.fdocuments.net/reader034/viewer/2022042700/555ada59d8b42a62528b4cb8/html5/thumbnails/22.jpg)
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
![Page 23: A Desktop UI with QtQuick](https://reader034.fdocuments.net/reader034/viewer/2022042700/555ada59d8b42a62528b4cb8/html5/thumbnails/23.jpg)
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
![Page 24: A Desktop UI with QtQuick](https://reader034.fdocuments.net/reader034/viewer/2022042700/555ada59d8b42a62528b4cb8/html5/thumbnails/24.jpg)
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
![Page 25: A Desktop UI with QtQuick](https://reader034.fdocuments.net/reader034/viewer/2022042700/555ada59d8b42a62528b4cb8/html5/thumbnails/25.jpg)
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
![Page 26: A Desktop UI with QtQuick](https://reader034.fdocuments.net/reader034/viewer/2022042700/555ada59d8b42a62528b4cb8/html5/thumbnails/26.jpg)
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
![Page 27: A Desktop UI with QtQuick](https://reader034.fdocuments.net/reader034/viewer/2022042700/555ada59d8b42a62528b4cb8/html5/thumbnails/27.jpg)
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
![Page 28: A Desktop UI with QtQuick](https://reader034.fdocuments.net/reader034/viewer/2022042700/555ada59d8b42a62528b4cb8/html5/thumbnails/28.jpg)
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
![Page 29: A Desktop UI with QtQuick](https://reader034.fdocuments.net/reader034/viewer/2022042700/555ada59d8b42a62528b4cb8/html5/thumbnails/29.jpg)
Wireframing
If time permits: Demo the Workspace Wireframe
29
Freitag, 25. November 2011
![Page 30: A Desktop UI with QtQuick](https://reader034.fdocuments.net/reader034/viewer/2022042700/555ada59d8b42a62528b4cb8/html5/thumbnails/30.jpg)
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
![Page 31: A Desktop UI with QtQuick](https://reader034.fdocuments.net/reader034/viewer/2022042700/555ada59d8b42a62528b4cb8/html5/thumbnails/31.jpg)
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
![Page 32: A Desktop UI with QtQuick](https://reader034.fdocuments.net/reader034/viewer/2022042700/555ada59d8b42a62528b4cb8/html5/thumbnails/32.jpg)
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