Move some example code into snippets/ and add other doc fixes

5 files changed, 241 insertions, 2 deletions

diff --git a/doc/src/snippets/declarative/anchorchanges.qml b/doc/src/snippets/declarative/anchorchanges.qml
new file mode 100644
index 0000000..6c0a0ad
--- /dev/null
+++ b/doc/src/snippets/declarative/anchorchanges.qml
@@ -0,0 +1,28 @@
+//![0]
+import Qt 4.7
+
+Item {
+    id: window
+    width: 200; height: 200
+
+    Rectangle { id: myRect; width: 100; height: 100; color: "red" }
+
+    states: State {
+        name: "reanchored"
+
+        AnchorChanges {
+            target: myRect
+            anchors.top: window.top
+            anchors.bottom: window.bottom
+        }
+        PropertyChanges {
+            target: myRect
+            anchors.topMargin: 3
+            anchors.bottomMargin: 3
+        }
+    }
+
+    MouseArea { anchors.fill: parent; onClicked: window.state = "reanchored" }
+}
+//![0]
+
diff --git a/doc/src/snippets/declarative/animation.qml b/doc/src/snippets/declarative/animation.qml
new file mode 100644
index 0000000..f5c6bf6
--- /dev/null
+++ b/doc/src/snippets/declarative/animation.qml
@@ -0,0 +1,141 @@
+import Qt 4.7
+
+Row {
+
+//![property-anim-1]
+Rectangle {
+    id: rect
+    width: 120; height: 200
+
+    Image {
+        id: img
+        source: "pics/qt.png"
+        x: 60 - img.width/2
+        y: 0
+
+        SequentialAnimation on y {
+            loops: Animation.Infinite
+            NumberAnimation { to: 200 - img.height; easing.type: Easing.OutBounce; duration: 2000 }
+            PauseAnimation { duration: 1000 }
+            NumberAnimation { to: 0; easing.type: Easing.OutQuad; duration: 1000 }
+        }
+    }
+}
+//![property-anim-1]
+
+//![property-anim-2]
+Rectangle {
+    width: 200; height: 200
+
+    Rectangle {
+        color: "red"
+        width: 50; height: 50
+        NumberAnimation on x { to: 50 }
+    }
+}
+//![property-anim-2]
+
+
+Item {
+//![property-anim-3]
+PropertyAnimation {
+    id: animation
+    target: image
+    property: "scale"
+    from: 1; to: 0.5
+}
+
+Image {
+    id: image
+    source: "pics/qt.png"
+    MouseArea {
+        anchors.fill: parent
+        onPressed: animation.start()
+    }
+}
+//![property-anim-3]
+}
+
+
+//![transitions-1]
+transitions: [
+    Transition {
+        NumberAnimation {
+            properties: "x,y"
+            easing.type: Easing.OutBounce
+            duration: 200
+        }
+    }
+]
+//![transitions-1]
+
+
+//![transitions-2]
+Transition {
+    from: "*"
+    to: "MyState"
+    reversible: true
+
+    SequentialAnimation {
+        NumberAnimation {
+            duration: 1000
+            easing.type: Easing.OutBounce
+
+            // animate myItem's x and y if they have changed in the state
+            target: myItem
+            properties: "x,y"
+        }
+
+        NumberAnimation {
+            duration: 1000
+
+            // animate myItem2's y to 200, regardless of what happens in the state
+            target: myItem2
+            property: "y"
+            to: 200
+        }
+    }
+}
+//![transitions-2]
+
+
+//![transitions-3]
+Transition {
+    from: "*"
+    to: "MyState"
+    reversible: true
+
+    SequentialAnimation {
+        ColorAnimation { duration: 1000 }
+        PauseAnimation { duration: 1000 }
+
+        ParallelAnimation {
+            NumberAnimation {
+                duration: 1000
+                easing.type: Easing.OutBounce
+                targets: box1
+                properties: "x,y"
+            }
+            NumberAnimation {
+                duration: 1000
+                targets: box2
+                properties: "x,y"
+            }
+        }
+    }
+}
+//![transitions-3]
+
+//![behavior]
+Rectangle {
+    id: redRect
+    color: "red"
+    width: 100; height: 100
+
+    Behavior on x { 
+        NumberAnimation { duration: 300; easing.type: Easing.InOutQuad }
+    }
+}
+//![behavior]
+
+}
diff --git a/doc/src/snippets/declarative/createQmlObject.qml b/doc/src/snippets/declarative/createQmlObject.qml
index f2ac6e6..f274e40 100644
--- a/doc/src/snippets/declarative/createQmlObject.qml
+++ b/doc/src/snippets/declarative/createQmlObject.qml
@@ -42,7 +42,7 @@
 import Qt 4.7
 
 Rectangle {
-    id: targetItem
+    id: parentItem
     property QtObject newObject
 
     width: 100
@@ -51,7 +51,7 @@ Rectangle {
     function createIt() {
 //![0]
 newObject = Qt.createQmlObject('import Qt 4.7; Rectangle {color: "red"; width: 20; height: 20}',
-    targetItem, "dynamicSnippet1");
+    parentItem, "dynamicSnippet1");
 //![0]
     }
 
diff --git a/doc/src/snippets/declarative/state.qml b/doc/src/snippets/declarative/state.qml
new file mode 100644
index 0000000..0954298
--- /dev/null
+++ b/doc/src/snippets/declarative/state.qml
@@ -0,0 +1,29 @@
+//![0]
+import Qt 4.7
+
+Rectangle {
+    id: myRect
+    width: 100; height: 100
+    color: "black"
+
+    states: [
+        State {
+            name: "clicked"
+            PropertyChanges {
+                target: myRect
+                color: "red"
+            }
+        }
+    ]
+
+    MouseArea {
+        anchors.fill: parent
+        onClicked: {
+            if (myRect.state == "")     // i.e. the default state
+                myRect.state = "clicked";
+            else
+                myRect.state = "";
+        }
+    }
+}
+//![0]
diff --git a/doc/src/snippets/declarative/states.qml b/doc/src/snippets/declarative/states.qml
new file mode 100644
index 0000000..7bfb5bd
--- /dev/null
+++ b/doc/src/snippets/declarative/states.qml
@@ -0,0 +1,41 @@
+//![0]
+import Qt 4.7
+
+Item {
+    id: myItem
+    width: 200; height: 200
+
+    Rectangle {
+        id: myRect
+        width: 100; height: 100
+        color: "red"
+    }
+
+    states: [
+        State {
+            name: "moved"
+            PropertyChanges {
+                target: myRect
+                x: 50
+                y: 50
+            }
+        }
+    ]
+
+    MouseArea {
+        anchors.fill: parent
+        onClicked: myItem.state = 'moved'
+    }
+//![0]
+
+//![transitions]
+transitions: [
+    Transition {
+        NumberAnimation { properties: "x,y"; duration: 500 }
+    }
+]
+//![transitions]
+
+//![1]
+}
+//![1]