diff --git a/doc/examples/transitions/Page1.qml b/doc/examples/transitions/Page1.qml new file mode 100644 index 00000000000..67336b4af72 --- /dev/null +++ b/doc/examples/transitions/Page1.qml @@ -0,0 +1,5 @@ +import QtQuick 2.7 + +Page1Form { + +} diff --git a/doc/examples/transitions/MainForm.ui.qml b/doc/examples/transitions/Page1Form.ui.qml similarity index 82% rename from doc/examples/transitions/MainForm.ui.qml rename to doc/examples/transitions/Page1Form.ui.qml index 61a0e92b295..2637f1d0af9 100644 --- a/doc/examples/transitions/MainForm.ui.qml +++ b/doc/examples/transitions/Page1Form.ui.qml @@ -1,18 +1,19 @@ -import QtQuick 2.6 -import QtQuick.Controls 1.5 +import QtQuick 2.7 +import QtQuick.Controls 2.0 import QtQuick.Layouts 1.3 Item { id: page - width: 640 - height: 480 - property alias mouseArea1: mouseArea1 - property alias mouseArea3: mouseArea3 - property alias mouseArea2: mouseArea2 + width: 300 + height: 300 + property alias icon: icon + property alias topLeftRect: topLeftRect property alias bottomLeftRect: bottomLeftRect property alias middleRightRect: middleRightRect - property alias topLeftRect: topLeftRect - property alias icon: icon + + property alias mouseArea2: mouseArea2 + property alias mouseArea1: mouseArea1 + property alias mouseArea: mouseArea Image { id: icon @@ -26,14 +27,27 @@ Item { width: 55 height: 41 color: "#00000000" - radius: 0 - border.color: "#808080" anchors.left: parent.left anchors.leftMargin: 10 anchors.top: parent.top anchors.topMargin: 20 - border.width: 1 + border.color: "#808080" + MouseArea { + id: mouseArea + anchors.fill: parent + } + } + + Rectangle { + id: middleRightRect + width: 55 + height: 41 + color: "#00000000" + anchors.right: parent.right + anchors.rightMargin: 10 + anchors.verticalCenter: parent.verticalCenter + border.color: "#808080" MouseArea { id: mouseArea1 anchors.fill: parent @@ -41,41 +55,18 @@ Item { } Rectangle { - id: middleRightRect - x: -8 - y: 6 + id: bottomLeftRect width: 55 height: 41 color: "#00000000" - radius: 0 - anchors.verticalCenter: parent.verticalCenter - anchors.right: parent.right - anchors.rightMargin: 10 + anchors.bottom: parent.bottom + anchors.bottomMargin: 20 + border.color: "#808080" MouseArea { id: mouseArea2 anchors.fill: parent } - border.width: 1 - border.color: "#808080" - } - - Rectangle { - id: bottomLeftRect - y: -2 - width: 55 - height: 41 - color: "#00000000" - radius: 0 - anchors.bottom: parent.bottom - anchors.bottomMargin: 20 anchors.left: parent.left anchors.leftMargin: 10 - MouseArea { - id: mouseArea3 - anchors.fill: parent - } - border.width: 1 - border.color: "#808080" } - } diff --git a/doc/examples/transitions/main.cpp b/doc/examples/transitions/main.cpp index d76049d67eb..34614e74778 100644 --- a/doc/examples/transitions/main.cpp +++ b/doc/examples/transitions/main.cpp @@ -3,10 +3,11 @@ int main(int argc, char *argv[]) { + QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling); QGuiApplication app(argc, argv); QQmlApplicationEngine engine; - engine.load(QUrl(QStringLiteral("qrc:/main.qml"))); + engine.load(QUrl(QLatin1String("qrc:/main.qml"))); return app.exec(); } diff --git a/doc/examples/transitions/main.qml b/doc/examples/transitions/main.qml index b2d6928de41..3775d821582 100644 --- a/doc/examples/transitions/main.qml +++ b/doc/examples/transitions/main.qml @@ -1,72 +1,74 @@ -import QtQuick 2.6 -import QtQuick.Controls 1.5 -import QtQuick.Dialogs 1.2 +import QtQuick 2.7 + +import QtQuick.Controls 2.0 +import QtQuick.Layouts 1.3 ApplicationWindow { visible: true - width: 330 - height: 330 + width: 640 + height: 480 title: qsTr("Transitions") - MainForm { + Page1Form { anchors.fill: parent id: page + + mouseArea { + onClicked: stateGroup.state = ' ' + } mouseArea1 { - onClicked: stateGroup.state = ' ' - } - mouseArea2 { - onClicked: stateGroup.state = 'State1' - } - mouseArea3 { - onClicked: stateGroup.state = 'State2' - } + onClicked: stateGroup.state = 'State1' + } + mouseArea2 { + 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.bottomLeftRect.x - y: page.bottomLeftRect.y - } + 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 } - ] - 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/qml.qrc b/doc/examples/transitions/qml.qrc index e39f0cf3313..bba8291fc0d 100644 --- a/doc/examples/transitions/qml.qrc +++ b/doc/examples/transitions/qml.qrc @@ -1,7 +1,9 @@ main.qml - MainForm.ui.qml + Page1.qml + Page1Form.ui.qml + qtquickcontrols2.conf qt-logo.png diff --git a/doc/examples/transitions/qtquickcontrols2.conf b/doc/examples/transitions/qtquickcontrols2.conf new file mode 100644 index 00000000000..1764b16fb48 --- /dev/null +++ b/doc/examples/transitions/qtquickcontrols2.conf @@ -0,0 +1,15 @@ +; This file can be edited to change the style of the application +; See Styling Qt Quick Controls 2 in the documentation for details: +; http://doc.qt.io/qt-5/qtquickcontrols2-styles.html + +[Controls] +Style=Default + +[Universal] +Theme=Light +;Accent=Steel + +[Material] +Theme=Light +;Accent=BlueGrey +;Primary=BlueGray diff --git a/doc/examples/transitions/transitions.pro b/doc/examples/transitions/transitions.pro index f8ec75d4a92..d0d4cd29792 100644 --- a/doc/examples/transitions/transitions.pro +++ b/doc/examples/transitions/transitions.pro @@ -1,5 +1,3 @@ -TEMPLATE = app - QT += qml quick CONFIG += c++11 @@ -11,5 +9,21 @@ RESOURCES += qml.qrc # Additional import path used to resolve QML modules in Qt Creator's code model QML_IMPORT_PATH = +# Additional import path used to resolve QML modules just for Qt Quick Designer +QML_DESIGNER_IMPORT_PATH = + +# The following define makes your compiler emit warnings if you use +# any feature of Qt which as been marked deprecated (the exact warnings +# depend on your compiler). Please consult the documentation of the +# deprecated API in order to know how to port your code away from it. +DEFINES += QT_DEPRECATED_WARNINGS + +# You can also make your code fail to compile if you use deprecated APIs. +# In order to do so, uncomment the following line. +# You can also select to disable deprecated APIs only up to a certain version of Qt. +#DEFINES += QT_DISABLE_DEPRECATED_BEFORE=0x060000 # disables all the APIs deprecated before Qt 6.0.0 + # Default rules for deployment. -include(deployment.pri) +qnx: target.path = /tmp/$${TARGET}/bin +else: unix:!android: target.path = /opt/$${TARGET}/bin +!isEmpty(target.path): INSTALLS += target diff --git a/doc/images/qmldesigner-tutorial-design-mode.png b/doc/images/qmldesigner-tutorial-design-mode.png index 017fea1f1e9..d2a522f01c0 100644 Binary files a/doc/images/qmldesigner-tutorial-design-mode.png and b/doc/images/qmldesigner-tutorial-design-mode.png differ diff --git a/doc/images/qmldesigner-tutorial-quick-toolbar.png b/doc/images/qmldesigner-tutorial-quick-toolbar.png index 51c3616eaa5..11745f8bd6b 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-layout.png b/doc/images/qmldesigner-tutorial-topleftrect-layout.png index c0ddfd04e56..9b6bc9f887e 100644 Binary files a/doc/images/qmldesigner-tutorial-topleftrect-layout.png and b/doc/images/qmldesigner-tutorial-topleftrect-layout.png differ diff --git a/doc/images/qmldesigner-tutorial-topleftrect.png b/doc/images/qmldesigner-tutorial-topleftrect.png index b4e0d22f05e..17bc686d8ff 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 index 3a3b3110811..0cc60262ed0 100644 Binary files a/doc/images/qmldesigner-tutorial-ui-ready.png 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 ee3a14485e0..e5a36ebceb3 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 3cf47bc2fef..64b1e4752e1 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 d478b30d5ad..527992807f5 100644 --- a/doc/src/qtquick/qtquick-app-tutorial.qdoc +++ b/doc/src/qtquick/qtquick-app-tutorial.qdoc @@ -39,6 +39,8 @@ This tutorial uses built-in QML types and illustrates basic concepts of \l{Qt Quick}. + For more information about the UI choices you have, see \l{User Interfaces}. + This tutorial describes how to use \QC to implement Qt Quick states and transitions. We create an application that displays a Qt logo that moves @@ -49,8 +51,8 @@ For more information about using \QMLD, see \l{Developing Qt Quick Applications}. - For tutorials that describe using Qt Quick Controls, see - \l{Qt Quick Text Editor Guide} and \l{Qt Quick Controls - UI Forms}. + For examples of using Qt Quick Controls 2, see + \l{Qt Quick Controls 2 Examples}. \include creator-tutorial-create-qq-project.qdocinc @@ -66,7 +68,7 @@ \list 1 - \li In the \uicontrol Projects view, double-click the MainForm.ui.qml + \li In the \uicontrol Projects view, double-click the \e Page1Form.ui.qml file to open it in \QMLD. \image qmldesigner-tutorial-design-mode.png "Transitions project in Design Mode" @@ -179,28 +181,28 @@ \endlist - To check your code, you can open MainForm.ui.qml in the - \uicontrol Edit mode and compare it with the \l{transitions/MainForm.ui.qml} - {MainForm.ui.qml} example file. + To check your code, you can view \e Page1Form.ui.qml in the + \uicontrol {Text Editor} and compare it with the \l{transitions/Page1Form.ui.qml} + {Page1Form.ui.qml} example file. + + The new project wizard adds boilerplate code to the \e Page1.qml file to + create menu items and push buttons. Modify the boilerplate code by removing + obsolete code. You removed the push buttons from the + UI form, so you also need to remove the corresponding code from + \e Page1.qml (or the application cannot be built). The UI is now ready and you can switch to editing the \e main.qml file in - the \uicontrol Edit mode to add animation to the application, as described + the \uicontrol {Text Editor} 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 - create menu items and push buttons. Modify the boilerplate code by removing - obsolete code and by adding new code. You removed the push buttons from the - UI form, so you also need to remove the corresponding code from - \e main.qml (or the application cannot be built). - - Edit the main.qml file to add pointers to two additional states: \e State1 - and \e State2. You cannot use the \QMLD to add states for a Window QML - type. Use the code editor to add the states inside a StateGroup QML type and - refer to them by using the id of the state group. + Edit the \e main.qml file to add pointers to two additional states: \e State1 + and \e State2. You cannot use the \uicontrol {Form Editor} to add states for + a Window QML type. Use the \uicontrol {Text Editor} to add the states inside + a StateGroup QML type and refer to them by using the id of the state group. \list 1 @@ -211,24 +213,24 @@ \skipto ApplicationWindow \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: + \li Specify an id for the Page1 type to be able to use the properties + that you exported in \e Page1Form.ui.qml: \printuntil page - \li Add a pointer to the clicked expressions in \uicontrol mouseArea1: + \li Add a pointer to the clicked expressions in \uicontrol mouseArea: \printuntil } The expression sets the state to the base state and returns the image to its initial position. - \li Add a pointer to a clicked expression to \uicontrol mouseArea2 + \li Add a pointer to a clicked expression to \uicontrol mouseArea1 to set the state to \e State1: \printuntil } - \li Add a pointer to a clicked expression to \uicontrol mouseArea3 to + \li Add a pointer to a clicked expression to \uicontrol mouseArea2 to set the state to \e State2: \printuntil } @@ -254,13 +256,13 @@ when the Qt logo moves between states. The transitions apply animations to the Qt logo. For example, the Qt logo bounces back when it moves to the middleRightRect and eases into - bottomLeftRect. Add the transitions in the code editor. + bottomLeftRect. \list 1 - \li In the code editor, add the following code to specify that when - moving to State1, the x and y coordinates of the Qt logo change - linearly over a duration of 1 second: + \li In the \uicontrol {Text Editor}, add the following code to specify + that when moving to State1, the x and y coordinates of the Qt logo + change linearly over a duration of 1 second: \printuntil }, @@ -269,8 +271,8 @@ \list a - \li Click \uicontrol NumberAnimation in the code editor to display the - \inlineimage refactormarker.png + \li Click \uicontrol NumberAnimation in the \uicontrol {Text Editor} + to display the \inlineimage refactormarker.png icon, and then click the icon to open the toolbar: \image qmldesigner-tutorial-quick-toolbar.png "Qt Quick toolbar for animation"