Doc: add example code to the tutorial

Task-number: QTCREATORBUG-6540
Change-Id: I4b5f7e73ee49e03621a9461d037e13c251959e84
Reviewed-by: Thomas Hartmann <Thomas.Hartmann@nokia.com>

doc/examples/transitions/qml/Transitions/main.qml

@@ -1,3 +1,9 @@
+//! [2]
+
+//! [1]
+
+//! [0]
+
 import QtQuick 1.0
 
 Rectangle {
@@ -32,6 +38,7 @@ Rectangle {
             onClicked: page.state = ' '
             }
         }
+//! [0]
 
         Rectangle {
             id: middleRightRect
@@ -71,6 +78,8 @@ Rectangle {
             }
         }
 
+//! [1]
+
         states: [
              State {
                  name: "State1"
@@ -116,3 +125,5 @@ Rectangle {
              }
         ]
 }
+
+//! [2]

doc/src/qtquick/qtquick-app-tutorial.qdoc

@@ -205,6 +205,10 @@
 
         \endlist
 
+            The qml.main file should now look as follows:
+
+            \snippet examples/transitions/qml/Transitions/main.qml 0
+
         \o  In the \gui Navigator pane, copy topLeftRect (by pressing
             \key {Ctrl+C}) and paste it to the canvas twice (by pressing
             \key {Ctrl+V}). \QC renames the new instances of the element
@@ -253,6 +257,10 @@
 
                 You will create State2 later.
 
+            The qml.main file should now look as follows:
+
+            \snippet examples/transitions/qml/Transitions/main.qml 1
+
         \endlist
 
         \o  Press \key {Ctrl+S} to save the changes.
@@ -348,4 +356,10 @@
 
     Click the rectangles to view the animated transitions.
 
+    \section1 Example Code
+
+    When you have completed the steps, the main.qml file should look as follows:
+
+    \snippet examples/transitions/qml/Transitions/main.qml 2
+
 */