Merge branch 'kinetic-declarativeui' of git@scm.dev.nokia.troll.no:qt/kinetic into kinetic-declarativeui

10 files changed, 176 insertions, 198 deletions

diff --git a/src/declarative/fx/qfximage.cpp b/src/declarative/fx/qfximage.cpp
index dded48c..1361d68 100644
--- a/src/declarative/fx/qfximage.cpp
+++ b/src/declarative/fx/qfximage.cpp
@@ -68,28 +68,27 @@ QML_DEFINE_TYPE(QFxImage,Image);
     \o \image declarative-qtlogo1.png
     \o Untransformed
     \code
-    <Image src="pics/qtlogo.png"/>
+    Image { source: "pics/qtlogo.png" }
     \endcode
     \row
     \o \image declarative-qtlogo2.png
     \o Stretched
     \code
-    <Image width="160" height="160" src="pics/qtlogo.png"/>
+    Image { width: 160; height: 160; source: "pics/qtlogo.png" }
     \endcode
     \row
     \o \image declarative-qtlogo4.png
     \o Grid-scaled
     \code
-    <Image scaleGrid.left="20" scaleGrid.right="10"
-           scaleGrid.top="14" scaleGrid.bottom="14"
-        width="160" height="160" src="pics/qtlogo.png"/>
+    Image { scaleGrid.left: 20; scaleGrid.right: 10
+            scaleGrid.top: 14; scaleGrid.bottom: 14
+            width: 160; height: 160; source: "pics/qtlogo.png" }
     \endcode
     \row
     \o \image declarative-qtlogo3.png
     \o Tiled
     \code
-    <Image tile="true"
-        width="160" height="160" src="pics/qtlogo.png"/>
+    Image { tile: true; width: 160; height: 160; source: "pics/qtlogo.png" }
     \endcode
     \endtable
  */
@@ -103,7 +102,7 @@ QML_DEFINE_TYPE(QFxImage,Image);
 
     Example:
     \code
-    <Image src="pics/star.png"/>
+    Image { source: "pics/star.png" }
     \endcode
 
     A QFxImage object can be instantiated in Qml using the tag \l Image.
@@ -200,11 +199,11 @@ QFxScaleGrid *QFxImage::scaleGrid()
     of unscaled tiles, clipped to the size of the Image.
 
     \code
-    <Item>
-        <Image src="tile.png" />
-        <Image x="80" width="100" height="100" src="tile.png" />
-        <Image x="190" width="100" height="100" tile="true" src="tile.png" />
-    </Item>
+    Item {
+        Image { source: "tile.png" }
+        Image { x: 80; width: 100; height: 100; src: "tile.png" }
+        Image { x: 190; width: 100; height: 100; tile: true; src: "tile.png" }
+    }
     \endcode
     \image declarative-image_tile.png
 
diff --git a/src/declarative/fx/qfxpath.cpp b/src/declarative/fx/qfxpath.cpp
index f08671d..26aa10e 100644
--- a/src/declarative/fx/qfxpath.cpp
+++ b/src/declarative/fx/qfxpath.cpp
@@ -164,16 +164,7 @@ void QFxPath::setStartY(qreal y)
         \i \l PathPercent - a way to spread out items along various segments of the path.
     \endlist
 
-    \code
-    <Path startX="240" startY="350">
-        <PathAttribute name="scale" value="1.0"/>
-        <PathAttribute name="opacity" value="1"/>
-        <PathQuad x="240" y="150" controlX="660" controlY="250"/>
-        <PathAttribute name="scale" value="0.1"/>
-        <PathAttribute name="opacity" value="-0.5"/>
-        <PathCubic x="240" y="350" control1X="-180" control1Y="250" control2X="0" control2Y="25"/>
-    </Path>
-    \endcode
+    \snippet doc/src/snippets/declarative/pathview/pathattributes.qml 2
 */
 
 QList<QFxPathElement *>* QFxPath::pathElements()
