Initial import of kinetic-dui branch from the old kinetic

46 files changed, 723 insertions, 0 deletions

diff --git a/demos/declarative/calculator/CalcButton.qml b/demos/declarative/calculator/CalcButton.qml
new file mode 100644
index 0000000..c925314
--- /dev/null
+++ b/demos/declarative/calculator/CalcButton.qml
@@ -0,0 +1,40 @@
+<Item id="Button" width="50" height="30">
+
+    <properties>
+        <Property name="operation" type="string"/>
+        <Property name="toggable" value="false"/>
+        <Property name="toggled" value="false"/>
+    </properties>
+
+    <Script>
+        function buttonClicked(operation) {
+            if (Button.toggable == true) {
+                if (Button.toggled == true) {
+                    Button.toggled = false;
+                    Button.state = 'Toggled';
+                } else {
+                    Button.toggled = true;
+                    Button.state = '';
+                }
+            }
+            else
+                doOp(operation);
+        }
+    </Script>
+
+    <Image id="Image" src="pics/button.sci" width="{Button.width}" height="{Button.height}"/>
+    <Image id="ImagePressed" src="pics/button-pressed.sci" width="{Button.width}" height="{Button.height}" opacity="0"/>
+    <Text anchors.centeredIn="{Image}" text="{Button.operation}" color="white" font.bold="true"/>
+    <MouseRegion id="MouseRegion" anchors.fill="{Button}" onClicked="buttonClicked(Button.operation)"/>
+
+    <states>
+        <State name="Pressed" when="{MouseRegion.pressed == true}">
+            <SetProperties target="{ImagePressed}" opacity="1"/>
+        </State>
+        <State name="Toggled" when="{Button.toggled == true}">
+            <SetProperties target="{ImagePressed}" opacity="1"/>
+        </State>
+    </states>
+
+</Item>
+
diff --git a/demos/declarative/calculator/calculator.js b/demos/declarative/calculator/calculator.js
new file mode 100644
index 0000000..774b232
--- /dev/null
+++ b/demos/declarative/calculator/calculator.js
@@ -0,0 +1,87 @@
+
+var curVal = 0;
+var memory = 0;
+var lastOp = "";
+var timer = 0;
+
+function disabled(op) {
+    if (op == "." && CurNum.text.toString().search(/\./) != -1) {
+        return true;
+    } else if (op == "Sqrt" &&  CurNum.text.toString().search(/-/) != -1) {
+        return true;
+    } else {
+        return false;
+    }
+}
+
+function doOp(op) {
+    if (disabled(op)) {
+        return;
+    }
+
+    if (op.toString().length==1 && ((op >= "0" && op <= "9") || op==".") ) {
+        if (CurNum.text.toString().length >= 14)
+            return; // No arbitrary length numbers
+        if (lastOp.toString().length == 1 && ((lastOp >= "0" && lastOp <= "9") || lastOp==".") ) {
+            CurNum.text = CurNum.text + op.toString();
+        } else {
+            CurNum.text = op;
+        }
+        lastOp = op;
+        return;
+    }
+    lastOp = op;
+
+    // Pending operations
+    if (CurrentOperation.text == "+") {
+        CurNum.text = Number(CurNum.text.valueOf()) + Number(curVal.valueOf());
+    } else if (CurrentOperation.text == "-") {
+        CurNum.text = Number(curVal) - Number(CurNum.text.valueOf());
+    } else if (CurrentOperation.text == "x") {
+        CurNum.text = Number(curVal) * Number(CurNum.text.valueOf());
+    } else if (CurrentOperation.text == "/") {
+        CurNum.text = Number(Number(curVal) / Number(CurNum.text.valueOf())).toString();
+    } else if (CurrentOperation.text == "=") {
+    }
+
+    if (op == "+" || op == "-" || op == "x" || op == "/") {
+        CurrentOperation.text = op;
+        curVal = CurNum.text.valueOf();
+        return;
+    }
+    curVal = 0;
+    CurrentOperation.text = "";
+
+    // Immediate operations
+    if (op == "1/x") { // reciprocal
+        CurNum.text = (1 / CurNum.text.valueOf()).toString();
+    } else if (op == "^2") { // squared
+        CurNum.text = (CurNum.text.valueOf() * CurNum.text.valueOf()).toString();
+    } else if (op == "Abs") {
+        CurNum.text = (Math.abs(CurNum.text.valueOf())).toString();
+    } else if (op == "Int") {
+        CurNum.text = (Math.floor(CurNum.text.valueOf())).toString();
+    } else if (op == "+/-") { // plus/minus
+        CurNum.text = (CurNum.text.valueOf() * -1).toString();
+    } else if (op == "Sqrt") { // square root
+        CurNum.text = (Math.sqrt(CurNum.text.valueOf())).toString();
+    } else if (op == "MC") { // memory clear
+        memory = 0;
+    } else if (op == "M+") { // memory increment
+        memory += CurNum.text.valueOf();
+    } else if (op == "MR") { // memory recall
+        CurNum.text = memory.toString();
+    } else if (op == "MS") { // memory set
+        memory = CurNum.text.valueOf();
+    } else if (op == "Bksp") {
+        CurNum.text = CurNum.text.toString().slice(0, -1);
+    } else if (op == "C") {
+        CurNum.text = "0";
+    } else if (op == "AC") {
+        curVal = 0;
+        memory = 0;
+        lastOp = "";
+        CurNum.text ="0";
+    }
+}
+
diff --git a/demos/declarative/calculator/calculator.qml b/demos/declarative/calculator/calculator.qml
new file mode 100644
index 0000000..4ada896
--- /dev/null
+++ b/demos/declarative/calculator/calculator.qml
@@ -0,0 +1,83 @@
+<Rect id="MainWindow" width="320" height="270" color="black">
+    <Script src="calculator.js"/>
+
+    <VerticalLayout spacing="2" margin="2">
+        <Rect id="Container" height="60" z="2" width="316" pen.color="white" color="#343434">
+            <Text id="CurNum" font.bold="true" color="white" font.size="16" anchors.right="{Container.right}" anchors.rightMargin="5"
+                anchors.verticalCenter="{Container.verticalCenter}"/>
+            <Text id="CurrentOperation" color="white" font.bold="true" font.size="16" anchors.left="{Container.left}" anchors.leftMargin="5"
+                anchors.verticalCenter="{Container.verticalCenter}"/>
+        </Rect>
+
+        <Item width="320" height="30">
+            <CalcButton id="AdvancedCheckBox" x="55" width="206" operation="Advanced Mode" toggable="true"/>
+        </Item>
+
+        <Item width="320">
+            <Item id="BasicButtons" x="55" width="160" height="160">
+                <CalcButton operation="Bksp" id="Bksp" width="67" opacity="0"/>
+                <CalcButton operation="C" id="C" width="76"/>
+                <CalcButton operation="AC" id="AC" x="78" width="76"/>
+
+                <GridLayout id="NumKeypad" y="32" spacing="2" columns="3">
+                    <CalcButton operation="7"/>
+                    <CalcButton operation="8"/>
+                    <CalcButton operation="9"/>
+                    <CalcButton operation="4"/>
+                    <CalcButton operation="5"/>
+                    <CalcButton operation="6"/>
+                    <CalcButton operation="1"/>
+                    <CalcButton operation="2"/>
+                    <CalcButton operation="3"/>
+                </GridLayout>
+
+                <HorizontalLayout y="128" spacing="2">
+                    <CalcButton operation="0" width="50"/>
+                    <CalcButton operation="." x="77" width="50"/>
+                    <CalcButton operation="=" id="Equals" x="77" width="102"/>
+                </HorizontalLayout>
+
+                <VerticalLayout id="SimpleOperations" x="156" y="0" spacing="2">
+                    <CalcButton operation="x"/>
+                    <CalcButton operation="/"/>
+                    <CalcButton operation="-"/>
+                    <CalcButton operation="+"/>
+                </VerticalLayout>
+            </Item>
+
+            <GridLayout id="AdvancedButtons" x="350" spacing="2" columns="2" opacity="0">
+                <CalcButton operation="Abs"/>
+                <CalcButton operation="Int"/>
+                <CalcButton operation="MC"/>
+                <CalcButton operation="Sqrt"/>
+                <CalcButton operation="MR"/>
+                <CalcButton operation="^2"/>
+                <CalcButton operation="MS"/>
+                <CalcButton operation="1/x"/>
+                <CalcButton operation="M+"/>
+                <CalcButton operation="+/-"/>
+            </GridLayout>
+        </Item>
+    </VerticalLayout>
+
+    <states>
+        <State name="Advanced" when="{AdvancedCheckBox.toggled == true}">
+            <SetProperties target="{BasicButtons}" x="0"/>
+            <SetProperties target="{SimpleOperations}" y="32"/>
+            <SetProperties target="{Bksp}" opacity="1"/>
+            <SetProperties target="{C}" x="69" width="67"/>
+            <SetProperties target="{AC}" x="138" width="67"/>
+            <SetProperties target="{Equals}" width="50"/>
+            <SetProperties target="{AdvancedButtons}" x="210" opacity="1"/>
+        </State>
+    </states>
+
+    <transitions>
+        <Transition>
+            <NumericAnimation properties="x,y,width" easing="easeOutBounce" duration="500"/>
+            <NumericAnimation properties="opacity" easing="easeInOutQuad" duration="500"/>
+        </Transition>
+    </transitions>
+
+</Rect>
+
diff --git a/demos/declarative/calculator/pics/button-pressed.png b/demos/declarative/calculator/pics/button-pressed.png
new file mode 100644
index 0000000..1a24cee
--- /dev/null
+++ b/demos/declarative/calculator/pics/button-pressed.png
diff --git a/demos/declarative/calculator/pics/button-pressed.sci b/demos/declarative/calculator/pics/button-pressed.sci
new file mode 100644
index 0000000..f3bc860
--- /dev/null
+++ b/demos/declarative/calculator/pics/button-pressed.sci
@@ -0,0 +1,5 @@
+gridLeft: 5
+gridTop: 5
+gridBottom: 5
+gridRight: 5
+imageFile: button-pressed.png
diff --git a/demos/declarative/calculator/pics/button.png b/demos/declarative/calculator/pics/button.png
new file mode 100644
index 0000000..88c8bf8
--- /dev/null
+++ b/demos/declarative/calculator/pics/button.png
diff --git a/demos/declarative/calculator/pics/button.sci b/demos/declarative/calculator/pics/button.sci
new file mode 100644
index 0000000..b1c7929
--- /dev/null
+++ b/demos/declarative/calculator/pics/button.sci
@@ -0,0 +1,5 @@
+gridLeft: 5
+gridTop: 5
+gridBottom: 5
+gridRight: 5
+imageFile: button.png
diff --git a/demos/declarative/calculator/pics/clear.png b/demos/declarative/calculator/pics/clear.png
new file mode 100644
index 0000000..fb07a27c
--- /dev/null
+++ b/demos/declarative/calculator/pics/clear.png
diff --git a/demos/declarative/mediabrowser/content/LikeOMeter.qml b/demos/declarative/mediabrowser/content/LikeOMeter.qml
new file mode 100644
index 0000000..68584a5
--- /dev/null
+++ b/demos/declarative/mediabrowser/content/LikeOMeter.qml
@@ -0,0 +1,13 @@
+<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
new file mode 100644
index 0000000..c92305a
--- /dev/null
+++ b/demos/declarative/mediabrowser/content/MediaButton.qml
@@ -0,0 +1,21 @@
+<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/MovieInfoContainer.qml b/demos/declarative/mediabrowser/content/MovieInfoContainer.qml
new file mode 100644
index 0000000..c53fab6
--- /dev/null
+++ b/demos/declarative/mediabrowser/content/MovieInfoContainer.qml
@@ -0,0 +1,60 @@
+<Flipable id="Container">
+    <properties>
+        <Property name="frontContainer" value="{ContainerFront}"/>
+        <Property name="flickableArea" value="{Flickable}"/>
+        <Property name="movieTitle" value="N/A"/>
+        <Property name="movieDescription" value="..."/>
+        <Property name="rating" value="2"/>
+    </properties>
+
+    <signals>
+        <Signal name="closed"/>
+    </signals>
+
+    <transform>
+        <Axis id="Axis" xStart="{Container.width / 2}" xEnd="{Container.width / 2}" yEnd="1" />
+    </transform>
+
+    <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="320" y="30" width="{parent.width}"
+                  text="{Container.movieTitle}" font.size="22"/>
+
+            <LikeOMeter x="320" y="75" rating="{Container.rating}"/>
+
+            <Flickable id="Flickable" x="320" width="380" height="260" y="120" clip="true" viewportWidth="380"
+                       viewportHeight="{DescriptionText.height}">
+                <Text id="DescriptionText"  wrap="true" color="white" width="{parent.width}"
+                      text="{Container.movieDescription}" font.size="12"/>
+            </Flickable>
+
+            <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"/>
+            <MediaButton id="BackButton2" x="630" y="400" text="Back" onClicked="Container.state=''"/>
+        </Item>
+    </back>
+
+    <states>
+        <State name="Back">
+            <SetProperty target="{Axis}" 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/MoviesPathView.qml b/demos/declarative/mediabrowser/content/MoviesPathView.qml
new file mode 100644
index 0000000..a13437a
--- /dev/null
+++ b/demos/declarative/mediabrowser/content/MoviesPathView.qml
@@ -0,0 +1,74 @@
+<PathView id="Container">
+
+    <path>
+        <Path startX="-50" startY="40">
+            <PathAttribute name="scale" value="0.4"/>
+            <PathCubic x="400" y="220" control1X="140" control1Y="40" control2X="210" control2Y="220"/>
+            <PathAttribute name="scale" value="0.7"/>
+            <PathCubic x="850" y="40" control2X="660" control2Y="40" control1X="590" control1Y="220"/>
+            <PathAttribute name="scale" value="0.4"/>
+        </Path>
+    </path>
+
+    <delegate>
+        <Component id="MovieDelegate">
+            <Item id="Wrapper" width="220" height="310" scale="{Wrapper.PathView.scale}">
+                <Connection sender="{MovieInfoContainer}" script="if (Wrapper.state == 'Details') Wrapper.state = ''" signal="closed()"/>
+
+                <Script>
+                    function movieClicked() {
+                        if (MainWindow.minimized == true) {
+                            MainWindow.minimized = false;
+                        } else {
+                            MovieInfoContainer.movieTitle = title;
+                            MovieInfoContainer.flickableArea.yPosition = 0;
+                            MovieInfoContainer.movieDescription = description;
+                            MovieInfoContainer.rating = rating;
+                            Wrapper.state = "Details";
+                        }
+                    }
+                </Script>
+
+                <Rect id="Dvd" anchors.fill="{parent}" color="white">
+                    <Image src="{thumb}" width="215" height="305" anchors.centeredIn="{parent}" opaque="true"/>
+                    <Image src="pics/reflection.png" anchors.centeredIn="{parent}"/>
+                    <Image src="pics/shadow-right.png" x="220"/>
+                    <Image src="pics/shadow-bottom.png" y="310"/>
+                    <Image src="pics/shadow-corner.png" x="220" y="310"/>
+                </Rect>
+
+                <MouseRegion anchors.fill="{Wrapper}" onClicked="movieClicked()"/>
+
+                <states>
+                    <State name="Details">
+                        <ParentChange target="{Wrapper}" parent="{MovieInfoContainer.frontContainer}"/>
+                        <SetProperties target="{Wrapper}" x="50" y="60" scale="1"/>
+                        <SetProperties target="{MovieInfoContainer}" 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
new file mode 100644
index 0000000..974f4d0
--- /dev/null
+++ b/demos/declarative/mediabrowser/content/ScrollBar.qml
@@ -0,0 +1,18 @@
+<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
new file mode 100644
index 0000000..1db29e8
--- /dev/null
+++ b/demos/declarative/mediabrowser/content/Star.qml
@@ -0,0 +1,25 @@
+<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/content/pics/background.png b/demos/declarative/mediabrowser/content/pics/background.png
new file mode 100644
index 0000000..5b37072
--- /dev/null
+++ b/demos/declarative/mediabrowser/content/pics/background.png
diff --git a/demos/declarative/mediabrowser/content/pics/button-pressed.png b/demos/declarative/mediabrowser/content/pics/button-pressed.png
new file mode 100644
index 0000000..e434d32
--- /dev/null
+++ b/demos/declarative/mediabrowser/content/pics/button-pressed.png
diff --git a/demos/declarative/mediabrowser/content/pics/button.png b/demos/declarative/mediabrowser/content/pics/button.png
new file mode 100644
index 0000000..56a63ce
--- /dev/null
+++ b/demos/declarative/mediabrowser/content/pics/button.png
diff --git a/demos/declarative/mediabrowser/content/pics/ghns_star.png b/demos/declarative/mediabrowser/content/pics/ghns_star.png
new file mode 100644
index 0000000..4ad43cc
--- /dev/null
+++ b/demos/declarative/mediabrowser/content/pics/ghns_star.png
diff --git a/demos/declarative/mediabrowser/content/pics/reflection.png b/demos/declarative/mediabrowser/content/pics/reflection.png
new file mode 100644
index 0000000..c143a48
--- /dev/null
+++ b/demos/declarative/mediabrowser/content/pics/reflection.png
diff --git a/demos/declarative/mediabrowser/content/pics/shadow-bottom.png b/demos/declarative/mediabrowser/content/pics/shadow-bottom.png
new file mode 100644
index 0000000..523f6e7
--- /dev/null
+++ b/demos/declarative/mediabrowser/content/pics/shadow-bottom.png
diff --git a/demos/declarative/mediabrowser/content/pics/shadow-corner.png b/demos/declarative/mediabrowser/content/pics/shadow-corner.png
new file mode 100644
index 0000000..ef8c856
--- /dev/null
+++ b/demos/declarative/mediabrowser/content/pics/shadow-corner.png
diff --git a/demos/declarative/mediabrowser/content/pics/shadow-right-screen.png b/demos/declarative/mediabrowser/content/pics/shadow-right-screen.png
new file mode 100644
index 0000000..9856c4f
--- /dev/null
+++ b/demos/declarative/mediabrowser/content/pics/shadow-right-screen.png
diff --git a/demos/declarative/mediabrowser/content/pics/shadow-right.png b/demos/declarative/mediabrowser/content/pics/shadow-right.png
new file mode 100644
index 0000000..f534a35
--- /dev/null
+++ b/demos/declarative/mediabrowser/content/pics/shadow-right.png
diff --git a/demos/declarative/mediabrowser/dummydata/MoviesModel.qml b/demos/declarative/mediabrowser/dummydata/MoviesModel.qml
new file mode 100644
index 0000000..87bca37
--- /dev/null
+++ b/demos/declarative/mediabrowser/dummydata/MoviesModel.qml
@@ -0,0 +1,38 @@
+<ListModel id="MoviesModel">
+    <Movie>
+        <title>Repoman</title>
+        <thumb>http://www.impawards.com/1984/posters/repo_man.jpg</thumb>
+        <description>Cult classic. Car repossession. Radiation. Plate O' Shrimp.</description>
+        <rating>2</rating>
+    </Movie>
+    <Movie>
+        <title>Monsters vs Aliens</title>
+        <thumb>http://www.impawards.com/2009/posters/monsters_vs_aliens_ver6.jpg</thumb>
+        <description>Love Monsters?  Love Aliens?  You're in luck.</description>
+        <rating>1</rating>
+    </Movie>
+    <Movie>
+        <title>Cruel Intentions</title>
+        <thumb>http://impawards.com/1999/posters/cruel_intentions_ver1.jpg</thumb>
+        <description>Modern-day update of Les Liaisons Dangereuses.  Better because it has nothing to do with the French.</description>
+        <rating>3</rating>
+    </Movie>
+    <Movie>
+        <title>Lord of War</title>
+        <thumb>http://www.impawards.com/2005/posters/lord_of_war_ver2.jpg</thumb>
+        <description>There are over 500 million fire arms in worldwide circulation.  That is one fire arm for every twelve people on the planet.  The only question is how do we arm the other eleven?</description>
+        <rating>4</rating>
+    </Movie>
+    <Movie>
+        <title>The Devil's Advocate</title>
+        <thumb>http://impawards.com/1997/posters/devils_advocate_ver1.jpg</thumb>
+        <description>An ambitious your district attorney joins a powerful New York law firm headed by the devil.</description>
+        <rating>4</rating>
+    </Movie>
+    <Movie>
+        <title>Team America: World Police</title>
+        <thumb>http://impawards.com/2004/posters/team_america_world_police.jpg</thumb>
+        <description>Hey terrorist, terrorize this.</description>
+        <rating>1</rating>
+    </Movie>
+</ListModel>
diff --git a/demos/declarative/mediabrowser/mediabrowser.qml b/demos/declarative/mediabrowser/mediabrowser.qml
new file mode 100644
index 0000000..df7baa9
--- /dev/null
+++ b/demos/declarative/mediabrowser/mediabrowser.qml
@@ -0,0 +1,36 @@
+<?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="30" y="122" font.bold="true" font.size="9" text="Coming Soon" color="white" style="Raised" styleColor="black"/>
+            <Image src="content/pics/shadow-right-screen.png" x="150" height="480" tile="true"/>
+        </Rect>
+
+        <MovieInfoContainer id="MovieInfoContainer" width="750" x="25" y="500" height="440"/>
+        <MoviesPathView id="MoviesPathView" model="{MoviesModel}" y="60" width="800" height="360"/>
+        <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="Coming Soon" font.size="22" color="white" style="Raised" styleColor="black"/>
+    <Item id="Stack" x="50" y="50"/>
+
+</Item>
+
diff --git a/demos/declarative/webbrowser/README b/demos/declarative/webbrowser/README
new file mode 100644
index 0000000..a081e30
--- /dev/null
+++ b/demos/declarative/webbrowser/README
@@ -0,0 +1,5 @@
+For good performance, be sure to use disk cache for remote content:
+
+  duiviewer -cache WebBrowser.qml
+
+Otherwise everything always re-loads over the network.
diff --git a/demos/declarative/webbrowser/WebBrowser.qml b/demos/declarative/webbrowser/WebBrowser.qml
new file mode 100644
index 0000000..08b94e3
--- /dev/null
+++ b/demos/declarative/webbrowser/WebBrowser.qml
@@ -0,0 +1,175 @@
+<?qtfx namespacepath:=content?>
+<Item width="320" height="500" id="webbrowser" state="Normal">
+    <properties><Property name="url" value="http://www.qtsoftware.com"/></properties>
+    <Script>
+        function zoomOut() {
+            webbrowser.state = "ZoomedOut";
+        }
+        function toggleZoom() {
+            if(webbrowser.state == "ZoomedOut") {
+                flick.centerX = webview.mouseX;
+                flick.centerY = webview.mouseY;
+                webbrowser.state = "Normal";
+            } else {
+                zoomOut();
+            }
+        }
+    </Script>
+
+    <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" />
+        <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">
+            <Image id="header" width="{parent.width}" state="normal"
+                    x="{flick.xPosition &lt; 0
+                                ? -flick.xPosition
+                                : flick.xPosition &gt; flick.viewportWidth-flick.width
+                                    ? -flick.xPosition+flick.viewportWidth-flick.width
+                                    : 0}"
+                    y="{flick.yPosition &lt; 0 ? -flick.yPosition : progressoff*(flick.yPosition>height?-height:-flick.yPosition)}"
+                    height="60" src="content/pics/header.png">
+                <Text id="header_text" text="{webview.title!='' || webview.progress == 1.0 ? webview.title : 'Loading...'}"
+                    color="#000000"
+                    font.family="Helvetica" font.size="9" font.bold="true" elide="ElideRight"
+                    anchors.left="{header.left}" anchors.right="{header.right}"
+                    anchors.leftMargin="4" anchors.rightMargin="4"
+                    anchors.top="{header.top}" anchors.topMargin="4" hAlign="AlignHCenter"/>
+                <Item anchors.top="{header_text.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}"/>
+                        <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}"
+                            anchors.left="{urlbox.left}" anchors.right="{urlbox.right}" anchors.leftMargin="6"
+                            anchors.verticalCenter="{urlbox.verticalCenter}" anchors.verticalCenterOffset="1"
+                            font.size="11" wrap="false" opacity="0"/>
+                        <Text id="showurl" color="#555555" text="{webview.url == '' ? ' ' : webview.url}"
+                            anchors.left="{urlbox.left}" anchors.right="{urlbox.right}" anchors.leftMargin="6"
+                            anchors.verticalCenter="{urlbox.verticalCenter}" anchors.verticalCenterOffset="1"
+                            font.size="11" />
+                    </Item>
+                    <MouseRegion anchors.fill="{urlbox}" onClicked="proxy.focus=true"/>
+                </Item>
+                <properties>
+                    <Property name="progressoff" value="1" type="Real"/>
+                </properties>
+                <states>
+                    <State name="normal" when="{webview.progress == 1.0}">
+                        <SetProperty target="{header}" property="progressoff" value="1"/>
+                    </State>
+                    <State name="progressshown" when="{webview.progress &lt; 1.0}">
+                        <SetProperty target="{header}" property="progressoff" value="0"/>
+                    </State>
+                </states>
+                <transitions>
+                    <Transition>
+                        <NumericAnimation target="{header}" properties="progressoff" easing="easeInOutQuad" duration="300"/>
+                    </Transition>
+                </transitions>
+            </Image>
+        </Item>
+        <Flickable id="flick"
+                anchors.top="{headerspace.bottom}" anchors.bottom="{footer.top}"
+                anchors.left="{parent.left}" anchors.right="{parent.right}"
+                width="{parent.width}"
+                viewportWidth="{Math.max(parent.width,webview.width*webview.scale)}"
+                viewportHeight="{Math.max(parent.height,webview.height*webview.scale)}"
+                >
+            <properties>
+                <Property name="centerX" value="0" type="Real"/>
+                <Property name="centerY" value="0" type="Real"/>
+            </properties>
+            <WebView id="webview"
+                cacheSize="4000000"
+                smooth="true"
+                url="{webbrowser.url}"
+                onDoubleClick="toggleZoom()"
+                focusable="true"
+                focus="true"
+                idealWidth="{flick.width}"
+                idealHeight="{flick.height/scale}"
+                onUrlChanged="flick.xPosition=0; flick.yPosition=0; zoomOut()"
+                scale="{(width > 0) ? flick.width/width*zoomedout+(1-zoomedout) : 1}"
+                >
+                <properties>
+                    <Property name="zoomedout" type="real" value="1"/>
+                </properties>
+            </WebView>
+            <Rect id="webviewTint" anchors.fill="{webview}" color="black" opacity="0">
+                <MouseRegion anchors.fill="{webviewTint}" onClicked="proxy.focus=false"/>
+            </Rect>
+        </Flickable>
+        <Image id="footer" width="{parent.width}" anchors.bottom="{parent.bottom}"
+                height="43" src="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" />
+                <states>
+                    <State name="Enabled" when="{webview.back.enabled==true}">
+                        <SetProperty target="{back_e}" property="opacity" value="1"/>
+                        <SetProperty target="{back_d}" property="opacity" value="0"/>
+                    </State>
+                    <State name="Disabled" when="{webview.back.enabled==false}">
+                        <SetProperty target="{back_e}" property="opacity" value="0"/>
+                        <SetProperty target="{back_d}" property="opacity" value="1"/>
+                    </State>
+                </states>
+                <transitions>
+                    <Transition>
+                        <NumericAnimation properties="opacity" easing="easeInOutQuad" duration="300"/>
+                    </Transition>
+                </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}"/>
+            <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" />
+                <states>
+                    <State name="Enabled" when="{webview.forward.enabled==true}">
+                        <SetProperty target="{forward_e}" property="opacity" value="1"/>
+                        <SetProperty target="{forward_d}" property="opacity" value="0"/>
+                    </State>
+                    <State name="Disabled" when="{webview.forward.enabled==false}">
+                        <SetProperty target="{forward_e}" property="opacity" value="0"/>
+                        <SetProperty target="{forward_d}" property="opacity" value="1"/>
+                    </State>
+                </states>
+                <transitions>
+                    <Transition>
+                        <NumericAnimation properties="opacity" easing="easeInOutQuad" duration="320"/>
+                    </Transition>
+                </transitions>
+                <MouseRegion anchors.fill="{parent}" onClicked="if (webview.forward.enabled) webview.forward.trigger()"/>
+            </Item>
+        </Image>
+    </Item>
+    <states>
+        <State name="Normal">
+            <SetProperty target="{webview}" property="zoomedout" value="0"/>
+            <SetProperty target="{flick}" property="xPosition" value="{Math.min(webview.width-flick.width,Math.max(0,flick.centerX-flick.width/2))}"/>
+            <SetProperty target="{flick}" property="yPosition" value="{Math.min(webview.height-flick.height,Math.max(0,flick.centerY-flick.height/2))}"/>
+        </State>
+        <State name="ZoomedOut">
+            <SetProperty target="{webview}" property="zoomedout" value="1"/>
+        </State>
+    </states>
+    <transitions>
+        <Transition>
+            <SequentialAnimation>
+                <SetPropertyAction target="{webview}" property="smooth" value="false" />
+                <ParallelAnimation>
+                    <NumericAnimation target="{webview}" properties="zoomedout" easing="easeInOutQuad" duration="200"/>
+                    <NumericAnimation target="{flick}" properties="xPosition,yPosition" easing="easeInOutQuad" duration="200"/>
+                </ParallelAnimation>
+                <SetPropertyAction target="{webview}" property="smooth" value="true" />
+            </SequentialAnimation>
+        </Transition>
+    </transitions>
+</Item>
diff --git a/demos/declarative/webbrowser/content/RectSoftShadow.qml b/demos/declarative/webbrowser/content/RectSoftShadow.qml
new file mode 100644
index 0000000..0235842
--- /dev/null
+++ b/demos/declarative/webbrowser/content/RectSoftShadow.qml
@@ -0,0 +1,10 @@
+<Item>
+    <Image src="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"
+        width="16" height="{parent.height+32}" />
+    <Image src="pics/softshadow-top.png" x="0" y="-16"
+        width="{parent.width}" height="16" />
+    <Image src="pics/softshadow-bottom.png" x="0" y="{parent.height}"
+        width="{webview.width*webview.scale}" height="16" />
+</Item>
diff --git a/demos/declarative/webbrowser/content/pics/addressbar-filled.png b/demos/declarative/webbrowser/content/pics/addressbar-filled.png
new file mode 100644
index 0000000..c793a10
--- /dev/null
+++ b/demos/declarative/webbrowser/content/pics/addressbar-filled.png
diff --git a/demos/declarative/webbrowser/content/pics/addressbar-filled.sci b/demos/declarative/webbrowser/content/pics/addressbar-filled.sci
new file mode 100644
index 0000000..464dbf5
--- /dev/null
+++ b/demos/declarative/webbrowser/content/pics/addressbar-filled.sci
@@ -0,0 +1,6 @@
+gridLeft: 7
+gridTop: 7
+gridBottom: 7
+gridRight: 7
+imageFile: addressbar-filled.png
+
diff --git a/demos/declarative/webbrowser/content/pics/addressbar.png b/demos/declarative/webbrowser/content/pics/addressbar.png
new file mode 100644
index 0000000..9b8e2c9
--- /dev/null
+++ b/demos/declarative/webbrowser/content/pics/addressbar.png
diff --git a/demos/declarative/webbrowser/content/pics/addressbar.sci b/demos/declarative/webbrowser/content/pics/addressbar.sci
new file mode 100644
index 0000000..23a2a19
--- /dev/null
+++ b/demos/declarative/webbrowser/content/pics/addressbar.sci
@@ -0,0 +1,6 @@
+gridLeft: 7
+gridTop: 7
+gridBottom: 7
+gridRight: 7
+imageFile: addressbar.png
+
diff --git a/demos/declarative/webbrowser/content/pics/back-disabled.png b/demos/declarative/webbrowser/content/pics/back-disabled.png
new file mode 100644
index 0000000..0ca0701
--- /dev/null
+++ b/demos/declarative/webbrowser/content/pics/back-disabled.png
diff --git a/demos/declarative/webbrowser/content/pics/back.png b/demos/declarative/webbrowser/content/pics/back.png
new file mode 100644
index 0000000..3e88a6c
--- /dev/null
+++ b/demos/declarative/webbrowser/content/pics/back.png
diff --git a/demos/declarative/webbrowser/content/pics/footer.png b/demos/declarative/webbrowser/content/pics/footer.png
new file mode 100644
index 0000000..f5fe95f
--- /dev/null
+++ b/demos/declarative/webbrowser/content/pics/footer.png
diff --git a/demos/declarative/webbrowser/content/pics/footer.sci b/demos/declarative/webbrowser/content/pics/footer.sci
new file mode 100644
index 0000000..de0ed04
--- /dev/null
+++ b/demos/declarative/webbrowser/content/pics/footer.sci
@@ -0,0 +1,6 @@
+gridLeft: 10
+gridTop: 0
+gridBottom: 0
+gridRight: 10
+imageFile: footer.png
+
diff --git a/demos/declarative/webbrowser/content/pics/forward-disabled.png b/demos/declarative/webbrowser/content/pics/forward-disabled.png
new file mode 100644
index 0000000..573aaa4
--- /dev/null
+++ b/demos/declarative/webbrowser/content/pics/forward-disabled.png
diff --git a/demos/declarative/webbrowser/content/pics/forward.png b/demos/declarative/webbrowser/content/pics/forward.png
new file mode 100644
index 0000000..d4eb026
--- /dev/null
+++ b/demos/declarative/webbrowser/content/pics/forward.png
diff --git a/demos/declarative/webbrowser/content/pics/header.png b/demos/declarative/webbrowser/content/pics/header.png
new file mode 100644
index 0000000..c4aff2e
--- /dev/null
+++ b/demos/declarative/webbrowser/content/pics/header.png
diff --git a/demos/declarative/webbrowser/content/pics/reload.png b/demos/declarative/webbrowser/content/pics/reload.png
new file mode 100644
index 0000000..fa4d033
--- /dev/null
+++ b/demos/declarative/webbrowser/content/pics/reload.png
diff --git a/demos/declarative/webbrowser/content/pics/softshadow-bottom.png b/demos/declarative/webbrowser/content/pics/softshadow-bottom.png
new file mode 100644
index 0000000..59c1ba1
--- /dev/null
+++ b/demos/declarative/webbrowser/content/pics/softshadow-bottom.png
diff --git a/demos/declarative/webbrowser/content/pics/softshadow-left.png b/demos/declarative/webbrowser/content/pics/softshadow-left.png
new file mode 100644
index 0000000..d08f5c7
--- /dev/null
+++ b/demos/declarative/webbrowser/content/pics/softshadow-left.png
diff --git a/demos/declarative/webbrowser/content/pics/softshadow-left.sci b/demos/declarative/webbrowser/content/pics/softshadow-left.sci
new file mode 100644
index 0000000..82e38f8
--- /dev/null
+++ b/demos/declarative/webbrowser/content/pics/softshadow-left.sci
@@ -0,0 +1,5 @@
+gridLeft: 0
+gridTop: 16
+gridBottom: 16
+gridRight: 0
+imageFile: softshadow-left.png
diff --git a/demos/declarative/webbrowser/content/pics/softshadow-right.png b/demos/declarative/webbrowser/content/pics/softshadow-right.png
new file mode 100644
index 0000000..1bb29d5
--- /dev/null
+++ b/demos/declarative/webbrowser/content/pics/softshadow-right.png
diff --git a/demos/declarative/webbrowser/content/pics/softshadow-right.sci b/demos/declarative/webbrowser/content/pics/softshadow-right.sci
new file mode 100644
index 0000000..e9494ed
--- /dev/null
+++ b/demos/declarative/webbrowser/content/pics/softshadow-right.sci
@@ -0,0 +1,5 @@
+gridLeft: 0
+gridTop: 16
+gridBottom: 16
+gridRight: 0
+imageFile: softshadow-right.png
diff --git a/demos/declarative/webbrowser/content/pics/softshadow-top.png b/demos/declarative/webbrowser/content/pics/softshadow-top.png
new file mode 100644
index 0000000..ef86738
--- /dev/null
+++ b/demos/declarative/webbrowser/content/pics/softshadow-top.png