Doc: add source for Transitions example

Change-Id: I20e477be4cad782dac3946f18c3067a45579388e
Reviewed-on: http://codereview.qt.nokia.com/3816

Reviewed-by: Qt Sanity Bot <qt_sanity_bot@ovi.com>
Reviewed-by: Kai Koehne <kai.koehne@nokia.com>

doc/examples/transitions/Transitions.pro

+# Add more folders to ship with the application, here
+folder_01.source = qml/Transitions
+folder_01.target = qml
+DEPLOYMENTFOLDERS = folder_01
+
+# Additional import path used to resolve QML modules in Creator's code model
+QML_IMPORT_PATH =
+
+symbian:TARGET.UID3 = 0xE506784B
+
+# Smart Installer package's UID
+# This UID is from the protected range and therefore the package will
+# fail to install if self-signed. By default qmake uses the unprotected
+# range value if unprotected UID is defined for the application and
+# 0x2002CCCF value if protected UID is given to the application
+#symbian:DEPLOYMENT.installer_header = 0x2002CCCF
+
+# Allow network access on Symbian
+symbian:TARGET.CAPABILITY += NetworkServices
+
+# If your application uses the Qt Mobility libraries, uncomment the following
+# lines and add the respective components to the MOBILITY variable.
+# CONFIG += mobility
+# MOBILITY +=
+
+# Add dependency to symbian components
+# CONFIG += qtquickcomponents
+
+# The .cpp file which was generated for your project. Feel free to hack it.
+SOURCES += main.cpp
+
+# Please do not modify the following two lines. Required for deployment.
+include(qmlapplicationviewer/qmlapplicationviewer.pri)
+qtcAddDeployment()

doc/examples/transitions/main.cpp

+#include <QtGui/QApplication>
+#include "qmlapplicationviewer.h"
+
+int main(int argc, char *argv[])
+{
+    QApplication app(argc, argv);
+
+    QmlApplicationViewer viewer;
+    viewer.setOrientation(QmlApplicationViewer::ScreenOrientationAuto);
+    viewer.setMainQmlFile(QLatin1String("qml/Transitions/main.qml"));
+    viewer.showExpanded();
+
+    return app.exec();
+}

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

+import QtQuick 1.0
+
+Rectangle {
+    id: page
+    width: 360
+    height: 360
+    color: "#343434"
+
+    Image {
+        id: icon
+        x: 10
+        y: 20
+        source: "states.png"
+    }
+
+    Rectangle {
+        id: topLeftRect
+        y: 20
+        width: 64
+        height: 64
+        color: "#00000000"
+        radius: 6
+        anchors.left: parent.left
+        anchors.leftMargin: 10
+        anchors.top: parent.top
+        anchors.topMargin: 20
+        border.color: "#808080"
+
+        MouseArea {
+            id: mousearea1
+            anchors.fill: parent
+            onClicked: page.state = ' '
+            }
+        }
+
+        Rectangle {
+            id: middleRightRect
+            x: 13
+            y: 16
+            width: 64
+            height: 64
+            color: "#00000000"
+            radius: 6
+            anchors.right: parent.right
+            anchors.rightMargin: 10
+            anchors.verticalCenter: parent.verticalCenter
+            border.color: "#808080"
+            MouseArea {
+                id: mousearea2
+                anchors.fill: parent
+                onClicked: page.state = 'State1'
+            }
+        }
+
+        Rectangle {
+            id: bottomLeftRect
+            y: 11
+            width: 64
+            height: 64
+            color: "#00000000"
+            radius: 6
+            anchors.left: parent.left
+            anchors.leftMargin: 10
+            anchors.bottom: parent.bottom
+            anchors.bottomMargin: 20
+            border.color: "#808080"
+            MouseArea {
+                id: mousearea3
+                anchors.fill: parent
+                onClicked: page.state = 'State2'
+            }
+        }
+
+        states: [
+             State {
+                 name: "State1"
+
+                 PropertyChanges {
+                     target: icon
+                     x: middleRightRect.x
+                     y: middleRightRect.y
+                 }
+             },
+             State {
+                 name: "State2"
+
+                 PropertyChanges {
+                     target: icon
+                     x: bottomLeftRect.x
+                     y: bottomLeftRect.y
+                 }
+             }
+         ]
+
+        transitions: [
+        Transition {
+                from: "*"; to: "State1"
+                NumberAnimation {
+                    properties: "x,y";
+                    duration: 1000
+                }
+            },
+        Transition {
+                from: "*"; to: "State2"
+                NumberAnimation {
+                    properties: "x,y";
+                    easing.type: Easing.InOutQuad;
+                    duration: 2000
+                }
+            },
+        Transition {
+                 NumberAnimation {
+                     properties: "x,y";
+                     duration: 200
+                 }
+             }
+        ]
+}