Merge branch 'kinetic-declarativeui' of git@scm.dev.nokia.troll.no:qt/kinetic into kinetic-declarativeui

6 files changed, 245 insertions, 299 deletions

diff --git a/examples/declarative/gridview/gridview.qml b/examples/declarative/gridview/gridview.qml
index 2e5110a..93931c7 100644
--- a/examples/declarative/gridview/gridview.qml
+++ b/examples/declarative/gridview/gridview.qml
@@ -4,57 +4,35 @@ Rectangle {
     width: 300; height: 400; color: "white"
 
     ListModel {
-        id: AppModel
-        ListElement {
-            name: "Music"
-            icon: "AudioPlayer_48.png"
-        }
-        ListElement {
-            name: "Movies"
-            icon: "VideoPlayer_48.png"
-        }
-        ListElement {
-            name: "Camera"
-            icon: "Camera_48.png"
-        }
-        ListElement {
-            name: "Calendar"
-            icon: "DateBook_48.png"
-        }
-        ListElement {
-            name: "Messaging"
-            icon: "EMail_48.png"
-        }
-        ListElement {
-            name: "Todo List"
-            icon: "TodoList_48.png"
-        }
-        ListElement {
-            name: "Contacts"
-            icon: "AddressBook_48.png"
-        }
+        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
+        id: appDelegate
         Item {
             width: 100; height: 100
-            Image { id: Icon; y: 20; anchors.horizontalCenter: parent.horizontalCenter; source: icon }
-            Text { anchors.top: Icon.bottom; anchors.horizontalCenter: parent.horizontalCenter; text: name }
+            Image { id: myIcon; y: 20; anchors.horizontalCenter: parent.horizontalCenter; source: icon }
+            Text { anchors.top: myIcon.bottom; anchors.horizontalCenter: parent.horizontalCenter; text: name }
         }
     }
 
     Component {
-        id: AppHighlight
-        Rectangle { width: 80; height: 80; color: "#FFFF88" }
+        id: appHighlight
+        Rectangle { width: 80; height: 80; color: "lightsteelblue" }
     }
 
     GridView {
-        id: List1
         anchors.fill: parent
         cellWidth: 100; cellHeight: 100
-        model: AppModel; delegate: AppDelegate
-        highlight: AppHighlight
+        model: appModel; delegate: appDelegate
+        highlight: appHighlight
         focus: true
     }
 }
diff --git a/examples/declarative/listview/recipes.qml b/examples/declarative/listview/recipes.qml
index 4ccb344..3410f56 100644
--- a/examples/declarative/listview/recipes.qml
+++ b/examples/declarative/listview/recipes.qml
@@ -1,128 +1,136 @@
 import Qt 4.6
-
 import "content"
+
 // This example illustrates expanding a list item to show a more detailed view