@@ -493,31 +484,15 @@ void QFxCurve::setY(qreal y)
     an attribute at any particular point is interpolated from the PathAttributes
     bounding the point.
 
-    The example below shows a path with the items scaled to 10% at the ends of
-    the path and scaled 100% along the PathLine in the middle.  Note the use
-    of the PathView.scale attached property to set the scale of the delegate.
+    The example below shows a path with the items scaled to 30% with opacity 50%
+     at the top of the path and scaled 100% with opacity 100% at the bottom.
+    Note the use of the PathView.scale and PathView.opacity attached properties
+    to set the scale and opacity of the delegate.
     \table
     \row
     \o \image declarative-pathattribute.png
     \o
-    \code
-    <Component id="Delegate">
-        <Rect id="Wrapper" width="20" height="20" scale="{PathView.scale}" color="steelblue"/>
-    </Component>
-    <PathView width="200" height="100" model="{Model}" delegate="{Delegate}">
-        <path>
-            <Path startX="20" startY="0">
-                <PathAttribute name="scale" value="0.1"/>
-                <PathQuad x="50" y="80" controlX="0" controlY="80"/>
-                <PathAttribute name="scale" value="1"/>
-                <PathLine x="150" y="80"/>
-                <PathAttribute name="scale" value="1"/>
-                <PathQuad x="180" y="0" controlX="200" controlY="80"/>
-                <PathAttribute name="scale" value="0.1"/>
-            </Path>
-        </path>
-    </PathView>
-    \endcode
+    \snippet doc/src/snippets/declarative/pathview/pathattributes.qml 0
     \endtable
 
    \sa Path
@@ -583,9 +558,10 @@ void QFxPathAttribute::setValue(qreal value)
     0,100 to 200,100:
 
     \code
-    <Path startX="0" startY="100">
-        <PathLine x="200" y="100"/>
-    </Path>
+    Path {
+        startX: 0; startY: 100
+        PathLine { x: 200; y: 100 }
+    }
     \endcode
 
     \sa Path, PathQuad, PathCubic
@@ -624,9 +600,10 @@ void QFxPathLine::addToPath(QPainterPath &path)
     \o \image declarative-pathquad.png
     \o
     \code
-    <Path startX="0" startY="0">
-        <PathQuad x="200" y="0" controlX="100" controlY="150"/>
-    </Path>
+    Path {
+        startX: 0; startY: 0
+        PathQuad x: 200; y: 0; controlX: 100; controlY: 150 }
+    }
     \endcode
     \endtable
 
@@ -707,10 +684,13 @@ void QFxPathQuad::addToPath(QPainterPath &path)
     \o \image declarative-pathcubic.png
     \o
     \code
-    <Path startX="20" startY="0">
-         <PathCubic x="180" y="0" control1X="-10" control1Y="90"
-                    control2X="210" control2Y="90"/>
-    </Path>
+    Path {
+        startX: 20; startY: 0
+        PathCubic {
+            x: 180; y: 0; control1X: -10; control1Y: 90
+                          control2X: 210; control2Y: 90
+        }
+    }
     \endcode
     \endtable
 
@@ -834,24 +814,26 @@ void QFxPathCubic::addToPath(QPainterPath &path)
     \o \image declarative-nopercent.png
     \o
     \code
-    <Path startX="20" startY="0">
-        <PathQuad x="50" y="80" controlX="0" controlY="80"/>
-        <PathLine x="150" y="80"/>
-        <PathQuad x="180" y="0" controlX="200" controlY="80"/>
-    </Path>
+    Path {
+        startX: 20; startY: 0
+        PathQuad { x: 50; y: 80; controlX: 0; controlY: 80 }
+        PathLine { x: 150; y: 80 }
+        PathQuad { x: 180; y: 0; controlX: 200; controlY: 80 }
+    }
     \endcode
     \row
     \o \image declarative-percent.png
     \o
     \code
