Qt Quick デザイナでのダミーデータ

この記事は Qt Blog の "Mockup data for the Qt Quick Designer" を翻訳したものです。
執筆: Marco Bubke, 2011年7月28日

Qt Creator 2.3 では Qt Quick デザイナでの View、Model および Delegate のサポートを改善しました。アイテムライブラリが改善され、デザイナ上で View を貼り付けた場合にインラインのモデルを表示できます。

しかし、Qt Quick デザイナを利用する上で最も大きな障害の一つが、アプリケーションのコンテキストが欠けていることです。

C++ で定義されたモデルがその典型的な例です。しばしばコンテキストが欠けることで、C++ や他の QML ファイルの単なるプロパティが参照できなくなります。良くあるサンプルではコンポーネントは parent.width の様にその親要素のプロパティを用いています。

ダミーモデル

新しい Qt Quick デザイナで C++ のモデルを参照している QML ファイルを開いても、View には何も表示されません。その他のケースとして、インターネットから取得したデータは取得するたびに異なるもものとなるでしょう。新しい fickr のアプリケーションを上司にプレゼンする時に、おかしな画像が表示されるのを思い浮かべてください。確実なデータを表示するために、ダミーデータを導入します。

例えば、以下のような C++ モデルを用いる ListView を持つ example.qml が有るとします。

ListView {

    model: dataModel

    delegate: ContactDelegate {

        name: name

    }

}

この QML ファイルがあるディレクトリかプロジェクト内の上位ディレクトリに dummydata ディレクトリを作成してください。そして、dummydata ディレクトリにモデルの id でファイルを作成します。

qml/exampleapp/example.qml

dummydata/dataModel.qml

対応するダミーモデルである dataModel.qml は以下のようになります。

import QtQuick 1.0
ListModel {
 ListElement {
 name: "Ariane"
 }
 ListElement {
 name: "Bella"
 }
 ListElement {
 name: "Corinna"
 }
 }

dummydata はプロジェクトのルートディレクトリに作成するのを推奨します。そうすれば、デバイスへは転送されません。

新機能: ダミーコンテキスト

QML でよく使われるのが以下のようなパターンです。

Item {

    width: parent.width

    height: parent.height

}

このコードはアプリケーションでは問題なく動作しますが、Qt Quick デザイナでは大きさ 0 で表示されます。これはコンテキストが無いため、開いたファイルに parent が存在しないことが原因です。この失われたコンテキストの発生を避けるために、ダミーコンテキストのアイデアを導入します。dummydata/context ディレクトリに同じ名前(example.qml)の QML ファイルを置くことによって、parent コンテキストを擬似的に生成することができます。

import QtQuick 1.0

import QmlDesigner 1.0
DummyContextObject {
 parent: Item {
 width: 640
 height: 300
 }
 }

ボーナスとして、より包括的な例を提供します。ダミーデータのコンセプトのより高度な例として、シンプルなアドレス帳を作成しました。その効果を示すために、このサンプルでは C++ モデルを用いています。

サンプルアドレス帳のダウンロード