Qt Quick in depth
2 likes1,524 views
This document discusses using Qt Quick to recreate the UI of a TV streaming application, including configuring Qt Creator, creating views with ListView and PathView, using models and delegates, embedding QML in C++ applications, dynamically loading QML pages, and implementing a stack to navigate between pages.
![Stack implementation
// Stack.js
var stack = []
// Create a QML object from a given filename and push it on the stack
function openPage(filename) {
var page_c = Qt.createComponent(filename)
var page = page_c.createObject(root_window)
stack.push(page)
return page
}
// Page.qml
Import “stack.js” as Stack
Page {
Keys.onReturnPressed: {
Stack.openPage(“tvmenu.qml”)
}
}
22](https://image.slidesharecdn.com/qtquickindepth-110518105514-phpapp01/85/Qt-Quick-in-depth-22-320.jpg)
Qt Quick in depth
- 1. Qt Quick in Depth Lorenzo Mancini (lmancini@develer.com)
- 2. Qt Quick: a case study Remake of Vodafone's TVConnect UI Developed to demonstrate QQ's: Conciseness Performance Overall toolchain
- 3. Qt Creator configuration New Qt Quick Application Integrate with Mercurial Test the Application Viewer Create a new run configuration Projects->Run qmlviewer %{CurrentDocument:FilePath} We'll use this to test single pages
- 4. Qt Creator configuration Enable QML debugging Projects->Build Build Steps->Link QML debugging library (Rebuild all) You only have to do all this once This is all saved in .pro.user file
- 5. The Home menu Background image No states Series of icons following a path
- 6. QML Views List visualization for models Models provide homogeneous data Each data is represented by delegates Interesting properties: model highlight delegate
- 7. ListView Standard QML View Lays delegates in a list A ListView in practice Place it on view Add a Model Define a Delegate E.g. Component / Column / Image + Text
- 8. Model ListModel { id: path_model ListElement { name: "TV" icon: "res/main_menu/tv_selected.png" } ListElement { name: "Audio" icon: "res/main_menu/audio_selected.png" } // ... }
- 9. Delegate Component { id: path_delegate Column { id: wrapper Image { source: icon width: list_view1.width / 5 fillMode: Image.PreserveAspectFit } Text { text: name anchors.horizontalCenter: parent.horizontalCenter font.pointSize: 24 color: "#77FFFFFF" } } }
- 10. Bind to view ListView { // ... orientation: ListView.Horizontal model: path_model delegate: path_delegate }
- 11. PathView Standard QML View Defines a path that items follow A PathView in practice Place it on view Add a Model Define a Delegate Define a Path
- 12. Path Definition PathView { // ... focus: true model: path_model delegate: path_delegate Keys.onLeftPressed: decrementCurrentIndex() Keys.onRightPressed: incrementCurrentIndex() path: Path { startX: 0 startY: path_view1.height / 2 PathLine { x: path_view1.width; y: path_view1.height / 2} } }
- 13. A more interesting path Component { id: path_delegate //... Column { opacity: PathView.iconOpacity } } path: Path { startX: 0 startY: path_view1.height / 2 PathAttribute { name: "iconOpacity"; value: 0.5 } PathLine { x: path_view1.width / 2; y: path_view1.height / 2} PathAttribute { name: "iconOpacity"; value: 1.0 } PathLine { x: path_view1.width; y: path_view1.height / 2} PathAttribute { name: "iconOpacity"; value: 0.5 } }
- 14. QML in C++ applications Use QDeclarativeView to embed QML QGraphicsView subclass, QWidget's as well Useful to add QML features on top of already existing applications Keep an eye on startup time and memory usage 14
- 15. QML in C++ applications QML functions can be called via QMetaObject::invokeMethod() QML objects can emit signals that C++ code can QObject::connect() → you can define an interface for QML objects C++ properties / signals / slots are exposed to QML via the Meta Object System 15
- 16. QML Models in C++ QML doesn't have direct access to hardware What if we want to retrieve a list of channel from a TV tuner? We can subclass QAbstractItemModel, implement the desired model in C++ and use it from QML. 16
- 17. The TV menu Two states: TV only overlay on screen A channel list (reusable component) A C++ model to retrieve channels 17
- 18. Putting it all together Fast forward: we have several QML files, one for each page We would like to “instantiate” and load a QML file on-the-fly 18
- 19. Dynamic Object Management Dynamic object creation from Javascript Qt.createComponent(url) → Component Component.createObject(parent) → inst The QML file can be fetched over the network Great for implementing live widgets! … but the fetch is asynchronous: how do I know when it's finished? 19
- 20. Dynamic Object Management function createObject() { component = Qt.createComponent("Sprite.qml"); if (component.status == Component.Ready) finishCreation(); else component.statusChanged.connect(finishCreation); } function finishCreation() { if (component.status == Component.Ready) { sprite = component.createObject(appWindow); // … } } 20
- 21. A stack of pages In most STBs, pages are in a stack Entering a page → push Previous page → pop Panic button (home menu) → clear We need a persistent global state for this 21
- 22. Stack implementation // Stack.js var stack = [] // Create a QML object from a given filename and push it on the stack function openPage(filename) { var page_c = Qt.createComponent(filename) var page = page_c.createObject(root_window) stack.push(page) return page } // Page.qml Import “stack.js” as Stack Page { Keys.onReturnPressed: { Stack.openPage(“tvmenu.qml”) } } 22
- 23. Stack implementation Sounds great! ...But alas, it doesn't work A new execution context is created for the use of the importing Component only QML JS can't modify global object members either .pragma library Placed at the top of a JS module, tells QML that this module is stateless, so it's instance can freely shared Handle with care 23
- 24. THANKS ! Develer S.r.l. Via Mugellese 1/A 50013 Campi Bisenzio Firenze - Italy Contacts Mail: info@develer.com Phone: +39-055-3984627 Fax: +39 178 6003614 http://www.develer.com