-    <Path startX="20" startY="0">
-        <PathQuad x="50" y="80" controlX="0" controlY="80"/>
-        <PathPercent value=".25"/>
-        <PathLine x="150" y="80"/>
-        <PathPercent value=".75"/>
-        <PathQuad x="180" y="0" controlX="200" controlY="80"/>
-        <PathPercent value="1"/>
-    </Path>
+    Path {
+        startX: 20; startY: 0
+        PathQuad { x: 50; y: 80; controlX: 0; controlY: 80 }
+        PathPercent { value: 0.25 }
+        PathLine { x: 150; y: 80 }
+        PathPercent { value: 0.75 }
+        PathQuad { x: 180; y: 0; controlX: 200; controlY: 80 }
+        PathPercent { value: 1 }
+    }
     \endcode
     \endtable
 
diff --git a/src/declarative/fx/qfxpathview.cpp b/src/declarative/fx/qfxpathview.cpp
index a2ea8ee..810a359 100644
--- a/src/declarative/fx/qfxpathview.cpp
+++ b/src/declarative/fx/qfxpathview.cpp
@@ -41,7 +41,6 @@
 
 #include <math.h>
 #include <QDebug>
-#include <QPen>
 #include <QEvent>
 #include "qmlbindablevalue.h"
 #include "qmlstate.h"
@@ -51,7 +50,6 @@
 #include "qfxpathview.h"
 #include "qfxpathview_p.h"
 #include <QGraphicsSceneEvent>
-#include <QTimer>
 
 static const int FlickThreshold = 5;
 
@@ -103,13 +101,7 @@ private:
 
     The items are laid out along a path defined by a \l Path and may be flicked to scroll.
 
-    \code
-    <PathView id="pathview" delegate="{contactDelegate}">
-        <resources><Component id="contactDelegate">...</Component></resources>
-        <model>...</model>
-        <path>...</path>
-    </PathView>
-    \endcode
+    \snippet doc/src/snippets/declarative/pathview/pathview.qml 0
 
     \image pathview.gif
 
@@ -320,23 +312,7 @@ void QFxPathView::setDragMargin(qreal dragMargin)
     The delegate provides a template describing what each item in the view should look and act like.
 
     Here is an example delegate:
-    \code
-    <PathView delegate="{contactDelegate}" ...>
-        <resources>
-            <Component id="contactDelegate">
-                <Item id="wrapper" scale="{PathView.sc}" opacity="{PathView.op}" z="{PathView.z}">
-                    <Image id="pic" width="100" height="100" file="{portrait}"
-                            anchors.horizontalCenter="{parent.horizontalCenter}"/>
-                    <Text id="name" text="{firstName + ' ' + lastName}"
-                            font.size="20"
-                            anchors.top="{pic.bottom}" anchors.topMargin="5"
-                            anchors.horizontalCenter="{parent.horizontalCenter}"/>
-                </Item>
-            </Component>
-        </resources>
-        ...
-    </PathView>
-    \endcode
+    \snippet doc/src/snippets/declarative/pathview/pathview.qml 1
 */
 
 /*!
@@ -682,7 +658,7 @@ void QFxPathView::itemsInserted(int modelIndex, int count)
 {
     //XXX support animated insertion
     Q_D(QFxPathView);
-    if (d->pathItems == -1 || d->items.count() < d->pathItems) {
+    if (d->pathItems == -1) {
         for (int i = 0; i < count; ++i) {
             QFxItem *item = d->model->item(modelIndex + i);
             item->setZ(modelIndex + i);
diff --git a/src/declarative/fx/qfxtransform.cpp b/src/declarative/fx/qfxtransform.cpp
index 2bed170..8ff4c54 100644
--- a/src/declarative/fx/qfxtransform.cpp
+++ b/src/declarative/fx/qfxtransform.cpp
@@ -93,7 +93,7 @@ void QFxTransform::update()
     between the points does matter for translation along an axis.
 
     \code
-    <Axis startX="0" startY="0" endX="20" endY="30"/>
+    Axis { startX: 0; startY: 0; endX: 20; endY: 30 }
     \endcode
 */
 
