--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/tests/auto/declarative/qmlvisual/Package_Views/packageviews.qml	Tue Jul 06 15:10:48 2010 +0300
@@ -0,0 +1,90 @@
+import Qt 4.7
+
+Rectangle {
+    id: root
+    width: 200
+    height: 200
+    color: "black"
+
+    VisualDataModel {
+        id: model
+        model: ListModel {
+            ListElement { itemColor: "red" }
+            ListElement { itemColor: "green" }
+            ListElement { itemColor: "blue" }
+            ListElement { itemColor: "orange" }
+            ListElement { itemColor: "purple" }
+            ListElement { itemColor: "yellow" }
+            ListElement { itemColor: "slategrey" }
+            ListElement { itemColor: "cyan" }
+            ListElement { itemColor: "red" }
+            ListElement { itemColor: "green" }
+            ListElement { itemColor: "blue" }
+            ListElement { itemColor: "orange" }
+            ListElement { itemColor: "purple" }
+            ListElement { itemColor: "yellow" }
+            ListElement { itemColor: "slategrey" }
+            ListElement { itemColor: "cyan" }
+        }
+        delegate: Package {
+            Rectangle {
+                id: listItem; Package.name: "list"; width:root.width/2; height: 50; color: "transparent"; border.color: "white"
+                MouseArea {
+                    anchors.fill: parent
+                    onClicked: myState.state = myState.state == "list" ? "grid" : "list"
+                }
+            }
+            Rectangle {
+                id: gridItem; Package.name: "grid"; width:50; height: 50; color: "transparent"; border.color: "white"
+                MouseArea {
+                    anchors.fill: parent
+                    onClicked: myState.state = myState.state == "list" ? "grid" : "list"
+                }
+            }
+            Rectangle { id: myContent; width:50; height: 50; color: itemColor }
+
+            StateGroup {
+                id: myState
+                state: "list"
+                states: [
+                    State {
+                        name: "list"
+                        ParentChange { target: myContent; parent: listItem }
+                        PropertyChanges { target: myContent; x: 0; y: 0; width: listItem.width }
+                    },
+                    State {
+                        name: "grid"
+                        ParentChange { target: myContent; parent: gridItem }
+                        PropertyChanges { target: myContent; x: 0; y: 0; width: gridItem.width }
+                    }
+                ]
+
+                transitions: [
+                    Transition {
+                        from: "*"; to: "*"
+                        SequentialAnimation {
+                            ParentAnimation{
+                                NumberAnimation { properties: "x,y,width"; easing.type: "InOutQuad" }
+                            }
+                        }
+                    }
+                ]
+            }
+        }
+    }
+
+    ListView {
+        width: parent.width/2
+        height: parent.height
+        model: model.parts.list
+    }
+
+    GridView {
+        x: parent.width/2
+        width: parent.width/2
+        cellWidth: 50
+        cellHeight: 50
+        height: parent.height
+        model: model.parts.grid
+    }
+}