diff options
Diffstat (limited to 'examples/qtquick/positioners')
-rw-r--r-- | examples/qtquick/positioners/content/Button.qml | 78 | ||||
-rw-r--r-- | examples/qtquick/positioners/content/add.png | bin | 0 -> 810 bytes | |||
-rw-r--r-- | examples/qtquick/positioners/content/del.png | bin | 0 -> 488 bytes | |||
-rw-r--r-- | examples/qtquick/positioners/positioners-attachedproperties.qml | 106 | ||||
-rw-r--r-- | examples/qtquick/positioners/positioners.qml | 268 |
5 files changed, 452 insertions, 0 deletions
diff --git a/examples/qtquick/positioners/content/Button.qml b/examples/qtquick/positioners/content/Button.qml new file mode 100644 index 0000000000..ee3aa9057e --- /dev/null +++ b/examples/qtquick/positioners/content/Button.qml @@ -0,0 +1,78 @@ +/**************************************************************************** +** +** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies). +** Contact: http://www.qt-project.org/ +** +** This file is part of the examples of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:BSD$ +** 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 Nokia Corporation and its Subsidiary(-ies) nor +** the names of its contributors may be used to endorse or promote +** products derived from this software without specific prior written +** permission. +** +** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS +** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR +** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT +** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, +** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY +** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE." +** +** $QT_END_LICENSE$ +** +****************************************************************************/ + +import QtQuick 2.0 + +Rectangle { + id: page + + property string text + property string icon + signal clicked + + border.color: "black"; color: "steelblue"; radius: 5 + width: pix.width + textelement.width + 13 + height: pix.height + 10 + + Image { id: pix; x: 5; y:5; source: parent.icon } + + Text { + id: textelement + text: page.text; color: "white" + x: pix.width + pix.x + 3 + anchors.verticalCenter: pix.verticalCenter + } + + MouseArea { + id: mr + anchors.fill: parent + onClicked: { parent.focus = true; page.clicked() } + } + + states: State { + name: "pressed"; when: mr.pressed + PropertyChanges { target: textelement; x: 5 } + PropertyChanges { target: pix; x: textelement.x + textelement.width + 3 } + } + + transitions: Transition { + NumberAnimation { properties: "x,left"; easing.type: Easing.InOutQuad; duration: 200 } + } +} diff --git a/examples/qtquick/positioners/content/add.png b/examples/qtquick/positioners/content/add.png Binary files differnew file mode 100644 index 0000000000..1ee45423e3 --- /dev/null +++ b/examples/qtquick/positioners/content/add.png diff --git a/examples/qtquick/positioners/content/del.png b/examples/qtquick/positioners/content/del.png Binary files differnew file mode 100644 index 0000000000..8d2eaed523 --- /dev/null +++ b/examples/qtquick/positioners/content/del.png diff --git a/examples/qtquick/positioners/positioners-attachedproperties.qml b/examples/qtquick/positioners/positioners-attachedproperties.qml new file mode 100644 index 0000000000..a05927f5ea --- /dev/null +++ b/examples/qtquick/positioners/positioners-attachedproperties.qml @@ -0,0 +1,106 @@ +/**************************************************************************** +** +** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies). +** Contact: http://www.qt-project.org/ +** +** This file is part of the examples of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:BSD$ +** 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 Nokia Corporation and its Subsidiary(-ies) nor +** the names of its contributors may be used to endorse or promote +** products derived from this software without specific prior written +** permission. +** +** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS +** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR +** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT +** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, +** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY +** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE." +** +** $QT_END_LICENSE$ +** +****************************************************************************/ + +import QtQuick 2.0 + +Rectangle { + width: 400 + height: 100 + + // Create row with four rectangles, the fourth one is hidden + Row { + id: row + + Rectangle { + id: red + color: "red" + width: 100 + height: 100 + + // When mouse is clicked, display the values of the positioner + MouseArea { + anchors.fill: parent + onClicked: row.showInfo(red.Positioner) + } + } + + Rectangle { + id: green + color: "green" + width: 100 + height: 100 + + // When mouse is clicked, display the values of the positioner + MouseArea { + anchors.fill: parent + onClicked: row.showInfo(green.Positioner) + } + } + + Rectangle { + id: blue + color: "blue" + width: 100 + height: 100 + + // When mouse is clicked, display the values of the positioner + MouseArea { + anchors.fill: parent + onClicked: row.showInfo(blue.Positioner) + } + } + + // This rectangle is not visible, so it doesn't have a positioner value + Rectangle { + color: "black" + width: 100 + height: 100 + visible: false + } + + // Print the index of the child item in the positioner and convenience + // properties showing if it's the first or last item. + function showInfo(positioner) { + console.log("Item Index = " + positioner.index) + console.log(" isFirstItem = " + positioner.isFirstItem) + console.log(" isLastItem = " + positioner.isLastItem) + } + } +} diff --git a/examples/qtquick/positioners/positioners.qml b/examples/qtquick/positioners/positioners.qml new file mode 100644 index 0000000000..6627ad7dd4 --- /dev/null +++ b/examples/qtquick/positioners/positioners.qml @@ -0,0 +1,268 @@ +/**************************************************************************** +** +** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies). +** Contact: http://www.qt-project.org/ +** +** This file is part of the examples of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:BSD$ +** 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 Nokia Corporation and its Subsidiary(-ies) nor +** the names of its contributors may be used to endorse or promote +** products derived from this software without specific prior written +** permission. +** +** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS +** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR +** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT +** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, +** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY +** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE." +** +** $QT_END_LICENSE$ +** +****************************************************************************/ + +import QtQuick 2.0 +import "content" + +Rectangle { + id: page + width: 320; height: 480 + Flickable { + anchors.fill: parent + contentWidth: 420; contentHeight: 420 + + Column { + id: layout1 + y: 0 + move: Transition { + NumberAnimation { properties: "y"; easing.type: Easing.OutBounce } + } + add: Transition { + NumberAnimation { properties: "y"; easing.type: Easing.OutQuad } + } + + Rectangle { color: "red"; width: 100; height: 50; border.color: "black"; radius: 15 } + + Rectangle { + id: blueV1 + visible: opacity != 0 + width: 100; height: 50 + color: "lightsteelblue" + border.color: "black" + radius: 15 + Behavior on opacity { NumberAnimation {} } + } + + Rectangle { color: "green"; width: 100; height: 50; border.color: "black"; radius: 15 } + + Rectangle { + id: blueV2 + visible: opacity != 0 + width: 100; height: 50 + color: "lightsteelblue" + border.color: "black" + radius: 15 + Behavior on opacity { NumberAnimation {} } + } + + Rectangle { color: "orange"; width: 100; height: 50; border.color: "black"; radius: 15 } + } + + Row { + id: layout2 + y: 300 + move: Transition { + NumberAnimation { properties: "x"; easing.type: Easing.OutBounce } + } + add: Transition { + NumberAnimation { properties: "x"; easing.type: Easing.OutQuad } + } + + Rectangle { color: "red"; width: 50; height: 100; border.color: "black"; radius: 15 } + + Rectangle { + id: blueH1 + visible: opacity != 0 + width: 50; height: 100 + color: "lightsteelblue" + border.color: "black" + radius: 15 + Behavior on opacity { NumberAnimation {} } + } + + Rectangle { color: "green"; width: 50; height: 100; border.color: "black"; radius: 15 } + + Rectangle { + id: blueH2 + visible: opacity != 0 + width: 50; height: 100 + color: "lightsteelblue" + border.color: "black" + radius: 15 + Behavior on opacity { NumberAnimation {} } + } + + Rectangle { color: "orange"; width: 50; height: 100; border.color: "black"; radius: 15 } + } + + Button { + x: 135; y: 90 + text: "Remove" + icon: "del.png" + + onClicked: { + blueH2.opacity = 0 + blueH1.opacity = 0 + blueV1.opacity = 0 + blueV2.opacity = 0 + blueG1.opacity = 0 + blueG2.opacity = 0 + blueG3.opacity = 0 + blueF1.opacity = 0 + blueF2.opacity = 0 + blueF3.opacity = 0 + } + } + + Button { + x: 145; y: 140 + text: "Add" + icon: "add.png" + + onClicked: { + blueH2.opacity = 1 + blueH1.opacity = 1 + blueV1.opacity = 1 + blueV2.opacity = 1 + blueG1.opacity = 1 + blueG2.opacity = 1 + blueG3.opacity = 1 + blueF1.opacity = 1 + blueF2.opacity = 1 + blueF3.opacity = 1 + } + } + + Grid { + x: 260; y: 0 + columns: 3 + + move: Transition { + NumberAnimation { properties: "x,y"; easing.type: Easing.OutBounce } + } + + add: Transition { + NumberAnimation { properties: "x,y"; easing.type: Easing.OutBounce } + } + + Rectangle { color: "red"; width: 50; height: 50; border.color: "black"; radius: 15 } + + Rectangle { + id: blueG1 + visible: opacity != 0 + width: 50; height: 50 + color: "lightsteelblue" + border.color: "black" + radius: 15 + Behavior on opacity { NumberAnimation {} } + } + + Rectangle { color: "green"; width: 50; height: 50; border.color: "black"; radius: 15 } + + Rectangle { + id: blueG2 + visible: opacity != 0 + width: 50; height: 50 + color: "lightsteelblue" + border.color: "black" + radius: 15 + Behavior on opacity { NumberAnimation {} } + } + + Rectangle { color: "orange"; width: 50; height: 50; border.color: "black"; radius: 15 } + + Rectangle { + id: blueG3 + visible: opacity != 0 + width: 50; height: 50 + color: "lightsteelblue" + border.color: "black" + radius: 15 + Behavior on opacity { NumberAnimation {} } + } + + Rectangle { color: "red"; width: 50; height: 50; border.color: "black"; radius: 15 } + Rectangle { color: "green"; width: 50; height: 50; border.color: "black"; radius: 15 } + Rectangle { color: "orange"; width: 50; height: 50; border.color: "black"; radius: 15 } + } + + Flow { + id: layout4 + x: 260; y: 250; width: 150 + + move: Transition { + NumberAnimation { properties: "x,y"; easing.type: Easing.OutBounce } + } + + add: Transition { + NumberAnimation { properties: "x,y"; easing.type: Easing.OutBounce } + } + + Rectangle { color: "red"; width: 50; height: 50; border.color: "black"; radius: 15 } + + Rectangle { + id: blueF1 + visible: opacity != 0 + width: 60; height: 50 + color: "lightsteelblue" + border.color: "black" + radius: 15 + Behavior on opacity { NumberAnimation {} } + } + + Rectangle { color: "green"; width: 30; height: 50; border.color: "black"; radius: 15 } + + Rectangle { + id: blueF2 + visible: opacity != 0 + width: 60; height: 50 + color: "lightsteelblue" + border.color: "black" + radius: 15 + Behavior on opacity { NumberAnimation {} } + } + + Rectangle { color: "orange"; width: 50; height: 50; border.color: "black"; radius: 15 } + + Rectangle { + id: blueF3 + visible: opacity != 0 + width: 40; height: 50 + color: "lightsteelblue" + border.color: "black" + radius: 15 + Behavior on opacity { NumberAnimation {} } + } + + Rectangle { color: "red"; width: 80; height: 50; border.color: "black"; radius: 15 } + } + + } +} |