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

Conflicts:
	src/declarative/qml/parser/javascriptgrammar.cpp
	src/declarative/qml/parser/javascriptgrammar_p.h

28 files changed, 469 insertions, 276 deletions

diff --git a/demos/declarative/calculator/CalcButton.qml b/demos/declarative/calculator/CalcButton.qml
index f240000..f4ccdae 100644
--- a/demos/declarative/calculator/CalcButton.qml
+++ b/demos/declarative/calculator/CalcButton.qml
@@ -25,13 +25,13 @@ Item {
 
     Image {
         id: Image
-        src: "pics/button.sci"
+        source: "pics/button.sci"
         width: Button.width; height: Button.height
     }
 
     Image {
         id: ImagePressed
-        src: "pics/button-pressed.sci"
+        source: "pics/button-pressed.sci"
         width: Button.width; height: Button.height
         opacity: 0
     }
diff --git a/demos/declarative/calculator/calculator.qml b/demos/declarative/calculator/calculator.qml
index 1e7c30a..145435b 100644
--- a/demos/declarative/calculator/calculator.qml
+++ b/demos/declarative/calculator/calculator.qml
@@ -2,7 +2,7 @@ Rect {
     id: MainWindow;
     width: 320; height: 270; color: "black"
 
-    Script { src: "calculator.js" }
+    Script { source: "calculator.js" }
 
     VerticalLayout {
         spacing: 2; margin: 2
diff --git a/demos/declarative/mediabrowser/content/LikeOMeter.qml b/demos/declarative/mediabrowser/content/LikeOMeter.qml
deleted file mode 100644
index 68584a5..0000000
--- a/demos/declarative/mediabrowser/content/LikeOMeter.qml
+++ /dev/null
@@ -1,13 +0,0 @@
-<Item id="Container">
-    <properties>
-        <Property name="rating" value="2"/>
-    </properties>
-
-    <HorizontalLayout>
-        <Star rating="0" onClicked="Container.rating = rating" on="{Container.rating >= 0}"/>
-        <Star rating="1" onClicked="Container.rating = rating" on="{Container.rating >= 1}"/>
-        <Star rating="2" onClicked="Container.rating = rating" on="{Container.rating >= 2}"/>
-        <Star rating="3" onClicked="Container.rating = rating" on="{Container.rating >= 3}"/>
-        <Star rating="4" onClicked="Container.rating = rating" on="{Container.rating >= 4}"/>
-    </HorizontalLayout>
-</Item>
diff --git a/demos/declarative/mediabrowser/content/MediaButton.qml b/demos/declarative/mediabrowser/content/MediaButton.qml
deleted file mode 100644
index c92305a..0000000
--- a/demos/declarative/mediabrowser/content/MediaButton.qml
+++ /dev/null
@@ -1,21 +0,0 @@
-<Item id="Container">
-    <signals>
-        <Signal name="clicked"/>
-    </signals>
-
-    <properties>
-        <Property name="text"/>
-    </properties>
-
-    <Image id="Image" src="pics/button.png"/>
-    <Image id="Pressed" src="pics/button-pressed.png" opacity="0"/>
-    <MouseRegion id="MouseRegion" anchors.fill="{Image}" onClicked="Container.clicked.emit();"/>
-    <Text font.bold="true" color="white" anchors.centeredIn="{Image}" text="{Container.text}"/>
-    <width>{Image.width}</width>
-
-    <states>
-        <State name="Pressed" when="{MouseRegion.pressed == true}">
-            <SetProperties target="{Pressed}" opacity="1"/>
-        </State>
-    </states>
-</Item>
diff --git a/demos/declarative/mediabrowser/content/PhoneInfoContainer.qml b/demos/declarative/mediabrowser/content/PhoneInfoContainer.qml
deleted file mode 100644
index 34fd889..0000000
--- a/demos/declarative/mediabrowser/content/PhoneInfoContainer.qml
+++ /dev/null
@@ -1,66 +0,0 @@
-<Flipable id="Container">
-    <properties>
-        <Property name="frontContainer" value="{ContainerFront}"/>
-        <Property name="flickableArea" value="{Flickable}"/>
-        <Property name="phoneTitle" value="N/A"/>
-        <Property name="phoneDescription" value="..."/>
-        <Property name="phoneSpecifications" value=""/>
-        <Property name="phoneUrl" value=""/>
-        <Property name="rating" value="2"/>
-    </properties>
-
-    <signals>
-        <Signal name="closed"/>
-    </signals>
-
-    <axis>
-        <Axis startX="{Container.width / 2}" endX="{Container.width / 2}" endY="1" />
-    </axis>
-
-    <front>
-        <Item id="ContainerFront" anchors.fill="{Container}">
-            <Rect anchors.fill="{parent}" color="black" opacity="0.4" pen.color="white" pen.width="2"/>
-
-            <MediaButton id="BackButton" x="630" y="400" text="Back" onClicked="Container.closed.emit()"/>
-            <MediaButton id="MoreButton" x="530" y="400" text="More..." onClicked="Container.state='Back'"/>
-
-            <Text id="TitleText" style="Raised" styleColor="black" color="white" x="420" y="30" width="{parent.width}"
-                  text="{Container.phoneTitle}" font.size="22"/>
-
-            <LikeOMeter x="420" y="75" rating="{Container.rating}"/>
-
-            <Flickable id="Flickable" x="420" width="280" height="260" y="120" clip="true" viewportWidth="280"
-                       viewportHeight="{DescriptionText.height}">
-                <Text id="DescriptionText"  wrap="true" color="white" width="{parent.width}"
-                      text="{Container.phoneDescription}" font.size="12"/>
-            </Flickable>
-            <Text color="white" width="300" x="50" y="300" text="{Container.phoneSpecifications}"/>
-            <ScrollBar id="ScrollBar" x="720" y="{Flickable.y}" width="7" height="{Flickable.height}" opacity="0"
-                       flickableArea="{Flickable}" clip="true"/>
-        </Item>
-    </front>
-
-    <back>
-        <Item anchors.fill="{Container}">
-            <Rect anchors.fill="{parent}" color="black" opacity="0.4" pen.color="white" pen.width="2"/>
-            <Flickable x="10" width="{Container.width-20}" height="{Container.height-20}" y="10" clip="true"
-                    viewportWidth="{UrlView.width}" viewportHeight="{UrlView.height}">
-                <WebView id="UrlView" url="{Container.phoneUrl}" idealWidth="{parent.width}"/>
-            </Flickable>
-            <MediaButton id="BackButton2" x="630" y="400" text="Back" onClicked="Container.state=''"/>
-        </Item>
-    </back>
-
-    <states>
-        <State name="Back">
-            <SetProperty target="{Container}" property="rotation" value="180"/>
-        </State>
-    </states>
-
-    <transitions>
-        <Transition>
-            <NumericAnimation easing="easeInOutQuad" properties="rotation" duration="500"/>
-        </Transition>
-    </transitions>
-
-</Flipable>
diff --git a/demos/declarative/mediabrowser/content/PhonesPathView.qml b/demos/declarative/mediabrowser/content/PhonesPathView.qml
deleted file mode 100644
index 8ec1938..0000000
--- a/demos/declarative/mediabrowser/content/PhonesPathView.qml
+++ /dev/null
@@ -1,79 +0,0 @@
-<PathView id="Container" pathItemCount="6">
-
-    <path>
-        <Path startX="-50" startY="40">
-            <PathAttribute name="scale" value="0.2"/>
-            <PathCubic x="400" y="220" control1X="140" control1Y="40" control2X="210" control2Y="220"/>
-            <PathAttribute name="scale" value="1.2"/>
-            <PathAttribute name="z" value="1"/>
-            <PathCubic x="850" y="40" control2X="660" control2Y="40" control1X="590" control1Y="220"/>
-            <PathAttribute name="scale" value="0.2"/>
-        </Path>
-    </path>
-
-    <delegate>
-        <Component id="PhoneDelegate">
-            <Item id="Wrapper" width="320" height="200" scale="{Wrapper.PathView.scale}" z="{Wrapper.PathView.z}">
-                <Connection sender="{PhoneInfoContainer}" script="if (Wrapper.state == 'Details') Wrapper.state = ''" signal="closed()"/>
-
-                <Script>
-                    function phoneClicked() {
-                        if (MainWindow.minimized == true) {
-                            MainWindow.minimized = false;
-                        } else {
-                            PhoneInfoContainer.phoneTitle = title;
-                            PhoneInfoContainer.flickableArea.yPosition = 0;
-                            PhoneInfoContainer.phoneDescription = description;
-                            PhoneInfoContainer.phoneSpecifications = specifications;
-                            PhoneInfoContainer.phoneUrl = url;
-                            PhoneInfoContainer.rating = rating;
-                            Wrapper.state = "Details";
-                        }
-                    }
-                </Script>
-
-                <Rect id="Dvd" anchors.fill="{parent}" color="white">
-                    <Item x="{(parent.width-width)/2}" y="{(parent.height-height)/2}" width="{Thumb.width*Thumb.scale}" height="{Thumb.height*Thumb.scale}">
-                        <Image id="Thumb" src="{thumb}" scale="{0.95*Math.min(Dvd.height/height,Dvd.width/width)}"/>
-                    </Item>
-                    <!-- <Image src="pics/reflection.png" anchors.fill="{parent}"/> -->
-                    <Image src="pics/shadow-right.png" x="{Dvd.width}" height="{Dvd.height}"/>
-                    <Image src="pics/shadow-bottom.png" y="{Dvd.height}" width="{Dvd.width}"/>
-                    <Image id="Corner" src="pics/shadow-corner.png" x="{Dvd.width}" y="{Dvd.height}"/>
-                </Rect>
-
-                <MouseRegion anchors.fill="{Wrapper}" onClicked="phoneClicked()"/>
-
-                <states>
-                    <State name="Details">
-                        <ParentChange target="{Wrapper}" parent="{PhoneInfoContainer.frontContainer}"/>
-                        <SetProperties target="{Wrapper}" x="50" y="60" scale="1"/>
-                        <SetProperties target="{PhoneInfoContainer}" y="20"/>
-                        <SetProperties target="{Container}" y="-480"/>
-                        <SetProperties target="{CloseButton}" opacity="0"/>
-                        <SetProperties target="{CategoryText}" y="-50"/>
-                    </State>
-                    <State name="Stacked" when="{MainWindow.minimized == true}">
-                        <ParentChange target="{Wrapper}" parent="{Stack}"/>
-                        <SetProperties target="{Wrapper}" x="0" y="0" scale="0.2"/>
-                        <SetProperties target="{CloseButton}" opacity="0"/>
-                        <SetProperties target="{CategoryText}" y="-50"/>
-                    </State>
-                </states>
-
-                <transitions>
-                    <Transition fromState="" toState="Details,Stacked">
-                        <ParentChangeAction/>
-                        <NumericAnimation properties="x,y,scale,opacity" duration="500" easing="easeInOutQuad"/>
-                    </Transition>
-                    <Transition fromState="Details,Stacked" toState="">
-                        <ParentChangeAction/>
-                        <NumericAnimation properties="x,y,scale,opacity" duration="500" easing="easeInOutQuad"/>
-                    </Transition>
-                </transitions>
-
-            </Item>
-        </Component>
-    </delegate>
-
-</PathView>
diff --git a/demos/declarative/mediabrowser/content/ScrollBar.qml b/demos/declarative/mediabrowser/content/ScrollBar.qml
deleted file mode 100644
index 974f4d0..0000000
--- a/demos/declarative/mediabrowser/content/ScrollBar.qml
+++ /dev/null
@@ -1,18 +0,0 @@
-<Item id="Container">
-    <properties>
-        <Property name="flickableArea"/>
-    </properties>
-
-    <Rect radius="5" color="black" opacity="0.3" pen.color="white" pen.width="2" x="0" y="{flickableArea.pageYPosition * Container.height}"
-          width="{parent.width}" height="{flickableArea.pageHeight * Container.height}"/>
-    <states>
-        <State name="show" when="{flickableArea.moving}">
-            <SetProperties target="{Container}" opacity="1" />
-        </State>
-    </states>
-    <transitions>
-        <Transition fromState="*" toState="*">
-            <NumericAnimation target="{Container}" properties="opacity" duration="400"/>
-        </Transition>
-    </transitions>
-</Item>
diff --git a/demos/declarative/mediabrowser/content/Star.qml b/demos/declarative/mediabrowser/content/Star.qml
deleted file mode 100644
index 1db29e8..0000000
--- a/demos/declarative/mediabrowser/content/Star.qml
+++ /dev/null
@@ -1,25 +0,0 @@
-<Item id="Container" width="24" height="24">
-    <properties>
-        <Property name="rating"/>
-        <Property name="on"/>
-    </properties>
-
-    <signals>
-        <Signal name="clicked"/>
-    </signals>
-
-    <Image id="Image" src="pics/ghns_star.png" x="6" y="7" opacity="0.4" scale="0.5"/>
-    <MouseRegion anchors.fill="{Container}" onClicked="Container.clicked.emit()"/>
-
-    <states>
-        <State name="on" when="{Container.on == true}">
-            <SetProperties target="{Image}" opacity="1" scale="1" x="1" y="0"/>
-        </State>
-    </states>
-    <transitions>
-        <Transition>
-            <NumericAnimation properties="opacity,scale,x,y" easing="easeOutBounce"/>
-        </Transition>
-    </transitions>
-
-</Item>
diff --git a/demos/declarative/mediabrowser/mediabrowser.qml b/demos/declarative/mediabrowser/mediabrowser.qml
deleted file mode 100644
index bcdca56..0000000
--- a/demos/declarative/mediabrowser/mediabrowser.qml
+++ /dev/null
@@ -1,36 +0,0 @@
-<?qtfx namespacepath:=content ?>
-<Item width="800" height="480" id="MainWindow">
-    <properties>
-        <Property name="minimized" value="false"/>
-    </properties>
-
-    <Item id="Background">
-        <Image src="content/pics/background.png" opaque="true"/>
-
-        <Rect id="Menu" x="-150" width="150" height="480" color="#232323">
-            <Text id="IconText" x="40" y="110" font.bold="true" font.size="9" text="Nokia Devices" color="white" style="Raised" styleColor="black"/>
-            <Image src="content/pics/shadow-right-screen.png" x="150" height="480" tile="true"/>
-        </Rect>
-
-        <PhonesPathView id="PhonesPathView" model="{PhonesModel}" y="60" width="800" height="360"/>
-        <PhoneInfoContainer id="PhoneInfoContainer" width="750" x="25" y="500" height="440"/>
-        <MediaButton id="CloseButton" x="680" y="440" text="Close" onClicked="MainWindow.minimized = true"/>
-
-        <states>
-            <State name="Minimized" when="{MainWindow.minimized == true}">
-                <SetProperties target="{Background}" x="75"/>
-                <SetProperties target="{Menu}" x="-75"/>
-            </State>
-        </states>
-        <transitions>
-            <Transition fromState="*" toState="*">
-                <NumericAnimation properties="x,y,size" duration="500" easing="easeInOutQuad"/>
-            </Transition>
-        </transitions>
-    </Item>
-
-    <Text id="CategoryText" x="300" y="15" text="Nokia Devices" font.size="22" color="white" style="Raised" styleColor="black"/>
-    <Item id="Stack" x="45" y="50"/>
-
-</Item>
-
diff --git a/demos/declarative/phonebrowser/content/LikeOMeter.qml b/demos/declarative/phonebrowser/content/LikeOMeter.qml
new file mode 100644
index 0000000..31b8195
--- /dev/null
+++ b/demos/declarative/phonebrowser/content/LikeOMeter.qml
@@ -0,0 +1,34 @@
+Item {
+    id: Container
+    properties: Property {
+        name: "rating"
+        value: 2
+    }
+    HorizontalLayout {
+        Star {
+            rating: 0
+            onClicked: { Container.rating = rating }
+            on: Container.rating >= 0
+        }
+        Star {
+            rating: 1
+            onClicked: { Container.rating = rating }
+            on: Container.rating >= 1
+        }
+        Star {
+            rating: 2
+            onClicked: { Container.rating = rating }
+            on: Container.rating >= 2
+        }
+        Star {
+            rating: 3
+            onClicked: { Container.rating = rating }
+            on: Container.rating >= 3
+        }
+        Star {
+            rating: 4
+            onClicked: { Container.rating = rating }
+            on: Container.rating >= 4
+        }
+    }
+}
diff --git a/demos/declarative/phonebrowser/content/MediaButton.qml b/demos/declarative/phonebrowser/content/MediaButton.qml
new file mode 100644
index 0000000..bb2510a
--- /dev/null
+++ b/demos/declarative/phonebrowser/content/MediaButton.qml
@@ -0,0 +1,40 @@
+Item {
+    id: Container
+    signals: Signal {
+        name: "clicked"
+    }
+    properties: Property {
+        name: "text"
+    }
+    Image {
+        id: Image
+        source: "pics/button.png"
+    }
+    Image {
+        id: Pressed
+        source: "pics/button-pressed.png"
+        opacity: 0
+    }
+    MouseRegion {
+        id: MouseRegion
+        anchors.fill: Image
+        onClicked: { Container.clicked.emit(); }
+    }
+    Text {
+        font.bold: true
+        color: "white"
+        anchors.centeredIn: Image
+        text: Container.text
+    }
+    width: Image.width
+    states: [
+        State {
+            name: "Pressed"
+            when: MouseRegion.pressed == true
+            SetProperties {
+                target: Pressed
+                opacity: 1
+            }
+        }
+    ]
+}
diff --git a/demos/declarative/phonebrowser/content/PhoneInfoContainer.qml b/demos/declarative/phonebrowser/content/PhoneInfoContainer.qml
new file mode 100644
index 0000000..da475b1
--- /dev/null
+++ b/demos/declarative/phonebrowser/content/PhoneInfoContainer.qml
@@ -0,0 +1,113 @@
+Flipable {
+    id: Container
+
+    properties: [
+        Property { name: "frontContainer"; value: ContainerFront },
+        Property { name: "flickableArea"; value: Flickable },
+        Property { name: "phoneTitle"; value: "N/A" },
+        Property { name: "phoneDescription"; value: "..." },
+        Property { name: "phoneSpecifications"; value: "" },
+        Property { name: "phoneUrl"; value: "" },
+        Property { name: "rating"; value: 2 }
+    ]
+
+    signals: Signal { name: "closed" }
+
+    axis: Axis { startX: Container.width / 2; endX: Container.width / 2; endY: 1 }
+
+    front: Item {
+        id: ContainerFront; anchors.fill: Container
+
+        Rect {
+            anchors.fill: parent
+            color: "black"; opacity: 0.4
+            pen.color: "white"; pen.width: 2
+        }
+
+        MediaButton {
+            id: BackButton; x: 630; y: 400; text: "Back"
+            onClicked: { Container.closed.emit() }
+        }
+
+        MediaButton {
+            id: MoreButton; x: 530; y: 400; text: "More..."
+            onClicked: { Container.state='Back' }
+        }
+
+        Text {
+            id: TitleText
+            style: Raised; styleColor: "black"
+            color: "white"
+            x: 420; y: 30; width: parent.width
+            text: Container.phoneTitle; font.size: 22
+        }
+
+        LikeOMeter { x: 420; y: 75; rating: Container.rating }
+
+        Flickable {
+            id: Flickable
+            x: 420; width: 280; height: 260; y: 120; clip: true
+            viewportWidth: 280; viewportHeight: DescriptionText.height
+
+            Text {
+                id: DescriptionText
+                wrap: true
+                color: "white"
+                width: parent.width
+                text: Container.phoneDescription
+                font.size: 12
+            }
+        }
+
+        Text {
+            color: "white"; width: 300; x: 50; y: 300
+            text: Container.phoneSpecifications
+        }
+
+        ScrollBar {
+            id: ScrollBar
+            x: 720; y: Flickable.y; width: 7
+            height: Flickable.height; opacity: 0
+            flickableArea: Flickable; clip: true
+        }
+    }
+
+    back: Item {
+        anchors.fill: Container
+
+        Rect {
+            anchors.fill: parent
+            color: "black"
+            opacity: 0.4
+            pen.color: "white"
+            pen.width: 2
+        }
+
+        Flickable {
+            width: Container.width-20
+            height: Container.height-20
+            x: 10; y: 10; clip: true
+            viewportWidth: UrlView.width
+            viewportHeight: UrlView.height
+
+            WebView { id: UrlView; url: Container.phoneUrl; idealWidth: parent.width }
+        }
+
+        MediaButton {
+            id: BackButton2; x: 630; y: 400; text: "Back"; onClicked: { Container.state='' }
+        }
+    }
+
+    states: [
+        State {
+            name: "Back"
+            SetProperty { target: Container; property: "rotation"; value: 180 }
+        }
+    ]
+
+    transitions: [
+        Transition {
+            NumericAnimation { easing: "easeInOutQuad"; properties: "rotation"; duration: 500 }
+        }
+    ]
+}
diff --git a/demos/declarative/phonebrowser/content/PhonesPathView.qml b/demos/declarative/phonebrowser/content/PhonesPathView.qml
new file mode 100644
index 0000000..acef6c3
--- /dev/null
+++ b/demos/declarative/phonebrowser/content/PhonesPathView.qml
@@ -0,0 +1,120 @@
+PathView {
+    id: Container; pathItemCount: 6
+
+    path: Path {
+        startX: -50; startY: 40;
+
+        PathAttribute { name: "scale"; value: 0.2 }
+
+        PathCubic {
+            x: 400; y: 220
+            control1X: 140; control1Y: 40
+            control2X: 210; control2Y: 220
+        }
+
+        PathAttribute { name: "scale"; value: 1.2  }
+        PathAttribute { name: "z"; value: 1 }
+
+        PathCubic {
+            x: 850; y: 40
+            control2X: 660; control2Y: 40
+            control1X: 590; control1Y: 220
+        }
+
+        PathAttribute { name: "scale"; value: 0.2 }
+    }
+
+    delegate: Component {
+        id: PhoneDelegate
+
+        Item {
+            id: Wrapper; width: 320; height: 200
+            scale: Wrapper.PathView.scale; z: Wrapper.PathView.z
+
+            Connection {
+                sender: PhoneInfoContainer; signal: "closed()"
+                script: { if (Wrapper.state == 'Details') Wrapper.state = '' }
+            }
+
+            Script {
+               function phoneClicked() {
+                  if (MainWindow.minimized == true) {
+                     MainWindow.minimized = false;
+                  } else {
+                     PhoneInfoContainer.phoneTitle = title;
+                     PhoneInfoContainer.flickableArea.yPosition = 0;
+                     PhoneInfoContainer.phoneDescription = description;
+                     PhoneInfoContainer.phoneSpecifications = specifications;
+                     PhoneInfoContainer.phoneUrl = url;
+                     PhoneInfoContainer.rating = rating;
+                     Wrapper.state = "Details";
+                  }
+               }
+            }
+
+            Rect {
+                id: Dvd; anchors.fill: parent; color: "white"
+
+                Item {
+                    x: (parent.width-width)/2
+                    y: (parent.height-height)/2
+                    width: Thumb.width*Thumb.scale
+                    height: Thumb.height*Thumb.scale
+
+                    Image {
+                        id: Thumb; source: thumb
+                        scale: 0.95*Math.min(Dvd.height/height,Dvd.width/width)
+                    }
+                }
+
+                Image { source: "pics/shadow-right.png"; x: Dvd.width; height: Dvd.height }
+                Image { source: "pics/shadow-bottom.png"; y: Dvd.height; width: Dvd.width }
+
+                Image {
+                    id: Corner
+                    source: "pics/shadow-corner.png"
+                    x: Dvd.width; y: Dvd.height
+                }
+            }
+
+            MouseRegion { anchors.fill: Wrapper; onClicked: { phoneClicked() } }
+
+            states: [
+                State {
+                    name: "Details"
+                    ParentChange { target: Wrapper; parent: PhoneInfoContainer.frontContainer }
+                    SetProperties { target: Wrapper; x: 50; y: 60; scale: 1 }
+                    SetProperties { target: PhoneInfoContainer; y: 20 }
+                    SetProperties { target: Container; y: "-480" }
+                    SetProperties { target: CloseButton; opacity: 0 }
+                    SetProperties { target: CategoryText; y: "-50" }
+                },
+
+                State {
+                    name: "Stacked"
+                    when: MainWindow.minimized == true
+                    ParentChange { target: Wrapper; parent: Stack }
+                    SetProperties {target: Wrapper; x: 0; y: 0; scale: 0.2 }
+                    SetProperties { target: CloseButton; opacity: 0 }
+                    SetProperties { target: CategoryText; y: "-50" }
+                }
+            ]
+
+            transitions: [
+                Transition {
+                    fromState: ""; toState: "Details,Stacked"
+                    ParentChangeAction { }
+                    NumericAnimation { properties: "x,y,scale,opacity"; duration: 500; easing: "easeInOutQuad" }
+                },
+
+                Transition {
+                    fromState: "Details,Stacked"
+                    toState: ""
+                    ParentChangeAction { }
+                    NumericAnimation { properties: "x,y,scale,opacity"; duration: 500; easing: "easeInOutQuad" }
+                }
+            ]
+
+        }
+    }
+}
diff --git a/demos/declarative/phonebrowser/content/ScrollBar.qml b/demos/declarative/phonebrowser/content/ScrollBar.qml
new file mode 100644
index 0000000..a0f2925
--- /dev/null
+++ b/demos/declarative/phonebrowser/content/ScrollBar.qml
@@ -0,0 +1,38 @@
+Item {
+    id: Container
+    properties: Property {
+        name: "flickableArea"
+    }
+    Rect {
+        radius: 5
+        color: "black"
+        opacity: 0.3
+        pen.color: "white"
+        pen.width: 2
+        x: 0
+        y: flickableArea.pageYPosition * Container.height
+        width: parent.width
+        height: flickableArea.pageHeight * Container.height
+    }
+    states: [
+        State {
+            name: "show"
+            when: flickableArea.moving
+            SetProperties {
+                target: Container
+                opacity: 1
+            }
+        }
+    ]
+    transitions: [
+        Transition {
+            fromState: "*"
+            toState: "*"
+            NumericAnimation {
+                target: Container
+                properties: "opacity"
+                duration: 400
+            }
+        }
+    ]
+}
diff --git a/demos/declarative/phonebrowser/content/Star.qml b/demos/declarative/phonebrowser/content/Star.qml
new file mode 100644
index 0000000..ebcd78b
--- /dev/null
+++ b/demos/declarative/phonebrowser/content/Star.qml
@@ -0,0 +1,47 @@
+Item {
+    id: Container
+    width: 24
+    height: 24
+
+    properties: [
+        Property { name: "rating" },
+        Property { name: "on" }
+    ]
+
+    signals: Signal {
+        name: "clicked"
+    }
+    Image {
+        id: Image
+        source: "pics/ghns_star.png"
+        x: 6
+        y: 7
+        opacity: 0.4
+        scale: 0.5
+    }
+    MouseRegion {
+        anchors.fill: Container
+        onClicked: { Container.clicked.emit() }
+    }
+    states: [
+        State {
+            name: "on"
+            when: Container.on == true
+            SetProperties {
+                target: Image
+                opacity: 1
+                scale: 1
+                x: 1
+                y: 0
+            }
+        }
+    ]
+    transitions: [
+        Transition {
+            NumericAnimation {
+                properties: "opacity,scale,x,y"
+                easing: "easeOutBounce"
+            }
+        }
+    ]
+}
diff --git a/demos/declarative/mediabrowser/content/pics/background.png b/demos/declarative/phonebrowser/content/pics/background.png
index 5b37072..5b37072 100644
--- a/demos/declarative/mediabrowser/content/pics/background.png
+++ b/demos/declarative/phonebrowser/content/pics/background.png
diff --git a/demos/declarative/mediabrowser/content/pics/button-pressed.png b/demos/declarative/phonebrowser/content/pics/button-pressed.png
index e434d32..e434d32 100644
--- a/demos/declarative/mediabrowser/content/pics/button-pressed.png
+++ b/demos/declarative/phonebrowser/content/pics/button-pressed.png
diff --git a/demos/declarative/mediabrowser/content/pics/button.png b/demos/declarative/phonebrowser/content/pics/button.png
index 56a63ce..56a63ce 100644
--- a/demos/declarative/mediabrowser/content/pics/button.png
+++ b/demos/declarative/phonebrowser/content/pics/button.png
diff --git a/demos/declarative/mediabrowser/content/pics/ghns_star.png b/demos/declarative/phonebrowser/content/pics/ghns_star.png
index 4ad43cc..4ad43cc 100644
--- a/demos/declarative/mediabrowser/content/pics/ghns_star.png
+++ b/demos/declarative/phonebrowser/content/pics/ghns_star.png
diff --git a/demos/declarative/mediabrowser/content/pics/reflection.png b/demos/declarative/phonebrowser/content/pics/reflection.png
index c143a48..c143a48 100644
--- a/demos/declarative/mediabrowser/content/pics/reflection.png
+++ b/demos/declarative/phonebrowser/content/pics/reflection.png
diff --git a/demos/declarative/mediabrowser/content/pics/shadow-bottom.png b/demos/declarative/phonebrowser/content/pics/shadow-bottom.png
index 523f6e7..523f6e7 100644
--- a/demos/declarative/mediabrowser/content/pics/shadow-bottom.png
+++ b/demos/declarative/phonebrowser/content/pics/shadow-bottom.png
diff --git a/demos/declarative/mediabrowser/content/pics/shadow-corner.png b/demos/declarative/phonebrowser/content/pics/shadow-corner.png
index ef8c856..ef8c856 100644
--- a/demos/declarative/mediabrowser/content/pics/shadow-corner.png
+++ b/demos/declarative/phonebrowser/content/pics/shadow-corner.png
diff --git a/demos/declarative/mediabrowser/content/pics/shadow-right-screen.png b/demos/declarative/phonebrowser/content/pics/shadow-right-screen.png
index 9856c4f..9856c4f 100644
--- a/demos/declarative/mediabrowser/content/pics/shadow-right-screen.png
+++ b/demos/declarative/phonebrowser/content/pics/shadow-right-screen.png
diff --git a/demos/declarative/mediabrowser/content/pics/shadow-right.png b/demos/declarative/phonebrowser/content/pics/shadow-right.png
index f534a35..f534a35 100644
--- a/demos/declarative/mediabrowser/content/pics/shadow-right.png
+++ b/demos/declarative/phonebrowser/content/pics/shadow-right.png
diff --git a/demos/declarative/mediabrowser/dummydata/PhonesModel.qml b/demos/declarative/phonebrowser/dummydata/PhonesModel.qml
index eb68fdb..eb68fdb 100644
--- a/demos/declarative/mediabrowser/dummydata/PhonesModel.qml
+++ b/demos/declarative/phonebrowser/dummydata/PhonesModel.qml
diff --git a/demos/declarative/phonebrowser/phonebrowser.qml b/demos/declarative/phonebrowser/phonebrowser.qml
new file mode 100644
index 0000000..85d352d
--- /dev/null
+++ b/demos/declarative/phonebrowser/phonebrowser.qml
@@ -0,0 +1,59 @@
+import "content"
+
+Item {
+    id: MainWindow; width: 800; height: 480
+
+    properties: Property { name: "minimized"; value: false }
+
+    Item {
+        id: Background
+
+        Image { source: "content/pics/background.png"; opaque: true }
+
+        Rect {
+            id: Menu; x: -150; width: 150; height: 480; color: "#232323"
+
+            Text {
+                id: IconText; x: 40; y: 110
+                font.bold: true; font.size: 9; text: "Nokia Devices"
+                color: "white"; style: Raised; styleColor: "black"
+            }
+
+            Image {
+                source: "content/pics/shadow-right-screen.png"
+                x: 150; height: 480; tile: true
+            }
+        }
+
+        PhonesPathView { id: PhonesPathView; model: PhonesModel; y: 60; width: 800; height: 360 }
+        PhoneInfoContainer { id: PhoneInfoContainer; width: 750; x: 25; y: 500; height: 440 }
+
+        MediaButton {
+            id: CloseButton; x: 680; y: 440; text: "Close"
+            onClicked: { MainWindow.minimized = true }
+        }
+
+        states: [
+            State {
+                name: "Minimized"
+                when: MainWindow.minimized == true
+                SetProperties { target: Background; x: 75 }
+                SetProperties { target: Menu; x: -75 }
+            }
+        ]
+
+        transitions: [
+            Transition {
+                fromState: "*"; toState: "*"
+                NumericAnimation { properties: "x,y,size"; duration: 500; easing: "easeInOutQuad" }
+            }
+        ]
+    }
+
+    Text {
+        id: CategoryText; x: 300; y: 15; text: "Nokia Devices"
+        font.size: 22; color: "white"; style: Raised; styleColor: "black"
+    }
+
+    Item { id: Stack; x: 45; y: 50 }
+}
diff --git a/demos/declarative/webbrowser/content/RectSoftShadow.qml b/demos/declarative/webbrowser/content/RectSoftShadow.qml
index 0235842..2b39422 100644
--- a/demos/declarative/webbrowser/content/RectSoftShadow.qml
+++ b/demos/declarative/webbrowser/content/RectSoftShadow.qml
@@ -1,10 +1,10 @@
 <Item>
-    <Image src="pics/softshadow-left.sci" x="-16" y="-16"
+    <Image source="pics/softshadow-left.sci" x="-16" y="-16"
         width="16" height="{parent.height+32}" />
-    <Image src="pics/softshadow-right.sci" x="{parent.width}" y="-16"
+    <Image source="pics/softshadow-right.sci" x="{parent.width}" y="-16"
         width="16" height="{parent.height+32}" />
-    <Image src="pics/softshadow-top.png" x="0" y="-16"
+    <Image source="pics/softshadow-top.png" x="0" y="-16"
         width="{parent.width}" height="16" />
-    <Image src="pics/softshadow-bottom.png" x="0" y="{parent.height}"
+    <Image source="pics/softshadow-bottom.png" x="0" y="{parent.height}"
         width="{webview.width*webview.scale}" height="16" />
 </Item>
diff --git a/demos/declarative/webbrowser/webbrowser.qml b/demos/declarative/webbrowser/webbrowser.qml
index 7618f4d..cf96b3f 100644
--- a/demos/declarative/webbrowser/webbrowser.qml
+++ b/demos/declarative/webbrowser/webbrowser.qml
@@ -18,8 +18,8 @@
 
     <Item id="WebPanel" anchors.fill="{parent}" clip="true">
         <Rect color="#555555" anchors.fill="{parent}"/>
-        <Image src="content/pics/softshadow-bottom.png" width="{WebPanel.width}" height="16" />
-        <Image src="content/pics/softshadow-top.png" width="{WebPanel.width}" anchors.bottom="{Footer.top}" height="16" />
+        <Image source="content/pics/softshadow-bottom.png" width="{WebPanel.width}" height="16" />
+        <Image source="content/pics/softshadow-top.png" width="{WebPanel.width}" anchors.bottom="{Footer.top}" height="16" />
         <RectSoftShadow x="{-Flick.xPosition}" y="{-Flick.yPosition}"
             width="{WebView.width*WebView.scale}" height="{Flick.y+WebView.height*WebView.scale}"/>
         <Item id="HeaderSpace" width="{parent.width}" height="60" z="1">
@@ -30,7 +30,7 @@
                                     ? -Flick.xPosition+Flick.viewportWidth-Flick.width
                                     : 0}"
                     y="{Flick.yPosition &lt; 0 ? -Flick.yPosition : progressOff*(Flick.yPosition>height?-height:-Flick.yPosition)}"
-                    height="64" src="content/pics/header.png">
+                    height="64" source="content/pics/header.png">
                 <Text id="HeaderText" text="{WebView.title!='' || WebView.progress == 1.0 ? WebView.title : 'Loading...'}"
                     color="white" styleColor="black" style="Raised"
                     font.family="Helvetica" font.size="10" font.bold="true" elide="ElideRight"
@@ -39,8 +39,8 @@
                     anchors.top="{Header.top}" anchors.topMargin="4" hAlign="AlignHCenter"/>
                 <Item anchors.top="{HeaderText.bottom}" anchors.topMargin="2" anchors.bottom="{parent.bottom}" width="{parent.width}">
                     <Item id="UrlBox" anchors.left="{parent.left}" anchors.leftMargin="12" anchors.right="{parent.right}" anchors.rightMargin="12" height="31" anchors.top="{parent.top}" clip="true">
-                        <Image src="content/pics/addressbar.sci" anchors.fill="{UrlBox}"/>
-                        <Image id="UrlBoxhl" src="content/pics/addressbar-filled.sci" opacity="{1-Header.progressOff}" clip="true" width="{parent.width*WebView.progress}" height="{parent.height}"/>
+                        <Image source="content/pics/addressbar.sci" anchors.fill="{UrlBox}"/>
+                        <Image id="UrlBoxhl" source="content/pics/addressbar-filled.sci" opacity="{1-Header.progressOff}" clip="true" width="{parent.width*WebView.progress}" height="{parent.height}"/>
                         <KeyProxy id="proxy" anchors.left="{UrlBox.left}" anchors.fill="{UrlBox}" focusable="true" targets="{[keyActions,EditUrl]}"/>
                         <KeyActions id="keyActions" return="WebBrowser.url = EditUrl.text; proxy.focus=false;"/>
                         <TextEdit id="EditUrl" color="#555555" text="{WebView.url == '' ? ' ' : WebView.url}"
@@ -104,11 +104,11 @@
             </Rect>
         </Flickable>
         <Image id="Footer" width="{parent.width}" anchors.bottom="{parent.bottom}"
-                height="43" src="content/pics/footer.sci">
+                height="43" source="content/pics/footer.sci">
             <Rect y="-1" width="{parent.width}" height="1" color="#555555"/>
             <Item id="backbutton" anchors.right="{reload.left}" anchors.rightMargin="10" anchors.verticalCenter="{parent.verticalCenter}" width="{back_e.width}" height="{back_e.height}">
-                <Image anchors.fill="{parent}" id="back_e" src="content/pics/back.png" />
-                <Image anchors.fill="{parent}" id="back_d" src="content/pics/back-disabled.png" />
+                <Image anchors.fill="{parent}" id="back_e" source="content/pics/back.png" />
+                <Image anchors.fill="{parent}" id="back_d" source="content/pics/back-disabled.png" />
                 <states>
                     <State name="Enabled" when="{WebView.back.enabled==true}">
                         <SetProperty target="{back_e}" property="opacity" value="1"/>
@@ -126,11 +126,11 @@
                 </transitions>
                 <MouseRegion anchors.fill="{back_e}" onClicked="if (WebView.back.enabled) WebView.back.trigger()"/>
             </Item>
-            <Image id="reload" src="content/pics/reload.png" anchors.horizontalCenter="{parent.horizontalCenter}" anchors.verticalCenter="{parent.verticalCenter}"/>
+            <Image id="reload" source="content/pics/reload.png" anchors.horizontalCenter="{parent.horizontalCenter}" anchors.verticalCenter="{parent.verticalCenter}"/>
             <MouseRegion anchors.fill="{reload}" onClicked="WebView.reload.trigger()"/>
             <Item id="forwardbutton" anchors.left="{reload.right}" anchors.leftMargin="10" anchors.verticalCenter="{parent.verticalCenter}" width="{forward_e.width}" height="{forward_e.height}">
-                <Image anchors.fill="{parent}" anchors.verticalCenter="{parent.verticalCenter}" id="forward_e" src="content/pics/forward.png" />
-                <Image anchors.fill="{parent}" id="forward_d" src="content/pics/forward-disabled.png" />
+                <Image anchors.fill="{parent}" anchors.verticalCenter="{parent.verticalCenter}" id="forward_e" source="content/pics/forward.png" />
+                <Image anchors.fill="{parent}" id="forward_d" source="content/pics/forward-disabled.png" />
                 <states>
                     <State name="Enabled" when="{WebView.forward.enabled==true}">
                         <SetProperty target="{forward_e}" property="opacity" value="1"/>