@@ -182,31 +182,7 @@ void QFxAxis::setEndZ(qreal z)
     \brief The Rotation3D element provides a way to rotate an Item around an axis.
 
     Here is an example of various rotations applied to an \l Image.
-    \code
-    <HorizontalLayout margin="10" spacing="10">
-        <Image src="qt.png"/>
-        <Image src="qt.png">
-            <transform>
-                <Rotation3D axis.startX="30" axis.endX="30" axis.endY="60" angle="18"/>
-            </transform>
-        </Image>
-        <Image src="qt.png">
-            <transform>
-                <Rotation3D axis.startX="30" axis.endX="30" axis.endY="60" angle="36"/>
-            </transform>
-        </Image>
-        <Image src="qt.png">
-            <transform>
-                <Rotation3D axis.startX="30" axis.endX="30" axis.endY="60" angle="54"/>
-            </transform>
-        </Image>
-        <Image src="qt.png">
-            <transform>
-                <Rotation3D axis.startX="30" axis.endX="30" axis.endY="60" angle="72"/>
-            </transform>
-        </Image>
-    </HorizontalLayout>
-    \endcode
+    \snippet doc/src/snippets/declarative/rotation.qml 0
 
     \image axisrotation.png
 */
@@ -233,6 +209,8 @@ QFxRotation3D::~QFxRotation3D()
     A rotation axis is specified by 2 points in 3D space: a start point and
     an end point. The z-position of the start point is assumed to be 0, and cannot
     be changed.
