feedc0de/qt-creator
1
0
Fork 0
forked from qt-creator/qt-creator
Code Pull Requests Activity

Doc: update the Transitions example

Browse Source 
...to use the new Qt logo

Change-Id: I111d070c2ae40b71e650d78bd15d360328b474e3
Reviewed-by: Tim Jenssen <tim.jenssen@theqtcompany.com>
This commit is contained in:
Leena Miettinen
2016-04-08 11:00:17 +02:00
committed by Leena Miettinen
parent ac04a91820
commit de7e36383f
10 changed files with 94 additions and 238 deletions
Download Patch File Download Diff File Expand all files Collapse all files

108
doc/examples/transitions/MainForm.ui.qml
View File

@@ -1,79 +1,38 @@
/****************************************************************************
**
** 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"
}
}

50
doc/examples/transitions/main.cpp
View File

@@ -1,53 +1,3 @@
/****************************************************************************
**
** 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>

158
doc/examples/transitions/main.qml
View File

@@ -1,122 +1,72 @@
/****************************************************************************
**
** 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
}
}
}
]
}
}
]
}
}

BIN
doc/examples/transitions/qt-logo.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.0 KiB

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
doc/images/qmldesigner-tutorial-quick-toolbar.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 44 KiB

BIN
doc/images/qmldesigner-tutorial-topleftrect.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 28 KiB

After

Width:  |  Height:  |  Size: 80 KiB

BIN
doc/images/qmldesigner-tutorial-ui-ready.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 99 KiB

BIN
doc/images/qmldesigner-tutorial-user-icon.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 26 KiB

After

Width:  |  Height:  |  Size: 69 KiB

BIN
doc/images/qmldesigner-tutorial.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.8 KiB

After

Width:  |  Height:  |  Size: 9.7 KiB

16
doc/src/qtquick/qtquick-app-tutorial.qdoc
View File

@@ -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: