From eb6199da86b90a628e272381a28c91ab64c3dbfa Mon Sep 17 00:00:00 2001 From: Alan Alpert Date: Fri, 10 Aug 2012 16:51:01 +1000 Subject: Move examples around imageprovider is a QtQuick example. Models and Views examples are now split up, as one is a collection of C++ examples and the other is banded into a single QML example. Task-Number: QTBUG-24133 Change-Id: I81874871bd69ffef6a88df84f3d3f649e0c56bc6 Reviewed-by: hjk --- .../views/doc/images/qml-modelviews-example.png | Bin 0 -> 51072 bytes examples/quick/views/doc/src/views.qdoc | 83 ++++ examples/quick/views/gridview/gridview-example.qml | 85 ++++ .../quick/views/gridview/pics/AddressBook_48.png | Bin 0 -> 3350 bytes .../quick/views/gridview/pics/AudioPlayer_48.png | Bin 0 -> 3806 bytes examples/quick/views/gridview/pics/Camera_48.png | Bin 0 -> 3540 bytes examples/quick/views/gridview/pics/DateBook_48.png | Bin 0 -> 2610 bytes examples/quick/views/gridview/pics/EMail_48.png | Bin 0 -> 3655 bytes examples/quick/views/gridview/pics/TodoList_48.png | Bin 0 -> 3429 bytes .../quick/views/gridview/pics/VideoPlayer_48.png | Bin 0 -> 4151 bytes .../quick/views/listview/content/PetsModel.qml | 98 +++++ .../views/listview/content/PressAndHoldButton.qml | 82 ++++ .../quick/views/listview/content/RecipesModel.qml | 129 ++++++ .../quick/views/listview/content/SmallText.qml | 46 +++ .../quick/views/listview/content/TextButton.qml | 76 ++++ .../quick/views/listview/content/ToggleButton.qml | 58 +++ .../views/listview/content/pics/arrow-down.png | Bin 0 -> 594 bytes .../quick/views/listview/content/pics/arrow-up.png | Bin 0 -> 692 bytes .../views/listview/content/pics/fruit-salad.jpg | Bin 0 -> 17952 bytes .../views/listview/content/pics/hamburger.jpg | Bin 0 -> 8572 bytes .../quick/views/listview/content/pics/lemonade.jpg | Bin 0 -> 6645 bytes .../views/listview/content/pics/list-delete.png | Bin 0 -> 831 bytes .../views/listview/content/pics/minus-sign.png | Bin 0 -> 250 bytes .../quick/views/listview/content/pics/moreDown.png | Bin 0 -> 217 bytes .../quick/views/listview/content/pics/moreUp.png | Bin 0 -> 212 bytes .../quick/views/listview/content/pics/pancakes.jpg | Bin 0 -> 9163 bytes .../views/listview/content/pics/plus-sign.png | Bin 0 -> 462 bytes .../views/listview/content/pics/vegetable-soup.jpg | Bin 0 -> 8639 bytes examples/quick/views/listview/dynamiclist.qml | 224 +++++++++++ .../quick/views/listview/expandingdelegates.qml | 208 ++++++++++ examples/quick/views/listview/highlight.qml | 106 +++++ examples/quick/views/listview/highlightranges.qml | 169 ++++++++ examples/quick/views/listview/sections.qml | 127 ++++++ examples/quick/views/main.cpp | 41 ++ examples/quick/views/package/Delegate.qml | 78 ++++ examples/quick/views/package/view.qml | 92 +++++ examples/quick/views/parallax/content/Clock.qml | 140 +++++++ .../quick/views/parallax/content/ParallaxView.qml | 122 ++++++ .../quick/views/parallax/content/QuitButton.qml | 52 +++ examples/quick/views/parallax/content/Smiley.qml | 84 ++++ .../quick/views/parallax/content/background.png | Bin 0 -> 46895 bytes examples/quick/views/parallax/content/center.png | Bin 0 -> 765 bytes .../quick/views/parallax/content/clock-night.png | Bin 0 -> 23359 bytes examples/quick/views/parallax/content/clock.png | Bin 0 -> 20653 bytes examples/quick/views/parallax/content/hour.png | Bin 0 -> 625 bytes examples/quick/views/parallax/content/minute.png | Bin 0 -> 625 bytes .../views/parallax/content/pics/background.jpg | Bin 0 -> 209814 bytes .../views/parallax/content/pics/face-smile.png | Bin 0 -> 15408 bytes .../views/parallax/content/pics/home-page.png | Bin 0 -> 3051 bytes .../views/parallax/content/pics/home-page.svg | 445 +++++++++++++++++++++ .../quick/views/parallax/content/pics/shadow.png | Bin 0 -> 425 bytes .../views/parallax/content/pics/yast-joystick.png | Bin 0 -> 2723 bytes .../quick/views/parallax/content/pics/yast-wol.png | Bin 0 -> 3769 bytes examples/quick/views/parallax/content/quit.png | Bin 0 -> 583 bytes examples/quick/views/parallax/content/second.png | Bin 0 -> 303 bytes examples/quick/views/parallax/parallax.qml | 76 ++++ examples/quick/views/pathview/pathview-example.qml | 105 +++++ .../quick/views/pathview/pics/AddressBook_48.png | Bin 0 -> 3350 bytes .../quick/views/pathview/pics/AudioPlayer_48.png | Bin 0 -> 3806 bytes examples/quick/views/pathview/pics/Camera_48.png | Bin 0 -> 3540 bytes examples/quick/views/pathview/pics/DateBook_48.png | Bin 0 -> 2610 bytes examples/quick/views/pathview/pics/EMail_48.png | Bin 0 -> 3655 bytes examples/quick/views/pathview/pics/TodoList_48.png | Bin 0 -> 3429 bytes .../quick/views/pathview/pics/VideoPlayer_48.png | Bin 0 -> 4151 bytes examples/quick/views/views.pro | 17 + examples/quick/views/views.qml | 118 ++++++ examples/quick/views/views.qmlproject | 16 + .../quick/views/visualdatamodel/dragselection.qml | 200 +++++++++ examples/quick/views/visualdatamodel/slideshow.qml | 156 ++++++++ .../visualdatamodel/visualdatamodel.qmlproject | 14 + .../views/visualitemmodel/visualitemmodel.qml | 117 ++++++ 71 files changed, 3364 insertions(+) create mode 100644 examples/quick/views/doc/images/qml-modelviews-example.png create mode 100644 examples/quick/views/doc/src/views.qdoc create mode 100644 examples/quick/views/gridview/gridview-example.qml create mode 100644 examples/quick/views/gridview/pics/AddressBook_48.png create mode 100644 examples/quick/views/gridview/pics/AudioPlayer_48.png create mode 100644 examples/quick/views/gridview/pics/Camera_48.png create mode 100644 examples/quick/views/gridview/pics/DateBook_48.png create mode 100644 examples/quick/views/gridview/pics/EMail_48.png create mode 100644 examples/quick/views/gridview/pics/TodoList_48.png create mode 100644 examples/quick/views/gridview/pics/VideoPlayer_48.png create mode 100644 examples/quick/views/listview/content/PetsModel.qml create mode 100644 examples/quick/views/listview/content/PressAndHoldButton.qml create mode 100644 examples/quick/views/listview/content/RecipesModel.qml create mode 100644 examples/quick/views/listview/content/SmallText.qml create mode 100644 examples/quick/views/listview/content/TextButton.qml create mode 100644 examples/quick/views/listview/content/ToggleButton.qml create mode 100644 examples/quick/views/listview/content/pics/arrow-down.png create mode 100644 examples/quick/views/listview/content/pics/arrow-up.png create mode 100644 examples/quick/views/listview/content/pics/fruit-salad.jpg create mode 100644 examples/quick/views/listview/content/pics/hamburger.jpg create mode 100644 examples/quick/views/listview/content/pics/lemonade.jpg create mode 100644 examples/quick/views/listview/content/pics/list-delete.png create mode 100644 examples/quick/views/listview/content/pics/minus-sign.png create mode 100644 examples/quick/views/listview/content/pics/moreDown.png create mode 100644 examples/quick/views/listview/content/pics/moreUp.png create mode 100644 examples/quick/views/listview/content/pics/pancakes.jpg create mode 100644 examples/quick/views/listview/content/pics/plus-sign.png create mode 100644 examples/quick/views/listview/content/pics/vegetable-soup.jpg create mode 100644 examples/quick/views/listview/dynamiclist.qml create mode 100644 examples/quick/views/listview/expandingdelegates.qml create mode 100644 examples/quick/views/listview/highlight.qml create mode 100644 examples/quick/views/listview/highlightranges.qml create mode 100644 examples/quick/views/listview/sections.qml create mode 100644 examples/quick/views/main.cpp create mode 100644 examples/quick/views/package/Delegate.qml create mode 100644 examples/quick/views/package/view.qml create mode 100644 examples/quick/views/parallax/content/Clock.qml create mode 100644 examples/quick/views/parallax/content/ParallaxView.qml create mode 100644 examples/quick/views/parallax/content/QuitButton.qml create mode 100644 examples/quick/views/parallax/content/Smiley.qml create mode 100644 examples/quick/views/parallax/content/background.png create mode 100644 examples/quick/views/parallax/content/center.png create mode 100644 examples/quick/views/parallax/content/clock-night.png create mode 100644 examples/quick/views/parallax/content/clock.png create mode 100644 examples/quick/views/parallax/content/hour.png create mode 100644 examples/quick/views/parallax/content/minute.png create mode 100644 examples/quick/views/parallax/content/pics/background.jpg create mode 100644 examples/quick/views/parallax/content/pics/face-smile.png create mode 100644 examples/quick/views/parallax/content/pics/home-page.png create mode 100644 examples/quick/views/parallax/content/pics/home-page.svg create mode 100644 examples/quick/views/parallax/content/pics/shadow.png create mode 100644 examples/quick/views/parallax/content/pics/yast-joystick.png create mode 100644 examples/quick/views/parallax/content/pics/yast-wol.png create mode 100644 examples/quick/views/parallax/content/quit.png create mode 100644 examples/quick/views/parallax/content/second.png create mode 100644 examples/quick/views/parallax/parallax.qml create mode 100644 examples/quick/views/pathview/pathview-example.qml create mode 100644 examples/quick/views/pathview/pics/AddressBook_48.png create mode 100644 examples/quick/views/pathview/pics/AudioPlayer_48.png create mode 100644 examples/quick/views/pathview/pics/Camera_48.png create mode 100644 examples/quick/views/pathview/pics/DateBook_48.png create mode 100644 examples/quick/views/pathview/pics/EMail_48.png create mode 100644 examples/quick/views/pathview/pics/TodoList_48.png create mode 100644 examples/quick/views/pathview/pics/VideoPlayer_48.png create mode 100644 examples/quick/views/views.pro create mode 100644 examples/quick/views/views.qml create mode 100644 examples/quick/views/views.qmlproject create mode 100644 examples/quick/views/visualdatamodel/dragselection.qml create mode 100644 examples/quick/views/visualdatamodel/slideshow.qml create mode 100644 examples/quick/views/visualdatamodel/visualdatamodel.qmlproject create mode 100644 examples/quick/views/visualitemmodel/visualitemmodel.qml (limited to 'examples/quick/views') diff --git a/examples/quick/views/doc/images/qml-modelviews-example.png b/examples/quick/views/doc/images/qml-modelviews-example.png new file mode 100644 index 0000000000..b40334653d Binary files /dev/null and b/examples/quick/views/doc/images/qml-modelviews-example.png differ diff --git a/examples/quick/views/doc/src/views.qdoc b/examples/quick/views/doc/src/views.qdoc new file mode 100644 index 0000000000..fe135db0d7 --- /dev/null +++ b/examples/quick/views/doc/src/views.qdoc @@ -0,0 +1,83 @@ +/**************************************************************************** +** +** Copyright (C) 2012 Digia Plc and/or its subsidiary(-ies). +** Contact: http://www.qt-project.org/legal +** +** This file is part of the documentation of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:FDL$ +** 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 Digia. For licensing terms and +** conditions see http://qt.digia.com/licensing. For further information +** use the contact form at http://qt.digia.com/contact-us. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: http://www.gnu.org/copyleft/fdl.html. +** $QT_END_LICENSE$ +** +****************************************************************************/ + +/*! + \title QtQuick Examples - Views + \example quick/views + \brief This is a collection of QML model/view examples + \image qml-modelviews-example.png + \ingroup qtquickexamples + + This is a collection of small QML examples relating to model and view functionality. They demonstrate how to show data from a model using the QtQuick view types. + + \section2 GridView and PathView demonstrate usage of these elements to display views. + \snippet quick/modelviews/gridview/gridview-example.qml 0 + + \section2 Dynamic List demonstrates animation of runtime additions and removals to a ListView. + + The ListView.onAdd signal handler runs an animation when new items are added to the + view, and the ListView.onRemove another when they are removed. + \snippet quick/modelviews/listview/dynamiclist.qml 0 + \snippet quick/modelviews/listview/dynamiclist.qml 1 + + \section2 Expanding Delegates demonstrates delegates that expand when activated. + + It has a complex delegate the size and appearance of which can change, displacing + other items in the view. + \snippet quick/modelviews/listview/expandingdelegates.qml 0 + \snippet quick/modelviews/listview/expandingdelegates.qml 1 + \snippet quick/modelviews/listview/expandingdelegates.qml 2 + \snippet quick/modelviews/listview/expandingdelegates.qml 3 + + \section2 Highlight demonstrates adding a custom highlight to a ListView. + \snippet quick/modelviews/listview/highlight.qml 0 + + \section2 Highlight Ranges shows the three different highlight range modes of ListView. + \snippet quick/modelviews/listview/highlightranges.qml 0 + \snippet quick/modelviews/listview/highlightranges.qml 1 + \snippet quick/modelviews/listview/highlightranges.qml 2 + + \section2 Sections demonstrates the various section headers and footers available to ListView. + \snippet quick/modelviews/listview/sections.qml 0 + + \section2 Packages demonstrates using Packages to transition delegates between two views. + + It has a Package which defines delegate items for each view and an item that can + be transferred between delegates. + + \snippet quick/modelviews/package/Delegate.qml 0 + + A VisualDataModel allows the individual views to access their specific items from + the shared package delegate. + + \snippet quick/modelviews/package/view.qml 0 + + \section2 VisualItemModel uses a VisualItemModel for the model instead of a ListModel. + + \snippet quick/modelviews/visualitemmodel/visualitemmodel.qml 0 +*/ + diff --git a/examples/quick/views/gridview/gridview-example.qml b/examples/quick/views/gridview/gridview-example.qml new file mode 100644 index 0000000000..49d1174bee --- /dev/null +++ b/examples/quick/views/gridview/gridview-example.qml @@ -0,0 +1,85 @@ +/**************************************************************************** +** +** Copyright (C) 2012 Digia Plc and/or its subsidiary(-ies). +** Contact: http://www.qt-project.org/legal +** +** 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 Digia Plc 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: 300; height: 400 + color: "white" + + ListModel { + id: appModel + ListElement { name: "Music"; icon: "pics/AudioPlayer_48.png" } + ListElement { name: "Movies"; icon: "pics/VideoPlayer_48.png" } + ListElement { name: "Camera"; icon: "pics/Camera_48.png" } + ListElement { name: "Calendar"; icon: "pics/DateBook_48.png" } + ListElement { name: "Messaging"; icon: "pics/EMail_48.png" } + ListElement { name: "Todo List"; icon: "pics/TodoList_48.png" } + ListElement { name: "Contacts"; icon: "pics/AddressBook_48.png" } + } +//! [0] + GridView { + anchors.fill: parent + cellWidth: 100; cellHeight: 100 + focus: true + model: appModel + + highlight: Rectangle { width: 80; height: 80; color: "lightsteelblue" } + + delegate: Item { + width: 100; height: 100 + + Image { + id: myIcon + y: 20; anchors.horizontalCenter: parent.horizontalCenter + source: icon + } + Text { + anchors { top: myIcon.bottom; horizontalCenter: parent.horizontalCenter } + text: name + } + MouseArea { + anchors.fill: parent + onClicked: parent.GridView.view.currentIndex = index + } + } + } +//! [0] +} diff --git a/examples/quick/views/gridview/pics/AddressBook_48.png b/examples/quick/views/gridview/pics/AddressBook_48.png new file mode 100644 index 0000000000..1ab7c8eec1 Binary files /dev/null and b/examples/quick/views/gridview/pics/AddressBook_48.png differ diff --git a/examples/quick/views/gridview/pics/AudioPlayer_48.png b/examples/quick/views/gridview/pics/AudioPlayer_48.png new file mode 100644 index 0000000000..f4b8689f87 Binary files /dev/null and b/examples/quick/views/gridview/pics/AudioPlayer_48.png differ diff --git a/examples/quick/views/gridview/pics/Camera_48.png b/examples/quick/views/gridview/pics/Camera_48.png new file mode 100644 index 0000000000..c76b524945 Binary files /dev/null and b/examples/quick/views/gridview/pics/Camera_48.png differ diff --git a/examples/quick/views/gridview/pics/DateBook_48.png b/examples/quick/views/gridview/pics/DateBook_48.png new file mode 100644 index 0000000000..58f5787fb8 Binary files /dev/null and b/examples/quick/views/gridview/pics/DateBook_48.png differ diff --git a/examples/quick/views/gridview/pics/EMail_48.png b/examples/quick/views/gridview/pics/EMail_48.png new file mode 100644 index 0000000000..d6d84a61be Binary files /dev/null and b/examples/quick/views/gridview/pics/EMail_48.png differ diff --git a/examples/quick/views/gridview/pics/TodoList_48.png b/examples/quick/views/gridview/pics/TodoList_48.png new file mode 100644 index 0000000000..0988448d9b Binary files /dev/null and b/examples/quick/views/gridview/pics/TodoList_48.png differ diff --git a/examples/quick/views/gridview/pics/VideoPlayer_48.png b/examples/quick/views/gridview/pics/VideoPlayer_48.png new file mode 100644 index 0000000000..52638c50a7 Binary files /dev/null and b/examples/quick/views/gridview/pics/VideoPlayer_48.png differ diff --git a/examples/quick/views/listview/content/PetsModel.qml b/examples/quick/views/listview/content/PetsModel.qml new file mode 100644 index 0000000000..22c7487fe1 --- /dev/null +++ b/examples/quick/views/listview/content/PetsModel.qml @@ -0,0 +1,98 @@ +/**************************************************************************** +** +** Copyright (C) 2012 Digia Plc and/or its subsidiary(-ies). +** Contact: http://www.qt-project.org/legal +** +** 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 Digia Plc 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 + +ListModel { + ListElement { + name: "Polly" + type: "Parrot" + age: 12 + size: "Small" + } + ListElement { + name: "Penny" + type: "Turtle" + age: 4 + size: "Small" + } + ListElement { + name: "Warren" + type: "Rabbit" + age: 2 + size: "Small" + } + ListElement { + name: "Spot" + type: "Dog" + age: 9 + size: "Medium" + } + ListElement { + name: "Schrödinger" + type: "Cat" + age: 2 + size: "Medium" + } + ListElement { + name: "Joey" + type: "Kangaroo" + age: 1 + size: "Medium" + } + ListElement { + name: "Kimba" + type: "Bunny" + age: 65 + size: "Large" + } + ListElement { + name: "Rover" + type: "Dog" + age: 5 + size: "Large" + } + ListElement { + name: "Tiny" + type: "Elephant" + age: 15 + size: "Large" + } +} diff --git a/examples/quick/views/listview/content/PressAndHoldButton.qml b/examples/quick/views/listview/content/PressAndHoldButton.qml new file mode 100644 index 0000000000..3b0883d5e1 --- /dev/null +++ b/examples/quick/views/listview/content/PressAndHoldButton.qml @@ -0,0 +1,82 @@ +/**************************************************************************** +** +** Copyright (C) 2012 Digia Plc and/or its subsidiary(-ies). +** Contact: http://www.qt-project.org/legal +** +** 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 Digia Plc 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 + +Image { + id: container + + property int repeatDelay: 300 + property int repeatDuration: 75 + property bool pressed: false + + signal clicked + + scale: pressed ? 0.9 : 1 + + function release() { + autoRepeatClicks.stop() + container.pressed = false + } + + SequentialAnimation on pressed { + id: autoRepeatClicks + running: false + + PropertyAction { target: container; property: "pressed"; value: true } + ScriptAction { script: container.clicked() } + PauseAnimation { duration: repeatDelay } + + SequentialAnimation { + loops: Animation.Infinite + ScriptAction { script: container.clicked() } + PauseAnimation { duration: repeatDuration } + } + } + + MouseArea { + anchors.fill: parent + + onPressed: autoRepeatClicks.start() + onReleased: container.release() + onCanceled: container.release() + } +} + diff --git a/examples/quick/views/listview/content/RecipesModel.qml b/examples/quick/views/listview/content/RecipesModel.qml new file mode 100644 index 0000000000..e98bff990e --- /dev/null +++ b/examples/quick/views/listview/content/RecipesModel.qml @@ -0,0 +1,129 @@ +/**************************************************************************** +** +** Copyright (C) 2012 Digia Plc and/or its subsidiary(-ies). +** Contact: http://www.qt-project.org/legal +** +** 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 Digia Plc 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 + +ListModel { + ListElement { + title: "Pancakes" + picture: "content/pics/pancakes.jpg" + ingredients: " + + " + method: " +
    +
  1. Sift flour and sugar together into a bowl. Add a pinch of salt. +
  2. Beat milk and egg together, then add to dry ingredients. Beat until smooth. +
  3. Pour mixture into a pan on medium heat and cook until bubbles appear on the surface. +
  4. Turn over and cook other side until golden. +
+ " + } + ListElement { + title: "Fruit Salad" + picture: "content/pics/fruit-salad.jpg" + ingredients: "* Seasonal Fruit" + method: "* Chop fruit and place in a bowl." + } + ListElement { + title: "Vegetable Soup" + picture: "content/pics/vegetable-soup.jpg" + ingredients: " + + " + method: " +
    +
  1. Chop vegetables. +
  2. Boil in water until vegetables soften. +
  3. Season with salt and pepper to taste. +
+ " + } + ListElement { + title: "Hamburger" + picture: "content/pics/hamburger.jpg" + ingredients: " + + " + method: " +
    +
  1. Mix the beef, together with seasoning, in a food processor. +
  2. Shape the beef into burgers. +
  3. Grill the burgers for about 5 mins on each side (until cooked through) +
  4. Serve each burger on a bun with ketchup, cheese, lettuce, tomato and onion. +
+ " + } + ListElement { + title: "Lemonade" + picture: "content/pics/lemonade.jpg" + ingredients: " + + " + method: " +
    +
  1. Pour 2 cups of warm water into a pitcher and stir in sugar until it dissolves. +
  2. Pour in lemon juice, stir again, and add 4 cups of cold water. +
  3. Chill or serve over ice cubes. +
+ " + } +} diff --git a/examples/quick/views/listview/content/SmallText.qml b/examples/quick/views/listview/content/SmallText.qml new file mode 100644 index 0000000000..506e66bba9 --- /dev/null +++ b/examples/quick/views/listview/content/SmallText.qml @@ -0,0 +1,46 @@ +/**************************************************************************** +** +** Copyright (C) 2012 Digia Plc and/or its subsidiary(-ies). +** Contact: http://www.qt-project.org/legal +** +** 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 Digia Plc 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 + +Text { + font.pixelSize: 12 +} + diff --git a/examples/quick/views/listview/content/TextButton.qml b/examples/quick/views/listview/content/TextButton.qml new file mode 100644 index 0000000000..3b016dcc16 --- /dev/null +++ b/examples/quick/views/listview/content/TextButton.qml @@ -0,0 +1,76 @@ +/**************************************************************************** +** +** Copyright (C) 2012 Digia Plc and/or its subsidiary(-ies). +** Contact: http://www.qt-project.org/legal +** +** 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 Digia Plc 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: container + + property alias text: label.text + + signal clicked + + width: label.width + 20; height: label.height + 6 + antialiasing: true + radius: 10 + + gradient: Gradient { + GradientStop { id: gradientStop; position: 0.0; color: "#eeeeee" } + GradientStop { position: 1.0; color: "#888888" } + } + + MouseArea { + id: mouseArea + anchors.fill: parent + onClicked: { container.clicked() } + } + + Text { + id: label + anchors.centerIn: parent + } + + states: State { + name: "pressed" + when: mouseArea.pressed + PropertyChanges { target: gradientStop; color: "#333333" } + } +} + diff --git a/examples/quick/views/listview/content/ToggleButton.qml b/examples/quick/views/listview/content/ToggleButton.qml new file mode 100644 index 0000000000..86a5d15d1a --- /dev/null +++ b/examples/quick/views/listview/content/ToggleButton.qml @@ -0,0 +1,58 @@ +/**************************************************************************** +** +** Copyright (C) 2012 Digia Plc and/or its subsidiary(-ies). +** Contact: http://www.qt-project.org/legal +** +** This file is part of the QtQml module 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 Digia Plc 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: root + property alias label: text.text + property bool active: false + signal toggled + width: 149 + height: 30 + radius: 3 + color: active ? "green" : "lightgray" + border.width: 1 + Text { id: text; anchors.centerIn: parent; font.pixelSize: 14 } + MouseArea { + anchors.fill: parent + onClicked: { active = !active; root.toggled() } + } +} diff --git a/examples/quick/views/listview/content/pics/arrow-down.png b/examples/quick/views/listview/content/pics/arrow-down.png new file mode 100644 index 0000000000..29d1d4439a Binary files /dev/null and b/examples/quick/views/listview/content/pics/arrow-down.png differ diff --git a/examples/quick/views/listview/content/pics/arrow-up.png b/examples/quick/views/listview/content/pics/arrow-up.png new file mode 100644 index 0000000000..e437312217 Binary files /dev/null and b/examples/quick/views/listview/content/pics/arrow-up.png differ diff --git a/examples/quick/views/listview/content/pics/fruit-salad.jpg b/examples/quick/views/listview/content/pics/fruit-salad.jpg new file mode 100644 index 0000000000..da5a6b10a2 Binary files /dev/null and b/examples/quick/views/listview/content/pics/fruit-salad.jpg differ diff --git a/examples/quick/views/listview/content/pics/hamburger.jpg b/examples/quick/views/listview/content/pics/hamburger.jpg new file mode 100644 index 0000000000..d0a15be1bf Binary files /dev/null and b/examples/quick/views/listview/content/pics/hamburger.jpg differ diff --git a/examples/quick/views/listview/content/pics/lemonade.jpg b/examples/quick/views/listview/content/pics/lemonade.jpg new file mode 100644 index 0000000000..db445c9ac8 Binary files /dev/null and b/examples/quick/views/listview/content/pics/lemonade.jpg differ diff --git a/examples/quick/views/listview/content/pics/list-delete.png b/examples/quick/views/listview/content/pics/list-delete.png new file mode 100644 index 0000000000..df2a147d24 Binary files /dev/null and b/examples/quick/views/listview/content/pics/list-delete.png differ diff --git a/examples/quick/views/listview/content/pics/minus-sign.png b/examples/quick/views/listview/content/pics/minus-sign.png new file mode 100644 index 0000000000..d6f233d739 Binary files /dev/null and b/examples/quick/views/listview/content/pics/minus-sign.png differ diff --git a/examples/quick/views/listview/content/pics/moreDown.png b/examples/quick/views/listview/content/pics/moreDown.png new file mode 100644 index 0000000000..31a35d5c20 Binary files /dev/null and b/examples/quick/views/listview/content/pics/moreDown.png differ diff --git a/examples/quick/views/listview/content/pics/moreUp.png b/examples/quick/views/listview/content/pics/moreUp.png new file mode 100644 index 0000000000..fefb9c9098 Binary files /dev/null and b/examples/quick/views/listview/content/pics/moreUp.png differ diff --git a/examples/quick/views/listview/content/pics/pancakes.jpg b/examples/quick/views/listview/content/pics/pancakes.jpg new file mode 100644 index 0000000000..60c439638e Binary files /dev/null and b/examples/quick/views/listview/content/pics/pancakes.jpg differ diff --git a/examples/quick/views/listview/content/pics/plus-sign.png b/examples/quick/views/listview/content/pics/plus-sign.png new file mode 100644 index 0000000000..40df1134f8 Binary files /dev/null and b/examples/quick/views/listview/content/pics/plus-sign.png differ diff --git a/examples/quick/views/listview/content/pics/vegetable-soup.jpg b/examples/quick/views/listview/content/pics/vegetable-soup.jpg new file mode 100644 index 0000000000..9dce332041 Binary files /dev/null and b/examples/quick/views/listview/content/pics/vegetable-soup.jpg differ diff --git a/examples/quick/views/listview/dynamiclist.qml b/examples/quick/views/listview/dynamiclist.qml new file mode 100644 index 0000000000..6dd225d7b6 --- /dev/null +++ b/examples/quick/views/listview/dynamiclist.qml @@ -0,0 +1,224 @@ +/**************************************************************************** +** +** Copyright (C) 2012 Digia Plc and/or its subsidiary(-ies). +** Contact: http://www.qt-project.org/legal +** +** 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 Digia Plc 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" + +// This example shows how items can be dynamically added to and removed from +// a ListModel, and how these list modifications can be animated. + +Rectangle { + id: container + width: 500; height: 400 + color: "#343434" + + // The model: + ListModel { + id: fruitModel + + ListElement { + name: "Apple"; cost: 2.45 + attributes: [ + ListElement { description: "Core" }, + ListElement { description: "Deciduous" } + ] + } + ListElement { + name: "Banana"; cost: 1.95 + attributes: [ + ListElement { description: "Tropical" }, + ListElement { description: "Seedless" } + ] + } + ListElement { + name: "Cumquat"; cost: 3.25 + attributes: [ + ListElement { description: "Citrus" } + ] + } + ListElement { + name: "Durian"; cost: 9.95 + attributes: [ + ListElement { description: "Tropical" }, + ListElement { description: "Smelly" } + ] + } + } + + // The delegate for each fruit in the model: + Component { + id: listDelegate +//! [0] + Item { +//! [0] + id: delegateItem + width: listView.width; height: 80 + clip: true + + Column { + id: arrows + anchors { + left: parent.left + verticalCenter: parent.verticalCenter + } + Image { + source: "content/pics/arrow-up.png" + MouseArea { anchors.fill: parent; onClicked: fruitModel.move(index, index-1, 1) } + } + Image { source: "content/pics/arrow-down.png" + MouseArea { anchors.fill: parent; onClicked: fruitModel.move(index, index+1, 1) } + } + } + + Column { + anchors { + left: arrows.right + horizontalCenter: parent.horizontalCenter; + bottom: parent.verticalCenter + } + + Text { + anchors.horizontalCenter: parent.horizontalCenter + text: name + font.pixelSize: 15 + color: "white" + } + Row { + anchors.horizontalCenter: parent.horizontalCenter + spacing: 5 + Repeater { + model: attributes + Text { text: description; color: "White" } + } + } + } + + Item { + anchors { + left: arrows.right + horizontalCenter: parent.horizontalCenter; + top: parent.verticalCenter + bottom: parent.bottom + } + + Row { + anchors.centerIn: parent + spacing: 10 + + PressAndHoldButton { + anchors.verticalCenter: parent.verticalCenter + source: "content/pics/plus-sign.png" + onClicked: fruitModel.setProperty(index, "cost", cost + 0.25) + } + + Text { + id: costText + anchors.verticalCenter: parent.verticalCenter + text: '$' + Number(cost).toFixed(2) + font.pixelSize: 15 + color: "white" + font.bold: true + } + + PressAndHoldButton { + anchors.verticalCenter: parent.verticalCenter + source: "content/pics/minus-sign.png" + onClicked: fruitModel.setProperty(index, "cost", Math.max(0,cost-0.25)) + } + + Image { + source: "content/pics/list-delete.png" + MouseArea { anchors.fill:parent; onClicked: fruitModel.remove(index) } + } + } + } + + // Animate adding and removing of items: +//! [1] + ListView.onAdd: SequentialAnimation { + PropertyAction { target: delegateItem; property: "height"; value: 0 } + NumberAnimation { target: delegateItem; property: "height"; to: 80; duration: 250; easing.type: Easing.InOutQuad } + } + + ListView.onRemove: SequentialAnimation { + PropertyAction { target: delegateItem; property: "ListView.delayRemove"; value: true } + NumberAnimation { target: delegateItem; property: "height"; to: 0; duration: 250; easing.type: Easing.InOutQuad } + + // Make sure delayRemove is set back to false so that the item can be destroyed + PropertyAction { target: delegateItem; property: "ListView.delayRemove"; value: false } + } + } +//! [1] + } + + // The view: + ListView { + id: listView + anchors { + left: parent.left; top: parent.top; + right: parent.right; bottom: buttons.top; + margins: 20 + } + model: fruitModel + delegate: listDelegate + } + + Row { + id: buttons + anchors { left: parent.left; bottom: parent.bottom; margins: 20 } + spacing: 10 + + TextButton { + text: "Add an item" + onClicked: { + fruitModel.append({ + "name": "Pizza Margarita", + "cost": 5.95, + "attributes": [{"description": "Cheese"}, {"description": "Tomato"}] + }) + } + } + + TextButton { + text: "Remove all items" + onClicked: fruitModel.clear() + } + } +} + diff --git a/examples/quick/views/listview/expandingdelegates.qml b/examples/quick/views/listview/expandingdelegates.qml new file mode 100644 index 0000000000..b6af0f6d17 --- /dev/null +++ b/examples/quick/views/listview/expandingdelegates.qml @@ -0,0 +1,208 @@ +/**************************************************************************** +** +** Copyright (C) 2012 Digia Plc and/or its subsidiary(-ies). +** Contact: http://www.qt-project.org/legal +** +** 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 Digia Plc 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" + +// This example illustrates expanding a list item to show a more detailed view. + +Rectangle { + id: page + width: 400; height: 240 + color: "black" + + // Delegate for the recipes. This delegate has two modes: + // 1. List mode (default), which just shows the picture and title of the recipe. + // 2. Details mode, which also shows the ingredients and method. + Component { + id: recipeDelegate +//! [0] + Item { + id: recipe + + // Create a property to contain the visibility of the details. + // We can bind multiple element's opacity to this one property, + // rather than having a "PropertyChanges" line for each element we + // want to fade. + property real detailsOpacity : 0 +//! [0] + width: listView.width + height: 70 + + // A simple rounded rectangle for the background + Rectangle { + id: background + x: 2; y: 2; width: parent.width - x*2; height: parent.height - y*2 + color: "ivory" + border.color: "orange" + radius: 5 + } + + // This mouse region covers the entire delegate. + // When clicked it changes mode to 'Details'. If we are already + // in Details mode, then no change will happen. +//! [1] + MouseArea { + anchors.fill: parent + onClicked: recipe.state = 'Details'; + } + + // Lay out the page: picture, title and ingredients at the top, and method at the + // bottom. Note that elements that should not be visible in the list + // mode have their opacity set to recipe.detailsOpacity. + + Row { + id: topLayout + x: 10; y: 10; height: recipeImage.height; width: parent.width + spacing: 10 + + Image { + id: recipeImage + width: 50; height: 50 + source: picture + } +//! [1] + Column { + width: background.width - recipeImage.width - 20; height: recipeImage.height + spacing: 5 + + Text { + text: title + font.bold: true; font.pointSize: 16 + } + + SmallText { + text: "Ingredients" + font.bold: true + opacity: recipe.detailsOpacity + } + + SmallText { + text: ingredients + wrapMode: Text.WordWrap + width: parent.width + opacity: recipe.detailsOpacity + } + } + } + +//! [2] + Item { + id: details + x: 10; width: parent.width - 20 + + anchors { top: topLayout.bottom; topMargin: 10; bottom: parent.bottom; bottomMargin: 10 } + opacity: recipe.detailsOpacity +//! [2] + SmallText { + id: methodTitle + anchors.top: parent.top + text: "Method" + font.pointSize: 12; font.bold: true + } + + Flickable { + id: flick + width: parent.width + anchors { top: methodTitle.bottom; bottom: parent.bottom } + contentHeight: methodText.height + clip: true + + Text { id: methodText; text: method; wrapMode: Text.WordWrap; width: details.width } + } + + Image { + anchors { right: flick.right; top: flick.top } + source: "content/pics/moreUp.png" + opacity: flick.atYBeginning ? 0 : 1 + } + + Image { + anchors { right: flick.right; bottom: flick.bottom } + source: "content/pics/moreDown.png" + opacity: flick.atYEnd ? 0 : 1 + } +//! [3] + } + + // A button to close the detailed view, i.e. set the state back to default (''). + TextButton { + y: 10 + anchors { right: background.right; rightMargin: 10 } + opacity: recipe.detailsOpacity + text: "Close" + + onClicked: recipe.state = ''; + } + + states: State { + name: "Details" + + PropertyChanges { target: background; color: "white" } + PropertyChanges { target: recipeImage; width: 130; height: 130 } // Make picture bigger + PropertyChanges { target: recipe; detailsOpacity: 1; x: 0 } // Make details visible + PropertyChanges { target: recipe; height: listView.height } // Fill the entire list area with the detailed view + + // Move the list so that this item is at the top. + PropertyChanges { target: recipe.ListView.view; explicit: true; contentY: recipe.y } + + // Disallow flicking while we're in detailed view + PropertyChanges { target: recipe.ListView.view; interactive: false } + } + + transitions: Transition { + // Make the state changes smooth + ParallelAnimation { + ColorAnimation { property: "color"; duration: 500 } + NumberAnimation { duration: 300; properties: "detailsOpacity,x,contentY,height,width" } + } + } + } +//! [3] + } + + // The actual list + ListView { + id: listView + anchors.fill: parent + model: RecipesModel {} + delegate: recipeDelegate + } +} diff --git a/examples/quick/views/listview/highlight.qml b/examples/quick/views/listview/highlight.qml new file mode 100644 index 0000000000..bf6c9028c5 --- /dev/null +++ b/examples/quick/views/listview/highlight.qml @@ -0,0 +1,106 @@ +/**************************************************************************** +** +** Copyright (C) 2012 Digia Plc and/or its subsidiary(-ies). +** Contact: http://www.qt-project.org/legal +** +** 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 Digia Plc 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$ +** +****************************************************************************/ + +// This example shows how to create your own highlight delegate for a ListView +// that uses a SpringAnimation to provide custom movement when the +// highlight bar is moved between items. + +import QtQuick 2.0 +import "content" + +Rectangle { + width: 200; height: 300 + + // Define a delegate component. A component will be + // instantiated for each visible item in the list. + Component { + id: petDelegate + Item { + id: wrapper + width: 200; height: 55 + Column { + SmallText { text: 'Name: ' + name } + SmallText { text: 'Type: ' + type } + SmallText { text: 'Age: ' + age } + } + // indent the item if it is the current item + states: State { + name: "Current" + when: wrapper.ListView.isCurrentItem + PropertyChanges { target: wrapper; x: 20 } + } + transitions: Transition { + NumberAnimation { properties: "x"; duration: 200 } + } + MouseArea { + anchors.fill: parent + onClicked: wrapper.ListView.view.currentIndex = index + } + } + } + +//! [0] + // Define a highlight with customized movement between items. + Component { + id: highlightBar + Rectangle { + width: 200; height: 50 + color: "#FFFF88" + y: listView.currentItem.y; + Behavior on y { SpringAnimation { spring: 2; damping: 0.1 } } + } + } + + ListView { + id: listView + width: 200; height: parent.height + x: 30 + + model: PetsModel {} + delegate: petDelegate + focus: true + + // Set the highlight delegate. Note we must also set highlightFollowsCurrentItem + // to false so the highlight delegate can control how the highlight is moved. + highlight: highlightBar + highlightFollowsCurrentItem: false + } +//! [0] +} diff --git a/examples/quick/views/listview/highlightranges.qml b/examples/quick/views/listview/highlightranges.qml new file mode 100644 index 0000000000..f0cc1421f0 --- /dev/null +++ b/examples/quick/views/listview/highlightranges.qml @@ -0,0 +1,169 @@ +/**************************************************************************** +** +** Copyright (C) 2012 Digia Plc and/or its subsidiary(-ies). +** Contact: http://www.qt-project.org/legal +** +** 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 Digia Plc 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" + +//! [0] +Rectangle { + id: root + property int current: 0 + property bool increasing: true + // Example index automation for convenience, disabled on click or tap + SequentialAnimation { + id: anim + loops: -1 + running: true + ScriptAction { + script: if (increasing) { + current++; + if (current >= aModel.count -1) { + current = aModel.count - 1; + increasing = !increasing; + } + } else { + current--; + if (current <= 0) { + current = 0; + increasing = !increasing; + } + } + } + + PauseAnimation { duration: 500 } + } +//! [0] + MouseArea{ + id: ma + z: 1 + anchors.fill: parent + onClicked: { z = 1 - z; if (anim.running) anim.stop(); else anim.restart();} + } + + width: 320; height: 480 + + // This example shows the same model in three different ListView items, + // with different highlight ranges. The highlight ranges are set by the + // preferredHighlightBegin and preferredHighlightEnd properties in ListView. + // + // The first ListView does not set a highlight range, so its currentItem + // can move freely within the visible area. If it moves outside the + // visible area, the view is automatically scrolled to keep the current + // item visible. + // + // The second ListView sets a highlight range which attempts to keep the + // current item within the the bounds of the range. However, + // items will not scroll beyond the beginning or end of the view, + // forcing the highlight to move outside the range at the ends. + // + // The third ListView sets the highlightRangeMode to StrictlyEnforceRange + // and sets a range smaller than the height of an item. This + // forces the current item to change when the view is flicked, + // since the highlight is unable to move. + // + // All ListViews bind their currentIndex to the root.current property. + // The first ListView sets root.current whenever its currentIndex changes + // due to keyboard interaction. + // Flicking the third ListView with the mouse also changes root.current. +//! [1] + ListView { + id: list1 + height: 50; width: parent.width + model: PetsModel {id: aModel} + delegate: petDelegate + orientation: ListView.Horizontal + + highlight: Rectangle { color: "lightsteelblue" } + currentIndex: root.current + onCurrentIndexChanged: root.current = currentIndex + focus: true + } + + ListView { + id: list2 + y: 160 + height: 50; width: parent.width + model: PetsModel {} + delegate: petDelegate + orientation: ListView.Horizontal + + highlight: Rectangle { color: "yellow" } + currentIndex: root.current + preferredHighlightBegin: 80; preferredHighlightEnd: 220 + highlightRangeMode: ListView.ApplyRange + } + + ListView { + id: list3 + y: 320 + height: 50; width: parent.width + model: PetsModel {} + delegate: petDelegate + orientation: ListView.Horizontal + + highlight: Rectangle { color: "yellow" } + currentIndex: root.current + onCurrentIndexChanged: root.current = currentIndex + preferredHighlightBegin: 125; preferredHighlightEnd: 125 + highlightRangeMode: ListView.StrictlyEnforceRange + } +//! [1] + // The delegate for each list + Component { + id: petDelegate + Item { + width: 160 + height: column.height + Column { + id: column + Text { text: 'Name: ' + name } + Text { text: 'Type: ' + type } + Text { text: 'Age: ' + age } + } + + MouseArea { + anchors.fill: parent + onClicked: root.current = index + } + } + } +//! [2] +} +//! [2] diff --git a/examples/quick/views/listview/sections.qml b/examples/quick/views/listview/sections.qml new file mode 100644 index 0000000000..7a9562fa70 --- /dev/null +++ b/examples/quick/views/listview/sections.qml @@ -0,0 +1,127 @@ +/**************************************************************************** +** +** Copyright (C) 2012 Digia Plc and/or its subsidiary(-ies). +** Contact: http://www.qt-project.org/legal +** +** 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 Digia Plc 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$ +** +****************************************************************************/ + +// This example shows how a ListView can be separated into sections using +// the ListView.section attached property. + +import QtQuick 2.0 +import "content" + +Rectangle { + id: container + width: 300 + height: 360 + + ListModel { + id: animalsModel + ListElement { name: "Ant"; size: "Tiny" } + ListElement { name: "Flea"; size: "Tiny" } + ListElement { name: "Parrot"; size: "Small" } + ListElement { name: "Guinea pig"; size: "Small" } + ListElement { name: "Rat"; size: "Small" } + ListElement { name: "Butterfly"; size: "Small" } + ListElement { name: "Dog"; size: "Medium" } + ListElement { name: "Cat"; size: "Medium" } + ListElement { name: "Pony"; size: "Medium" } + ListElement { name: "Koala"; size: "Medium" } + ListElement { name: "Horse"; size: "Large" } + ListElement { name: "Tiger"; size: "Large" } + ListElement { name: "Giraffe"; size: "Large" } + ListElement { name: "Elephant"; size: "Huge" } + ListElement { name: "Whale"; size: "Huge" } + } + +//! [0] + // The delegate for each section header + Component { + id: sectionHeading + Rectangle { + width: container.width + height: childrenRect.height + color: "lightsteelblue" + + Text { + text: section + font.bold: true + font.pixelSize: 20 + } + } + } + + ListView { + id: view + anchors.top: parent.top + anchors.bottom: buttonBar.top + width: parent.width + model: animalsModel + delegate: Text { text: name; font.pixelSize: 18 } + + section.property: "size" + section.criteria: ViewSection.FullString + section.delegate: sectionHeading + } +//! [0] + + Row { + id: buttonBar + anchors.bottom: parent.bottom + anchors.bottomMargin: 1 + spacing: 1 + ToggleButton { + label: "CurrentLabelAtStart" + onToggled: { + if (active) + view.section.labelPositioning |= ViewSection.CurrentLabelAtStart + else + view.section.labelPositioning &= ~ViewSection.CurrentLabelAtStart + } + } + ToggleButton { + label: "NextLabelAtEnd" + onToggled: { + if (active) + view.section.labelPositioning |= ViewSection.NextLabelAtEnd + else + view.section.labelPositioning &= ~ViewSection.NextLabelAtEnd + } + } + } +} + diff --git a/examples/quick/views/main.cpp b/examples/quick/views/main.cpp new file mode 100644 index 0000000000..3d41683035 --- /dev/null +++ b/examples/quick/views/main.cpp @@ -0,0 +1,41 @@ +/**************************************************************************** +** +** Copyright (C) 2012 Digia Plc and/or its subsidiary(-ies). +** Contact: http://www.qt-project.org/legal +** +** 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 Digia Plc 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$ +** +****************************************************************************/ +#include "../shared/shared.h" +DECLARATIVE_EXAMPLE_MAIN(views) diff --git a/examples/quick/views/package/Delegate.qml b/examples/quick/views/package/Delegate.qml new file mode 100644 index 0000000000..e439716d57 --- /dev/null +++ b/examples/quick/views/package/Delegate.qml @@ -0,0 +1,78 @@ +/**************************************************************************** +** +** Copyright (C) 2012 Digia Plc and/or its subsidiary(-ies). +** Contact: http://www.qt-project.org/legal +** +** 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 Digia Plc 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 + +//! [0] +Package { + Text { id: listDelegate; width: parent.width; height: 25; text: 'Empty'; Package.name: 'list' } + Text { id: gridDelegate; width: parent.width / 2; height: 50; text: 'Empty'; Package.name: 'grid' } + + Rectangle { + id: wrapper + width: parent.width; height: 25 + color: 'lightsteelblue' + + Text { text: display; anchors.centerIn: parent } + state: root.upTo > index ? 'inGrid' : 'inList' + states: [ + State { + name: 'inList' + ParentChange { target: wrapper; parent: listDelegate } + }, + State { + name: 'inGrid' + ParentChange { + target: wrapper; parent: gridDelegate + x: 0; y: 0; width: gridDelegate.width; height: gridDelegate.height + } + } + ] + + transitions: [ + Transition { + ParentAnimation { + NumberAnimation { properties: 'x,y,width,height'; duration: 300 } + } + } + ] + } +} +//! [0] diff --git a/examples/quick/views/package/view.qml b/examples/quick/views/package/view.qml new file mode 100644 index 0000000000..f326da4267 --- /dev/null +++ b/examples/quick/views/package/view.qml @@ -0,0 +1,92 @@ +/**************************************************************************** +** +** Copyright (C) 2012 Digia Plc and/or its subsidiary(-ies). +** Contact: http://www.qt-project.org/legal +** +** 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 Digia Plc 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: root + color: "white" + width: 320 + height: 480 + property int upTo: 0 + SequentialAnimation on upTo { + loops: -1 + NumberAnimation { to: 8; duration: 3500 } + NumberAnimation { to: 0; duration: 3500 } + } + + ListModel { + id: myModel + ListElement { display: "One" } + ListElement { display: "Two" } + ListElement { display: "Three" } + ListElement { display: "Four" } + ListElement { display: "Five" } + ListElement { display: "Six" } + ListElement { display: "Seven" } + ListElement { display: "Eight" } + } + //![0] + VisualDataModel { + id: visualModel + delegate: Delegate {} + model: myModel + } + + ListView { + id: lv + height: parent.height/2 + width: parent.width + + model: visualModel.parts.list + } + GridView { + y: parent.height/2 + height: parent.height/2 + width: parent.width + cellWidth: width / 2 + cellHeight: 50 + model: visualModel.parts.grid + } + //![0] + Text { + anchors.bottom: parent.bottom + } +} diff --git a/examples/quick/views/parallax/content/Clock.qml b/examples/quick/views/parallax/content/Clock.qml new file mode 100644 index 0000000000..05317b1151 --- /dev/null +++ b/examples/quick/views/parallax/content/Clock.qml @@ -0,0 +1,140 @@ +/**************************************************************************** +** +** Copyright (C) 2012 Digia Plc and/or its subsidiary(-ies). +** Contact: http://www.qt-project.org/legal +** +** 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 Digia Plc 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 + +Item { + id : clock + width: { + if (ListView.view && ListView.view.width >= 200) + return ListView.view.width / Math.floor(ListView.view.width / 200.0); + else + return 200; + } + + height: { + if (ListView.view && ListView.view.height >= 240) + return ListView.view.height; + else + return 240; + } + + property alias city: cityLabel.text + property int hours + property int minutes + property int seconds + property real shift + property bool night: false + property bool internationalTime: true //Unset for local time + + function timeChanged() { + var date = new Date; + hours = internationalTime ? date.getUTCHours() + Math.floor(clock.shift) : date.getHours() + night = ( hours < 7 || hours > 19 ) + minutes = internationalTime ? date.getUTCMinutes() + ((clock.shift % 1) * 60) : date.getMinutes() + seconds = date.getUTCSeconds(); + } + + Timer { + interval: 100; running: true; repeat: true; + onTriggered: clock.timeChanged() + } + + Item { + anchors.centerIn: parent + width: 200; height: 240 + + Image { id: background; source: "clock.png"; visible: clock.night == false } + Image { source: "clock-night.png"; visible: clock.night == true } + + + Image { + x: 92.5; y: 27 + source: "hour.png" + transform: Rotation { + id: hourRotation + origin.x: 7.5; origin.y: 73; + angle: (clock.hours * 30) + (clock.minutes * 0.5) + Behavior on angle { + SpringAnimation { spring: 2; damping: 0.2; modulus: 360 } + } + } + } + + Image { + x: 93.5; y: 17 + source: "minute.png" + transform: Rotation { + id: minuteRotation + origin.x: 6.5; origin.y: 83; + angle: clock.minutes * 6 + Behavior on angle { + SpringAnimation { spring: 2; damping: 0.2; modulus: 360 } + } + } + } + + Image { + x: 97.5; y: 20 + source: "second.png" + transform: Rotation { + id: secondRotation + origin.x: 2.5; origin.y: 80; + angle: clock.seconds * 6 + Behavior on angle { + SpringAnimation { spring: 2; damping: 0.2; modulus: 360 } + } + } + } + + Image { + anchors.centerIn: background; source: "center.png" + } + + Text { + id: cityLabel + y: 210; anchors.horizontalCenter: parent.horizontalCenter + color: "white" + font.family: "Helvetica" + font.bold: true; font.pixelSize: 16 + style: Text.Raised; styleColor: "black" + } + } +} diff --git a/examples/quick/views/parallax/content/ParallaxView.qml b/examples/quick/views/parallax/content/ParallaxView.qml new file mode 100644 index 0000000000..2cbb6e6e7c --- /dev/null +++ b/examples/quick/views/parallax/content/ParallaxView.qml @@ -0,0 +1,122 @@ +/**************************************************************************** +** +** Copyright (C) 2012 Digia Plc and/or its subsidiary(-ies). +** Contact: http://www.qt-project.org/legal +** +** 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 Digia Plc 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 + +Item { + id: root + + property alias background: background.source + property int currentIndex: 0 + default property alias content: visualModel.children + + Image { + id: background + fillMode: Image.TileHorizontally + x: -list.contentX / 2 + width: Math.max(list.contentWidth, parent.width) + } + + ListView { + id: list + anchors.fill: parent + + currentIndex: root.currentIndex + onCurrentIndexChanged: root.currentIndex = currentIndex + + orientation: Qt.Horizontal + boundsBehavior: Flickable.DragOverBounds + model: VisualItemModel { id: visualModel } + + highlightRangeMode: ListView.StrictlyEnforceRange + snapMode: ListView.SnapOneItem + } + + ListView { + id: selector + + height: 50 + anchors.bottom: parent.bottom + anchors.horizontalCenter: parent.horizontalCenter + width: Math.min(count * 50, parent.width - 20) + interactive: width == parent.width - 20 + orientation: Qt.Horizontal + + currentIndex: root.currentIndex + onCurrentIndexChanged: root.currentIndex = currentIndex + + model: visualModel.children + delegate: Item { + width: 50; height: 50 + id: delegateRoot + + Image { + id: image + source: modelData.icon + scale: 0.8 + } + + MouseArea { + anchors.fill: parent + onClicked: { root.currentIndex = index } + } + + states: State { + name: "Selected" + when: delegateRoot.ListView.isCurrentItem == true + PropertyChanges { + target: image + scale: 1 + y: -5 + } + } + transitions: Transition { + NumberAnimation { properties: "scale,y" } + } + } + + Rectangle { + color: "#60FFFFFF" + x: -10; y: -10; z: -1 + width: parent.width + 20; height: parent.height + 20 + radius: 10 + } + } +} diff --git a/examples/quick/views/parallax/content/QuitButton.qml b/examples/quick/views/parallax/content/QuitButton.qml new file mode 100644 index 0000000000..8133541b33 --- /dev/null +++ b/examples/quick/views/parallax/content/QuitButton.qml @@ -0,0 +1,52 @@ +/**************************************************************************** +** +** Copyright (C) 2012 Digia Plc and/or its subsidiary(-ies). +** Contact: http://www.qt-project.org/legal +** +** 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 Digia Plc 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 +Image { + source: "quit.png" + scale: quitMouse.pressed ? 0.8 : 1.0 + smooth: quitMouse.pressed + MouseArea { + id: quitMouse + anchors.fill: parent + anchors.margins: -10 + onClicked: Qt.quit() + } +} diff --git a/examples/quick/views/parallax/content/Smiley.qml b/examples/quick/views/parallax/content/Smiley.qml new file mode 100644 index 0000000000..d932aaeac0 --- /dev/null +++ b/examples/quick/views/parallax/content/Smiley.qml @@ -0,0 +1,84 @@ +/**************************************************************************** +** +** Copyright (C) 2012 Digia Plc and/or its subsidiary(-ies). +** Contact: http://www.qt-project.org/legal +** +** 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 Digia Plc 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 + +// This is taken from the declarative animation/basics/property-animation.qml +// example + +Item { + id: window + width: 320; height: 480 + + Image { + anchors.horizontalCenter: parent.horizontalCenter + y: smiley.minHeight + 58 + source: "pics/shadow.png" + + scale: smiley.y * 0.5 / (smiley.minHeight - smiley.maxHeight) + } + + Image { + id: smiley + property int maxHeight: window.height / 3 + property int minHeight: 2 * window.height / 3 + + anchors.horizontalCenter: parent.horizontalCenter + y: minHeight + source: "pics/face-smile.png" + + SequentialAnimation on y { + loops: Animation.Infinite + + NumberAnimation { + from: smiley.minHeight; to: smiley.maxHeight + easing.type: Easing.OutExpo; duration: 300 + } + + NumberAnimation { + from: smiley.maxHeight; to: smiley.minHeight + easing.type: Easing.OutBounce; duration: 1000 + } + + PauseAnimation { duration: 500 } + } + } +} + diff --git a/examples/quick/views/parallax/content/background.png b/examples/quick/views/parallax/content/background.png new file mode 100644 index 0000000000..a885950862 Binary files /dev/null and b/examples/quick/views/parallax/content/background.png differ diff --git a/examples/quick/views/parallax/content/center.png b/examples/quick/views/parallax/content/center.png new file mode 100644 index 0000000000..7fbd802a44 Binary files /dev/null and b/examples/quick/views/parallax/content/center.png differ diff --git a/examples/quick/views/parallax/content/clock-night.png b/examples/quick/views/parallax/content/clock-night.png new file mode 100644 index 0000000000..cc7151a397 Binary files /dev/null and b/examples/quick/views/parallax/content/clock-night.png differ diff --git a/examples/quick/views/parallax/content/clock.png b/examples/quick/views/parallax/content/clock.png new file mode 100644 index 0000000000..462edacc0e Binary files /dev/null and b/examples/quick/views/parallax/content/clock.png differ diff --git a/examples/quick/views/parallax/content/hour.png b/examples/quick/views/parallax/content/hour.png new file mode 100644 index 0000000000..f8061a1235 Binary files /dev/null and b/examples/quick/views/parallax/content/hour.png differ diff --git a/examples/quick/views/parallax/content/minute.png b/examples/quick/views/parallax/content/minute.png new file mode 100644 index 0000000000..1297ec7c2b Binary files /dev/null and b/examples/quick/views/parallax/content/minute.png differ diff --git a/examples/quick/views/parallax/content/pics/background.jpg b/examples/quick/views/parallax/content/pics/background.jpg new file mode 100644 index 0000000000..61cca2f138 Binary files /dev/null and b/examples/quick/views/parallax/content/pics/background.jpg differ diff --git a/examples/quick/views/parallax/content/pics/face-smile.png b/examples/quick/views/parallax/content/pics/face-smile.png new file mode 100644 index 0000000000..3d66d72578 Binary files /dev/null and b/examples/quick/views/parallax/content/pics/face-smile.png differ diff --git a/examples/quick/views/parallax/content/pics/home-page.png b/examples/quick/views/parallax/content/pics/home-page.png new file mode 100644 index 0000000000..bd090c3708 Binary files /dev/null and b/examples/quick/views/parallax/content/pics/home-page.png differ diff --git a/examples/quick/views/parallax/content/pics/home-page.svg b/examples/quick/views/parallax/content/pics/home-page.svg new file mode 100644 index 0000000000..4f16958844 --- /dev/null +++ b/examples/quick/views/parallax/content/pics/home-page.svg @@ -0,0 +1,445 @@ + +image/svg+xmlGo HomeJakub Steinerhttp://jimmac.musichall.czhomereturngodefaultuserdirectoryTuomas Kuosmanen + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/examples/quick/views/parallax/content/pics/shadow.png b/examples/quick/views/parallax/content/pics/shadow.png new file mode 100644 index 0000000000..8270565e87 Binary files /dev/null and b/examples/quick/views/parallax/content/pics/shadow.png differ diff --git a/examples/quick/views/parallax/content/pics/yast-joystick.png b/examples/quick/views/parallax/content/pics/yast-joystick.png new file mode 100644 index 0000000000..858cea0301 Binary files /dev/null and b/examples/quick/views/parallax/content/pics/yast-joystick.png differ diff --git a/examples/quick/views/parallax/content/pics/yast-wol.png b/examples/quick/views/parallax/content/pics/yast-wol.png new file mode 100644 index 0000000000..7712180a3b Binary files /dev/null and b/examples/quick/views/parallax/content/pics/yast-wol.png differ diff --git a/examples/quick/views/parallax/content/quit.png b/examples/quick/views/parallax/content/quit.png new file mode 100644 index 0000000000..b822057d4e Binary files /dev/null and b/examples/quick/views/parallax/content/quit.png differ diff --git a/examples/quick/views/parallax/content/second.png b/examples/quick/views/parallax/content/second.png new file mode 100644 index 0000000000..4aa9fb5e8e Binary files /dev/null and b/examples/quick/views/parallax/content/second.png differ diff --git a/examples/quick/views/parallax/parallax.qml b/examples/quick/views/parallax/parallax.qml new file mode 100644 index 0000000000..74ffab86e8 --- /dev/null +++ b/examples/quick/views/parallax/parallax.qml @@ -0,0 +1,76 @@ +/**************************************************************************** +** +** Copyright (C) 2012 Digia Plc and/or its subsidiary(-ies). +** Contact: http://www.qt-project.org/legal +** +** 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 Digia Plc 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 { + width: 320; height: 480 + + ParallaxView { + id: parallax + anchors.fill: parent + background: "content/pics/background.jpg" + + Item { + property url icon: "content/pics/yast-wol.png" + width: 320; height: 480 + Clock { anchors.centerIn: parent } + } + + Item { + property url icon: "content/pics/home-page.png" + width: 320; height: 480 + Smiley { } + } + + Item { + property url icon: "content/pics/yast-joystick.png" + width: 320; height: 480 + + Loader { + anchors { top: parent.top; topMargin: 10; horizontalCenter: parent.horizontalCenter } + width: 300; height: 400 + clip: true; + source: "../../../demos/samegame/samegame.qml" + } + } + } +} diff --git a/examples/quick/views/pathview/pathview-example.qml b/examples/quick/views/pathview/pathview-example.qml new file mode 100644 index 0000000000..38ba08cb16 --- /dev/null +++ b/examples/quick/views/pathview/pathview-example.qml @@ -0,0 +1,105 @@ +/**************************************************************************** +** +** Copyright (C) 2012 Digia Plc and/or its subsidiary(-ies). +** Contact: http://www.qt-project.org/legal +** +** 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 Digia Plc 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: 240 + color: "white" + + ListModel { + id: appModel + ListElement { name: "Music"; icon: "pics/AudioPlayer_48.png" } + ListElement { name: "Movies"; icon: "pics/VideoPlayer_48.png" } + ListElement { name: "Camera"; icon: "pics/Camera_48.png" } + ListElement { name: "Calendar"; icon: "pics/DateBook_48.png" } + ListElement { name: "Messaging"; icon: "pics/EMail_48.png" } + ListElement { name: "Todo List"; icon: "pics/TodoList_48.png" } + ListElement { name: "Contacts"; icon: "pics/AddressBook_48.png" } + } + + Component { + id: appDelegate + Item { + width: 100; height: 100 + scale: PathView.iconScale + + Image { + id: myIcon + y: 20; anchors.horizontalCenter: parent.horizontalCenter + source: icon + } + Text { + anchors { top: myIcon.bottom; horizontalCenter: parent.horizontalCenter } + text: name + } + + MouseArea { + anchors.fill: parent + onClicked: view.currentIndex = index + } + } + } + + Component { + id: appHighlight + Rectangle { width: 80; height: 80; color: "lightsteelblue" } + } + + PathView { + id: view + anchors.fill: parent + highlight: appHighlight + preferredHighlightBegin: 0.5 + preferredHighlightEnd: 0.5 + focus: true + model: appModel + delegate: appDelegate + path: Path { + startX: 10 + startY: 50 + PathAttribute { name: "iconScale"; value: 0.5 } + PathQuad { x: 200; y: 150; controlX: 50; controlY: 200 } + PathAttribute { name: "iconScale"; value: 1.0 } + PathQuad { x: 390; y: 50; controlX: 350; controlY: 200 } + PathAttribute { name: "iconScale"; value: 0.5 } + } + } +} diff --git a/examples/quick/views/pathview/pics/AddressBook_48.png b/examples/quick/views/pathview/pics/AddressBook_48.png new file mode 100644 index 0000000000..1ab7c8eec1 Binary files /dev/null and b/examples/quick/views/pathview/pics/AddressBook_48.png differ diff --git a/examples/quick/views/pathview/pics/AudioPlayer_48.png b/examples/quick/views/pathview/pics/AudioPlayer_48.png new file mode 100644 index 0000000000..f4b8689f87 Binary files /dev/null and b/examples/quick/views/pathview/pics/AudioPlayer_48.png differ diff --git a/examples/quick/views/pathview/pics/Camera_48.png b/examples/quick/views/pathview/pics/Camera_48.png new file mode 100644 index 0000000000..c76b524945 Binary files /dev/null and b/examples/quick/views/pathview/pics/Camera_48.png differ diff --git a/examples/quick/views/pathview/pics/DateBook_48.png b/examples/quick/views/pathview/pics/DateBook_48.png new file mode 100644 index 0000000000..58f5787fb8 Binary files /dev/null and b/examples/quick/views/pathview/pics/DateBook_48.png differ diff --git a/examples/quick/views/pathview/pics/EMail_48.png b/examples/quick/views/pathview/pics/EMail_48.png new file mode 100644 index 0000000000..d6d84a61be Binary files /dev/null and b/examples/quick/views/pathview/pics/EMail_48.png differ diff --git a/examples/quick/views/pathview/pics/TodoList_48.png b/examples/quick/views/pathview/pics/TodoList_48.png new file mode 100644 index 0000000000..0988448d9b Binary files /dev/null and b/examples/quick/views/pathview/pics/TodoList_48.png differ diff --git a/examples/quick/views/pathview/pics/VideoPlayer_48.png b/examples/quick/views/pathview/pics/VideoPlayer_48.png new file mode 100644 index 0000000000..52638c50a7 Binary files /dev/null and b/examples/quick/views/pathview/pics/VideoPlayer_48.png differ diff --git a/examples/quick/views/views.pro b/examples/quick/views/views.pro new file mode 100644 index 0000000000..b424ba66f2 --- /dev/null +++ b/examples/quick/views/views.pro @@ -0,0 +1,17 @@ +TEMPLATE = app + +QT += quick qml +SOURCES += main.cpp + +target.path = $$[QT_INSTALL_EXAMPLES]/quick/views +qml.files = \ + views.qml \ + gridview \ + listview \ + package \ + parallax \ + pathview \ + visualdatamodel \ + visualitemmodel +qml.path = $$[QT_INSTALL_EXAMPLES]/quick/views +INSTALLS += target qml diff --git a/examples/quick/views/views.qml b/examples/quick/views/views.qml new file mode 100644 index 0000000000..9d4464933b --- /dev/null +++ b/examples/quick/views/views.qml @@ -0,0 +1,118 @@ +/**************************************************************************** +** +** Copyright (C) 2012 Digia Plc and/or its subsidiary(-ies). +** Contact: http://www.qt-project.org/legal +** +** 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 Digia Plc 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 "../shared" as Examples + +/*! + \title QtQuick Examples - Views + \example quick/views + \brief This is a collection of QML model and view examples + \image qml-modelviews-example.png + + This is a collection of small QML examples relating to model and view functionality. They + are focused on the views side, which is the visual representation of the data in the models. + + \section2 GridView and PathView demonstrate usage of these elements to display views. + \snippet examples/quick/modelviews/gridview/gridview-example.qml 0 + + \section2 Dynamic List demonstrates animation of runtime additions and removals to a ListView. + + The ListView.onAdd signal handler runs an animation when new items are added to the + view, and the ListView.onRemove another when they are removed. + \snippet examples/quick/modelviews/listview/dynamiclist.qml 0 + \snippet examples/quick/modelviews/listview/dynamiclist.qml 1 + + \section2 Expanding Delegates demonstrates delegates that expand when activated. + + It has a complex delegate the size and appearance of which can change, displacing + other items in the view. + \snippet examples/quick/modelviews/listview/expandingdelegates.qml 0 + \snippet examples/quick/modelviews/listview/expandingdelegates.qml 1 + \snippet examples/quick/modelviews/listview/expandingdelegates.qml 2 + \snippet examples/quick/modelviews/listview/expandingdelegates.qml 3 + + \section2 Highlight demonstrates adding a custom highlight to a ListView. + \snippet examples/quick/modelviews/listview/highlight.qml 0 + + \section2 Highlight Ranges shows the three different highlight range modes of ListView. + \snippet examples/quick/modelviews/listview/highlightranges.qml 0 + \snippet examples/quick/modelviews/listview/highlightranges.qml 1 + \snippet examples/quick/modelviews/listview/highlightranges.qml 2 + + \section2 Sections demonstrates the various section headers and footers available to ListView. + \snippet examples/quick/modelviews/listview/sections.qml 0 + + \section2 Packages demonstrates using Packages to transition delegates between two views. + + It has a Package which defines delegate items for each view and an item that can + be transferred between delegates. + + \snippet examples/quick/modelviews/package/Delegate.qml 0 + + A VisualDataModel allows the individual views to access their specific items from + the shared package delegate. + + \snippet examples/quick/modelviews/package/view.qml 0 + + \section2 VisualItemModel uses a VisualItemModel for the model instead of a ListModel. + + \snippet examples/quick/modelviews/visualitemmodel/visualitemmodel.qml 0 + */ + + Item { + height: 480 + width: 320 + Examples.LauncherList { + id: ll + anchors.fill: parent + Component.onCompleted: { + addExample("GridView", "A simple GridView", Qt.resolvedUrl("gridview/gridview-example.qml")) + addExample("Dynamic List", "A dynamically alterable list", Qt.resolvedUrl("listview/dynamiclist.qml")) + addExample("Expanding Delegates", "A ListView with delegates that expand", Qt.resolvedUrl("listview/expandingdelegates.qml")) + addExample("Highlight", "A ListView with a custom highlight", Qt.resolvedUrl("listview/highlight.qml")) + addExample("Highlight Ranges", "The three highlight ranges of ListView", Qt.resolvedUrl("listview/highlightranges.qml")) + addExample("Sections", "ListView section headers and footers", Qt.resolvedUrl("listview/sections.qml")) + addExample("Packages", "Transitions between a ListView and GridView", Qt.resolvedUrl("package/view.qml")) + addExample("PathView", "A simple PathView", Qt.resolvedUrl("pathview/pathview-example.qml")) + addExample("VisualItemModel", "Using a VisualItemModel", Qt.resolvedUrl("visualitemmodel/visualitemmodel.qml")) + } + } +} diff --git a/examples/quick/views/views.qmlproject b/examples/quick/views/views.qmlproject new file mode 100644 index 0000000000..7e6baf0a7f --- /dev/null +++ b/examples/quick/views/views.qmlproject @@ -0,0 +1,16 @@ +import QmlProject 1.1 + +Project { + mainFile: "views.qml" + + /* Include .qml, .js, and image files from current directory and subdirectories */ + QmlFiles { + directory: "." + } + JavaScriptFiles { + directory: "." + } + ImageFiles { + directory: "." + } +} diff --git a/examples/quick/views/visualdatamodel/dragselection.qml b/examples/quick/views/visualdatamodel/dragselection.qml new file mode 100644 index 0000000000..d63b3bd571 --- /dev/null +++ b/examples/quick/views/visualdatamodel/dragselection.qml @@ -0,0 +1,200 @@ +/**************************************************************************** +** +** Copyright (C) 2012 Digia Plc and/or its subsidiary(-ies). +** Contact: http://www.qt-project.org/legal +** +** 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 Digia Plc 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 + +Item { + id: root + + width: 320 + height: 480 + + property bool dragging: false + + Component { + id: packageDelegate + Package { + id: packageRoot + + MouseArea { + id: visibleContainer + Package.name: "visible" + + width: 64 + height: 64 + enabled: packageRoot.VisualDataModel.inSelected + + drag.target: draggable + + Item { + id: draggable + + width: 64 + height: 64 + + Drag.active: visibleContainer.drag.active + + anchors { horizontalCenter: parent.horizontalCenter; verticalCenter: parent.verticalCenter } + + states: State { + when: visibleContainer.drag.active + AnchorChanges { target: draggable; anchors { horizontalCenter: undefined; verticalCenter: undefined} } + ParentChange { target: selectionView; parent: draggable; x: 0; y: 0 } + PropertyChanges { target: root; dragging: true } + ParentChange { target: draggable; parent: root } + } + } + DropArea { + anchors.fill: parent + onEntered: selectedItems.move(0, visualModel.items.get(packageRoot.VisualDataModel.itemsIndex), selectedItems.count) + } + } + Item { + id: selectionContainer + Package.name: "selection" + + width: 64 + height: 64 + + visible: PathView.onPath + } + Rectangle { + id: content + parent: visibleContainer + + width: 58 + height: 58 + + radius: 8 + + gradient: Gradient { + GradientStop { id: gradientStart; position: 0.0; color: "#8AC953" } + GradientStop { id: gradientEnd; position: 1.0; color: "#8BC953" } + } + + border.width: 2 + border.color: "#007423" + + state: root.dragging && packageRoot.VisualDataModel.inSelected ? "selected" : "visible" + + Text { + anchors.fill: parent + horizontalAlignment: Text.AlignHCenter + verticalAlignment: Text.AlignVCenter + color: "white" + text: modelData + font.pixelSize: 18 + } + + Rectangle { + anchors { right: parent.right; top: parent.top; margins: 3 } + width: 12; height: 12 + color: packageRoot.VisualDataModel.inSelected ? "black" : "white" + radius: 6 + + border.color: "white" + border.width: 2 + + MouseArea { + anchors.fill: parent + onClicked: packageRoot.VisualDataModel.inSelected = !packageRoot.VisualDataModel.inSelected + } + } + + states: [ + State { + name: "selected" + ParentChange { target: content; parent: selectionContainer; x: 3; y: 3 } + PropertyChanges { target: packageRoot; VisualDataModel.inItems: visibleContainer.drag.active } + PropertyChanges { target: gradientStart; color: "#017423" } + PropertyChanges { target: gradientStart; color: "#007423" } + }, State { + name: "visible" + PropertyChanges { target: packageRoot; VisualDataModel.inItems: true } + ParentChange { target: content; parent: visibleContainer; x: 3; y: 3 } + PropertyChanges { target: gradientStart; color: "#8AC953" } + PropertyChanges { target: gradientStart; color: "#8BC953" } + } + ] + transitions: Transition { + PropertyAction { target: packageRoot; properties: "VisualDataModel.inItems" } + ParentAnimation { + target: content + NumberAnimation { target: content; properties: "x,y"; duration: 500 } + } + ColorAnimation { targets: [gradientStart, gradientEnd]; duration: 500 } + } + } + } + } + + VisualDataModel { + id: visualModel + model: 35 + delegate: packageDelegate + + groups: VisualDataGroup { id: selectedItems; name: "selected" } + + Component.onCompleted: parts.selection.filterOnGroup = "selected" + } + + PathView { + id: selectionView + + height: 64 + width: 64 + + model: visualModel.parts.selection + + path: Path { + startX: 0 + startY: 0 + PathLine { x: 64; y: 64 } + } + } + + GridView { + id: itemsView + anchors { fill: parent } + cellWidth: 64 + cellHeight: 64 + model: visualModel.parts.visible + } +} diff --git a/examples/quick/views/visualdatamodel/slideshow.qml b/examples/quick/views/visualdatamodel/slideshow.qml new file mode 100644 index 0000000000..3f08f974f5 --- /dev/null +++ b/examples/quick/views/visualdatamodel/slideshow.qml @@ -0,0 +1,156 @@ +/**************************************************************************** +** +** Copyright (C) 2012 Digia Plc and/or its subsidiary(-ies). +** Contact: http://www.qt-project.org/legal +** +** 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 Digia Plc 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 QtQuick.XmlListModel 2.0 + +Rectangle { + id: root + + property Item displayItem: null + + width: 300; height: 400 + + color: "black" + + VisualDataModel { + id: visualModel + + model: XmlListModel { + source: "http://api.flickr.com/services/feeds/photos_public.gne?format=rss2" + query: "/rss/channel/item" + namespaceDeclarations: "declare namespace media=\"http://search.yahoo.com/mrss/\";" + + XmlRole { name: "imagePath"; query: "media:thumbnail/@url/string()" } + XmlRole { name: "url"; query: "media:content/@url/string()" } + } + + delegate: Item { + id: delegateItem + + width: 76; height: 76 + + Rectangle { + id: image + x: 0; y: 0; width: 76; height: 76 + border.width: 1 + border.color: "white" + color: "black" + + Image { + anchors.fill: parent + anchors.leftMargin: 1 + anchors.topMargin: 1 + + source: imagePath + fillMode: Image.PreserveAspectFit + + } + + MouseArea { + id: clickArea + anchors.fill: parent + + onClicked: root.displayItem = root.displayItem !== delegateItem ? delegateItem : null + } + + states: [ + State { + when: root.displayItem === delegateItem + name: "inDisplay"; + ParentChange { target: image; parent: imageContainer; x: 75; y: 75; width: 150; height: 150 } + PropertyChanges { target: image; z: 2 } + PropertyChanges { target: delegateItem; VisualDataModel.inItems: false } + }, + State { + when: root.displayItem !== delegateItem + name: "inList"; + ParentChange { target: image; parent: delegateItem; x: 2; y: 2; width: 75; height: 75 } + PropertyChanges { target: image; z: 1 } + PropertyChanges { target: delegateItem; VisualDataModel.inItems: true } + } + ] + + transitions: [ + Transition { + from: "inList" + SequentialAnimation { + PropertyAction { target: delegateItem; property: "VisualDataModel.inPersistedItems"; value: true } + ParentAnimation { + target: image; + via: root + NumberAnimation { target: image; properties: "x,y,width,height"; duration: 1000 } + } + } + }, Transition { + from: "inDisplay" + SequentialAnimation { + ParentAnimation { + target: image + NumberAnimation { target: image; properties: "x,y,width,height"; duration: 1000 } + } + PropertyAction { target: delegateItem; property: "VisualDataModel.inPersistedItems"; value: false } + } + } + ] + } + } + } + + + PathView { + id: imagePath + + anchors { left: parent.left; top: imageContainer.bottom; right: parent.right; bottom: parent.bottom } + model: visualModel + + pathItemCount: 7 + path: Path { + startX: -50; startY: 0 + PathQuad { x: 150; y: 50; controlX: 0; controlY: 50 } + PathQuad { x: 350; y: 0; controlX: 300; controlY: 50 } + } + } + + Item { + id: imageContainer + anchors { fill: parent; bottomMargin: 100 } + } +} diff --git a/examples/quick/views/visualdatamodel/visualdatamodel.qmlproject b/examples/quick/views/visualdatamodel/visualdatamodel.qmlproject new file mode 100644 index 0000000000..2bb4016996 --- /dev/null +++ b/examples/quick/views/visualdatamodel/visualdatamodel.qmlproject @@ -0,0 +1,14 @@ +import QmlProject 1.0 + +Project { + /* Include .qml, .js, and image files from current directory and subdirectories */ + QmlFiles { + directory: "." + } + JavaScriptFiles { + directory: "." + } + ImageFiles { + directory: "." + } +} diff --git a/examples/quick/views/visualitemmodel/visualitemmodel.qml b/examples/quick/views/visualitemmodel/visualitemmodel.qml new file mode 100644 index 0000000000..20119fc88d --- /dev/null +++ b/examples/quick/views/visualitemmodel/visualitemmodel.qml @@ -0,0 +1,117 @@ +/**************************************************************************** +** +** Copyright (C) 2012 Digia Plc and/or its subsidiary(-ies). +** Contact: http://www.qt-project.org/legal +** +** 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 Digia Plc 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$ +** +****************************************************************************/ + +// This example demonstrates placing items in a view using +// a VisualItemModel + +import QtQuick 2.0 + +Rectangle { + id: root + color: "lightgray" + width: 320 + height: 480 + property bool printDestruction: false + +//! [0] + VisualItemModel { + id: itemModel + + Rectangle { + width: view.width; height: view.height + color: "#FFFEF0" + Text { text: "Page 1"; font.bold: true; anchors.centerIn: parent } + + Component.onDestruction: if (printDestruction) print("destroyed 1") + } + Rectangle { + width: view.width; height: view.height + color: "#F0FFF7" + Text { text: "Page 2"; font.bold: true; anchors.centerIn: parent } + + Component.onDestruction: if (printDestruction) print("destroyed 2") + } + Rectangle { + width: view.width; height: view.height + color: "#F4F0FF" + Text { text: "Page 3"; font.bold: true; anchors.centerIn: parent } + + Component.onDestruction: if (printDestruction) print("destroyed 3") + } + } + + ListView { + id: view + anchors { fill: parent; bottomMargin: 30 } + model: itemModel + preferredHighlightBegin: 0; preferredHighlightEnd: 0 + highlightRangeMode: ListView.StrictlyEnforceRange + orientation: ListView.Horizontal + snapMode: ListView.SnapOneItem; flickDeceleration: 2000 + cacheBuffer: 200 + } +//! [0] + Rectangle { + width: root.width; height: 30 + anchors { top: view.bottom; bottom: parent.bottom } + color: "gray" + + Row { + anchors.centerIn: parent + spacing: 20 + + Repeater { + model: itemModel.count + + Rectangle { + width: 5; height: 5 + radius: 3 + color: view.currentIndex == index ? "blue" : "white" + + MouseArea { + width: 20; height: 20 + anchors.centerIn: parent + onClicked: view.currentIndex = index + } + } + } + } + } +} -- cgit v1.2.3