summaryrefslogtreecommitdiffstats
path: root/src/declarative/fx
diff options
context:
space:
mode:
authorMichael Brasser <michael.brasser@nokia.com>2009-05-06 01:45:03 (GMT)
committerMichael Brasser <michael.brasser@nokia.com>2009-05-06 01:45:03 (GMT)
commit908027ae023f089bf83a2b614e933927989b524c (patch)
tree09f5227a2e2bbab5ce313a54b17846b190af235c /src/declarative/fx
parente320db210c41c1a45a88aad4c592024f433e6ad0 (diff)
parent5edf4ed878bbe933e6ff0023cce8808b1dcff6c0 (diff)
downloadQt-908027ae023f089bf83a2b614e933927989b524c.zip
Qt-908027ae023f089bf83a2b614e933927989b524c.tar.gz
Qt-908027ae023f089bf83a2b614e933927989b524c.tar.bz2
Merge branch 'kinetic-declarativeui' of git@scm.dev.nokia.troll.no:qt/kinetic into kinetic-declarativeui
Diffstat (limited to 'src/declarative/fx')
-rw-r--r--src/declarative/fx/qfxcontentwrapper.cpp74
-rw-r--r--src/declarative/fx/qfxgridview.cpp111
-rw-r--r--src/declarative/fx/qfxlistview.cpp4
3 files changed, 69 insertions, 120 deletions
diff --git a/src/declarative/fx/qfxcontentwrapper.cpp b/src/declarative/fx/qfxcontentwrapper.cpp
index 2b95ff6..d493990 100644
--- a/src/declarative/fx/qfxcontentwrapper.cpp
+++ b/src/declarative/fx/qfxcontentwrapper.cpp
@@ -46,6 +46,36 @@
QT_BEGIN_NAMESPACE
QML_DEFINE_TYPE(QFxContentWrapper,ContentWrapper);
+/*!
+ \qmlclass ContentWrapper QFxContentWrapper
+ \ingroup group_utility
+ \brief ContentWrapper provides a component which contains content.
+ \inherits Item
+
+ In some cases the content of a component is not defined by the component itself.
+ For example, the items placed in a group box need to be specified external to
+ group box component definition itself.
+ In cases like these \l Content can be used to specify at what location in the component
+ the content should be placed. It is used in conjuntion with the \e content property of
+ ContentWrapper: any items listed as content will be placed in the location
+ specified by Content. The component containing the Content must be of type
+ ContentWrapper.
+
+ GroupBox component definition:
+ \quotefile doc/src/snippets/declarative/GroupBox.qml
+
+ \bold Note that in the above component definition ContentWrapper's \e children
+ property is specified explicitly since \e content is the default property.
+
+ Component use:
+ \table
+ \row \o \image content.png
+ \o \quotefile doc/src/snippets/declarative/content.qml
+ \endtable
+
+ \sa Content
+*/
+
QFxContentWrapper::QFxContentWrapper(QFxItem *parent)
: QFxItem(*(new QFxContentWrapperPrivate), parent)
{
@@ -56,6 +86,14 @@ QFxContentWrapper::QFxContentWrapper(QFxContentWrapperPrivate &dd, QFxItem *pare
{
}
+/*!
+ \qmlproperty list<Item> ContentWrapper::content
+
+ Contains the list of elements to replace the \l Content
+ placeholder.
+
+ \sa Content
+*/
QList<QFxItem *> *QFxContentWrapper::content()
{
Q_D(QFxContentWrapper);
@@ -99,40 +137,8 @@ QML_DEFINE_TYPE(QFxContent,Content);
\brief Content is used as a placeholder for the content of a component.
\inherits Item
- In some cases the content of a component is not defined by the component itself.
- For example, the items placed in a group box need to be specified external to
- the where the group box component itself is defined.
- In cases like these Content can be used to specify at what location in the component
- the content should be placed. It is used in conjuntion with the content property of
- the component instance: any items listed as content will be placed in the location
- specified by Content.
-
- Example:
- \qml
-// GroupBox component definition
-Rect {
- width: parent.width
- color: "white"
- pen.width: 2
- pen.color: "#adaeb0"
- radius: 10
- clip: false
- height: contents.height
- VerticalLayout {
- id: layout
- width: parent.width
- Content { } // content property will go here
- }
-}
-
-// component use
-GroupBox {
- content: Text {
- text: "First Item"
- ...
- }
-}
- \endqml
+ The Content element is used to place content within a component.
+ See \l ContentWrapper for usage.
*/
QT_END_NAMESPACE
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.