GridView docs.

8 files changed, 114 insertions, 107 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]
 }
diff --git a/src/declarative/fx/qfxgridview.cpp b/src/declarative/fx/qfxgridview.cpp
index 8416234..acfb57e 100644
--- a/src/declarative/fx/qfxgridview.cpp
+++ b/src/declarative/fx/qfxgridview.cpp
@@ -656,32 +656,18 @@ void QFxGridViewPrivate::updateCurrent(int modelIndex)
     and may be flicked to scroll.
 
     The below example creates a very simple grid, using a QML model.
-    \code
-    <resources>
-        <ListModel id="contactModel">
-            <Contact>
-                <firstName>John</firstName>
-                <lastName>Smith</lastName>
-            </Contact>
-            <Contact>
-                <firstName>Bill</firstName>
-                <lastName>Jones</lastName>
-            </Contact>
-            <Contact>
-                <firstName>Jane</firstName>
-                <lastName>Doe</lastName>
-            </Contact>
-            </ListModel>
-            <Component id="contactDelegate">
-                <Rect pen.color="blue" z="-1" height="20" width="80" color="white" radius="2">
-                    <Text id="name" text="{firstName + ' ' + lastName}" font.size="11"/>
-                </Rect>
-        </Component>
-    </resources>
-
-    <GridView id="Grid" width="160" height="240" cellWidth="80" cellHeight="20" clip="true"
-                model="{contactModel}" delegate="{contactDelegate}"/>
-    \endcode
+
+    \image gridview.png
+
+    \snippet doc/src/snippets/declarative/gridview/gridview.qml 3
+
+    The model is defined as a ListModel using QML:
+    \quotefile doc/src/snippets/declarative/gridview/dummydata/ContactModel.qml
+
+    In this case ListModel is a handy way for us to test our UI.  In practice
+    the model would be implemented in C++, or perhaps via a SQL data source.
+
+
 */
 QFxGridView::QFxGridView(QFxItem *parent)
     : QFxFlickable(*(new QFxGridViewPrivate), parent)
@@ -703,28 +689,8 @@ QFxGridView::~QFxGridView()
 
   The model provides a set of data that is used to create the items for the view.
   For large or dynamic datasets the model is usually provided by a C++ model object.
-  The C++ model object must be a \l QListModelInterface subclass, a \l VisualModel,
+  The C++ model object must be a \l QAbstractItemModel subclass, a \l VisualModel,
   or a simple list.
-
-  Models can also be created directly in QML, using the \l ListModel object. For example:
-  \code
-  <ListModel id="contactModel">
-      <Contact>
-          <firstName>John</firstName>
-          <lastName>Smith</lastName>
-      </Contact>
-      <Contact>
-          <firstName>Bill</firstName>
-          <lastName>Jones</lastName>
-      </Contact>
-      <Contact>
-          <firstName>Jane</firstName>
-          <lastName>Doe</lastName>
-      </Contact>
-  </ListModel>
-
-  <GridView model="{contactModel}" .../>
-  \endcode
 */
 QVariant QFxGridView::model() const
 {
@@ -774,17 +740,7 @@ void QFxGridView::setModel(const QVariant &model)
   The delegate provides a template describing what each item in the view should look and act like.
 
   Here is an example delegate:
-  \code
-  <Component id="contactDelegate">
-      <Item id="wrapper">
-          <Image id="pic" width="100" height="100" file="{portrait}"/>
-          <Text id="name" text="{firstName + ' ' + lastName}"
-              anchors.left="{pic.right}" anchors.leftMargin="5"/>
-      </Item>
-  </Component>
-  ...
-  <GridView delegate="{contactDelegate}" .../>
-  \endcode
+  \snippet doc/src/snippets/declarative/gridview/gridview.qml 0
 */
 QmlComponent *QFxGridView::delegate() const
 {
@@ -860,12 +816,7 @@ int QFxGridView::count() const
   so as to stay with the current item, unless the autoHighlight property is false.
 
   The below example demonstrates how to make a simple highlight:
-  \code
-  <Component id="ListHighlight">
-      <Rect color="lightsteelblue" radius="4"/>
-  </Component>
-  <GridView highlight="{ListHighlight}">
-  \endcode
+  \snippet doc/src/snippets/declarative/gridview/gridview.qml 1
 
   \sa autoHighlight
 */
@@ -890,19 +841,17 @@ void QFxGridView::setHighlight(QmlComponent *highlight)
   If autoHighlight is true, the highlight will be moved smoothly
   to follow the current item.  If autoHighlight is false, the
   highlight will not be moved by the view, and must be implemented
-  by the highlight, for example:
+  by the highlight component, for example:
 
   \code
-  <Component id="Highlight">
-      <Rect id="Wrapper" color="#242424" radius="4" width="320" height="60" >
-          <y>
-              <Follow source="{Wrapper.GridView.view.current.y}" spring="3" damping="0.2"/>
-          </y>
-          <x>
-              <Follow source="{Wrapper.GridView.view.current.x}" spring="3" damping="0.2"/>
-          </x>
-      </Rect>
-  </Component>
+  Component {
+      id: Highlight
+      Rect {
+          id: Wrapper; color: "lightsteelblue"; radius: 4; width: 320; height: 60 >
+          y: Follow { source: Wrapper.GridView.view.current.y; spring: 3; damping: 0.2 }
+          x: Follow { source: Wrapper.GridView.view.current.x; spring: 3; damping: 0.2 }
+      }
+  }
   \endcode
 */
 bool QFxGridView::autoHighlight() const
@@ -1007,9 +956,11 @@ void QFxGridView::setCacheBuffer(int buffer)
 
 /*!
   \qmlproperty int GridView::cellWidth
-  This property holds the width of each cell in the grid
+  \qmlproperty int GridView::cellHeight
+
+  These properties holds the width and height of each cell in the grid
 
-  The default cellWidth is 100.
+  The default sell size is 100x100.
 */
 int QFxGridView::cellWidth() const
 {
@@ -1028,12 +979,6 @@ void QFxGridView::setCellWidth(int cellWidth)
     }
 }
 
-/*!
-  \qmlproperty int GridView::cellHeight
-  This property holds the height of each cell in the grid
-
-  The default cellHeight is 100.
-*/
 int QFxGridView::cellHeight() const
 {
     Q_D(const QFxGridView);
diff --git a/src/declarative/fx/qfxlistview.cpp b/src/declarative/fx/qfxlistview.cpp
index 9d076d0..b256c4a 100644
--- a/src/declarative/fx/qfxlistview.cpp
+++ b/src/declarative/fx/qfxlistview.cpp
@@ -809,9 +809,7 @@ void QFxListViewPrivate::fixupX()
     \snippet doc/src/snippets/declarative/listview/listview.qml 3
 
     The model is defined as a ListModel using QML:
-    \quotefromfile doc/src/snippets/declarative/listview/dummydata/ContactModel.qml
-    \skipto <ListModel
-    \printuntil </ListModel
+    \quotefile doc/src/snippets/declarative/listview/dummydata/ContactModel.qml
 
     In this case ListModel is a handy way for us to test our UI.  In practice
     the model would be implemented in C++, or perhaps via a SQL data source.