Doc: More work on the QML documentation.

12 files changed, 407 insertions, 65 deletions

diff --git a/doc/src/declarative/declarativeui.qdoc b/doc/src/declarative/declarativeui.qdoc
index ae64e2a..2f43682 100644
--- a/doc/src/declarative/declarativeui.qdoc
+++ b/doc/src/declarative/declarativeui.qdoc
@@ -109,6 +109,7 @@ Module.
 \list
 \o \l{Using QML Positioner and Repeater Items}
 \o \l{QML Data Models}
+\o \l{Presenting Data with QML}
 \o \l{Network Transparency}
 \endlist
 
diff --git a/doc/src/declarative/qdeclarativedocument.qdoc b/doc/src/declarative/qdeclarativedocument.qdoc
index 4aed63f..8ca6c11 100644
--- a/doc/src/declarative/qdeclarativedocument.qdoc
+++ b/doc/src/declarative/qdeclarativedocument.qdoc
@@ -79,7 +79,7 @@ Each instance is created with a different value for its \c text property:
 \o application.qml
 
 \row
-\o \snippet doc/src/snippets/declarative/qmldocuments.qml document
+\o \snippet doc/src/snippets/declarative/qml-documents/qmldocuments.qml document
 \o 
 \qml
 import Qt 4.7
diff --git a/doc/src/declarative/qdeclarativemodels.qdoc b/doc/src/declarative/qdeclarativemodels.qdoc
index ace0465..7548c96 100644
--- a/doc/src/declarative/qdeclarativemodels.qdoc
+++ b/doc/src/declarative/qdeclarativemodels.qdoc
@@ -41,30 +41,7 @@ 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 
 values:
 
-\qml
-import Qt 4.7
-
-Item {
-    width: 200; height: 250
-
-    ListModel {
-        id: myModel
-        ListElement { type: "Dog"; age: 8 }
-        ListElement { type: "Cat"; age: 5 }
-    }
-
-    Component {
-        id: myDelegate
-        Text { text: type + ", " + age }
-    }
-
-    ListView {
-        anchors.fill: parent
-        model: myModel
-        delegate: myDelegate
-    }
-}
-\endqml
+\snippet doc/src/snippets/declarative/qml-data-models/listmodel-listview.qml document
 
 If there is a naming clash between the model's properties and the delegate's
 properties, the roles can be accessed with the qualified \e model name instead.
@@ -91,6 +68,10 @@ 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 use of positioner items to arrange items from a model is covered in
+\l{Using QML Positioner and Repeater Items}.
+
 
 \section1 QML Data Models
 
@@ -99,38 +80,12 @@ made available to QML components.
 ListModel is a simple hierarchy of elements specified in QML.  The
 available roles are specified by the \l ListElement properties.
 
-\code
-ListModel {
-    id: fruitModel
-
-    ListElement {
-        name: "Apple"
-        cost: 2.45
-    }
-    ListElement {
-        name: "Orange"
-        cost: 3.25
-    }
-    ListElement {
-        name: "Banana"
-        cost: 1.95
-    }
-}
-\endcode
+\snippet doc/src/snippets/declarative/qml-data-models/listelements.qml model
 
 The above model has two roles, \e name and \e cost.  These can be bound
 to by a ListView delegate, for example:
 
-\code
-ListView {
-    width: 200; height: 250
-    model: fruitModel
-    delegate: Row {
-        Text { text: "Fruit: " + name }
-        Text { text: "Cost: $" + cost }
-    }
-}
-\endcode
+\snippet doc/src/snippets/declarative/qml-data-models/listelements.qml view
 
 ListModel provides methods to manipulate the ListModel directly via JavaScript.
 In this case, the first item inserted determines the roles available
@@ -138,16 +93,9 @@ to any views that are using the model. For example, if an empty ListModel is
 created and populated via JavaScript, the roles provided by the first
 insertion are the only roles that will be shown in the view:
 
-\code
-Item {
-    ListModel { id: fruitModel }
-
-    MouseArea {
-        anchors.fill: parent
-        onClicked: fruitModel.append({"cost": 5.95, "name":"Pizza"})
-    }
-}
-\endcode
+\snippet doc/src/snippets/declarative/qml-data-models/dynamic-listmodel.qml model
+\dots
+\snippet doc/src/snippets/declarative/qml-data-models/dynamic-listmodel.qml mouse area
 
 When the MouseArea is clicked, \c fruitModel will have two roles, \e cost and \e name.
 Even if subsequent roles are added, only the first two will be handled by views
