Flesh out examples documentation

Change-Id: I4f7a1ce6b9957f43e442947dc6b319e919ec9cf7
Reviewed-by: Yann Bodson <yann.bodson@nokia.com>

10 files changed, 36 insertions, 1 deletions

diff --git a/examples/quick/animation/animation.qml b/examples/quick/animation/animation.qml
index f478cb713b..a6735efcc2 100644
--- a/examples/quick/animation/animation.qml
+++ b/examples/quick/animation/animation.qml
@@ -51,24 +51,39 @@ import "../../shared" as Examples
     a small QML file emphasizing a particular element or feature.
 
     ColorAnimation demonstrates using a color animation to fade a sky from day to night.
+    \snippet examples/quick/animation/basics/color-animation.qml 0
 
     PropertyAnimation demonstrates using a number animation to bounce a circle up and down.
+    \snippet examples/quick/animation/basics/property-animation.qml 0
 
     Behaviors demonstrates using behaviors to animate moving a rectangle to whereever you click.
+    \snippet examples/quick/animation/behaviors/behavior-example.qml 0
 
     Wiggly Text demonstrates using more complex behaviors to animate and wiggle some text around as you drag it.
+    It does this by assigning a complex binding to each letter:
+    \snippet examples/quick/animation/behaviors/wigglytext.qml 0
+    Then, it uses behaviors to animate the movement on each letter:
+    \snippet examples/quick/animation/behaviors/wigglytext.qml 1
 
     Tv Tennis demonstrates using more complex behaviors to get paddles following a ball for an infinite game.
+    Again a binding which depends on other values is applied to the position and a behavior provided the animation.
+    \snippet examples/quick/animation/behaviors/tvtennis.qml 0
 
     Easing Curves shows off all the easing curves available in Qt Quick animations.
 
     States demonstrates how the properties of an item can vary between states.
+    It defines several states:
+    \snippet examples/quick/animation/states/states.qml 0
+    Note that there is also the implicit 'base state' from properties set directly on elements.
 
-    Transitions takes the States example and animates the property changes.
+    Transitions takes the States example and animates the property changes by setting transitions:
+    \snippet examples/quick/animation/states/transitions.qml 0
 
     PathAnimation animates an image along a beizer curve using a PathAnimation.
+    \snippet examples/quick/animation/pathanimation/pathanimation.qml 0
 
     PathInterpolator animates an image along the same beizer curve, using a PathInterpolator instead.
