Commit de7e3638 authored by Leena Miettinen's avatar Leena Miettinen Committed by Riitta-Leena Miettinen

Doc: update the Transitions example

...to use the new Qt logo

Change-Id: I111d070c2ae40b71e650d78bd15d360328b474e3
Reviewed-by: default avatarTim Jenssen <tim.jenssen@theqtcompany.com>
parent ac04a918
/****************************************************************************
**
** Copyright (C) 2016 The Qt Company Ltd.
** Contact: https://www.qt.io/licensing/
**
** This file is part of the examples of the Qt Toolkit.
**
** $QT_BEGIN_LICENSE:BSD$
** Commercial License Usage
** Licensees holding valid commercial Qt licenses may use this file in
** accordance with the commercial license agreement provided with the
** Software or, alternatively, in accordance with the terms contained in
** a written agreement between you and The Qt Company. For licensing terms
** and conditions see https://www.qt.io/terms-conditions. For further
** information use the contact form at https://www.qt.io/contact-us.
**
** BSD License Usage
** Alternatively, you may use this file under the terms of the BSD license
** as follows:
**
** "Redistribution and use in source and binary forms, with or without
** modification, are permitted provided that the following conditions are
** met:
** * Redistributions of source code must retain the above copyright
** notice, this list of conditions and the following disclaimer.
** * Redistributions in binary form must reproduce the above copyright
** notice, this list of conditions and the following disclaimer in
** the documentation and/or other materials provided with the
** distribution.
** * Neither the name of The Qt Company Ltd nor the names of its
** contributors may be used to endorse or promote products derived
** from this software without specific prior written permission.
**
**
** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
**
** $QT_END_LICENSE$
**
****************************************************************************/
import QtQuick 2.5
import QtQuick.Controls 1.4
import QtQuick.Layouts 1.2
import QtQuick 2.6
import QtQuick.Controls 1.5
import QtQuick.Layouts 1.3
Item {
id: page
width: 640
height: 480
property alias mouseArea1: mouseArea1
property alias mouseArea3: mouseArea3
property alias mouseArea2: mouseArea2
property alias bottomLeftRect: bottomLeftRect
property alias middleRightRect: middleRightRect
property alias topLeftRect: topLeftRect
property alias icon: icon
property alias mouseArea1: mouseArea1
property alias mouseArea2: mouseArea2
property alias mouseArea3: mouseArea3
Image {
id: icon
x: 10
y: 20
source: "qt-logo.png"
}
Rectangle {
id: topLeftRect
width: 46
height: 55
width: 55
height: 41
color: "#00000000"
radius: 6
radius: 0
border.color: "#808080"
anchors.left: parent.left
anchors.leftMargin: 10
anchors.top: parent.top
anchors.topMargin: 20
border.color: "#808080"
border.width: 1
MouseArea {
id: mouseArea1
......@@ -83,12 +42,12 @@ Item {
Rectangle {
id: middleRightRect
x: 6
x: -8
y: 6
width: 46
height: 55
width: 55
height: 41
color: "#00000000"
radius: 6
radius: 0
anchors.verticalCenter: parent.verticalCenter
anchors.right: parent.right
anchors.rightMargin: 10
......@@ -96,32 +55,27 @@ Item {
id: mouseArea2
anchors.fill: parent
}
border.width: 1
border.color: "#808080"
}
Rectangle {
id: bottomLeftRect
x: 0
y: 4
width: 46
height: 55
y: -2
width: 55
height: 41
color: "#00000000"
radius: 6
radius: 0
anchors.bottom: parent.bottom
anchors.bottomMargin: 20
anchors.left: parent.left
anchors.leftMargin: 10
MouseArea {
id: mouseArea3
anchors.fill: parent
}
anchors.left: parent.left
border.width: 1
border.color: "#808080"
anchors.leftMargin: 10
}
Image {
id: icon
x: 10
y: 20
source: "qt-logo.png"
}
}
/****************************************************************************
**
** Copyright (C) 2016 The Qt Company Ltd.
** Contact: https://www.qt.io/licensing/
**
** This file is part of the examples of the Qt Toolkit.
**
** $QT_BEGIN_LICENSE:BSD$
** Commercial License Usage
** Licensees holding valid commercial Qt licenses may use this file in
** accordance with the commercial license agreement provided with the
** Software or, alternatively, in accordance with the terms contained in
** a written agreement between you and The Qt Company. For licensing terms
** and conditions see https://www.qt.io/terms-conditions. For further
** information use the contact form at https://www.qt.io/contact-us.
**
** BSD License Usage
** Alternatively, you may use this file under the terms of the BSD license
** as follows:
**
** "Redistribution and use in source and binary forms, with or without
** modification, are permitted provided that the following conditions are
** met:
** * Redistributions of source code must retain the above copyright
** notice, this list of conditions and the following disclaimer.
** * Redistributions in binary form must reproduce the above copyright
** notice, this list of conditions and the following disclaimer in
** the documentation and/or other materials provided with the
** distribution.
** * Neither the name of The Qt Company Ltd nor the names of its
** contributors may be used to endorse or promote products derived
** from this software without specific prior written permission.
**
**
** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
**
** $QT_END_LICENSE$
**
****************************************************************************/
#include <QGuiApplication>
#include <QQmlApplicationEngine>
......
/****************************************************************************
**
** Copyright (C) 2016 The Qt Company Ltd.
** Contact: https://www.qt.io/licensing/
**
** This file is part of the examples of the Qt Toolkit.
**
** $QT_BEGIN_LICENSE:BSD$
** Commercial License Usage
** Licensees holding valid commercial Qt licenses may use this file in
** accordance with the commercial license agreement provided with the
** Software or, alternatively, in accordance with the terms contained in
** a written agreement between you and The Qt Company. For licensing terms
** and conditions see https://www.qt.io/terms-conditions. For further
** information use the contact form at https://www.qt.io/contact-us.
**
** BSD License Usage
** Alternatively, you may use this file under the terms of the BSD license
** as follows:
**
** "Redistribution and use in source and binary forms, with or without
** modification, are permitted provided that the following conditions are
** met:
** * Redistributions of source code must retain the above copyright
** notice, this list of conditions and the following disclaimer.
** * Redistributions in binary form must reproduce the above copyright
** notice, this list of conditions and the following disclaimer in
** the documentation and/or other materials provided with the
** distribution.
** * Neither the name of The Qt Company Ltd nor the names of its
** contributors may be used to endorse or promote products derived
** from this software without specific prior written permission.
**
**
** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
**
** $QT_END_LICENSE$
**
****************************************************************************/
import QtQuick 2.5
import QtQuick.Controls 1.4
import QtQuick 2.6
import QtQuick.Controls 1.5
import QtQuick.Dialogs 1.2
ApplicationWindow {
visible: true
title: qsTr("Transitions")
width: 330
height: 330
title: qsTr("Transitions")
MainForm {
anchors.fill: parent
id: page
mouseArea1 {
onClicked: stateGroup.state = ' '
}
mouseArea2 {
onClicked: stateGroup.state = 'State1'
}
mouseArea3 {
onClicked: stateGroup.state = 'State2'
}
onClicked: stateGroup.state = ' '
}
mouseArea2 {
onClicked: stateGroup.state = 'State1'
}
mouseArea3 {
onClicked: stateGroup.state = 'State2'
}
}
StateGroup {
id: stateGroup
states: [
State {
name: "State1"
id: stateGroup
states: [
State {
name: "State1"
PropertyChanges {
target: page.icon
x: page.middleRightRect.x
y: page.middleRightRect.y
}
},
State {
name: "State2"
PropertyChanges {
target: page.icon
x: page.middleRightRect.x
y: page.middleRightRect.y
}
},
State {
name: "State2"
PropertyChanges {
target: page.icon
x: page.bottomLeftRect.x
y: page.bottomLeftRect.y
PropertyChanges {
target: page.icon
x: page.bottomLeftRect.x
y: page.bottomLeftRect.y
}
}
}
]
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
]
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
}
}
}
]
}
}
]
}
}
doc/examples/transitions/qt-logo.png

