Improve examples documentation

Add more details and snippets to the examples for text and
imageelements.

Change-Id: If0b20a0dca1778a8a4cc0ebf1e43017bdce839ec
Reviewed-by: Alan Alpert <alan.alpert@nokia.com>

4 files changed, 29 insertions, 5 deletions

diff --git a/examples/quick/imageelements/animatedsprite.qml b/examples/quick/imageelements/animatedsprite.qml
index 337456f785..863a1f67b1 100644
--- a/examples/quick/imageelements/animatedsprite.qml
+++ b/examples/quick/imageelements/animatedsprite.qml
@@ -46,6 +46,8 @@ Item {
         anchors.fill: parent
         color: "white"
     }
+
+//! [sprite]
     AnimatedSprite {
         id: sprite
         width: 170
@@ -58,6 +60,8 @@ Item {
         frameHeight: 170
         loops: 3
     }
+//! [sprite]
+
     MouseArea {
         anchors.fill: parent
         acceptedButtons: Qt.LeftButton | Qt.RightButton
diff --git a/examples/quick/imageelements/content/ShadowRectangle.qml b/examples/quick/imageelements/content/ShadowRectangle.qml
index e6fd13bb26..4ce8915b01 100644
--- a/examples/quick/imageelements/content/ShadowRectangle.qml
+++ b/examples/quick/imageelements/content/ShadowRectangle.qml
@@ -43,12 +43,14 @@ import QtQuick 2.0
 Item {
     property alias color : rectangle.color
 
+//! [shadow]
     BorderImage {
         anchors.fill: rectangle
         anchors { leftMargin: -6; topMargin: -6; rightMargin: -8; bottomMargin: -8 }
         border { left: 10; top: 10; right: 10; bottom: 10 }
         source: "shadow.png"; smooth: true
     }
+//! [shadow]
 
     Rectangle { id: rectangle; anchors.fill: parent }
 }
diff --git a/examples/quick/imageelements/imageelements.qml b/examples/quick/imageelements/imageelements.qml
index adfa43a659..2de56f93c7 100644
--- a/examples/quick/imageelements/imageelements.qml
+++ b/examples/quick/imageelements/imageelements.qml
@@ -49,15 +49,29 @@ import "../../shared"
 
     This is a collection of small QML examples relating to image elements.
 
-    BorderImage shows off the various scaling modes of the BorderImage item.
+    'BorderImage' shows off the various scaling modes of the BorderImage item
+    by setting its horizontalTileMode and verticalTileMode properties.
 
-    Image shows off the various tiling modes of the Image item.
+    'Image' shows off the various fill modes of the Image item.
 
-    Shadows shows how to create a drop shadow for a rectangle using a BorderImage.
+    'Shadows' shows how to create a drop shadow effect for a rectangular item
+    using a BorderImage:
+    \snippet examples/quick/imageelements/content/ShadowRectangle.qml delegate
 
-    AnimatedSprite shows a simple use for the AnimatedSprite element.
+    'AnimatedSprite' shows how to display a simple animation using an
+    AnimatedSprite element:
+    \snippet examples/quick/imageelements/animatedsprite.qml sprite
+    The sprite animation will loop 3 times.
 
-    SpriteSequence demonstrates using the SpriteSequence element to draw an animated and slightly interactive bear.
+    'SpriteSequence' demonstrates using a sprite sequence to draw an animated
+    and interactive bear.
+    The SpriteSequence defines 5 different sprites. The bear is initially in
+    a 'still' state:
+    \snippet examples/quick/imageelements/spritesequence.qml still
+    When the scene is clicked, an animation sets the sprite sequence to the
+    'falling' states and animates the bear's y property.
+    \snippet examples/quick/imageelements/spritesequence.qml animation
+    At the end of the amimation the bear is set back to its initial state.
 */
 
 Item {
diff --git a/examples/quick/imageelements/spritesequence.qml b/examples/quick/imageelements/spritesequence.qml
index 01f34e5c7a..98c58ee428 100644
--- a/examples/quick/imageelements/spritesequence.qml
+++ b/examples/quick/imageelements/spritesequence.qml
@@ -46,6 +46,7 @@ Item {
         onClicked: anim.start();
         anchors.fill: parent
     }
+//! [animation]
     SequentialAnimation {
         id: anim
         ScriptAction { script: image.goalSprite = "falling"; }
@@ -53,6 +54,7 @@ Item {
         ScriptAction { script: {image.goalSprite = ""; image.jumpTo("still");} }
         PropertyAction { target: image; property: "y"; value: 0 }
     }
+//! [animation]
     SpriteSequence {
         id: image
         width: 256
@@ -60,6 +62,7 @@ Item {
         anchors.horizontalCenter: parent.horizontalCenter
         interpolate: false
         goalSprite: ""
+//! [still]
         Sprite{
             name: "still"
             source: "content/BearSheet.png"
@@ -69,6 +72,7 @@ Item {
             frameDuration: 100
             to: {"still":1, "blink":0.1, "floating":0}
         }
+//! [still]
         Sprite{
             name: "blink"
             source: "content/BearSheet.png"