6 files changed, 85 insertions, 21 deletions
diff --git a/doc/src/declarative/pics/gridview.png b/doc/src/declarative/pics/gridview.png
index d5c8b4b..3726893 100644
--- a/doc/src/declarative/pics/gridview.png
+++ b/doc/src/declarative/pics/gridview.png
diff --git a/doc/src/snippets/declarative/gridview/dummydata/ContactModel.qml b/doc/src/snippets/declarative/gridview/dummydata/ContactModel.qml
new file mode 100644
index 0000000..accbc3e
--- /dev/null
+++ b/doc/src/snippets/declarative/gridview/dummydata/ContactModel.qml
@@ -0,0 +1,23 @@
+ListModel {
+    id: ContactModel
+    ListElement {
+        name: "Bill Smith"
+        number: "555 3264"
+        portrait: "pics/portrait.png"
+    }
+    ListElement {
+        name: "Jim Williams"
+        number: "555 5673"
+        portrait: "pics/portrait.png"
+    }
+    ListElement {
+        name: "John Brown"
+        number: "555 8426"
+        portrait: "pics/portrait.png"
+    }
+    ListElement {
+        name: "Sam Wise"
+        number: "555 0473"
+        portrait: "pics/portrait.png"
+    }
+}
diff --git a/doc/src/snippets/declarative/gridview/gridview.qml b/doc/src/snippets/declarative/gridview/gridview.qml
new file mode 100644
index 0000000..0fca789
--- /dev/null
+++ b/doc/src/snippets/declarative/gridview/gridview.qml
@@ -0,0 +1,45 @@
+//! [3]
+Rect {
+    width: 240; height: 180; color: "white"
+    // ContactModel model is defined in dummydata/ContactModel.qml
+    // The viewer automatically loads files in dummydata/* to assist
+    // development without a real data source.
+
+    // Define a delegate component.  A component will be
+    // instantiated for each visible item in the list.
+//! [0]
+    Component {
+        id: Delegate
+        Item {
+            id: Wrapper
+            width: 80; height: 78
+            VerticalLayout {
+                Image { source: portrait; anchors.horizontalCenter: parent.horizontalCenter }
+                Text { text: name; anchors.horizontalCenter: parent.horizontalCenter }
+            }
+        }
+    }
+//! [0]
+    // Define a highlight component.  Just one of these will be instantiated
+    // by each ListView and placed behind the current item.
+//! [1]
+    Component {
+        id: Highlight
+        Rect {
+            color: "lightsteelblue"
+            radius: 5
+        }
+    }
+//! [1]
+    // The actual grid
+//! [2]
+    GridView {
+        width: parent.width; height: parent.height
+        model: ContactModel; delegate: Delegate
+        cellWidth: 80; cellHeight: 80
+        highlight: Highlight
+        focus: true
+    }
+//! [2]
+}
+//! [3]
diff --git a/doc/src/snippets/declarative/gridview/pics/portrait.png b/doc/src/snippets/declarative/gridview/pics/portrait.png
new file mode 100644
index 0000000..fb5052a
--- /dev/null
+++ b/doc/src/snippets/declarative/gridview/pics/portrait.png
diff --git a/doc/src/snippets/declarative/listview/dummydata/ContactModel.qml b/doc/src/snippets/declarative/listview/dummydata/ContactModel.qml
index 302dfd2..53c745e 100644
--- a/doc/src/snippets/declarative/listview/dummydata/ContactModel.qml
+++ b/doc/src/snippets/declarative/listview/dummydata/ContactModel.qml
@@ -1,18 +1,15 @@
-<!--
-ListModel allows free form list models to be defined and populated.
-Be sure to name the file the same as the id.
--->
-<ListModel id="ContactModel">
-    <Contact>
-        <name>Bill Smith</name>
-        <number>555 3264</number>
-    </Contact>
-    <Contact>
-        <name>John Brown</name>
-        <number>555 8426</number>
-    </Contact>
-    <Contact>
-        <name>Sam Wise</name>
-        <number>555 0473</number>
-    </Contact>
-</ListModel>
+ListModel {
+    id: ContactModel
+    ListElement {
+        name: "Bill Smith"
+        number: "555 3264"
+    }
+    ListElement {
+        name: "John Brown"
+        number: "555 8426"
+    }
+    ListElement {
+        name: "Sam Wise"
+        number: "555 0473"
+    }
+}
diff --git a/doc/src/snippets/declarative/listview/listview.qml b/doc/src/snippets/declarative/listview/listview.qml
index 5b99bbd..3596af1 100644
--- a/doc/src/snippets/declarative/listview/listview.qml
+++ b/doc/src/snippets/declarative/listview/listview.qml
@@ -1,7 +1,7 @@
 //! [3]
 Rect {
-    width: 480
-    height: 40
+    width: 180
+    height: 200
     color: "white"
     // ContactModel model is defined in dummydata/ContactModel.qml
     // The viewer automatically loads files in dummydata/* to assist
@@ -48,7 +48,6 @@ Rect {
         delegate: Delegate
         highlight: Highlight
         focus: true
-        orientation: 'Horizontal'
     }
 //! [2]
 }