summaryrefslogtreecommitdiffstats
path: root/doc/src/declarative/qmlviews.qdoc
diff options
context:
space:
mode:
authorDavid Boddie <david.boddie@nokia.com>2011-02-17 14:48:01 (GMT)
committerDavid Boddie <david.boddie@nokia.com>2011-02-17 14:48:01 (GMT)
commit9bfdcaa2a727ca59c4a5136000ce13223ce87b5e (patch)
treeb6f6be5141f6f3af40c8eaf87167f5858a393b2c /doc/src/declarative/qmlviews.qdoc
parentcaee66da925949cf7aef2ff8e1a86c38dd6e6efd (diff)
parent6ff22762df68d60288cdc95b9359ca2544bd7bbe (diff)
downloadQt-9bfdcaa2a727ca59c4a5136000ce13223ce87b5e.zip
Qt-9bfdcaa2a727ca59c4a5136000ce13223ce87b5e.tar.gz
Qt-9bfdcaa2a727ca59c4a5136000ce13223ce87b5e.tar.bz2
Merge branch '4.7' of scm.dev.nokia.troll.no:qt/jpasions-qt-doc-team-qtquick into 4.7
Conflicts: doc/src/declarative/extending.qdoc doc/src/external-resources.qdoc doc/src/overviews.qdoc src/declarative/util/qdeclarativeview.cpp
Diffstat (limited to 'doc/src/declarative/qmlviews.qdoc')
-rw-r--r--doc/src/declarative/qmlviews.qdoc115
1 files changed, 59 insertions, 56 deletions
diff --git a/doc/src/declarative/qmlviews.qdoc b/doc/src/declarative/qmlviews.qdoc
index 3f74214..8b2ca96 100644
--- a/doc/src/declarative/qmlviews.qdoc
+++ b/doc/src/declarative/qmlviews.qdoc
@@ -33,79 +33,82 @@
\nextpage {Extending QML Functionalities using C++}
\title Presenting Data with Views
-\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.
+Views are containers for collections of items. They are feature-rich and can be
+customizable to meet style or behavior requirements.
+\keyword qml-view-elements
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
+\o \l{ListView} arranges items in a horizontal or vertical list
+\o \l{GridView} arranges items in a grid within the available space
+\o \l{PathView} arranges items on a path
+\o \l{WebView}{WebView} - available from the \l {QtWebKit QML Module}.
\endlist
-
-Unlike these items, \l WebView is not a fully-featured view item, and needs
+Unlike other views, \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
+These elements have properties and behaviors exclusive to each element. Visit
+their respective documentation for more information.
-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.
+\section1 Models
-\clearfloat
-\snippet doc/src/snippets/declarative/listview/listview-snippet.qml document
+Views display \l{qml-data-models}{models} onto the screen. A model could be a simple list of \l{QML Data Models#An Integer}{integer} or a \l{qml-c++-models}{C++ model}.
+To assign a model to a view, bind the view's \c model property to a model.
+\snippet doc/src/snippets/declarative/listview.qml model
+\snippet doc/src/snippets/declarative/listview.qml model
+For more information, consult the \l {QML Data Models} article.
-\section2 GridView
+\keyword qml-view-delegate
+\section1 View Delegates
-\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.
+Views need a \e delegate to visually represent an item in a list. A view will
+visual each item list according to the template defined by the delegate.
+Properties of the model are accessible as well as an \c index property.
+\snippet doc/src/snippets/declarative/listview.qml delegate
+\image listview-setup.png
\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.
+Views allow visual customization through \e decoration properties such as the \c header, \c footer, and \c section properties. By binding an object, usually
+another visual object, to these properties, the views are decoratable. A footer
+may include a \l Rectangle element showcasing borders or a header that displays
+a logo on top of the list.
+
+Suppose that a specific club wants to decorate its members list with its brand
+colors. A member list is in a \c model and the \c delegate will display the
+model's content.
+\snippet doc/src/snippets/declarative/listview-decorations.qml model
+\snippet doc/src/snippets/declarative/listview-decorations.qml delegate
+
+The club may decorate the members list by binding visual objects to the
+\c header and \c footer properties. The visual object may be defined inline, in another file, or in a
+\l {Component} element.
+\snippet doc/src/snippets/declarative/listview-decorations.qml decorations
+\image listview-decorations.png
+
+\section1 ListView Sections
+
+\l {ListView} contents may be grouped into \e sections, where related list items
+are labelled according to their sections. Further, the sections may be decorated
+with \l{qml-view-delegate}{delegates}.
+
+A list may contain a list indicating people's names and the team on which team
+the person belongs.
+\snippet doc/src/snippets/declarative/listview-sections.qml model
+\snippet doc/src/snippets/declarative/listview-sections.qml delegate
+
+The ListView element has the \c section
+\l{qml-attached-properties}{attached property} that can combine adjacent
+and related elements into a section. The section's \c property property is for
+selecting which list element property to use as sections. The \c criteria
+can dictate how the section names are displayed and the \c delegate is similar
+to the views' \l {qml-view-delegate}{delegate} property.
+\snippet doc/src/snippets/declarative/listview-sections.qml section
+\image listview-section.png
-\section1 Further Reading
*/