From dbd435148067b0b6559d34a00567f6ea98bbcaf8 Mon Sep 17 00:00:00 2001 From: Martin Jones Date: Wed, 6 May 2009 11:03:05 +1000 Subject: GridView docs. --- doc/src/declarative/pics/gridview.png | Bin 1369 -> 10564 bytes .../gridview/dummydata/ContactModel.qml | 23 +++++ doc/src/snippets/declarative/gridview/gridview.qml | 45 +++++++++ .../declarative/gridview/pics/portrait.png | Bin 0 -> 3126 bytes .../listview/dummydata/ContactModel.qml | 33 +++--- doc/src/snippets/declarative/listview/listview.qml | 5 +- src/declarative/fx/qfxgridview.cpp | 111 ++++++--------------- src/declarative/fx/qfxlistview.cpp | 4 +- 8 files changed, 114 insertions(+), 107 deletions(-) create mode 100644 doc/src/snippets/declarative/gridview/dummydata/ContactModel.qml create mode 100644 doc/src/snippets/declarative/gridview/gridview.qml create mode 100644 doc/src/snippets/declarative/gridview/pics/portrait.png diff --git a/doc/src/declarative/pics/gridview.png b/doc/src/declarative/pics/gridview.png index d5c8b4b..3726893 100644 Binary files a/doc/src/declarative/pics/gridview.png and b/doc/src/declarative/pics/gridview.png differ 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 Binary files /dev/null and b/doc/src/snippets/declarative/gridview/pics/portrait.png differ 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 @@ - - - - Bill Smith - 555 3264 - - - John Brown - 555 8426 - - - Sam Wise - 555 0473 - - +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 - - - - John - Smith - - - Bill - Jones - - - Jane - Doe - - - - - - - - - - - \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 - - - John - Smith - - - Bill - Jones - - - Jane - Doe - - - - - \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 - - - - - - - ... - - \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 - - - - - \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: "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