+
 Rectangle {
     id: page
     width: 400; height: 240; color: "black"
-    resources: [
-        // Delegate for the recipes.  This delegate has two modes:
-        // 1. the list mode (default), which just shows the picture and title of the recipe.
-        // 2. the details mode, which also shows the ingredients and method.
-        Component {
-            id: recipeDelegate
-            Item {
-                id: wrapper
-                width: list.width
-                // 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
-
-                // A simple rounded rectangle for the background
-                Rectangle {
-                    id: background
-                    x: 1; y: 2; width: parent.width-2; height: parent.height-4
-                    color: "#FEFFEE"; border.color: "#FFBE4F"; 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.
-                MouseRegion {
-                    id: pageMouse
-                    anchors.fill: parent
-                    onClicked: { wrapper.state = 'Details' }
-                }
-                // Layout the page.  Picture, title and ingredients at the top, method at the
-                // bottom.  Note that elements that should not be visible in the list
-                // mode have their opacity set to wrapper.detailsOpacity.
-                Row {
-                    id: topLayout
-                    x: 10; y: 10; height: recipePic.height; width: parent.width
-                    spacing: 10
-                    Image {
-                        id: recipePic
-                        source: picture; width: 48; height: 48
-                    }
-                    Column {
-                        height: recipePic.height; width: background.width-recipePic.width-20
-                        spacing: 5
-                        Text { id: name; text: title; font.bold: true; font.pointSize: 16 }
-                        Text {
-                            text: "Ingredients"; font.pointSize: 12; font.bold: true
-                            opacity: wrapper.detailsOpacity
-                        }
-                        Text {
-                            text: ingredients; wrap: true; width: parent.width
-                            opacity: wrapper.detailsOpacity
-                        }
-                    }
+
+    // Delegate for the recipes.  This delegate has two modes:
+    // 1. the list mode (default), which just shows the picture and title of the recipe.
+    // 2. the details mode, which also shows the ingredients and method.
+    Component {
+        id: recipeDelegate
+        Item {
+            id: wrapper
+            width: list.width
+
+            // 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
+
+            // A simple rounded rectangle for the background
+            Rectangle {
+                id: background
+                x: 1; y: 2; width: parent.width - 2; height: parent.height - 4
+                color: "#FEFFEE"; border.color: "#FFBE4F"; 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.
+            MouseRegion {
+                id: pageMouse
+                anchors.fill: parent
+                onClicked: wrapper.state = 'Details';
+            }
+
+            // Layout the page.  Picture, title and ingredients at the top, method at the
+            // bottom.  Note that elements that should not be visible in the list
+            // mode have their opacity set to wrapper.detailsOpacity.
+            Row {
+                id: topLayout
+                x: 10; y: 10; height: recipePic.height; width: parent.width
+                spacing: 10
+
+                Image {
+                    id: recipePic
+                    source: picture; width: 48; height: 48
                 }
-                Item {
-                    id: details
-                    x: 10; width: parent.width-20
-                    anchors.top: topLayout.bottom; anchors.topMargin: 10
-                    anchors.bottom: parent.bottom; anchors.bottomMargin: 10
-                    opacity: wrapper.detailsOpacity
+
+                Column {
+                    height: recipePic.height; width: background.width-recipePic.width-20
+                    spacing: 5
+                    Text { id: name; text: title; font.bold: true; font.pointSize: 16 }
                     Text {
-                        id: methodTitle
-                        text: "Method"; font.pointSize: 12; font.bold: true
-                        anchors.top: parent.top
-                    }
-                    Flickable {
-                        id: flick
-                        anchors.top: methodTitle.bottom; anchors.bottom: parent.bottom
-                        width: parent.width; viewportHeight: methodText.height; clip: true
-                        Text { id: methodText; text: method; wrap: true; width: details.width }
-                    }
-                    Image {
-                        anchors.right: flick.right; anchors.top: flick.top
-                        source: "content/pics/moreUp.png"; opacity: flick.atYBeginning ? 0 : 1
+                        text: "Ingredients"; font.pointSize: 12; font.bold: true
+                        opacity: wrapper.detailsOpacity
                     }
-                    Image {
-                        anchors.right: flick.right; anchors.bottom: flick.bottom
-                        source: "content/pics/moreDown.png"; opacity: flick.atYEnd ? 0 : 1
+                    Text {
+                        text: ingredients; wrap: true; width: parent.width
+                        opacity: wrapper.detailsOpacity
                     }
                 }
-                // A button to close the detailed view, i.e. set the state back to default ('').
-                MediaButton {
-                    anchors.right: background.right; anchors.rightMargin: 5
-                    y: 10; opacity: wrapper.detailsOpacity
-                    text: "Close"; onClicked: { wrapper.state = '' }
+            }
+
+            Item {
+                id: details
+                x: 10; width: parent.width-20
+                anchors.top: topLayout.bottom; anchors.topMargin: 10
+                anchors.bottom: parent.bottom; anchors.bottomMargin: 10
+                opacity: wrapper.detailsOpacity
+
+                Text {
+                    id: methodTitle
+                    text: "Method"; font.pointSize: 12; font.bold: true
+                    anchors.top: parent.top
+                }
+                Flickable {
+                    id: flick
+                    anchors.top: methodTitle.bottom; anchors.bottom: parent.bottom
+                    width: parent.width; viewportHeight: methodText.height; clip: true
+                    Text { id: methodText; text: method; wrap: true; width: details.width }
                 }
-                // Make the default height equal the hight of the picture, plus margin.
-                height: 68
-                states: [
-                    State {
-                        name: "Details"
-                        PropertyChanges { target: background; color: "white" }
-                        // Make the picture bigger
-                        PropertyChanges { target: recipePic; width: 128; height: 128 }
-                        // Make details visible
-                        PropertyChanges { target: wrapper; detailsOpacity: 1; x: 0 }
-                        // Make the detailed view fill the entire list area
-                        PropertyChanges { target: wrapper; height: list.height }
-                        // Move the list so that this item is at the top.
-                        PropertyChanges { target: wrapper.ListView.view; explicit: true; viewportY: wrapper.y }
-                        // Disallow flicking while we're in detailed view
-                        PropertyChanges { target: wrapper.ListView.view; interactive: false }
-                    }
-                ]
-                transitions: [
-                    Transition {
-                        // Make the state changes smooth
-                        ParallelAnimation {
-                            ColorAnimation { property: "color"; duration: 500 }
-                            NumberAnimation {
-                                duration: 300; properties: "detailsOpacity,x,viewportY,height,width"
-                            }
-                        }
+                Image {
+                    anchors.right: flick.right; anchors.top: flick.top
+                    source: "content/pics/moreUp.png"; opacity: flick.atYBeginning ? 0 : 1
+                }
+                Image {
+                    anchors.right: flick.right; anchors.bottom: flick.bottom
+                    source: "content/pics/moreDown.png"; opacity: flick.atYEnd ? 0 : 1
+                }
+            }
+
+            // A button to close the detailed view, i.e. set the state back to default ('').
+            MediaButton {
+                anchors.right: background.right; anchors.rightMargin: 5
+                y: 10; opacity: wrapper.detailsOpacity
+                text: "Close"; onClicked: wrapper.state = '';
+            }
+
+            // Make the default height equal the hight of the picture, plus margin.
+            height: 68
+
+            states: State {
+                name: "Details"
+                PropertyChanges { target: background; color: "white" }
+                // Make the picture bigger
+                PropertyChanges { target: recipePic; width: 128; height: 128 }
+                // Make details visible
+                PropertyChanges { target: wrapper; detailsOpacity: 1; x: 0 }
+                // Make the detailed view fill the entire list area
+                PropertyChanges { target: wrapper; height: list.height }
+                // Move the list so that this item is at the top.
+                PropertyChanges { target: wrapper.ListView.view; explicit: true; viewportY: wrapper.y }
+                // Disallow flicking while we're in detailed view
+                PropertyChanges { target: wrapper.ListView.view; interactive: false }
+            }
+
+            transitions: Transition {
+                // Make the state changes smooth
+                ParallelAnimation {
+                    ColorAnimation { property: "color"; duration: 500 }
+                    NumberAnimation {
+                        duration: 300; properties: "detailsOpacity,x,viewportY,height,width"
                     }
-                ]
+                }
             }
         }
-    ]
+    }
+
     // The actual list
     ListView {
         id: list
diff --git a/examples/declarative/snow/ImageBatch.qml b/examples/declarative/snow/ImageBatch.qml
index 62f986c..86e11f7 100644
--- a/examples/declarative/snow/ImageBatch.qml
+++ b/examples/declarative/snow/ImageBatch.qml
@@ -35,14 +35,14 @@ GridView {
         XmlRole { name: "url"; query: "media:content/@url/string()" }
     }
 
-    Item {
+    delegate: Item {
         id: root
         property bool isSelected: GridView.isCurrentItem && grid.isSelected
         transformOrigin: "Center"
         width: grid.imageWidth; height: grid.imageHeight;
 
         Image { id: flickrImage; source: url; fillMode: "PreserveAspectFit"; smooth: true; anchors.fill: parent;
-                opacity: (status == 1)?1:0; opacity: Behavior { NumberAnimation { properties: "opacity" } } }
+                opacity: (status == Image.Ready)?1:0; /*opacity: Behavior { NumberAnimation { properties: "opacity" } }*/ }
         Loading { anchors.centerIn: parent; visible: flickrImage.status!=1 }
 
         states: State {
diff --git a/examples/declarative/webview/newwindows.qml b/examples/declarative/webview/newwindows.qml
index 59e3b3e..e2ed58f 100644
--- a/examples/declarative/webview/newwindows.qml
+++ b/examples/declarative/webview/newwindows.qml
@@ -7,22 +7,23 @@ import Qt 4.6
 
 Row {
     id: pages
-    height: 200
-    resources: [
-        Component {
-            id: webViewPage
-                Rectangle {
-                    width: webView.width
-                    height: webView.height
-                    WebView {
-                        id: webView
-                        newWindowComponent: webViewPage
-                        newWindowParent: pages
-                        url: "newwindows.html"
-                    }
-                }
+    height: 200; width: 500
+
+    Component {
+        id: webViewPage
+        Rectangle {
+            width: webView.width
+            height: webView.height
+            border.color: "gray"
+
+            WebView {
+                id: webView
+                newWindowComponent: webViewPage
+                newWindowParent: pages
+                url: "newwindows.html"
+            }
         }
-    ]
-    width: 500
+    }
+
     Loader { sourceComponent: webViewPage }
 }
diff --git a/examples/declarative/xmldata/daringfireball.qml b/examples/declarative/xmldata/daringfireball.qml
index bea38c8..938bdd5 100644
--- a/examples/declarative/xmldata/daringfireball.qml
+++ b/examples/declarative/xmldata/daringfireball.qml
@@ -2,59 +2,44 @@ import Qt 4.6
 
 Rectangle {
     color: "white"
-    width: 600
-    height: 600
-    resources: [
-        XmlListModel {
-            id: feedModel
-            source: "http://daringfireball.net/index.xml"
-            query: "/feed/entry"
-            namespaceDeclarations: "declare default element namespace 'http://www.w3.org/2005/Atom';"
-            XmlRole {
-                name: "title"
-                query: "title/string()"
-            }
-            XmlRole {
-                name: "tagline"
-                query: "author/name/string()"
+    width: 600; height: 600
+
+    XmlListModel {
+        id: feedModel
+        source: "http://daringfireball.net/index.xml"
+        query: "/feed/entry"
+        namespaceDeclarations: "declare default element namespace 'http://www.w3.org/2005/Atom';"
+        XmlRole { name: "title"; query: "title/string()" }
+        XmlRole { name: "tagline"; query: "author/name/string()" }
+        XmlRole { name: "content"; query: "content/string()" }
+    }
+
+    Component {
+        id: feedDelegate
+        Item {
+            height: childrenRect.height + 20
+            Text {
+                id: titleText
+                x: 10
+                text: title; font.bold: true
             }
-            XmlRole {
-                name: "content"
-                query: "content/string()"
+            Text {
+                text: 'by ' + tagline
+                anchors.left: titleText.right; anchors.leftMargin: 10
+                font.italic: true
             }
-        },
-        Component {
-            id: feedDelegate
-            Item {
-                height: childrenRect.height + 20
-                Text {
-                    x: 10
-                    id: titleText
-                    text: title
-                    font.bold: true
-                }
-                Text {
-                    text: 'by ' + tagline
-                    anchors.left: titleText.right
-                    anchors.leftMargin: 10
-                    font.italic: true
-                }
-                Text {
-                    x: 10
-                    text: content
-                    anchors.top: titleText.bottom
-                    width: 580
-                    wrap: true
-                    onLinkActivated: { print('link clicked: ' + link) }
-                }
+            Text {
+                x: 10
+                text: content
+                anchors.top: titleText.bottom
+                width: 580; wrap: true
+                onLinkActivated: { print('link clicked: ' + link) }
             }
         }
-    ]
+    }
+
     ListView {
-        id: list
         anchors.fill: parent
-        clip: true
-        model: feedModel
-        delegate: feedDelegate
+        model: feedModel; delegate: feedDelegate
     }
 }
diff --git a/examples/declarative/xmldata/yahoonews.qml b/examples/declarative/xmldata/yahoonews.qml
index 6d43f46..7d8b8a2 100644
--- a/examples/declarative/xmldata/yahoonews.qml
+++ b/examples/declarative/xmldata/yahoonews.qml
@@ -5,100 +5,74 @@ Rectangle {
         GradientStop { position: 0; color: "black" }
         GradientStop { position: 1.0; color: "#AAAAAA" }
     }
-    width: 600
-    height: 600
-    resources: [
-        XmlListModel {
-            id: feedModel
-            source: "http://rss.news.yahoo.com/rss/oceania"
-            query: "/rss/channel/item"
-            XmlRole {
-                name: "title"
-                query: "title/string()"
-            }
-            XmlRole {
-                name: "link"
-                query: "link/string()"
-            }
-            XmlRole {
-                name: "description"
-                query: "description/string()"
+    width: 600; height: 600
+
+    XmlListModel {
+        id: feedModel
+        source: "http://rss.news.yahoo.com/rss/oceania"
+        query: "/rss/channel/item"
+        XmlRole { name: "title"; query: "title/string()" }
+        XmlRole { name: "link"; query: "link/string()" }
+        XmlRole { name: "description"; query: "description/string()" }
+    }
+
+    Component {
+        id: feedDelegate
+        Item {
+            id: delegate
+            height: wrapper.height + 10
+
+            MouseRegion {
+                anchors.fill: wrapper
+                onPressed: delegate.ListView.view.currentIndex = index;
+                onClicked: if (wrapper.state == 'Details') wrapper.state = ''; else wrapper.state = 'Details';
             }
-        },
-        Component {
-            id: feedDelegate
-            Item {
-                id: delegate
-                height: wrapper.height + 10
-                MouseRegion {
-                    anchors.fill: wrapper
-                    onPressed: { delegate.ListView.view.currentIndex = index; }
-                    onClicked: { if (wrapper.state == 'Details') { wrapper.state = '';} else {wrapper.state = 'Details';} }
+
+            Rectangle {
+                id: wrapper
+                y: 5; height: titleText.height + 10; width: 580
+                color: "#F0F0F0"; radius: 5
+                Text {
+                    id: titleText
+                    x: 10; y: 5
+                    text: '<a href=\'' + link + '\'>' + title + '</a>'
+                    font.bold: true; font.family: "Helvetica"; font.pointSize: 14
+                    onLinkActivated: { print('link clicked: ' + link) }
                 }
-                Rectangle {
-                    id: wrapper
-                    y: 5
-                    height: titleText.height + 10
-                    width: 580
-                    color: "#F0F0F0"
-                    radius: 5
-                    Text {
-                        x: 10
-                        y: 5
-                        id: titleText
-                        text: '<a href=\'' + link + '\'>' + title + '</a>'
-                        font.bold: true
-                        font.family: "Helvetica"
-                        font.pointSize: 14
-                        onLinkActivated: { print('link clicked: ' + link) }
-                    }
-                    Text {
-                        x: 10
-                        id: description
-                        text: description
-                        width: 560
-                        wrap: true
-                        font.family: "Helvetica"
-                        anchors.top: titleText.bottom
-                        anchors.topMargin: 5
-                        opacity: 0
+
+                Text {
+                    x: 10
+                    id: descriptionText
+                    text: description
+                    width: 560
+                    wrap: true
+                    font.family: "Helvetica"
+                    anchors.top: titleText.bottom
+                    anchors.topMargin: 5
+                    opacity: 0
+                }
+
+                states: State {
+                    name: "Details"
+                    PropertyChanges { target: wrapper; height: childrenRect.height + 10 }
+                    PropertyChanges { target: descriptionText; opacity: 1 }
+                }
+
+                transitions: Transition {
+                    from: "*"; to: "Details"; reversible: true
+                    SequentialAnimation {
+                        NumberAnimation { duration: 200; properties: "height"; easing: "easeOutQuad" }
+                        NumberAnimation { duration: 200; properties: "opacity" }
                     }
-                    states: [
-                        State {
-                            name: "Details"
-                            PropertyChanges { target: wrapper; height: childrenRect.height + 10 }
-                            PropertyChanges { target: description; opacity: 1 }
-                        }
-                    ]
-                    transitions: [
-                        Transition {
-                            from: "*"
-                            to: "Details"
-                            reversible: true
-                            SequentialAnimation {
-                                NumberAnimation {
-                                    duration: 200
-                                    properties: "height"
-                                    easing: "easeOutQuad"
-                                }
-                                NumberAnimation {
-                                    duration: 200
-                                    properties: "opacity"
-                                }
-                            }
-                        }
-                    ]
                 }
             }
         }
-    ]
+    }
+
     ListView {
         id: list
-        x: 10
-        y: 10
-        width: parent.width - 20
-        height: parent.height - 20
-        clip: true
+        x: 10; y: 10
+        width: parent.width - 20; height: parent.height - 20
         model: feedModel
         delegate: feedDelegate
     }