Doc: Some editing and tidying up.

1 files changed, 6 insertions, 48 deletions

diff --git a/doc/src/getting-started/gettingstartedqml.qdoc b/doc/src/getting-started/gettingstartedqml.qdoc
index 6cef316570..1003eee151 100644
--- a/doc/src/getting-started/gettingstartedqml.qdoc
+++ b/doc/src/getting-started/gettingstartedqml.qdoc
@@ -71,20 +71,7 @@
     In QML, the basic visual item is the \l {Rectangle}{Rectangle} element. The 
     \c Rectangle element has properties to control the element's appearance and location. 
 
-    \code
-        import Qt 4.7
-        Rectangle {
-            id: simplebutton
-            color: "grey"
-            width: 150; height: 75
-
-            Text{
-                id: buttonLabel
-                anchors.centerIn: parent
-                text: "button label"    
-            }
-        }
-    \endcode
+    \snippet examples/tutorials/gettingStarted/gsQml/part0/Button.qml document
 
     First, the \c { import Qt 4.7 } allows the qmlviewer tool to import the QML elements
     we will later use. This line must exist for every QML file. Notice that the version
@@ -422,7 +409,7 @@
             focus: true
 
             wrapMode: TextEdit.Wrap
-        
+
             onCursorRectangleChanged: flickArea.ensureVisible(cursorRectangle)
         }
     \endcode
@@ -446,7 +433,7 @@
                 contentY = r.y+r.height-height;
         }
     \endcode
-        
+
     \section2 Combining Components for the Text Editor
 
     We are now ready to create the layout of our text editor using QML. The text
@@ -464,7 +451,7 @@
 
             //the screen is partitioned into the MenuBar and TextArea. 1/3 of the screen is assigned to the MenuBar
             property int partition: height/3
-            
+
             MenuBar{
                 id:menuBar
                 height: partition
@@ -543,27 +530,7 @@
     the \c drawer, and the drawer's icon will undergo property changes to meet the
     current state.
 
-    \code
-
-        states:[
-            State{
-                name: "DRAWER_OPEN"
-                PropertyChanges { target: menuBar; y:0}
-                PropertyChanges { target: textArea; y: partition + drawer.height}
-                PropertyChanges { target: drawer; y: partition}
-                PropertyChanges { target: arrowIcon; rotation: 180} 
-            },
-            State{
-                name: "DRAWER_CLOSED"
-                PropertyChanges { target: menuBar; y:-partition}
-                PropertyChanges { target: textArea; y: drawer.height; height: screen.height - drawer.height}
-                PropertyChanges { target: drawer; y: 0}
-                PropertyChanges { target: arrowIcon; rotation: 0} 
-            }
-
-        ]
-
-    \endcode
+    \snippet examples/tutorial/gettingStarted/gsQml/texteditor.qml states
 
     State changes are abrupt and needs smoother transitions. Transitions between states
     are defined using the \l {Transition}{Transition} element, which can then bind to
@@ -582,16 +549,7 @@
     the end of the animation. Pleae read \l {qdeclarativeanimation.html}{QML's Animation}
     article.
 
-    \code
-        transitions: [
-            Transition{
-                to: "*"
-                NumberAnimation { target: textArea; properties: "y, height"; duration: 100; easing.type: Easing.OutQuint }
-                NumberAnimation { target: menuBar; properties: "y"; duration: 100;easing.type: Easing.OutQuint }
-                NumberAnimation { target: drawer; properties: "y"; duration: 100;easing.type: Easing.OutQuint }
-            }
-        ]
-    \endcode
+    \snippet examples/tutorials/gettingStarted/gsQml/texteditor.qml transitions
 
     Another way of animating property changes is by declaring a \l {Behavior}{Behavior}
     element. A transition only works during state changes and \c Behavior can set an