+    \snippet examples/quick/animation/pathinterpolator/pathinterpolator.qml 0
 */
 
 Item {
diff --git a/examples/quick/animation/basics/color-animation.qml b/examples/quick/animation/basics/color-animation.qml
index f1bf40c40b..85dca2d4fa 100644
--- a/examples/quick/animation/basics/color-animation.qml
+++ b/examples/quick/animation/basics/color-animation.qml
@@ -48,6 +48,7 @@ Item {
     // Let's draw the sky...
     Rectangle {
         anchors { left: parent.left; top: parent.top; right: parent.right; bottom: parent.verticalCenter }
+        //! [0]
         gradient: Gradient {
             GradientStop {
                 position: 0.0
@@ -66,6 +67,7 @@ Item {
                 }
             }
         }
+        //! [0]
     }
 
     // the sun, moon, and stars
diff --git a/examples/quick/animation/basics/property-animation.qml b/examples/quick/animation/basics/property-animation.qml
index 4a4d3e3b2a..2752b32816 100644
--- a/examples/quick/animation/basics/property-animation.qml
+++ b/examples/quick/animation/basics/property-animation.qml
@@ -81,6 +81,7 @@ Item {
         y: minHeight
         source: "images/face-smile.png"
 
+        //! [0]
         // Animate the y property. Setting loops to Animation.Infinite makes the
         // animation repeat indefinitely, otherwise it would only run once.
         SequentialAnimation on y {
@@ -101,5 +102,6 @@ Item {
             // Then pause for 500ms
             PauseAnimation { duration: 500 }
         }
+        //! [0]
     }
 }
diff --git a/examples/quick/animation/behaviors/behavior-example.qml b/examples/quick/animation/behaviors/behavior-example.qml
index a88d7c8c7b..e77c3537a0 100644
--- a/examples/quick/animation/behaviors/behavior-example.qml
+++ b/examples/quick/animation/behaviors/behavior-example.qml
@@ -92,10 +92,12 @@ Rectangle {
                 NumberAnimation { easing.type: Easing.OutElastic; easing.amplitude: 3.0; easing.period: 2.0; duration: 300 }
             }
 
+            //! [0]
             // Set an 'elastic' behavior on the focusRect's y property.
             Behavior on y {
                 NumberAnimation { easing.type: Easing.OutElastic; easing.amplitude: 3.0; easing.period: 2.0; duration: 300 }
             }
+            //! [0]
 
             Text {
                 id: focusText
diff --git a/examples/quick/animation/behaviors/tvtennis.qml b/examples/quick/animation/behaviors/tvtennis.qml
index 108f19a11d..667b33fb81 100644
--- a/examples/quick/animation/behaviors/tvtennis.qml
+++ b/examples/quick/animation/behaviors/tvtennis.qml
@@ -86,8 +86,10 @@ Rectangle {
         id: leftBat
         color: "Lime"
         x: 2; width: 20; height: 90
+        // ![0]
         y: ball.direction == 'left' ? ball.y - 45 : page.height/2 -45;
         Behavior on y { SpringAnimation{ velocity: 300 } }
+        // ![0]
     }
     Rectangle {
         id: rightBat
diff --git a/examples/quick/animation/behaviors/wigglytext.qml b/examples/quick/animation/behaviors/wigglytext.qml
index 4bb94da100..67e6da3fbb 100644
--- a/examples/quick/animation/behaviors/wigglytext.qml
+++ b/examples/quick/animation/behaviors/wigglytext.qml
@@ -86,8 +86,10 @@ Rectangle {
             id: letter
             property variant follow
 
+//! [0]
             x: follow ? follow.x + follow.width : container.width / 6
             y: follow ? follow.y : container.height / 2
+//! [0]
 
             font.pixelSize: 40; font.bold: true
             color: "#999999"; styleColor: "#222222"; style: Text.Raised
@@ -99,8 +101,10 @@ Rectangle {
                 onReleased: letter.color = "#999999"
             }
 
+//! [1]
             Behavior on x { enabled: container.animated; SpringAnimation { spring: 3; damping: 0.3; mass: 1.0 } }
             Behavior on y { enabled: container.animated; SpringAnimation { spring: 3; damping: 0.3; mass: 1.0 } }
+//! [1]
         }
     }
 
diff --git a/examples/quick/animation/pathanimation/pathanimation.qml b/examples/quick/animation/pathanimation/pathanimation.qml
index f995218c6c..06c0b86970 100644
--- a/examples/quick/animation/pathanimation/pathanimation.qml
+++ b/examples/quick/animation/pathanimation/pathanimation.qml
@@ -64,6 +64,7 @@ Rectangle {
         loops: -1
 
         PauseAnimation { duration: 1000 }
+        //! [0]
         PathAnimation {
             id: pathAnim
 
@@ -87,6 +88,7 @@ Rectangle {
                 onChanged: canvas.requestPaint()
             }
         }
+        //! [0]
     }
 
     Rectangle {
diff --git a/examples/quick/animation/pathinterpolator/pathinterpolator.qml b/examples/quick/animation/pathinterpolator/pathinterpolator.qml
index 5a137c732d..6813966015 100644
--- a/examples/quick/animation/pathinterpolator/pathinterpolator.qml
+++ b/examples/quick/animation/pathinterpolator/pathinterpolator.qml
@@ -59,6 +59,7 @@ Rectangle {
         }
     }
 
+    //! [0]
     PathInterpolator {
         id: motionPath
 
@@ -89,6 +90,7 @@ Rectangle {
             }
         }
     }
+    //! [0]
 
     Rectangle {
         id: box
diff --git a/examples/quick/animation/states/states.qml b/examples/quick/animation/states/states.qml
index 7ca56a9295..b92ba1b313 100644
--- a/examples/quick/animation/states/states.qml
+++ b/examples/quick/animation/states/states.qml
@@ -86,6 +86,7 @@ Rectangle {
     }
 
     states: [
+        // ![0]
         // In state 'middleRight', move the image to middleRightRect
         State {
             name: "middleRight"
@@ -97,5 +98,6 @@ Rectangle {
             name: "bottomLeft"
             PropertyChanges { target: userIcon; x: bottomLeftRect.x; y: bottomLeftRect.y  }
         }
+        // ![0]
     ]
 }
diff --git a/examples/quick/animation/states/transitions.qml b/examples/quick/animation/states/transitions.qml
index d57924d6d2..bfc4057b97 100644
--- a/examples/quick/animation/states/transitions.qml
+++ b/examples/quick/animation/states/transitions.qml
@@ -105,6 +105,7 @@ Rectangle {
         }
     ]
 
+    // ![0]
     // Transitions define how the properties change when the item moves between each state
     transitions: [
 
@@ -126,5 +127,6 @@ Rectangle {
         Transition {
             NumberAnimation { properties: "x,y"; duration: 200 }
         }
+    // ![0]
     ]
 }