diff options
Diffstat (limited to 'sources/pyside2/doc/tutorials')
58 files changed, 2936 insertions, 0 deletions
diff --git a/sources/pyside2/doc/tutorials/index.rst b/sources/pyside2/doc/tutorials/index.rst new file mode 100644 index 000000000..2e97612aa --- /dev/null +++ b/sources/pyside2/doc/tutorials/index.rst @@ -0,0 +1,10 @@ +PySide tutorials +**************** + +A collection of tutorials and "walkthrough" guides are provided with PySide to help new users get started with PySide development. These documents were ported from C++ to Python and cover a range of topics, from basic use of widgets to step-by-step tutorials that show how an application is put together. + +.. toctree:: + :maxdepth: 2 + + qmltutorial/index.rst + qmladvancedtutorial/index.rst diff --git a/sources/pyside2/doc/tutorials/qmladvancedtutorial/declarative-adv-tutorial1.png b/sources/pyside2/doc/tutorials/qmladvancedtutorial/declarative-adv-tutorial1.png Binary files differnew file mode 100644 index 000000000..1699ab0e4 --- /dev/null +++ b/sources/pyside2/doc/tutorials/qmladvancedtutorial/declarative-adv-tutorial1.png diff --git a/sources/pyside2/doc/tutorials/qmladvancedtutorial/declarative-adv-tutorial2.png b/sources/pyside2/doc/tutorials/qmladvancedtutorial/declarative-adv-tutorial2.png Binary files differnew file mode 100644 index 000000000..ba27c442c --- /dev/null +++ b/sources/pyside2/doc/tutorials/qmladvancedtutorial/declarative-adv-tutorial2.png diff --git a/sources/pyside2/doc/tutorials/qmladvancedtutorial/declarative-adv-tutorial3.png b/sources/pyside2/doc/tutorials/qmladvancedtutorial/declarative-adv-tutorial3.png Binary files differnew file mode 100644 index 000000000..d500434d1 --- /dev/null +++ b/sources/pyside2/doc/tutorials/qmladvancedtutorial/declarative-adv-tutorial3.png diff --git a/sources/pyside2/doc/tutorials/qmladvancedtutorial/declarative-adv-tutorial4.gif b/sources/pyside2/doc/tutorials/qmladvancedtutorial/declarative-adv-tutorial4.gif Binary files differnew file mode 100644 index 000000000..827458daa --- /dev/null +++ b/sources/pyside2/doc/tutorials/qmladvancedtutorial/declarative-adv-tutorial4.gif diff --git a/sources/pyside2/doc/tutorials/qmladvancedtutorial/declarative-samegame.png b/sources/pyside2/doc/tutorials/qmladvancedtutorial/declarative-samegame.png Binary files differnew file mode 100644 index 000000000..2232df204 --- /dev/null +++ b/sources/pyside2/doc/tutorials/qmladvancedtutorial/declarative-samegame.png diff --git a/sources/pyside2/doc/tutorials/qmladvancedtutorial/index.rst b/sources/pyside2/doc/tutorials/qmladvancedtutorial/index.rst new file mode 100644 index 000000000..5b5a367d0 --- /dev/null +++ b/sources/pyside2/doc/tutorials/qmladvancedtutorial/index.rst @@ -0,0 +1,34 @@ +.. _qmladvancedtutorial: + +QML Advanced Tutorial +********************* + +This tutorial walks step-by-step through the creation of a full application using QML. +It assumes that you already know the basics of QML (for example, from reading the +:ref:`qmltutorial`. + +In this tutorial we write a game, *Same Game*, based on the Same Game application +included in the declarative demos directory, which looks like this: + +.. figure:: declarative-samegame.png + :align: center + +We will cover concepts for producing a fully functioning application, including +JavaScript integration, using QML States and Behaviors to +manage components and enhance your interface, and storing persistent application data. + +An understanding of JavaScript is helpful to understand parts of this tutorial, but if you don't +know JavaScript you can still get a feel for how you can integrate backend logic to create and +control QML elements. + +Tutorial chapters: + +.. toctree:: + :maxdepth: 1 + + samegame1.rst + samegame2.rst + samegame3.rst + samegame4.rst + +All the code in this tutorial can be found :download:`here <samegame.tar.bz2>`. diff --git a/sources/pyside2/doc/tutorials/qmladvancedtutorial/samegame.tar.bz2 b/sources/pyside2/doc/tutorials/qmladvancedtutorial/samegame.tar.bz2 Binary files differnew file mode 100644 index 000000000..f33983d0a --- /dev/null +++ b/sources/pyside2/doc/tutorials/qmladvancedtutorial/samegame.tar.bz2 diff --git a/sources/pyside2/doc/tutorials/qmladvancedtutorial/samegame/samegame1/Block.qml b/sources/pyside2/doc/tutorials/qmladvancedtutorial/samegame/samegame1/Block.qml new file mode 100644 index 000000000..b130b2864 --- /dev/null +++ b/sources/pyside2/doc/tutorials/qmladvancedtutorial/samegame/samegame1/Block.qml @@ -0,0 +1,63 @@ +/**************************************************************************** +** +** Copyright (C) 2016 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the examples of PySide2. +** +** $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$ +** +****************************************************************************/ + +//![0] +import QtQuick 1.0 + +Item { + id: block + + Image { + id: img + anchors.fill: parent + source: "../shared/pics/redStone.png" + } +} +//![0] diff --git a/sources/pyside2/doc/tutorials/qmladvancedtutorial/samegame/samegame1/Button.qml b/sources/pyside2/doc/tutorials/qmladvancedtutorial/samegame/samegame1/Button.qml new file mode 100644 index 000000000..b419fb562 --- /dev/null +++ b/sources/pyside2/doc/tutorials/qmladvancedtutorial/samegame/samegame1/Button.qml @@ -0,0 +1,93 @@ +/**************************************************************************** +** +** Copyright (C) 2016 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the examples of PySide2. +** +** $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$ +** +****************************************************************************/ + +//![0] +import QtQuick 1.0 + +Rectangle { + id: container + + property string text: "Button" + + signal clicked + + width: buttonLabel.width + 20; height: buttonLabel.height + 5 + border { width: 1; color: Qt.darker(activePalette.button) } + smooth: true + radius: 8 + + // color the button with a gradient + gradient: Gradient { + GradientStop { + position: 0.0 + color: { + if (mouseArea.pressed) + return activePalette.dark + else + return activePalette.light + } + } + GradientStop { position: 1.0; color: activePalette.button } + } + + MouseArea { + id: mouseArea + anchors.fill: parent + onClicked: container.clicked(); + } + + Text { + id: buttonLabel + anchors.centerIn: container + color: activePalette.buttonText + text: container.text + } +} +//![0] diff --git a/sources/pyside2/doc/tutorials/qmladvancedtutorial/samegame/samegame1/samegame.qml b/sources/pyside2/doc/tutorials/qmladvancedtutorial/samegame/samegame1/samegame.qml new file mode 100644 index 000000000..8f71901b7 --- /dev/null +++ b/sources/pyside2/doc/tutorials/qmladvancedtutorial/samegame/samegame1/samegame.qml @@ -0,0 +1,92 @@ +/**************************************************************************** +** +** Copyright (C) 2016 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the examples of PySide2. +** +** $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$ +** +****************************************************************************/ + +//![0] +import QtQuick 1.0 + +Rectangle { + id: screen + + width: 490; height: 720 + + SystemPalette { id: activePalette } + + Item { + width: parent.width + anchors { top: parent.top; bottom: toolBar.top } + + Image { + id: background + anchors.fill: parent + source: "../shared/pics/background.jpg" + fillMode: Image.PreserveAspectCrop + } + } + + Rectangle { + id: toolBar + width: parent.width; height: 30 + color: activePalette.window + anchors.bottom: screen.bottom + + Button { + anchors { left: parent.left; verticalCenter: parent.verticalCenter } + text: "New Game" + onClicked: console.log("This doesn't do anything yet...") + } + + Text { + id: score + anchors { right: parent.right; verticalCenter: parent.verticalCenter } + text: "Score: Who knows?" + } + } +} +//![0] diff --git a/sources/pyside2/doc/tutorials/qmladvancedtutorial/samegame/samegame1/samegame1.qmlproject b/sources/pyside2/doc/tutorials/qmladvancedtutorial/samegame/samegame1/samegame1.qmlproject new file mode 100644 index 000000000..d4909f868 --- /dev/null +++ b/sources/pyside2/doc/tutorials/qmladvancedtutorial/samegame/samegame1/samegame1.qmlproject @@ -0,0 +1,16 @@ +import QmlProject 1.0 + +Project { + /* Include .qml, .js, and image files from current directory and subdirectories */ + QmlFiles { + directory: "." + } + JavaScriptFiles { + directory: "." + } + ImageFiles { + directory: "." + } + /* List of plugin directories passed to QML runtime */ + // importPaths: [ " ../exampleplugin " ] +} diff --git a/sources/pyside2/doc/tutorials/qmladvancedtutorial/samegame/samegame2/Block.qml b/sources/pyside2/doc/tutorials/qmladvancedtutorial/samegame/samegame2/Block.qml new file mode 100644 index 000000000..3f91bc7cc --- /dev/null +++ b/sources/pyside2/doc/tutorials/qmladvancedtutorial/samegame/samegame2/Block.qml @@ -0,0 +1,61 @@ +/**************************************************************************** +** +** Copyright (C) 2016 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the examples of PySide2. +** +** $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 1.0 + +Item { + id: block + + Image { + id: img + anchors.fill: parent + source: "../shared/pics/redStone.png" + } +} diff --git a/sources/pyside2/doc/tutorials/qmladvancedtutorial/samegame/samegame2/Button.qml b/sources/pyside2/doc/tutorials/qmladvancedtutorial/samegame/samegame2/Button.qml new file mode 100644 index 000000000..2de0d9422 --- /dev/null +++ b/sources/pyside2/doc/tutorials/qmladvancedtutorial/samegame/samegame2/Button.qml @@ -0,0 +1,91 @@ +/**************************************************************************** +** +** Copyright (C) 2016 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the examples of PySide2. +** +** $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 1.0 + +Rectangle { + id: container + + property string text: "Button" + + signal clicked + + width: buttonLabel.width + 20; height: buttonLabel.height + 5 + border { width: 1; color: Qt.darker(activePalette.button) } + smooth: true + radius: 8 + + // color the button with a gradient + gradient: Gradient { + GradientStop { + position: 0.0 + color: { + if (mouseArea.pressed) + return activePalette.dark + else + return activePalette.light + } + } + GradientStop { position: 1.0; color: activePalette.button } + } + + MouseArea { + id: mouseArea + anchors.fill: parent + onClicked: container.clicked(); + } + + Text { + id: buttonLabel + anchors.centerIn: container + color: activePalette.buttonText + text: container.text + } +} diff --git a/sources/pyside2/doc/tutorials/qmladvancedtutorial/samegame/samegame2/samegame.js b/sources/pyside2/doc/tutorials/qmladvancedtutorial/samegame/samegame2/samegame.js new file mode 100644 index 000000000..c749dc17b --- /dev/null +++ b/sources/pyside2/doc/tutorials/qmladvancedtutorial/samegame/samegame2/samegame.js @@ -0,0 +1,63 @@ +//![0] +var blockSize = 40; +var maxColumn = 10; +var maxRow = 15; +var maxIndex = maxColumn * maxRow; +var board = new Array(maxIndex); +var component; + +//Index function used instead of a 2D array +function index(column, row) { + return column + (row * maxColumn); +} + +function startNewGame() { + //Delete blocks from previous game + for (var i = 0; i < maxIndex; i++) { + if (board[i] != null) + board[i].destroy(); + } + + //Calculate board size + maxColumn = Math.floor(background.width / blockSize); + maxRow = Math.floor(background.height / blockSize); + maxIndex = maxRow * maxColumn; + + //Initialize Board + board = new Array(maxIndex); + for (var column = 0; column < maxColumn; column++) { + for (var row = 0; row < maxRow; row++) { + board[index(column, row)] = null; + createBlock(column, row); + } + } +} + +function createBlock(column, row) { + if (component == null) + component = Qt.createComponent("Block.qml"); + + // Note that if Block.qml was not a local file, component.status would be + // Loading and we should wait for the component's statusChanged() signal to + // know when the file is downloaded and ready before calling createObject(). + if (component.status == Component.Ready) { + var dynamicObject = component.createObject(background); + if (dynamicObject == null) { + console.log("error creating block"); + console.log(component.errorString()); + return false; + } + dynamicObject.x = column * blockSize; + dynamicObject.y = row * blockSize; + dynamicObject.width = blockSize; + dynamicObject.height = blockSize; + board[index(column, row)] = dynamicObject; + } else { + console.log("error loading block component"); + console.log(component.errorString()); + return false; + } + return true; +} +//![0] + diff --git a/sources/pyside2/doc/tutorials/qmladvancedtutorial/samegame/samegame2/samegame.qml b/sources/pyside2/doc/tutorials/qmladvancedtutorial/samegame/samegame2/samegame.qml new file mode 100644 index 000000000..9f5cef44a --- /dev/null +++ b/sources/pyside2/doc/tutorials/qmladvancedtutorial/samegame/samegame2/samegame.qml @@ -0,0 +1,95 @@ +/**************************************************************************** +** +** Copyright (C) 2016 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the examples of PySide2. +** +** $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 1.0 +//![2] +import "samegame.js" as SameGame +//![2] + +Rectangle { + id: screen + + width: 490; height: 720 + + SystemPalette { id: activePalette } + + Item { + width: parent.width + anchors { top: parent.top; bottom: toolBar.top } + + Image { + id: background + anchors.fill: parent + source: "../shared/pics/background.jpg" + fillMode: Image.PreserveAspectCrop + } + } + + Rectangle { + id: toolBar + width: parent.width; height: 32 + color: activePalette.window + anchors.bottom: screen.bottom + +//![1] + Button { + anchors { left: parent.left; verticalCenter: parent.verticalCenter } + text: "New Game" + onClicked: SameGame.startNewGame() + } +//![1] + + Text { + id: score + anchors { right: parent.right; verticalCenter: parent.verticalCenter } + text: "Score: Who knows?" + } + } +} diff --git a/sources/pyside2/doc/tutorials/qmladvancedtutorial/samegame/samegame2/samegame2.qmlproject b/sources/pyside2/doc/tutorials/qmladvancedtutorial/samegame/samegame2/samegame2.qmlproject new file mode 100644 index 000000000..d4909f868 --- /dev/null +++ b/sources/pyside2/doc/tutorials/qmladvancedtutorial/samegame/samegame2/samegame2.qmlproject @@ -0,0 +1,16 @@ +import QmlProject 1.0 + +Project { + /* Include .qml, .js, and image files from current directory and subdirectories */ + QmlFiles { + directory: "." + } + JavaScriptFiles { + directory: "." + } + ImageFiles { + directory: "." + } + /* List of plugin directories passed to QML runtime */ + // importPaths: [ " ../exampleplugin " ] +} diff --git a/sources/pyside2/doc/tutorials/qmladvancedtutorial/samegame/samegame3/Block.qml b/sources/pyside2/doc/tutorials/qmladvancedtutorial/samegame/samegame3/Block.qml new file mode 100644 index 000000000..d0f3d7619 --- /dev/null +++ b/sources/pyside2/doc/tutorials/qmladvancedtutorial/samegame/samegame3/Block.qml @@ -0,0 +1,73 @@ +/**************************************************************************** +** +** Copyright (C) 2016 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the examples of PySide2. +** +** $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$ +** +****************************************************************************/ + +//![0] +import QtQuick 1.0 + +Item { + id: block + + property int type: 0 + + Image { + id: img + + anchors.fill: parent + source: { + if (type == 0) + return "../shared/pics/redStone.png"; + else if (type == 1) + return "../shared/pics/blueStone.png"; + else + return "../shared/pics/greenStone.png"; + } + } +} +//![0] diff --git a/sources/pyside2/doc/tutorials/qmladvancedtutorial/samegame/samegame3/Button.qml b/sources/pyside2/doc/tutorials/qmladvancedtutorial/samegame/samegame3/Button.qml new file mode 100644 index 000000000..2de0d9422 --- /dev/null +++ b/sources/pyside2/doc/tutorials/qmladvancedtutorial/samegame/samegame3/Button.qml @@ -0,0 +1,91 @@ +/**************************************************************************** +** +** Copyright (C) 2016 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the examples of PySide2. +** +** $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 1.0 + +Rectangle { + id: container + + property string text: "Button" + + signal clicked + + width: buttonLabel.width + 20; height: buttonLabel.height + 5 + border { width: 1; color: Qt.darker(activePalette.button) } + smooth: true + radius: 8 + + // color the button with a gradient + gradient: Gradient { + GradientStop { + position: 0.0 + color: { + if (mouseArea.pressed) + return activePalette.dark + else + return activePalette.light + } + } + GradientStop { position: 1.0; color: activePalette.button } + } + + MouseArea { + id: mouseArea + anchors.fill: parent + onClicked: container.clicked(); + } + + Text { + id: buttonLabel + anchors.centerIn: container + color: activePalette.buttonText + text: container.text + } +} diff --git a/sources/pyside2/doc/tutorials/qmladvancedtutorial/samegame/samegame3/Dialog.qml b/sources/pyside2/doc/tutorials/qmladvancedtutorial/samegame/samegame3/Dialog.qml new file mode 100644 index 000000000..897c5bf3b --- /dev/null +++ b/sources/pyside2/doc/tutorials/qmladvancedtutorial/samegame/samegame3/Dialog.qml @@ -0,0 +1,81 @@ +/**************************************************************************** +** +** Copyright (C) 2016 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the examples of PySide2. +** +** $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$ +** +****************************************************************************/ + +//![0] +import QtQuick 1.0 + +Rectangle { + id: container + + function show(text) { + dialogText.text = text; + container.opacity = 1; + } + + function hide() { + container.opacity = 0; + } + + width: dialogText.width + 20 + height: dialogText.height + 20 + opacity: 0 + + Text { + id: dialogText + anchors.centerIn: parent + text: "" + } + + MouseArea { + anchors.fill: parent + onClicked: hide(); + } +} +//![0] diff --git a/sources/pyside2/doc/tutorials/qmladvancedtutorial/samegame/samegame3/samegame.js b/sources/pyside2/doc/tutorials/qmladvancedtutorial/samegame/samegame3/samegame.js new file mode 100644 index 000000000..df5bdfb04 --- /dev/null +++ b/sources/pyside2/doc/tutorials/qmladvancedtutorial/samegame/samegame3/samegame.js @@ -0,0 +1,174 @@ +/* This script file handles the game logic */ +var maxColumn = 10; +var maxRow = 15; +var maxIndex = maxColumn * maxRow; +var board = new Array(maxIndex); +var component; + +//Index function used instead of a 2D array +function index(column, row) { + return column + (row * maxColumn); +} + +function startNewGame() { + //Calculate board size + maxColumn = Math.floor(gameCanvas.width / gameCanvas.blockSize); + maxRow = Math.floor(gameCanvas.height / gameCanvas.blockSize); + maxIndex = maxRow * maxColumn; + + //Close dialogs + dialog.hide(); + + //Initialize Board + board = new Array(maxIndex); + gameCanvas.score = 0; + for (var column = 0; column < maxColumn; column++) { + for (var row = 0; row < maxRow; row++) { + board[index(column, row)] = null; + createBlock(column, row); + } + } +} + +function createBlock(column, row) { + if (component == null) + component = Qt.createComponent("Block.qml"); + + // Note that if Block.qml was not a local file, component.status would be + // Loading and we should wait for the component's statusChanged() signal to + // know when the file is downloaded and ready before calling createObject(). + if (component.status == Component.Ready) { + var dynamicObject = component.createObject(gameCanvas); + if (dynamicObject == null) { + console.log("error creating block"); + console.log(component.errorString()); + return false; + } + dynamicObject.type = Math.floor(Math.random() * 3); + dynamicObject.x = column * gameCanvas.blockSize; + dynamicObject.y = row * gameCanvas.blockSize; + dynamicObject.width = gameCanvas.blockSize; + dynamicObject.height = gameCanvas.blockSize; + board[index(column, row)] = dynamicObject; + } else { + console.log("error loading block component"); + console.log(component.errorString()); + return false; + } + return true; +} + +var fillFound; //Set after a floodFill call to the number of blocks found +var floodBoard; //Set to 1 if the floodFill reaches off that node + +//![1] +function handleClick(xPos, yPos) { + var column = Math.floor(xPos / gameCanvas.blockSize); + var row = Math.floor(yPos / gameCanvas.blockSize); + if (column >= maxColumn || column < 0 || row >= maxRow || row < 0) + return; + if (board[index(column, row)] == null) + return; + //If it's a valid block, remove it and all connected (does nothing if it's not connected) + floodFill(column, row, -1); + if (fillFound <= 0) + return; + gameCanvas.score += (fillFound - 1) * (fillFound - 1); + shuffleDown(); + victoryCheck(); +} +//![1] + +function floodFill(column, row, type) { + if (board[index(column, row)] == null) + return; + var first = false; + if (type == -1) { + first = true; + type = board[index(column, row)].type; + + //Flood fill initialization + fillFound = 0; + floodBoard = new Array(maxIndex); + } + if (column >= maxColumn || column < 0 || row >= maxRow || row < 0) + return; + if (floodBoard[index(column, row)] == 1 || (!first && type != board[index(column, row)].type)) + return; + floodBoard[index(column, row)] = 1; + floodFill(column + 1, row, type); + floodFill(column - 1, row, type); + floodFill(column, row + 1, type); + floodFill(column, row - 1, type); + if (first == true && fillFound == 0) + return; //Can't remove single blocks + board[index(column, row)].opacity = 0; + board[index(column, row)] = null; + fillFound += 1; +} + +function shuffleDown() { + //Fall down + for (var column = 0; column < maxColumn; column++) { + var fallDist = 0; + for (var row = maxRow - 1; row >= 0; row--) { + if (board[index(column, row)] == null) { + fallDist += 1; + } else { + if (fallDist > 0) { + var obj = board[index(column, row)]; + obj.y += fallDist * gameCanvas.blockSize; + board[index(column, row + fallDist)] = obj; + board[index(column, row)] = null; + } + } + } + } + //Fall to the left + var fallDist = 0; + for (var column = 0; column < maxColumn; column++) { + if (board[index(column, maxRow - 1)] == null) { + fallDist += 1; + } else { + if (fallDist > 0) { + for (var row = 0; row < maxRow; row++) { + var obj = board[index(column, row)]; + if (obj == null) + continue; + obj.x -= fallDist * gameCanvas.blockSize; + board[index(column - fallDist, row)] = obj; + board[index(column, row)] = null; + } + } + } + } +} + +//![2] +function victoryCheck() { + //Award bonus points if no blocks left + var deservesBonus = true; + for (var column = maxColumn - 1; column >= 0; column--) + if (board[index(column, maxRow - 1)] != null) + deservesBonus = false; + if (deservesBonus) + gameCanvas.score += 500; + + //Check whether game has finished + if (deservesBonus || !(floodMoveCheck(0, maxRow - 1, -1))) + dialog.show("Game Over. Your score is " + gameCanvas.score); +} +//![2] + +//only floods up and right, to see if it can find adjacent same-typed blocks +function floodMoveCheck(column, row, type) { + if (column >= maxColumn || column < 0 || row >= maxRow || row < 0) + return false; + if (board[index(column, row)] == null) + return false; + var myType = board[index(column, row)].type; + if (type == myType) + return true; + return floodMoveCheck(column + 1, row, myType) || floodMoveCheck(column, row - 1, board[index(column, row)].type); +} + diff --git a/sources/pyside2/doc/tutorials/qmladvancedtutorial/samegame/samegame3/samegame.qml b/sources/pyside2/doc/tutorials/qmladvancedtutorial/samegame/samegame3/samegame.qml new file mode 100644 index 000000000..d10a2caa9 --- /dev/null +++ b/sources/pyside2/doc/tutorials/qmladvancedtutorial/samegame/samegame3/samegame.qml @@ -0,0 +1,119 @@ +/**************************************************************************** +** +** Copyright (C) 2016 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the examples of PySide2. +** +** $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$ +** +****************************************************************************/ + +//![0] +import QtQuick 1.0 +import "samegame.js" as SameGame + +Rectangle { + id: screen + + width: 490; height: 720 + + SystemPalette { id: activePalette } + + Item { + width: parent.width + anchors { top: parent.top; bottom: toolBar.top } + + Image { + id: background + anchors.fill: parent + source: "../shared/pics/background.jpg" + fillMode: Image.PreserveAspectCrop + } + +//![1] + Item { + id: gameCanvas + + property int score: 0 + property int blockSize: 40 + + width: parent.width - (parent.width % blockSize) + height: parent.height - (parent.height % blockSize) + anchors.centerIn: parent + + MouseArea { + anchors.fill: parent + onClicked: SameGame.handleClick(mouse.x, mouse.y) + } + } +//![1] + } + +//![2] + Dialog { + id: dialog + anchors.centerIn: parent + z: 100 + } +//![2] + + Rectangle { + id: toolBar + width: parent.width; height: 30 + color: activePalette.window + anchors.bottom: screen.bottom + + Button { + anchors { left: parent.left; verticalCenter: parent.verticalCenter } + text: "New Game" + onClicked: SameGame.startNewGame() + } + + Text { + id: score + anchors { right: parent.right; verticalCenter: parent.verticalCenter } + text: "Score: Who knows?" + } + } +} +//![0] diff --git a/sources/pyside2/doc/tutorials/qmladvancedtutorial/samegame/samegame3/samegame3.qmlproject b/sources/pyside2/doc/tutorials/qmladvancedtutorial/samegame/samegame3/samegame3.qmlproject new file mode 100644 index 000000000..d4909f868 --- /dev/null +++ b/sources/pyside2/doc/tutorials/qmladvancedtutorial/samegame/samegame3/samegame3.qmlproject @@ -0,0 +1,16 @@ +import QmlProject 1.0 + +Project { + /* Include .qml, .js, and image files from current directory and subdirectories */ + QmlFiles { + directory: "." + } + JavaScriptFiles { + directory: "." + } + ImageFiles { + directory: "." + } + /* List of plugin directories passed to QML runtime */ + // importPaths: [ " ../exampleplugin " ] +} diff --git a/sources/pyside2/doc/tutorials/qmladvancedtutorial/samegame/samegame4/content/BoomBlock.qml b/sources/pyside2/doc/tutorials/qmladvancedtutorial/samegame/samegame4/content/BoomBlock.qml new file mode 100644 index 000000000..97f63c2e3 --- /dev/null +++ b/sources/pyside2/doc/tutorials/qmladvancedtutorial/samegame/samegame4/content/BoomBlock.qml @@ -0,0 +1,132 @@ +/**************************************************************************** +** +** Copyright (C) 2016 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the examples of PySide2. +** +** $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 1.0 +import Qt.labs.particles 1.0 + +Item { + id: block + + property int type: 0 + property bool dying: false + + //![1] + property bool spawned: false + + Behavior on x { + enabled: spawned; + SpringAnimation{ spring: 2; damping: 0.2 } + } + Behavior on y { + SpringAnimation{ spring: 2; damping: 0.2 } + } + //![1] + + //![2] + Image { + id: img + + anchors.fill: parent + source: { + if (type == 0) + return "../../shared/pics/redStone.png"; + else if (type == 1) + return "../../shared/pics/blueStone.png"; + else + return "../../shared/pics/greenStone.png"; + } + opacity: 0 + + Behavior on opacity { + NumberAnimation { properties:"opacity"; duration: 200 } + } + } + //![2] + + //![3] + Particles { + id: particles + + width: 1; height: 1 + anchors.centerIn: parent + + emissionRate: 0 + lifeSpan: 700; lifeSpanDeviation: 600 + angle: 0; angleDeviation: 360; + velocity: 100; velocityDeviation: 30 + source: { + if (type == 0) + return "../../shared/pics/redStar.png"; + else if (type == 1) + return "../../shared/pics/blueStar.png"; + else + return "../../shared/pics/greenStar.png"; + } + } + //![3] + + //![4] + states: [ + State { + name: "AliveState" + when: spawned == true && dying == false + PropertyChanges { target: img; opacity: 1 } + }, + + State { + name: "DeathState" + when: dying == true + StateChangeScript { script: particles.burst(50); } + PropertyChanges { target: img; opacity: 0 } + StateChangeScript { script: block.destroy(1000); } + } + ] + //![4] +} diff --git a/sources/pyside2/doc/tutorials/qmladvancedtutorial/samegame/samegame4/content/Button.qml b/sources/pyside2/doc/tutorials/qmladvancedtutorial/samegame/samegame4/content/Button.qml new file mode 100644 index 000000000..2de0d9422 --- /dev/null +++ b/sources/pyside2/doc/tutorials/qmladvancedtutorial/samegame/samegame4/content/Button.qml @@ -0,0 +1,91 @@ +/**************************************************************************** +** +** Copyright (C) 2016 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the examples of PySide2. +** +** $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 1.0 + +Rectangle { + id: container + + property string text: "Button" + + signal clicked + + width: buttonLabel.width + 20; height: buttonLabel.height + 5 + border { width: 1; color: Qt.darker(activePalette.button) } + smooth: true + radius: 8 + + // color the button with a gradient + gradient: Gradient { + GradientStop { + position: 0.0 + color: { + if (mouseArea.pressed) + return activePalette.dark + else + return activePalette.light + } + } + GradientStop { position: 1.0; color: activePalette.button } + } + + MouseArea { + id: mouseArea + anchors.fill: parent + onClicked: container.clicked(); + } + + Text { + id: buttonLabel + anchors.centerIn: container + color: activePalette.buttonText + text: container.text + } +} diff --git a/sources/pyside2/doc/tutorials/qmladvancedtutorial/samegame/samegame4/content/Dialog.qml b/sources/pyside2/doc/tutorials/qmladvancedtutorial/samegame/samegame4/content/Dialog.qml new file mode 100644 index 000000000..b9787da1e --- /dev/null +++ b/sources/pyside2/doc/tutorials/qmladvancedtutorial/samegame/samegame4/content/Dialog.qml @@ -0,0 +1,117 @@ +/**************************************************************************** +** +** Copyright (C) 2016 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the examples of PySide2. +** +** $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 1.0 + +//![0] +Rectangle { + id: container +//![0] + +//![1] + property string inputText: textInput.text + signal closed + + function show(text) { + dialogText.text = text; + container.opacity = 1; + textInput.opacity = 0; + } + + function showWithInput(text) { + show(text); + textInput.opacity = 1; + textInput.focus = true; + textInput.text = "" + } + + function hide() { + textInput.focus = false; + container.opacity = 0; + container.closed(); + } +//![1] + + width: dialogText.width + textInput.width + 20 + height: dialogText.height + 20 + opacity: 0 + visible: opacity > 0 + + Text { + id: dialogText + anchors { verticalCenter: parent.verticalCenter; left: parent.left; leftMargin: 10 } + text: "" + } + +//![2] + TextInput { + id: textInput + anchors { verticalCenter: parent.verticalCenter; left: dialogText.right } + width: 80 + text: "" + + onAccepted: container.hide() // close dialog when Enter is pressed + } +//![2] + + MouseArea { + anchors.fill: parent + + onClicked: { + if (textInput.text == "" && textInput.opacity > 0) + textInput.openSoftwareInputPanel(); + else + hide(); + } + } + +//![3] +} +//![3] diff --git a/sources/pyside2/doc/tutorials/qmladvancedtutorial/samegame/samegame4/content/samegame.js b/sources/pyside2/doc/tutorials/qmladvancedtutorial/samegame/samegame4/content/samegame.js new file mode 100755 index 000000000..79ff0c19b --- /dev/null +++ b/sources/pyside2/doc/tutorials/qmladvancedtutorial/samegame/samegame4/content/samegame.js @@ -0,0 +1,225 @@ +/* This script file handles the game logic */ +var maxColumn = 10; +var maxRow = 15; +var maxIndex = maxColumn * maxRow; +var board = new Array(maxIndex); +var component; +var scoresURL = ""; +var gameDuration; + +//Index function used instead of a 2D array +function index(column, row) { + return column + (row * maxColumn); +} + +function startNewGame() { + //Delete blocks from previous game + for (var i = 0; i < maxIndex; i++) { + if (board[i] != null) + board[i].destroy(); + } + + //Calculate board size + maxColumn = Math.floor(gameCanvas.width / gameCanvas.blockSize); + maxRow = Math.floor(gameCanvas.height / gameCanvas.blockSize); + maxIndex = maxRow * maxColumn; + + //Close dialogs + nameInputDialog.hide(); + dialog.hide(); + + //Initialize Board + board = new Array(maxIndex); + gameCanvas.score = 0; + for (var column = 0; column < maxColumn; column++) { + for (var row = 0; row < maxRow; row++) { + board[index(column, row)] = null; + createBlock(column, row); + } + } + + gameDuration = new Date(); +} + +function createBlock(column, row) { + if (component == null) + component = Qt.createComponent("content/BoomBlock.qml"); + + // Note that if Block.qml was not a local file, component.status would be + // Loading and we should wait for the component's statusChanged() signal to + // know when the file is downloaded and ready before calling createObject(). + if (component.status == Component.Ready) { + var dynamicObject = component.createObject(gameCanvas); + if (dynamicObject == null) { + console.log("error creating block"); + console.log(component.errorString()); + return false; + } + dynamicObject.type = Math.floor(Math.random() * 3); + dynamicObject.x = column * gameCanvas.blockSize; + dynamicObject.y = row * gameCanvas.blockSize; + dynamicObject.width = gameCanvas.blockSize; + dynamicObject.height = gameCanvas.blockSize; + dynamicObject.spawned = true; + board[index(column, row)] = dynamicObject; + } else { + console.log("error loading block component"); + console.log(component.errorString()); + return false; + } + return true; +} + +var fillFound; //Set after a floodFill call to the number of blocks found +var floodBoard; //Set to 1 if the floodFill reaches off that node + +function handleClick(xPos, yPos) { + var column = Math.floor(xPos / gameCanvas.blockSize); + var row = Math.floor(yPos / gameCanvas.blockSize); + if (column >= maxColumn || column < 0 || row >= maxRow || row < 0) + return; + if (board[index(column, row)] == null) + return; + //If it's a valid block, remove it and all connected (does nothing if it's not connected) + floodFill(column, row, -1); + if (fillFound <= 0) + return; + gameCanvas.score += (fillFound - 1) * (fillFound - 1); + shuffleDown(); + victoryCheck(); +} + +function floodFill(column, row, type) { + if (board[index(column, row)] == null) + return; + var first = false; + if (type == -1) { + first = true; + type = board[index(column, row)].type; + + //Flood fill initialization + fillFound = 0; + floodBoard = new Array(maxIndex); + } + if (column >= maxColumn || column < 0 || row >= maxRow || row < 0) + return; + if (floodBoard[index(column, row)] == 1 || (!first && type != board[index(column, row)].type)) + return; + floodBoard[index(column, row)] = 1; + floodFill(column + 1, row, type); + floodFill(column - 1, row, type); + floodFill(column, row + 1, type); + floodFill(column, row - 1, type); + if (first == true && fillFound == 0) + return; //Can't remove single blocks + board[index(column, row)].dying = true; + board[index(column, row)] = null; + fillFound += 1; +} + +function shuffleDown() { + //Fall down + for (var column = 0; column < maxColumn; column++) { + var fallDist = 0; + for (var row = maxRow - 1; row >= 0; row--) { + if (board[index(column, row)] == null) { + fallDist += 1; + } else { + if (fallDist > 0) { + var obj = board[index(column, row)]; + obj.y = (row + fallDist) * gameCanvas.blockSize; + board[index(column, row + fallDist)] = obj; + board[index(column, row)] = null; + } + } + } + } + //Fall to the left + fallDist = 0; + for (column = 0; column < maxColumn; column++) { + if (board[index(column, maxRow - 1)] == null) { + fallDist += 1; + } else { + if (fallDist > 0) { + for (row = 0; row < maxRow; row++) { + obj = board[index(column, row)]; + if (obj == null) + continue; + obj.x = (fallDist - column) * gameCanvas.blockSize; + board[index(column - fallDist, row)] = obj; + board[index(column, row)] = null; + } + } + } + } +} + +//![3] +function victoryCheck() { +//![3] + //Award bonus points if no blocks left + var deservesBonus = true; + for (var column = maxColumn - 1; column >= 0; column--) + if (board[index(column, maxRow - 1)] != null) + deservesBonus = false; + if (deservesBonus) + gameCanvas.score += 500; + +//![4] + //Check whether game has finished + if (deservesBonus || !(floodMoveCheck(0, maxRow - 1, -1))) { + gameDuration = new Date() - gameDuration; + nameInputDialog.showWithInput("You won! Please enter your name: "); + } +} +//![4] + +//only floods up and right, to see if it can find adjacent same-typed blocks +function floodMoveCheck(column, row, type) { + if (column >= maxColumn || column < 0 || row >= maxRow || row < 0) + return false; + if (board[index(column, row)] == null) + return false; + var myType = board[index(column, row)].type; + if (type == myType) + return true; + return floodMoveCheck(column + 1, row, myType) || floodMoveCheck(column, row - 1, board[index(column, row)].type); +} + +//![2] +function saveHighScore(name) { + if (scoresURL != "") + sendHighScore(name); + + var db = openDatabaseSync("SameGameScores", "1.0", "Local SameGame High Scores", 100); + var dataStr = "INSERT INTO Scores VALUES(?, ?, ?, ?)"; + var data = [name, gameCanvas.score, maxColumn + "x" + maxRow, Math.floor(gameDuration / 1000)]; + db.transaction(function(tx) { + tx.executeSql('CREATE TABLE IF NOT EXISTS Scores(name TEXT, score NUMBER, gridSize TEXT, time NUMBER)'); + tx.executeSql(dataStr, data); + + var rs = tx.executeSql('SELECT * FROM Scores WHERE gridSize = "12x17" ORDER BY score desc LIMIT 10'); + var r = "\nHIGH SCORES for a standard sized grid\n\n" + for (var i = 0; i < rs.rows.length; i++) { + r += (i + 1) + ". " + rs.rows.item(i).name + ' got ' + rs.rows.item(i).score + ' points in ' + rs.rows.item(i).time + ' seconds.\n'; + } + dialog.show(r); + }); +} +//![2] + +//![1] +function sendHighScore(name) { + var postman = new XMLHttpRequest() + var postData = "name=" + name + "&score=" + gameCanvas.score + "&gridSize=" + maxColumn + "x" + maxRow + "&time=" + Math.floor(gameDuration / 1000); + postman.open("POST", scoresURL, true); + postman.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); + postman.onreadystatechange = function() { + if (postman.readyState == postman.DONE) { + dialog.show("Your score has been uploaded."); + } + } + postman.send(postData); +} +//![1] + diff --git a/sources/pyside2/doc/tutorials/qmladvancedtutorial/samegame/samegame4/highscores/README b/sources/pyside2/doc/tutorials/qmladvancedtutorial/samegame/samegame4/highscores/README new file mode 100644 index 000000000..eaa00fae3 --- /dev/null +++ b/sources/pyside2/doc/tutorials/qmladvancedtutorial/samegame/samegame4/highscores/README @@ -0,0 +1 @@ +The SameGame example can interface with a simple PHP script to store XML high score data on a remote server. We do not have a publically accessible server available for this use, but if you have access to a PHP capable webserver you can copy the files (score_data.xml, score.php, score_style.xsl) to it and alter the highscore_server variable at the top of the samegame.js file to point to it. diff --git a/sources/pyside2/doc/tutorials/qmladvancedtutorial/samegame/samegame4/highscores/score_data.xml b/sources/pyside2/doc/tutorials/qmladvancedtutorial/samegame/samegame4/highscores/score_data.xml new file mode 100755 index 000000000..c3fd90d9c --- /dev/null +++ b/sources/pyside2/doc/tutorials/qmladvancedtutorial/samegame/samegame4/highscores/score_data.xml @@ -0,0 +1,2 @@ +<record><score>1000000</score><name>Alan the Tester</name><gridSize>0x0</gridSize><seconds>0</seconds></record> +<record><score>6213</score><name>Alan</name><gridSize>12x17</gridSize><seconds>51</seconds></record> diff --git a/sources/pyside2/doc/tutorials/qmladvancedtutorial/samegame/samegame4/highscores/score_style.xsl b/sources/pyside2/doc/tutorials/qmladvancedtutorial/samegame/samegame4/highscores/score_style.xsl new file mode 100755 index 000000000..670354c96 --- /dev/null +++ b/sources/pyside2/doc/tutorials/qmladvancedtutorial/samegame/samegame4/highscores/score_style.xsl @@ -0,0 +1,28 @@ +<?xml version="1.0" encoding="ISO-8859-1"?> +<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> +<xsl:template match="/"> + <html> + <head><title>SameGame High Scores</title></head> + <body> + <h2>SameGame High Scores</h2> + <table border="1"> + <tr bgcolor="lightsteelblue"> + <th>Name</th> + <th>Score</th> + <th>Grid Size</th> + <th>Time, s</th> + </tr> + <xsl:for-each select="records/record"> + <xsl:sort select="score" data-type="number" order="descending"/> + <tr> + <td><xsl:value-of select="name"/></td> + <td><xsl:value-of select="score"/></td> + <td><xsl:value-of select="gridSize"/></td> + <td><xsl:value-of select="seconds"/></td> + </tr> + </xsl:for-each> + </table> + </body> + </html> +</xsl:template> +</xsl:stylesheet> diff --git a/sources/pyside2/doc/tutorials/qmladvancedtutorial/samegame/samegame4/highscores/scores.php b/sources/pyside2/doc/tutorials/qmladvancedtutorial/samegame/samegame4/highscores/scores.php new file mode 100755 index 000000000..daf480e21 --- /dev/null +++ b/sources/pyside2/doc/tutorials/qmladvancedtutorial/samegame/samegame4/highscores/scores.php @@ -0,0 +1,31 @@ +<?php + $score = $_POST["score"]; + echo "<html>"; + echo "<head><title>SameGame High Scores</title></head><body>"; + if($score > 0){#Sending in a new high score + $name = $_POST["name"]; + $grid = $_POST["gridSize"]; + $time = $_POST["time"]; + if($name == "") + $name = "Anonymous"; + $file = fopen("score_data.xml", "a"); + $ret = fwrite($file, "<record><score>". $score . "</score><name>" + . $name . "</name><gridSize>" . $grid . "</gridSize><seconds>" + . $time . "</seconds></record>\n"); + echo "Your score has been recorded. Thanks for playing!"; + if($ret == False) + echo "<br/> There was an error though, so don't expect to see that score again."; + }else{#Read high score list + #Now uses XSLT to display. So just print the file. With XML cruft added. + #Note that firefox at least won't apply the XSLT on a php file. So redirecting + $file = fopen("scores.xml", "w"); + $ret = fwrite($file, '<?xml version="1.0" encoding="ISO-8859-1"?>' . "\n" + . '<?xml-stylesheet type="text/xsl" href="score_style.xsl"?>' . "\n" + . "<records>\n" . file_get_contents("score_data.xml") . "</records>\n"); + if($ret == False) + echo "There was an internal error. Sorry."; + else + echo '<script type="text/javascript">window.location.replace("scores.xml")</script>'; + } + echo "</body></html>"; +?> diff --git a/sources/pyside2/doc/tutorials/qmladvancedtutorial/samegame/samegame4/samegame.qml b/sources/pyside2/doc/tutorials/qmladvancedtutorial/samegame/samegame4/samegame.qml new file mode 100644 index 000000000..b241d0924 --- /dev/null +++ b/sources/pyside2/doc/tutorials/qmladvancedtutorial/samegame/samegame4/samegame.qml @@ -0,0 +1,125 @@ +/**************************************************************************** +** +** Copyright (C) 2016 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the examples of PySide2. +** +** $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 1.0 +import "content" +import "content/samegame.js" as SameGame + +Rectangle { + id: screen + + width: 490; height: 720 + + SystemPalette { id: activePalette } + + Item { + width: parent.width + anchors { top: parent.top; bottom: toolBar.top } + + Image { + id: background + anchors.fill: parent + source: "../shared/pics/background.jpg" + fillMode: Image.PreserveAspectCrop + } + + Item { + id: gameCanvas + property int score: 0 + property int blockSize: 40 + + anchors.centerIn: parent + width: parent.width - (parent.width % blockSize); + height: parent.height - (parent.height % blockSize); + + MouseArea { + anchors.fill: parent; onClicked: SameGame.handleClick(mouse.x,mouse.y); + } + } + } + + Dialog { + id: dialog + anchors.centerIn: parent + z: 100 + } + + //![0] + Dialog { + id: nameInputDialog + anchors.centerIn: parent + z: 100 + + onClosed: { + if (nameInputDialog.inputText != "") + SameGame.saveHighScore(nameInputDialog.inputText); + } + } + //![0] + + Rectangle { + id: toolBar + width: parent.width; height: 30 + color: activePalette.window + anchors.bottom: screen.bottom + + Button { + anchors { left: parent.left; verticalCenter: parent.verticalCenter } + text: "New Game" + onClicked: SameGame.startNewGame() + } + + Text { + id: score + anchors { right: parent.right; verticalCenter: parent.verticalCenter } + text: "Score: " + gameCanvas.score + } + } +} diff --git a/sources/pyside2/doc/tutorials/qmladvancedtutorial/samegame/samegame4/samegame4.qmlproject b/sources/pyside2/doc/tutorials/qmladvancedtutorial/samegame/samegame4/samegame4.qmlproject new file mode 100644 index 000000000..d4909f868 --- /dev/null +++ b/sources/pyside2/doc/tutorials/qmladvancedtutorial/samegame/samegame4/samegame4.qmlproject @@ -0,0 +1,16 @@ +import QmlProject 1.0 + +Project { + /* Include .qml, .js, and image files from current directory and subdirectories */ + QmlFiles { + directory: "." + } + JavaScriptFiles { + directory: "." + } + ImageFiles { + directory: "." + } + /* List of plugin directories passed to QML runtime */ + // importPaths: [ " ../exampleplugin " ] +} diff --git a/sources/pyside2/doc/tutorials/qmladvancedtutorial/samegame/shared/pics/background.jpg b/sources/pyside2/doc/tutorials/qmladvancedtutorial/samegame/shared/pics/background.jpg Binary files differnew file mode 100644 index 000000000..903d395c8 --- /dev/null +++ b/sources/pyside2/doc/tutorials/qmladvancedtutorial/samegame/shared/pics/background.jpg diff --git a/sources/pyside2/doc/tutorials/qmladvancedtutorial/samegame/shared/pics/blueStar.png b/sources/pyside2/doc/tutorials/qmladvancedtutorial/samegame/shared/pics/blueStar.png Binary files differnew file mode 100644 index 000000000..ff9588f80 --- /dev/null +++ b/sources/pyside2/doc/tutorials/qmladvancedtutorial/samegame/shared/pics/blueStar.png diff --git a/sources/pyside2/doc/tutorials/qmladvancedtutorial/samegame/shared/pics/blueStone.png b/sources/pyside2/doc/tutorials/qmladvancedtutorial/samegame/shared/pics/blueStone.png Binary files differnew file mode 100644 index 000000000..20e43c75b --- /dev/null +++ b/sources/pyside2/doc/tutorials/qmladvancedtutorial/samegame/shared/pics/blueStone.png diff --git a/sources/pyside2/doc/tutorials/qmladvancedtutorial/samegame/shared/pics/greenStar.png b/sources/pyside2/doc/tutorials/qmladvancedtutorial/samegame/shared/pics/greenStar.png Binary files differnew file mode 100644 index 000000000..cd0685471 --- /dev/null +++ b/sources/pyside2/doc/tutorials/qmladvancedtutorial/samegame/shared/pics/greenStar.png diff --git a/sources/pyside2/doc/tutorials/qmladvancedtutorial/samegame/shared/pics/greenStone.png b/sources/pyside2/doc/tutorials/qmladvancedtutorial/samegame/shared/pics/greenStone.png Binary files differnew file mode 100644 index 000000000..b568a1900 --- /dev/null +++ b/sources/pyside2/doc/tutorials/qmladvancedtutorial/samegame/shared/pics/greenStone.png diff --git a/sources/pyside2/doc/tutorials/qmladvancedtutorial/samegame/shared/pics/redStar.png b/sources/pyside2/doc/tutorials/qmladvancedtutorial/samegame/shared/pics/redStar.png Binary files differnew file mode 100644 index 000000000..0a4dffe58 --- /dev/null +++ b/sources/pyside2/doc/tutorials/qmladvancedtutorial/samegame/shared/pics/redStar.png diff --git a/sources/pyside2/doc/tutorials/qmladvancedtutorial/samegame/shared/pics/redStone.png b/sources/pyside2/doc/tutorials/qmladvancedtutorial/samegame/shared/pics/redStone.png Binary files differnew file mode 100644 index 000000000..36b09a268 --- /dev/null +++ b/sources/pyside2/doc/tutorials/qmladvancedtutorial/samegame/shared/pics/redStone.png diff --git a/sources/pyside2/doc/tutorials/qmladvancedtutorial/samegame/shared/pics/star.png b/sources/pyside2/doc/tutorials/qmladvancedtutorial/samegame/shared/pics/star.png Binary files differnew file mode 100644 index 000000000..defbde53c --- /dev/null +++ b/sources/pyside2/doc/tutorials/qmladvancedtutorial/samegame/shared/pics/star.png diff --git a/sources/pyside2/doc/tutorials/qmladvancedtutorial/samegame/shared/pics/yellowStone.png b/sources/pyside2/doc/tutorials/qmladvancedtutorial/samegame/shared/pics/yellowStone.png Binary files differnew file mode 100644 index 000000000..b1ce76212 --- /dev/null +++ b/sources/pyside2/doc/tutorials/qmladvancedtutorial/samegame/shared/pics/yellowStone.png diff --git a/sources/pyside2/doc/tutorials/qmladvancedtutorial/samegame1.rst b/sources/pyside2/doc/tutorials/qmladvancedtutorial/samegame1.rst new file mode 100644 index 000000000..c8638ce06 --- /dev/null +++ b/sources/pyside2/doc/tutorials/qmladvancedtutorial/samegame1.rst @@ -0,0 +1,70 @@ +.. _samegame1: + +QML Advanced Tutorial 1 - Creating the Game Canvas and Blocks +************************************************************* + +Creating the application screen +=============================== + +The first step is to create the basic QML items in your application. + +To begin with, we create our Same Game application with a main screen like this: + +.. figure:: declarative-adv-tutorial1.png + :align: center + +This is defined by the main application file, ``samegame.qml``, which looks like this: + +.. pysideinclude:: samegame/samegame1/samegame.qml + :snippet: 0 + +This gives you a basic game window that includes the main canvas for the +blocks, a "New Game" button and a score display. + +One item you may not recognize here +is the SystemPalette item. This provides access to the Qt system palette +and is used to give the button a more native look-and-feel. + +Notice the anchors for the ``Item``, ``Button`` and ``Text`` elements are set using +group notation for readability. + +Adding Button and Block components +================================== + +The ``Button`` item in the code above is defined in a separate component file named ``Button.qml``. +To create a functional button, we use the QML elements Text and MouseArea inside a Rectangle. +Here is the ``Button.qml`` code: + +.. pysideinclude:: samegame/samegame1/Button.qml + :snippet: 0 + +This essentially defines a rectangle that contains text and can be clicked. The MouseArea +has an ``onClicked()`` handler that is implemented to emit the ``clicked()`` signal of the +``container`` when the area is clicked. + +In Same Game, the screen is filled with small blocks when the game begins. +Each block is just an item that contains an image. The block +code is defined in a separate ``Block.qml`` file: + +.. pysideinclude:: samegame/samegame1/Block.qml + :snippet: 0 + +At the moment, the block doesn't do anything; it is just an image. As the +tutorial progresses we will animate and give behaviors to the blocks. +We have not added any code yet to create the blocks; we will do this +in the next chapter. + +We have set the image to be the size of its parent Item using ``anchors.fill: parent``. +This means that when we dynamically create and resize the block items +later on in the tutorial, the image will be scaled automatically to the +correct size. + +Notice the relative path for the Image element's ``source`` property. +This path is relative to the location of the file that contains the Image element. +Alternatively, you could set the Image source to an absolute file path or a URL +that contains an image. + +You should be familiar with the code so far. We have just created some basic +elements to get started. Next, we will populate the game canvas with some blocks. + +[Previous :ref:`qmladvancedtutorial`] [Next :ref:`samegame2`]
\ No newline at end of file diff --git a/sources/pyside2/doc/tutorials/qmladvancedtutorial/samegame2.rst b/sources/pyside2/doc/tutorials/qmladvancedtutorial/samegame2.rst new file mode 100644 index 000000000..6cc12d5ca --- /dev/null +++ b/sources/pyside2/doc/tutorials/qmladvancedtutorial/samegame2.rst @@ -0,0 +1,71 @@ +.. _samegame2: + +QML Advanced Tutorial 2 - Populating the Game Canvas +**************************************************** + +Generating the blocks in JavaScript +=================================== + +Now that we've written some basic elements, let's start writing the game. + +The first task is to generate the game blocks. Each time the New Game button +is clicked, the game canvas is populated with a new, random set of +blocks. Since we need to dynamically generate new blocks for each new game, +we cannot use Repeater to define the blocks. Instead, we will +create the blocks in JavaScript. + +Here is the JavaScript code for generating the blocks, contained in a new +file, ``samegame.js``. The code is explained below. + +.. pysideinclude:: samegame/samegame2/samegame.js + :snippet: 0 + +The ``startNewGame()`` function deletes the blocks created in the previous game and +calculates the number of rows and columns of blocks required to fill the game window for the new game. +Then, it creates an array to store all the game +blocks, and calls ``createBlock()`` to create enough blocks to fill the game window. + +The ``createBlock()`` function creates a block from the ``Block.qml`` file +and moves the new block to its position on the game canvas. This involves several steps: + +* ``Qt.createComponent()`` is called to + generate an element from ``Block.qml``. If the component is ready, + we can call ``createObject()`` to create an instance of the ``Block`` + item. + +* If ``createObject()`` returned null (i.e. if there was an error + while loading the object), print the error information. + +* Place the block in its position on the board and set its width and + height. Also, store it in the blocks array for future reference. + +* Finally, print error information to the console if the component + could not be loaded for some reason (for example, if the file is + missing). + +Connecting JavaScript components to QML +======================================= + +Now we need to call the JavaScript code in ``samegame.js`` from our QML files. +To do this, we add this line to ``samegame.qml`` which imports +the JavaScript file as a module: + +.. pysideinclude:: samegame/samegame2/samegame.qml + :snippet: 2 + +This allows us to refer to any functions within ``samegame.js`` using "SameGame" +as a prefix: for example, ``SameGame.startNewGame()`` or ``SameGame.createBlock()``. +This means we can now connect the New Game button's ``onClicked`` handler to the ``startNewGame()`` +function, like this: + +.. pysideinclude:: samegame/samegame2/samegame.qml + :snippet: 1 + +So, when you click the New Game button, ``startNewGame()`` is called and generates a field of blocks, like this: + +.. figure:: declarative-adv-tutorial2.png + :align: center + +Now, we have a screen of blocks, and we can begin to add the game mechanics. + +[Previous :ref:`samegame1`] [Next :ref:`samegame3`]
\ No newline at end of file diff --git a/sources/pyside2/doc/tutorials/qmladvancedtutorial/samegame3.rst b/sources/pyside2/doc/tutorials/qmladvancedtutorial/samegame3.rst new file mode 100644 index 000000000..a1fe44edd --- /dev/null +++ b/sources/pyside2/doc/tutorials/qmladvancedtutorial/samegame3.rst @@ -0,0 +1,95 @@ +.. _samegame3: + +QML Advanced Tutorial 3 - Implementing the Game Logic +***************************************************** + +Making a playable game +====================== + +Now that we have all the game components, we can add the game logic that +dictates how a player interacts with the blocks and plays the game +until it is won or lost. + +To do this, we have added the following functions to ``samegame.js``: + + +* ``handleClick(x,y)`` +* ``floodFill(xIdx,yIdx,type)`` +* ``shuffleDown()`` +* ``victoryCheck()`` +* ``floodMoveCheck(xIdx, yIdx, type)`` + +As this is a tutorial about QML, not game design, we will only discuss ``handleClick()`` and ``victoryCheck()`` below since they interface directly with the QML elements. Note that although the game logic here is written in JavaScript, it could have been written in Python and then exposed to QML. + +Enabling mouse click interaction +================================ + +To make it easier for the JavaScript code to interface with the QML elements, we have added an Item called ``gameCanvas`` to ``samegame.qml``. It replaces the background as the item which contains the blocks. It also accepts mouse input from the user. Here is the item code: + +.. pysideinclude:: samegame/samegame3/samegame.qml + :snippet: 1 + +The ``gameCanvas`` item is the exact size of the board, and has a ``score`` property and a MouseArea to handle mouse clicks. +The blocks are now created as its children, and its dimensions are used to determine the board size so that +the application scales to the available screen size. +Since its size is bound to a multiple of ``blockSize``, ``blockSize`` was moved out of ``samegame.js`` and into ``samegame.qml`` as a QML property. +Note that it can still be accessed from the script. + +When clicked, the MouseArea calls ``handleClick()`` in ``samegame.js``, which determines whether the player's click should cause any blocks to be removed, and updates ``gameCanvas.score`` with the current score if necessary. Here is the ``handleClick()`` function: + +.. pysideinclude:: samegame/samegame3/samegame.js + :snippet: 1 + +Note that if ``score`` was a global variable in the ``samegame.js`` file you would not be able to bind to it. You can only bind to QML properties. + +Updating the score +================== + +When the player clicks a block and triggers \c handleClick(), \c handleClick() also calls \c victoryCheck() to update the score and to check whether the player has completed the game. Here is the \c victoryCheck() code: + +.. pysideinclude:: samegame/samegame3/samegame.js + :snippet: 2 + +This updates the ``gameCanvas.score`` value and displays a "Game Over" dialog if the game is finished. + +The Game Over dialog is created using a ``Dialog`` element that is defined in ``Dialog.qml``. Here is the ``Dialog.qml`` code. Notice how it is designed to be usable imperatively from the script file, via the functions and signals: + +.. pysideinclude:: samegame/samegame3/Dialog.qml + :snippet: 0 + +And this is how it is used in the main ``samegame.qml`` file: + +.. pysideinclude:: samegame/samegame3/samegame.qml + :snippet: 2 + +We give the dialog a ``z`` value of 100 to ensure it is displayed on top of our other components. The default ``z`` value for an item is 0. + + +A dash of color +--------------- + +It's not much fun to play Same Game if all the blocks are the same color, so we've modified the ``createBlock()`` function in ``samegame.js`` to randomly create a different type of block (for either red, green or blue) each time it is called. ``Block.qml`` has also changed so that each block contains a different image depending on its type: + +.. pysideinclude:: samegame/samegame3/Block.qml + :snippet: 0 + + +A working game +============== + +Now we now have a working game! The blocks can be clicked, the player can score, and the game can end (and then you can start a new one). +Here is a screenshot of what has been accomplished so far: + +.. figure:: declarative-adv-tutorial3.png + :align: center + +This is what ``samegame.qml`` looks like now: + +.. pysideinclude:: samegame/samegame3/samegame.qml + :snippet: 0 + +The game works, but it's a little boring right now. Where are the smooth animated transitions? Where are the high scores? +If you were a QML expert you could have written these in the first iteration, but in this tutorial they've been saved +until the next chapter - where your application becomes alive! + +[Previous :ref:`samegame2`] [Next :ref:`samegame4`] diff --git a/sources/pyside2/doc/tutorials/qmladvancedtutorial/samegame4.rst b/sources/pyside2/doc/tutorials/qmladvancedtutorial/samegame4.rst new file mode 100644 index 000000000..50aaff16a --- /dev/null +++ b/sources/pyside2/doc/tutorials/qmladvancedtutorial/samegame4.rst @@ -0,0 +1,187 @@ +.. _samegame4: + +QML Advanced Tutorial 4 - Finishing Touches +******************************************* + +Adding some flair +================= + +Now we're going to do two things to liven up the game: animate the blocks and add a High Score system. + +We've also cleaned up the directory structure for our application files. We now have a lot of files, so all the +JavaScript and QML files outside of ``samegame.qml`` have been moved into a new sub-directory named "content". + +In anticipation of the new block animations, ``Block.qml`` file is now renamed to ``BoomBlock.qml``. + +Animating block movement +------------------------ + +First we will animate the blocks so that they move in a fluid manner. QML has a number of methods for adding fluid +movement, and in this case we're going to use the Behavior element to add a SpringAnimation. +In ``BoomBlock.qml``, we apply a SpringAnimation behavior to the ``x`` and ``y`` properties so that the +block will follow and animate its movement in a spring-like fashion towards the specified position (whose +values will be set by ``samegame.js``).Here is the code added to ``BoomBlock.qml``: + +.. pysideinclude:: samegame/samegame4/content/BoomBlock.qml + :snippet: 1 + +The ``spring`` and ``damping`` values can be changed to modify the spring-like effect of the animation. + +The ``enabled: spawned`` setting refers to the ``spawned`` value that is set from ``createBlock()`` in ``samegame.js``. +This ensures the SpringAnimation on the ``x`` is only enabled after ``createBlock()`` has set the block to +the correct position. Otherwise, the blocks will slide out of the corner (0,0) when a game begins, instead of falling +from the top in rows. (Try commenting out ``enabled: spawned`` and see for yourself.) + +Animating block opacity changes +------------------------------- + +Next, we will add a smooth exit animation. For this, we'll use a Behavior element, which allows us to specify +a default animation when a property change occurs. In this case, when the ``opacity`` of a Block changes, we will +animate the opacity value so that it gradually fades in and out, instead of abruptly changing between fully +visible and invisible. To do this, we'll apply a Behavior on the ``opacity`` property of the ``Image`` +element in ``BoomBlock.qml``: + +.. pysideinclude:: samegame/samegame4/content/BoomBlock.qml + :snippet: 2 + +Note the ``opacity: 0`` which means the block is transparent when it is first created. We could set the opacity +in ``samegame.js`` when we create and destroy the blocks, +but instead we'll use states, since this is useful for the next animation we're going to add. +Initially, we add these States to the root element of ``BoomBlock.qml``: + +:: + + property bool dying: false + states: [ + State{ name: "AliveState"; when: spawned == true && dying == false + PropertyChanges { target: img; opacity: 1 } + }, + State{ name: "DeathState"; when: dying == true + PropertyChanges { target: img; opacity: 0 } + } + ] + +Now blocks will automatically fade in, as we already set ``spawned`` to true when we implemented the block animations. +To fade out, we set ``dying`` to true instead of setting opacity to 0 when a block is destroyed (in the ``floodFill()`` function). + +Adding particle effects +----------------------- + +Finally, we'll add a cool-looking particle effect to the blocks when they are destroyed. To do this, we first add a Particles element in +``BoomBlock.qml``, like so: + +.. pysideinclude:: samegame/samegame4/content/BoomBlock.qml + :snippet: 3 + +To fully understand this you should read the Particles documentation, but it's important to note that ``emissionRate`` is set +to zero so that particles are not emitted normally. +Also, we extend the ``dying`` State, which creates a burst of particles by calling the ``burst()`` method on the particles element. The code for the states now look +like this: + +.. pysideinclude:: samegame/samegame4/content/BoomBlock.qml + :snippet: 4 + +Now the game is beautifully animated, with subtle (or not-so-subtle) animations added for all of the +player's actions. The end result is shown below, with a different set of images to demonstrate basic theming: + +.. figure:: declarative-adv-tutorial4.gif + :align: center + +The theme change here is produced simply by replacing the block images. This can be done at runtime by changing the \l Image \c source property, so for a further challenge, you could add a button that toggles between themes with different images. + +Keeping a High Scores table +=========================== + +Another feature we might want to add to the game is a method of storing and retrieving high scores. + +To do this, we will show a dialog when the game is over to request the player's name and add it to a High Scores table. +This requires a few changes to ``Dialog.qml``. In addition to a ``Text`` element, it now has a +``TextInput`` child item for receiving keyboard text input: + +.. pysideinclude:: samegame/samegame4/content/Dialog.qml + :snippet: 2 + :prepend: Rectangle { + ... + :append: ... + } + + +We'll also add a ``showWithInput()`` function. The text input will only be visible if this function +is called instead of ``show()``. When the dialog is closed, it emits a ``closed()`` signal, and +other elements can retrieve the text entered by the user through an ``inputText`` property: + +.. pysideinclude:: samegame/samegame4/content/Dialog.qml + :snippet: 1 + :prepend: Rectangle { + ... + :append: ... + } + +Now the dialog can be used in ``samegame.qml``: + +.. pysideinclude:: samegame/samegame4/samegame.qml + :snippet: 0 + +When the dialog emits the ``closed`` signal, we call the new ``saveHighScore()`` function in ``samegame.js``, which stores the high score locally in an SQL database and also send the score to an online database if possible. + +The ``nameInputDialog`` is activated in the ``victoryCheck()`` function in ``samegame.js``: + +.. pysideinclude:: samegame/samegame4/content/samegame.js + :snippet: 4 + :prepend: function vitoryCheck() { + ... + +Storing high scores offline +--------------------------- + +Now we need to implement the functionality to actually save the High Scores table. + +Here is the ``saveHighScore()`` function in ``samegame.js``: + +.. pysideinclude:: samegame/samegame4/content/samegame.js + :snippet: 2 + +First we call ``sendHighScore()`` (explained in the section below) if it is possible to send the high scores to an online database. + +Then, we use the Offline Storage API to maintain a persistant SQL database unique to this application. We create an offline storage database for the high scores using ``openDatabase()`` and prepare the data and SQL query that we want to use to save it. The offline storage API uses SQL queries for data manipulation and retrival, and in the ``db.transaction()`` call we use three SQL queries to initialize the database (if necessary), and then add to and retrieve high scores. To use the returned data, we turn it into a string with one line per row returned, and show a dialog containing that string. + +This is one way of storing and displaying high scores locally, but certainly not the only way. A more complex alternative would be to create a high score dialog component, and pass it the results for processing and display (instead of reusing the ``Dialog``). This would allow a more themeable dialog that could beter present the high scores. If your QML is the UI for a Python application, you could also have passed the score to a Python function to store it locally in a variety of ways, including a simple format without SQL or in another SQL database. + +Storing high scores online +-------------------------- + +You've seen how you can store high scores locally, but it is also easy to integrate a web-enabled high score storage into your QML application. The implementation we've done here is very +simple: the high score data is posted to a php script running on a server somewhere, and that server then stores it and +displays it to visitors. You could also request an XML or QML file from that same server, which contains and displays the scores, +but that's beyond the scope of this tutorial. The php script we use here is available in the ``examples`` directory. + +If the player entered their name we can send the data to the web service us + +If the player enters a name, we send the data to the service using this code in ``samegame.js``: + +.. pysideinclude:: samegame/samegame4/content/samegame.js + :snippet: 1 + +The XMLHttpRequest in this code is the same as the ``XMLHttpRequest()`` as you'll find in standard browser JavaScript, and can be used in the same way to dynamically get XML +or QML from the web service to display the high scores. We don't worry about the response in this case - we just post the high +score data to the web server. If it had returned a QML file (or a URL to a QML file) you could instantiate it in much the same +way as you did with the blocks. + +An alternate way to access and submit web-based data would be to use QML elements designed for this purpose. XmlListModel +makes it very easy to fetch and display XML based data such as RSS in a QML application (see the Flickr demo for an example). + + +That's it! +========== + +By following this tutorial you've seen how you can write a fully functional application in QML: + +* Build your application with QML elements. +* Add application logic with JavaScript code. +* Add animations with Behaviors and states. +* Store persistent application data using, for example, the Offline Storage API or XMLHttpRequest. + +There is so much more to learn about QML that we haven't been able to cover in this tutorial. Check out all the +demos and examples and the documentation to see all the things you can do with QML! + +[Previous :ref:`samegame3`]
\ No newline at end of file diff --git a/sources/pyside2/doc/tutorials/qmltutorial/declarative-tutorial1.png b/sources/pyside2/doc/tutorials/qmltutorial/declarative-tutorial1.png Binary files differnew file mode 100644 index 000000000..c9d3844cb --- /dev/null +++ b/sources/pyside2/doc/tutorials/qmltutorial/declarative-tutorial1.png diff --git a/sources/pyside2/doc/tutorials/qmltutorial/declarative-tutorial2.png b/sources/pyside2/doc/tutorials/qmltutorial/declarative-tutorial2.png Binary files differnew file mode 100644 index 000000000..835484aa4 --- /dev/null +++ b/sources/pyside2/doc/tutorials/qmltutorial/declarative-tutorial2.png diff --git a/sources/pyside2/doc/tutorials/qmltutorial/declarative-tutorial3_animation.gif b/sources/pyside2/doc/tutorials/qmltutorial/declarative-tutorial3_animation.gif Binary files differnew file mode 100644 index 000000000..80b78dea9 --- /dev/null +++ b/sources/pyside2/doc/tutorials/qmltutorial/declarative-tutorial3_animation.gif diff --git a/sources/pyside2/doc/tutorials/qmltutorial/helloworld.tar.bz2 b/sources/pyside2/doc/tutorials/qmltutorial/helloworld.tar.bz2 Binary files differnew file mode 100644 index 000000000..001a5258d --- /dev/null +++ b/sources/pyside2/doc/tutorials/qmltutorial/helloworld.tar.bz2 diff --git a/sources/pyside2/doc/tutorials/qmltutorial/helloworld/Cell.qml b/sources/pyside2/doc/tutorials/qmltutorial/helloworld/Cell.qml new file mode 100644 index 000000000..a561e34db --- /dev/null +++ b/sources/pyside2/doc/tutorials/qmltutorial/helloworld/Cell.qml @@ -0,0 +1,82 @@ +/**************************************************************************** +** +** Copyright (C) 2016 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the examples of PySide2. +** +** $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$ +** +****************************************************************************/ + +//![0] +import QtQuick 1.0 + +//![1] +Item { + id: container +//![4] + property alias cellColor: rectangle.color +//![4] +//![5] + signal clicked(color cellColor) +//![5] + + width: 40; height: 25 +//![1] + +//![2] + Rectangle { + id: rectangle + border.color: "white" + anchors.fill: parent + } +//![2] + +//![3] + MouseArea { + anchors.fill: parent + onClicked: container.clicked(container.cellColor) + } +//![3] +} +//![0] diff --git a/sources/pyside2/doc/tutorials/qmltutorial/helloworld/tutorial1.qml b/sources/pyside2/doc/tutorials/qmltutorial/helloworld/tutorial1.qml new file mode 100644 index 000000000..ef26bb1aa --- /dev/null +++ b/sources/pyside2/doc/tutorials/qmltutorial/helloworld/tutorial1.qml @@ -0,0 +1,73 @@ +/**************************************************************************** +** +** Copyright (C) 2016 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the examples of PySide2. +** +** $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$ +** +****************************************************************************/ + +//![0] +//![3] +import QtQuick 1.0 +//![3] + +//![1] +Rectangle { + id: page + width: 500; height: 200 + color: "lightgray" +//![1] + +//![2] + Text { + id: helloText + text: "Hello world!" + y: 30 + anchors.horizontalCenter: page.horizontalCenter + font.pointSize: 24; font.bold: true + } +//![2] +} +//![0] diff --git a/sources/pyside2/doc/tutorials/qmltutorial/helloworld/tutorial2.qml b/sources/pyside2/doc/tutorials/qmltutorial/helloworld/tutorial2.qml new file mode 100644 index 000000000..f86da25b7 --- /dev/null +++ b/sources/pyside2/doc/tutorials/qmltutorial/helloworld/tutorial2.qml @@ -0,0 +1,82 @@ +/**************************************************************************** +** +** Copyright (C) 2016 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the examples of PySide2. +** +** $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$ +** +****************************************************************************/ + +//![0] +import QtQuick 1.0 + +Rectangle { + id: page + width: 500; height: 200 + color: "lightgray" + + Text { + id: helloText + text: "Hello world!" + y: 30 + anchors.horizontalCenter: page.horizontalCenter + font.pointSize: 24; font.bold: true + } + + Grid { + id: colorPicker + x: 4; anchors.bottom: page.bottom; anchors.bottomMargin: 4 + rows: 2; columns: 3; spacing: 3 + +//![1] + Cell { cellColor: "red"; onClicked: helloText.color = cellColor } +//![1] + Cell { cellColor: "green"; onClicked: helloText.color = cellColor } + Cell { cellColor: "blue"; onClicked: helloText.color = cellColor } + Cell { cellColor: "yellow"; onClicked: helloText.color = cellColor } + Cell { cellColor: "steelblue"; onClicked: helloText.color = cellColor } + Cell { cellColor: "black"; onClicked: helloText.color = cellColor } + } +} +//![0] diff --git a/sources/pyside2/doc/tutorials/qmltutorial/helloworld/tutorial3.qml b/sources/pyside2/doc/tutorials/qmltutorial/helloworld/tutorial3.qml new file mode 100644 index 000000000..7324c4df9 --- /dev/null +++ b/sources/pyside2/doc/tutorials/qmltutorial/helloworld/tutorial3.qml @@ -0,0 +1,101 @@ +/**************************************************************************** +** +** Copyright (C) 2016 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the examples of PySide2. +** +** $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$ +** +****************************************************************************/ + +//![0] +import QtQuick 1.0 + +Rectangle { + id: page + width: 500; height: 200 + color: "lightgray" + + Text { + id: helloText + text: "Hello world!" + y: 30 + anchors.horizontalCenter: page.horizontalCenter + font.pointSize: 24; font.bold: true + +//![1] + MouseArea { id: mouseArea; anchors.fill: parent } +//![1] + +//![2] + states: State { + name: "down"; when: mouseArea.pressed == true + PropertyChanges { target: helloText; y: 160; rotation: 180; color: "red" } + } +//![2] + +//![3] + transitions: Transition { + from: ""; to: "down"; reversible: true + ParallelAnimation { + NumberAnimation { properties: "y,rotation"; duration: 500; easing.type: Easing.InOutQuad } + ColorAnimation { duration: 500 } + } + } +//![3] + } + + Grid { + id: colorPicker + x: 4; anchors.bottom: page.bottom; anchors.bottomMargin: 4 + rows: 2; columns: 3; spacing: 3 + + Cell { cellColor: "red"; onClicked: helloText.color = cellColor } + Cell { cellColor: "green"; onClicked: helloText.color = cellColor } + Cell { cellColor: "blue"; onClicked: helloText.color = cellColor } + Cell { cellColor: "yellow"; onClicked: helloText.color = cellColor } + Cell { cellColor: "steelblue"; onClicked: helloText.color = cellColor } + Cell { cellColor: "black"; onClicked: helloText.color = cellColor } + } +} +//![0] diff --git a/sources/pyside2/doc/tutorials/qmltutorial/index.rst b/sources/pyside2/doc/tutorials/qmltutorial/index.rst new file mode 100644 index 000000000..35cda3170 --- /dev/null +++ b/sources/pyside2/doc/tutorials/qmltutorial/index.rst @@ -0,0 +1,25 @@ + +.. _qmltutorial: + +QML Tutorial +************ + +This tutorial gives an introduction to QML, the mark up language for Qt Quick. It doesn't cover everything; +the emphasis is on teaching the key principles, and features are introduced as needed. + +Through the different steps of this tutorial we will learn about QML basic types, we will create our own QML component +with properties and signals, and we will create a simple animation with the help of states and transitions. + +Chapter one starts with a minimal "Hello world" program and the following chapters introduce new concepts. + +The tutorial's source code can be downloaded :download:`here<helloworld.tar.bz2>`. + +Tutorial chapters: + +.. toctree:: + :maxdepth: 1 + + step1.rst + step2.rst + step3.rst + diff --git a/sources/pyside2/doc/tutorials/qmltutorial/step1.rst b/sources/pyside2/doc/tutorials/qmltutorial/step1.rst new file mode 100644 index 000000000..02a1095bc --- /dev/null +++ b/sources/pyside2/doc/tutorials/qmltutorial/step1.rst @@ -0,0 +1,66 @@ +.. _qmlbasictypes: + +QML Tutorial 1 - Basic Types +**************************** + +This first program is a very simple "Hello world" example that introduces some basic QML concepts. +The picture below is a screenshot of this program. + +.. figure:: declarative-tutorial1.png + :align: center + +Here is the QML code for the application: + +.. pysideinclude:: helloworld/tutorial1.qml + :snippet: 0 + +Walkthrough +=========== + +Import +------ + +First, we need to import the types that we need for this example. Most QML files will import the built-in QML +types (like Rectangle, Image, ...) that come with Qt, using: + +.. pysideinclude:: helloworld/tutorial1.qml + :snippet: 3 + +Rectangle element +----------------- + +.. pysideinclude:: helloworld/tutorial1.qml + :snippet: 1 + +We declare a root element of type Rectangle. It is one of the basic building blocks you can use to create an application in QML. +We give it an ``id`` to be able to refer to it later. In this case, we call it "page". +We also set the ``width``, ``height`` and ``color`` properties. +The Rectangle element contains many other properties (such as ``x`` and ``y``), but these are left at their default values. + +Text element +------------ + +.. pysideinclude code/tutorial1.qml + :snippet: 2 + +We add a Text element as a child of the root Rectangle element that displays the text 'Hello world!'. + +The ``y`` property is used to position the text vertically at 30 pixels from the top of its parent. + +The ``anchors.horizontalCenter`` property refers to the horizontal center of an element. +In this case, we specify that our text element should be horizontally centered in the *page* element. + +The ``font.pointSize`` and ``font.bold properties`` are related to fonts and use the dot notation. + + +Viewing the example +------------------- + +To view what you have created, run the QML Viewer tool (located in the ``bin directory`` of your Qt installation) with your filename as the first argument. +For example, to run the provided completed Tutorial 1 example from the install location, you would type: + +:: + + bin/qmlviewer tutorial1.qml + +[Previous :ref:`qmltutorial`][Next :ref:`qmlcomponents`] diff --git a/sources/pyside2/doc/tutorials/qmltutorial/step2.rst b/sources/pyside2/doc/tutorials/qmltutorial/step2.rst new file mode 100644 index 000000000..4dacd00a9 --- /dev/null +++ b/sources/pyside2/doc/tutorials/qmltutorial/step2.rst @@ -0,0 +1,81 @@ +.. _qmlcomponents: + +QML Tutorial 2 - QML Components +******************************* + +This chapter adds a color picker to change the color of the text. + +.. figure:: declarative-tutorial2.png + :align: center + +Our color picker is made of six cells with different colors. +To avoid writing the same code multiple times for each cell, we create a new ``Cell`` component. +A component provides a way of defining a new type that we can re-use in other QML files. +A QML component is like a black-box and interacts with the outside world through properties, signals and functions and is generally +defined in its own QML file. +The component's filename must always start with a capital letter. + +Here is the QML code for ``Cell.qml``: + +.. pysideinclude:: helloworld/Cell.qml + :snippet: 0 + +Walkthrough +=========== + +The Cell Component +------------------ + +.. pysideinclude:: helloworld/Cell.qml + :snippet: 1 + +The root element of our component is an Item with the ``id`` *container*. +An Item is the most basic visual element in QML and is often used as a container for other elements. + +.. pysideinclude:: helloworld/Cell.qml + :snippet: 4 + +We declare a ``cellColor`` property. This property is accessible from *outside* our component, this allows us +to instantiate the cells with different colors. +This property is just an alias to an existing property - the color of the rectangle that compose the cell. + +.. pysideinclude:: helloworld/Cell.qml + :snippet: 5 + +We want our component to also have a signal that we call *clicked* with a *cellColor* parameter of type *color*. +We will use this signal to change the color of the text in the main QML file later. + +.. pysideinclude:: helloworld/Cell.qml + :snippet: 2 + +Our cell component is basically a colored rectangle with the ``id`` *rectangle*. + +The ``anchors.fill`` property is a convenient way to set the size of an element. +In this case the rectangle will have the same size as its parent. + +.. pysideinclude:: helloworld/Cell.qml + :snippet: 3 + +In order to change the color of the text when clicking on a cell, we create a MouseArea element with +the same size as its parent. + +A MouseArea defines a signal called *clicked*. +When this signal is triggered we want to emit our own *clicked* signal with the color as parameter. + +The main QML file +----------------- + +In our main QML file, we use our ``Cell`` component to create the color picker: + +.. pysideinclude:: helloworld/tutorial2.qml + :snippet: 0 + +We create the color picker by putting 6 cells with different colors in a grid. + +.. pysideinclude:: helloworld/tutorial2.qml + :snippet: 1 + +When the *clicked* signal of our cell is triggered, we want to set the color of the text to the *cellColor* passed as a parameter. +We can react to any signal of our component through a property of the name *'onSignalName'*. + +[Previous :ref:`qmlbasictypes`][Next :ref:`qmlstatesandtransitions`] diff --git a/sources/pyside2/doc/tutorials/qmltutorial/step3.rst b/sources/pyside2/doc/tutorials/qmltutorial/step3.rst new file mode 100644 index 000000000..a72d1eac0 --- /dev/null +++ b/sources/pyside2/doc/tutorials/qmltutorial/step3.rst @@ -0,0 +1,47 @@ +.. _qmlstatesandtransitions: + +QML Tutorial 3 - States and Transitions +*************************************** + +In this chapter, we make this example a little bit more dynamic by introducing states and transitions. + +We want our text to move to the bottom of the screen, rotate and become red when clicked. + +.. figure:: declarative-tutorial3_animation.gif + :align: center + +Here is the QML code: + +.. pysideinclude:: helloworld/tutorial3.qml + :snippet: 0 + +Walkthrough +=========== + +.. pysideinclude:: helloworld/tutorial3.qml + :snippet: 2 + +First, we create a new *down* state for our text element. +This state will be activated when the MouseArea is pressed, and deactivated when it is released. + +The *down* state includes a set of property changes from our implicit *default state* +(the items as they were initially defined in the QML). +Specifically, we set the ``y`` property of the text to ``160``, the rotation to ``180`` and the ``color`` to red. + +.. pysideinclude:: helloworld/tutorial3.qml + :snippet: 3 + +Because we don't want the text to appear at the bottom instantly but rather move smoothly, +we add a transition between our two states. + +``from`` and ``to`` define the states between which the transition will run. +In this case, we want a transition from the default state to our *down* state. + +Because we want the same transition to be run in reverse when changing back from the *down* state to the default state, +we set ``reversible`` to ``true``. +This is equivalent to writing the two transitions separately. + +The ParallelAnimation element makes sure that the two types of animations (number and color) start at the same time. +We could also run them one after the other by using SequentialAnimation instead. + +[Previous :ref:`qmlcomponents`] |
