diff --git a/doc/examples/transitions/MainForm.ui.qml b/doc/examples/transitions/MainForm.ui.qml index f599b842a34..61a0e92b295 100644 --- a/doc/examples/transitions/MainForm.ui.qml +++ b/doc/examples/transitions/MainForm.ui.qml @@ -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" - } } diff --git a/doc/examples/transitions/main.cpp b/doc/examples/transitions/main.cpp index 618e0f3da83..d76049d67eb 100644 --- a/doc/examples/transitions/main.cpp +++ b/doc/examples/transitions/main.cpp @@ -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 #include diff --git a/doc/examples/transitions/main.qml b/doc/examples/transitions/main.qml index 113cb551b04..b2d6928de41 100644 --- a/doc/examples/transitions/main.qml +++ b/doc/examples/transitions/main.qml @@ -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 + } } - } - ] - } - } + ] + } +} diff --git a/doc/examples/transitions/qt-logo.png b/doc/examples/transitions/qt-logo.png index 14ddf2a0289..f465822ed08 100644 Binary files a/doc/examples/transitions/qt-logo.png and b/doc/examples/transitions/qt-logo.png differ diff --git a/doc/images/qmldesigner-tutorial-quick-toolbar.png b/doc/images/qmldesigner-tutorial-quick-toolbar.png index 48ffc07c352..51c3616eaa5 100644 Binary files a/doc/images/qmldesigner-tutorial-quick-toolbar.png and b/doc/images/qmldesigner-tutorial-quick-toolbar.png differ diff --git a/doc/images/qmldesigner-tutorial-topleftrect.png b/doc/images/qmldesigner-tutorial-topleftrect.png index 3cc9d64c8e6..b4e0d22f05e 100644 Binary files a/doc/images/qmldesigner-tutorial-topleftrect.png and b/doc/images/qmldesigner-tutorial-topleftrect.png differ diff --git a/doc/images/qmldesigner-tutorial-ui-ready.png b/doc/images/qmldesigner-tutorial-ui-ready.png new file mode 100644 index 00000000000..3a3b3110811 Binary files /dev/null and b/doc/images/qmldesigner-tutorial-ui-ready.png differ diff --git a/doc/images/qmldesigner-tutorial-user-icon.png b/doc/images/qmldesigner-tutorial-user-icon.png index 2e3f84ee0c1..ee3a14485e0 100644 Binary files a/doc/images/qmldesigner-tutorial-user-icon.png and b/doc/images/qmldesigner-tutorial-user-icon.png differ diff --git a/doc/images/qmldesigner-tutorial.png b/doc/images/qmldesigner-tutorial.png index a70f2860b6e..3cf47bc2fef 100644 Binary files a/doc/images/qmldesigner-tutorial.png and b/doc/images/qmldesigner-tutorial.png differ diff --git a/doc/src/qtquick/qtquick-app-tutorial.qdoc b/doc/src/qtquick/qtquick-app-tutorial.qdoc index 85bc3ff2483..7f122c33112 100644 --- a/doc/src/qtquick/qtquick-app-tutorial.qdoc +++ b/doc/src/qtquick/qtquick-app-tutorial.qdoc @@ -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: