1 /****************************************************************************
3 ** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
4 ** All rights reserved.
5 ** Contact: Nokia Corporation (qt-info@nokia.com)
7 ** This file is part of the documentation of the Qt Toolkit.
9 ** $QT_BEGIN_LICENSE:FDL$
10 ** GNU Free Documentation License
11 ** Alternatively, this file may be used under the terms of the GNU Free
12 ** Documentation License version 1.3 as published by the Free Software
13 ** Foundation and appearing in the file included in the packaging of
17 ** Alternatively, this file may be used in accordance with the terms
18 ** and conditions contained in a signed written agreement between you
26 ****************************************************************************/
29 \page qdeclarativemodels.html
30 \inqmlmodule QtQuick 2
32 \contentspage QML Features
33 \previouspage {QML Animation and Transitions}{Animation and Transitions}
34 \nextpage {Presenting Data with Views}
36 \title QML Data Models
38 QML items such as ListView, GridView and \l Repeater require Data Models
39 that provide the data to be displayed.
40 These items typically require a \i delegate component that
41 creates an instance for each item in the model. Models may be static, or
42 have items modified, inserted, removed or moved dynamically.
44 Data is provided to the delegate via named data roles which the
45 delegate may bind to. Here is a ListModel with two roles, \i type and \i age,
46 and a ListView with a delegate that binds to these roles to display their
49 \snippet doc/src/snippets/declarative/qml-data-models/listmodel-listview.qml document
51 If there is a naming clash between the model's properties and the delegate's
52 properties, the roles can be accessed with the qualified \i model name instead.
53 For example, if a \l Text element had \i type or \i age properties, the text in the
54 above example would display those property values instead of the \i type and \i age values
55 from the model item. In this case, the properties could have been referenced as
56 \c model.type and \c model.age instead to ensure the delegate displays the
57 property values from the model item.
59 A special \i index role containing the index of the item in the model
60 is also available to the delegate. Note this index is set to -1 if the item is removed from
61 the model. If you bind to the index role, be sure that the logic
62 accounts for the possibility of index being -1, i.e. that the item
63 is no longer valid. (Usually the item will shortly be destroyed, but
64 it is possible to delay delegate destruction in some views via a \c delayRemove
67 Models that do not have named roles (such as the QStringList model shown below)
68 will have the data provided via the \i modelData role. The \i modelData role is also provided for
69 models that have only one role. In this case the \i modelData role
70 contains the same data as the named role.
72 QML provides several types of data models among the built-in set of
73 QML elements. In addition, models can be created with C++ and then
74 made available to QML components.
76 The views used to access data models are described in the
77 \l{Presenting Data with Views} overview.
78 The use of positioner items to arrange items from a model is covered in
79 \l{Using QML Positioner and Repeater Items}.
82 \keyword qml-data-models
83 \section1 QML Data Models
87 ListModel is a simple hierarchy of elements specified in QML. The
88 available roles are specified by the \l ListElement properties.
90 \snippet doc/src/snippets/declarative/qml-data-models/listelements.qml model
92 The above model has two roles, \i name and \i cost. These can be bound
93 to by a ListView delegate, for example:
95 \snippet doc/src/snippets/declarative/qml-data-models/listelements.qml view
97 ListModel provides methods to manipulate the ListModel directly via JavaScript.
98 In this case, the first item inserted determines the roles available
99 to any views that are using the model. For example, if an empty ListModel is
100 created and populated via JavaScript, the roles provided by the first
101 insertion are the only roles that will be shown in the view:
103 \snippet doc/src/snippets/declarative/qml-data-models/dynamic-listmodel.qml model
105 \snippet doc/src/snippets/declarative/qml-data-models/dynamic-listmodel.qml mouse area
107 When the MouseArea is clicked, \c fruitModel will have two roles, \i cost and \i name.
108 Even if subsequent roles are added, only the first two will be handled by views
109 using the model. To reset the roles available in the model, call ListModel::clear().
112 \section2 XmlListModel
114 XmlListModel allows construction of a model from an XML data source. The roles
115 are specified via the \l XmlRole element.
117 Note: From QtQuick 2.0, XmlListModel has been move to a seperate module \l QtQuick.XmlListModel,
118 to use XmlListModel item, an additional "import QtQuick.XmlListModel 2.0" is needed.
120 The following model has three roles, \i title, \i link and \i description:
122 import QtQuick.XmlListModel 2.0
125 source: "http://rss.news.yahoo.com/rss/oceania"
126 query: "/rss/channel/item"
127 XmlRole { name: "title"; query: "title/string()" }
128 XmlRole { name: "link"; query: "link/string()" }
129 XmlRole { name: "description"; query: "description/string()" }
133 The \l{declarative/rssnews}{RSS News demo} shows how XmlListModel can
134 be used to display an RSS feed.
137 \section2 VisualItemModel
139 VisualItemModel allows QML items to be provided as a model.
141 This model contains both the data and delegate; the child items of a
142 VisualItemModel provide the contents of the delegate. The model
143 does not provide any roles.
145 \snippet doc/src/snippets/declarative/models/visual-model-and-view.qml visual model and view
147 Note that in the above example there is no delegate required.
148 The items of the model itself provide the visual elements that
149 will be positioned by the view.
151 \keyword qml-c++-models
152 \section1 C++ Data Models
154 Models can be defined in C++ and then made available to QML. This is useful
155 for exposing existing C++ data models or otherwise complex datasets to QML.
157 A C++ model class can be defined as a QStringList, a QList<QObject*> or a
158 QAbstractItemModel. The first two are useful for exposing simpler datasets,
159 while QAbstractItemModel provides a more flexible solution for more complex
163 \section2 QStringList-based model
165 A model may be a simple QStringList, which provides the contents of the list via the \i modelData role.
167 Here is a ListView with a delegate that references its model item's
168 value using the \c modelData role:
170 \snippet examples/declarative/modelviews/stringlistmodel/view.qml 0
172 A Qt application can load this QML document and set the value of \c myModel
175 \snippet examples/declarative/modelviews/stringlistmodel/main.cpp 0
177 The complete example is available in Qt's \l {declarative/modelviews/stringlistmodel}{examples/declarative/modelviews/stringlistmodel} directory.
179 \note There is no way for the view to know that the contents of a QStringList
180 have changed. If the QStringList changes, it will be necessary to reset
181 the model by calling QDeclarativeContext::setContextProperty() again.
184 \section2 QObjectList-based model
186 A list of QObject* values can also be used as a model. A QList<QObject*> provides
187 the properties of the objects in the list as roles.
189 The following application creates a \c DataObject class that with
190 Q_PROPERTY values that will be accessible as named roles when a
191 QList<DataObject*> is exposed to QML:
193 \snippet examples/declarative/modelviews/objectlistmodel/dataobject.h 0
195 \snippet examples/declarative/modelviews/objectlistmodel/dataobject.h 1
197 \snippet examples/declarative/modelviews/objectlistmodel/main.cpp 0
200 The QObject* is available as the \c modelData property. As a convenience,
201 the properties of the object are also made available directly in the
202 delegate's context. Here, \c view.qml references the \c DataModel properties in
203 the ListView delegate:
205 \snippet examples/declarative/modelviews/objectlistmodel/view.qml 0
207 Note the use of the fully qualified access to the \c color property.
208 The properties of the object are not replicated in the \c model
209 object, since they are easily available via the \c modelData
212 The complete example is available in Qt's \l {declarative/modelviews/objectlistmodel}{examples/declarative/modelviews/objectlistmodel} directory.
214 Note: There is no way for the view to know that the contents of a QList
215 have changed. If the QList changes, it will be necessary to reset
216 the model by calling QDeclarativeContext::setContextProperty() again.
219 \section2 QAbstractItemModel
221 A model can be defined by subclassing QAbstractItemModel. This is the
222 best approach if you have a more complex model that cannot be supported
223 by the other approaches. A QAbstractItemModel can also automatically
224 notify a QML view when the model data has changed.
226 The roles of a QAbstractItemModel subclass can be exposed to QML by calling
227 QAbstractItemModel::setRoleNames(). The default role names set by Qt are:
237 \o Qt::DecorationRole
241 Here is an application with a QAbstractListModel subclass named \c AnimalModel
242 that has \i type and \i size roles. It calls QAbstractItemModel::setRoleNames() to set the
243 role names for accessing the properties via QML:
245 \snippet examples/declarative/modelviews/abstractitemmodel/model.h 0
247 \snippet examples/declarative/modelviews/abstractitemmodel/model.h 1
249 \snippet examples/declarative/modelviews/abstractitemmodel/model.h 2
251 \snippet examples/declarative/modelviews/abstractitemmodel/model.cpp 0
253 \snippet examples/declarative/modelviews/abstractitemmodel/main.cpp 0
256 This model is displayed by a ListView delegate that accesses the \i type and \i size
259 \snippet examples/declarative/modelviews/abstractitemmodel/view.qml 0
261 QML views are automatically updated when the model changes. Remember the model
262 must follow the standard rules for model changes and notify the view when
263 the model has changed by using QAbstractItemModel::dataChanged(),
264 QAbstractItemModel::beginInsertRows(), etc. See the \l {Model subclassing reference} for
267 The complete example is available in Qt's \l {declarative/modelviews/abstractitemmodel}{examples/declarative/modelviews/abstractitemmodel} directory.
269 QAbstractItemModel presents a hierarchy of tables, but the views currently provided by QML
270 can only display list data.
271 In order to display child lists of a hierarchical model
272 the VisualDataModel element provides several properties and functions for use
273 with models of type QAbstractItemModel:
276 \o \i hasModelChildren role property to determine whether a node has child nodes.
277 \o \l VisualDataModel::rootIndex allows the root node to be specifed
278 \o \l VisualDataModel::modelIndex() returns a QModelIndex which can be assigned to VisualDataModel::rootIndex
279 \o \l VisualDataModel::parentModelIndex() returns a QModelIndex which can be assigned to VisualDataModel::rootIndex
283 \section2 Exposing C++ Data Models to QML
285 The above examples use QDeclarativeContext::setContextProperty() to set
286 model values directly in QML components. An alternative to this is to
287 register the C++ model class as a QML type from a QML C++ plugin using
288 QDeclarativeExtensionPlugin. This would allow the model classes to be
289 created directly as elements within QML:
296 class MyModelPlugin : public QDeclarativeExtensionPlugin
299 void registerTypes(const char *uri)
301 qmlRegisterType<MyModel>(uri, 1, 0,
306 Q_EXPORT_PLUGIN2(mymodelplugin, MyModelPlugin);
313 ListElement { someProperty: "some value" }
319 width: 200; height: 250
321 delegate: Text { text: someProperty }
327 See \l {Tutorial: Writing QML extensions with C++} for details on writing QML C++
332 \section1 Other Data Models
337 An integer can be used to specify a model that contains a certain number
338 of elements. In this case, the model does not have any data roles.
340 The following example creates a ListView with five elements:
343 width: 200; height: 250
347 Text { text: "I am item number: " + index }
353 delegate: itemDelegate
360 \section2 An Object Instance
362 An object instance can be used to specify a model with a single object element. The
363 properties of the object are provided as roles.
365 The example below creates a list with one item, showing the color of the
366 \i myText text. Note the use of the fully qualified \i model.color property
367 to avoid clashing with \i color property of the Text element in the delegate.
371 width: 200; height: 250
381 Text { text: model.color }
386 anchors.topMargin: 30
393 \section1 Accessing Views and Models from Delegates
395 You can access the view for which a delegate is used, and its
396 properties, by using ListView.view in a delegate on a ListView, or
397 GridView.view in a delegate on a GridView, etc. In particular, you can
398 access the model and its properties by using ListView.view.model.
400 This is useful when you want to use the same delegate for a number of
401 views, for example, but you want decorations or other features to be
402 different for each view, and you would like these different settings to
403 be properties of each of the views. Similarly, it might be of interest
404 to access or show some properties of the model.
406 In the following example, the delegate shows the property \i{language}
407 of the model, and the color of one of the fields depends on the
408 property \i{fruit_color} of the view.
410 \snippet doc/src/snippets/declarative/models/views-models-delegates.qml rectangle
412 Another important case is when some action (e.g. mouse click) in the
413 delegate should update data in the model. In this case you can define
414 a function in the model, e.g.:
417 setData(int row, const QString & field_name, QVariant new_value),
420 ...and call it from the delegate using:
423 ListView.view.model.setData(index, field, value)
426 ...assuming that \i{field} holds the name of the field which should be
427 updated, and that \i{value} holds the new value.
432 \page qml-presenting-data.html
433 \inqmlmodule QtQuick 2
434 \title Presenting Data with QML
436 \section1 Introduction
438 Qt Quick contains a set of standard items that can be used to present data in a
439 number of different ways. For simple user interfaces,
440 \l{Using QML Positioner and Repeater Items#Repeaters}{Repeaters} can be used
442 \l{Using QML Positioner and Repeater Items#Positioners}{Positioners}
443 to obtain pieces of data and arrange them in a user interface. However, when
444 large quantities of data are involved, it is often better to use models with
445 the standard views since these contain many built-in display and navigation
450 Views are scrolling containers for collections of items. They are feature-rich,
451 supporting many of the use cases found in typical applications, and can be
452 customized to meet requirements on style and behavior.
454 A set of standard views are provided in the basic set of Qt Quick
458 \o \l{#ListView}{ListView} arranges items in a horizontal or vertical list
459 \o \l{#GridView}{GridView} arranges items in a grid within the available space
460 \o \l{#PathView}{PathView} arranges items on a path
463 Unlike these items, \l WebView is not a fully-featured view item, and needs
464 to be combined with a \l Flickable item to create a view that performs like
469 \l ListView shows a classic list of items with horizontal or vertical placing
473 \inlineimage qml-listview-snippet.png
476 The following example shows a minimal ListView displaying a sequence of
477 numbers (using an \l{QML Data Models#An Integer}{integer as a model}).
478 A simple delegate is used to define an items for each piece of data in the
482 \snippet doc/src/snippets/declarative/listview/listview-snippet.qml document
488 \l GridView displays items in a grid like an file manager's icon view.
492 \l PathView displays items on a path, where the selection remains in
493 the same place and the items move around it.
495 \section1 Decorating Views
497 \section2 Headers and Footers
503 In traditional user interfaces, views can be scrolled using standard
504 controls, such as scroll bars and arrow buttons. In some situations, it
505 is also possible to drag the view directly by pressing and holding a
506 mouse button while moving the cursor. In touch-based user interfaces,
507 this dragging action is often complemented with a flicking action, where
508 scrolling continues after the user has stopped touching the view.
510 \section1 Further Reading