@@ -515,3 +463,84 @@ a function in the model, e.g.:
 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.
+
+\beginfloatright
+\inlineimage qml-listview-snippet.png
+\endfloat
+
+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
+*/
diff --git a/doc/src/declarative/qml-intro.qdoc b/doc/src/declarative/qml-intro.qdoc
index d735042..b77611c 100644
--- a/doc/src/declarative/qml-intro.qdoc
+++ b/doc/src/declarative/qml-intro.qdoc
@@ -583,7 +583,7 @@ rectangle. The \c value attribute of 'dial' is set to a value based on the
 the rotation of the needle image. Notice this piece of code in Dial where
 the change in \c value modifies the position of the needle.
 
-\snippet examples/declarative/ui-components/dialcontrol/Dial.qml  needle angle
+\snippet examples/declarative/ui-components/dialcontrol/content/Dial.qml  needle angle
 
 This is part of the \c needleRotation that rotates the needle and causes the
 rotation of its shadow. \l SpringAnimation is an element that modifies the value
diff --git a/doc/src/examples/qml-examples.qdoc b/doc/src/examples/qml-examples.qdoc
index 8752d14..745baa3 100644
--- a/doc/src/examples/qml-examples.qdoc
+++ b/doc/src/examples/qml-examples.qdoc
@@ -375,7 +375,7 @@
     \title Models and Views: WebView Example
     \example declarative/modelviews/webview
 
-    These examples shows how to use the WebView element.
+    These examples show how to use the WebView element.
 
     \table
     \row
diff --git a/doc/src/images/qml-listview-snippet.png b/doc/src/images/qml-listview-snippet.png
new file mode 100644
index 0000000..0ee0ffc
--- /dev/null
+++ b/doc/src/images/qml-listview-snippet.png
diff --git a/doc/src/snippets/declarative/flickable.qml b/doc/src/snippets/declarative/flickable.qml
new file mode 100644
index 0000000..d7a163b
--- /dev/null
+++ b/doc/src/snippets/declarative/flickable.qml
@@ -0,0 +1,50 @@
+/****************************************************************************
+**
+** Copyright (C) 2010 Nokia Corporation and/or its subsidiary(-ies).
+** All rights reserved.
+** Contact: Nokia Corporation (qt-info@nokia.com)
+**
+** This file is part of the QtDeclarative module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+**     the names of its contributors may be used to endorse or promote
+**     products derived from this software without specific prior written
+**     permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+//! [document]
+import Qt 4.7
+
+Flickable {
+    width: 200; height: 200
+    contentWidth: image.width; contentHeight: image.height
+
+    Image { id: image; source: "bigImage.png" }
+}
+//! [document]
diff --git a/doc/src/snippets/declarative/image.qml b/doc/src/snippets/declarative/image.qml
index b0ae032..42efb8f 100644
--- a/doc/src/snippets/declarative/image.qml
+++ b/doc/src/snippets/declarative/image.qml
@@ -38,8 +38,10 @@
 **
 ****************************************************************************/
 
+//! [document]
 import Qt 4.7
 
 Image {
     source: "pics/qtlogo.png"
 }
