ListView system tests

Tests:
Change of model, delegate and orientation at runtime
Use of add, move and remove view transitions
Changing of view transitions at runtime

Task-number: QTBUG-21504
Change-Id: Icaeb5c0305c7db5db4c4b8c5ad5fd1d6393cc599
Reviewed-by: Bea Lam <bea.lam@nokia.com>

5 files changed, 1009 insertions, 0 deletions

diff --git a/tests/system/sys_listview.qtt b/tests/system/sys_listview.qtt
new file mode 100644
index 0000000000..efd116fa92
--- /dev/null
+++ b/tests/system/sys_listview.qtt
@@ -0,0 +1,221 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/
+**
+** This file is part of the test suite of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL$
+** GNU Lesser General Public License Usage
+** This file may be used under the terms of the GNU Lesser General Public
+** License version 2.1 as published by the Free Software Foundation and
+** appearing in the file LICENSE.LGPL included in the packaging of this
+** file. Please review the following information to ensure the GNU Lesser
+** General Public License version 2.1 requirements will be met:
+** http://www.gnu.org/licenses/old-licenses/lgpl-2.1.html.
+**
+** In addition, as a special exception, Nokia gives you certain additional
+** rights. These rights are described in the Nokia Qt LGPL Exception
+** version 1.1, included in the file LGPL_EXCEPTION.txt in this package.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU General
+** Public License version 3.0 as published by the Free Software Foundation
+** and appearing in the file LICENSE.GPL included in the packaging of this
+** file. Please review the following information to ensure the GNU General
+** Public License version 3.0 requirements will be met:
+** http://www.gnu.org/copyleft/gpl.html.
+**
+** Other Usage
+** Alternatively, this file may be used in accordance with the terms and
+** conditions contained in a signed written agreement between you and Nokia.
+**
+**
+**
+**
+**
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+//TESTED_COMPONENT=qtdeclarative
+
+testcase = {
+
+    altering_listview_primary_properties: function()
+    {
+        // Test Meta-data
+        testTitle = "Altering ListView primary properties";
+        testBinary = "alteredViews.qml";
+        testSource: "$QTDIR/qtdeclarative/tests/system/listview";
+        testGoal = "Verify that the model and delegate for a ListView can be changed";
+        testPreconditions = "None";
+        testGroups = "BAT,QtQuick 2.0";
+
+        // Test Steps
+        prompt(twiki('---+++ ' + testTitle + '<br><br>
+        *Goal:* ' + testGoal + '<br>
+        *Pre-Requisites:* ' + testPreconditions + '<br>
+        *Tested Binary:* ' + testBinary + '<br>
+    | *Step* | *Verification* |
+    | Run '+testBinary+' | Application has started, showing a ListView |
+    | | The view shows items named Model1_1 - 5, and the delegates are white with a black border |
+    | Press the Mod button | The view now shows items named Model2_1 - 5 |
+    | Press Del | The delegates are now golden with a black border |
+    | Press Mod, then Del | The view again shows items named Model1_1 - 5, and are white |'));
+    },
+
+    altering_listview_orientation: function()
+    {
+        // Test Meta-data
+        testTitle = "Altering ListView orientation";
+        testBinary = "alteredViews.qml";
+        testSource: "$QTDIR/qtdeclarative/tests/system/listview";
+        testGoal = "Verify that the orientation of a listview can be changed at runtime";
+        testPreconditions = "None";
+        testGroups = "BAT,QtQuick 2.0";
+
+        // Test Steps
+        prompt(twiki('---+++ ' + testTitle + '<br><br>
+        *Goal:* ' + testGoal + '<br>
+        *Pre-Requisites:* ' + testPreconditions + '<br>
+        *Tested Binary:* ' + testBinary + '<br>
+    | *Step* | *Verification* |
+    | Run '+testBinary+' | Application has started, showing a ListView |
+    | | The view shows items named Model1_1 - 5, and the delegates are white with a black border |
+    | Press the Ori button | The view is now displayed in a horizontal orientation |
+    |  | The delegates should have resized quickly and smoothly, and the text rotated anticlockwise (both animated) |
+    | Press Del | The delegates are now golden with a black border, still in horizontal orientation |
+    | Press Ori | The view again shows in a vertical orientation, with the golden delegates |'));
+    },
+
+    basic_view_transition: function()
+    {
+        // Test Meta-data
+        testTitle = "Basic View Transitions";
+        testBinary = "viewTransitions.qml";
+        testSource: "$QTDIR/qtdeclarative/tests/system/listview";
+        testGoal = "Verify a basic transition can be applied to a ListView action";
+        testPreconditions = "None";
+        testGroups = "BAT,QtQuick 2.0";
+        testRequirements = "QTBUG-21504: Enable transitions for add/move/remove operations on views";
+
+        // Test Steps
+        prompt(twiki('---+++ ' + testTitle + '<br><br>
+        *Goal:* ' + testGoal + '<br>
+        *Pre-Requisites:* ' + testPreconditions + '<br>
+        *Tested Binary:* ' + testBinary + '<br>
+    | *Step* | *Verification* |
+    | Run '+testBinary+' | Application has started, showing a ListView |
+    | Press the Set A button | The Set A button shows green |
+    | Press Add | A new yellow item fades in after the currently selected item |
+    |  | The other items slide down, with a slight delay for each item, giving it a flowing effect |
+    | Select the new item | |
+    | Press To Top | The item changes to light blue and moves to the top, curving out to the right of the ListView |
+    | Select an item near the top and press Remove | The selected item fades out |
+    |  | The other items slide up, with a slight delay for each item, giving it a flowing effect |'));
+    },
+
+    switching_view_transition: function() {
+        // Test Meta-data
+        testTitle = "Switching View Transitions";
+        testBinary = "viewTransitions.qml";
+        testSource: "$QTDIR/qtdeclarative/tests/system/listview";
+        testGoal = "Verify a basic ListView transition can be changed to another";
+        testPreconditions = "None";
+        testGroups = "BAT,QtQuick 2.0";
+        testRequirements = "QTBUG-21504: Enable transitions for add/move/remove operations on views";
+
+        // Test Steps
+        prompt(twiki('---+++ ' + testTitle + '<br><br>
+        *Goal:* ' + testGoal + '<br>
+        *Pre-Requisites:* ' + testPreconditions + '<br>
+        *Tested Binary:* ' + testBinary + '<br>
+    | *Step* | *Verification* |
+    | Run '+testBinary+' | Application has started, showing a ListView |
+    | Press the Set A button | The Set A button shows green |
+    | Press Add | A new yellow item fades in after the currently selected item |
+    |  | The other items slide down, with a slight delay for each item, giving it a flowing effect |
+    | Select the new item | |
+    | Press To Top | The item changes to light blue and moves to the top, curving out to the right of the ListView |
+    | Select an item near the top and press Remove | The selected item fades out |
+    |  | The other items slide up, with a slight delay for each item, giving it a flowing effect |
+    | Press the Set B button | The Set B button shows green |
+        | Press Add | A new yellow item pops in after the currently selected item |
+    |  | The other items tumble down in a disorderly manner |
+    | Select the new item | |
+    | Press To Top | The item changes from red to light blue and curves out to the right of the ListView, bouncing in at the top |
+    | Select an item near the top and press Remove | The selected item pops out |
+    |  | The other items slide up, with a slight delay for each item, giving it a flowing effect |'));
+    },
+
+    different_transitions_for_every_operation: function() {
+        // Test Meta-data
+        testTitle = "Different Transitions for all Operations";
+        testBinary = "viewTransitions.qml";
+        testSource: "$QTDIR/qtdeclarative/tests/system/listview";
+        testGoal = "Verify a different Transition can be applied to displacement from adding, moving and removing.";
+        testPreconditions = "None";
+        testGroups = "BAT,QtQuick 2.0";
+        testRequirements = "QTBUG-21504: Enable transitions for add/move/remove operations on views";
+
+        // Test Steps
+        prompt(twiki('---+++ ' + testTitle + '<br><br>
+        *Goal:* ' + testGoal + '<br>
+        *Pre-Requisites:* ' + testPreconditions + '<br>
+        *Tested Binary:* ' + testBinary + '<br>
+    | *Step* | *Verification* |
+    | Run '+testBinary+' | Application has started, showing a ListView |
+    | Press the Set C button | The Set C button shows green |
+    | Press Add | A new yellow item swoops in from the side |
+    |  | The other items jitter down, with a slight delay for each item |
+    | Select the new item | |
+    | Press To Top | The item changes from red to light blue and moves to the top, curving out to the right of the ListView |
+    | | The other items bounce down in a solid block |
+    | Select an item near the top and press Remove | The selected item fades out in a flashing manner |
+    |  | The other items snap up, with a slight delay for each item |
+    | Press the Append button a few times | Each added item swoops in from alternating sides | '));
+    },
+
+    delegates_and_effects: function() {
+        testTitle = "Delegates and effects";
+        testBinary = "viewTransitions.qml";
+        testSource: "$QTDIR/qtdeclarative/tests/system/listview";
+        testGoal = "Verify a delegate in transition can show effects.";
+        testPreconditions = "None";
+        testGroups = "BAT,QtQuick 2.0";
+        testRequirements = "QTBUG-21504: Enable transitions for add/move/remove operations on views";
+
+        // Test Steps
+        prompt(twiki('---+++ ' + testTitle + '<br><br>
+        *Goal:* ' + testGoal + '<br>
+        *Pre-Requisites:* ' + testPreconditions + '<br>
+        *Tested Binary:* ' + testBinary + '<br>
+    | *Step* | *Verification* |
+    | Run '+testBinary+' | Application has started, showing a ListView |
+    | Press the Set D button | The Set D button shows green |
+    | Select a lower item | The item is highlighted |
+    | Press To Top | The item fades to red particles, shifts to the top, and fades back to a normal delegate |
+    | | The other items shuffle down |'));
+    },
+
+    attached_onremove_property: function() {
+        testTitle = "Using the attached onRemove property";
+        testBinary = "onRemove.qml";
+        testSource: "$QTDIR/qtdeclarative/tests/system/listview";
+        testGoal = "Verify the onRemove attached property can be assigned.";
+        testPreconditions = "None";
+        testGroups = "BAT,QtQuick 2.0";
+        testRequirements = "QTBUG-21504: Enable transitions for add/move/remove operations on views";
+
+        // Test Steps
+        prompt(twiki('---+++ ' + testTitle + '<br><br>
+        *Goal:* ' + testGoal + '<br>
+        *Pre-Requisites:* ' + testPreconditions + '<br>
+        *Tested Binary:* ' + testBinary + '<br>
+    | *Step* | *Verification* |
+    | Run '+testBinary+' | Application has started, showing a ListView |
+    | Press the <b>-</b> button | The selected item disappears in a shower of sparks |'));
+    }
+}
diff --git a/tests/testapplications/listview/alteredViews.qml b/tests/testapplications/listview/alteredViews.qml
new file mode 100644
index 0000000000..26aa678db2
--- /dev/null
+++ b/tests/testapplications/listview/alteredViews.qml
@@ -0,0 +1,153 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/
+**
+** This file is part of the test suite of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+**     the names of its contributors may be used to endorse or promote
+**     products derived from this software without specific prior written
+**     permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+
+Rectangle {
+    width: 300
+    height: 400
+
+    ListView {
+        id: listview
+        model: model1
+        delegate: delegate1
+        anchors.fill: parent
+        anchors.margins: 20
+    }
+
+    Component {
+        id: delegate1
+        Rectangle {
+            height: listview.orientation == ListView.Horizontal ? 260 : 50
+            Behavior on height { NumberAnimation { duration: 500 } }
+            width: listview.orientation == ListView.Horizontal ? 50 : 260
+            Behavior on width { NumberAnimation { duration: 500 } }
+            border.color: "black"
+            Text {
+                anchors.centerIn: parent; color: "black"; text: model.name
+                rotation: listview.orientation == ListView.Horizontal ? -90 : 0
+                Behavior on rotation { NumberAnimation { duration: 500 } }
+
+            }
+        }
+    }
+
+    Component {
+        id: delegate2
+        Rectangle {
+            height: listview.orientation == ListView.Horizontal ? 260 : 50
+            Behavior on height { NumberAnimation { duration: 500 } }
+            width: listview.orientation == ListView.Horizontal ? 50 : 260
+            Behavior on width { NumberAnimation { duration: 500 } }
+            color: "goldenrod"; border.color: "black"
+            Text {
+                anchors.centerIn: parent; color: "royalblue"; text: model.name
+                rotation: listview.orientation == ListView.Horizontal ? -90 : 0
+                Behavior on rotation { NumberAnimation { duration: 1500 } }
+            }
+        }
+
+    }
+
+    Column {
+        Rectangle {
+            height: 50
+            width: 50
+            color: "blue"
+            border.color: "orange"
+            Text {
+                anchors.centerIn: parent
+                text: "Mod"
+            }
+            MouseArea {
+                anchors.fill: parent
+                onClicked: listview.model = listview.model == model2 ? model1 : model2
+            }
+        }
+
+        Rectangle {
+            height: 50
+            width: 50
+            color: "blue"
+            border.color: "orange"
+            Text {
+                anchors.centerIn: parent
+                text: "Del"
+            }
+            MouseArea {
+                anchors.fill: parent
+                onClicked: listview.delegate = listview.delegate == delegate2 ? delegate1 : delegate2
+            }
+        }
+
+        Rectangle {
+            height: 50
+            width: 50
+            color: "blue"
+            border.color: "orange"
+            Text {
+                anchors.centerIn: parent
+                text: "Ori"
+            }
+            MouseArea {
+                anchors.fill: parent
+                onClicked: listview.orientation = listview.orientation == ListView.Horizontal ? ListView.Vertical : ListView.Horizontal
+            }
+        }
+    }
+
+    ListModel {
+        id: model1
+        ListElement { name: "model1_1" }
+        ListElement { name: "model1_2" }
+        ListElement { name: "model1_3" }
+        ListElement { name: "model1_4" }
+        ListElement { name: "model1_5" }
+    }
+
+    ListModel {
+        id: model2
+        ListElement { name: "model2_1" }
+        ListElement { name: "model2_2" }
+        ListElement { name: "model2_3" }
+        ListElement { name: "model2_4" }
+        ListElement { name: "model2_5" }
+    }
+}
diff --git a/tests/testapplications/listview/onRemove.qml b/tests/testapplications/listview/onRemove.qml
new file mode 100644
index 0000000000..2c1d52a40e
--- /dev/null
+++ b/tests/testapplications/listview/onRemove.qml
@@ -0,0 +1,156 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/
+**
+** This file is part of the test suite of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+**     the names of its contributors may be used to endorse or promote
+**     products derived from this software without specific prior written
+**     permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+import QtQuick.Particles 2.0
+Item {
+    id: root
+    width: 450; height: 600
+
+    Component {
+        id: viewDelegate
+
+        Rectangle {
+            id: item
+            signal boom
+            Connections {
+                target: item
+                onBoom: emitter.burst(1000)
+            }
+
+            width: 225; height: 40
+            border.width: ListView.isCurrentItem ? 3 : 1
+            z: ListView.isCurrentItem ? 100 : 1
+            color: original ? "lightsteelblue" : "yellow"
+            objectName: name
+            Text { x: 10; text: name; font.pixelSize: 20 }
+            MouseArea { anchors.fill: parent; onClicked: listview.currentIndex = index }
+
+            Emitter {
+                id: emitter
+                system: ps
+                anchors.fill: parent
+                enabled: false
+                speed: AngleDirection {
+                    angle: 0
+                    angleVariation: 360
+                    magnitude: 50
+                    magnitudeVariation: 50
+                }
+                lifeSpan: 2000
+            }
+
+            ListView.onRemove: SequentialAnimation {
+                PropertyAction { target: item; property: "ListView.delayRemove"; value: true }
+                PropertyAction { target: item; property: "opacity"; value: 0 }
+                ScriptAction { script: item.boom() }
+                PauseAnimation { duration: 1000 }
+                PropertyAction { target: item; property: "ListView.delayRemove"; value: false }
+            }
+        }
+    }
+
+
+    ListView {
+        id: listview
+        width: 225; height: 500
+        anchors.centerIn: parent
+        delegate: viewDelegate
+        header: Rectangle {
+            height: 50; width: 225
+            color: "blue"
+            Text { anchors.centerIn: parent; text: "Transitions!"; color: "goldenrod" }
+        }
+        model: ListModel {
+            id: a_model
+            ListElement { name: "Item A"; original: true }
+            ListElement { name: "Item B"; original: true }
+            ListElement { name: "Item C"; original: true }
+            ListElement { name: "Item D"; original: true }
+            ListElement { name: "Item E"; original: true }
+            ListElement { name: "Item F"; original: true }
+        }
+        Rectangle {
+            anchors.fill: parent
+            color: "transparent"
+            border.color: "black"
+        }
+
+    }
+
+    ParticleSystem {
+        id: ps
+        ImageParticle {
+            id: imageparticle
+            source: "star.png"
+            color: "blue"
+        }
+    }
+    Column {
+        spacing: 2
+        Rectangle {
+            gradient: Gradient {
+                GradientStop { position: 0.0; color: "darkgray" }
+                GradientStop { position: 0.5; color: "lightgray" }
+                GradientStop { position: 1.0; color: "darkgray" }
+            }
+            radius: 6
+            border.color: "black"
+            height: 50; width: 80
+            Text { anchors.centerIn: parent; text: "+"; font.pixelSize: 25; font.bold: true }
+            MouseArea { anchors.fill: parent; onClicked: listview.model.insert(listview.currentIndex+1, {"name": "New item", "original": false } ) }
+        }
+        Rectangle {
+            gradient: Gradient {
+                GradientStop { position: 0.0; color: "darkgray" }
+                GradientStop { position: 0.5; color: "lightgray" }
+                GradientStop { position: 1.0; color: "darkgray" }
+            }
+            radius: 6
+            border.color: "black"
+            height: 50; width: 80
+            Text { anchors.centerIn: parent; text: "-"; font.pixelSize: 25; font.bold: true }
+            MouseArea { anchors.fill: parent; onClicked: listview.model.remove(listview.currentIndex) }
+        }
+    }
+}
+
+
+
diff --git a/tests/testapplications/listview/star.png b/tests/testapplications/listview/star.png
new file mode 100644
index 0000000000..0d592cfa87
--- /dev/null
+++ b/tests/testapplications/listview/star.png
diff --git a/tests/testapplications/listview/viewTransitions.qml b/tests/testapplications/listview/viewTransitions.qml
new file mode 100644
index 0000000000..6ed7cc1619
--- /dev/null
+++ b/tests/testapplications/listview/viewTransitions.qml
@@ -0,0 +1,479 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/
+**
+** This file is part of the test suite of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+**     the names of its contributors may be used to endorse or promote
+**     products derived from this software without specific prior written
+**     permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+import QtQuick.Particles 2.0
+Item {
+    id: root
+    width: 450; height: 600
+
+    property int currentSet: 0
+    property bool useStock: false
+
+    Component {
+        id: viewDelegate
+
+        Rectangle {
+            id: item
+            property bool movn: false
+            property int parts: 0
+
+            width: 225; height: 40
+            border.width: ListView.isCurrentItem ? 3 : 1
+            z: ListView.isCurrentItem ? 100 : 1
+            color: original ? "lightsteelblue" : "yellow"
+            objectName: name
+            Text { x: 10; text: name; font.pixelSize: 20 }
+            MouseArea { anchors.fill: parent; onClicked: listview.currentIndex = index }
+
+            Emitter {
+                id: emitter
+                system: ps
+                anchors.fill: parent
+                enabled: false
+                speed: AngleDirection {
+                    angle: 0
+                    angleVariation: 360
+                    magnitude: 50
+                    magnitudeVariation: 50
+                }
+            }
+            Emitter {
+                id: emitter2
+                system: ps
+                anchors.fill: parent
+                enabled: item.movn
+                emitRate: parts
+                speed: AngleDirection {
+                    angle: 0
+                    angleVariation: 360
+                    magnitude: 2
+                    magnitudeVariation: 5
+                }
+            }
+        }
+    }
+
+    ListView {
+        id: listview
+        width: 225; height: 500
+        anchors.centerIn: parent
+        delegate: viewDelegate
+        header: Rectangle {
+            height: 50; width: 225
+            color: "blue"
+            Text { anchors.centerIn: parent; text: "Transitions!"; color: "goldenrod" }
+        }
+        model: ListModel {
+            id: a_model
+            ListElement { name: "Item A"; original: true }
+            ListElement { name: "Item B"; original: true }
+            ListElement { name: "Item C"; original: true }
+            ListElement { name: "Item D"; original: true }
+            ListElement { name: "Item E"; original: true }
+            ListElement { name: "Item F"; original: true }
+        }
+        Rectangle {
+            anchors.fill: parent
+            color: "transparent"
+            border.color: "black"
+        }
+
+    }
+
+    ParticleSystem {
+        id: ps
+        ImageParticle {
+            id: imageparticle
+            source: "star.png"
+            color: "red"
+        }
+    }
+
+
+    /* States (Selected operation Transitions) */
+    states: [
+        State {
+            name: "setA"
+            when: currentSet == 0
+            PropertyChanges {
+                target: listview
+                add: a_add
+                move: a_move
+                remove: a_remove
+                displaced: a_displaced
+            }
+        },
+        State {
+            name: "setB"
+            when: currentSet == 1
+            PropertyChanges {
+                target: listview
+                add: b_add
+                move: b_move
+                remove: b_remove
+                displaced: b_displaced
+            }
+        },
+        State {
+            name: "setC"
+            when: currentSet == 2
+            PropertyChanges {
+                target: listview
+                add: c_add
+                move: c_move
+                remove: c_remove
+                addDisplaced: c_addDisplaced
+                moveDisplaced: c_moveDisplaced
+                removeDisplaced: c_removeDisplaced
+            }
+        },
+        State {
+            name: "setD"
+            when: currentSet == 3
+            PropertyChanges {
+                target: listview
+                move: d_move
+                moveDisplaced: d_moveDisplaced
+            }
+            PropertyChanges {
+                target: root
+                useStock: true
+            }
+        }
+    ]
+
+    /* Transitions */
+    Transition {
+        id: a_add
+        ParallelAnimation {
+            NumberAnimation { target: a_add.ViewTransition.item; properties: "opacity"; from: 0; to: 1; duration: 1000 }
+        }
+    }
+    Transition {
+        id: a_remove
+        SequentialAnimation {
+            NumberAnimation { target: a_remove.ViewTransition.item; properties: "opacity"; from: 1; to: 0; duration: 1000 }
+        }
+    }
+    Transition {
+        id: a_move
+        ColorAnimation { target: a_move.ViewTransition.item; properties: "color"; to: "lightsteelblue"; duration: 1000 }
+        PathAnimation {
+            duration: 1000
+            target: a_move.ViewTransition.item
+            path: Path {
+                PathCurve { x: a_move.ViewTransition.destination.x + 150; y: a_move.ViewTransition.destination.y + 100 }
+                PathCurve { x: a_move.ViewTransition.destination.x + 150; y: a_move.ViewTransition.destination.y }
+                PathCurve { x: a_move.ViewTransition.destination.x; y: a_move.ViewTransition.destination.y }
+            }
+        }
+    }
+    Transition {
+        id: a_displaced
+        PropertyAction { target: a_displaced.ViewTransition.item; property: "color"; value: "lightsteelblue" }
+        ParallelAnimation {
+            NumberAnimation { target: a_displaced.ViewTransition.item; property: "opacity"; to: 1; duration: 250 }
+            SequentialAnimation {
+                PauseAnimation { duration: a_displaced.ViewTransition.index * 200 }
+                NumberAnimation { properties: "x,y"; duration: 1000; easing.type: Easing.OutQuad }
+            }
+        }
+    }
+
+
+    Transition {
+        id: b_add
+        SequentialAnimation {
+            NumberAnimation { target: b_add.ViewTransition.item; properties: "scale"; from: 1; to: 1.3; duration: 100 }
+            NumberAnimation { target: b_add.ViewTransition.item; properties: "scale"; from: 1.3; to: 1; duration: 500; easing.type: Easing.OutBounce }
+        }
+    }
+    Transition {
+        id: b_move
+        SequentialAnimation {
+            PauseAnimation { duration: b_move.ViewTransition.index * 100 }
+            ParallelAnimation {
+                ColorAnimation { target: b_move.ViewTransition.item; properties: "color"; from: "red"; to: "lightsteelblue"; duration: 2000 }
+                SequentialAnimation {
+                    PathAnimation {
+                        duration: 1000
+                        target: b_move.ViewTransition.item
+                        path: Path {
+                            PathCurve { x: b_move.ViewTransition.destination.x + 150; y: b_move.ViewTransition.destination.y + 100 }
+                            PathCurve { relativeX: 30; relativeY: -100 }
+                        }
+                    }
+                    NumberAnimation { properties: "x,y"; duration: 1000; easing.type: Easing.OutBounce }
+                }
+            }
+        }
+    }
+    Transition {
+        id: b_remove
+        SequentialAnimation {
+            NumberAnimation { target: b_remove.ViewTransition.item; properties: "opacity"; from: 1; to: 0; duration: 1000 }
+        }
+    }
+    Transition {
+        id: b_displaced
+        PropertyAction { target: b_displaced.ViewTransition.item; property: "color"; value: "lightsteelblue" }
+        SequentialAnimation {
+            PauseAnimation { duration: b_displaced.ViewTransition.item.x == 0 ? b_displaced.ViewTransition.index * 200 : 0 }
+            NumberAnimation { properties: "x,y"; duration: 1000; easing.type: Easing.OutBounce }
+        }
+    }
+
+
+    Transition {
+        id: c_add
+        NumberAnimation { property: "opacity"; from: 0; to: 1.0; duration: 400 }
+        NumberAnimation { property: "scale"; from: 0; to: 1.0; duration: 400 }
+        property int xoff
+        xoff: c_add.ViewTransition.index % 2 == 0 ? 200 : -200
+        PathAnimation {
+            duration: 1000
+            path: Path {
+                startX: c_add.ViewTransition.destination.x + c_add.xoff
+                startY: c_add.ViewTransition.destination.y + 200
+                PathCurve { relativeX: -100; relativeY: -50 }
+                PathCurve { relativeX: 50; relativeY: -150 }
+                PathCurve {
+                    x: c_add.ViewTransition.destination.x
+                    y: c_add.ViewTransition.destination.y
+                }
+            }
+        }
+    }
+    Transition {
+        id: c_move
+        ColorAnimation { target: c_move.ViewTransition.item; properties: "color"; from: "red"; to: "lightsteelblue"; duration: 1000 }
+        PathAnimation {
+            duration: 1000
+            target: c_move.ViewTransition.item
+            path: Path {
+                PathCurve { x: c_move.ViewTransition.destination.x + 150; y: c_move.ViewTransition.destination.y + 100 }
+                PathCurve { x: c_move.ViewTransition.destination.x + 150; y: c_move.ViewTransition.destination.y }
+                PathCurve { x: c_move.ViewTransition.destination.x; y: c_move.ViewTransition.destination.y }
+            }
+        }
+    }
+    Transition {
+        id: c_remove
+        PropertyAnimation { target: c_remove.ViewTransition.item; properties: "opacity"; to: 0; duration: 3000; easing.type: Easing.OutInBounce }
+    }
+    Transition {
+        id: c_addDisplaced
+
+        PropertyAction { property: "color"; value: "lightsteelblue" }
+        PropertyAction { property: "opacity"; value: 1.0 }
+        PropertyAction { property: "scale"; value: 1.0 }
+        SequentialAnimation {
+            PauseAnimation { duration: c_addDisplaced.ViewTransition.index * 200 }
+            NumberAnimation { properties: "x,y"; duration: 1000; easing.type: Easing.OutElastic }
+        }
+
+    }
+    Transition {
+        id: c_moveDisplaced
+
+        PropertyAction { property: "color"; value: "lightsteelblue" }
+        PropertyAction { property: "opacity"; value: 1.0 }
+        PropertyAction { property: "scale"; value: 1.0 }
+        SequentialAnimation {
+            NumberAnimation { properties: "x,y"; duration: 1000; easing.type: Easing.OutBounce }
+        }
+
+    }
+    Transition {
+        id: c_removeDisplaced
+
+        PropertyAction { property: "color"; value: "lightsteelblue" }
+        PropertyAction { property: "opacity"; value: 1.0 }
+        PropertyAction { property: "scale"; value: 1.0 }
+        SequentialAnimation {
+            PauseAnimation { duration: (c_removeDisplaced.ViewTransition.index * 200) + 3000 }
+            NumberAnimation { properties: "x,y"; duration: 1000; easing.type: Easing.OutElastic }
+        }
+
+    }
+    Transition {
+        id: d_move
+        SequentialAnimation {
+            PropertyAction { target: d_move.ViewTransition.item; property: "movn"; value: true }
+            ParallelAnimation {
+                NumberAnimation { target: d_move.ViewTransition.item; properties: "opacity"; to: 0; duration: 2000 }
+                NumberAnimation { target: d_move.ViewTransition.item; properties: "parts"; to: 500; duration: 2000 }
+            }
+            NumberAnimation { properties: "x,y"; duration: 1000*(d_move.ViewTransition.index+1) }
+            ParallelAnimation {
+                NumberAnimation { target: d_move.ViewTransition.item; properties: "opacity"; to: 1; duration: 2000 }
+                NumberAnimation { target: d_move.ViewTransition.item; properties: "parts"; to: 0; duration: 2000 }
+            }
+            PropertyAction { target: d_move.ViewTransition.item; property: "movn"; value: false }
+        }
+    }
+
+    Transition {
+        id: d_moveDisplaced
+        PropertyAction { target: d_moveDisplaced.ViewTransition.item; property: "color"; value: "lightsteelblue" }
+        SequentialAnimation {
+            PauseAnimation { duration: 500*(d_moveDisplaced.ViewTransition.index+1) }
+            NumberAnimation { properties: "x,y"; duration: 1000; easing.type: Easing.OutQuad }
+        }
+    }
+
+    /* Buttons */
+    Column {
+        spacing: 2
+        Rectangle {
+            gradient: Gradient {
+                GradientStop { position: 0.0; color: "darkgray" }
+                GradientStop { position: 0.5; color: "lightgray" }
+                GradientStop { position: 1.0; color: "darkgray" }
+            }
+            radius: 6
+            border.color: "black"
+            height: 50; width: 80
+            Text { anchors.centerIn: parent; text: "To Top" }
+            MouseArea { anchors.fill: parent; onClicked: listview.model.move(listview.currentIndex, 0, 1) }
+        }
+        Rectangle {
+            gradient: Gradient {
+                GradientStop { position: 0.0; color: "darkgray" }
+                GradientStop { position: 0.5; color: "lightgray" }
+                GradientStop { position: 1.0; color: "darkgray" }
+            }
+            radius: 6
+            border.color: "black"
+            height: 50; width: 80
+            Text { anchors.centerIn: parent; text: "Add" }
+            MouseArea {
+                anchors.fill: parent
+                onClicked: listview.model.insert(listview.currentIndex+1, {"name": "New item", "original": false } )
+            }
+        }
+        Rectangle {
+            gradient: Gradient {
+                GradientStop { position: 0.0; color: "darkgray" }
+                GradientStop { position: 0.5; color: "lightgray" }
+                GradientStop { position: 1.0; color: "darkgray" }
+            }
+            radius: 6
+            border.color: "black"
+            height: 50; width: 80
+            Text { anchors.centerIn: parent; text: "Remove" }
+            MouseArea {
+                anchors.fill: parent
+                onClicked: listview.model.remove(listview.currentIndex)
+            }
+        }
+        Rectangle {
+            gradient: Gradient {
+                GradientStop { position: 0.0; color: "darkgray" }
+                GradientStop { position: 0.5; color: "lightgray" }
+                GradientStop { position: 1.0; color: "darkgray" }
+            }
+            radius: 6
+            border.color: "black"
+            height: 50; width: 80
+            Text { anchors.centerIn: parent; text: "Append" }
+            MouseArea {
+                anchors.fill: parent
+                onClicked: listview.model.append({"name": "New item", "original": false })
+            }
+        }
+    }
+    Column {
+        spacing: 2
+        anchors.right: parent.right
+        anchors.rightMargin: 2
+        Rectangle {
+            gradient: Gradient {
+                GradientStop { position: 0.0; color: "darkgray" }
+                GradientStop { position: 0.5; color: currentSet == 0 ? "green" : "lightgray"
+                    ColorAnimation on color { duration: 1000 }
+                }
+                GradientStop { position: 1.0; color: "darkgray" }
+            }
+            radius: 6
+            border.color: "black"
+            height: 50; width: 80
+            Text { anchors.centerIn: parent; text: "Set A" }
+            MouseArea { anchors.fill: parent; onClicked: { currentSet = 0 } }
+        }
+        Rectangle {
+            gradient: Gradient {
+                GradientStop { position: 0.0; color: "darkgray" }
+                GradientStop { position: 0.5; color: currentSet == 1 ? "green" : "lightgray" }
+                GradientStop { position: 1.0; color: "darkgray" }
+            }
+            radius: 6
+            border.color: "black"
+            height: 50; width: 80
+            Text { anchors.centerIn: parent; text: "Set B" }
+            MouseArea { anchors.fill: parent; onClicked: { currentSet = 1 } }
+        }
+        Rectangle {
+            gradient: Gradient {
+                GradientStop { position: 0.0; color: "darkgray" }
+                GradientStop { position: 0.5; color: currentSet == 2 ? "green" : "lightgray" }
+                GradientStop { position: 1.0; color: "darkgray" }
+            }
+            radius: 6
+            border.color: "black"
+            height: 50; width: 80
+            Text { anchors.centerIn: parent; text: "Set C" }
+            MouseArea { anchors.fill: parent; onClicked: { currentSet = 2 } }
+        }
+        Rectangle {
+            gradient: Gradient {
+                GradientStop { position: 0.0; color: "darkgray" }
+                GradientStop { position: 0.5; color: currentSet == 3 ? "green" : "lightgray" }
+                GradientStop { position: 1.0; color: "darkgray" }
+            }
+            radius: 6
+            border.color: "black"
+            height: 50; width: 80
+            Text { anchors.centerIn: parent; text: "Set D" }
+            MouseArea { anchors.fill: parent; onClicked: { currentSet = 3 } }
+        }
+    }
+}