A Desktop UI with QtQuick

7,142 views

Published on

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

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
7,142
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
92
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

A Desktop UI with QtQuick

  1. 1. A Desktop UI with QtQuick How QtQuick encouraged us to totally rethink a Desktop User Interface 1Freitag, 25. November 2011
  2. 2. my Qt mileage Nils Jeisecke saltation GmbH & Co. KG / Bielefeld / Germany http://www.saltation.de Qt developer > 10 years (since Qt 2) 2Freitag, 25. November 2011
  3. 3. 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) 3Freitag, 25. November 2011
  4. 4. Evolution of TK-Suite Client Version 1 and 2 4Freitag, 25. November 2011
  5. 5. Evolution of TK-Suite Client Version 3 5Freitag, 25. November 2011
  6. 6. Evolution of TK-Suite Client Version 4 6Freitag, 25. November 2011
  7. 7. Highlighting some UI problems * Live Demo of Version 4 * 7Freitag, 25. November 2011
  8. 8. 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 8Freitag, 25. November 2011
  9. 9. 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. 9Freitag, 25. November 2011
  10. 10. A Problem with Toolbars This is a long distance! There’s no visual connection. 10Freitag, 25. November 2011
  11. 11. 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 11Freitag, 25. November 2011
  12. 12. Using QMainWindow as a Dashboard Everything is arranged around a Screen 1 2 3 4 5 6 central widget that defines the “main” functionality of each screen Resizing a Dockwidget influences other dockwidgets 12Freitag, 25. November 2011
  13. 13. Resizing a QMainWindow sm al le r ol d si Oh no! My lovely arranged Favorite ze Views are totally messed up! 13Freitag, 25. November 2011
  14. 14. I have a certain feeling that we need to do something about this! 14Freitag, 25. November 2011
  15. 15. So this is what our interface designer had in mind... 15Freitag, 25. November 2011
  16. 16. ...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. 16Freitag, 25. November 2011
  17. 17. Short Break for a commercial 17Freitag, 25. November 2011
  18. 18. Whatever the future of Qt on mobile phones will be... Nokia gave us a precious gift: 18Freitag, 25. November 2011
  19. 19. ...so this is what we have built using QtQuick: 19Freitag, 25. November 2011
  20. 20. * Live Demo of Version 5 * 20Freitag, 25. November 2011
  21. 21. A User Interface with Qml This is a ListView with a delegate 21Freitag, 25. November 2011
  22. 22. 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" } } 22Freitag, 25. November 2011
  23. 23. 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. 23Freitag, 25. November 2011
  24. 24. Putting actions in context 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! 24Freitag, 25. November 2011
  25. 25. 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 25Freitag, 25. November 2011
  26. 26. DashboardDelegate caption 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 { /* ... */ } 26Freitag, 25. November 2011
  27. 27. 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. 27Freitag, 25. November 2011
  28. 28. DashboardDelegate content 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. 28Freitag, 25. November 2011
  29. 29. Wireframing If time permits: Demo the Workspace Wireframe 29Freitag, 25. November 2011
  30. 30. 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 30Freitag, 25. November 2011
  31. 31. 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! 31Freitag, 25. November 2011
  32. 32. 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 32Freitag, 25. November 2011

×