QmlDesigner.QtQuickPlugin: update for views

ListView/GridView and PathView are now populated with code

Change-Id: I66356be4f4c49c11177e6aefca3f013aa0d5937c
Reviewed-on: http://codereview.qt.nokia.com/717

Reviewed-by: Qt Sanity Bot <qt_sanity_bot@ovi.com>
Reviewed-by: Thomas Hartmann <Thomas.Hartmann@nokia.com>

src/plugins/qmldesigner/qtquickplugin/qtquickplugin.qrc

@@ -31,5 +31,8 @@
         <file>images/text-edit-icon16.png</file>
         <file>images/text-input-icon16.png</file>
         <file>images/webview-icon16.png</file>
+        <file>source/listview.qml</file>
+        <file>source/gridview.qml</file>
+        <file>source/pathview.qml</file>
     </qresource>
 </RCC>

src/plugins/qmldesigner/qtquickplugin/quick.metainfo

@@ -68,22 +68,19 @@
   </node>
   <node name="QtQuick.GridView" icon=":/qtquickplugin/images/gridview-icon16.png">
     <itemlibraryentry name="Grid View" category="Qt Quick - Views" libraryIcon=":/qtquickplugin/images/gridview-icon.png" version="1.0">
-      <property name="width" type="int" value="300"/>
-      <property name="height" type="int" value="300"/>
+      <qml source=":/qtquickplugin/source/gridview.qml"/>
     </itemlibraryentry>
   </node>
 
   <node name="QtQuick.ListView" icon=":/qtquickplugin/images/listview-icon16.png">
     <itemlibraryentry name="List View" category="Qt Quick - Views" libraryIcon=":/qtquickplugin/images/listview-icon.png" version="1.0">
-      <property name="width" type="int" value="300"/>
-      <property name="height" type="int" value="300"/>
+      <qml source=":/qtquickplugin/source/listview.qml"/>
     </itemlibraryentry>
   </node>
 
   <node name="QtQuick.PathView" icon=":/qtquickplugin/images/pathview-icon16.png">
     <itemlibraryentry name="Path View" category="Qt Quick - Views" libraryIcon=":/qtquickplugin/images/pathview-icon.png" version="1.0">
-      <property name="width" type="int" value="300"/>
-      <property name="height" type="int" value="300"/>
+    <qml source=":/qtquickplugin/source/pathview.qml"/>
     </itemlibraryentry>
   </node>
 

src/plugins/qmldesigner/qtquickplugin/source/gridview.qml

+import QtQuick 1.0
+
+GridView {
+    width: 200
+    height: 200
+
+    model: ListModel {
+
+        ListElement {
+            name: "Grey"
+            colorCode: "grey"
+
+        }
+
+        ListElement {
+            name: "Red"
+            colorCode: "red"
+
+        }
+
+        ListElement {
+            name: "Blue"
+            colorCode: "blue"
+
+        }
+
+        ListElement {
+            name: "Green"
+            colorCode: "green"
+
+        }
+    }
+
+    delegate:  Item {
+        height: 50
+        x: 5
+
+        Column {
+            spacing: 5
+            Rectangle {
+                width: 40
+                height: 40
+                color: colorCode
+                anchors.horizontalCenter: parent.horizontalCenter
+            }
+
+            Text {
+                x: 5
+                text: name
+                anchors.horizontalCenter: parent.horizontalCenter
+                font.bold: true
+            }
+
+        }
+    }
+}

src/plugins/qmldesigner/qtquickplugin/source/listview.qml

+import QtQuick 1.0
+
+ListView {
+    width: 160
+    height: 160
+    model:  ListModel {
+        ListElement {
+            name: "Grey"
+            colorCode: "grey"
+        }
+        ListElement {
+            name: "Red"
+            colorCode: "red"
+        }
+        ListElement {
+            name: "Blue"
+            colorCode: "blue"
+        }
+        ListElement {
+            name: "Green"
+            colorCode: "green"
+        }
+    }
+
+    delegate:  Item {
+        height: 40
+        x: 5
+        Row {
+            id: row1
+            spacing: 10
+            Rectangle { width: 40; height: 40; color: colorCode; }
+            Text {
+                text: name
+                anchors.verticalCenter: parent.verticalCenter
+                font.bold: true
+            }
+        }
+    }
+}

src/plugins/qmldesigner/qtquickplugin/source/pathview.qml

+import QtQuick 1.0
+
+PathView {
+    width: 250
+    height: 200
+
+    path: Path {
+        startX: 120
+        startY: 100
+        PathQuad { x: 120; y: 25; controlX: 260; controlY: 75 }
+        PathQuad { x: 120; y: 100; controlX: -20; controlY: 75 }
+    }
+    model: ListModel {
+        ListElement {
+            name: "Grey"
+            colorCode: "grey"
+        }
+        ListElement {
+            name: "Red"
+            colorCode: "red"
+        }
+        ListElement {
+            name: "Blue"
+            colorCode: "blue"
+        }
+        ListElement {
+            name: "Green"
+            colorCode: "green"
+        }
+    }
+    delegate: Component {
+        Column {
+            spacing: 5
+            Rectangle {
+                width: 40
+                height: 40
+                color: colorCode
+                anchors.horizontalCenter: parent.horizontalCenter
+            }
+            Text {
+                x: 5
+                text: name
+                anchors.horizontalCenter: parent.horizontalCenter
+                font.bold: true
+            }
+        }
+    }
+}
+