Improve example documentation

Add more detail and snippets to the examples for shadereffects and
positioners.

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

4 files changed, 37 insertions, 1 deletions

diff --git a/examples/quick/positioners/positioners-attachedproperties.qml b/examples/quick/positioners/positioners-attachedproperties.qml
index af1124368d..4b49165a84 100644
--- a/examples/quick/positioners/positioners-attachedproperties.qml
+++ b/examples/quick/positioners/positioners-attachedproperties.qml
@@ -48,6 +48,7 @@ Rectangle {
   Column {
     id: column
 
+    //! [0]
     Rectangle {
       id: red
       color: "red"
@@ -69,6 +70,7 @@ Rectangle {
         onClicked: column.showInfo(red.Positioner)
       }
     }
+    //! [0]
 
     Rectangle {
       id: green
diff --git a/examples/quick/positioners/positioners-transitions.qml b/examples/quick/positioners/positioners-transitions.qml
index f1b61c1740..e573c94343 100644
--- a/examples/quick/positioners/positioners-transitions.qml
+++ b/examples/quick/positioners/positioners-transitions.qml
@@ -191,13 +191,17 @@ Rectangle {
         id: layout4
         x: 120; y: 160; width: 150
 
+        //! [move]
         move: Transition {
             NumberAnimation { properties: "x,y"; easing.type: Easing.OutBounce }
         }
+        //! [move]
 
+        //! [add]
         add: Transition {
             NumberAnimation { properties: "x,y"; easing.type: Easing.OutBounce }
         }
+        //! [add]
 
         Rectangle { color: "red"; width: 50; height: 50; border.color: "black"; radius: 15 }
 
diff --git a/examples/quick/positioners/positioners.qml b/examples/quick/positioners/positioners.qml
index 373fa28cae..34caea327c 100644
--- a/examples/quick/positioners/positioners.qml
+++ b/examples/quick/positioners/positioners.qml
@@ -51,8 +51,15 @@ import "../../shared" as Examples
     a small QML file emphasizing a particular element or feature.
 
     Transitions shows animated transistions when showing or hiding items in a positioner.
+    It consists of a scene populated with items in a variety of positioners: Column, Row, Grid and Flow.
+    Each positioner has animations described as Transitions.
+    \snippet examples/quick/positioners/positioners-transitions.qml move
+    The move transition specifies how items inside the positioner will animate when they are displaced by items appearing or disappearing.
+    \snippet examples/quick/positioners/positioners-transitions.qml add
+    The add transition specifies how items will appear when they are added to the positioner.
 
     Attached Properties show using the attached property to determine where in a positioner an item is.
+    \snippet examples/quick/positioners/positioners-attachedproperties.qml 0
 */
 
 Item {
diff --git a/examples/quick/shadereffects/shadereffects.qml b/examples/quick/shadereffects/shadereffects.qml
index 4b3bb2a5e2..de221e95cb 100644
--- a/examples/quick/shadereffects/shadereffects.qml
+++ b/examples/quick/shadereffects/shadereffects.qml
@@ -54,6 +54,21 @@ Rectangle {
 
     This example demonstrates a couple of visual effects that you can perform
     with shaders in QtQuick 2.0
+
+    ShaderEffects typically operate on other elements, using a ShaderEffectSource
+    \snippet examples/quick/shadereffects/shadereffects.qml source
+    In the above snippet, theItem is the id of a complex QML element in the file.
+
+    ShaderEffects can use this ShaderEffectSource as a texture in their fragment shader.
+    \snippet examples/quick/shadereffects/shadereffects.qml fragment
+
+    You can use any custom property on the ShaderEffect in your shader. This makes
+    animated shader code very easy.
+    \snippet examples/quick/shadereffects/shadereffects.qml properties
+
+    ShaderEffects can also have a custom vertext shader. Setting the mesh property on ShaderEffect
+    provides more vertices for you to manipulate, enabling many effects.
+    \snippet examples/quick/shadereffects/shadereffects.qml vertex
 */
     property color col: "lightsteelblue"
     gradient: Gradient {
@@ -63,11 +78,13 @@ Rectangle {
         GradientStop { position: 1.0; color: Qt.tint(root.col, "#20000000") }
     }
 
+    //! [source]
     ShaderEffectSource {
         id: theSource
         sourceItem: theItem
         smooth: true
     }
+    //! [source]
 
     function saturate(x) {
         return Math.min(Math.max(x, 0), 1)
@@ -127,6 +144,7 @@ Rectangle {
             property real frequency: 20
             property real time: 0
             NumberAnimation on time { loops: Animation.Infinite; from: 0; to: Math.PI * 2; duration: 600 }
+            //! [fragment]
             fragmentShader:
                 "uniform lowp float qt_Opacity;" +
                 "uniform highp float amplitude;" +
@@ -138,6 +156,7 @@ Rectangle {
                 "    highp vec2 p = sin(time + frequency * qt_TexCoord0);" +
                 "    gl_FragColor = texture2D(source, qt_TexCoord0 + amplitude * vec2(p.y, -p.x)) * qt_Opacity;" +
                 "}"
+            //! [fragment]
             Slider {
                 id: wobbleSlider
                 anchors.left: parent.left
@@ -265,7 +284,7 @@ Rectangle {
         ShaderEffect {
             width: 160
             height: 160
-            mesh: Qt.size(10, 10)
+            //! [properties]
             property variant source: theSource
             property real bend: 0
             property real minimize: 0
@@ -285,6 +304,9 @@ Rectangle {
                 NumberAnimation { to: 0; duration: 700; easing.type: Easing.InOutSine }
                 PauseAnimation { duration: 1300 }
             }
+            //! [properties]
+            //! [vertex]
+            mesh: Qt.size(10, 10)
             vertexShader: "
                 uniform highp mat4 qt_Matrix;
                 uniform highp float bend;
@@ -304,6 +326,7 @@ Rectangle {
                     pos.x = mix(qt_Vertex.x, side * width, t * bend);
                     gl_Position = qt_Matrix * pos;
                 }"
+            //! [vertex]
             Slider {
                 id: genieSlider
                 anchors.left: parent.left