+
+    \sa Axis
 */
 QFxAxis *QFxRotation3D::axis()
 {
@@ -374,6 +352,8 @@ QFxTranslation3D::~QFxTranslation3D()
     an end point. The z-position of the start point is assumed to be 0, and cannot
     be changed. Changing the z-position of the end point is only valid when running
     under OpenGL.
+
+    \sa Axis
 */
 QFxAxis *QFxTranslation3D::axis()
 {
@@ -388,7 +368,7 @@ QFxAxis *QFxTranslation3D::axis()
     of 0.5 would translate to 50, 25.
 
     \code
-    <Translation3D axis.startX="0" axis.startY="0" axis.endX="100" axis.endY="50"/>
+    Translation3D { axis.startX: 0; axis.startY: 0; axis.endX: 100; axis.endY: 50 }
     \endcode
 */
 qreal QFxTranslation3D::distance() const
diff --git a/src/declarative/util/qmlanimation.cpp b/src/declarative/util/qmlanimation.cpp
index 4bcc550..d5765c1 100644
--- a/src/declarative/util/qmlanimation.cpp
+++ b/src/declarative/util/qmlanimation.cpp
@@ -177,12 +177,14 @@ QmlAbstractAnimation::QmlAbstractAnimation(QmlAbstractAnimationPrivate &dd, QObj
     whenever the \l MouseRegion is pressed.
 
     \code
-    <Rect width="100" height="100">
-        <x>
-            <NumericAnimation running="{MyMouse.pressed}" from="0" to="100" />
-        </x>
-        <MouseRegion id="MyMouse" />
-    </Rect>
+    Rect {
+        width: 100; height: 100
+        x: NumericAnimation {
+            running: MyMouse.pressed
+            from: 0; to: 100
+        }
+        MouseRegion { id: MyMouse }
+    }
     \endcode
 
     Likewise, the \c running property can be read to determine if the animation
@@ -190,8 +192,8 @@ QmlAbstractAnimation::QmlAbstractAnimation(QmlAbstractAnimationPrivate &dd, QObj
     or not the animation is running.
 
     \code
-    <NumericAnimation id="MyAnimation" />
-    <Text text="{MyAnimation.running?'Animation is running':'Animation is not running'}" />
+    NumericAnimation { id: MyAnimation }
+    Text { text: MyAnimation.running ? "Animation is running" : "Animation is not running" }
     \endcode
 
     Animations can also be started and stopped imperatively from JavaScript
@@ -304,11 +306,9 @@ void QmlAbstractAnimation::setFinishPlaying(bool f)
     In the following example, the rectangle will spin indefinately.
 
     \code
-    <Rect>
-        <rotation>
-            <NumericAnimation running="true" repeat="true" from="0" to="360" />
-        </rotation>
-    </Rect>
+    Rect {
+        rotation: NumericAnimation { running: true; repeat: true; from: 0 to: 360 }
+    }
     \endcode
 */
 bool QmlAbstractAnimation::repeat() const
@@ -435,11 +435,9 @@ void QmlAbstractAnimation::start()
     Normally \c stop() stops the animation immediately, and the animation has
     no further influence on property values.  In this example animation
     \code
-    <Rect>
-        <x>
-            <NumericAnimation from="0" to="100" duration="500" />
-        </x>
-    </Rect>
+    Rect {
+        x: NumericAnimation { from: 0; to: 100; duration: 500 }
+    }
     \endcode
     was stopped at time 250ms, the \c x property will have a value of 50.
 
@@ -475,11 +473,9 @@ void QmlAbstractAnimation::restart()
     Unlike \c stop(), \c complete() immediately fast-forwards the animation to
     its end.  In the following example,
     \code
-    <Rect>
-        <x>
-            <NumericAnimation from="0" to="100" duration="500" />
-        </x>
-    </Rect>
+    Rect {
+        x: NumericAnimation { from: 0; to: 100; duration: 500 }
+    }
     \endcode
     calling \c stop() at time 250ms will result in the \c x property having
     a value of 50, while calling \c complete() will set the \c x property to
@@ -529,11 +525,11 @@ void QmlAbstractAnimation::timelineComplete()
 
     A 500ms animation sequence, with a 100ms pause between two animations:
     \code
-    <SequentialAnimation>
-        <NumericAnimation ... duration="200"/>
-        <PauseAnimation duration="100"/>
-        <NumericAnimation ... duration="200"/>
-    </SequentialAnimation>
+    SequentialAnimation {
+        NumericAnimation { ... duration: 200 }
+        PauseAnimation { duration: 100 }
+        NumericAnimation { ... duration: 200 }
+    }
     \endcode
 */
 /*!
@@ -621,7 +617,7 @@ QAbstractAnimation *QmlPauseAnimation::qtAnimation()
     \brief The ColorAnimation allows you to animate color changes.
 
     \code
-    <ColorAnimation from="white" to="#c0c0c0" duration="100"/>
+    ColorAnimation { from: "white" to: "#c0c0c0"; duration: 100 }
     \endcode
 
     The default property animated is \c color, but like other animations,
@@ -1016,12 +1012,12 @@ QML_DEFINE_TYPE(QmlRunScriptAction, RunScriptAction);
 
     Explicitly set \c theimage.smooth=true during a transition:
     \code
-    <SetPropertyAction target="{theimage}" property="smooth" value="true"/>
+    SetPropertyAction { target: theimage; property: "smooth"; value: true }
     \endcode
 
     Set \c thewebview.url to the value set for the destination state:
     \code
-    <SetPropertyAction target="{thewebview}" property="url"/>
+    SetPropertyAction { target: thewebview; property: "url" }
     \endcode
 
     The SetPropertyAction is immediate -
@@ -1324,7 +1320,7 @@ QML_DEFINE_TYPE(QmlParentChangeAction,ParentChangeAction);
     Animate a set of properties over 200ms, from their values in the start state to
     their values in the end state of the transition:
     \code
-    <NumericAnimation properties="x,y,scale" duration="200"/>
+    NumericAnimation { properties: "x,y,scale"; duration: 200 }
     \endcode
 */
 
@@ -1723,10 +1719,10 @@ QmlList<QmlAbstractAnimation *> *QmlAnimationGroup::animations()
     object will animate from its current x position to 100, and then back to 0.
 
     \code
-    <SequentialAnimation>
-        <NumericAnimation target="{MyItem}" property="x" to="100" />
-        <NumericAnimation target="{MyItem}" property="x" to="0" />
-    <SequentialAnimation>
+    SequentialAnimation {
+        NumericAnimation { target: MyItem; property: "x"; to: 100 }
+        NumericAnimation { target: MyItem; property: "x"; to: 0 }
+    }
     \endcode
 
     \sa ParallelAnimation
@@ -1800,10 +1796,10 @@ QML_DEFINE_TYPE(QmlSequentialAnimation,SequentialAnimation);
     to (100,100) by animating the x and y properties in parallel.
 
     \code
-    <ParallelAnimation>
-        <NumericAnimation target="{MyItem}" property="x" to="100" />
-        <NumericAnimation target="{MyItem}" property="y" to="100" />
-    </ParallelAnimation>
+    ParallelAnimation {
+        NumericAnimation { target: MyItem; property: "x"; to: 100 }
+        NumericAnimation { target: MyItem; property: "y"; to: 100 }
+    }
     \endcode
 
     \sa SequentialAnimation
@@ -1924,7 +1920,7 @@ void QmlVariantAnimationPrivate::convertVariant(QVariant &variant, QVariant::Typ
 
     Animate a size property over 200ms, from its current size to 20-by-20:
     \code
-    <VariantAnimation property="size" to="20x20" duration="200"/>
+    VariantAnimation { property: "size"; to: "20x20"; duration: 200 }
     \endcode
 */
 
diff --git a/src/declarative/util/qmlbehaviour.cpp b/src/declarative/util/qmlbehaviour.cpp
index 58e515f..354c7e3 100644
--- a/src/declarative/util/qmlbehaviour.cpp
+++ b/src/declarative/util/qmlbehaviour.cpp
@@ -105,15 +105,19 @@ public:
     \qmlclass Behaviour QmlBehaviour
     \brief The Behaviour element allows you to specify a default animation for a property change.
 
-    In example below, Rect1 will use a bounce easing curve over 200 millisecond for any changes to its y property:
+    In example below, the rect will use a bounce easing curve over 200 millisecond for any changes to its y property:
     \code
-    <Rect id="Rect1" y="200" width="20" height="20" color="#00ff00">
-        <y>
-            <Behaviour>
-                <NumericAnimation easing="easeOutBounce(amplitude:100)" duration="200" />
-            </Behaviour>
-        </y>
-    </Rect>
+    Rect {
+        width: 20; height: 20
+        color: "#00ff00"
+        y: 200  //initial value
+        y: Behaviour {
+            NumericAnimation {
+                easing: "easeOutBounce(amplitude:100)"
+                duration: 200
+            }
+        }
+    }
     \endcode
 */
 
diff --git a/src/declarative/util/qmlfollow.cpp b/src/declarative/util/qmlfollow.cpp
index 35f3c49..998166a 100644
--- a/src/declarative/util/qmlfollow.cpp
+++ b/src/declarative/util/qmlfollow.cpp
@@ -174,19 +174,29 @@ void QmlFollowPrivate::stop()
 
     In example below, Rect2 will follow Rect1 moving with a velocity of up to 200:
     \code
-    <Rect id="Rect1" y="{200}" width="20" height="20" color="#00ff00">
-        <y>
-            <SequentialAnimation running="true" repeat="true">
-                <NumericAnimation to="{200}" easing="easeOutBounce(amplitude:100)" duration="2000" />
-                <PauseAnimation duration="1000" />
-            </SequentialAnimation>
-        </y>
-    </Rect>
-    <Rect id="Rect2" x="{Rect1.width}" width="20" height="20" color="#ff0000">
-        <y>
-            <Follow source="{Rect1.y}" velocity="200"/>
-        </y>
-    </Rect>
+    Rect {
+        id: Rect1
+        width: 20; height: 20
+        color: "#00ff00"
+        y: 200  //initial value
+        y: SequentialAnimation {
+            running: true
+            repeat: true
+            NumericAnimation {
+                to: 200
+                easing: "easeOutBounce(amplitude:100)"
+                duration: 2000
+            }
+            PauseAnimation { duration: 1000 }
+        }
+    }
+    Rect {
+        id: Rect2
+        x: Rect1.width
+        width: 20; height: 20
+        color: "#ff0000"
+        y: Follow { source: Rect1.y; velocity: 200 }
+    }
     \endcode
 */
 
diff --git a/src/declarative/util/qmlsetproperties.cpp b/src/declarative/util/qmlsetproperties.cpp
index 108f2b2..9b5a58e 100644
--- a/src/declarative/util/qmlsetproperties.cpp
+++ b/src/declarative/util/qmlsetproperties.cpp
@@ -108,7 +108,12 @@ void QmlSetPropertiesMetaObject::propertyWrite(int id)
     you normally would specify them for the actual item:
 
     \code
-    <SetProperties target="{myRect}" x="52" y="300" width="48"/>
+    SetProperties {
+        target: myRect
+        x: 52
+        y: 300
+        width: 48
+    }
     \endcode
 
     \c target is a property of \c SetProperties, so if the property you want to change
@@ -129,7 +134,12 @@ void QmlSetPropertiesMetaObject::propertyWrite(int id)
     you normally would specify them for the actual item:
 
     \code
-    <SetProperties target="{myRect}" x="52" y="300" width="48"/>
+    SetProperties {
+        target: myRect
+        x: 52
+        y: 300
+        width: 48
+    }
     \endcode
 
     \c target is a property of \c SetProperties, so if the property you want to change
diff --git a/src/declarative/util/qmlstateoperations.cpp b/src/declarative/util/qmlstateoperations.cpp
index 755befe..01f9cdd 100644
--- a/src/declarative/util/qmlstateoperations.cpp
+++ b/src/declarative/util/qmlstateoperations.cpp
@@ -212,17 +212,36 @@ QmlRunScript::ActionList QmlRunScript::actions()
     the current state:
 
     \code
-    <Rect id="myrect" width="50" height="50" color="red"/>
-
-    <states>
-        <State name="Position1">
-            <SetProperty target="{myrect}" property="x" value="150"/>
-            <SetProperty target="{myrect}" property="y" value="50"/>
-        </State>
-        <State name="Position2">
-            <SetProperty target="{myrect}" property="y" value="200"/>
-        </State>
-    </states>
+    Rect {
+        id: myrect
+        width: 50
+        height: 50
+        color: "red"
+    }
+
+    states: [
+        State {
+            name: "Position1"
+            SetProperty {
+                target: myrect
+                property: "x"
+                value: 150
+            }
+            SetProperty {
+                target: myrect
+                property: "y"
+                value: 50
+            }
+        },
+        State {
+            name: "Position2"
+            SetProperty {
+                target: myrect
+                property: "y"
+                value: 200
+            }
+        }
+    ]
     \endcode
 
     \sa SetProperties
diff --git a/src/declarative/util/qmltransition.cpp b/src/declarative/util/qmltransition.cpp
index a515f58..47e70ad 100644
--- a/src/declarative/util/qmltransition.cpp
+++ b/src/declarative/util/qmltransition.cpp
@@ -188,9 +188,11 @@ void QmlTransition::prepare(QmlStateOperation::ActionList &actions,
     be applied. By default fromState and toState are both "*" (any state). In the following example,
     the transition is applied when changing from state1 to state2.
     \code
-    <Transition fromState="state1" toState="state2">
+    Transition {
+        fromState: "state1"
+        toState: "state2"
         ...
-    </Transition>
+    }
     \endcode
 */