+//! [document]
diff --git a/doc/src/snippets/declarative/listview/listview-snippet.qml b/doc/src/snippets/declarative/listview/listview-snippet.qml
new file mode 100644
index 0000000..c510472
--- /dev/null
+++ b/doc/src/snippets/declarative/listview/listview-snippet.qml
@@ -0,0 +1,52 @@
+/****************************************************************************
+**
+** Copyright (C) 2010 Nokia Corporation and/or its subsidiary(-ies).
+** All rights reserved.
+** Contact: Nokia Corporation (qt-info@nokia.com)
+**
+** This file is part of the QtDeclarative module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+**     the names of its contributors may be used to endorse or promote
+**     products derived from this software without specific prior written
+**     permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+//! [document]
+import Qt 4.7
+
+ListView {
+    width: 50; height: 200
+    model: 4
+    delegate: Text {
+        text: index;
+        font.pixelSize: 40
+    }
+}
+//! [document]
diff --git a/doc/src/snippets/declarative/qml-data-models/dynamic-listmodel.qml b/doc/src/snippets/declarative/qml-data-models/dynamic-listmodel.qml
new file mode 100644
index 0000000..72e27f3
--- /dev/null
+++ b/doc/src/snippets/declarative/qml-data-models/dynamic-listmodel.qml
@@ -0,0 +1,67 @@
+/****************************************************************************
+**
+** Copyright (C) 2010 Nokia Corporation and/or its subsidiary(-ies).
+** All rights reserved.
+** Contact: Nokia Corporation (qt-info@nokia.com)
+**
+** This file is part of the QtDeclarative module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+**     the names of its contributors may be used to endorse or promote
+**     products derived from this software without specific prior written
+**     permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import Qt 4.7
+
+Item {
+    width: 200; height: 250
+
+    //! [model]
+    ListModel { id: fruitModel }
+    //! [model]
+
+    //! [view]
+    ListView {
+        anchors.fill: parent
+        model: fruitModel
+        delegate: Row {
+            Text { text: "Fruit: " + name }
+            Text { text: "Cost: $" + cost }
+        }
+    }
+    //! [view]
+
+    //! [mouse area]
+    MouseArea {
+        anchors.fill: parent
+        onClicked: fruitModel.append({"cost": 5.95, "name":"Pizza"})
+    }
+    //! [mouse area]
+}
diff --git a/doc/src/snippets/declarative/qml-data-models/listelements.qml b/doc/src/snippets/declarative/qml-data-models/listelements.qml
new file mode 100644
index 0000000..d9cea81
--- /dev/null
+++ b/doc/src/snippets/declarative/qml-data-models/listelements.qml
@@ -0,0 +1,77 @@
+/****************************************************************************
+**
+** Copyright (C) 2010 Nokia Corporation and/or its subsidiary(-ies).
+** All rights reserved.
+** Contact: Nokia Corporation (qt-info@nokia.com)
+**
+** This file is part of the QtDeclarative module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+**     the names of its contributors may be used to endorse or promote
+**     products derived from this software without specific prior written
+**     permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+//! [document]
+import Qt 4.7
+
+Item {
+    width: 200; height: 250
+
+    //! [model]
+    ListModel {
+        id: fruitModel
+
+        ListElement {
+            name: "Apple"
+            cost: 2.45
+        }
+        ListElement {
+            name: "Orange"
+            cost: 3.25
+        }
+        ListElement {
+            name: "Banana"
+            cost: 1.95
+        }
+    }
+    //! [model]
+
+    //! [view]
+    ListView {
+        anchors.fill: parent
+        model: fruitModel
+        delegate: Row {
+            Text { text: "Fruit: " + name }
+            Text { text: "Cost: $" + cost }
+        }
+    }
+    //! [view]
+}
+//! [document]
diff --git a/doc/src/snippets/declarative/qml-data-models/listmodel-listview.qml b/doc/src/snippets/declarative/qml-data-models/listmodel-listview.qml
new file mode 100644
index 0000000..92107f1
--- /dev/null
+++ b/doc/src/snippets/declarative/qml-data-models/listmodel-listview.qml
@@ -0,0 +1,64 @@
+/****************************************************************************
+**
+** Copyright (C) 2010 Nokia Corporation and/or its subsidiary(-ies).
+** All rights reserved.
+** Contact: Nokia Corporation (qt-info@nokia.com)
+**
+** This file is part of the QtDeclarative module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+**     the names of its contributors may be used to endorse or promote
+**     products derived from this software without specific prior written
+**     permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+//! [document]
+import Qt 4.7
+
+Item {
+    width: 200; height: 250
+
+    ListModel {
+        id: myModel
+        ListElement { type: "Dog"; age: 8 }
+        ListElement { type: "Cat"; age: 5 }
+    }
+
+    Component {
+        id: myDelegate
+        Text { text: type + ", " + age }
+    }
+
+    ListView {
+        anchors.fill: parent
+        model: myModel
+        delegate: myDelegate
+    }
+}
+//! [document]