Back to Blog home

Mockup data for the Qt Quick Designer

Published on Thursday July 28, 2011 by Marco Bubke in Qt Quick QtCreator | Comments

In Qt Creator 2.3 we improved the support for view, models and delegates in the Visual Designer. We now show inline models and the item library provides better support if you drop a view on the form editor.

Default List View in Qt Quick Designer

But one of the biggest obstacles while using the Qt Quick Designer is the missing context of the application.
Specific models defined in C++ are the most obvious case. Often the context is missing simple properties, which are either defined in C++, or in other qml files. A typical example is a component which uses properties of its parent like parent.width.

Dummy Models

If you open a form with the new Qt Quick Designer which is referencing a C++ model, you see nothing in the view. In another case the data is from the internet so every time you maybe see something different. Imagine in the presentation of your new flickr application to your boss an interesting picture is showing up. To get reliable data we introduced dummy data.

For example you have a ListView in example.qml with a C++ model:

ListView {
model: dataModel
delegate: ContactDelegate {
name: name
}
}

In this case you create a dummydata directory in the same directory as your qml file or higher in the hierarchy. In the dummydata directory you then create a file with the id name.

qml/exampleapp/example.qml
dummydata/dataModel.qml

The corresponding dummy model dataModel.qml:

import QtQuick 1.0

ListModel {
ListElement {
name: "Ariane"
}
ListElement {
name: "Bella"
}
ListElement {
name: "Corinna"
}
}

We recommend that you put the dummydata in the root directory of you project so it will not be deployed to the device.

New: Dummy Context

A very common pattern in Qml is the following example:

Item {
width: parent.width
height: parent.height
}

This works nicely for applications but the Qt Quick Designer shows a zero sized item. There is simply no parent for the opened file because the context is missing. To get around the missing context we introduce the idea of a dummy context. If you place a file with the same name(example.qml) in the dummydata/context directory, you can fake a parent context:

import QtQuick 1.0
import QmlDesigner 1.0

DummyContextObject {
parent: Item {
width: 640
height: 300
}
}

As a bonus we provide a more comprehensive example. You can play around with a simple contact list to get a better picture of the dummy data concept. To illustrate the effect we used a C++-Model.

Download Example Contact List

Exampel Contact List

Subscribe to Our Blog

Stay up to date with the latest marketing, sales and service tips and news.

The blog comment system has been migrated to a new platform. If you face any issues, please let us know via feedback@qt.io.