Qt Quick デザイナでのダミーデータ
August 03, 2011 by 朝木卓見 | Comments
この記事は 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++ モデルを用いています。
Blog Topics:
Comments
Subscribe to our newsletter
Subscribe Newsletter
Try Qt 6.4 Now!
Download the latest release here: www.qt.io/download.
Qt 6 is the productivity platform for the future, with next-gen 2D & 3D UX and limitless scalability.
Explore Qt World
Check our Qt demos and case studies in the virtual Qt World
We're Hiring
Check out all our open positions here and follow us on Instagram to see what it's like to be #QtPeople.
Näytä tämä julkaisu Instagramissa.Henkilön Qt (@theqtcompany) jakama julkaisu