QML Viewer

Loading placeholder data with QML Viewer

Often, QML applications are prototyped with fake data that is later replaced by real data sources from C++ plugins. QML Viewer assists in this aspect by loading fake data into the application context: it looks for a directory named "dummydata" in the same directory as the target QML file, and any .qml files in that directory are loaded as QML objects and bound to the root context as properties named after the files.

For example, this QML document refers to a lottoNumbers property which does not actually exist within the document:

 import QtQuick 1.0

 ListView {
     width: 200; height: 300
     model: lottoNumbers
     delegate: Text { text: number }
 }

If within the document's directory, there is a "dummydata" directory which contains a lottoNumbers.qml file like this:

 import QtQuick 1.0

 ListModel {
     ListElement { number: 23 }
     ListElement { number: 44 }
     ListElement { number: 78 }
 }

Then this model would be automatically loaded into the ListView in the previous document.

Child properties are included when loaded from dummy data. The following document refers to a clock.time property:

 import QtQuick 1.0
 Text { text: clock.time }

The text value could be filled by a dummydata/clock.qml file with a time property in the root context:

 import QtQuick 1.0
 QtObject { property int time: 54321 }

To replace this with real data, you can simply bind the real data object to the root context in C++ using QDeclarativeContext::setContextProperty(). This is detailed in Using QML Bindings in C++ Applications.

 Rectangle {
     width: 200; height: 200

     ColorAnimation on color {
         running: runtime.isActiveWindow
         loops: Animation.Infinite
         from: "green"; to: "blue"; duration: 2000
     }
 }

 Rectangle {
     id: window
     width: 640; height: 480

     states: State {
         name: "landscape"
         PropertyChanges { target: window; width: 480; height: 640 }
     }
     state: (runtime.orientation == Orientation.Landscape
             || runtime.orientation == Orientation.LandscapeInverted) ? 'landscape' : ''
 }