diff options
author | Leena Miettinen <riitta-leena.miettinen@digia.com> | 2014-04-08 16:08:32 +0200 |
---|---|---|
committer | Leena Miettinen <riitta-leena.miettinen@digia.com> | 2014-04-11 12:52:49 +0200 |
commit | 7d6c823b86692fec33e5cdd6f025fa0f450a7d25 (patch) | |
tree | 5e9e16543de6b9ed4b5668bb98680469533153a9 /doc/examples | |
parent | 640ff6b896df2ed67bd4b86f7353b7b21f07d311 (diff) | |
download | qt-creator-7d6c823b86692fec33e5cdd6f025fa0f450a7d25.tar.gz |
Doc: update the Qt Quick app tutorial
The wizard in 3.1 uses a Window QML type instead of a Rectangle,
which means that states must be placed within a statusGroup.
The example can no longer be built from Qt Quick 1 elements.
Replaced \snippet commands with \quotefromfile commands.
Change-Id: Ia2cec2b8b638913a2b9b2e27b36e6f2f1ffc4a49
Reviewed-by: Alessandro Portale <alessandro.portale@digia.com>
Reviewed-by: Marco Bubke <marco.bubke@digia.com>
Reviewed-by: Leena Miettinen <riitta-leena.miettinen@digia.com>
Diffstat (limited to 'doc/examples')
-rw-r--r-- | doc/examples/transitions/main.qml | 170 |
1 files changed, 83 insertions, 87 deletions
diff --git a/doc/examples/transitions/main.qml b/doc/examples/transitions/main.qml index 9e751ab842..8769546257 100644 --- a/doc/examples/transitions/main.qml +++ b/doc/examples/transitions/main.qml @@ -1,13 +1,9 @@ -//! [2] +import QtQuick 2.1 +import QtQuick.Window 2.1 -//! [1] - -//! [0] - -import QtQuick 2.0 - -Rectangle { +Window { id: page + visible: true width: 360 height: 360 color: "#343434" @@ -21,11 +17,11 @@ Rectangle { Rectangle { id: topLeftRect - y: 20 width: 64 height: 64 color: "#00000000" radius: 6 + opacity: 1 anchors.left: parent.left anchors.leftMargin: 10 anchors.top: parent.top @@ -33,95 +29,95 @@ Rectangle { border.color: "#808080" MouseArea { - id: mousearea1 + id: mouseArea1 anchors.fill: parent - onClicked: page.state = ' ' - } + onClicked: stateGroup.state = ' ' } -//! [0] + } - Rectangle { - id: middleRightRect - 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: middleRightRect + width: 64 + height: 64 + color: "#00000000" + radius: 6 + anchors.right: parent.right + anchors.rightMargin: 10 + anchors.verticalCenter: parent.verticalCenter + border.color: "#808080" - Rectangle { - id: bottomLeftRect - 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' - } + MouseArea { + id: mouseArea2 + anchors.fill: parent + onClicked: stateGroup.state = 'State1' } + } -//! [1] - - states: [ - State { - name: "State1" + Rectangle { + id: bottomLeftRect + width: 64 + height: 64 + color: "#00000000" + radius: 6 + border.width: 1 + anchors.leftMargin: 10 + anchors.bottom: parent.bottom + anchors.bottomMargin: 20 + anchors.left: parent.left + border.color: "#808080" - PropertyChanges { - target: icon - x: middleRightRect.x - y: middleRightRect.y - } - }, - State { - name: "State2" + MouseArea { + id: mouseArea3 + anchors.fill: parent + onClicked: stateGroup.state = 'State2' + } + } - PropertyChanges { - target: icon - x: bottomLeftRect.x - y: bottomLeftRect.y - } - } - ] + StateGroup { + id: stateGroup + states: [ + State { + name: "State1" - transitions: [ - Transition { - from: "*"; to: "State1" - NumberAnimation { - easing.type: Easing.OutBounce - properties: "x,y"; - duration: 1000 + PropertyChanges { + target: icon + x: middleRightRect.x + y: middleRightRect.y } }, - Transition { - from: "*"; to: "State2" - NumberAnimation { - properties: "x,y"; - easing.type: Easing.InOutQuad; - duration: 2000 + State { + name: "State2" + + PropertyChanges { + target: icon + x: bottomLeftRect.x + y: bottomLeftRect.y } - }, - Transition { - NumberAnimation { - properties: "x,y"; - duration: 200 - } - } + } ] + transitions: [ + Transition { + from: "*"; to: "State1" + NumberAnimation { + easing.type: Easing.OutBounce + 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 + } + } + ] + } } - -//! [2] |