Qt Quick in depth
Upcoming SlideShare
Loading in...5

Qt Quick in depth



Qt quick in depth

Qt quick in depth



Total Views
Views on SlideShare
Embed Views



0 Embeds 0

No embeds



Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial LicenseCC Attribution-NonCommercial License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

Qt Quick in depth Qt Quick in depth Presentation Transcript

  • Qt Quick in DepthLorenzo Mancini (lmancini@develer.com)
  • Qt Quick: a case study Remake of Vodafones TVConnect UI Developed to demonstrate QQs:  Conciseness  Performance  Overall toolchain
  • Qt Creator configuration New Qt Quick Application Integrate with Mercurial Test the Application Viewer Create a new run configuration  Projects->Run  qmlviewer %{CurrentDocument:FilePath}  Well use this to test single pages
  • 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
  • The Home menu Background image No states Series of icons following a path
  • QML Views List visualization for models Models provide homogeneous data Each data is represented by delegates Interesting properties:  model  highlight  delegate
  • 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
  • ModelListModel { id: path_model ListElement { name: "TV" icon: "res/main_menu/tv_selected.png" } ListElement { name: "Audio" icon: "res/main_menu/audio_selected.png" } // ...}
  • DelegateComponent { 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" } }}
  • Bind to viewListView { // ... orientation: ListView.Horizontal model: path_model delegate: path_delegate}
  • 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
  • Path DefinitionPathView { // ... 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} }}
  • A more interesting pathComponent { 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 } }
  • QML in C++ applications Use QDeclarativeView to embed QML  QGraphicsView subclass, QWidgets as well Useful to add QML features on top of already existing applications Keep an eye on startup time and memory usage 14
  • 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
  • QML Models in C++ QML doesnt 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
  • The TV menu Two states:  TV only  overlay on screen A channel list (reusable component) A C++ model to retrieve channels 17
  • 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
  • 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 its finished? 19
  • 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
  • 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
  • Stack implementation// Stack.jsvar stack = []// Create a QML object from a given filename and push it on the stackfunction openPage(filename) { var page_c = Qt.createComponent(filename) var page = page_c.createObject(root_window) stack.push(page) return page}// Page.qmlImport “stack.js” as StackPage { Keys.onReturnPressed: { Stack.openPage(“tvmenu.qml”) }} 22
  • Stack implementation Sounds great! ...But alas, it doesnt work  A new execution context is created for the use of the importing Component only QML JS cant modify global object members either .pragma library  Placed at the top of a JS module, tells QML that this module is stateless, so its instance can freely shared  Handle with care 23
  • THANKS ! Develer S.r.l. Via Mugellese 1/A 50013 Campi Bisenzio Firenze - ItalyContactsMail: info@develer.comPhone: +39-055-3984627Fax: +39 178 6003614http://www.develer.com