5.03 KB | W: | H:

doc/examples/transitions/qt-logo.png

1.48 KB | W: | H:

doc/examples/transitions/qt-logo.png
doc/examples/transitions/qt-logo.png
doc/examples/transitions/qt-logo.png
doc/examples/transitions/qt-logo.png
  • 2-up
  • Swipe
  • Onion skin
doc/images/qmldesigner-tutorial.png

4.79 KB | W: | H:

doc/images/qmldesigner-tutorial.png

9.67 KB | W: | H:

doc/images/qmldesigner-tutorial.png
doc/images/qmldesigner-tutorial.png
doc/images/qmldesigner-tutorial.png
doc/images/qmldesigner-tutorial.png
  • 2-up
  • Swipe
  • Onion skin
......@@ -74,8 +74,11 @@
\li In the \uicontrol Navigator, select \uicontrol RowLayout and press
\key Delete to delete it.
\li Select \uicontrol Item in the navigator, and enter \e page in the
\uicontrol Id field.
\li In \uicontrol Library > \uicontrol Resources, select qt-logo.png and
drag and drop it to the \uicontrol Item in the navigator.
drag and drop it to the \e page in the navigator.
\image qmldesigner-tutorial-user-icon.png "Image properties"
......@@ -101,8 +104,8 @@
\li In the \uicontrol Id field, enter \e topLeftRect.
\li In the \uicontrol Size field, set \uicontrol W to \e 46 and
\uicontrol H to \e 55, for the rectangle size to match the image
\li In the \uicontrol Size field, set \uicontrol W to \e 55 and
\uicontrol H to \e 41, for the rectangle size to match the image
size.
\li In the \uicontrol Color field, click the
......@@ -113,9 +116,6 @@
\li In the \uicontrol {Border color} field, set the border color to
\e #808080.
\li In the \uicontrol Radius field, select \e 6 to create rounded
corners for the rectangle.
\li Click \uicontrol {Layout}, and then click the top and left
anchor buttons to anchor the rectangle to the top left corner of
the page.
......@@ -187,6 +187,8 @@
the \uicontrol Edit mode to add animation to the application, as described
in the following section.
\image qmldesigner-tutorial-ui-ready.png "Transitions UI"
\section1 Adding Application Logic
The new project wizard adds boilerplate code to the \e main.qml file to
......@@ -207,7 +209,7 @@
\quotefromfile transitions/main.qml
\skipto ApplicationWindow
\printuntil height
\printuntil title
\li Specify an id for the MainForm type to be able to use the properties
that you exported in \e MainForm.ui.qml:
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment