A Desktop UI with QtQuick

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


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


http://de.wikipedia.org/wiki/Computer_Telephony_Integration




Evolution of TK-Suite ClientVersion 1 and 2

4


Evolution of TK-Suite ClientVersion 3

5


Evolution of TK-Suite ClientVersion 4

6


Highlighting some UI problems

* Live Demo of Version 4 *

7


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


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.


A Problem with Toolbars

10

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


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


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


Resizing a QMainWindow

13

smaller

old size

Oh no! My lovely arranged Favorite Views are totally messed up!


14

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


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

15


...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.


Short Break for a commercial

17


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

18

Nokia gave us a precious gift:


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

19


* Live Demo of Version 5 *

20


A User Interface with Qml

21

This is a ListView with a delegate


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


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.


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!


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


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 { /* ... */ }


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.


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.


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


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!


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


Date post:	19-May-2015
Category:	Technology
Upload:	njeisecke
View:	4,985 times
Download:	0 times

A Desktop UI with QtQuick

Technology