diff options
Diffstat (limited to 'doc/src/declarative/qdeclarativemodels.qdoc')
| -rw-r--r-- | doc/src/declarative/qdeclarativemodels.qdoc | 200 |
1 files changed, 38 insertions, 162 deletions
diff --git a/doc/src/declarative/qdeclarativemodels.qdoc b/doc/src/declarative/qdeclarativemodels.qdoc index 9409eaf032..23dd390000 100644 --- a/doc/src/declarative/qdeclarativemodels.qdoc +++ b/doc/src/declarative/qdeclarativemodels.qdoc @@ -27,10 +27,14 @@ /*! \page qdeclarativemodels.html +\ingroup qml-features +\contentspage QML Features +\previouspage {QML Animation and Transitions}{Animation and Transitions} +\nextpage {Presenting Data with Views} \target qmlmodels \title QML Data Models -QML items such as ListView, GridView and \l Repeater require Data Models +QML items such as ListView, GridView and \l Repeater require Data Models that provide the data to be displayed. These items typically require a \e delegate component that creates an instance for each item in the model. Models may be static, or @@ -38,7 +42,7 @@ have items modified, inserted, removed or moved dynamically. Data is provided to the delegate via named data roles which the delegate may bind to. Here is a ListModel with two roles, \e type and \e age, -and a ListView with a delegate that binds to these roles to display their +and a ListView with a delegate that binds to these roles to display their values: \snippet doc/src/snippets/declarative/qml-data-models/listmodel-listview.qml document @@ -48,7 +52,7 @@ properties, the roles can be accessed with the qualified \e model name instead. For example, if a \l Text element had \e type or \e age properties, the text in the above example would display those property values instead of the \e type and \e age values from the model item. In this case, the properties could have been referenced as -\c model.type and \c model.age instead to ensure the delegate displays the +\c model.type and \c model.age instead to ensure the delegate displays the property values from the model item. A special \e index role containing the index of the item in the model @@ -68,11 +72,13 @@ QML provides several types of data models among the built-in set of QML elements. In addition, models can be created with C++ and then made available to QML components. -The views used to access data models are described in \l{Presenting Data with QML}. +The views used to access data models are described in the +\l{Presenting Data with Views} overview. The use of positioner items to arrange items from a model is covered in \l{Using QML Positioner and Repeater Items}. +\keyword qml-data-models \section1 QML Data Models \section2 ListModel @@ -108,7 +114,7 @@ XmlListModel allows construction of a model from an XML data source. The roles are specified via the \l XmlRole element. The following model has three roles, \e title, \e link and \e description: -\code +\qml XmlListModel { id: feedModel source: "http://rss.news.yahoo.com/rss/oceania" @@ -117,7 +123,7 @@ XmlListModel { XmlRole { name: "link"; query: "link/string()" } XmlRole { name: "description"; query: "description/string()" } } -\endcode +\endqml The \l{demos/declarative/rssnews}{RSS News demo} shows how XmlListModel can be used to display an RSS feed. @@ -125,31 +131,19 @@ be used to display an RSS feed. \section2 VisualItemModel -VisualItemModel allows QML items to be provided as a model. +VisualItemModel allows QML items to be provided as a model. This model contains both the data and delegate; the child items of a -VisualItemModel provide the contents of the delegate. The model +VisualItemModel provide the contents of the delegate. The model does not provide any roles. -\code - VisualItemModel { - id: itemModel - Rectangle { height: 30; width: 80; color: "red" } - Rectangle { height: 30; width: 80; color: "green" } - Rectangle { height: 30; width: 80; color: "blue" } - } - - ListView { - anchors.fill: parent - model: itemModel - } -\endcode +\snippet doc/src/snippets/declarative/models/visual-model-and-view.qml visual model and view Note that in the above example there is no delegate required. The items of the model itself provide the visual elements that will be positioned by the view. - +\keyword qml-c++-models \section1 C++ Data Models Models can be defined in C++ and then made available to QML. This is useful @@ -165,7 +159,7 @@ models. A model may be a simple QStringList, which provides the contents of the list via the \e modelData role. -Here is a ListView with a delegate that references its model item's +Here is a ListView with a delegate that references its model item's value using the \c modelData role: \snippet examples/declarative/modelviews/stringlistmodel/view.qml 0 @@ -184,7 +178,7 @@ the model by calling QDeclarativeContext::setContextProperty() again. \section2 QObjectList-based model -A list of QObject* values can also be used as a model. A QList<QObject*> provides +A list of QObject* values can also be used as a model. A QList<QObject*> provides the properties of the objects in the list as roles. The following application creates a \c DataObject class that with @@ -205,7 +199,7 @@ the ListView delegate: \snippet examples/declarative/modelviews/objectlistmodel/view.qml 0 -Note the use of the fully qualified access to the \c color property. +Note the use of the fully qualified access to the \c color property. The properties of the object are not replicated in the \c model object, since they are easily available via the \c modelData object. @@ -221,10 +215,10 @@ the model by calling QDeclarativeContext::setContextProperty() again. A model can be defined by subclassing QAbstractItemModel. This is the best approach if you have a more complex model that cannot be supported -by the other approaches. A QAbstractItemModel can also automatically +by the other approaches. A QAbstractItemModel can also automatically notify a QML view when the model data has changed. -The roles of a QAbstractItemModel subclass can be exposed to QML by calling +The roles of a QAbstractItemModel subclass can be exposed to QML by calling QAbstractItemModel::setRoleNames(). The default role names set by Qt are: \table @@ -244,9 +238,9 @@ that has \e type and \e size roles. It calls QAbstractItemModel::setRoleNames() role names for accessing the properties via QML: \snippet examples/declarative/modelviews/abstractitemmodel/model.h 0 -\dots +\dots \snippet examples/declarative/modelviews/abstractitemmodel/model.h 1 -\dots +\dots \snippet examples/declarative/modelviews/abstractitemmodel/model.h 2 \codeline \snippet examples/declarative/modelviews/abstractitemmodel/model.cpp 0 @@ -261,14 +255,14 @@ roles: QML views are automatically updated when the model changes. Remember the model must follow the standard rules for model changes and notify the view when -the model has changed by using QAbstractItemModel::dataChanged(), +the model has changed by using QAbstractItemModel::dataChanged(), QAbstractItemModel::beginInsertRows(), etc. See the \l {Model subclassing reference} for more information. The complete example is available in Qt's \l {declarative/modelviews/abstractitemmodel}{examples/declarative/modelviews/abstractitemmodel} directory. QAbstractItemModel presents a hierarchy of tables, but the views currently provided by QML -can only display list data. +can only display list data. In order to display child lists of a hierarchical model the VisualDataModel element provides several properties and functions for use with models of type QAbstractItemModel: @@ -283,14 +277,14 @@ with models of type QAbstractItemModel: \section2 Exposing C++ Data Models to QML -The above examples use QDeclarativeContext::setContextProperty() to set -model values directly in QML components. An alternative to this is to -register the C++ model class as a QML type from a QML C++ plugin using -QDeclarativeExtensionPlugin. This would allow the model classes to be +The above examples use QDeclarativeContext::setContextProperty() to set +model values directly in QML components. An alternative to this is to +register the C++ model class as a QML type from a QML C++ plugin using +QDeclarativeExtensionPlugin. This would allow the model classes to be created directly as elements within QML: \table -\row +\row \o \code @@ -299,7 +293,7 @@ class MyModelPlugin : public QDeclarativeExtensionPlugin public: void registerTypes(const char *uri) { - qmlRegisterType<MyModel>(uri, 1, 0, + qmlRegisterType<MyModel>(uri, 1, 0, "MyModel"); } } @@ -339,7 +333,7 @@ An integer can be used to specify a model that contains a certain number of elements. In this case, the model does not have any data roles. The following example creates a ListView with five elements: -\code +\qml Item { width: 200; height: 250 @@ -355,7 +349,7 @@ Item { } } -\endcode +\endqml \section2 An Object Instance @@ -367,7 +361,7 @@ The example below creates a list with one item, showing the color of the \e myText text. Note the use of the fully qualified \e model.color property to avoid clashing with \e color property of the Text element in the delegate. -\code +\qml Rectangle { width: 200; height: 250 @@ -389,7 +383,7 @@ Rectangle { delegate: myDelegate } } -\endcode +\endqml \section1 Accessing Views and Models from Delegates @@ -408,44 +402,7 @@ In the following example, the delegate shows the property \e{language} of the model, and the color of one of the fields depends on the property \e{fruit_color} of the view. -\code -Rectangle { - width: 200; height: 200 - - ListModel { - id: fruitModel - property string language: "en" - ListElement { - name: "Apple" - cost: 2.45 - } - ListElement { - name: "Orange" - cost: 3.25 - } - ListElement { - name: "Banana" - cost: 1.95 - } - } - - Component { - id: fruitDelegate - Row { - Text { text: " Fruit: " + name; color: ListView.view.fruit_color } - Text { text: " Cost: $" + cost } - Text { text: " Language: " + ListView.view.model.language } - } - } - - ListView { - property color fruit_color: "green" - model: fruitModel - delegate: fruitDelegate - anchors.fill: parent - } -} -\endcode +\snippet doc/src/snippets/declarative/models/views-models-delegates.qml rectangle Another important case is when some action (e.g. mouse click) in the delegate should update data in the model. In this case you can define @@ -457,92 +414,11 @@ a function in the model, e.g.: ...and call it from the delegate using: -\code +\js ListView.view.model.setData(index, field, value) -\endcode +\endjs ...assuming that \e{field} holds the name of the field which should be updated, and that \e{value} holds the new value. */ - -/*! -\page qml-presenting-data.html -\title Presenting Data with QML - -\section1 Introduction - -Qt Quick contains a set of standard items that can be used to present data in a -number of different ways. For simple user interfaces, -\l{Using QML Positioner and Repeater Items#Repeaters}{Repeaters} can be used -in combination with -\l{Using QML Positioner and Repeater Items#Positioners}{Positioners} -to obtain pieces of data and arrange them in a user interface. However, when -large quantities of data are involved, it is often better to use models with -the standard views since these contain many built-in display and navigation -features. - -\section1 Views - -Views are scrolling containers for collections of items. They are feature-rich, -supporting many of the use cases found in typical applications, and can be -customized to meet requirements on style and behavior. - -A set of standard views are provided in the basic set of Qt Quick -graphical elements: - -\list -\o \l{#ListView}{ListView} arranges items in a horizontal or vertical list -\o \l{#GridView}{GridView} arranges items in a grid within the available space -\o \l{#PathView}{PathView} arranges items on a path -\endlist - -Unlike these items, \l WebView is not a fully-featured view item, and needs -to be combined with a \l Flickable item to create a view that performs like -a Web browser. - -\section2 ListView - -\l ListView shows a classic list of items with horizontal or vertical placing -of items. - -\div{float-right} -\inlineimage qml-listview-snippet.png -\enddiv - -The following example shows a minimal ListView displaying a sequence of -numbers (using an \l{QML Data Models#An Integer}{integer as a model}). -A simple delegate is used to define an items for each piece of data in the -model. - -\clearfloat -\snippet doc/src/snippets/declarative/listview/listview-snippet.qml document - - - -\section2 GridView - -\l GridView displays items in a grid like an file manager's icon view. - -\section2 PathView - -\l PathView displays items on a path, where the selection remains in -the same place and the items move around it. - -\section1 Decorating Views - -\section2 Headers and Footers - -\section2 Sections - -\section2 Navigation - -In traditional user interfaces, views can be scrolled using standard -controls, such as scroll bars and arrow buttons. In some situations, it -is also possible to drag the view directly by pressing and holding a -mouse button while moving the cursor. In touch-based user interfaces, -this dragging action is often complemented with a flicking action, where -scrolling continues after the user has stopped touching the view. - -\section1 Further Reading -*/ |