Initial import of kinetic-dui branch from the old kinetic

author: Michael Brasser <michael.brasser@nokia.com> 2009-04-22 04:47:24 (GMT)
committer: Michael Brasser <michael.brasser@nokia.com> 2009-04-22 04:47:24 (GMT)
commit: 2366667fc97eb6a56203b2dd7dac776ff4164abd (patch)
tree: b2acb6cc6bfe475d7e619e4788973b61fff775e0 /examples/declarative
parent: 2c762f3b8b284a7c6dc0c499b7052013bad5b707 (diff)
download: Qt-2366667fc97eb6a56203b2dd7dac776ff4164abd.zip
Qt-2366667fc97eb6a56203b2dd7dac776ff4164abd.tar.gz
Qt-2366667fc97eb6a56203b2dd7dac776ff4164abd.tar.bz2
138 files changed, 5622 insertions, 0 deletions
diff --git a/examples/declarative/animation/animation.qml b/examples/declarative/animation/animation.qml
new file mode 100644
index 0000000..1d60ac0
--- /dev/null
+++ b/examples/declarative/animation/animation.qml
@@ -0,0 +1,28 @@
+<Rect width="400" height="200" color="white">
+    <Rect width="40" height="40" y="80" color="#FF0000" radius="10">
+
+        <x>
+            <!--
+            Animate the x property.  Setting repeat to true makes the
+            animation repeat indefinitely, otherwise it would only run once.
+            -->
+            <SequentialAnimation running="true" repeat="true">
+                <!-- Move from 0 to 360 in 500ms, using the easeInOutQuad easing function -->
+                <NumericAnimation from="0" to="360" easing="easeInOutQuad" duration="500"/>
+                <!-- Then pause for 200ms -->
+                <PauseAnimation duration="200"/>
+                <!-- Then move back to 0 in 2 seconds, using the easeInOutElastic easing function -->
+                <NumericAnimation from="360" to="0" easing="easeInOutElastic" duration="2000"/>
+            </SequentialAnimation>
+        </x>
+
+        <color>
+            <!-- Alternate color between red and green -->
+            <SequentialAnimation running="true" repeat="true">
+                <ColorAnimation from="#FF0000" to="#00FF00" duration="5000"/>
+                <ColorAnimation from="#00FF00" to="#FF0000" duration="5000"/>
+            </SequentialAnimation>
+        </color>
+
+    </Rect>
+</Rect>
diff --git a/examples/declarative/behaviours/MyRect.qml b/examples/declarative/behaviours/MyRect.qml
new file mode 100644
index 0000000..e40bd1b
--- /dev/null
+++ b/examples/declarative/behaviours/MyRect.qml
@@ -0,0 +1,4 @@
+<Rect radius="15" pen.color="black" width="100" height="100" id="Page">
+    <MouseRegion anchors.fill="{parent}" onClicked="bluerect.parent = Page; bluerect.x=0" />
+</Rect>
+
diff --git a/examples/declarative/behaviours/test.qml b/examples/declarative/behaviours/test.qml
new file mode 100644
index 0000000..a544028
--- /dev/null
+++ b/examples/declarative/behaviours/test.qml
@@ -0,0 +1,37 @@
+<Rect color="lightsteelblue" width="800" height="600" id="Page">
+    <MouseRegion anchors.fill="{parent}" onClicked="bluerect.parent = Page; bluerect.x = mouseX;" />
+
+    <MyRect color="green" x="200" y="200" />
+    <MyRect color="red" x="400" y="200" />
+    <MyRect color="yellow" x="400" y="400" />
+    <MyRect color="orange" x="400" y="500" />
+    <MyRect color="pink" x="400" y="0" />
+    <MyRect color="lightsteelblue" x="100" y="500" />
+    <MyRect color="black" x="0" y="200" />
+    <MyRect color="white" x="400" y="0" />
+
+    <Rect color="blue" x="0" y="0" width="100" height="100" id="bluerect">
+        <x>
+            <Behaviour>
+                <SequentialAnimation>
+                    <NumericAnimation target="{bluerect}" properties="y" from="0" to="10" easing="easeOutBounce(amplitude:30)" duration="250" />
+                    <NumericAnimation target="{bluerect}" properties="y" from="10" to="0" easing="easeOutBounce(amplitude:30)" duration="250" />
+                </SequentialAnimation>
+                <NumericAnimation target="{bluerect}" property="x" duration="500" />
+            </Behaviour>
+        </x>
+
+        <parent>
+            <Behaviour>
+                <SequentialAnimation>
+                    <NumericAnimation target="{bluerect}" properties="opacity" to="0" duration="150" />
+                    <SetPropertyAction target="{bluerect}" property="parent" />
+                    <NumericAnimation target="{bluerect}" properties="opacity" to="1" duration="150"/>
+                </SequentialAnimation>
+            </Behaviour>
+        </parent>
+        
+    </Rect>
+
+
+</Rect>
diff --git a/examples/declarative/connections/connections.qml b/examples/declarative/connections/connections.qml
new file mode 100644
index 0000000..3146338
--- /dev/null
+++ b/examples/declarative/connections/connections.qml
@@ -0,0 +1,9 @@
+<Rect id="rect" color="blue" width="40" height="30">
+    <Rect id="dot" color="red" width="3" height="3" x="{rect.width/2}" y="{rect.height/2}"/>
+    <MouseRegion id="mr" anchors.fill="{rect}"/>
+    <Connection sender="{mr}" signal="clicked(x,y)">
+        color="green";
+        dot.x = x-1;
+        dot.y = y-1;
+    </Connection>
+</Rect>
diff --git a/examples/declarative/contacts/contacts.pro b/examples/declarative/contacts/contacts.pro
new file mode 100644
index 0000000..18293ee
--- /dev/null
+++ b/examples/declarative/contacts/contacts.pro
@@ -0,0 +1,22 @@
+TEMPLATE = app
+TARGET = contacts
+
+MOC_DIR = .moc
+OBJECTS_DIR = .obj
+
+QT += declarative script sql
+
+unix {
+    sqlitedb.output  = ${QMAKE_FILE_BASE}.sqlite
+    sqlitedb.commands = rm -f ${QMAKE_FILE_OUT}; if which sqlite3 ; then sqlite3 ${QMAKE_FILE_OUT} < ${QMAKE_FILE_NAME} ; fi
+    sqlitedb.input = SQL_SOURCES
+    sqlitedb.CONFIG += no_link target_predeps
+
+    QMAKE_EXTRA_COMPILERS += sqlitedb
+    QMAKE_EXTRA_TARGETS = sqlitedb
+}
+
+SQL_SOURCES += data/contacts.sql
+
+SOURCES += main.cpp
+
diff --git a/examples/declarative/contacts/contacts.qml b/examples/declarative/contacts/contacts.qml
new file mode 100644
index 0000000..d4647f9
--- /dev/null
+++ b/examples/declarative/contacts/contacts.qml
@@ -0,0 +1,44 @@
+<Rect id="page" width="320" height="480" color="white">
+    <resources>
+        <Component id="contactDelegate">
+            <Rect id="wrapper" x="20" width="{List.width-40}" color="#FEFFEE" pen.color="#FFBE4F" radius="5">
+                <filter><Shadow xOffset="5" yOffset="5" /></filter>
+                <MouseRegion id="pageMouse" anchors.fill="{parent}" onClicked="if (wrapper.state == 'Details') { wrapper.state = '';} else {wrapper.state = 'Details';}"/> 
+                <Image id="portraitPic" src="{portrait}" x="10" y="10" />
+                <Text id="name" text="{firstName + ' ' + lastName}" anchors.left="{portraitPic.right}" anchors.leftMargin="10"
+                      anchors.top="{portraitPic.top}" anchors.right="{wrapper.right}" anchors.rightMargin="10"
+                      font.family="Comic Sans MS" font.bold="true" font.size="11"/>
+                <VerticalLayout id="email_layout" anchors.left="{name.left}" anchors.top="{name.bottom}" anchors.topMargin="10">
+                    <Repeater id="email_list" dataSource="{emails}" >
+                        <Component>
+                            <Text text="{modelData}" height="18" font.italic="true" color="midnightblue" />
+                        </Component>
+                    </Repeater>
+                </VerticalLayout>
+                <height>{Math.max(email_layout.height + name.height + 25, portraitPic.height+20)}</height>
+
+                <states>
+                    <State name="Details">
+                        <SetProperty target="{wrapper}" property="color" value="white" />
+                        <SetProperty target="{wrapper}" property="x" value="0" />
+                        <SetProperty target="{wrapper}" property="height" value="{List.height}" />
+                        <SetProperty target="{wrapper}" property="width" value="{List.width}" />
+                        <SetProperty target="{wrapper.ListView.view}" property="yPosition" value="{wrapper.y}"/>
+                        <SetProperty target="{wrapper.ListView.view}" property="locked" value="1"/>
+                    </State>
+                </states>
+
+                <transitions>
+                    <Transition>
+                        <ParallelAnimation>
+                            <ColorAnimation duration="500" />
+                            <NumericAnimation duration="150" properties="x,yPosition,height,width"/>
+                        </ParallelAnimation>
+                    </Transition>
+                </transitions>
+            </Rect>
+        </Component>
+    </resources>
+
+    <ListView id="List" model="{contactModel}" width="320" height="480" clip="true" delegate="{contactDelegate}"/>
+</Rect>
diff --git a/examples/declarative/contacts/dummydata/contactModel.qml b/examples/declarative/contacts/dummydata/contactModel.qml
new file mode 100644
index 0000000..341b7a6
--- /dev/null
+++ b/examples/declarative/contacts/dummydata/contactModel.qml
@@ -0,0 +1,103 @@
+<ListModel>
+    <Contact>
+        <firstName>Aaron</firstName>
+        <lastName>Kennedy</lastName>
+        <portrait>contact.png</portrait>
+        <emails>
+            <Email address="akennedy@trolltech.com"/>
+            <Email address="aaron.kennedy@trolltech.com"/>
+        </emails>
+    </Contact>
+    <Contact>
+        <firstName>Contact</firstName>
+        <lastName>1</lastName>
+        <portrait>contact.png</portrait>
+    </Contact>
+    <Contact>
+        <firstName>Contact</firstName>
+        <lastName>2</lastName>
+        <portrait>contact.png</portrait>
+    </Contact>
+    <Contact>
+        <firstName>Contact</firstName>
+        <lastName>3</lastName>
+        <portrait>contact.png</portrait>
+    </Contact>
+    <Contact>
+        <firstName>Contact</firstName>
+        <lastName>4</lastName>
+        <portrait>contact.png</portrait>
+    </Contact>
+    <Contact>
+        <firstName>Contact</firstName>
+        <lastName>5</lastName>
+        <portrait>contact.png</portrait>
+    </Contact>
+    <Contact>
+        <firstName>Contact</firstName>
+        <lastName>6</lastName>
+        <portrait>contact.png</portrait>
+    </Contact>
+    <Contact>
+        <firstName>Contact</firstName>
+        <lastName>7</lastName>
+        <portrait>contact.png</portrait>
+    </Contact>
+    <Contact>
+        <firstName>Contact</firstName>
+        <lastName>8</lastName>
+        <portrait>contact.png</portrait>
+    </Contact>
+    <Contact>
+        <firstName>Contact</firstName>
+        <lastName>9</lastName>
+        <portrait>contact.png</portrait>
+    </Contact>
+    <Contact>
+        <firstName>Alan</firstName>
+        <lastName>Alpert</lastName>
+        <portrait>contact.png</portrait>
+    </Contact>
+    <Contact>
+        <firstName>Betty</firstName>
+        <lastName>Boo</lastName>
+        <portrait>contact.png</portrait>
+    </Contact>
+    <Contact>
+        <firstName>Foo</firstName>
+        <lastName>Bar</lastName>
+        <portrait>contact.png</portrait>
+    </Contact>
+    <Contact>
+        <firstName>Marius</firstName>
+        <lastName>Bugge Monsen</lastName>
+        <portrait>contact.png</portrait>
+    </Contact>
+    <Contact>
+        <firstName>Martin</firstName>
+        <lastName>Jones</lastName>
+        <portrait>contact.png</portrait>
+        <emails>
+            <Email address="mjones@trolltech.com"/>
+            <Email address="martin.jones@trolltech.com"/>
+        </emails>
+    </Contact>
+    <Contact>
+        <firstName>Michael</firstName>
+        <lastName>Brasser</lastName>
+        <portrait>contact.png</portrait>
+        <emails>
+            <Email address="mbrasser@trolltech.com"/>
+        </emails>
+    </Contact>
+    <Contact>
+        <firstName>Yann</firstName>
+        <lastName>Bodson</lastName>
+        <portrait>contact.png</portrait>
+    </Contact>
+    <Contact>
+        <firstName>Yogi</firstName>
+        <lastName>Bear</lastName>
+        <portrait>contact.png</portrait>
+    </Contact>
+</ListModel>
diff --git a/examples/declarative/contacts/main.cpp b/examples/declarative/contacts/main.cpp
new file mode 100644
index 0000000..6bf9daf
--- /dev/null
+++ b/examples/declarative/contacts/main.cpp
@@ -0,0 +1,80 @@
+#include "qml.h"
+#include <qfxview.h>
+
+#include <QWidget>
+#include <QApplication>
+#include <QFile>
+#include <QTime>
+#include <QVBoxLayout>
+
+const char *defaultFileName("contacts.xml");
+
+class Contacts : public QWidget
+{
+Q_OBJECT
+public:
+    Contacts(const QString &fileName, int = 240, int = 320, QWidget *parent=0, Qt::WindowFlags flags=0);
+
+public slots:
+    void sceneResized(QSize size)
+    {
+        if(size.width() > 0 && size.height() > 0)
+            canvas->setFixedSize(size.width(), size.height());
+    }
+
+private:
+    QFxView *canvas;
+};
+
+Contacts::Contacts(const QString &fileName, int width, int height, QWidget *parent, Qt::WindowFlags flags)
+: QWidget(parent, flags), canvas(0)
+{
+    setAttribute(Qt::WA_OpaquePaintEvent);
+    setAttribute(Qt::WA_NoSystemBackground);
+
+    QVBoxLayout *vbox = new QVBoxLayout;
+    vbox->setMargin(0);
+    setLayout(vbox);
+
+    canvas = new QFxView(this);
+    QObject::connect(canvas, SIGNAL(sceneResized(QSize)), this, SLOT(sceneResized(QSize)));
+    canvas->setFixedSize(width, height);
+    vbox->addWidget(canvas);
+
+    QFile file(fileName);
+    file.open(QFile::ReadOnly);
+    QString xml = file.readAll();
+    canvas->setXml(xml, fileName);
+
+    canvas->execute();
+}
+
+int main(int argc, char ** argv)
+{
+    QApplication app(argc, argv);
+
+    bool frameless = false;
+
+    int width = 240;
+    int height = 320;
+
+    QString fileName;
+    for (int i = 1; i < argc; ++i) {
+        QString arg = argv[i];
+        if (arg == "-frameless") {
+            frameless = true;
+        } else {
+            fileName = arg;
+            break;
+        }
+    }
+    if (fileName.isEmpty())
+        fileName = QLatin1String(defaultFileName);
+
+    Contacts contacts(fileName, width, height, 0, frameless ? Qt::FramelessWindowHint : Qt::Widget);
+    contacts.show();
+
+    return app.exec();
+}
+
+#include "main.moc"
diff --git a/examples/declarative/declarative.pro b/examples/declarative/declarative.pro
new file mode 100644
index 0000000..3083800
--- /dev/null
+++ b/examples/declarative/declarative.pro
@@ -0,0 +1,4 @@
+TEMPLATE = subdirs
+CONFIG = ordered
+
+SUBDIRS += minehunt \
diff --git a/examples/declarative/dial/DialLibrary/Dial.qml b/examples/declarative/dial/DialLibrary/Dial.qml
new file mode 100644
index 0000000..acff119
--- /dev/null
+++ b/examples/declarative/dial/DialLibrary/Dial.qml
@@ -0,0 +1,13 @@
+<Item width="210" height="210">
+    <properties><Property name="value" type="real" value="0"/></properties>
+    <Image id="Background" src="background.svg"/>
+    <Item x="102" y="98" rotation="-130">
+        <rotation><Follow spring="1.4" damping=".15" source="{Math.min(Math.max(-130, value*2.2 - 130), 133)}"/></rotation>
+        <Image src="needle.svg" x="-102" y="-98"/>
+    </Item>
+    <Item x="104" y="102" rotation="-130">
+        <rotation><Follow spring="1.4" damping=".15" source="{Math.min(Math.max(-130, value*2.2 - 130), 133)}"/></rotation>
+        <Image src="needle_shadow.svg" x="-104" y="-102"/>
+    </Item>
+    <Image src="overlay.svg"/>
+</Item>
diff --git a/examples/declarative/dial/DialLibrary/background.svg b/examples/declarative/dial/DialLibrary/background.svg
new file mode 100644
index 0000000..415320d
--- /dev/null
+++ b/examples/declarative/dial/DialLibrary/background.svg
@@ -0,0 +1,385 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 13.0.2, SVG Export Plug-In  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
+	<!ENTITY ns_flows "http://ns.adobe.com/Flows/1.0/">
+]>
+<svg version="1.1"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
+	 x="0px" y="0px" width="210px" height="210px" viewBox="0 0 210 210" enable-background="new 0 0 210 210" xml:space="preserve">
+<defs>
+</defs>
+<radialGradient id="SVGID_1_" cx="0.8066" cy="-16.5908" r="92.0159" gradientTransform="matrix(0.9944 0 0 -0.9944 101.1987 90.0014)" gradientUnits="userSpaceOnUse">
+	<stop  offset="0.1264" style="stop-color:#E0E0E0"/>
+	<stop  offset="0.3421" style="stop-color:#C7C7C7"/>
+	<stop  offset="0.5495" style="stop-color:#B3B3B3"/>
+	<stop  offset="0.721" style="stop-color:#B1B1B1"/>
+	<stop  offset="0.7828" style="stop-color:#AAAAAA"/>
+	<stop  offset="0.8269" style="stop-color:#9E9E9E"/>
+	<stop  offset="0.8625" style="stop-color:#8D8D8D"/>
+	<stop  offset="0.893" style="stop-color:#777777"/>
+	<stop  offset="0.92" style="stop-color:#5C5C5C"/>
+	<stop  offset="0.9445" style="stop-color:#3C3C3C"/>
+	<stop  offset="0.9662" style="stop-color:#171717"/>
+	<stop  offset="0.978" style="stop-color:#000000"/>
+</radialGradient>
+<circle fill="url(#SVGID_1_)" cx="102" cy="98" r="85"/>
+<path opacity="0.5" fill="#FFFFFF" fill-opacity="0.8" enable-background="new    " d="M57,169c0,0,20.146,5.732,45.001,5.732
+	C126.855,174.732,147,169,147,169s-20.145,12.846-44.999,12.846C77.146,181.846,57,169,57,169z"/>
+<image overflow="visible" opacity="0.75" enable-background="new    " width="206" height="206" xlink:href="data:image/png;base64,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">
+</image>
+<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="-15.9541" y1="83.9062" x2="13.6193" y2="-106.171" gradientTransform="matrix(1 0 0 -1 102.5 88)">
+	<stop  offset="0" style="stop-color:#B3B3B3"/>
+	<stop  offset="0.151" style="stop-color:#AFAFAF"/>
+	<stop  offset="0.301" style="stop-color:#A3A3A3"/>
+	<stop  offset="0.4506" style="stop-color:#8F8F8F"/>
+	<stop  offset="0.6001" style="stop-color:#737373"/>
+	<stop  offset="0.7495" style="stop-color:#4F4F4F"/>
+	<stop  offset="0.8968" style="stop-color:#232323"/>
+	<stop  offset="1" style="stop-color:#000000"/>
+</linearGradient>
+<path fill="url(#SVGID_2_)" d="M101,187.999c-50.178,0-91-40.821-91-91c0-50.178,40.822-91,91-91c50.178,0,91,40.822,91,91
+	C191.999,147.178,151.178,187.999,101,187.999L101,187.999z M101,13c-46.316,0-84,37.684-84,84c0,46.316,37.684,84,84,84
+	c46.316,0,84-37.684,84-84C185,50.683,147.316,13,101,13L101,13z"/>
+<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="-79.4551" y1="-54.0073" x2="76.4557" y2="36.0078" gradientTransform="matrix(1 0 0 -1 102.5 88)">
+	<stop  offset="0" style="stop-color:#ECECEC"/>
+	<stop  offset="0.0105" style="stop-color:#DDDDDD"/>
+	<stop  offset="0.0399" style="stop-color:#B7B7B7"/>
+	<stop  offset="0.0704" style="stop-color:#979797"/>
+	<stop  offset="0.1021" style="stop-color:#7F7F7F"/>
+	<stop  offset="0.1353" style="stop-color:#6E6E6E"/>
+	<stop  offset="0.1712" style="stop-color:#636363"/>
+	<stop  offset="0.2143" style="stop-color:#606060"/>
+	<stop  offset="0.4615" style="stop-color:#FFFFFF"/>
+	<stop  offset="0.5195" style="stop-color:#CFCFCF"/>
+	<stop  offset="0.5899" style="stop-color:#9A9A9A"/>
+	<stop  offset="0.6512" style="stop-color:#747474"/>
+	<stop  offset="0.7002" style="stop-color:#5D5D5D"/>
+	<stop  offset="0.7308" style="stop-color:#545454"/>
+	<stop  offset="1" style="stop-color:#ECECEC"/>
+</linearGradient>
+<path fill="url(#SVGID_3_)" d="M101,7C51.294,7,11,47.294,11,97s40.294,90,90,90c49.705,0,90-40.294,90-90S150.705,7,101,7z
+	 M101,182c-46.945,0-85-38.057-85-85c0-46.944,38.055-85,85-85c46.943,0,85,38.056,85,85C186,143.943,147.943,182,101,182z"/>
+<circle fill="none" cx="102" cy="98.001" r="65"/>
+<text transform="matrix(-0.6383 -0.7436 0.7588 -0.6513 54.624 142.6035)" font-family="'MyriadPro-Regular'" font-size="12">0</text>
+<text transform="matrix(-0.589 -0.7833 0.7993 -0.601 50.7637 138.0234)" font-family="'MyriadPro-Regular'" font-size="12.0005"> </text>
+<text transform="matrix(-0.3613 -0.911 0.9296 -0.3686 42.665 124.7539)" font-family="'MyriadPro-Regular'" font-size="12">1</text>
+<text transform="matrix(-0.275 -0.9406 0.9598 -0.2807 40.4512 119.1719)" font-family="'MyriadPro-Regular'" font-size="12">0</text>
+<text transform="matrix(-0.213 -0.9566 0.9761 -0.2173 38.8223 113.4023)" font-family="'MyriadPro-Regular'" font-size="12"> </text>
+<text transform="matrix(0.0159 -0.9799 0.9999 0.0162 36.96 100.019)" font-family="'MyriadPro-Regular'" font-size="12.0004">2</text>
+<text transform="matrix(0.104 -0.9745 0.9944 0.1061 37.0518 94.0215)" font-family="'MyriadPro-Regular'" font-size="12.0005">0</text>
+<text transform="matrix(0.167 -0.9657 0.9854 0.1704 37.7407 88.0718)" font-family="'MyriadPro-Regular'" font-size="12"> </text>
+<text transform="matrix(0.3752 -0.9053 0.9238 0.3828 40.7725 75.9199)" font-family="'MyriadPro-Regular'" font-size="12">3</text>
+<text transform="matrix(0.4573 -0.8669 0.8845 0.4666 43.0674 70.3799)" font-family="'MyriadPro-Regular'" font-size="11.9993">0</text>
+<text transform="matrix(0.5127 -0.8352 0.8523 0.5231 45.9121 65.1069)" font-family="'MyriadPro-Regular'" font-size="12"> </text>
+<text transform="matrix(0.6672 -0.7178 0.7325 0.6808 52.3262 55.9673)" font-family="'MyriadPro-Regular'" font-size="12">4</text>
+<text transform="matrix(0.7301 -0.6537 0.6671 0.745 56.4102 51.5703)" font-family="'MyriadPro-Regular'" font-size="12">0</text>
+<text transform="matrix(0.7708 -0.6052 0.6176 0.7865 60.9082 47.6182)" font-family="'MyriadPro-Regular'" font-size="12"> </text>
+<text transform="matrix(0.8905 -0.4092 0.4175 0.9087 72.1504 40.165)" font-family="'MyriadPro-Regular'" font-size="12">5</text>
+<text transform="matrix(0.9246 -0.3249 0.3315 0.9435 77.6006 37.6587)" font-family="'MyriadPro-Regular'" font-size="12.0005">0</text>
+<text transform="matrix(0.944 -0.2633 0.2687 0.9632 83.2959 35.7197)" font-family="'MyriadPro-Regular'" font-size="12"> </text>
+<text transform="matrix(0.9797 -0.0248 0.0253 0.9997 97.3081 33.0972)" font-family="'MyriadPro-Regular'" font-size="12">6</text>
+<text transform="matrix(0.9779 0.0643 -0.0656 0.9978 103.3198 32.9438)" font-family="'MyriadPro-Regular'" font-size="11.9994">0</text>
+<text transform="matrix(0.9717 0.1274 -0.13 0.9915 109.2959 33.3921)" font-family="'MyriadPro-Regular'" font-size="12"> </text>
+<text transform="matrix(0.9148 0.3514 -0.3586 0.9335 122.4863 36.2207)" font-family="'MyriadPro-Regular'" font-size="12">7</text>
+<text transform="matrix(0.8783 0.4348 -0.4437 0.8962 128.0967 38.375)" font-family="'MyriadPro-Regular'" font-size="12">0</text>
+<text transform="matrix(0.8481 0.4911 -0.5011 0.8654 133.4463 41.085)" font-family="'MyriadPro-Regular'" font-size="12"> </text>
+<text transform="matrix(0.719 0.6659 -0.6795 0.7337 143.9395 48.2495)" font-family="'MyriadPro-Regular'" font-size="12">8</text>
+<text transform="matrix(0.6551 0.7289 -0.7438 0.6684 148.3438 52.3242)" font-family="'MyriadPro-Regular'" font-size="12">0</text>
+<text transform="matrix(0.6067 0.7696 -0.7853 0.6191 152.3047 56.814)" font-family="'MyriadPro-Regular'" font-size="12"> </text>
+<text transform="matrix(0.4267 0.8822 -0.9002 0.4354 159.2344 67.0146)" font-family="'MyriadPro-Regular'" font-size="11.9996">9</text>
+<text transform="matrix(0.3433 0.9179 -0.9366 0.3503 161.8438 72.4062)" font-family="'MyriadPro-Regular'" font-size="11.9996">0</text>
+<text transform="matrix(0.2823 0.9384 -0.9576 0.2881 163.8945 78.0513)" font-family="'MyriadPro-Regular'" font-size="12"> </text>
+<text transform="matrix(0.1113 0.9737 -0.9935 0.1136 166.2334 87.54)" font-family="'MyriadPro-Regular'" font-size="12">1</text>
+<text transform="matrix(0.0217 0.9798 -0.9998 0.0221 166.917 93.5156)" font-family="'MyriadPro-Regular'" font-size="12.0005">0</text>
+<text transform="matrix(-0.067 0.9777 -0.9977 -0.0684 167.0527 99.502)" font-family="'MyriadPro-Regular'" font-size="12.0005">0</text>
+<text transform="matrix(-0.1305 0.9713 -0.9911 -0.1331 166.5859 105.5)" font-family="'MyriadPro-Regular'" font-size="12"> </text>
+<text transform="matrix(-0.2564 0.9459 -0.9652 -0.2616 165.5303 112.1348)" font-family="'MyriadPro-Regular'" font-size="12">1</text>
+<text transform="matrix(-0.3429 0.918 -0.9368 -0.3499 163.9658 117.918)" font-family="'MyriadPro-Regular'" font-size="12">1</text>
+<text transform="matrix(-0.4267 0.8822 -0.9002 -0.4354 161.8613 123.5527)" font-family="'MyriadPro-Regular'" font-size="11.9996">0</text>
+<text transform="matrix(-0.4834 0.8525 -0.8699 -0.4932 159.1973 128.9287)" font-family="'MyriadPro-Regular'" font-size="12"> </text>
+<text transform="matrix(-0.5948 0.7788 -0.7947 -0.607 155.5195 135.0195)" font-family="'MyriadPro-Regular'" font-size="12">1</text>
+<text transform="matrix(-0.6637 0.721 -0.7357 -0.6773 151.8789 139.791)" font-family="'MyriadPro-Regular'" font-size="12">2</text>
+<text transform="matrix(-0.7269 0.6572 -0.6707 -0.7418 147.8154 144.2051)" font-family="'MyriadPro-Regular'" font-size="12.0006">0</text>
+<path fill="#333333" d="M141.121,133.456l7.08,6.485l-0.436,0.475l-7.08-6.484L141.121,133.456z"/>
+<path fill="#333333" d="M143.077,132.336l4.927,4.186l-0.541,0.637l-4.926-4.186L143.077,132.336z"/>
+<path fill="#333333" d="M144.354,130.73l5.092,4l-0.518,0.658l-5.091-4L144.354,130.73z"/>
+<path fill="#333333" d="M145.572,129.104l5.234,3.806l-0.492,0.676l-5.233-3.806L145.572,129.104z"/>
+<path fill="#333333" d="M146.73,127.412l5.379,3.6l-0.465,0.694l-5.379-3.601L146.73,127.412z"/>
+<path fill="#333333" d="M147.157,125.37l8.179,5.036l-0.338,0.548l-8.18-5.035L147.157,125.37z"/>
+<path fill="#333333" d="M148.854,123.91l5.637,3.178l-0.41,0.729l-5.637-3.178L148.854,123.91z"/>
+<path fill="#333333" d="M149.814,122.104l5.75,2.963l-0.383,0.742l-5.75-2.963L149.814,122.104z"/>
+<path fill="#333333" d="M150.709,120.241l5.861,2.735l-0.354,0.756l-5.861-2.734L150.709,120.241z"/>
+<path fill="#333333" d="M151.516,118.376l5.965,2.51l-0.322,0.771l-5.965-2.51L151.516,118.376z"/>
+<path fill="#333333" d="M151.539,116.303l8.988,3.389l-0.229,0.603l-8.986-3.388L151.539,116.303z"/>
+<path fill="#333333" d="M152.928,114.539l6.141,2.047l-0.266,0.792l-6.14-2.047L152.928,114.539z"/>
+<path fill="#333333" d="M153.525,112.57l6.211,1.811l-0.232,0.803l-6.212-1.812L153.525,112.57z"/>
+<path fill="#333333" d="M154.046,110.602l6.272,1.562l-0.201,0.812l-6.273-1.563L154.046,110.602z"/>
+<path fill="#333333" d="M154.482,108.585l6.336,1.326l-0.172,0.817l-6.334-1.326L154.482,108.585z"/>
+<path fill="#333333" d="M154.117,106.549l9.461,1.604l-0.107,0.634l-9.461-1.603L154.117,106.549z"/>
+<path fill="#333333" d="M155.132,104.559l6.417,0.833l-0.107,0.828l-6.416-0.833L155.132,104.559z"/>
+<path fill="#333333" d="M155.338,102.516l6.448,0.586l-0.075,0.832l-6.447-0.586L155.338,102.516z"/>
+<path fill="#333333" d="M155.477,100.476l6.459,0.34l-0.043,0.833l-6.459-0.339L155.477,100.476z"/>
+<path fill="#333333" d="M155.529,98.425l6.469,0.103l-0.014,0.835l-6.469-0.103L155.529,98.425z"/>
+<path fill="#333333" d="M154.777,96.482l9.6-0.213l0.014,0.643l-9.598,0.214L154.777,96.482z"/>
+<path fill="#333333" d="M155.406,94.336l6.458-0.391l0.051,0.833l-6.459,0.391L155.406,94.336z"/>
+<path fill="#333333" d="M155.232,92.29l6.438-0.627l0.081,0.831l-6.438,0.627L155.232,92.29z"/>
+<path fill="#333333" d="M154.979,90.257l6.407-0.874l0.112,0.827l-6.407,0.874L154.979,90.257z"/>
+<path fill="#333333" d="M154.639,88.227l6.377-1.121l0.146,0.823l-6.377,1.121L154.639,88.227z"/>
+<path fill="#333333" d="M153.539,86.475l9.384-2.029l0.138,0.629l-9.386,2.029L153.539,86.475z"/>
+<path fill="#333333" d="M153.756,84.251l6.264-1.604l0.207,0.809l-6.264,1.604L153.756,84.251z"/>
+<path fill="#333333" d="M153.188,82.293l6.203-1.852l0.237,0.801l-6.201,1.852L153.188,82.293z"/>
+<path fill="#333333" d="M152.545,80.339l6.13-2.088l0.271,0.791l-6.131,2.088L152.545,80.339z"/>
+<path fill="#333333" d="M151.84,78.426l6.036-2.324l0.301,0.779l-6.036,2.324L151.84,78.426z"/>
+<path fill="#333333" d="M150.427,76.915l8.819-3.784l0.254,0.592l-8.82,3.784L150.427,76.915z"/>
+<path fill="#333333" d="M150.199,74.675l5.841-2.777l0.358,0.754l-5.842,2.777L150.199,74.675z"/>
+<path fill="#333333" d="M149.271,72.855L155,69.852l0.389,0.74l-5.729,3.003L149.271,72.855z"/>
+<path fill="#333333" d="M148.271,71.069l5.614-3.22l0.415,0.726l-5.615,3.219L148.271,71.069z"/>
+<path fill="#333333" d="M147.204,69.314l5.481-3.435l0.442,0.707l-5.481,3.436L147.204,69.314z"/>
+<path fill="#333333" d="M145.529,68.108l7.936-5.401l0.362,0.531l-7.935,5.402L145.529,68.108z"/>
+<path fill="#333333" d="M144.887,65.962l5.215-3.836l0.494,0.673l-5.214,3.836L144.887,65.962z"/>
+<path fill="#333333" d="M143.63,64.343l5.062-4.031l0.521,0.653l-5.062,4.031L143.63,64.343z"/>
+<path fill="#333333" d="M142.307,62.78l4.904-4.228l0.546,0.634l-4.905,4.227L142.307,62.78z"/>
+<path fill="#333333" d="M140.932,61.255l4.74-4.401l0.568,0.612l-4.741,4.401L140.932,61.255z"/>
+<path fill="#333333" d="M139.052,60.387l6.774-6.806l0.456,0.454l-6.774,6.806L139.052,60.387z"/>
+<path fill="#333333" d="M138.008,58.389l4.393-4.752l0.613,0.567l-4.392,4.751L138.008,58.389z"/>
+<path fill="#333333" d="M136.467,57.041l4.207-4.916l0.635,0.543l-4.207,4.916L136.467,57.041z"/>
+<path fill="#333333" d="M134.871,55.746l4.021-5.07l0.654,0.52l-4.021,5.07L134.871,55.746z"/>
+<path fill="#333333" d="M133.227,54.52l3.825-5.224l0.675,0.493l-3.826,5.225L133.227,54.52z"/>
+<path fill="#333333" d="M131.211,54.016l5.371-7.966l0.534,0.36l-5.371,7.965L131.211,54.016z"/>
+<path fill="#333333" d="M129.803,52.251l3.414-5.503l0.711,0.441l-3.414,5.502L129.803,52.251z"/>
+<path fill="#333333" d="M128.047,51.223l3.198-5.626l0.726,0.413l-3.197,5.625L128.047,51.223z"/>
+<path fill="#333333" d="M126.244,50.255l2.982-5.739l0.739,0.386l-2.981,5.738L126.244,50.255z"/>
+<path fill="#333333" d="M124.404,49.366l2.757-5.853l0.755,0.356l-2.756,5.852L124.404,49.366z"/>
+<path fill="#333333" d="M122.325,49.252l3.754-8.835l0.592,0.252l-3.754,8.835L122.325,49.252z"/>
+<path fill="#333333" d="M120.621,47.796l2.304-6.047l0.781,0.297l-2.304,6.047L120.621,47.796z"/>
+<path fill="#333333" d="M118.693,47.118l2.066-6.13l0.791,0.267l-2.066,6.13L118.693,47.118z"/>
+<path fill="#333333" d="M116.725,46.524l1.832-6.212l0.801,0.236l-1.83,6.212L116.725,46.524z"/>
+<path fill="#333333" d="M114.779,46.004l1.582-6.273l0.812,0.204l-1.584,6.273L114.779,46.004z"/>
+<path fill="#333333" d="M112.713,46.28l1.998-9.385l0.629,0.135l-1.999,9.384L112.713,46.28z"/>
+<path fill="#333333" d="M110.762,45.182l1.102-6.377l0.822,0.143l-1.101,6.376L110.762,45.182z"/>
+<path fill="#333333" d="M108.746,44.895l0.854-6.417l0.828,0.109l-0.854,6.418L108.746,44.895z"/>
+<path fill="#333333" d="M106.686,44.667l0.607-6.438l0.831,0.078l-0.606,6.438L106.686,44.667z"/>
+<path fill="#333333" d="M104.646,44.531l0.36-6.458l0.833,0.046l-0.359,6.459L104.646,44.531z"/>
+<path fill="#333333" d="M102.68,45.202l0.183-9.598l0.644,0.013l-0.184,9.598L102.68,45.202z"/>
+<path fill="#333333" d="M100.542,44.489l-0.123-6.469l0.835-0.017l0.123,6.469L100.542,44.489z"/>
+<path fill="#333333" d="M98.505,44.581l-0.37-6.458l0.833-0.048l0.37,6.458L98.505,44.581z"/>
+<path fill="#333333" d="M96.458,44.747l-0.606-6.438l0.831-0.078l0.606,6.438L96.458,44.747z"/>
+<path fill="#333333" d="M94.423,45.004l-0.854-6.418l0.828-0.109l0.854,6.417L94.423,45.004z"/>
+<path fill="#333333" d="M92.632,46.025l-1.633-9.46l0.634-0.109l1.633,9.46L92.632,46.025z"/>
+<path fill="#333333" d="M90.413,45.722l-1.347-6.324l0.816-0.174l1.347,6.324L90.413,45.722z"/>
+<path fill="#333333" d="M88.408,46.207l-1.584-6.273l0.811-0.204l1.583,6.273L88.408,46.207z"/>
+<path fill="#333333" d="M86.447,46.767l-1.83-6.212l0.802-0.236l1.83,6.212L86.447,46.767z"/>
+<path fill="#333333" d="M84.515,47.387l-2.067-6.13l0.791-0.267l2.067,6.129L84.515,47.387z"/>
+<path fill="#333333" d="M82.944,48.742l-3.418-8.972l0.602-0.229l3.418,8.973L82.944,48.742z"/>
+<path fill="#333333" d="M80.687,48.877l-2.53-5.954l0.769-0.327l2.53,5.955L80.687,48.877z"/>
+<path fill="#333333" d="M78.817,49.73l-2.756-5.852l0.755-0.356l2.757,5.853L78.817,49.73z"/>
+<path fill="#333333" d="M77.015,50.641l-2.982-5.738l0.74-0.386l2.982,5.739L77.015,50.641z"/>
+<path fill="#333333" d="M75.205,51.646l-3.198-5.626l0.726-0.413l3.199,5.626L75.205,51.646z"/>
+<path fill="#333333" d="M73.931,53.274l-5.066-8.163l0.547-0.34l5.066,8.164L73.931,53.274z"/>
+<path fill="#333333" d="M71.764,53.824l-3.62-5.368l0.692-0.468l3.62,5.368L71.764,53.824z"/>
+<path fill="#333333" d="M70.097,55.016l-3.826-5.225l0.675-0.493l3.825,5.225L70.097,55.016z"/>
+<path fill="#333333" d="M68.474,56.267l-4.021-5.07l0.655-0.521l4.021,5.07L68.474,56.267z"/>
+<path fill="#333333" d="M66.896,57.584l-4.206-4.916l0.634-0.543l4.207,4.916L66.896,57.584z"/>
+<path fill="#333333" d="M65.941,59.427l-6.515-7.05l0.472-0.437l6.516,7.05L65.941,59.427z"/>
+<path fill="#333333" d="M63.906,60.392l-4.566-4.587l0.592-0.59l4.566,4.587L63.906,60.392z"/>
+<path fill="#333333" d="M62.501,61.867l-4.741-4.401l0.568-0.612l4.741,4.402L62.501,61.867z"/>
+<path fill="#333333" d="M61.145,63.415l-4.906-4.227l0.546-0.634l4.905,4.228L61.145,63.415z"/>
+<path fill="#333333" d="M59.848,64.996l-5.06-4.031l0.521-0.653l5.06,4.031L59.848,64.996z"/>
+<path fill="#333333" d="M59.263,66.991L51.526,61.3l0.381-0.519l7.736,5.691L59.263,66.991z"/>
+<path fill="#333333" d="M57.446,68.317l-5.358-3.63l0.469-0.691l5.358,3.63L57.446,68.317z"/>
+<path fill="#333333" d="M56.349,70.033l-5.492-3.425l0.442-0.709l5.491,3.425L56.349,70.033z"/>
+<path fill="#333333" d="M55.312,71.795l-5.615-3.219l0.415-0.726l5.615,3.22L55.312,71.795z"/>
+<path fill="#333333" d="M54.34,73.605l-5.738-2.993l0.386-0.74l5.739,2.992L54.34,73.605z"/>
+<path fill="#333333" d="M54.141,75.654l-8.667-4.12l0.275-0.58l8.667,4.119L54.141,75.654z"/>
+<path fill="#333333" d="M52.61,77.307l-5.944-2.551l0.33-0.768l5.944,2.551L52.61,77.307z"/>
+<path fill="#333333" d="M51.851,79.216l-6.037-2.314l0.299-0.779l6.037,2.314L51.851,79.216z"/>
+<path fill="#333333" d="M51.177,81.153l-6.13-2.088l0.27-0.791l6.13,2.088L51.177,81.153z"/>
+<path fill="#333333" d="M50.569,83.094l-6.201-1.851l0.238-0.801l6.202,1.852L50.569,83.094z"/>
+<path fill="#333333" d="M50.768,85.146l-9.293-2.38l0.159-0.623l9.293,2.38L50.768,85.146z"/>
+<path fill="#333333" d="M49.584,87.067l-6.325-1.368l0.177-0.816l6.325,1.368L49.584,87.067z"/>
+<path fill="#333333" d="M49.213,89.074l-6.377-1.121l0.146-0.823l6.376,1.121L49.213,89.074z"/>
+<path fill="#333333" d="M48.907,91.083l-6.406-0.874l0.112-0.827l6.407,0.874L48.907,91.083z"/>
+<path fill="#333333" d="M48.687,93.121l-6.438-0.628l0.081-0.831l6.438,0.628L48.687,93.121z"/>
+<path fill="#333333" d="M49.276,95.13l-9.583-0.564l0.038-0.643l9.583,0.564L49.276,95.13z"/>
+<path fill="#333333" d="M48.475,97.23l-6.47-0.144l0.019-0.835l6.47,0.144L48.475,97.23z"/>
+<path fill="#333333" d="M48.483,99.283l-6.47,0.103L42,98.551l6.469-0.103L48.483,99.283z"/>
+<path fill="#333333" d="M48.568,101.321l-6.458,0.35l-0.046-0.833l6.459-0.35L48.568,101.321z"/>
+<path fill="#333333" d="M48.737,103.374l-6.448,0.586l-0.075-0.832l6.448-0.587L48.737,103.374z"/>
+<path fill="#333333" d="M49.688,105.223l-9.521,1.235l-0.083-0.638l9.521-1.236L49.688,105.223z"/>
+<path fill="#333333" d="M49.291,107.421l-6.377,1.08l-0.139-0.823l6.376-1.08L49.291,107.421z"/>
+<path fill="#333333" d="M49.691,109.426l-6.335,1.327l-0.172-0.817l6.335-1.326L49.691,109.426z"/>
+<path fill="#333333" d="M50.159,111.432l-6.273,1.563l-0.202-0.812l6.274-1.562L50.159,111.432z"/>
+<path fill="#333333" d="M50.707,113.372l-6.212,1.81l-0.233-0.802l6.212-1.81L50.707,113.372z"/>
+<path fill="#333333" d="M51.998,115.01l-9.109,3.037l-0.204-0.609l9.11-3.037L51.998,115.01z"/>
+<path fill="#333333" d="M52.037,117.253l-6.058,2.283l-0.294-0.782l6.058-2.281L52.037,117.253z"/>
+<path fill="#333333" d="M52.807,119.146l-5.966,2.509l-0.323-0.771l5.965-2.51L52.807,119.146z"/>
+<path fill="#333333" d="M53.652,121.018l-5.862,2.735l-0.353-0.757l5.862-2.735L53.652,121.018z"/>
+<path fill="#333333" d="M54.565,122.846l-5.749,2.963l-0.382-0.742l5.749-2.963L54.565,122.846z"/>
+<path fill="#333333" d="M56.144,124.195l-8.362,4.716l-0.315-0.562l8.361-4.715L56.144,124.195z"/>
+<path fill="#333333" d="M56.606,126.384l-5.513,3.394l-0.438-0.711l5.513-3.395L56.606,126.384z"/>
+<path fill="#333333" d="M57.731,128.107l-5.379,3.6l-0.464-0.693l5.378-3.601L57.731,128.107z"/>
+<path fill="#333333" d="M58.918,129.779l-5.235,3.805l-0.491-0.676l5.235-3.805L58.918,129.779z"/>
+<path fill="#333333" d="M60.164,131.405l-5.08,4l-0.517-0.655l5.08-4.001L60.164,131.405z"/>
+<path fill="#333333" d="M61.971,132.432l-7.31,6.226l-0.417-0.49l7.31-6.226L61.971,132.432z"/>
+<path fill="#FFF200" d="M137.911,69.32l3.624-2.875c-5.367-6.779-12.527-12.29-21.146-15.7l-1.701,4.304
+	C126.523,58.147,133.029,63.156,137.911,69.32z"/>
+<path fill="#FFB700" d="M147.43,91.292l4.574-0.677c-1.314-8.823-4.932-17.174-10.469-24.17l-3.624,2.875
+	C142.945,75.68,146.232,83.27,147.43,91.292z"/>
+<path fill="#FFF200" d="M94.898,52.31l-0.677-4.574c-8.823,1.314-17.173,4.932-24.167,10.469l2.875,3.623
+	C79.287,56.793,86.878,53.505,94.898,52.31z"/>
+<path fill="#FFB700" d="M72.93,61.827l-2.875-3.623c-6.781,5.367-12.291,12.525-15.702,21.146l4.303,1.701
+	C61.755,73.216,66.765,66.707,72.93,61.827z"/>
+<path fill="#59DE00" d="M118.688,55.049l1.701-4.304c-8.621-3.408-17.613-4.285-26.167-3.01l0.677,4.574
+	C102.676,51.151,110.85,51.948,118.688,55.049z"/>
+</svg>
diff --git a/examples/declarative/dial/DialLibrary/needle.svg b/examples/declarative/dial/DialLibrary/needle.svg
new file mode 100644
index 0000000..dce7d7e
--- /dev/null
+++ b/examples/declarative/dial/DialLibrary/needle.svg
@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 13.0.2, SVG Export Plug-In  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
+	<!ENTITY ns_flows "http://ns.adobe.com/Flows/1.0/">
+]>
+<svg version="1.1"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
+	 x="0px" y="0px" width="210px" height="210px" viewBox="-98 -35 210 210" enable-background="new -98 -35 210 210"
+	 xml:space="preserve">
+<defs>
+</defs>
+<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="-102.5" y1="-13.5" x2="-94.5" y2="-13.5" gradientTransform="matrix(1 0 0 -1 102.5 18)">
+	<stop  offset="0" style="stop-color:#EC1C24"/>
+	<stop  offset="0.0782" style="stop-color:#E51B23"/>
+	<stop  offset="0.3901" style="stop-color:#CA181F"/>
+	<stop  offset="0.5495" style="stop-color:#F0C7C9"/>
+	<stop  offset="0.5972" style="stop-color:#D98D90"/>
+	<stop  offset="0.6452" style="stop-color:#C4595D"/>
+	<stop  offset="0.687" style="stop-color:#B53339"/>
+	<stop  offset="0.7206" style="stop-color:#AC1C22"/>
+	<stop  offset="0.7418" style="stop-color:#A9141A"/>
+	<stop  offset="1" style="stop-color:#EC1C24"/>
+</linearGradient>
+<path fill="url(#SVGID_1_)" d="M8,61c0,1.104-2.343,2-4,2l0,0c-1.657,0-4-0.896-4-2L2.5,2C2.5,0.896,3,0,4,0l0,0
+	c1,0,1.5,0.896,1.5,2L8,61z"/>
+</svg>
diff --git a/examples/declarative/dial/DialLibrary/needle_shadow.svg b/examples/declarative/dial/DialLibrary/needle_shadow.svg
new file mode 100644
index 0000000..6aab197
--- /dev/null
+++ b/examples/declarative/dial/DialLibrary/needle_shadow.svg
@@ -0,0 +1,30 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 13.0.2, SVG Export Plug-In  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
+	<!ENTITY ns_flows "http://ns.adobe.com/Flows/1.0/">
+]>
+<svg version="1.1"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
+	 x="0px" y="0px" width="210px" height="210px" viewBox="-90 -30 210 210" enable-background="new -90 -30 210 210"
+	 xml:space="preserve">
+<defs>
+</defs>
+<image overflow="visible" opacity="0.5" enable-background="new    " width="26" height="81" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABsAAABSCAYAAAClg6/xAAAACXBIWXMAAAsSAAALEgHS3X78AAAA
+GXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAydJREFUeNrsmetu2zAMhUVaS9pu
+2Pu/5dY2vaSJ7dkAOZ8y1M3Jjw6zAUKx4ugLJZo+FkPYjhsc1Hidd/1o2tUwhKAhCC0LpQJIjcG0
+TwEDmAU3webBO7EInxXWi53h89AK038/D/xNbCdtBNgMOU32Ie1JgK53OZh6M0PuwHbi8SCQd7AP
+8PIC1iVguj6zJ/vJ7if7AfYgUJ3SIbF21TCdwtmb7wL5Ke09wAazbklYLIR7B949gFdRBu+kPco0
+dub3YwkWTMjjuul0KmwUyE762LkXi7Ac8E681eirArXANDLxFiC4FboaGGcgwckenWM2u4QUlBty
+IxtP2fQXcy03JmE2EHYSNK2BhUQiThmVPIsNGb8zSXlw1o2uCX12Mr9G4GieBDZImj2zYY9PgADn
+VeEfK9bJ3mN7ack8drrS+sVCBCoIYTvwDGERcqObH3OJ2Hpmp3J0QAwRTmvWLAUcE6DkmvHK0E+l
+LGqBUSFzsElXXMgk1JJBPGjuPKzNjWvU8VWw1JRQZuqv8owy0o9a3hu+1DTe9NhgG2yDJZPvWmsW
+qWt04yqtn9L5pT5q1fqlJ3SseGJXSzlPnFrrzXkRGAtTaIUOtoM594QqpWBUUMO2HZx+TxX/1Y6x
+oBnZmUbrmSfnXO3IFTrfrlupj1uikSpkXFch57IwSqybNyAXvneFUqtubE5Ra6RcreC5+gU+pw+p
+IO+2h+cG22BfEFaTiv6N19zS22Su3pL9LVfmRa/IkysYNG8BBjPoOSy1F5JW+/C65s1N9GQe7CN8
+rrv0AnuH784ZTy9gtvDWA2ge9GWy57DUaE5y/hL8os/F2saEVwh6m+ww2WNYKhXaPkv/Qa6rrjLZ
+CoVVT0EGmQd8nexpst+T/RJ7FPhrWOppn6CdE50MG5soo7FedgCY2pP0z98fw1JxGlIhiqUsrZtp
+OcuWsnozzQdZvzeBnQCY1BkM07cX04LPPix1mFEGPEKUHsXOJjqTNx9ndr1xHxgD6QR29qYwJ8co
+8cKHG854i2h1sM9lFqpItuxsZHo3/2imrbqam9tvtLAQblCBr71+DP/98UeAAQDKLu+cxVe7aAAA
+AABJRU5ErkJggg==">
+</image>
+</svg>
diff --git a/examples/declarative/dial/DialLibrary/overlay.svg b/examples/declarative/dial/DialLibrary/overlay.svg
new file mode 100644
index 0000000..8530dd5
--- /dev/null
+++ b/examples/declarative/dial/DialLibrary/overlay.svg
@@ -0,0 +1,47 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 13.0.2, SVG Export Plug-In  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
+	<!ENTITY ns_flows "http://ns.adobe.com/Flows/1.0/">
+]>
+<svg version="1.1"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
+	 x="0px" y="0px" width="210px" height="210px" viewBox="-21.12 -18.396 210 210" enable-background="new -21.12 -18.396 210 210"
+	 xml:space="preserve">
+<defs>
+</defs>
+<image overflow="visible" opacity="0.5" enable-background="new    " width="48" height="48" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADEAAAAxCAYAAABznEEcAAAACXBIWXMAAAsSAAALEgHS3X78AAAA
+GXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA/JJREFUeNrsWolum0AQZQHfOdrc
+//93bZO2OVwTx2YL0hvpaTK7C7iJUhSkJ2wMu/N2jp0ZnGWfx8c43BuPx9+9+s1/FBKOzs4YM0TC
+09kfSsod8JxGblzLjNVn1MY1/9YktNCCAuBrztCECC7YA3ytNxk3gAALXQIToFRkNAkWftfgBdgB
+TKozEdeDgAgmgk+BGWEKMkxEDibQCr5t8EzYAkKINXMwCV59WfV5gwWwBBa4PlUaYRKigVbYqsGm
+wR9gA1SknX0XIq4HgQkEFMGPGhwTVkRkEiHxQgTWDR4JT0Roi3uTRFwPAjMS/qTBaYMvwAkREbMq
+yC88kRAzEgIPDX4D9/guZJ67EHEJJ2YCKwjaCn/W4BznMxAZSqIV/idwh/M9flsrIqazlwktiA8s
+oIGWwAVwhfM5rh9DU7MO5vSMlX7EuAs8x894I+zWXUmwFkrY+BImcwbBbxpcN7jEtVPyCQm1oegk
+oXUDAkw8N+7dKzJOEykTvjBVWjiHBq6BltBXaEFWs1SmpPcJiVBzFc1yQ2NbtYeY+0fRgcAxBBUT
+ugEuDVOa014xoT2lJHLWtYII643wJeXcRcQXxJnFkUUDN/gsBLRJlLSyevcuAqmKIzPRm+E2FW41
+CZlANrQjRJ4LrLz4wQVFpGVgp3YR8D1sdjWtfAUSFUWonRWlLBIxU7pSfqCdMjfSc2ek6i6QqnP0
+qtQuvg2F2jJQG+SUH0mKsQKW5MRWnuQ6ZAie7ue9SLKBlcoA2PlZTp+pEGhlqhMiwoneJBCF+iSU
+obyM55kbpvqqVskTGSsPPqUBYyl33/rk4LnyRN3AUaQIFD+HFFg6oKTmcykSlvPlEbiBwqdMKzaf
+FRxMTaQqu/fqwnSeqw+JQUX8wKPXXHngQauor42C/l/0j7yRtYbms1o9pia8UdRr8OBDm2HeyHBT
+85kaCpGwuhKcw1gp8lAtHDxXHtECJ2KV6kyECnk/0ISYAM9TBZI/H/MJHlh3JdaAFPK6/q07OCX/
+VhvVnnQ/ZC7Om3ahBSs6pB0zKmAWgdTDRXqwMZ/bUca6Rm3d1tm3DX7g8y80D6RxoMm8IqGJcHdv
+Rs0yKx3IEl1vHzAf0fIDmgQtge8gcYtGwiO1cfYqoAQ1YeU0sYrMJUymplRbN9AsAkJCOh/rkBZS
+mnCRnMZKBVKheacqtk2CwC1M6cnQQpJE6N1DHilmaiUs18hb1XfdULvmXhH4BggB0UKlqrqsCwld
+eDhl59o8QgJzdSZR54m6fndKA0LgDgRECxLSzcg3ig7gqHuxo+mKj+b9xGjeFI3mnd1o3p6O5j12
+alfPsv/oHwVdx3uX/3Z8Hh/l+CvAAIH3kc3b00M7AAAAAElFTkSuQmCC" transform="matrix(1 0 0 1 57.8799 59.604)">
+</image>
+<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="-26.0957" y1="-12.2373" x2="-17.2345" y2="-44.2323" gradientTransform="matrix(1 0 0 -1 102.5 51.208)">
+	<stop  offset="0" style="stop-color:#FFFFFF"/>
+	<stop  offset="1" style="stop-color:#000000"/>
+</linearGradient>
+<circle fill="url(#SVGID_1_)" cx="80.88" cy="79.604" r="15"/>
+<radialGradient id="SVGID_2_" cx="-28.9624" cy="-17.0811" r="25.2655" gradientTransform="matrix(1 0 0 -1 102.5 51.208)" gradientUnits="userSpaceOnUse">
+	<stop  offset="0" style="stop-color:#FFFFFF"/>
+	<stop  offset="1" style="stop-color:#616161"/>
+</radialGradient>
+<path fill="url(#SVGID_2_)" d="M80.88,92.603c-7.167,0-12.999-5.832-12.999-13c-0.001-7.166,5.832-12.999,12.999-12.999
+	s13,5.832,13,12.999C93.879,86.771,88.047,92.603,80.88,92.603L80.88,92.603z"/>
+<path opacity="0.5" fill="#FFFFFF" enable-background="new    " d="M10.697,75.919c27.161-27.154,64.439-42.608,102.867-42.608
+	c11.422,0,22.744,1.386,33.739,4.018C133.183,14.903,108.235,0,79.768,0C35.712,0,0,35.714,0,79.768c0,2.589,0.14,5.14,0.387,7.648
+	C3.609,83.419,7.044,79.58,10.697,75.919z"/>
+</svg>
diff --git a/examples/declarative/dial/dial.qml b/examples/declarative/dial/dial.qml
new file mode 100644
index 0000000..ce43b01
--- /dev/null
+++ b/examples/declarative/dial/dial.qml
@@ -0,0 +1,14 @@
+<?qtfx namespacepath:=DialLibrary ?>
+<Rect color="white" width="210" height="240">
+    <!-- Dial with a slider to adjust it -->
+    <Dial id="Dial" value="{Slider.x-2}"/>
+    <Rect anchors.top="{Dial.bottom}" x="20" width="160" height="16" color="steelblue" gradientColor="lightsteelblue" radius="8" opacity="0.7">
+        <Rect id="Slider" anchors.top="{Dial.bottom}" x="2" y="2" width="30" height="12" color="lightgray" gradientColor="gray" radius="6">
+            <MouseRegion anchors.fill="{parent}"
+                         drag.target="{parent}"
+                         drag.axis="x"
+                         drag.xmin="2"
+                         drag.xmax="128"/>
+        </Rect>
+    </Rect>
+</Rect>
diff --git a/examples/declarative/easing/easing.qml b/examples/declarative/easing/easing.qml
new file mode 100644
index 0000000..f95d8c6
--- /dev/null
+++ b/examples/declarative/easing/easing.qml
@@ -0,0 +1,67 @@
+<Rect id="Window" width="640" height="{Layout.height}" color="white">
+
+    <resources>
+        <ListModel id="EasingTypes">
+            <ListItem><type>easeLinear</type></ListItem>
+            <ListItem><type>easeInQuad</type></ListItem>
+            <ListItem><type>easeOutQuad</type></ListItem>
+            <ListItem><type>easeInOutQuad</type></ListItem>
+            <ListItem><type>easeOutInQuad</type></ListItem>
+            <ListItem><type>easeInCubic</type></ListItem>
+            <ListItem><type>easeOutCubic</type></ListItem>
+            <ListItem><type>easeInOutCubic</type></ListItem>
+            <ListItem><type>easeOutInCubic</type></ListItem>
+            <ListItem><type>easeInQuart</type></ListItem>
+            <ListItem><type>easeOutQuart</type></ListItem>
+            <ListItem><type>easeInOutQuart</type></ListItem>
+            <ListItem><type>easeOutInQuart</type></ListItem>
+            <ListItem><type>easeInQuint</type></ListItem>
+            <ListItem><type>easeOutQuint</type></ListItem>
+            <ListItem><type>easeInOutQuint</type></ListItem>
+            <ListItem><type>easeOutInQuint</type></ListItem>
+            <ListItem><type>easeInSine</type></ListItem>
+            <ListItem><type>easeOutSine</type></ListItem>
+            <ListItem><type>easeInOutSine</type></ListItem>
+            <ListItem><type>easeOutInSine</type></ListItem>
+            <ListItem><type>easeInExpo</type></ListItem>
+            <ListItem><type>easeOutExpo</type></ListItem>
+            <ListItem><type>easeInOutExpo</type></ListItem>
+            <ListItem><type>easeOutInExpo</type></ListItem>
+            <ListItem><type>easeInCirc</type></ListItem>
+            <ListItem><type>easeOutCirc</type></ListItem>
+            <ListItem><type>easeInOutCirc</type></ListItem>
+            <ListItem><type>easeOutInCirc</type></ListItem>
+            <ListItem><type>easeInElastic</type></ListItem>
+            <ListItem><type>easeOutElastic</type></ListItem>
+            <ListItem><type>easeInOutElastic</type></ListItem>
+            <ListItem><type>easeOutInElastic</type></ListItem>
+            <ListItem><type>easeInBack</type></ListItem>
+            <ListItem><type>easeOutBack</type></ListItem>
+            <ListItem><type>easeInOutBack</type></ListItem>
+            <ListItem><type>easeOutInBack</type></ListItem>
+            <ListItem><type>easeOutBounce</type></ListItem>
+            <ListItem><type>easeInBounce</type></ListItem>
+            <ListItem><type>easeInOutBounce</type></ListItem>
+            <ListItem><type>easeOutInBounce</type></ListItem>
+        </ListModel>
+    </resources>
+
+    <VerticalLayout id="Layout" anchors.left="{Window.left}" anchors.right="{Window.right}">
+        <Repeater dataSource="{EasingTypes}">
+            <Component>
+                <Text id="Text" text="{type}" height="18" font.italic="true">
+                    <x>
+                        <SequentialAnimation id="Anim">
+                            <NumericAnimation from="0" to="{Window.width / 2}" easing="{type}" duration="1000"/>
+                            <PauseAnimation duration="300"/>
+                            <NumericAnimation to="0" from="{Window.width / 2}" easing="{type}" duration="1000"/>
+                        </SequentialAnimation>
+                    </x>
+                    <children>
+                        <MouseRegion onClicked="Anim.running=true" anchors.fill="{parent}"/>
+                    </children>
+                </Text>
+            </Component>
+        </Repeater>
+    </VerticalLayout>
+</Rect>
diff --git a/examples/declarative/follow/follow.qml b/examples/declarative/follow/follow.qml
new file mode 100644
index 0000000..0f3e772
--- /dev/null
+++ b/examples/declarative/follow/follow.qml
@@ -0,0 +1,35 @@
+<Rect width="320" height="240" color="#ffffff">
+    <Rect id="Rect" y="{200}" color="#00ff00" width="60" height="20">
+        <y>
+            <SequentialAnimation running="true" repeat="true">
+            <NumericAnimation to="{200}" easing="easeOutBounce(amplitude:180)" duration="2000" />
+            <PauseAnimation duration="1000" />
+            </SequentialAnimation>
+        </y>
+    </Rect>
+    <!-- Velocity -->
+    <Rect x="{Rect.width}" color="#ff0000" width="{Rect.width}" height="20">
+        <y>
+            <Follow source="{Rect.y}" velocity="200"/>
+        </y>
+    </Rect>
+    <Text x="{Rect.width}" y="220" text="Velocity"/>
+    <!-- Spring -->
+    <Rect x="{Rect.width * 2}" color="#ff0000" width="{Rect.width}" height="20">
+        <y>
+            <Follow source="{Rect.y}" spring="1.2" damping="0.1"/>
+        </y>
+    </Rect>
+    <Text x="{Rect.width * 2}" y="220" text="Spring"/>
+    <!-- Follow mouse -->
+    <MouseRegion id="Mouse" anchors.fill="{parent}">
+        <Rect width="20" height="20" radius="10" color="#0000ff">
+            <x>
+                <Follow source="{Mouse.mouseX-10}" spring="1.0" damping="0.05"/>
+            </x>
+            <y>
+                <Follow source="{Mouse.mouseY-10}" spring="1.0" damping="0.05"/>
+            </y>
+        </Rect>
+    </MouseRegion>
+</Rect>
diff --git a/examples/declarative/follow/pong.qml b/examples/declarative/follow/pong.qml
new file mode 100644
index 0000000..4fbf323
--- /dev/null
+++ b/examples/declarative/follow/pong.qml
@@ -0,0 +1,55 @@
+<Rect id="Page" width="640" height="480" color="#000000">
+    <!-- Make a ball to bounce -->
+    <Rect id="Ball" x="20" width="20" height="20" color="#00ee00" z="1">
+        <properties>
+            <!-- Add a property for the target y coordinate -->
+            <Property name="targetY" value="{Page.height-10}"/>
+            <Property name="direction" value="right"/>
+        </properties>
+        <x>
+            <!-- Move the ball to the right and back to the left repeatedly -->
+            <SequentialAnimation running="true" repeat="true">
+                <NumericAnimation to="{Page.width-40}" duration="2000"/>
+                <SetPropertyAction target="{Ball}" property="direction" value="left"/>
+                <NumericAnimation to="20" duration="2000"/>
+                <SetPropertyAction target="{Ball}" property="direction" value="right"/>
+            </SequentialAnimation>
+        </x>
+        <y>
+            <!-- Make y follow the target y coordinate, with a velocity of 200 -->
+            <Follow source="{Ball.targetY}" velocity="200"/>
+        </y>
+        <onTopChanged>
+            <!-- Detect the ball hitting the top or bottom of the view and bounce it -->
+            if (y &lt;= 0)
+                targetY = Page.height-20;
+            else if (y &gt;= Page.height-20)
+                targetY = 0;
+        </onTopChanged>
+    </Rect>
+    <!--
+    Place bats to the left and right of the view, following the y
+    coordinates of the ball.
+    -->
+    <Rect id="LeftBat" color="#00ee00" x="2" width="20" height="90">
+        <y>
+            <Follow source="{Ball.y-45}" velocity="300" enabled="{Ball.direction == 'left'}"/>
+        </y>
+    </Rect>
+    <Rect id="RightBat" x="{Page.width-22}" color="#00ee00" width="20" height="90">
+        <y>
+            <Follow source="{Ball.y-45}" velocity="300" enabled="{Ball.direction == 'right'}"/>
+        </y>
+    </Rect>
+
+    <!--
+    The rest, to make it look realistic, if neither ever scores...
+    -->
+    <Rect color="#00ee00" width="40" height="60" x="{320-80}"/>
+    <Rect color="#000000" width="20" height="40"  x="{320-70}" y="10"/>
+    <Rect color="#00ee00" width="40" height="60" x="{320+40}"/>
+    <Rect color="#000000" width="20" height="40"  x="{320+50}" y="10"/>
+    <Repeater dataSource="{24}">
+        <Rect color="#00ee00" width="10" height="10" x="{320-5}" y="{index*20}"/>
+    </Repeater>
+</Rect>
diff --git a/examples/declarative/listview/content/MediaButton.qml b/examples/declarative/listview/content/MediaButton.qml
new file mode 100644
index 0000000..c92305a
--- /dev/null
+++ b/examples/declarative/listview/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/examples/declarative/listview/content/pics/button-pressed.png b/examples/declarative/listview/content/pics/button-pressed.png
new file mode 100644
index 0000000..e434d32
--- /dev/null
+++ b/examples/declarative/listview/content/pics/button-pressed.png
diff --git a/examples/declarative/listview/content/pics/button.png b/examples/declarative/listview/content/pics/button.png
new file mode 100644
index 0000000..56a63ce
--- /dev/null
+++ b/examples/declarative/listview/content/pics/button.png
diff --git a/examples/declarative/listview/content/pics/fruit-salad.jpg b/examples/declarative/listview/content/pics/fruit-salad.jpg
new file mode 100644
index 0000000..da5a6b1
--- /dev/null
+++ b/examples/declarative/listview/content/pics/fruit-salad.jpg
diff --git a/examples/declarative/listview/content/pics/hamburger.jpg b/examples/declarative/listview/content/pics/hamburger.jpg
new file mode 100644
index 0000000..d0a15be
--- /dev/null
+++ b/examples/declarative/listview/content/pics/hamburger.jpg
diff --git a/examples/declarative/listview/content/pics/lemonade.jpg b/examples/declarative/listview/content/pics/lemonade.jpg
new file mode 100644
index 0000000..db445c9
--- /dev/null
+++ b/examples/declarative/listview/content/pics/lemonade.jpg
diff --git a/examples/declarative/listview/content/pics/pancakes.jpg b/examples/declarative/listview/content/pics/pancakes.jpg
new file mode 100644
index 0000000..60c4396
--- /dev/null
+++ b/examples/declarative/listview/content/pics/pancakes.jpg
diff --git a/examples/declarative/listview/content/pics/vegetable-soup.jpg b/examples/declarative/listview/content/pics/vegetable-soup.jpg
new file mode 100644
index 0000000..9dce332
--- /dev/null
+++ b/examples/declarative/listview/content/pics/vegetable-soup.jpg
diff --git a/examples/declarative/listview/dummydata/MyPetsModel.qml b/examples/declarative/listview/dummydata/MyPetsModel.qml
new file mode 100644
index 0000000..5af7fbf
--- /dev/null
+++ b/examples/declarative/listview/dummydata/MyPetsModel.qml
@@ -0,0 +1,51 @@
+<!--
+ListModel allows free form list models to be defined and populated.
+Be sure to name the file the same as the id.
+-->
+<ListModel id="MyPetsModel">
+    <Pet>
+        <name>Rover</name>
+        <type>Dog</type>
+        <age>5</age>
+    </Pet>
+    <Pet>
+        <name>Whiskers</name>
+        <type>Cat</type>
+        <age>2</age>
+    </Pet>
+    <Pet>
+        <name>Warren</name>
+        <type>Rabbit</type>
+        <age>2</age>
+    </Pet>
+    <Pet>
+        <name>Polly</name>
+        <type>Parrot</type>
+        <age>12</age>
+    </Pet>
+    <Pet>
+        <name>Spot</name>
+        <type>Dog</type>
+        <age>9</age>
+    </Pet>
+    <Pet>
+        <name>Tiny</name>
+        <type>Elephant</type>
+        <age>15</age>
+    </Pet>
+    <Pet>
+        <name>Penny</name>
+        <type>Turtle</type>
+        <age>4</age>
+    </Pet>
+    <Pet>
+        <name>Joey</name>
+        <type>Kangaroo</type>
+        <age>1</age>
+    </Pet>
+    <Pet>
+        <name>Kimba</name>
+        <type>Bunny</type>
+        <age>65</age>
+    </Pet>
+</ListModel>
diff --git a/examples/declarative/listview/dummydata/Recipies.qml b/examples/declarative/listview/dummydata/Recipies.qml
new file mode 100644
index 0000000..49bc610
--- /dev/null
+++ b/examples/declarative/listview/dummydata/Recipies.qml
@@ -0,0 +1,112 @@
+<ListModel id="Recipies">
+    <Recipe title="Pancakes" picture="content/pics/pancakes.jpg">
+        <ingredients>
+            <![CDATA[
+            <html>
+                <ul>
+                    <li> 1 cup (150g) self-raising flour
+                    <li> 1 tbs caster sugar
+                    <li> 3/4 cup (185ml) milk
+                    <li> 1 egg
+                </ul>
+            </html>
+            ]]>
+        </ingredients>
+        <method>
+            <![CDATA[
+            <html>
+                <ol>
+                    <li> Sift flour and sugar together into a bowl. Add a pinch of salt.
+                    <li> Beat milk and egg together, then add to dry ingredients. Beat until smooth.
+                    <li> Pour mixture into a pan on medium heat and cook until bubbles appear on the surface.
+                    <li> Turn over and cook other side until golden. 
+                </ol>
+            ]]>
+        </method>
+    </Recipe>
+    <Recipe title="Fruit Salad" picture="content/pics/fruit-salad.jpg">
+        <ingredients>
+        * Seasonal Fruit
+        </ingredients>
+        <method>
+        * Chop fruit and place in a bowl.
+        </method>
+    </Recipe>
+    <Recipe title="Vegetable Soup" picture="content/pics/vegetable-soup.jpg">
+        <ingredients>
+            <![CDATA[
+            <html>
+                <ul>
+                    <li> 1 onion
+                    <li> 1 turnip
+                    <li> 1 potato
+                    <li> 1 carrot
+                    <li> 1 head of celery
+                    <li> 1 1/2 litres of water
+                </ul>
+            </html>
+            ]]>
+        </ingredients>
+        <method>
+            <![CDATA[
+            <html>
+                <ol>
+                    <li> Chop vegetables.
+                    <li> Boil in water until vegetables soften.
+                    <li> Season with salt and pepper to taste.
+                </ol>
+            </html>
+            ]]>
+        </method>
+    </Recipe>
+    <Recipe title="Hamburger" picture="content/pics/hamburger.jpg">
+        <ingredients>
+            <![CDATA[
+            <html>
+                <ul>
+                    <li> 500g minced beef
+                    <li> Seasoning
+                    <li> lettuce, tomato, onion, cheese
+                    <li> 1 hamburger bun for each burger
+                </ul>
+            </html>
+            ]]>
+        </ingredients>
+        <method>
+            <![CDATA[
+            <html>
+                <ol>
+                    <li> Mix the beef, together with seasoning, in a food processor.
+                    <li> Shape the beef into burgers.
+                    <li> Grill the burgers for about 5 mins on each side (until cooked through)
+                    <li> Serve each burger on a bun with ketchup, cheese, lettuce, tomato and onion.
+                </ol>
+            </html>
+            ]]>
+        </method>
+    </Recipe>
+    <Recipe title="Lemonade" picture="content/pics/lemonade.jpg">
+        <ingredients>
+            <![CDATA[
+            <html>
+                <ul>
+                    <li> 1 cup Lemon Juice
+                    <li> 1 cup Sugar
+                    <li> 6 Cups of Water (2 cups warm water, 4 cups cold water)
+                </ul>
+            </html>
+            ]]>
+        </ingredients>
+        <method>
+            <![CDATA[
+            <html>
+                <ol>
+                    <li> Pour 2 cups of warm water into a pitcher and stir in sugar until it dissolves.
+                    <li> Pour in lemon juice, stir again, and add 4 cups of cold water.
+                    <li> Chill or serve over ice cubes.
+                </ol>
+            </html>
+            ]]>
+        </method>
+    </Recipe>
+</ListModel>
diff --git a/examples/declarative/listview/highlight.qml b/examples/declarative/listview/highlight.qml
new file mode 100644
index 0000000..5ce7acb
--- /dev/null
+++ b/examples/declarative/listview/highlight.qml
@@ -0,0 +1,56 @@
+<Rect width="400" height="300" color="white">
+
+    <!--
+    MyPets model is defined in dummydata/MyPetsModel.qml
+    The viewer automatically loads files in dummydata/* to assist
+    development without a real data source.
+    This one contains my pets.
+    -->
+
+    <!--
+    Define a delegate component.  A component will be
+    instantiated for each visible item in the list.
+    -->
+    <Component id="PetDelegate">
+        <Item id="Wrapper" width="200" height="50">
+            <VerticalLayout>
+                <Text text="{'Name: ' + name}"/>
+                <Text text="{'Type: ' + type}"/>
+                <Text text="{'Age: ' + age}"/>
+            </VerticalLayout>
+
+            <!--
+            Use the ListView.isCurrentItem attached property to
+            indent the item if it is the current item.
+            -->
+            <states>
+                <State name="Current" when="{Wrapper.ListView.isCurrentItem}">
+                    <SetProperty target="{Wrapper}" property="x" value="10"/>
+                </State>
+            </states>
+            <transitions>
+                <Transition>
+                    <NumericAnimation properties="x" duration="200" />
+                </Transition>
+            </transitions>
+        </Item>
+    </Component>
+
+    <!--
+    Specify a highlight with custom movement.  Note that autoHighlight
+    is set to false in the ListView so that we can control how the
+    highlight moves to the current item.
+    -->
+    <Component id="PetHighlight">
+        <Rect width="200" height="50" color="#FFFF88">
+            <y>
+                <Follow source="{List1.current.y}" spring="3" damping="0.1"/>
+            </y>
+        </Rect>
+    </Component>
+
+    <ListView id="List1" width="200" height="{parent.height}" model="{MyPetsModel}"
+              delegate="{PetDelegate}" highlight="{PetHighlight}" autoHighlight="false"
+              focus="true"/>
+
+</Rect>
diff --git a/examples/declarative/listview/listview.qml b/examples/declarative/listview/listview.qml
new file mode 100644
index 0000000..08c8f18
--- /dev/null
+++ b/examples/declarative/listview/listview.qml
@@ -0,0 +1,81 @@
+<Rect width="600" height="300" color="white">
+
+    <!--
+    MyPets model is defined in dummydata/MyPetsModel.qml
+    The viewer automatically loads files in dummydata/* to assist
+    development without a real data source.
+    This one contains my pets.
+    -->
+
+    <!--
+    Define a delegate component.  A component will be
+    instantiated for each visible item in the list.
+    -->
+    <Component id="PetDelegate">
+        <Item id="Wrapper" width="200" height="50">
+            <VerticalLayout>
+                <Text text="{'Name: ' + name}"/>
+                <Text text="{'Type: ' + type}"/>
+                <Text text="{'Age: ' + age}"/>
+            </VerticalLayout>
+        </Item>
+    </Component>
+
+    <!--
+    Define a highlight component.  Just one of these will be instantiated
+    by each ListView and placed behind the current item.
+    -->
+    <Component id="PetHighlight">
+        <Rect color="#FFFF88"/>
+    </Component>
+
+    <!--
+    Show the model in three lists, with different currentItemPositioning.
+    currentItemPositioning determines how the list behaves when the
+    current item changes.  Note that the second and third ListView
+    set their currentIndex to be the same as the first, and that
+    the first ListView is given keyboard focus.
+
+    The default mode, Free, allows the currentItem to move freely
+    within the visible area.  If it would move outside the visible
+    area, the view is scrolled to keep it visible.
+
+    Snap currentItemPositioning attempts to keep the current item
+    aligned with the snapPosition by scrolling the view, however the
+    items will not scroll beyond the beginning or end of the view.
+
+    SnapAuto currentItemPositioning always keeps the current item on
+    the snapPosition by scrolling the view.  It also automatically
+    sets the current item as is scrolled with the mouse.  Note
+    that the first ListView sets its currentIndex to be equal to
+    the third ListView's currentIndex.  By flicking List3 with
+    the mouse, the current index of List1 will be changed.
+    -->
+
+    <ListView id="List1" width="200" height="{parent.height}" model="{MyPetsModel}"
+              delegate="{PetDelegate}" highlight="{PetHighlight}"
+              currentIndex="{List3.currentIndex}" focus="true"/>
+
+    <ListView id="List2" x="200" width="200" height="{parent.height}" model="{MyPetsModel}"
+              delegate="{PetDelegate}" highlight="{PetHighlight}"
+              currentItemPositioning="Snap" snapPosition="125"
+              currentIndex="{List1.currentIndex}"/>
+
+    <ListView id="List3" x="400" width="200" height="{parent.height}" model="{MyPetsModel}"
+              delegate="{PetDelegate}"
+              currentItemPositioning="SnapAuto" snapPosition="125"
+              currentIndex="{List1.currentIndex}">
+        <children>
+            <!--
+            Position a static highlight rather than a normal highlight so that
+            when the view is flicked, the highlight does not move.
+            By positioning the highlight at the same position as the snapPosition
+            the item under the highlight will always be the current item.
+            Note that we specify the 'children' property.  This is because
+            the default property of a ListView is 'delegate'.
+            -->
+            <Rect y="{List3.yPosition+125}" width="200" height="50" color="#FFFF88" z="0"/>
+        </children>
+    </ListView>
+
+</Rect>
diff --git a/examples/declarative/listview/recipes.qml b/examples/declarative/listview/recipes.qml
new file mode 100644
index 0000000..7d32532
--- /dev/null
+++ b/examples/declarative/listview/recipes.qml
@@ -0,0 +1,83 @@
+<!-- This example illustrates expanding a list item to show a more detailed view -->
+<?qtfx namespacepath:=content ?>
+<Rect id="page" width="400" height="280" 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" x="10" width="{List.width-20}">
+                <!--
+                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 "SetProperty" line for each element we
+                want to fade.
+                -->
+                <properties><Property name="detailsOpacity" value="0" type="real"/></properties>
+                <!-- A simple rounded rectangle for the background -->
+                <Rect id="background" x="1" y="2" width="{parent.width-2}" height="{parent.height-4}" color="#FEFFEE" pen.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.
+                -->
+                <VerticalLayout id="topLayout" width="{parent.width-20}" margin="10" spacing="10">
+                    <HorizontalLayout spacing="10" height="{recipePic.height}">
+                        <Image id="recipePic" src="{picture}" width="48" height="48"/>
+                        <VerticalLayout height="{recipePic.height}" spacing="5" width="{background.width-recipePic.width-20}">
+                            <Text id="name" text="{title}" font.bold="true" font.size="16"/>
+                            <Text opacity="{wrapper.detailsOpacity}" text="Ingredients" font.size="12" font.bold="true"/>
+                            <Text opacity="{wrapper.detailsOpacity}" text="{ingredients}" wrap="true" width="{parent.width}"/>
+                        </VerticalLayout>
+                    </HorizontalLayout>
+                    <VerticalLayout id="details" opacity="{wrapper.detailsOpacity}">
+                        <Text text="Method" font.size="12" font.bold="true"/>
+                        <Text text="{method}" wrap="true" width="{topLayout.width}"/>
+                    </VerticalLayout>
+                </VerticalLayout>
+                <!-- 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</height>
+
+                <states>
+                    <State name="Details">
+                        <SetProperty target="{background}" property="color" value="white" />
+                        <!-- Make the picture bigger -->
+                        <SetProperties target="{recipePic}" width="128" height="128" />
+                        <!-- Make details visible -->
+                        <SetProperties target="{wrapper}" detailsOpacity="1" x="0"/>
+                        <!-- Make the detailed view fill the entire list area -->
+                        <SetProperty target="{wrapper}" property="height" value="{List.height}"/>
+                        <SetProperty target="{wrapper}" property="width" value="{List.width}"/>
+                        <!-- Move the list so that this item is at the top. -->
+                        <SetProperty target="{wrapper.ListView.view}" property="yPosition" value="{wrapper.y}"/>
+                        <!-- Disallow flicking while we're in detailed view -->
+                        <SetProperty target="{wrapper.ListView.view}" property="locked" value="1"/>
+                    </State>
+                </states>
+
+                <transitions>
+                    <Transition>
+                        <!-- Make the state changes smooth -->
+                        <ParallelAnimation>
+                            <ColorAnimation duration="500" />
+                            <NumericAnimation duration="300" properties="detailsOpacity,x,yPosition,height,width"/>
+                        </ParallelAnimation>
+                    </Transition>
+                </transitions>
+            </Item>
+        </Component>
+    </resources>
+
+    <!-- The actual list -->
+    <ListView id="List" model="{Recipies}" anchors.fill="{parent}" clip="true" delegate="{recipeDelegate}"/>
+</Rect>
diff --git a/examples/declarative/minehunt/Description.qml b/examples/declarative/minehunt/Description.qml
new file mode 100644
index 0000000..5bda5f8
--- /dev/null
+++ b/examples/declarative/minehunt/Description.qml
@@ -0,0 +1,10 @@
+<Item id="Page" height="{MyText.height + 20}" >
+    <properties><Property name="text" /></properties>
+    <MouseRegion anchors.fill="{parent}" drag.target="{Page}" drag.axis="xy" drag.xmin="0" drag.xmax="1000" drag.ymin="0" drag.ymax="1000"/>
+    <Rect radius="10" anchors.fill="{parent}" color="lightsteelblue" />
+    <Item x="10" y="10" width="{parent.width - 20}" height="{parent.height - 20}">
+        <Text id="MyText" text="{Page.text}" width="{parent.width}" clip="true" wrap="true"/>
+    </Item>
+
+    <filter><Shadow xOffset="5" yOffset="5" /></filter>
+</Item>
diff --git a/examples/declarative/minehunt/Explosion.qml b/examples/declarative/minehunt/Explosion.qml
new file mode 100644
index 0000000..aec685b
--- /dev/null
+++ b/examples/declarative/minehunt/Explosion.qml
@@ -0,0 +1,6 @@
+<Item>
+    <properties>
+        <Property name="explode" type="Bool" value="false"/>
+    </properties>
+    <Particles width="38" height="21" lifeSpan="3600000" lifeSpanDeviation="0" src="pics/star.png" count="200" angle="270" angleDeviation="360" velocity="100" velocityDeviation="20" z="100" emitting="{explode}"/>
+</Item>
diff --git a/examples/declarative/minehunt/main.cpp b/examples/declarative/minehunt/main.cpp
new file mode 100644
index 0000000..9db717b
--- /dev/null
+++ b/examples/declarative/minehunt/main.cpp
@@ -0,0 +1,312 @@
+#include "qmlbindablevalue.h"
+#include "qmlengine.h"
+#include "qmlcontext.h"
+#include "qml.h"
+#include <qfxitem.h>
+#include <qfxview.h>
+
+#include <QWidget>
+#include <QApplication>
+#include <QFile>
+#include <QTime>
+#include <QTimer>
+#include <QVBoxLayout>
+#include <QFileInfo>
+
+QString fileName = "minehunt.qml";
+
+class Tile : public QObject
+{
+    Q_OBJECT
+public:
+    Tile() : _hasFlag(false), _hasMine(false), _hint(-1), _flipped(false) {}
+
+    Q_PROPERTY(bool hasFlag READ hasFlag WRITE setHasFlag NOTIFY hasFlagChanged);
+    bool hasFlag() const { return _hasFlag; }
+
+    Q_PROPERTY(bool hasMine READ hasMine NOTIFY hasMineChanged);
+    bool hasMine() const { return _hasMine; }
+
+    Q_PROPERTY(int hint READ hint NOTIFY hintChanged);
+    int hint() const { return _hint; }
+
+    Q_PROPERTY(bool flipped READ flipped NOTIFY flippedChanged());
+    bool flipped() const { return _flipped; }
+
+    void setHasFlag(bool flag) {if(flag==_hasFlag) return; _hasFlag = flag; emit hasFlagChanged();}
+    void setHasMine(bool mine) {if(mine==_hasMine) return; _hasMine = mine; emit hasMineChanged();}
+    void setHint(int hint) { if(hint == _hint) return; _hint = hint; emit hintChanged(); }
+    void flip() { if (_flipped) return; _flipped = true; emit flippedChanged(); }
+    void unflip() { if(!_flipped) return; _flipped = false; emit flippedChanged(); }
+
+signals:
+    void flippedChanged();
+    void hasFlagChanged();
+    void hintChanged();
+    void hasMineChanged();
+
+private:
+    bool _hasFlag;
+    bool _hasMine;
+    int _hint;
+    bool _flipped;
+};
+
+QML_DECLARE_TYPE(Tile);
+QML_DEFINE_TYPE(Tile,Tile);
+
+class MyWidget : public QWidget
+{
+Q_OBJECT
+public:
+    MyWidget(int = 370, int = 480, QWidget *parent=0, Qt::WindowFlags flags=0);
+    ~MyWidget();
+
+    Q_PROPERTY(QList<Tile *> *tiles READ tiles);
+    QList<Tile *> *tiles() { return &_tiles; }
+
+    Q_PROPERTY(bool isPlaying READ isPlaying NOTIFY isPlayingChanged);
+    bool isPlaying() {return playing;}
+
+    Q_PROPERTY(bool hasWon READ hasWon NOTIFY hasWonChanged);
+    bool hasWon() {return won;}
+
+    Q_PROPERTY(int numMines READ numMines NOTIFY numMinesChanged);
+    int numMines() const{return nMines;}
+
+    Q_PROPERTY(int numFlags READ numFlags NOTIFY numFlagsChanged);
+    int numFlags() const{return nFlags;}
+
+public slots:
+    Q_INVOKABLE void flip(int row, int col);
+    Q_INVOKABLE void flag(int row, int col);
+    void setBoard();
+    void reset();
+
+signals:
+    void isPlayingChanged();
+    void hasWonChanged();
+    void numMinesChanged();
+    void numFlagsChanged();
+
+private:
+    bool onBoard( int r, int c ) const { return r >= 0 && r < numRows && c >= 0 && c < numCols; }
+    Tile *tile( int row, int col ) { return onBoard(row, col) ? _tiles[col+numRows*row] : 0; }
+    int getHint(int row, int col);
+    void setPlaying(bool b){if(b==playing) return; playing=b; emit isPlayingChanged();}
+
+    QFxView *canvas;
+
+    QList<Tile *> _tiles;
+    int numCols;
+    int numRows;
+    bool playing;
+    bool won;
+    int remaining;
+    int nMines;
+    int nFlags;
+};
+
+MyWidget::MyWidget(int width, int height, QWidget *parent, Qt::WindowFlags flags)
+: QWidget(parent, flags), canvas(0), numCols(9), numRows(9), playing(true), won(false)
+{
+    setObjectName("mainWidget");
+    srand(QTime(0,0,0).secsTo(QTime::currentTime()));
+
+    //initialize array
+    for(int ii = 0; ii < numRows * numCols; ++ii) {
+        _tiles << new Tile;
+    }
+
+    reset();
+
+    QVBoxLayout *vbox = new QVBoxLayout;
+    vbox->setMargin(0);
+    setLayout(vbox);
+
+    canvas = new QFxView(this);
+    canvas->setFixedSize(width, height);
+    vbox->addWidget(canvas);
+
+    QFile file(fileName);
+    file.open(QFile::ReadOnly);
+    QString xml = file.readAll();
+    canvas->setXml(xml, fileName);
+
+    QmlContext *ctxt = canvas->rootContext();
+    ctxt->activate();
+    ctxt->addDefaultObject(this);
+    ctxt->deactivate();
+
+    canvas->execute();
+}
+
+MyWidget::~MyWidget()
+{
+}
+
+void MyWidget::setBoard()
+{
+    foreach(Tile* t, _tiles){
+        t->setHasMine(false);
+        t->setHint(-1);
+    }
+    //place mines
+    int mines = nMines;
+    remaining = numRows*numCols-mines;
+    while ( mines ) {
+        int col = int((double(rand()) / double(RAND_MAX)) * numCols);
+        int row = int((double(rand()) / double(RAND_MAX)) * numRows);
+
+        Tile* t = tile( row, col );
+
+        if (t && !t->hasMine()) {
+            t->setHasMine( true );
+            mines--;
+        }
+    }
+
+    //set hints
+    for (int r = 0; r < numRows; r++)
+        for (int c = 0; c < numCols; c++) {
+            Tile* t = tile(r, c);
+            if (t && !t->hasMine()) {
+                int hint = getHint(r,c);
+                t->setHint(hint);
+            }
+        }
+
+    setPlaying(true);
+}
+
+void MyWidget::reset()
+{
+    foreach(Tile* t, _tiles){
+        t->unflip();
+        t->setHasFlag(false);
+    }
+    nMines = 12;
+    nFlags = 0;
+    setPlaying(false);
+    QTimer::singleShot(900,this, SLOT(setBoard()));
+}
+
+int MyWidget::getHint(int row, int col)
+{
+    int hint = 0;
+    for (int c = col-1; c <= col+1; c++)
+        for (int r = row-1; r <= row+1; r++) {
+            Tile* t = tile(r, c);
+            if (t && t->hasMine())
+                hint++;
+        }
+    return hint;
+}
+
+void MyWidget::flip(int row, int col)
+{
+    if(!playing)
+        return;
+
+    Tile *t = tile(row, col);
+    if (!t || t->hasFlag())
+        return;
+
+    if(t->flipped()){
+        int flags = 0;
+        for (int c = col-1; c <= col+1; c++)
+            for (int r = row-1; r <= row+1; r++) {
+                Tile *nearT = tile(r, c);
+                if(!nearT || nearT == t)
+                    continue;
+                if(nearT->hasFlag())
+                    flags++;
+            }
+        if(!t->hint() || t->hint() != flags)
+            return;
+        for (int c = col-1; c <= col+1; c++)
+            for (int r = row-1; r <= row+1; r++) {
+                Tile *nearT = tile(r, c);
+                if (nearT && !nearT->flipped() && !nearT->hasFlag()) {
+                    flip( r, c );
+                }
+            }
+        return;
+    }
+
+    t->flip();
+
+    if (t->hint() == 0) {
+        for (int c = col-1; c <= col+1; c++)
+            for (int r = row-1; r <= row+1; r++) {
+                Tile* t = tile(r, c);
+                if (t && !t->flipped()) {
+                    flip( r, c );
+                }
+            }
+    }
+
+    if(t->hasMine()){
+        for (int r = 0; r < numRows; r++)//Flip all other mines
+            for (int c = 0; c < numCols; c++) {
+                Tile* t = tile(r, c);
+                if (t && t->hasMine()) {
+                    flip(r, c);
+                }
+            }
+        won = false;
+        hasWonChanged();
+        setPlaying(false);
+    }
+
+    remaining--;
+    if(!remaining){
+        won = true;
+        hasWonChanged();
+        setPlaying(false);
+    }
+}
+
+void MyWidget::flag(int row, int col)
+{
+    Tile *t = tile(row, col);
+    if(!t)
+        return;
+
+    t->setHasFlag(!t->hasFlag());
+    nFlags += (t->hasFlag()?1:-1);
+    emit numFlagsChanged();
+}
+/////////////////////////////////////////////////////////
+
+int main(int argc, char ** argv)
+{
+    QApplication app(argc, argv);
+
+    bool frameless = false;
+
+    int width = 370;
+    int height = 480;
+
+    for (int i = 1; i < argc; ++i) {
+        QString arg = argv[i];
+        if (arg == "-frameless") {
+            frameless = true;
+        } else if(arg == "-width" && i < (argc - 1)) {
+            ++i;
+            width = ::atoi(argv[i]);
+        } else if(arg == "-height" && i < (argc - 1)) {
+            ++i;
+            height = ::atoi(argv[i]);
+        } else if (arg[0] != '-') {
+            fileName = arg;
+        }
+    }
+
+    MyWidget wid(width, height, 0, frameless ? Qt::FramelessWindowHint : Qt::Widget);
+    wid.show();
+
+    return app.exec();
+}
+
+#include "main.moc"
diff --git a/examples/declarative/minehunt/minehunt.pro b/examples/declarative/minehunt/minehunt.pro
new file mode 100644
index 0000000..08b6254
--- /dev/null
+++ b/examples/declarative/minehunt/minehunt.pro
@@ -0,0 +1,8 @@
+SOURCES = main.cpp
+
+QT += script declarative
+
+target.path = $$[QT_INSTALL_EXAMPLES]/declarative/minehunt
+sources.files = $$SOURCES $$HEADERS $$RESOURCES $$FORMS minehunt.pro
+sources.path = $$[QT_INSTALL_EXAMPLES]/declarative/minehunt
+INSTALLS += target sources
diff --git a/examples/declarative/minehunt/minehunt.qml b/examples/declarative/minehunt/minehunt.qml
new file mode 100644
index 0000000..9cde164
--- /dev/null
+++ b/examples/declarative/minehunt/minehunt.qml
@@ -0,0 +1,73 @@
+<Item id="field" width="370" height="480">
+    <properties>
+        <Property name="clickx" type="Int" value="0"/>
+        <Property name="clicky" type="Int" value="0"/>
+    </properties>
+    <resources>
+        <Component id="tile">
+            <Flipable id="flipable" width="40" height="40">
+                <transform>
+                    <Axis id="axis" xStart="20" xEnd="20" yStart="20" yEnd="0" />
+                </transform>
+                <front>
+                    <Image src="pics/cachepix-boxless.sci" width="40" height="40">
+                        <Image anchors.horizontalCenter="{parent.horizontalCenter}"
+                               anchors.verticalCenter="{parent.verticalCenter}"
+                                src="pics/flag.png" opacity="{modelData.hasFlag}">
+                                <opacity>
+                                    <Behaviour>
+                                        <NumericAnimation property="opacity" duration="250"/>
+                                    </Behaviour>
+                                </opacity>
+                        </Image>
+                    </Image>
+                </front>
+                <back>
+                    <Image src="pics/cachepix-black.sci" width="40" height="40">
+                        <Text anchors.horizontalCenter="{parent.horizontalCenter}" anchors.verticalCenter="{parent.verticalCenter}" 
+                              text="{modelData.hint}" color="white" font.bold="true" 
+                              opacity="{modelData.hasMine == false &amp;&amp; modelData.hint > 0}"/>
+                        <Image anchors.horizontalCenter="{parent.horizontalCenter}" anchors.verticalCenter="{parent.verticalCenter}" 
+                                src="pics/bomb.png" opacity="{modelData.hasMine}"/>
+                        <Explosion anchors.horizontalCenter="{parent.horizontalCenter}" anchors.verticalCenter="{parent.verticalCenter}" explode="{modelData.hasMine==true &amp;&amp; modelData.flipped==true}"/>
+                    </Image>
+                </back>
+                <states>
+                    <State name="back" when="{modelData.flipped == true}">
+                        <SetProperty target="{axis}" property="rotation" value="180" />
+                    </State>
+                </states>
+                <transitions>
+                    <Transition>
+                        <SequentialAnimation>
+                            <PauseAnimation duration="{var ret = Math.abs(flipable.parent.x-field.clickx) + Math.abs(flipable.parent.y-field.clicky); if (ret > 0) {if(modelData.hasMine==true &amp;&amp; modelData.flipped==true){ret*3;}else{ret;}} else {0}}"/>
+                            <NumericAnimation easing="easeInOutQuad" properties="rotation"/>
+                        </SequentialAnimation>
+                    </Transition>
+                </transitions>
+                <MouseRegion anchors.fill="{parent}"
+                             onClicked="field.clickx = flipable.parent.x; field.clicky = flipable.parent.y; row = Math.floor(index/9); col = index - (Math.floor(index/9) * 9); if(mouseButton==undefined || mouseButton=='Right'){flag(row,col);}else{flip(row,col);}" />
+            </Flipable>
+        </Component>
+    </resources>
+    <Image src="pics/No-Ones-Laughing-3.jpg" tile="true"/>
+    <Description text="Use the 'minehunt' executable to run this demo!" width="300" opacity="{tiles?0:1}" anchors.horizontalCenter="{parent.horizontalCenter}" anchors.verticalCenter="{parent.verticalCenter}"/>
+    <Repeater dataSource="{tiles}" x="1" y="1">
+        <Component>
+            <ComponentInstance component="{tile}" 
+                           x="{(index - (Math.floor(index/9) * 9)) * 41}"
+                           y="{Math.floor(index/9) * 41}"/>
+        </Component>
+    </Repeater>
+    <Item id="gamedata" width="370" height="100" y="380">
+        <Text color="white" font.size="18" x="20" y="20">In play:</Text>
+        <Image x="100" y="20" src="pics/bomb-color.png"/>
+        <Text x="100" y="60" color="white" text="{numMines}"/>
+        <Image x="140" y="20" src="pics/flag-color.png"/>
+        <Text x="140" y="60" color="white" text="{numFlags}"/>
+
+        <Image x="240" y="0" src="{if(isPlaying==true){'pics/smile.png'}else{if(hasWon==true){'pics/glee.png'}else{'pics/frown.png'}}}">
+            <MouseRegion anchors.fill="{parent}" onClicked="reset()"/>
+        </Image>
+    </Item>
+</Item>
diff --git a/examples/declarative/minehunt/pics/No-Ones-Laughing-3.jpg b/examples/declarative/minehunt/pics/No-Ones-Laughing-3.jpg
new file mode 100644
index 0000000..445567f
--- /dev/null
+++ b/examples/declarative/minehunt/pics/No-Ones-Laughing-3.jpg
diff --git a/examples/declarative/minehunt/pics/bomb-color.png b/examples/declarative/minehunt/pics/bomb-color.png
new file mode 100644
index 0000000..61ad0a9
--- /dev/null
+++ b/examples/declarative/minehunt/pics/bomb-color.png
diff --git a/examples/declarative/minehunt/pics/bomb.png b/examples/declarative/minehunt/pics/bomb.png
new file mode 100644
index 0000000..a992575
--- /dev/null
+++ b/examples/declarative/minehunt/pics/bomb.png
diff --git a/examples/declarative/minehunt/pics/cachepix-black.png b/examples/declarative/minehunt/pics/cachepix-black.png
new file mode 100644
index 0000000..53db3ae
--- /dev/null
+++ b/examples/declarative/minehunt/pics/cachepix-black.png
diff --git a/examples/declarative/minehunt/pics/cachepix-black.sci b/examples/declarative/minehunt/pics/cachepix-black.sci
new file mode 100644
index 0000000..21d5436
--- /dev/null
+++ b/examples/declarative/minehunt/pics/cachepix-black.sci
@@ -0,0 +1,5 @@
+gridLeft: 10
+gridTop: 10
+gridBottom: 10
+gridRight: 10
+imageFile: cachepix-black.png
diff --git a/examples/declarative/minehunt/pics/cachepix-boxless.png b/examples/declarative/minehunt/pics/cachepix-boxless.png
new file mode 100644
index 0000000..288e0e4
--- /dev/null
+++ b/examples/declarative/minehunt/pics/cachepix-boxless.png
diff --git a/examples/declarative/minehunt/pics/cachepix-boxless.sci b/examples/declarative/minehunt/pics/cachepix-boxless.sci
new file mode 100644
index 0000000..d224fd9
--- /dev/null
+++ b/examples/declarative/minehunt/pics/cachepix-boxless.sci
@@ -0,0 +1,5 @@
+gridLeft: 10
+gridTop: 10
+gridBottom: 10
+gridRight: 10
+imageFile: cachepix-boxless.png
diff --git a/examples/declarative/minehunt/pics/flag-color.png b/examples/declarative/minehunt/pics/flag-color.png
new file mode 100644
index 0000000..aadad0f
--- /dev/null
+++ b/examples/declarative/minehunt/pics/flag-color.png
diff --git a/examples/declarative/minehunt/pics/flag.png b/examples/declarative/minehunt/pics/flag.png
new file mode 100644
index 0000000..39cde4d
--- /dev/null
+++ b/examples/declarative/minehunt/pics/flag.png
diff --git a/examples/declarative/minehunt/pics/frown.png b/examples/declarative/minehunt/pics/frown.png
new file mode 100644
index 0000000..52684b3
--- /dev/null
+++ b/examples/declarative/minehunt/pics/frown.png
diff --git a/examples/declarative/minehunt/pics/glee.png b/examples/declarative/minehunt/pics/glee.png
new file mode 100644
index 0000000..59ea583
--- /dev/null
+++ b/examples/declarative/minehunt/pics/glee.png
diff --git a/examples/declarative/minehunt/pics/smile.png b/examples/declarative/minehunt/pics/smile.png
new file mode 100644
index 0000000..ccd52cd
--- /dev/null
+++ b/examples/declarative/minehunt/pics/smile.png
diff --git a/examples/declarative/minehunt/pics/star.png b/examples/declarative/minehunt/pics/star.png
new file mode 100644
index 0000000..3772359
--- /dev/null
+++ b/examples/declarative/minehunt/pics/star.png
diff --git a/examples/declarative/mouseregion/mouse.qml b/examples/declarative/mouseregion/mouse.qml
new file mode 100644
index 0000000..f0f22ac
--- /dev/null
+++ b/examples/declarative/mouseregion/mouse.qml
@@ -0,0 +1,24 @@
+<Rect color="white" width="200" height="200">
+    <Rect width="50" height="50" color="red">
+        <Text text="Click" anchors.centeredIn="{parent}"/>
+        <MouseRegion onPressed="print('press (x: ' + x + ' y: ' + y + ')')"
+                     onReleased="print('release (x: ' + x + ' y: ' + y + ' isClick: ' + isClick + ' followsPressAndHold: ' + followsPressAndHold + ')')"
+                     onClicked="print('click (x: ' + x + ' y: ' + y + ' followsPressAndHold: ' + followsPressAndHold + ')')"
+                     onDoubleClicked="print('double click (x: ' + x + ' y: ' + y + ')')"
+                     onPressAndHold="print('press and hold')"
+                     onExitedWhilePressed="print('exiting while pressed')"
+                     onReenteredWhilePressed="print('reentering while pressed')" anchors.fill="{parent}"/>
+    </Rect>
+    <Rect y="100" width="50" height="50" color="blue">
+        <Text text="Drag" anchors.centeredIn="{parent}"/>
+        <MouseRegion drag.target="{parent}"
+                     drag.axis="x" drag.xmin="0" drag.xmax="150"
+                     onPressed="print('press')"
+                     onReleased="print('release (isClick: ' + isClick + ') (followsPressAndHold: ' + followsPressAndHold + ')')"
+                     onClicked="print('click' + '(followsPressAndHold: ' + followsPressAndHold + ')')"
+                     onDoubleClicked="print('double click')"
+                     onPressAndHold="print('press and hold')"
+                     onExitedWhilePressed="print('exiting while pressed')"
+                     onReenteredWhilePressed="print('reentering while pressed')" anchors.fill="{parent}"/>
+    </Rect>
+</Rect>
diff --git a/examples/declarative/namespaces/BlueStuff/Rect.qml b/examples/declarative/namespaces/BlueStuff/Rect.qml
new file mode 100644
index 0000000..94e066c
--- /dev/null
+++ b/examples/declarative/namespaces/BlueStuff/Rect.qml
@@ -0,0 +1 @@
+<Rect color="blue"/>
diff --git a/examples/declarative/namespaces/Local.qml b/examples/declarative/namespaces/Local.qml
new file mode 100644
index 0000000..5fb2aef
--- /dev/null
+++ b/examples/declarative/namespaces/Local.qml
@@ -0,0 +1 @@
+<Text>This is a local component</Text>
diff --git a/examples/declarative/namespaces/components.qml b/examples/declarative/namespaces/components.qml
new file mode 100644
index 0000000..ea5e2d9
--- /dev/null
+++ b/examples/declarative/namespaces/components.qml
@@ -0,0 +1,17 @@
+<Item id="Root">
+    <properties>
+        <Property name="period" value="1000"/>
+        <Property name="color" value="green"/>
+    </properties>
+
+    <Component id="SpinSquare">
+        <Item>
+            <Rect color="{Root.color}" width="{Root.width}" height="{width}" x="{-width/2}" y="{-height/2}"/>
+            <rotation>
+                <NumericAnimation from="0" to="360" repeat="true" running="true" duration="{Root.period}"/>
+            </rotation>
+        </Item>
+    </Component>
+
+    <ComponentInstance component="{SpinSquare}" x="{Root.width/2}" y="{Root.height/2}"/>
+</Item>
diff --git a/examples/declarative/namespaces/lib/Chronos/Clock.qml b/examples/declarative/namespaces/lib/Chronos/Clock.qml
new file mode 100644
index 0000000..088a45c
--- /dev/null
+++ b/examples/declarative/namespaces/lib/Chronos/Clock.qml
@@ -0,0 +1,15 @@
+<?qtfx namespacepath:http://nokia.com/qml/Chronos=. ?>
+
+<Image id="clock" src="pics/clockface.png" xmlns:This="http://nokia.com/qml/Chronos">
+    <properties>
+        <Property name="hours" value="0"/>
+        <Property name="minutes" value="0"/>
+        <Property name="seconds" value="0"/>
+    </properties>
+    <DateTimeFormatter id="format" time="{clock.time}"/>
+    <Item x="{clock.width/2}" y="{clock.height/2}">
+        <This:Hand id="hour" length="{clock.height/4}" rotation="{clock.hours*30+clock.minutes/2+clock.seconds/120}"/>
+        <This:Hand id="minute" length="{clock.height/3}" thickness="3" rotation="{clock.minutes*6+clock.seconds/10}"/>
+        <This:Hand id="second" length="{clock.height/2.5}" thickness="1" rotation="{clock.seconds*6}"/>
+    </Item>
+</Image>
diff --git a/examples/declarative/namespaces/lib/Chronos/Hand.qml b/examples/declarative/namespaces/lib/Chronos/Hand.qml
new file mode 100644
index 0000000..3662e74
--- /dev/null
+++ b/examples/declarative/namespaces/lib/Chronos/Hand.qml
@@ -0,0 +1,9 @@
+<Item id="Hand">
+    <properties>
+        <Property name="length" value="100"/>
+        <Property name="thickness" value="0"/>
+    </properties>
+    <Item rotation="-90">
+        <Rect width="{length}" height="{thickness==0 ? length/8 : thickness}" y="{-height/2}"/>
+    </Item>
+</Item>
diff --git a/examples/declarative/namespaces/lib/Chronos/pics/clockface.png b/examples/declarative/namespaces/lib/Chronos/pics/clockface.png
new file mode 100644
index 0000000..a885950
--- /dev/null
+++ b/examples/declarative/namespaces/lib/Chronos/pics/clockface.png
diff --git a/examples/declarative/namespaces/lib/Path/PathLabel.qml b/examples/declarative/namespaces/lib/Path/PathLabel.qml
new file mode 100644
index 0000000..c4b08b0
--- /dev/null
+++ b/examples/declarative/namespaces/lib/Path/PathLabel.qml
@@ -0,0 +1 @@
+<Text color="green"/>
diff --git a/examples/declarative/namespaces/lib/RedStuff/Rect.qml b/examples/declarative/namespaces/lib/RedStuff/Rect.qml
new file mode 100644
index 0000000..3429b09
--- /dev/null
+++ b/examples/declarative/namespaces/lib/RedStuff/Rect.qml
@@ -0,0 +1 @@
+<Rect color="red"/>
diff --git a/examples/declarative/namespaces/lib/Wrong/Wrong.qml b/examples/declarative/namespaces/lib/Wrong/Wrong.qml
new file mode 100644
index 0000000..3af55f6
--- /dev/null
+++ b/examples/declarative/namespaces/lib/Wrong/Wrong.qml
@@ -0,0 +1,3 @@
+<Rect>
+    <Local/> <!-- not allowed - not in this component! -->
+</Rect>
diff --git a/examples/declarative/namespaces/library.qml b/examples/declarative/namespaces/library.qml
new file mode 100644
index 0000000..ae10ed8
--- /dev/null
+++ b/examples/declarative/namespaces/library.qml
@@ -0,0 +1,12 @@
+<?qtfx namespacepath:http://nokia.com/qml=lib ?>
+
+<Rect id="obj" width="200" height="200" xmlns:Chronos="http://nokia.com/qml/Chronos">
+ <properties>
+     <Property name="time_sec"/>
+ </properties>
+ <time_sec> <!-- simple animation, not bound to the real time -->
+    <NumericAnimation from="0" to="43200" duration="43200000" running="true" repeat="true"/>
+ </time_sec>
+ <Chronos:Clock x="10" y="10" width="{parent.width-20}" height="{parent.height-20}"
+    hours="{Math.floor(time_sec/3600)}" minutes="{Math.floor(time_sec/60)%60}" seconds="{time_sec%60}"/>
+</Rect>
diff --git a/examples/declarative/namespaces/path.qml b/examples/declarative/namespaces/path.qml
new file mode 100644
index 0000000..795447b
--- /dev/null
+++ b/examples/declarative/namespaces/path.qml
@@ -0,0 +1,18 @@
+<!-- Empty Namespaces paths allow unqualified Types to be found
+     in other locations. For file URLs, multiple paths can be
+     given, forming a file search path. -->
+
+<?qtfx namespacepath:=lib/Chronos ?> <!-- Clock will be found here -->
+<?qtfx namespacepath:=lib/Path ?> <!-- PathLabel will be found here -->
+
+<Rect id="obj" width="200" height="200">
+ <properties>
+     <Property name="time_sec"/>
+ </properties>
+ <time_sec> <!-- simple animation, not bound to the real time -->
+    <NumericAnimation from="0" to="43200" duration="43200000" running="true" repeat="true"/>
+ </time_sec>
+ <Clock x="10" y="10" width="{parent.width-20}" height="{parent.height-20}"
+    hours="{Math.floor(time_sec/3600)}" minutes="{Math.floor(time_sec/60)%60}" seconds="{time_sec%60}"/>
+ <PathLabel text="This is a clock"/>
+</Rect>
diff --git a/examples/declarative/namespaces/simple.qml b/examples/declarative/namespaces/simple.qml
new file mode 100644
index 0000000..16d9815
--- /dev/null
+++ b/examples/declarative/namespaces/simple.qml
@@ -0,0 +1,5 @@
+<?qtfx namespacepath:http://nokia.com/qml=lib ?>
+<Rect id="obj" width="100" height="100" xmlns:bs="BlueStuff" xmlns:rs="http://nokia.com/qml/RedStuff">
+ <bs:Rect x="20" y="20" width="50" height="50"/>
+ <rs:Rect x="30" y="30" width="50" height="50"/>
+</Rect>
diff --git a/examples/declarative/namespaces/wrong1.qml b/examples/declarative/namespaces/wrong1.qml
new file mode 100644
index 0000000..721c45a
--- /dev/null
+++ b/examples/declarative/namespaces/wrong1.qml
@@ -0,0 +1,4 @@
+<?qtfx namespacepath:http://nokia.com/qml=lib ?>
+<Rect id="obj" width="100" height="100" xmlns:w="http://nokia.com/qml/Wrong" color="white">
+ <w:Wrong/>
+</Rect>
diff --git a/examples/declarative/scrollbar/ScrollBar.qml b/examples/declarative/scrollbar/ScrollBar.qml
new file mode 100644
index 0000000..470a170
--- /dev/null
+++ b/examples/declarative/scrollbar/ScrollBar.qml
@@ -0,0 +1,26 @@
+<Item id="ScrollBar">
+    <!--
+    The properties that define the scrollbar's state.
+    position and pageSize are in the range 0.0 - 1.0.  They are relative to the
+    height of the page, i.e. a pageSize of 0.5 means that you can see 50%
+    of the height of the view.
+    orientation can be either 'Vertical' or 'Horizontal'
+    -->
+    <properties>
+        <Property name="position"/>
+        <Property name="pageSize"/>
+        <Property name="orientation" value="Vertical"/>
+    </properties>
+
+    <!-- A light, semi-transparent background -->
+    <Rect id="Background" radius="{orientation == 'Vertical' ? (width/2) : (height/2)}" color="white" opacity="0.3" anchors.fill="{parent}"/>
+
+    <!-- Size the bar to the required size, depending upon the orientation.  -->
+    <Rect opacity="0.6" color="black"
+          radius="{orientation == 'Vertical' ? (width/2) : (height/2)}"
+          x="{orientation == 'Vertical' ? 2 : (ScrollBar.position * (ScrollBar.width-4) + 2)}"
+          y="{orientation == 'Vertical' ? (ScrollBar.position * (ScrollBar.height-4) + 2) : 2}"
+          width="{orientation == 'Vertical' ? (parent.width-4) : (ScrollBar.pageSize * (ScrollBar.width-4))}"
+          height="{orientation == 'Vertical' ? (ScrollBar.pageSize * (ScrollBar.height-4)) : (parent.height-4)}"
+          />
+</Item>
diff --git a/examples/declarative/scrollbar/display.qml b/examples/declarative/scrollbar/display.qml
new file mode 100644
index 0000000..697b68a
--- /dev/null
+++ b/examples/declarative/scrollbar/display.qml
@@ -0,0 +1,28 @@
+<Rect width="640" height="480">
+
+    <!-- Create a flickable to view a large image.  -->
+    <Flickable id="View" anchors.fill="{parent}">
+        <Image id="Picture" src="pics/niagara_falls.jpg"/>
+        <viewportWidth>{Picture.width}</viewportWidth>
+        <viewportHeight>{Picture.height}</viewportHeight>
+
+        <!-- Only show the scrollbars when the view is moving.  -->
+        <states>
+            <State name="ShowBars" when="{View.moving}">
+                <SetProperty target="{SBV}" property="opacity" value="1" />
+                <SetProperty target="{SBH}" property="opacity" value="1" />
+            </State>
+        </states>
+        <transitions>
+            <Transition fromState="*" toState="*">
+                <NumericAnimation properties="opacity" duration="400"/>
+            </Transition>
+        </transitions>
+
+    </Flickable>
+
+    <!-- Attach scrollbars to the right and bottom edges of the view.  -->
+    <ScrollBar id="SBV" opacity="0" orientation="Vertical" position="{View.pageYPosition}" pageSize="{View.pageHeight}" width="12" height="{View.height-12}" anchors.right="{View.right}"/>
+    <ScrollBar id="SBH" opacity="0" orientation="Horizontal" position="{View.pageXPosition}" pageSize="{View.pageWidth}" height="12" width="{View.width-12}" anchors.bottom="{View.bottom}"/>
+
+</Rect>
diff --git a/examples/declarative/scrollbar/pics/niagara_falls.jpg b/examples/declarative/scrollbar/pics/niagara_falls.jpg
new file mode 100644
index 0000000..618d808
--- /dev/null
+++ b/examples/declarative/scrollbar/pics/niagara_falls.jpg
diff --git a/examples/declarative/slideswitch/Switch.qml b/examples/declarative/slideswitch/Switch.qml
new file mode 100644
index 0000000..90e6e64
--- /dev/null
+++ b/examples/declarative/slideswitch/Switch.qml
@@ -0,0 +1,52 @@
+<Item id="Switch" width="{Groove.width}" height="{Groove.height}">
+    <properties><Property name="on"/></properties>
+    <Script>
+        function toggle() {
+            if(Switch.state == "On")
+                Switch.state = "Off";
+            else
+                Switch.state = "On";
+        }
+        function dorelease() {
+            print(Knob.x);
+            if(Knob.x == 1) {
+                if(Switch.state == "Off") 
+                    return;
+            }
+
+            if(Knob.x == 78) {
+                if(Switch.state == "On") 
+                    return;
+            }
+
+            toggle();
+        }
+    </Script>
+    <Image id="Groove" src="background.svg"/>
+    <MouseRegion anchors.fill="{Groove}" onClicked="toggle()"/>
+    <Image id="Knob" src="knob.svg" x="1" y="2"/>
+    <MouseRegion anchors.fill="{Knob}"
+                 onClicked="toggle()"
+                 onReleased="if (!isClick) dorelease()"
+                 drag.target="{Knob}"
+                 drag.axis="x"
+                 drag.xmin="1"
+                 drag.xmax="78"/>
+
+    <states>
+        <State name="On">
+            <SetProperty target="{Knob}" property="x" value="78" />
+            <SetProperty target="{Switch}" property="on" value="true" />
+        </State>
+        <State name="Off">
+            <SetProperty target="{Knob}" property="x" value="1" />
+            <SetProperty target="{Switch}" property="on" value="false" />
+        </State>
+    </states>
+
+    <transitions>
+        <Transition>
+            <NumericAnimation properties="x" easing="easeInOutQuad" duration="200"/>
+        </Transition>
+    </transitions>
+</Item>
diff --git a/examples/declarative/slideswitch/background.svg b/examples/declarative/slideswitch/background.svg
new file mode 100644
index 0000000..f920d3e
--- /dev/null
+++ b/examples/declarative/slideswitch/background.svg
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 13.0.2, SVG Export Plug-In  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
+	<!ENTITY ns_flows "http://ns.adobe.com/Flows/1.0/">
+]>
+<svg version="1.1"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
+	 x="0px" y="0px" width="130px" height="56px" viewBox="0 0 130 56" enable-background="new 0 0 130 56" xml:space="preserve">
+<defs>
+</defs>
+<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="-37.5005" y1="-66" x2="-37.5005" y2="-121.9985" gradientTransform="matrix(1 0 0 -1 102.5 -66)">
+	<stop  offset="0.0056" style="stop-color:#000000"/>
+	<stop  offset="1" style="stop-color:#EAECEF"/>
+</linearGradient>
+<path fill="url(#SVGID_1_)" d="M101.998,55.998H28c-15.439,0-28-12.562-28-28C0,12.56,12.561,0,28,0h73.998
+	c15.439,0,28,12.559,28,27.998C129.998,43.438,117.438,55.998,101.998,55.998L101.998,55.998z"/>
+<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="-5.5" y1="-132.1338" x2="-69.5002" y2="-55.8613" gradientTransform="matrix(1 0 0 -1 102.5 -66)">
+	<stop  offset="0.0056" style="stop-color:#000000"/>
+	<stop  offset="1" style="stop-color:#828385"/>
+</linearGradient>
+<path fill="url(#SVGID_2_)" d="M127.999,27.998c0,14.359-11.642,26-26,26h-74c-14.359,0-26-11.641-26-26l0,0
+	c0-14.359,11.641-26,26-26h74C116.357,1.998,127.999,13.639,127.999,27.998L127.999,27.998z"/>
+</svg>
diff --git a/examples/declarative/slideswitch/display.qml b/examples/declarative/slideswitch/display.qml
new file mode 100644
index 0000000..b62422c
--- /dev/null
+++ b/examples/declarative/slideswitch/display.qml
@@ -0,0 +1,3 @@
+<Rect color="white" width="150" height="150">
+    <Switch anchors.centeredIn="{parent}"/>
+</Rect>
diff --git a/examples/declarative/slideswitch/knob.svg b/examples/declarative/slideswitch/knob.svg
new file mode 100644
index 0000000..fb69337
--- /dev/null
+++ b/examples/declarative/slideswitch/knob.svg
@@ -0,0 +1,867 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 13.0.2, SVG Export Plug-In  -->
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://web.resource.org/cc/"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   x="0px"
+   y="0px"
+   width="52px"
+   height="52px"
+   viewBox="0 0 52 52"
+   enable-background="new 0 0 52 52"
+   xml:space="preserve"
+   id="svg3883"
+   sodipodi:version="0.32"
+   inkscape:version="0.44.1"
+   sodipodi:docname="knob_on.svg"
+   sodipodi:docbase="/local/axel/embeddedwidgets/embeddedstories/skins/svgslideswitch/MetallicBrush"><metadata
+   id="metadata4200"><rdf:RDF><cc:Work
+       rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+         rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><sodipodi:namedview
+   inkscape:window-height="640"
+   inkscape:window-width="937"
+   inkscape:pageshadow="2"
+   inkscape:pageopacity="0.0"
+   guidetolerance="10.0"
+   gridtolerance="10.0"
+   objecttolerance="10.0"
+   borderopacity="1.0"
+   bordercolor="#666666"
+   pagecolor="#ffffff"
+   id="base"
+   inkscape:zoom="8.3653846"
+   inkscape:cx="26.000002"
+   inkscape:cy="26"
+   inkscape:window-x="0"
+   inkscape:window-y="0"
+   inkscape:current-layer="svg3883" />
+<defs
+   id="defs3885">
+</defs>
+<linearGradient
+   id="SVGID_1_"
+   gradientUnits="userSpaceOnUse"
+   x1="-59.7866"
+   y1="-115.917"
+   x2="-93.2123"
+   y2="-76.0818"
+   gradientTransform="matrix(1,0,0,-1,102.5,-70)">
+	<stop
+   offset="0.0056"
+   style="stop-color:#000000"
+   id="stop3888" />
+	<stop
+   offset="1"
+   style="stop-color:#EAECEF"
+   id="stop3890" />
+</linearGradient>
+<circle
+   cx="26"
+   cy="26"
+   r="26"
+   id="circle3892"
+   style="fill:url(#SVGID_1_)"
+   sodipodi:cx="26"
+   sodipodi:cy="26"
+   sodipodi:rx="26"
+   sodipodi:ry="26"
+   transform="matrix(0.923077,0,0,0.923077,2,1.999996)" />
+<linearGradient
+   id="SVGID_2_"
+   gradientUnits="userSpaceOnUse"
+   x1="-100.5"
+   y1="-96"
+   x2="-52.5"
+   y2="-96"
+   gradientTransform="matrix(1,0,0,-1,102.5,-70)">
+	<stop
+   offset="0.0056"
+   style="stop-color:#8AADCE"
+   id="stop3895" />
+	<stop
+   offset="0.5"
+   style="stop-color:#EAECEF"
+   id="stop3897" />
+	<stop
+   offset="0.6043"
+   style="stop-color:#E7EAED"
+   id="stop3899" />
+	<stop
+   offset="0.6751"
+   style="stop-color:#DEE4E7"
+   id="stop3901" />
+	<stop
+   offset="0.7358"
+   style="stop-color:#CFD9DD"
+   id="stop3903" />
+	<stop
+   offset="0.791"
+   style="stop-color:#B9CACF"
+   id="stop3905" />
+	<stop
+   offset="0.8425"
+   style="stop-color:#9EB6BD"
+   id="stop3907" />
+	<stop
+   offset="0.891"
+   style="stop-color:#7B9EA7"
+   id="stop3909" />
+	<stop
+   offset="0.9374"
+   style="stop-color:#53828C"
+   id="stop3911" />
+	<stop
+   offset="0.9809"
+   style="stop-color:#25626E"
+   id="stop3913" />
+	<stop
+   offset="1"
+   style="stop-color:#0E525F"
+   id="stop3915" />
+</linearGradient>
+<circle
+   cx="26"
+   cy="26"
+   r="24"
+   id="circle3917"
+   style="fill:url(#SVGID_2_)"
+   sodipodi:cx="26"
+   sodipodi:cy="26"
+   sodipodi:rx="24"
+   sodipodi:ry="24"
+   transform="matrix(0.923077,0,0,0.923077,2,1.999996)" />
+<linearGradient
+   id="SVGID_3_"
+   gradientUnits="userSpaceOnUse"
+   x1="-98.6328"
+   y1="-96"
+   x2="-54.3672"
+   y2="-96"
+   gradientTransform="matrix(1,0,0,-1,102.5,-70)">
+	<stop
+   offset="0.0056"
+   style="stop-color:#8AADCE"
+   id="stop3920" />
+	<stop
+   offset="0.073"
+   style="stop-color:#8FAECB"
+   id="stop3922" />
+	<stop
+   offset="0.5"
+   style="stop-color:#EAECEF"
+   id="stop3924" />
+	<stop
+   offset="0.5902"
+   style="stop-color:#E7E9ED"
+   id="stop3926" />
+	<stop
+   offset="0.618"
+   style="stop-color:#E4E7EB"
+   id="stop3928" />
+	<stop
+   offset="0.6697"
+   style="stop-color:#E0E4E9"
+   id="stop3930" />
+	<stop
+   offset="0.7211"
+   style="stop-color:#D4DCE1"
+   id="stop3932" />
+	<stop
+   offset="0.7722"
+   style="stop-color:#C0CFD5"
+   id="stop3934" />
+	<stop
+   offset="0.809"
+   style="stop-color:#ADC2C9"
+   id="stop3936" />
+	<stop
+   offset="1"
+   style="stop-color:#0E525F"
+   id="stop3938" />
+</linearGradient>
+<circle
+   cx="26"
+   cy="26"
+   r="22.132999"
+   id="circle3940"
+   style="fill:url(#SVGID_3_)"
+   sodipodi:cx="26"
+   sodipodi:cy="26"
+   sodipodi:rx="22.132999"
+   sodipodi:ry="22.132999"
+   transform="matrix(0.923077,0,0,0.923077,2,1.999996)" />
+<linearGradient
+   id="SVGID_4_"
+   gradientUnits="userSpaceOnUse"
+   x1="-96.7671"
+   y1="-96"
+   x2="-56.2324"
+   y2="-96"
+   gradientTransform="matrix(1,0,0,-1,102.5,-70)">
+	<stop
+   offset="0.0056"
+   style="stop-color:#8AADCE"
+   id="stop3943" />
+	<stop
+   offset="0.073"
+   style="stop-color:#86A7C4"
+   id="stop3945" />
+	<stop
+   offset="0.5"
+   style="stop-color:#EAECEF"
+   id="stop3947" />
+	<stop
+   offset="0.577"
+   style="stop-color:#E7EAED"
+   id="stop3949" />
+	<stop
+   offset="0.618"
+   style="stop-color:#E1E6EA"
+   id="stop3951" />
+	<stop
+   offset="0.6697"
+   style="stop-color:#DDE3E8"
+   id="stop3953" />
+	<stop
+   offset="0.7211"
+   style="stop-color:#D1DBE1"
+   id="stop3955" />
+	<stop
+   offset="0.7722"
+   style="stop-color:#BDCDD5"
+   id="stop3957" />
+	<stop
+   offset="0.809"
+   style="stop-color:#AAC0CA"
+   id="stop3959" />
+	<stop
+   offset="1"
+   style="stop-color:#0E525F"
+   id="stop3961" />
+</linearGradient>
+<circle
+   cx="26"
+   cy="26"
+   r="20.267"
+   id="circle3963"
+   style="fill:url(#SVGID_4_)"
+   sodipodi:cx="26"
+   sodipodi:cy="26"
+   sodipodi:rx="20.267"
+   sodipodi:ry="20.267"
+   transform="matrix(0.923077,0,0,0.923077,2,1.999996)" />
+<linearGradient
+   id="SVGID_5_"
+   gradientUnits="userSpaceOnUse"
+   x1="-94.8999"
+   y1="-96"
+   x2="-58.0996"
+   y2="-96"
+   gradientTransform="matrix(1,0,0,-1,102.5,-70)">
+	<stop
+   offset="0.0056"
+   style="stop-color:#8AADCE"
+   id="stop3966" />
+	<stop
+   offset="0.073"
+   style="stop-color:#7E9FBC"
+   id="stop3968" />
+	<stop
+   offset="0.5"
+   style="stop-color:#EAECEF"
+   id="stop3970" />
+	<stop
+   offset="0.5709"
+   style="stop-color:#E6E9ED"
+   id="stop3972" />
+	<stop
+   offset="0.618"
+   style="stop-color:#DFE4E9"
+   id="stop3974" />
+	<stop
+   offset="0.6687"
+   style="stop-color:#DBE1E7"
+   id="stop3976" />
+	<stop
+   offset="0.7193"
+   style="stop-color:#CFD9E0"
+   id="stop3978" />
+	<stop
+   offset="0.7695"
+   style="stop-color:#BBCCD6"
+   id="stop3980" />
+	<stop
+   offset="0.809"
+   style="stop-color:#A6BECA"
+   id="stop3982" />
+	<stop
+   offset="1"
+   style="stop-color:#0E525F"
+   id="stop3984" />
+</linearGradient>
+<circle
+   cx="26"
+   cy="26"
+   r="18.4"
+   id="circle3986"
+   style="fill:url(#SVGID_5_)"
+   sodipodi:cx="26"
+   sodipodi:cy="26"
+   sodipodi:rx="18.4"
+   sodipodi:ry="18.4"
+   transform="matrix(0.923077,0,0,0.923077,2,1.999996)" />
+<linearGradient
+   id="SVGID_6_"
+   gradientUnits="userSpaceOnUse"
+   x1="-93.0332"
+   y1="-96"
+   x2="-59.9668"
+   y2="-96"
+   gradientTransform="matrix(1,0,0,-1,102.5,-70)">
+	<stop
+   offset="0.0056"
+   style="stop-color:#8AADCE"
+   id="stop3989" />
+	<stop
+   offset="0.073"
+   style="stop-color:#7697B4"
+   id="stop3991" />
+	<stop
+   offset="0.5"
+   style="stop-color:#EAECEF"
+   id="stop3993" />
+	<stop
+   offset="0.5636"
+   style="stop-color:#E6E9ED"
+   id="stop3995" />
+	<stop
+   offset="0.618"
+   style="stop-color:#DCE2E8"
+   id="stop3997" />
+	<stop
+   offset="0.6687"
+   style="stop-color:#D8DFE6"
+   id="stop3999" />
+	<stop
+   offset="0.7193"
+   style="stop-color:#CCD7E0"
+   id="stop4001" />
+	<stop
+   offset="0.7695"
+   style="stop-color:#B8CAD5"
+   id="stop4003" />
+	<stop
+   offset="0.809"
+   style="stop-color:#A3BCCA"
+   id="stop4005" />
+	<stop
+   offset="1"
+   style="stop-color:#0E525F"
+   id="stop4007" />
+</linearGradient>
+<circle
+   cx="26"
+   cy="26"
+   r="16.533001"
+   id="circle4009"
+   style="fill:url(#SVGID_6_)"
+   sodipodi:cx="26"
+   sodipodi:cy="26"
+   sodipodi:rx="16.533001"
+   sodipodi:ry="16.533001"
+   transform="matrix(0.923077,0,0,0.923077,2,1.999996)" />
+<linearGradient
+   id="SVGID_7_"
+   gradientUnits="userSpaceOnUse"
+   x1="-91.167"
+   y1="-96"
+   x2="-61.833"
+   y2="-96"
+   gradientTransform="matrix(1,0,0,-1,102.5,-70)">
+	<stop
+   offset="0.0056"
+   style="stop-color:#8AADCE"
+   id="stop4012" />
+	<stop
+   offset="0.073"
+   style="stop-color:#6D8FAD"
+   id="stop4014" />
+	<stop
+   offset="0.5"
+   style="stop-color:#EAECEF"
+   id="stop4016" />
+	<stop
+   offset="0.5605"
+   style="stop-color:#E5E8EC"
+   id="stop4018" />
+	<stop
+   offset="0.618"
+   style="stop-color:#DAE1E7"
+   id="stop4020" />
+	<stop
+   offset="0.6679"
+   style="stop-color:#D6DEE5"
+   id="stop4022" />
+	<stop
+   offset="0.7175"
+   style="stop-color:#CAD6DF"
+   id="stop4024" />
+	<stop
+   offset="0.7669"
+   style="stop-color:#B6C9D6"
+   id="stop4026" />
+	<stop
+   offset="0.809"
+   style="stop-color:#9FBACB"
+   id="stop4028" />
+	<stop
+   offset="1"
+   style="stop-color:#0E525F"
+   id="stop4030" />
+</linearGradient>
+<circle
+   cx="26"
+   cy="26"
+   r="14.667"
+   id="circle4032"
+   style="fill:url(#SVGID_7_)"
+   sodipodi:cx="26"
+   sodipodi:cy="26"
+   sodipodi:rx="14.667"
+   sodipodi:ry="14.667"
+   transform="matrix(0.923077,0,0,0.923077,2,1.999996)" />
+<linearGradient
+   id="SVGID_8_"
+   gradientUnits="userSpaceOnUse"
+   x1="-89.2998"
+   y1="-96"
+   x2="-63.7002"
+   y2="-96"
+   gradientTransform="matrix(1,0,0,-1,102.5,-70)">
+	<stop
+   offset="0.0056"
+   style="stop-color:#8AADCE"
+   id="stop4035" />
+	<stop
+   offset="0.073"
+   style="stop-color:#6587A5"
+   id="stop4037" />
+	<stop
+   offset="0.5"
+   style="stop-color:#EAECEF"
+   id="stop4039" />
+	<stop
+   offset="0.5588"
+   style="stop-color:#E4E8EC"
+   id="stop4041" />
+	<stop
+   offset="0.618"
+   style="stop-color:#D8DFE7"
+   id="stop4043" />
+	<stop
+   offset="0.6675"
+   style="stop-color:#D4DCE5"
+   id="stop4045" />
+	<stop
+   offset="0.7167"
+   style="stop-color:#C8D5E0"
+   id="stop4047" />
+	<stop
+   offset="0.7657"
+   style="stop-color:#B4C8D6"
+   id="stop4049" />
+	<stop
+   offset="0.809"
+   style="stop-color:#9CB8CB"
+   id="stop4051" />
+	<stop
+   offset="1"
+   style="stop-color:#0E525F"
+   id="stop4053" />
+</linearGradient>
+<circle
+   cx="26"
+   cy="26"
+   r="12.8"
+   id="circle4055"
+   style="fill:url(#SVGID_8_)"
+   sodipodi:cx="26"
+   sodipodi:cy="26"
+   sodipodi:rx="12.8"
+   sodipodi:ry="12.8"
+   transform="matrix(0.923077,0,0,0.923077,2,1.999996)" />
+<linearGradient
+   id="SVGID_9_"
+   gradientUnits="userSpaceOnUse"
+   x1="-87.4331"
+   y1="-96"
+   x2="-65.5664"
+   y2="-96"
+   gradientTransform="matrix(1,0,0,-1,102.5,-70)">
+	<stop
+   offset="0.0056"
+   style="stop-color:#8AADCE"
+   id="stop4058" />
+	<stop
+   offset="0.073"
+   style="stop-color:#5D809D"
+   id="stop4060" />
+	<stop
+   offset="0.5"
+   style="stop-color:#EAECEF"
+   id="stop4062" />
+	<stop
+   offset="0.5567"
+   style="stop-color:#E3E7EC"
+   id="stop4064" />
+	<stop
+   offset="0.618"
+   style="stop-color:#D5DDE6"
+   id="stop4066" />
+	<stop
+   offset="0.6671"
+   style="stop-color:#D1DAE4"
+   id="stop4068" />
+	<stop
+   offset="0.7159"
+   style="stop-color:#C5D3DF"
+   id="stop4070" />
+	<stop
+   offset="0.7645"
+   style="stop-color:#B1C6D6"
+   id="stop4072" />
+	<stop
+   offset="0.809"
+   style="stop-color:#98B5CB"
+   id="stop4074" />
+	<stop
+   offset="1"
+   style="stop-color:#0E525F"
+   id="stop4076" />
+</linearGradient>
+<circle
+   cx="26"
+   cy="26"
+   r="10.933"
+   id="circle4078"
+   style="fill:url(#SVGID_9_)"
+   sodipodi:cx="26"
+   sodipodi:cy="26"
+   sodipodi:rx="10.933"
+   sodipodi:ry="10.933"
+   transform="matrix(0.923077,0,0,0.923077,2,1.999996)" />
+<linearGradient
+   id="SVGID_10_"
+   gradientUnits="userSpaceOnUse"
+   x1="-85.5659"
+   y1="-96"
+   x2="-67.4336"
+   y2="-96"
+   gradientTransform="matrix(1,0,0,-1,102.5,-70)">
+	<stop
+   offset="0.0056"
+   style="stop-color:#8AADCE"
+   id="stop4081" />
+	<stop
+   offset="0.073"
+   style="stop-color:#547896"
+   id="stop4083" />
+	<stop
+   offset="0.5"
+   style="stop-color:#EAECEF"
+   id="stop4085" />
+	<stop
+   offset="0.5588"
+   style="stop-color:#E1E6EB"
+   id="stop4087" />
+	<stop
+   offset="0.618"
+   style="stop-color:#D3DCE5"
+   id="stop4089" />
+	<stop
+   offset="0.6663"
+   style="stop-color:#CFD9E3"
+   id="stop4091" />
+	<stop
+   offset="0.7143"
+   style="stop-color:#C3D2DF"
+   id="stop4093" />
+	<stop
+   offset="0.7621"
+   style="stop-color:#AFC5D7"
+   id="stop4095" />
+	<stop
+   offset="0.809"
+   style="stop-color:#94B3CC"
+   id="stop4097" />
+	<stop
+   offset="1"
+   style="stop-color:#0E525F"
+   id="stop4099" />
+</linearGradient>
+<circle
+   cx="26"
+   cy="26"
+   r="9.066"
+   id="circle4101"
+   style="fill:url(#SVGID_10_)"
+   sodipodi:cx="26"
+   sodipodi:cy="26"
+   sodipodi:rx="9.066"
+   sodipodi:ry="9.066"
+   transform="matrix(0.923077,0,0,0.923077,2,1.999996)" />
+<linearGradient
+   id="SVGID_11_"
+   gradientUnits="userSpaceOnUse"
+   x1="-83.7002"
+   y1="-96"
+   x2="-69.2998"
+   y2="-96"
+   gradientTransform="matrix(1,0,0,-1,102.5,-70)">
+	<stop
+   offset="0.0056"
+   style="stop-color:#8AADCE"
+   id="stop4104" />
+	<stop
+   offset="0.073"
+   style="stop-color:#4C708E"
+   id="stop4106" />
+	<stop
+   offset="0.5"
+   style="stop-color:#EAECEF"
+   id="stop4108" />
+	<stop
+   offset="0.5625"
+   style="stop-color:#DEE4EA"
+   id="stop4110" />
+	<stop
+   offset="0.618"
+   style="stop-color:#D0DAE4"
+   id="stop4112" />
+	<stop
+   offset="0.6663"
+   style="stop-color:#CCD7E2"
+   id="stop4114" />
+	<stop
+   offset="0.7143"
+   style="stop-color:#C0D0DE"
+   id="stop4116" />
+	<stop
+   offset="0.7621"
+   style="stop-color:#ACC3D6"
+   id="stop4118" />
+	<stop
+   offset="0.809"
+   style="stop-color:#91B1CC"
+   id="stop4120" />
+	<stop
+   offset="1"
+   style="stop-color:#0E525F"
+   id="stop4122" />
+</linearGradient>
+<circle
+   cx="26"
+   cy="26"
+   r="7.1999998"
+   id="circle4124"
+   style="fill:url(#SVGID_11_)"
+   sodipodi:cx="26"
+   sodipodi:cy="26"
+   sodipodi:rx="7.1999998"
+   sodipodi:ry="7.1999998"
+   transform="matrix(0.923077,0,0,0.923077,2,1.999996)" />
+<linearGradient
+   id="SVGID_12_"
+   gradientUnits="userSpaceOnUse"
+   x1="-81.833"
+   y1="-96"
+   x2="-71.167"
+   y2="-96"
+   gradientTransform="matrix(1,0,0,-1,102.5,-70)">
+	<stop
+   offset="0.0056"
+   style="stop-color:#8AADCE"
+   id="stop4127" />
+	<stop
+   offset="0.073"
+   style="stop-color:#446986"
+   id="stop4129" />
+	<stop
+   offset="0.5"
+   style="stop-color:#EAECEF"
+   id="stop4131" />
+	<stop
+   offset="0.5757"
+   style="stop-color:#D9E0E8"
+   id="stop4133" />
+	<stop
+   offset="0.618"
+   style="stop-color:#CED8E3"
+   id="stop4135" />
+	<stop
+   offset="0.6655"
+   style="stop-color:#CAD5E2"
+   id="stop4137" />
+	<stop
+   offset="0.7129"
+   style="stop-color:#BECEDD"
+   id="stop4139" />
+	<stop
+   offset="0.7601"
+   style="stop-color:#AAC1D6"
+   id="stop4141" />
+	<stop
+   offset="0.807"
+   style="stop-color:#8EB0CC"
+   id="stop4143" />
+	<stop
+   offset="0.809"
+   style="stop-color:#8DAFCC"
+   id="stop4145" />
+	<stop
+   offset="1"
+   style="stop-color:#0E525F"
+   id="stop4147" />
+</linearGradient>
+<circle
+   cx="26"
+   cy="26"
+   r="5.3330002"
+   id="circle4149"
+   style="fill:url(#SVGID_12_)"
+   sodipodi:cx="26"
+   sodipodi:cy="26"
+   sodipodi:rx="5.3330002"
+   sodipodi:ry="5.3330002"
+   transform="matrix(0.923077,0,0,0.923077,2,1.999996)" />
+<linearGradient
+   id="SVGID_13_"
+   gradientUnits="userSpaceOnUse"
+   x1="-79.9658"
+   y1="-96"
+   x2="-73.0342"
+   y2="-96"
+   gradientTransform="matrix(1,0,0,-1,102.5,-70)">
+	<stop
+   offset="0.0056"
+   style="stop-color:#8AADCE"
+   id="stop4152" />
+	<stop
+   offset="0.073"
+   style="stop-color:#3B617F"
+   id="stop4154" />
+	<stop
+   offset="0.5"
+   style="stop-color:#EAECEF"
+   id="stop4156" />
+	<stop
+   offset="0.6087"
+   style="stop-color:#CED9E3"
+   id="stop4158" />
+	<stop
+   offset="0.618"
+   style="stop-color:#CBD7E2"
+   id="stop4160" />
+	<stop
+   offset="0.6655"
+   style="stop-color:#C7D4E1"
+   id="stop4162" />
+	<stop
+   offset="0.7129"
+   style="stop-color:#BBCDDD"
+   id="stop4164" />
+	<stop
+   offset="0.7601"
+   style="stop-color:#A7C0D6"
+   id="stop4166" />
+	<stop
+   offset="0.807"
+   style="stop-color:#8BAECD"
+   id="stop4168" />
+	<stop
+   offset="0.809"
+   style="stop-color:#8AADCD"
+   id="stop4170" />
+	<stop
+   offset="1"
+   style="stop-color:#0E525F"
+   id="stop4172" />
+</linearGradient>
+<circle
+   cx="26"
+   cy="26"
+   r="3.4660001"
+   id="circle4174"
+   style="fill:url(#SVGID_13_)"
+   sodipodi:cx="26"
+   sodipodi:cy="26"
+   sodipodi:rx="3.4660001"
+   sodipodi:ry="3.4660001"
+   transform="matrix(0.923077,0,0,0.923077,2,1.999996)" />
+<linearGradient
+   id="SVGID_14_"
+   gradientUnits="userSpaceOnUse"
+   x1="-78.1001"
+   y1="-96"
+   x2="-74.9004"
+   y2="-96"
+   gradientTransform="matrix(1,0,0,-1,102.5,-70)">
+	<stop
+   offset="0.0056"
+   style="stop-color:#8AADCE"
+   id="stop4177" />
+	<stop
+   offset="0.073"
+   style="stop-color:#335977"
+   id="stop4179" />
+	<stop
+   offset="0.5"
+   style="stop-color:#EAECEF"
+   id="stop4181" />
+	<stop
+   offset="0.618"
+   style="stop-color:#C9D5E1"
+   id="stop4183" />
+	<stop
+   offset="0.6648"
+   style="stop-color:#C5D3E0"
+   id="stop4185" />
+	<stop
+   offset="0.7114"
+   style="stop-color:#B9CBDC"
+   id="stop4187" />
+	<stop
+   offset="0.758"
+   style="stop-color:#A5BFD6"
+   id="stop4189" />
+	<stop
+   offset="0.8042"
+   style="stop-color:#89ADCE"
+   id="stop4191" />
+	<stop
+   offset="0.809"
+   style="stop-color:#86ABCD"
+   id="stop4193" />
+	<stop
+   offset="1"
+   style="stop-color:#0E525F"
+   id="stop4195" />
+</linearGradient>
+<circle
+   cx="26"
+   cy="26"
+   r="1.6"
+   id="circle4197"
+   style="fill:url(#SVGID_14_)"
+   sodipodi:cx="26"
+   sodipodi:cy="26"
+   sodipodi:rx="1.6"
+   sodipodi:ry="1.6"
+   transform="matrix(0.923077,0,0,0.923077,2,1.999996)" />
+</svg>
+\ No newline at end of file
diff --git a/examples/declarative/states/states.qml b/examples/declarative/states/states.qml
new file mode 100644
index 0000000..e540d25
--- /dev/null
+++ b/examples/declarative/states/states.qml
@@ -0,0 +1,40 @@
+<Rect id="Page" width="300" height="300" color="white">
+
+    <!-- A target region.  Clicking in here sets the state to '' - the default state -->
+    <Rect width="50" height="50" x="0" y="0" color="transparent" pen.color="black">
+        <MouseRegion anchors.fill="{parent}" onClicked="Page.state=''"/>
+    </Rect>
+
+    <!-- Another target region.  Clicking in here sets the state to 'Position1' -->
+    <Rect width="50" height="50" x="150" y="50" color="transparent" pen.color="black">
+        <MouseRegion anchors.fill="{parent}" onClicked="Page.state='Position1'"/>
+    </Rect>
+
+    <!-- Another target region.  Clicking in here sets the state to 'Position2' -->
+    <Rect width="50" height="50" x="0" y="200" color="transparent" pen.color="black">
+        <MouseRegion anchors.fill="{parent}" onClicked="Page.state='Position2'"/>
+    </Rect>
+
+    <!-- Rect which will be moved when my state changes -->
+    <Rect id="myrect" width="50" height="50" color="red"/>
+
+    <states>
+
+        <!-- In state 'Position1', change the 'myrect' item x, y to 150, 50. -->
+        <State name="Position1">
+            <SetProperty target="{myrect}" property="x" value="150"/>
+            <SetProperty target="{myrect}" property="y" value="50"/>
+        </State>
+
+        <!--
+        In state 'Position2', change y to 100.  We do not specify 'x' here - 
+        it will therefore be restored to its default value of 0, if it
+        had been changed.
+        -->
+        <State name="Position2">
+            <SetProperty target="{myrect}" property="y" value="200"/>
+        </State>
+
+    </states>
+
+</Rect>
diff --git a/examples/declarative/states/transitions.qml b/examples/declarative/states/transitions.qml
new file mode 100644
index 0000000..c3f3515
--- /dev/null
+++ b/examples/declarative/states/transitions.qml
@@ -0,0 +1,68 @@
+<Rect id="Page" width="300" height="300" color="white">
+
+    <!-- A target region.  Clicking in here sets the state to '' - the default state -->
+    <Rect width="50" height="50" x="0" y="0" color="transparent" pen.color="black">
+        <MouseRegion anchors.fill="{parent}" onClicked="Page.state=''"/>
+    </Rect>
+
+    <!-- Another target region.  Clicking in here sets the state to 'Position1' -->
+    <Rect width="50" height="50" x="150" y="50" color="transparent" pen.color="black">
+        <MouseRegion anchors.fill="{parent}" onClicked="Page.state='Position1'"/>
+    </Rect>
+
+    <!-- Another target region.  Clicking in here sets the state to 'Position2' -->
+    <Rect width="50" height="50" x="0" y="200" color="transparent" pen.color="black">
+        <MouseRegion anchors.fill="{parent}" onClicked="Page.state='Position2'"/>
+    </Rect>
+
+    <!-- Rect which will be moved when my state changes -->
+    <Rect id="myrect" width="50" height="50" color="red"/>
+
+    <states>
+
+        <!-- In state 'Position1', change the 'myrect' item x, y to 150, 50. -->
+        <State name="Position1">
+            <SetProperty target="{myrect}" property="x" value="150"/>
+            <SetProperty target="{myrect}" property="y" value="50"/>
+        </State>
+
+        <!--
+        In state 'Position2', change y to 100.  We do not specify 'x' here - 
+        it will therefore be restored to its default value of 0, if it
+        had been changed.
+        -->
+        <State name="Position2">
+            <SetProperty target="{myrect}" property="y" value="200"/>
+        </State>
+
+    </states>
+
+    <!-- transitions define how the properties change. -->
+    <transitions>
+
+        <!--
+        When transitioning to 'Position1' move x,y over a duration of 1 second,
+        with easeOutBounce easing function.
+        -->
+        <Transition fromState="*" toState="Position1">
+            <NumericAnimation properties="x,y" easing="easeOutBounce" duration="1000" />
+        </Transition>
+
+        <!--
+        When transitioning to 'Position2' move x,y over a duration of 2 seconds,
+        with easeInOutQuad easing function.
+        -->
+        <Transition fromState="*" toState="Position2">
+            <NumericAnimation properties="x,y" easing="easeInOutQuad" duration="2000" />
+        </Transition>
+
+        <!--
+        For any other state changes move x,y linearly over duration of 200ms.
+        -->
+        <Transition>
+            <NumericAnimation properties="x,y" duration="200" />
+        </Transition>
+
+    </transitions>
+
+</Rect>
diff --git a/examples/declarative/support/contact.cpp b/examples/declarative/support/contact.cpp
new file mode 100644
index 0000000..7d90fc4
--- /dev/null
+++ b/examples/declarative/support/contact.cpp
@@ -0,0 +1,83 @@
+/****************************************************************************
+**
+** Copyright (C) 1992-$THISYEAR$ $TROLLTECH$. All rights reserved.
+**
+** This file is part of the $MODULE$ of the Qt Toolkit.
+**
+** $TROLLTECH_DUAL_LICENSE$
+**
+** This file is provided AS IS with NO WARRANTY OF ANY KIND, INCLUDING THE
+** WARRANTY OF DESIGN, MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE.
+**
+****************************************************************************/
+
+#include "contact.h"
+#include "qmltypes.h"
+
+QML_DEFINE_TYPE(Contact,Contact);
+Contact::Contact() : QObject(0)
+{
+    m_firstName = "John";
+    m_lastName = "Smith";
+    m_portraitFile = "contact.png";
+    m_company = "Trollkia";
+    m_emails << "smith@trollkia.com" << "john45@gmail.com";
+
+    m_numbers << new PhoneNumber;
+    m_numbers << new PhoneNumber;
+    m_numbers << new PhoneNumber;
+    
+    m_numbers.at(0)->setType(PhoneNumber::HomePhone);
+    m_numbers.at(0)->setNumber("35412451");
+
+    m_numbers.at(1)->setType(PhoneNumber::BusinessPhone);
+    m_numbers.at(1)->setNumber("33424994");
+    
+    m_numbers.at(2)->setType(PhoneNumber::MobilePhone);
+    m_numbers.at(2)->setNumber("0424655137");
+
+    m_addresses << new Address;
+    m_addresses << new Address;
+    m_addresses << new Address;
+    m_addresses.at(0)->setNumber(13);
+    m_addresses.at(0)->setStreet("Blackhill Cr");
+    m_addresses.at(0)->setCountry("Australia");
+    m_addresses.at(1)->setNumber(116);
+    m_addresses.at(1)->setStreet("Sandankerveien");
+    m_addresses.at(1)->setCountry("Norway");
+    m_addresses.at(2)->setNumber(92);
+    m_addresses.at(2)->setStreet("Elizibeth St");
+    m_addresses.at(2)->setCountry("Australia");
+}
+
+void Contact::addNumber(PhoneNumber *newNumber)
+{
+    
+    m_numbers << newNumber;    
+    emit numbersChanged();
+}
+
+void Contact::addAddress(Address *newAddress)
+{
+    m_addresses << newAddress;
+    emit addressesChanged();
+}
+
+void Contact::addEmail(QString &newEmail)
+{
+
+    m_emails << newEmail;
+    emit emailsChanged();
+}
+
+QML_DEFINE_TYPE(Address,Address);
+Address::Address()
+: _number(0)
+{
+}
+
+QML_DEFINE_TYPE(PhoneNumber, PhoneNumber);
+PhoneNumber::PhoneNumber()
+: _type(HomePhone)
+{
+}
diff --git a/examples/declarative/support/contact.h b/examples/declarative/support/contact.h
new file mode 100644
index 0000000..c403f8b
--- /dev/null
+++ b/examples/declarative/support/contact.h
@@ -0,0 +1,141 @@
+/****************************************************************************
+**
+** Copyright (C) 1992-$THISYEAR$ $TROLLTECH$. All rights reserved.
+**
+** This file is part of the $MODULE$ of the Qt Toolkit.
+**
+** $TROLLTECH_DUAL_LICENSE$
+**
+** This file is provided AS IS with NO WARRANTY OF ANY KIND, INCLUDING THE
+** WARRANTY OF DESIGN, MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE.
+**
+****************************************************************************/
+
+#ifndef CONTACT_H
+#define CONTACT_H
+
+#include <qml.h>
+#include <QtGui>
+
+
+class Address : public QObject
+{
+    Q_OBJECT
+public:
+    Address();
+
+    Q_PROPERTY(int number READ number WRITE setNumber NOTIFY changed);
+    Q_PROPERTY(QString street READ street WRITE setStreet NOTIFY changed);
+    Q_PROPERTY(QString country READ country WRITE setCountry NOTIFY changed);
+
+    int number() const { return _number; }
+    void setNumber(int n) { _number = n; emit changed(); }
+
+    QString street() const { return _street; }
+    void setStreet(const QString &s) { _street = s; emit changed(); }
+
+    QString country() const { return _country; }
+    void setCountry(const QString &c) { _country = c; emit changed(); }
+
+signals:
+    void changed();
+
+private:
+    int _number;
+    QString _street;
+    QString _country;
+};
+QML_DECLARE_TYPE(Address);
+
+class PhoneNumber : public QObject
+{
+    Q_OBJECT
+    Q_ENUMS(PhoneType)
+public:
+    PhoneNumber();
+
+    enum PhoneType {
+        HomePhone,
+        BusinessPhone,
+        MobilePhone
+    };
+
+    Q_PROPERTY(QString number READ number WRITE setNumber NOTIFY changed);
+    Q_PROPERTY(PhoneType type READ type WRITE setType NOTIFY changed);
+
+    QString number() const { return _number; }
+    void setNumber(QString n) { _number = n; emit changed(); }
+
+    PhoneType type() const { return _type; }
+    void setType(PhoneType type) { _type = type; emit changed(); }
+
+signals:
+    void changed();
+
+private:
+    QString _number;
+    PhoneType _type;
+};
+QML_DECLARE_TYPE(PhoneNumber);
+
+class Contact : public QObject
+{
+    Q_OBJECT
+public:
+    Contact();
+
+    Q_PROPERTY(QString firstName READ firstName WRITE setFirstName NOTIFY nameChanged);
+    QString firstName() const { return m_firstName; }
+
+    Q_PROPERTY(QString lastName READ lastName WRITE setLastName NOTIFY nameChanged);
+    QString lastName() const { return m_lastName; }
+
+    Q_PROPERTY(QString portraitFile READ portraitFile WRITE setPortraitFile NOTIFY portraitChanged);
+    QString portraitFile() const { return m_portraitFile; }
+
+    Q_PROPERTY(QString company READ company WRITE setCompany NOTIFY companyChanged);
+    QString company() const { return m_company; }
+
+    Q_PROPERTY(QStringList emails READ emails WRITE setEmails NOTIFY emailsChanged);
+    QStringList emails() const { return m_emails; }
+
+    Q_PROPERTY(QList<Address *>* addresses READ addresses);
+    QList<Address *>* addresses() { return &m_addresses; }
+
+    Q_PROPERTY(QList<PhoneNumber *>* numbers READ numbers);
+    QList<PhoneNumber *>* numbers() { return &m_numbers; }
+
+    
+    void addEmail(QString&);
+    void addAddress(Address*);
+    void addNumber(PhoneNumber*);
+
+public slots:
+    void setFirstName(const QString &name) { m_firstName = name; emit nameChanged(); }
+    void setLastName(const QString &name) { m_lastName = name; emit nameChanged(); }
+    void setPortraitFile(const QString &portraitFile) { m_portraitFile = portraitFile; emit portraitChanged(); }
+    void setCompany(const QString &company) { m_company = company; emit companyChanged(); }
+    void setEmails(const QStringList &emails) { m_emails = emails; emit emailsChanged(); }
+
+signals:
+    void nameChanged();
+    void portraitChanged();
+    void companyChanged();
+    void emailsChanged();
+    void numbersChanged();
+    void addressesChanged();
+
+private:
+    QString m_firstName;
+    QString m_lastName;
+    QString m_portraitFile;
+
+    QString m_company;
+
+    QList<Address *> m_addresses;
+    QList<PhoneNumber *>m_numbers;
+    QStringList m_emails;
+};
+QML_DECLARE_TYPE(Contact);
+
+#endif
diff --git a/examples/declarative/support/contactmodel.cpp b/examples/declarative/support/contactmodel.cpp
new file mode 100644
index 0000000..efe108fb
--- /dev/null
+++ b/examples/declarative/support/contactmodel.cpp
@@ -0,0 +1,159 @@
+/****************************************************************************
+**
+** Copyright (C) 1992-$THISYEAR$ $TROLLTECH$. All rights reserved.
+**
+** This file is part of the $MODULE$ of the Qt Toolkit.
+**
+** $TROLLTECH_DUAL_LICENSE$
+**
+** This file is provided AS IS with NO WARRANTY OF ANY KIND, INCLUDING THE
+** WARRANTY OF DESIGN, MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE.
+**
+****************************************************************************/
+
+#include "contactmodel.h"
+#include "qmltypes.h"
+
+ContactModel::ContactModel(QObject *parent) : QListModelInterface(parent)
+{
+    QFile f("../contacts/contacts.txt");
+    f.open(QIODevice::ReadOnly);
+    QTextStream ts(&f);
+    QString text = ts.readLine();
+    while(!text.isEmpty()) {
+        Contact *c = new Contact;
+        QStringList list = text.split(" ");
+        c->setFirstName(list[0]);
+        c->setLastName(list[1]);
+        for (int i = 2; i < list.count(); ++i)
+            c->addEmail(list[i]);
+        //contactList.append(c);
+        insertContact(c);
+        
+        text = ts.readLine();
+    }
+    f.close();
+}
+
+ContactModel::~ContactModel()
+{
+    while (!contactList.isEmpty()) {
+        Contact *c = contactList.takeFirst();
+        delete c;
+    }
+}
+
+int ContactModel::count() const
+{
+    return contactList.count();
+}
+
+QHash<int,QVariant> ContactModel::data(int index, const QList<int> &roles) const
+{
+    QHash<int,QVariant> returnHash;
+
+    for (int i = 0; i < roles.size(); ++i) {
+        int role = roles.at(i);
+        QVariant info;
+        switch(role) {
+        case PortraitRole:
+            info = "contact.png";
+            break;
+        case FirstNameRole:
+            info = contactList.at(index)->firstName();
+            break;
+        case LastNameRole:
+            info = contactList.at(index)->lastName();
+            break;
+        case CompanyRole:
+            info = contactList.at(index)->company();
+            break;
+        case EmailsRole:
+            info = contactList.at(index)->emails();
+            break;
+        case AddressesRole:
+            //returns QVariant BOOL
+            info = QVariant::fromValue(contactList.at(index)->addresses());
+            break;
+        case NumbersRole:
+            info = QVariant::fromValue(contactList.at(index)->numbers());
+            break;
+        default:
+            break;
+        }
+        returnHash.insert(role, info);
+    }
+
+    return returnHash;
+}
+
+QString ContactModel::toString(int role) const
+{
+    switch(role) {
+    case PortraitRole:
+        return "portrait";
+    case FirstNameRole:
+        return "firstName";
+    case LastNameRole:
+        return "lastName";
+    case CompanyRole:
+        return "company";
+    case EmailsRole:
+        return "emails";
+    case AddressesRole:
+        return "addresses";
+    case NumbersRole:
+        return "numbers";
+    default:
+        return "";
+    }
+}
+
+QList<int> ContactModel::roles() const
+{
+    return QList<int>() << PortraitRole << FirstNameRole << LastNameRole << CompanyRole << EmailsRole << AddressesRole << NumbersRole;
+}
+
+void ContactModel::deleteContact(int index)
+{
+    delete contactList.takeAt(index);
+    emit itemsRemoved(index, 1);
+}
+
+int ContactModel::insertContact(Contact *contact)
+{
+    int index = 0;
+    QString fullName = contact->lastName();
+    index = findIndex(fullName);
+    contactList.insert(index, contact);
+    emit itemsInserted(index, 1);
+    return index;
+}
+
+
+//search - binary search algorithm lastname only
+
+int ContactModel::findIndex(QString &searchName) const
+{
+    int start = 0;
+    int end = contactList.size()-1;
+    int middle = 0;
+    QString middleString;
+
+    while (start <= end)
+    {
+        middle = (start+end)/2;
+        middleString = contactList.at(middle)->lastName();
+        if (isAfter(searchName, middleString) < 0) start = middle+1;
+        else if( isAfter(middleString, searchName) < 0) end = middle-1;
+        else return middle;
+    }
+    return start;
+}   
+
+int ContactModel::isAfter(QString &name1, QString &name2) const
+{
+    //if c1 is after c2 alphabetically, return positive
+    int compString = QString::compare(name1, name2, Qt::CaseInsensitive);
+    return -compString;
+}
diff --git a/examples/declarative/support/contactmodel.h b/examples/declarative/support/contactmodel.h
new file mode 100644
index 0000000..e262358
--- /dev/null
+++ b/examples/declarative/support/contactmodel.h
@@ -0,0 +1,55 @@
+/****************************************************************************
+**
+** Copyright (C) 1992-$THISYEAR$ $TROLLTECH$. All rights reserved.
+**
+** This file is part of the $MODULE$ of the Qt Toolkit.
+**
+** $TROLLTECH_DUAL_LICENSE$
+**
+** This file is provided AS IS with NO WARRANTY OF ANY KIND, INCLUDING THE
+** WARRANTY OF DESIGN, MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE.
+**
+****************************************************************************/
+
+#ifndef _CONTACTMODEL_H_
+#define _CONTACTMODEL_H_
+
+#include <qlistmodelinterface.h>
+#include "contact.h"
+
+class ContactModel : public QListModelInterface
+{
+    Q_OBJECT
+public:
+    ContactModel(QObject *parent = 0);
+    ~ContactModel();
+
+    enum Roles {
+        PortraitRole,
+        FirstNameRole,
+        LastNameRole,
+        CompanyRole,
+        EmailsRole,
+        AddressesRole,
+        NumbersRole
+    };
+
+    int count() const;
+
+    QHash<int,QVariant> data(int index, const QList<int> &roles) const;
+    QList<int> roles() const;
+
+
+    QString toString(int role) const;
+
+    void deleteContact(int index);
+    int insertContact(Contact *contact); 
+
+    int isAfter(QString &name1, QString &name2) const;
+    int findIndex(QString &searchName) const;
+
+private:
+    QList<Contact*> contactList;
+};
+
+#endif
diff --git a/examples/declarative/support/support.pro b/examples/declarative/support/support.pro
new file mode 100644
index 0000000..1da1a28
--- /dev/null
+++ b/examples/declarative/support/support.pro
@@ -0,0 +1,12 @@
+TEMPLATE = lib
+TARGET = QtFxSupport
+DEPENDPATH += .
+INCLUDEPATH += .
+MOC_DIR = .moc
+OBJECTS_DIR = .obj
+DESTDIR = ../../lib
+QT += script declarative
+
+HEADERS += contact.h contactmodel.h
+SOURCES += contact.cpp contactmodel.cpp
+
diff --git a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/1_Drawing_an_animation.qml b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/1_Drawing_an_animation.qml
new file mode 100644
index 0000000..06c9f5a
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/1_Drawing_an_animation.qml
@@ -0,0 +1,22 @@
+<Rect id="page" width="240" height="180" color='black'>
+    <RemoveButton1
+        y="5"
+        anchors.right="{page.right}"
+        anchors.rightMargin="5"/>
+    <RemoveButton2
+        y="40"
+        anchors.right="{page.right}"
+        anchors.rightMargin="5"/>
+    <RemoveButton3
+        y="75"
+        anchors.right="{page.right}"
+        anchors.rightMargin="5"/>
+    <RemoveButton4
+        y="110"
+        anchors.right="{page.right}"
+        anchors.rightMargin="5"/>
+    <RemoveButton5
+        y="145"
+        anchors.right="{page.right}"
+        anchors.rightMargin="5"/>
+</Rect>
diff --git a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/RemoveButton1.qml b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/RemoveButton1.qml
new file mode 100644
index 0000000..dc3f505
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/RemoveButton1.qml
@@ -0,0 +1,4 @@
+<Rect id="removeButton"
+    width="30" height="30"
+    color="red"
+    radius="5"/>
diff --git a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/RemoveButton2.qml b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/RemoveButton2.qml
new file mode 100644
index 0000000..2ba488d
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/RemoveButton2.qml
@@ -0,0 +1,10 @@
+<Rect id="removeButton"
+    width="30" height="30"
+    color="red"
+    radius="5">
+    <Image id="trashIcon"
+        width="22" height="22"
+        anchors.right="{parent.right}" anchors.rightMargin="4"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        src="../shared/pics/trash.png"/>
+</Rect>
diff --git a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/RemoveButton3.qml b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/RemoveButton3.qml
new file mode 100644
index 0000000..9a364c5
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/RemoveButton3.qml
@@ -0,0 +1,23 @@
+<Rect id="removeButton"
+    width="230" height="30"
+    color="red"
+    radius="5">
+    <Image id="cancelIcon"
+        width="22" height="22"
+        anchors.right="{parent.right}" anchors.rightMargin="4"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        src="../shared/pics/cancel.png"/>
+    <Image id="confirmIcon"
+        width="22" height="22"
+        anchors.left="{parent.left}" anchors.leftMargin="4"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        src="../shared/pics/ok.png"/>
+    <Text id="text"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        anchors.left="{confirmIcon.right}" anchors.leftMargin="4"
+        anchors.right="{cancelIcon.left}" anchors.rightMargin="4"
+        font.bold="true"
+        color="white"
+        hAlign="AlignHCenter"
+        text="Remove"/>
+</Rect>
diff --git a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/RemoveButton4.qml b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/RemoveButton4.qml
new file mode 100644
index 0000000..45ca19d
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/RemoveButton4.qml
@@ -0,0 +1,65 @@
+<Rect id="removeButton"
+    width="30" height="30"
+    color="red"
+    radius="5">
+    <resources>
+        <Script>
+            function toggle() {
+                print('removeButton.toggle()');
+                if (removeButton.state == 'opened') {
+                    removeButton.state = '';
+                } else {
+                    removeButton.state = 'opened';
+                }
+            }
+        </Script>
+    </resources>
+    <Image id="trashIcon"
+        width="22" height="22"
+        anchors.right="{parent.right}" anchors.rightMargin="4"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        src="../shared/pics/trash.png"
+        opacity="1">
+        <MouseRegion
+            anchors.fill="{parent}"
+            onClicked="toggle()"/>
+    </Image>
+    <Image id="cancelIcon"
+        width="22" height="22"
+        anchors.right="{parent.right}" anchors.rightMargin="4"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        src="../shared/pics/cancel.png"
+        opacity="0">
+        <MouseRegion
+            anchors.fill="{parent}"
+            onClicked="toggle()"/>
+    </Image>
+    <Image id="confirmIcon"
+        width="22" height="22"
+        anchors.left="{parent.left}" anchors.leftMargin="4"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        src="../shared/pics/ok.png"
+        opacity="0">
+        <MouseRegion
+            anchors.fill="{parent}"
+            onClicked="toggle()"/>
+    </Image>
+    <Text id="text"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        anchors.left="{confirmIcon.right}" anchors.leftMargin="4"
+        anchors.right="{cancelIcon.left}" anchors.rightMargin="4"
+        font.bold="true"
+        color="white"
+        hAlign="AlignHCenter"
+        text="Remove"
+        opacity="0"/>
+    <states>
+        <State name="opened">
+            <SetProperty target="{removeButton}" property="width" value="230"/>
+            <SetProperty target="{text}" property="opacity" value="1"/>
+            <SetProperty target="{confirmIcon}" property="opacity" value="1"/>
+            <SetProperty target="{cancelIcon}" property="opacity" value="1"/>
+            <SetProperty target="{trashIcon}" property="opacity" value="0"/>
+        </State>
+    </states>
+</Rect>
diff --git a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/RemoveButton5.qml b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/RemoveButton5.qml
new file mode 100644
index 0000000..68c1838
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/RemoveButton5.qml
@@ -0,0 +1,70 @@
+<Rect id="removeButton"
+    width="30" height="30"
+    color="red"
+    radius="5">
+    <resources>
+        <Script>
+            function toggle() {
+                print('removeButton.toggle()');
+                if (removeButton.state == 'opened') {
+                    removeButton.state = '';
+                } else {
+                    removeButton.state = 'opened';
+                }
+            }
+        </Script>
+    </resources>
+    <Image id="trashIcon"
+        width="22" height="22"
+        anchors.right="{parent.right}" anchors.rightMargin="4"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        src="../shared/pics/trash.png"
+        opacity="1">
+        <MouseRegion
+            anchors.fill="{parent}"
+            onClicked="toggle()"/>
+    </Image>
+    <Image id="cancelIcon"
+        width="22" height="22"
+        anchors.right="{parent.right}" anchors.rightMargin="4"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        src="../shared/pics/cancel.png"
+        opacity="0">
+        <MouseRegion
+            anchors.fill="{parent}"
+            onClicked="toggle()"/>
+    </Image>
+    <Image id="confirmIcon"
+        width="22" height="22"
+        anchors.left="{parent.left}" anchors.leftMargin="4"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        src="../shared/pics/ok.png"
+        opacity="0">
+        <MouseRegion
+            anchors.fill="{parent}"
+            onClicked="toggle()"/>
+    </Image>
+    <Text id="text"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        anchors.left="{confirmIcon.right}" anchors.leftMargin="4"
+        anchors.right="{cancelIcon.left}" anchors.rightMargin="4"
+        font.bold="true"
+        color="white"
+        hAlign="AlignHCenter"
+        text="Remove"
+        opacity="0"/>
+    <states>
+        <State name="opened">
+            <SetProperty target="{removeButton}" property="width" value="230"/>
+            <SetProperty target="{text}" property="opacity" value="1"/>
+            <SetProperty target="{confirmIcon}" property="opacity" value="1"/>
+            <SetProperty target="{cancelIcon}" property="opacity" value="1"/>
+            <SetProperty target="{trashIcon}" property="opacity" value="0"/>
+        </State>
+    </states>
+    <transitions>
+        <Transition fromState="*" toState="opened" reversible="true">
+            <NumericAnimation properties="opacity,x,width" duration="200"/>
+        </Transition>
+    </transitions>
+</Rect>
diff --git a/examples/declarative/tutorials/contacts/2_Reuse/2_Reuse.qml b/examples/declarative/tutorials/contacts/2_Reuse/2_Reuse.qml
new file mode 100644
index 0000000..29fdf51
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/2_Reuse/2_Reuse.qml
@@ -0,0 +1,34 @@
+<Rect id="page" width="480" height="360" color='black'>
+    <properties>
+        <Property name="mouseGrabbed" value="false"/>
+    </properties>
+    <Item x="0" y="0" width="240" height="180">
+        <ContactField1
+            y="5"
+            anchors.left="{parent.left}" anchors.leftMargin="5"
+            anchors.right="{parent.right}" anchors.rightMargin="5"/>
+        <ContactField2
+            y="40"
+            anchors.left="{parent.left}" anchors.leftMargin="5"
+            anchors.right="{parent.right}" anchors.rightMargin="5"/>
+        <ContactField3
+            y="75"
+            anchors.left="{parent.left}" anchors.leftMargin="5"
+            anchors.right="{parent.right}" anchors.rightMargin="5"
+            label="Phone Number"
+            icon="../shared/pics/phone.png"
+            value="123123"/>
+    </Item>
+    <Rect pen.color="gray" x="5" y="115" width="230" height="180" radius="5">
+        <Contact3 anchors.fill="{parent}"
+                label="Brian"
+                phone="123123"
+                email="brian@bigisp.com" />
+    </Rect>
+    <Rect pen.color="gray" x="245" y="115" width="230" height="180" radius="5">
+        <Contact4 anchors.fill="{parent}"
+                label="Brian"
+                phone="123123"
+                email="brian@bigisp.com" />
+    </Rect>
+</Rect>
diff --git a/examples/declarative/tutorials/contacts/2_Reuse/Contact3.qml b/examples/declarative/tutorials/contacts/2_Reuse/Contact3.qml
new file mode 100644
index 0000000..fdd0c6d
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/2_Reuse/Contact3.qml
@@ -0,0 +1,27 @@
+<Item id="contactDetails">
+    <properties>
+        <Property name="contactid" value=""/>
+        <Property name="label" onValueChanged="labelField.value = label"/>
+        <Property name="phone" onValueChanged="phoneField.value = phone"/>
+        <Property name="email" onValueChanged="emailField.value = email"/>
+    </properties>
+    <VerticalLayout id="layout"
+        anchors.fill="{parent}"
+        spacing="5"
+        margin="5">
+        <ContactField3 id="labelField"
+            anchors.left="{layout.left}" anchors.leftMargin="5"
+            anchors.right="{layout.right}" anchors.rightMargin="5"
+            label="Name"/>
+        <ContactField3 id="phoneField"
+            anchors.left="{layout.left}" anchors.leftMargin="5"
+            anchors.right="{layout.right}" anchors.rightMargin="5"
+            icon="../shared/pics/phone.png"
+            label="Phone"/>
+        <ContactField3 id="emailField"
+            anchors.left="{layout.left}" anchors.leftMargin="5"
+            anchors.right="{layout.right}" anchors.rightMargin="5"
+            icon="../shared/pics/email.png"
+            label="Email"/>
+    </VerticalLayout>
+</Item>
diff --git a/examples/declarative/tutorials/contacts/2_Reuse/Contact4.qml b/examples/declarative/tutorials/contacts/2_Reuse/Contact4.qml
new file mode 100644
index 0000000..b1882da
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/2_Reuse/Contact4.qml
@@ -0,0 +1,27 @@
+<Item id="contactDetails">
+    <properties>
+        <Property name="contactid" value=""/>
+        <Property name="label" onValueChanged="labelField.value = label"/>
+        <Property name="phone" onValueChanged="phoneField.value = phone"/>
+        <Property name="email" onValueChanged="emailField.value = email"/>
+    </properties>
+    <VerticalLayout id="layout"
+        anchors.fill="{parent}"
+        spacing="5"
+        margin="5">
+        <ContactField4 id="labelField"
+            anchors.left="{layout.left}" anchors.leftMargin="5"
+            anchors.right="{layout.right}" anchors.rightMargin="5"
+            label="Name"/>
+        <ContactField4 id="phoneField"
+            anchors.left="{layout.left}" anchors.leftMargin="5"
+            anchors.right="{layout.right}" anchors.rightMargin="5"
+            icon="../shared/pics/phone.png"
+            label="Phone"/>
+        <ContactField4 id="emailField"
+            anchors.left="{layout.left}" anchors.leftMargin="5"
+            anchors.right="{layout.right}" anchors.rightMargin="5"
+            icon="../shared/pics/email.png"
+            label="Email"/>
+    </VerticalLayout>
+</Item>
diff --git a/examples/declarative/tutorials/contacts/2_Reuse/ContactField1.qml b/examples/declarative/tutorials/contacts/2_Reuse/ContactField1.qml
new file mode 100644
index 0000000..5547a3b
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/2_Reuse/ContactField1.qml
@@ -0,0 +1,17 @@
+<Item id="contactField"
+    clip="true"
+    height="30">
+    <RemoveButton1 id="removeButton"
+        anchors.right="{parent.right}"
+        anchors.top="{parent.top}" anchors.bottom="{parent.bottom}"/>
+    <Text id="fieldText"
+        width="{contactField.width-70}"
+        anchors.right="{removeButton.left}" anchors.rightMargin="5"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        font.bold="true"
+        color="white"
+        text="Phone Number"/>
+    <Image src="../shared/pics/phone.png"
+        anchors.right="{fieldText.left}" anchors.rightMargin="5"
+        anchors.verticalCenter="{parent.verticalCenter}"/>
+</Item>
diff --git a/examples/declarative/tutorials/contacts/2_Reuse/ContactField2.qml b/examples/declarative/tutorials/contacts/2_Reuse/ContactField2.qml
new file mode 100644
index 0000000..b69e03c
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/2_Reuse/ContactField2.qml
@@ -0,0 +1,19 @@
+<Item id="contactField"
+    clip="true"
+    height="30">
+    <RemoveButton2 id="removeButton"
+        anchors.right="{parent.right}"
+        anchors.top="{parent.top}" anchors.bottom="{parent.bottom}"
+        expandedWidth="{contactField.width}"
+        onConfirmed="print('Clear field text'); fieldText.text=''"/>
+    <Text id="fieldText"
+        width="{contactField.width-70}"
+        anchors.right="{removeButton.left}" anchors.rightMargin="5"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        font.bold="true"
+        color="white"
+        text="Phone Number"/>
+    <Image src="../shared/pics/phone.png"
+        anchors.right="{fieldText.left}" anchors.rightMargin="5"
+        anchors.verticalCenter="{parent.verticalCenter}"/>
+</Item>
diff --git a/examples/declarative/tutorials/contacts/2_Reuse/ContactField3.qml b/examples/declarative/tutorials/contacts/2_Reuse/ContactField3.qml
new file mode 100644
index 0000000..f3a11f9
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/2_Reuse/ContactField3.qml
@@ -0,0 +1,35 @@
+<Item id="contactField"
+    clip="true"
+    height="30">
+    <properties>
+        <Property name="label"/>
+        <Property name="icon"/>
+        <Property name="value"/>
+    </properties>
+    <RemoveButton3 id="removeButton"
+        anchors.right="{parent.right}"
+        anchors.top="{parent.top}" anchors.bottom="{parent.bottom}"
+        expandedWidth="{contactField.width}"
+        onConfirmed="print('Clear field text'); fieldText.text=''"/>
+    <FieldText3 id="fieldText"
+        width="{contactField.width-70}"
+        anchors.right="{removeButton.left}" anchors.rightMargin="5"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        label="{contactField.label}"
+        text="{contactField.value}"/>
+    <Image
+        anchors.right="{fieldText.left}" anchors.rightMargin="5"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        src="{contactField.icon}"/>
+    <states>
+        <State name="editingText" when="{fieldText.state == 'editing'}">
+            <SetProperty target="{removeButton.anchors}" property="rightMargin" value="-35"/>
+            <SetProperty target="{fieldText}" property="width" value="{contactField.width}"/>
+        </State>
+    </states>
+    <transitions>
+        <Transition fromState='' toState="*" reversible="true">
+            <NumericAnimation properties="width,rightMargin" duration="200"/>
+        </Transition>
+    </transitions>
+</Item>
diff --git a/examples/declarative/tutorials/contacts/2_Reuse/ContactField4.qml b/examples/declarative/tutorials/contacts/2_Reuse/ContactField4.qml
new file mode 100644
index 0000000..13ccbc0
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/2_Reuse/ContactField4.qml
@@ -0,0 +1,35 @@
+<Item id="contactField"
+    clip="true"
+    height="30">
+    <properties>
+        <Property name="label"/>
+        <Property name="icon"/>
+        <Property name="value"/>
+    </properties>
+    <RemoveButton4 id="removeButton"
+        anchors.right="{parent.right}"
+        anchors.top="{parent.top}" anchors.bottom="{parent.bottom}"
+        expandedWidth="{contactField.width}"
+        onConfirmed="print('Clear field text'); fieldText.text=''"/>
+    <FieldText4 id="fieldText"
+        width="{contactField.width-70}"
+        anchors.right="{removeButton.left}" anchors.rightMargin="5"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        label="{contactField.label}"
+        text="{contactField.value}"/>
+    <Image
+        anchors.right="{fieldText.left}" anchors.rightMargin="5"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        src="{contactField.icon}"/>
+    <states>
+        <State name="editingText" when="{fieldText.state == 'editing'}">
+            <SetProperty target="{removeButton.anchors}" property="rightMargin" value="-35"/>
+            <SetProperty target="{fieldText}" property="width" value="{contactField.width}"/>
+        </State>
+    </states>
+    <transitions>
+        <Transition fromState='' toState="*" reversible="true">
+            <NumericAnimation properties="width,rightMargin" duration="200"/>
+        </Transition>
+    </transitions>
+</Item>
diff --git a/examples/declarative/tutorials/contacts/2_Reuse/FieldText3.qml b/examples/declarative/tutorials/contacts/2_Reuse/FieldText3.qml
new file mode 100644
index 0000000..c807aed
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/2_Reuse/FieldText3.qml
@@ -0,0 +1,93 @@
+<Rect id="fieldText"
+    height="30"
+    radius="5"
+    color="black">
+    <properties>
+        <Property
+            name="text"
+            value=""
+            onValueChanged="reset()"/>
+        <Property
+            name="label"
+            value=""/>
+    </properties>
+    <signals>
+        <Signal name="confirmed"/>
+    </signals>
+    <resources>
+        <Script>
+            function edit() {
+                fieldText.state='editing';
+            }
+            function confirm() {
+                fieldText.text = textEdit.text;
+                fieldText.state='';
+                fieldText.confirmed.emit();
+            }
+            function reset() {
+                textEdit.text = fieldText.text;
+                fieldText.state='';
+            }
+        </Script>
+    </resources>
+    <Image id="cancelIcon"
+        width="22" height="22"
+        anchors.right="{parent.right}" anchors.rightMargin="4"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        src="../shared/pics/cancel.png"
+        opacity="0"/>
+    <Image id="confirmIcon"
+        width="22" height="22"
+        anchors.left="{parent.left}" anchors.leftMargin="4"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        src="../shared/pics/ok.png"
+        opacity="0"/>
+    <TextEdit id="textEdit"
+        anchors.left="{parent.left}" anchors.leftMargin="0"
+        anchors.right="{parent.right}" anchors.rightMargin="0"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        color="white"
+        font.bold="true"
+        readOnly="true"
+        wrap="false"
+        />
+    <Text id="textLabel"
+        x="5" width="{parent.width-10}"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        hAlign="AlignHCenter"
+        color="#505050"
+        font.italic="true"
+        text="{fieldText.label}"
+        opacity="{textEdit.text != '' ? 0 : 1}">
+        <opacity>
+            <Behaviour>
+                <NumericAnimation property="opacity" duration="250"/>
+            </Behaviour>
+        </opacity>
+    </Text>
+    <MouseRegion anchors.fill="{cancelIcon}" onClicked="reset()"/>
+    <MouseRegion anchors.fill="{confirmIcon}" onClicked="confirm()"/>
+    <MouseRegion
+        id="editRegion"
+        anchors.fill="{textEdit}"
+        onClicked="edit()"/>
+    <states>
+        <State name="editing">
+            <SetProperty target="{confirmIcon}" property="opacity" value="1"/>
+            <SetProperty target="{cancelIcon}" property="opacity" value="1"/>
+            <SetProperty target="{fieldText}" property="color" value="white"/>
+            <SetProperty target="{textEdit}" property="color" value="black"/>
+            <SetProperty target="{textEdit}" property="readOnly" value="false"/>
+            <SetProperty target="{textEdit}" property="focus" value="true"/>
+            <SetProperty target="{editRegion}" property="opacity" value="0"/>
+            <SetProperty target="{textEdit.anchors}" property="leftMargin" value="34"/>
+            <SetProperty target="{textEdit.anchors}" property="rightMargin" value="34"/>
+        </State>
+    </states>
+    <transitions>
+        <Transition fromState='' toState="*" reversible="true">
+            <NumericAnimation properties="opacity,leftMargin,rightMargin" duration="200"/>
+            <ColorAnimation duration="150"/>
+        </Transition>
+    </transitions>
+</Rect>
diff --git a/examples/declarative/tutorials/contacts/2_Reuse/FieldText4.qml b/examples/declarative/tutorials/contacts/2_Reuse/FieldText4.qml
new file mode 100644
index 0000000..a4df42b
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/2_Reuse/FieldText4.qml
@@ -0,0 +1,98 @@
+<Rect id="fieldText"
+    height="30"
+    radius="5"
+    color="black">
+    <properties>
+        <Property
+            name="text"
+            value=""
+            onValueChanged="reset()"/>
+        <Property
+            name="label"
+            value=""/>
+    </properties>
+    <signals>
+        <Signal name="confirmed"/>
+    </signals>
+    <resources>
+        <Script>
+            function edit() {
+                if (!page.mouseGrabbed) {
+                    fieldText.state='editing';
+                    page.mouseGrabbed=true;
+                }
+            }
+            function confirm() {
+                fieldText.text = textEdit.text;
+                fieldText.state='';
+                page.mouseGrabbed=false;
+                fieldText.confirmed.emit();
+            }
+            function reset() {
+                textEdit.text = fieldText.text;
+                fieldText.state='';
+                page.mouseGrabbed=false;
+            }
+        </Script>
+    </resources>
+    <Image id="cancelIcon"
+        width="22" height="22"
+        anchors.right="{parent.right}" anchors.rightMargin="4"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        src="../shared/pics/cancel.png"
+        opacity="0"/>
+    <Image id="confirmIcon"
+        width="22" height="22"
+        anchors.left="{parent.left}" anchors.leftMargin="4"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        src="../shared/pics/ok.png"
+        opacity="0"/>
+    <TextEdit id="textEdit"
+        anchors.left="{parent.left}" anchors.leftMargin="0"
+        anchors.right="{parent.right}" anchors.rightMargin="0"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        color="white"
+        font.bold="true"
+        readOnly="true"
+        wrap="false"
+        />
+    <Text id="textLabel"
+        x="5" width="{parent.width-10}"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        hAlign="AlignHCenter"
+        color="#505050"
+        font.italic="true"
+        text="{fieldText.label}"
+        opacity="{textEdit.text != '' ? 0 : 1}">
+        <opacity>
+            <Behaviour>
+                <NumericAnimation property="opacity" duration="250"/>
+            </Behaviour>
+        </opacity>
+    </Text>
+    <MouseRegion anchors.fill="{cancelIcon}" onClicked="reset()"/>
+    <MouseRegion anchors.fill="{confirmIcon}" onClicked="confirm()"/>
+    <MouseRegion
+        id="editRegion"
+        anchors.fill="{textEdit}"
+        onClicked="edit()"/>
+    <states>
+        <State name="editing">
+            <SetProperty target="{confirmIcon}" property="opacity" value="1"/>
+            <SetProperty target="{cancelIcon}" property="opacity" value="1"/>
+            <SetProperty target="{fieldText}" property="color" value="white"/>
+            <SetProperty target="{textEdit}" property="color" value="black"/>
+            <SetProperty target="{textEdit}" property="readOnly" value="false"/>
+            <SetProperty target="{textEdit}" property="focus" value="true"/>
+            <SetProperty target="{editRegion}" property="opacity" value="0"/>
+            <SetProperty target="{textEdit.anchors}" property="leftMargin" value="34"/>
+            <SetProperty target="{textEdit.anchors}" property="rightMargin" value="34"/>
+        </State>
+    </states>
+    <transitions>
+        <Transition fromState='' toState="*" reversible="true">
+            <NumericAnimation properties="opacity,leftMargin,rightMargin" duration="200"/>
+            <ColorAnimation duration="150"/>
+        </Transition>
+    </transitions>
+</Rect>
diff --git a/examples/declarative/tutorials/contacts/2_Reuse/RemoveButton1.qml b/examples/declarative/tutorials/contacts/2_Reuse/RemoveButton1.qml
new file mode 100644
index 0000000..68c1838
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/2_Reuse/RemoveButton1.qml
@@ -0,0 +1,70 @@
+<Rect id="removeButton"
+    width="30" height="30"
+    color="red"
+    radius="5">
+    <resources>
+        <Script>
+            function toggle() {
+                print('removeButton.toggle()');
+                if (removeButton.state == 'opened') {
+                    removeButton.state = '';
+                } else {
+                    removeButton.state = 'opened';
+                }
+            }
+        </Script>
+    </resources>
+    <Image id="trashIcon"
+        width="22" height="22"
+        anchors.right="{parent.right}" anchors.rightMargin="4"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        src="../shared/pics/trash.png"
+        opacity="1">
+        <MouseRegion
+            anchors.fill="{parent}"
+            onClicked="toggle()"/>
+    </Image>
+    <Image id="cancelIcon"
+        width="22" height="22"
+        anchors.right="{parent.right}" anchors.rightMargin="4"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        src="../shared/pics/cancel.png"
+        opacity="0">
+        <MouseRegion
+            anchors.fill="{parent}"
+            onClicked="toggle()"/>
+    </Image>
+    <Image id="confirmIcon"
+        width="22" height="22"
+        anchors.left="{parent.left}" anchors.leftMargin="4"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        src="../shared/pics/ok.png"
+        opacity="0">
+        <MouseRegion
+            anchors.fill="{parent}"
+            onClicked="toggle()"/>
+    </Image>
+    <Text id="text"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        anchors.left="{confirmIcon.right}" anchors.leftMargin="4"
+        anchors.right="{cancelIcon.left}" anchors.rightMargin="4"
+        font.bold="true"
+        color="white"
+        hAlign="AlignHCenter"
+        text="Remove"
+        opacity="0"/>
+    <states>
+        <State name="opened">
+            <SetProperty target="{removeButton}" property="width" value="230"/>
+            <SetProperty target="{text}" property="opacity" value="1"/>
+            <SetProperty target="{confirmIcon}" property="opacity" value="1"/>
+            <SetProperty target="{cancelIcon}" property="opacity" value="1"/>
+            <SetProperty target="{trashIcon}" property="opacity" value="0"/>
+        </State>
+    </states>
+    <transitions>
+        <Transition fromState="*" toState="opened" reversible="true">
+            <NumericAnimation properties="opacity,x,width" duration="200"/>
+        </Transition>
+    </transitions>
+</Rect>
diff --git a/examples/declarative/tutorials/contacts/2_Reuse/RemoveButton2.qml b/examples/declarative/tutorials/contacts/2_Reuse/RemoveButton2.qml
new file mode 100644
index 0000000..d9ff4c5
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/2_Reuse/RemoveButton2.qml
@@ -0,0 +1,76 @@
+<Rect id="removeButton"
+    width="30" height="30"
+    color="red"
+    radius="5">
+    <properties>
+        <Property name="expandedWidth" value="230"/>
+    </properties>
+    <signals>
+        <Signal name="confirmed"/>
+    </signals>
+    <resources>
+        <Script>
+            function toggle() {
+                print('removeButton.toggle()');
+                if (removeButton.state == 'opened') {
+                    removeButton.state = '';
+                } else {
+                    removeButton.state = 'opened';
+                }
+            }
+        </Script>
+    </resources>
+    <Image id="trashIcon"
+        width="22" height="22"
+        anchors.right="{parent.right}" anchors.rightMargin="4"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        src="../shared/pics/trash.png"
+        opacity="1">
+        <MouseRegion
+            anchors.fill="{parent}"
+            onClicked="toggle()"/>
+    </Image>
+    <Image id="cancelIcon"
+        width="22" height="22"
+        anchors.right="{parent.right}" anchors.rightMargin="4"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        src="../shared/pics/cancel.png"
+        opacity="0">
+        <MouseRegion
+            anchors.fill="{parent}"
+            onClicked="toggle()"/>
+    </Image>
+    <Image id="confirmIcon"
+        width="22" height="22"
+        anchors.left="{parent.left}" anchors.leftMargin="4"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        src="../shared/pics/ok.png"
+        opacity="0">
+        <MouseRegion
+            anchors.fill="{parent}"
+            onClicked="toggle(); removeButton.confirmed.emit()"/>
+    </Image>
+    <Text id="text"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        anchors.left="{confirmIcon.right}" anchors.leftMargin="4"
+        anchors.right="{cancelIcon.left}" anchors.rightMargin="4"
+        font.bold="true"
+        color="white"
+        hAlign="AlignHCenter"
+        text="Remove"
+        opacity="0"/>
+    <states>
+        <State name="opened">
+            <SetProperty target="{removeButton}" property="width" value="{removeButton.expandedWidth}"/>
+            <SetProperty target="{text}" property="opacity" value="1"/>
+            <SetProperty target="{confirmIcon}" property="opacity" value="1"/>
+            <SetProperty target="{cancelIcon}" property="opacity" value="1"/>
+            <SetProperty target="{trashIcon}" property="opacity" value="0"/>
+        </State>
+    </states>
+    <transitions>
+        <Transition fromState="*" toState="opened" reversible="true">
+            <NumericAnimation properties="opacity,x,width" duration="200"/>
+        </Transition>
+    </transitions>
+</Rect>
diff --git a/examples/declarative/tutorials/contacts/2_Reuse/RemoveButton3.qml b/examples/declarative/tutorials/contacts/2_Reuse/RemoveButton3.qml
new file mode 100644
index 0000000..d9ff4c5
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/2_Reuse/RemoveButton3.qml
@@ -0,0 +1,76 @@
+<Rect id="removeButton"
+    width="30" height="30"
+    color="red"
+    radius="5">
+    <properties>
+        <Property name="expandedWidth" value="230"/>
+    </properties>
+    <signals>
+        <Signal name="confirmed"/>
+    </signals>
+    <resources>
+        <Script>
+            function toggle() {
+                print('removeButton.toggle()');
+                if (removeButton.state == 'opened') {
+                    removeButton.state = '';
+                } else {
+                    removeButton.state = 'opened';
+                }
+            }
+        </Script>
+    </resources>
+    <Image id="trashIcon"
+        width="22" height="22"
+        anchors.right="{parent.right}" anchors.rightMargin="4"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        src="../shared/pics/trash.png"
+        opacity="1">
+        <MouseRegion
+            anchors.fill="{parent}"
+            onClicked="toggle()"/>
+    </Image>
+    <Image id="cancelIcon"
+        width="22" height="22"
+        anchors.right="{parent.right}" anchors.rightMargin="4"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        src="../shared/pics/cancel.png"
+        opacity="0">
+        <MouseRegion
+            anchors.fill="{parent}"
+            onClicked="toggle()"/>
+    </Image>
+    <Image id="confirmIcon"
+        width="22" height="22"
+        anchors.left="{parent.left}" anchors.leftMargin="4"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        src="../shared/pics/ok.png"
+        opacity="0">
+        <MouseRegion
+            anchors.fill="{parent}"
+            onClicked="toggle(); removeButton.confirmed.emit()"/>
+    </Image>
+    <Text id="text"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        anchors.left="{confirmIcon.right}" anchors.leftMargin="4"
+        anchors.right="{cancelIcon.left}" anchors.rightMargin="4"
+        font.bold="true"
+        color="white"
+        hAlign="AlignHCenter"
+        text="Remove"
+        opacity="0"/>
+    <states>
+        <State name="opened">
+            <SetProperty target="{removeButton}" property="width" value="{removeButton.expandedWidth}"/>
+            <SetProperty target="{text}" property="opacity" value="1"/>
+            <SetProperty target="{confirmIcon}" property="opacity" value="1"/>
+            <SetProperty target="{cancelIcon}" property="opacity" value="1"/>
+            <SetProperty target="{trashIcon}" property="opacity" value="0"/>
+        </State>
+    </states>
+    <transitions>
+        <Transition fromState="*" toState="opened" reversible="true">
+            <NumericAnimation properties="opacity,x,width" duration="200"/>
+        </Transition>
+    </transitions>
+</Rect>
diff --git a/examples/declarative/tutorials/contacts/2_Reuse/RemoveButton4.qml b/examples/declarative/tutorials/contacts/2_Reuse/RemoveButton4.qml
new file mode 100644
index 0000000..a489e95
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/2_Reuse/RemoveButton4.qml
@@ -0,0 +1,80 @@
+<Rect id="removeButton"
+    width="30" height="30"
+    color="red"
+    radius="5">
+    <properties>
+        <Property name="expandedWidth" value="230"/>
+    </properties>
+    <signals>
+        <Signal name="confirmed"/>
+    </signals>
+    <resources>
+        <Script>
+            function toggle() {
+                print('removeButton.toggle()');
+                if (removeButton.state == 'opened') {
+                    removeButton.state = '';
+                    page.mouseGrabbed=false;
+                } else {
+                    if (!page.mouseGrabbed) {
+                        removeButton.state = 'opened';
+                        page.mouseGrabbed=true;
+                    }
+                }
+            }
+        </Script>
+    </resources>
+    <Image id="trashIcon"
+        width="22" height="22"
+        anchors.right="{parent.right}" anchors.rightMargin="4"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        src="../shared/pics/trash.png"
+        opacity="1">
+        <MouseRegion
+            anchors.fill="{parent}"
+            onClicked="toggle()"/>
+    </Image>
+    <Image id="cancelIcon"
+        width="22" height="22"
+        anchors.right="{parent.right}" anchors.rightMargin="4"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        src="../shared/pics/cancel.png"
+        opacity="0">
+        <MouseRegion
+            anchors.fill="{parent}"
+            onClicked="toggle()"/>
+    </Image>
+    <Image id="confirmIcon"
+        width="22" height="22"
+        anchors.left="{parent.left}" anchors.leftMargin="4"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        src="../shared/pics/ok.png"
+        opacity="0">
+        <MouseRegion
+            anchors.fill="{parent}"
+            onClicked="toggle(); removeButton.confirmed.emit()"/>
+    </Image>
+    <Text id="text"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        anchors.left="{confirmIcon.right}" anchors.leftMargin="4"
+        anchors.right="{cancelIcon.left}" anchors.rightMargin="4"
+        font.bold="true"
+        color="white"
+        hAlign="AlignHCenter"
+        text="Remove"
+        opacity="0"/>
+    <states>
+        <State name="opened">
+            <SetProperty target="{removeButton}" property="width" value="{removeButton.expandedWidth}"/>
+            <SetProperty target="{text}" property="opacity" value="1"/>
+            <SetProperty target="{confirmIcon}" property="opacity" value="1"/>
+            <SetProperty target="{cancelIcon}" property="opacity" value="1"/>
+            <SetProperty target="{trashIcon}" property="opacity" value="0"/>
+        </State>
+    </states>
+    <transitions>
+        <Transition fromState="*" toState="opened" reversible="true">
+            <NumericAnimation properties="opacity,x,width" duration="200"/>
+        </Transition>
+    </transitions>
+</Rect>
diff --git a/examples/declarative/tutorials/contacts/3_Collections/3_Collections.qml b/examples/declarative/tutorials/contacts/3_Collections/3_Collections.qml
new file mode 100644
index 0000000..ed2a3dc
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/3_Collections/3_Collections.qml
@@ -0,0 +1,8 @@
+<Rect id="page" width="480" height="640" color='black'>
+    <properties>
+        <Property name="mouseGrabbed" value="false"/>
+    </properties>
+    <ContactView1 x="0" y="0" width="240" height="320"/>
+    <ContactView2 x="240" y="0" width="240" height="320"/>
+    <ContactView3 x="0" y="320" width="240" height="320"/>
+</Rect>
diff --git a/examples/declarative/tutorials/contacts/3_Collections/Button.qml b/examples/declarative/tutorials/contacts/3_Collections/Button.qml
new file mode 100644
index 0000000..8290d35
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/3_Collections/Button.qml
@@ -0,0 +1,38 @@
+<Item id="button" width="30" height="30">
+    <properties>
+        <Property name="icon"/>
+    </properties>
+    <signals>
+        <Signal name="clicked"/>
+    </signals>
+    <Rect id="buttonRect"
+        anchors.fill="{parent}"
+        color="lightgreen"
+        radius="5">
+        <Image id="iconImage"
+            src="{button.icon}"
+            anchors.horizontalCenter="{buttonRect.horizontalCenter}"
+            anchors.verticalCenter="{buttonRect.verticalCenter}"/>
+        <MouseRegion id="buttonMouseRegion"
+            anchors.fill="{buttonRect}"
+            onClicked="button.clicked.emit()"/>
+        <states>
+            <State name="pressed" when="{buttonMouseRegion.pressed == true}">
+                <SetProperty target="{buttonRect}" property="color" value="green"/>
+            </State>
+        </states>
+        <transitions>
+            <Transition fromState="*" toState="pressed">
+                <ColorAnimation duration="200"/>
+            </Transition>
+            <Transition fromState="pressed" toState="*">
+                <ColorAnimation duration="1000"/>
+            </Transition>
+        </transitions>
+    </Rect>
+    <opacity>
+        <Behaviour>
+            <NumericAnimation property="opacity" duration="250"/>
+        </Behaviour>
+    </opacity>
+</Item>
diff --git a/examples/declarative/tutorials/contacts/3_Collections/Contact.qml b/examples/declarative/tutorials/contacts/3_Collections/Contact.qml
new file mode 100644
index 0000000..f620c25
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/3_Collections/Contact.qml
@@ -0,0 +1,28 @@
+<Item id="contactDetails"
+    anchors.fill="{parent}">
+    <properties>
+        <Property name="contactid" value=""/>
+        <Property name="label" onValueChanged="labelField.value = label"/>
+        <Property name="phone" onValueChanged="phoneField.value = phone"/>
+        <Property name="email" onValueChanged="emailField.value = email"/>
+    </properties>
+    <VerticalLayout id="layout"
+        anchors.fill="{parent}"
+        spacing="5"
+        margin="5">
+        <ContactField id="labelField"
+            anchors.left="{layout.left}" anchors.leftMargin="5"
+            anchors.right="{layout.right}" anchors.rightMargin="5"
+            label="Name"/>
+        <ContactField id="phoneField"
+            anchors.left="{layout.left}" anchors.leftMargin="5"
+            anchors.right="{layout.right}" anchors.rightMargin="5"
+            icon="../shared/pics/phone.png"
+            label="Phone"/>
+        <ContactField id="emailField"
+            anchors.left="{layout.left}" anchors.leftMargin="5"
+            anchors.right="{layout.right}" anchors.rightMargin="5"
+            icon="../shared/pics/email.png"
+            label="Email"/>
+    </VerticalLayout>
+</Item>
diff --git a/examples/declarative/tutorials/contacts/3_Collections/ContactField.qml b/examples/declarative/tutorials/contacts/3_Collections/ContactField.qml
new file mode 100644
index 0000000..819914c
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/3_Collections/ContactField.qml
@@ -0,0 +1,35 @@
+<Item id="contactField"
+    clip="true"
+    height="30">
+    <properties>
+        <Property name="label"/>
+        <Property name="icon"/>
+        <Property name="value"/>
+    </properties>
+    <RemoveButton id="removeButton"
+        anchors.right="{parent.right}"
+        anchors.top="{parent.top}" anchors.bottom="{parent.bottom}"
+        expandedWidth="{contactField.width}"
+        onConfirmed="print('Clear field text'); fieldText.text=''"/>
+    <FieldText id="fieldText"
+        width="{contactField.width-70}"
+        anchors.right="{removeButton.left}" anchors.rightMargin="5"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        label="{contactField.label}"
+        text="{contactField.value}"/>
+    <Image
+        anchors.right="{fieldText.left}" anchors.rightMargin="5"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        src="{contactField.icon}"/>
+    <states>
+        <State name="editingText" when="{fieldText.state == 'editing'}">
+            <SetProperty target="{removeButton.anchors}" property="rightMargin" value="-35"/>
+            <SetProperty target="{fieldText}" property="width" value="{contactField.width}"/>
+        </State>
+    </states>
+    <transitions>
+        <Transition fromState='' toState="*" reversible="true">
+            <NumericAnimation properties="width,rightMargin" duration="200"/>
+        </Transition>
+    </transitions>
+</Item>
diff --git a/examples/declarative/tutorials/contacts/3_Collections/ContactView1.qml b/examples/declarative/tutorials/contacts/3_Collections/ContactView1.qml
new file mode 100644
index 0000000..d6f7bad
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/3_Collections/ContactView1.qml
@@ -0,0 +1,22 @@
+<Item id="contacts">
+    <resources>
+        <SqlConnection id="contactDatabase" name="qmlConnection" driver="QSQLITE" databaseName="../shared/contacts.sqlite"/>
+        <SqlQuery id="contactList" connection="{contactDatabase}">
+            <query>SELECT recid, label, email, phone FROM contacts ORDER BY label, recid</query>
+        </SqlQuery>
+        <Component id="contactDelegate">
+            <Text
+                x="40" y="12"
+                width="{contactListView.width-30}"
+                height="30"
+                color="white"
+                font.bold="true"
+                text="{model.label}"/>
+        </Component>
+    </resources>
+    <ListView id="contactListView"
+        anchors.fill="{parent}"
+        clip="true"
+        model="{contactList}"
+        delegate="{contactDelegate}"/>
+</Item>
diff --git a/examples/declarative/tutorials/contacts/3_Collections/ContactView2.qml b/examples/declarative/tutorials/contacts/3_Collections/ContactView2.qml
new file mode 100644
index 0000000..da1e5db
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/3_Collections/ContactView2.qml
@@ -0,0 +1,62 @@
+<Item id="contacts">
+    <resources>
+        <SqlConnection id="contactDatabase" name="qmlConnection" driver="QSQLITE" databaseName="../shared/contacts.sqlite"/>
+        <SqlQuery id="contactList" connection="{contactDatabase}">
+            <query>SELECT recid AS contactid, label, email, phone FROM contacts ORDER BY label, recid</query>
+        </SqlQuery>
+        <Component id="contactDelegate">
+            <Item id="wrapper"
+                x="0"
+                width="{ListView.view.width}" height="34">
+                <Text id="label"
+                    x="40" y="12"
+                    width="{parent.width-30}" 
+                    text="{model.label}"
+                    color="white"
+                    font.bold="true">
+                </Text>
+                <MouseRegion
+                    anchors.fill="{label}"
+                    onClicked="wrapper.state='opened'"/>
+                <Contact id="details"
+                    anchors.fill="{parent}"
+                    contactid="{model.contactid}"
+                    label="{model.label}"
+                    email="{model.email}"
+                    phone="{model.phone}"
+                    opacity="0"/>
+                <states>
+                    <State name='opened'>
+                        <SetProperty target="{wrapper}" property="height" value="{contactListView.height}"/>
+                        <SetProperty target="{contactListView}" property="yPosition" value="{wrapper.y}"/>
+                        <SetProperty target="{contactListView}" property="locked" value="1"/>
+                        <SetProperty target="{label}" property="opacity" value="0"/>
+                        <SetProperty target="{details}" property="opacity" value="1"/>
+                    </State>
+                </states>
+                <transitions>
+                    <Transition>
+                        <NumericAnimation duration="500" properties="yPosition,height,opacity"/>
+                    </Transition>
+                </transitions>
+                <Connection sender="{cancelEditButton}" signal="clicked()">
+                    if (wrapper.state == 'opened') {
+                        wrapper.state = '';
+                    }
+                </Connection>
+            </Item>
+        </Component>
+    </resources>
+    <Button id="cancelEditButton"
+        anchors.top="{parent.top}" anchors.topMargin="5"
+        anchors.right="{parent.right}" anchors.rightMargin="5"
+        icon="../shared/pics/cancel.png"/>
+    <ListView id="contactListView"
+        anchors.left="{parent.left}"
+        anchors.right="{parent.right}"
+        anchors.top="{cancelEditButton.bottom}"
+        anchors.bottom="{parent.bottom}"
+        clip="true"
+        model="{contactList}"
+        delegate="{contactDelegate}"/>
+</Item>
diff --git a/examples/declarative/tutorials/contacts/3_Collections/ContactView3.qml b/examples/declarative/tutorials/contacts/3_Collections/ContactView3.qml
new file mode 100644
index 0000000..a5d88a1
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/3_Collections/ContactView3.qml
@@ -0,0 +1,67 @@
+<Item id="contacts">
+    <resources>
+        <SqlConnection id="contactDatabase" name="qmlConnection" driver="QSQLITE" databaseName="../shared/contacts.sqlite"/>
+        <SqlQuery id="contactList" connection="{contactDatabase}">
+            <query>SELECT recid AS contactid, label, email, phone FROM contacts ORDER BY label, recid</query>
+        </SqlQuery>
+        <Component id="contactDelegate">
+            <Item id="wrapper"
+                x="0"
+                width="{ListView.view.width}" height="34">
+                <Text id="label"
+                    x="40" y="12"
+                    width="{parent.width-30}" 
+                    text="{model.label}"
+                    color="white"
+                    font.bold="true">
+                </Text>
+                <MouseRegion
+                    anchors.fill="{label}">
+                    <onClicked>
+                        Details.qml = 'Contact.qml';
+                        wrapper.state='opened';
+                    </onClicked>
+                </MouseRegion>
+                <Item id="Details"
+                    anchors.fill="{wrapper}"
+                    opacity="0">
+                    <Bind target="{Details.qmlItem}" property="contactid" value="{model.contactid}"/>
+                    <Bind target="{Details.qmlItem}" property="label" value="{model.label}"/>
+                    <Bind target="{Details.qmlItem}" property="phone" value="{model.phone}"/>
+                    <Bind target="{Details.qmlItem}" property="email" value="{model.email}"/>
+                </Item>
+                <states>
+                    <State name='opened'>
+                        <SetProperty target="{wrapper}" property="height" value="{contactListView.height}"/>
+                        <SetProperty target="{contactListView}" property="yPosition" value="{wrapper.y}"/>
+                        <SetProperty target="{contactListView}" property="locked" value="1"/>
+                        <SetProperty target="{label}" property="opacity" value="0"/>
+                        <SetProperty target="{Details}" property="opacity" value="1"/>
+                    </State>
+                </states>
+                <transitions>
+                    <Transition>
+                        <NumericAnimation duration="500" properties="yPosition,height,opacity"/>
+                    </Transition>
+                </transitions>
+                <Connection sender="{cancelEditButton}" signal="clicked()">
+                    if (wrapper.state == 'opened') {
+                        wrapper.state = '';
+                    }
+                </Connection>
+            </Item>
+        </Component>
+    </resources>
+    <Button id="cancelEditButton"
+        anchors.top="{parent.top}" anchors.topMargin="5"
+        anchors.right="{parent.right}" anchors.rightMargin="5"
+        icon="../shared/pics/cancel.png"/>
+    <ListView id="contactListView"
+        anchors.left="{parent.left}"
+        anchors.right="{parent.right}"
+        anchors.top="{cancelEditButton.bottom}"
+        anchors.bottom="{parent.bottom}"
+        clip="true"
+        model="{contactList}"
+        delegate="{contactDelegate}"/>
+</Item>
diff --git a/examples/declarative/tutorials/contacts/3_Collections/FieldText.qml b/examples/declarative/tutorials/contacts/3_Collections/FieldText.qml
new file mode 100644
index 0000000..a4df42b
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/3_Collections/FieldText.qml
@@ -0,0 +1,98 @@
+<Rect id="fieldText"
+    height="30"
+    radius="5"
+    color="black">
+    <properties>
+        <Property
+            name="text"
+            value=""
+            onValueChanged="reset()"/>
+        <Property
+            name="label"
+            value=""/>
+    </properties>
+    <signals>
+        <Signal name="confirmed"/>
+    </signals>
+    <resources>
+        <Script>
+            function edit() {
+                if (!page.mouseGrabbed) {
+                    fieldText.state='editing';
+                    page.mouseGrabbed=true;
+                }
+            }
+            function confirm() {
+                fieldText.text = textEdit.text;
+                fieldText.state='';
+                page.mouseGrabbed=false;
+                fieldText.confirmed.emit();
+            }
+            function reset() {
+                textEdit.text = fieldText.text;
+                fieldText.state='';
+                page.mouseGrabbed=false;
+            }
+        </Script>
+    </resources>
+    <Image id="cancelIcon"
+        width="22" height="22"
+        anchors.right="{parent.right}" anchors.rightMargin="4"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        src="../shared/pics/cancel.png"
+        opacity="0"/>
+    <Image id="confirmIcon"
+        width="22" height="22"
+        anchors.left="{parent.left}" anchors.leftMargin="4"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        src="../shared/pics/ok.png"
+        opacity="0"/>
+    <TextEdit id="textEdit"
+        anchors.left="{parent.left}" anchors.leftMargin="0"
+        anchors.right="{parent.right}" anchors.rightMargin="0"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        color="white"
+        font.bold="true"
+        readOnly="true"
+        wrap="false"
+        />
+    <Text id="textLabel"
+        x="5" width="{parent.width-10}"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        hAlign="AlignHCenter"
+        color="#505050"
+        font.italic="true"
+        text="{fieldText.label}"
+        opacity="{textEdit.text != '' ? 0 : 1}">
+        <opacity>
+            <Behaviour>
+                <NumericAnimation property="opacity" duration="250"/>
+            </Behaviour>
+        </opacity>
+    </Text>
+    <MouseRegion anchors.fill="{cancelIcon}" onClicked="reset()"/>
+    <MouseRegion anchors.fill="{confirmIcon}" onClicked="confirm()"/>
+    <MouseRegion
+        id="editRegion"
+        anchors.fill="{textEdit}"
+        onClicked="edit()"/>
+    <states>
+        <State name="editing">
+            <SetProperty target="{confirmIcon}" property="opacity" value="1"/>
+            <SetProperty target="{cancelIcon}" property="opacity" value="1"/>
+            <SetProperty target="{fieldText}" property="color" value="white"/>
+            <SetProperty target="{textEdit}" property="color" value="black"/>
+            <SetProperty target="{textEdit}" property="readOnly" value="false"/>
+            <SetProperty target="{textEdit}" property="focus" value="true"/>
+            <SetProperty target="{editRegion}" property="opacity" value="0"/>
+            <SetProperty target="{textEdit.anchors}" property="leftMargin" value="34"/>
+            <SetProperty target="{textEdit.anchors}" property="rightMargin" value="34"/>
+        </State>
+    </states>
+    <transitions>
+        <Transition fromState='' toState="*" reversible="true">
+            <NumericAnimation properties="opacity,leftMargin,rightMargin" duration="200"/>
+            <ColorAnimation duration="150"/>
+        </Transition>
+    </transitions>
+</Rect>
diff --git a/examples/declarative/tutorials/contacts/3_Collections/RemoveButton.qml b/examples/declarative/tutorials/contacts/3_Collections/RemoveButton.qml
new file mode 100644
index 0000000..a489e95
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/3_Collections/RemoveButton.qml
@@ -0,0 +1,80 @@
+<Rect id="removeButton"
+    width="30" height="30"
+    color="red"
+    radius="5">
+    <properties>
+        <Property name="expandedWidth" value="230"/>
+    </properties>
+    <signals>
+        <Signal name="confirmed"/>
+    </signals>
+    <resources>
+        <Script>
+            function toggle() {
+                print('removeButton.toggle()');
+                if (removeButton.state == 'opened') {
+                    removeButton.state = '';
+                    page.mouseGrabbed=false;
+                } else {
+                    if (!page.mouseGrabbed) {
+                        removeButton.state = 'opened';
+                        page.mouseGrabbed=true;
+                    }
+                }
+            }
+        </Script>
+    </resources>
+    <Image id="trashIcon"
+        width="22" height="22"
+        anchors.right="{parent.right}" anchors.rightMargin="4"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        src="../shared/pics/trash.png"
+        opacity="1">
+        <MouseRegion
+            anchors.fill="{parent}"
+            onClicked="toggle()"/>
+    </Image>
+    <Image id="cancelIcon"
+        width="22" height="22"
+        anchors.right="{parent.right}" anchors.rightMargin="4"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        src="../shared/pics/cancel.png"
+        opacity="0">
+        <MouseRegion
+            anchors.fill="{parent}"
+            onClicked="toggle()"/>
+    </Image>
+    <Image id="confirmIcon"
+        width="22" height="22"
+        anchors.left="{parent.left}" anchors.leftMargin="4"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        src="../shared/pics/ok.png"
+        opacity="0">
+        <MouseRegion
+            anchors.fill="{parent}"
+            onClicked="toggle(); removeButton.confirmed.emit()"/>
+    </Image>
+    <Text id="text"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        anchors.left="{confirmIcon.right}" anchors.leftMargin="4"
+        anchors.right="{cancelIcon.left}" anchors.rightMargin="4"
+        font.bold="true"
+        color="white"
+        hAlign="AlignHCenter"
+        text="Remove"
+        opacity="0"/>
+    <states>
+        <State name="opened">
+            <SetProperty target="{removeButton}" property="width" value="{removeButton.expandedWidth}"/>
+            <SetProperty target="{text}" property="opacity" value="1"/>
+            <SetProperty target="{confirmIcon}" property="opacity" value="1"/>
+            <SetProperty target="{cancelIcon}" property="opacity" value="1"/>
+            <SetProperty target="{trashIcon}" property="opacity" value="0"/>
+        </State>
+    </states>
+    <transitions>
+        <Transition fromState="*" toState="opened" reversible="true">
+            <NumericAnimation properties="opacity,x,width" duration="200"/>
+        </Transition>
+    </transitions>
+</Rect>
diff --git a/examples/declarative/tutorials/contacts/shared/contacts.sqlite b/examples/declarative/tutorials/contacts/shared/contacts.sqlite
new file mode 100644
index 0000000..7347adc
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/shared/contacts.sqlite
diff --git a/examples/declarative/tutorials/contacts/shared/pics/cancel.png b/examples/declarative/tutorials/contacts/shared/pics/cancel.png
new file mode 100644
index 0000000..ecc9533
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/shared/pics/cancel.png
diff --git a/examples/declarative/tutorials/contacts/shared/pics/email.png b/examples/declarative/tutorials/contacts/shared/pics/email.png
new file mode 100644
index 0000000..04b3865
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/shared/pics/email.png
diff --git a/examples/declarative/tutorials/contacts/shared/pics/new.png b/examples/declarative/tutorials/contacts/shared/pics/new.png
new file mode 100644
index 0000000..c7ebac3
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/shared/pics/new.png
diff --git a/examples/declarative/tutorials/contacts/shared/pics/ok.png b/examples/declarative/tutorials/contacts/shared/pics/ok.png
new file mode 100644
index 0000000..5795f04
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/shared/pics/ok.png
diff --git a/examples/declarative/tutorials/contacts/shared/pics/phone.png b/examples/declarative/tutorials/contacts/shared/pics/phone.png
new file mode 100644
index 0000000..fc9c222
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/shared/pics/phone.png
diff --git a/examples/declarative/tutorials/contacts/shared/pics/search.png b/examples/declarative/tutorials/contacts/shared/pics/search.png
new file mode 100644
index 0000000..cc74e69
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/shared/pics/search.png
diff --git a/examples/declarative/tutorials/contacts/shared/pics/trash.png b/examples/declarative/tutorials/contacts/shared/pics/trash.png
new file mode 100644
index 0000000..2042595
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/shared/pics/trash.png
diff --git a/examples/declarative/tutorials/contacts/t8/Button.qml b/examples/declarative/tutorials/contacts/t8/Button.qml
new file mode 100644
index 0000000..63c4636
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/t8/Button.qml
@@ -0,0 +1,33 @@
+<Item width="30" height="30" id="button">
+    <properties>
+        <Property name="icon"/>
+    </properties>
+    <signals>
+        <Signal name="clicked"/>
+    </signals>
+    <Rect id="buttonRect" color="lightgreen" anchors.fill="{parent}" radius="5">
+        <Image id="iconImage"
+            src="{button.icon}"
+            anchors.horizontalCenter="{buttonRect.horizontalCenter}"
+            anchors.verticalCenter="{buttonRect.verticalCenter}"/>
+        <MouseRegion id="buttonMouseRegion" anchors.fill="{buttonRect}" onClicked="button.clicked.emit()"/>
+        <states>
+            <State name="pressed" when="{buttonMouseRegion.pressed == true}">
+                <SetProperty target="{buttonRect}" property="color" value="green"/>
+            </State>
+        </states>
+        <transitions>
+            <Transition fromState="*" toState="pressed">
+                <ColorAnimation duration="200"/>
+            </Transition>
+            <Transition fromState="pressed" toState="*">
+                <ColorAnimation duration="1000"/>
+            </Transition>
+        </transitions>
+    </Rect>
+    <opacity>
+        <Behaviour>
+            <NumericAnimation property="opacity" duration="250"/>
+        </Behaviour>
+    </opacity>
+</Item>
diff --git a/examples/declarative/tutorials/contacts/t8/Contact.qml b/examples/declarative/tutorials/contacts/t8/Contact.qml
new file mode 100644
index 0000000..5852b43
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/t8/Contact.qml
@@ -0,0 +1,80 @@
+<Item id="contactDetails" anchors.fill="{parent}">
+    <properties>
+        <Property name="label" onValueChanged="c_label.value = label"/>
+        <Property name="contactid" value=""/>
+        <Property name="phone" onValueChanged="c_phone.value = phone"/>
+        <Property name="email" onValueChanged="c_email.value = email"/>
+        <Property name="mode" value="closed"/>
+    </properties>
+    <signals>
+        <Signal name="open"/>
+        <Signal name="close"/>
+        <Signal name="confirm"/>
+        <Signal name="cancel"/>
+    </signals>
+    <resources>
+        <SqlQuery id="updateContactQuery" connection="{contactDatabase}">
+            <query>UPDATE contacts SET label = :l, email = :e, phone = :p WHERE recid = :r</query>
+            <bindings>
+                <SqlBind name=":r" value="{contactid}"/>
+                <SqlBind name=":l" value="{c_label.value}"/>
+                <SqlBind name=":e" value="{c_email.value}"/>
+                <SqlBind name=":p" value="{c_phone.value}"/>
+            </bindings>
+        </SqlQuery>
+        <SqlQuery id="insertContactQuery" connection="{contactDatabase}">
+            <query>INSERT INTO contacts (label, email, phone) VALUES(:l, :e, :p)</query>
+            <bindings>
+                <SqlBind name=":l" value="{c_label.value}"/>
+                <SqlBind name=":e" value="{c_email.value}"/>
+                <SqlBind name=":p" value="{c_phone.value}"/>
+            </bindings>
+        </SqlQuery>
+    </resources>
+    <Connection sender="{contactDetails}" signal="cancel()">
+        c_label.value = label;
+        c_phone.value = phone;
+        c_email.value = email;
+        contactDetails.close.emit();
+    </Connection>
+    <Connection sender="{contactDetails}" signal="confirm()">
+        if (c_label.value != '') {
+            if (contactid == '') {
+                insertContactQuery.exec();
+                c_label.value = label;
+                c_phone.value = phone;
+                c_email.value = email;
+            } else {
+                updateContactQuery.exec();
+            }
+            contactList.exec();
+        }
+        contactDetails.close.emit();
+    </Connection>
+    <VerticalLayout id="layout" anchors.fill="{parent}" spacing="5" margin="5">
+        <Field id="c_label" label="Name"
+            editable="{mode == 'opened' ? 1 : 0}"
+            anchors.left="{layout.left}" anchors.leftMargin="5"
+            anchors.right="{layout.right}" anchors.rightMargin="5"/>
+        <Field id="c_phone" icon="../shared/pics/phone.png" label="Phone"
+            opacity="0" editable="{mode == 'opened' ? 1 : 0}"
+            anchors.left="{layout.left}" anchors.leftMargin="5"
+            anchors.right="{layout.right}" anchors.rightMargin="5"/>
+        <Field id="c_email" icon="../shared/pics/email.png" label="Email"
+            opacity="0" editable="{mode == 'opened' ? 1 : 0}"
+            anchors.left="{layout.left}" anchors.leftMargin="5"
+            anchors.right="{layout.right}" anchors.rightMargin="5"/>
+    </VerticalLayout>
+    <MouseRegion anchors.fill="{contactDetails}" onClicked="contactDetails.open.emit()" z="{mode=='opened' ? -1 : 1}"/>
+    <states>
+        <State name="opened" when="{mode == 'opened'}">
+            <SetProperty target="{c_phone}" property="opacity" value="1"/>
+            <SetProperty target="{c_email}" property="opacity" value="1"/>
+        </State>
+    </states>
+    <transitions>
+        <Transition fromState="*" toState="opened" reversible="true">
+            <NumericAnimation target="{contactFields}" properties="opacity" duration="200"/>
+        </Transition>
+    </transitions>
+</Item>
diff --git a/examples/declarative/tutorials/contacts/t8/Field.qml b/examples/declarative/tutorials/contacts/t8/Field.qml
new file mode 100644
index 0000000..0191ef8
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/t8/Field.qml
@@ -0,0 +1,54 @@
+<Item height="30" width="200" id="field">
+    <properties>
+        <Property name="value" onValueChanged="fieldText.text=field.value"/>
+        <Property name="icon"/>
+        <Property name="editable" value="0"/>
+        <Property name="label"/>
+    </properties>
+    <Item id="fieldSelector" width="30" height="30"
+        x="0"
+        anchors.top="{parent.top}"
+        anchors.bottom="{parent.bottom}">
+        <Image src="{field.icon}"
+            anchors.verticalCenter="{parent.verticalCenter}"
+            anchors.horizontalCenter="{parent.horizontalCenter}"/>
+    </Item>
+    <FieldText id="fieldText"
+        label="{field.label}"
+        width="{field.width-70}"
+        anchors.left="{fieldSelector.right}"
+        anchors.leftMargin="5"
+        anchors.top="{parent.top}"
+        anchors.bottom="{parent.bottom}"
+        onTextEdited="field.value = fieldText.text"/>
+    <FieldRemover id="fieldRemover"
+        anchors.left="{fieldText.right}"
+        anchors.leftMargin="5"
+        anchors.top="{parent.top}"
+        anchors.bottom="{parent.bottom}"
+        onConfirm="fieldText.text = ''"
+        opacity="{field.editable}"/>
+    <states>
+        <State name="textFill" when="{fieldText.open == 'true'}">
+            <SetProperty target="{fieldText}" property="width" value="{field.width}"/>
+            <SetProperty target="{fieldText}" property="x" value="0"/>
+            <SetProperty target="{fieldRemover}" property="opacity" value="0"/>
+            <SetProperty target="{fieldSelector}" property="opacity" value="0"/>
+            <SetProperty target="{fieldSelector}" property="x" value="{-5-fieldSelector.width}"/>
+        </State>
+        <State name="removerFill" when="{fieldRemover.open == 'true'}">
+            <SetProperty target="{fieldRemover}" property="width" value="{field.width}"/>
+            <SetProperty target="{fieldRemover}" property="x" value="0"/>
+            <SetProperty target="{fieldText}" property="opacity" value="0"/>
+            <SetProperty target="{fieldSelector}" property="opacity" value="0"/>
+            <SetProperty target="{fieldSelector}" property="x" value="{-10-fieldText.width-fieldSelector.width}"/>
+        </State>
+    </states>
+    <transitions>
+        <Transition fromState="*" toState="*">
+            <NumericAnimation target="{fieldSelector}" properties="width,x,opacity" duration="200"/>
+            <NumericAnimation target="{fieldText}" properties="width,x,opacity" duration="200"/>
+            <NumericAnimation target="{fieldRemover}" properties="width,x,opacity" duration="200"/>
+        </Transition>
+    </transitions>
+</Item>
diff --git a/examples/declarative/tutorials/contacts/t8/FieldRemover.qml b/examples/declarative/tutorials/contacts/t8/FieldRemover.qml
new file mode 100644
index 0000000..a7dad64
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/t8/FieldRemover.qml
@@ -0,0 +1,57 @@
+<Item height="30" width="30" id="fieldRemover" clip="true">
+    <properties>
+        <Property name="open" value="false"/>
+    </properties>
+    <signals>
+        <Signal name="confirm"/>
+    </signals>
+    <resources>
+        <Script>
+            function toggle() {
+                if (fieldRemover.state=='opened') {
+                    fieldRemover.state='';
+                    open='false';
+                    Page.mouseGrabbed='false';
+                } else {
+                    if (Page.mouseGrabbed != 'true') {
+                        fieldRemover.state='opened';
+                        open='true';
+                        Page.mouseGrabbed='true';
+                    }
+                }
+            }
+        </Script>
+    </resources>
+    <Rect id="border" anchors.fill="{parent}" color="red" radius="5"/>
+    <Image id="trashIcon" src="../shared/pics/trash.png"
+        width="22" height="22"
+        anchors.right="{parent.right}" anchors.rightMargin="4"
+        anchors.verticalCenter="{parent.verticalCenter}"/>
+    <Image id="cancelIcon" src="../shared/pics/cancel.png"
+        width="22" height="22" opacity="0"
+        anchors.right="{parent.right}" anchors.rightMargin="4"
+        anchors.verticalCenter="{parent.verticalCenter}"/>
+    <Image id="confirmIcon" src="../shared/pics/ok.png"
+        width="22" height="22" opacity="0"
+        anchors.left="{parent.left}" anchors.leftMargin="4"
+        anchors.verticalCenter="{parent.verticalCenter}"/>
+    <Text id="text" opacity="0" text="Remove" font.bold="true" color="white" hAlign="AlignHCenter"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        anchors.left="{confirmIcon.right}" anchors.leftMargin="4"
+        anchors.right="{cancelIcon.left}" anchors.rightMargin="4"/>
+    <MouseRegion anchors.fill="{confirmIcon}" onClicked="toggle(); fieldRemover.confirm.emit()"/>
+    <MouseRegion anchors.fill="{trashIcon}" onClicked="toggle()"/>
+    <states>
+        <State name="opened">
+            <SetProperty target="{text}" property="opacity" value="1"/>
+            <SetProperty target="{confirmIcon}" property="opacity" value="1"/>
+            <SetProperty target="{cancelIcon}" property="opacity" value="1"/>
+            <SetProperty target="{trashIcon}" property="opacity" value="0"/>
+        </State>
+    </states>
+    <transitions>
+        <Transition fromState="*" toState="opened" reversible="true">
+            <NumericAnimation properties="opacity,x,width" duration="200"/>
+        </Transition>
+    </transitions>
+</Item>
diff --git a/examples/declarative/tutorials/contacts/t8/FieldText.qml b/examples/declarative/tutorials/contacts/t8/FieldText.qml
new file mode 100644
index 0000000..d3a158a
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/t8/FieldText.qml
@@ -0,0 +1,89 @@
+<Item height="30" id="fieldText">
+    <properties>
+        <Property name="open" value="false"/>
+        <Property name="text" value="" onValueChanged="setText(fieldText.text)"/>
+        <Property name="label" value=""/>
+    </properties>
+    <signals>
+        <Signal name="textEdited"/>
+    </signals>
+    <resources>
+        <Script>
+            function start() {
+                if (Page.mouseGrabbed != 'true') {
+                    fieldText.state='editing';
+                    open='true';
+                    Page.mouseGrabbed='true';
+                }
+            }
+            function confirm() {
+                fieldText.text = textEdit.text;
+                fieldText.state='';
+                open='false';
+                Page.mouseGrabbed='false';
+                fieldText.textEdited.emit();
+            }
+            function cancel() {
+                textEdit.text = fieldText.text;
+                fieldText.state='';
+                open='false';
+                Page.mouseGrabbed='false';
+            }
+            function setText(value) {
+                if (textEdit.text != value) {
+                    fieldText.state='';
+                    open='false';
+                    textEdit.text = value;
+                }
+            }
+        </Script>
+    </resources>
+    <Rect id="border" radius="5" anchors.fill="{parent}" color="{field.editable == 1 ? '#202020' : '#000000'}">
+        <TextEdit id="textEdit" vAlign="AlignVCenter" text=""
+            readOnly="true" font.bold="true" wrap="false" color="white"
+            x="5" width="{parent.width-10}"
+            anchors.verticalCenter="{parent.verticalCenter}"
+            />
+        <Text id="textLabel" vAlign="AlignVCenter" hAlign="AlignHCenter"
+            color="#505050" font.italic="true"
+            anchors.fill="{border}" text="{fieldText.label}"
+            opacity="{textEdit.text == '' ? 1 : 0}">
+            <opacity>
+                <Behaviour>
+                    <NumericAnimation target="{textLabel}" property="opacity" duration="250"/>
+                </Behaviour>
+            </opacity>
+        </Text>
+        <Image id="cancelIcon" src="../shared/pics/cancel.png"
+            width="22" height="22" opacity="0"
+            anchors.right="{parent.right}" anchors.rightMargin="4"
+            anchors.verticalCenter="{parent.verticalCenter}"/>
+        <Image id="confirmIcon" src="../shared/pics/ok.png"
+            width="22" height="22" opacity="0"
+            anchors.left="{parent.left}" anchors.leftMargin="4"
+            anchors.verticalCenter="{parent.verticalCenter}"/>
+        <MouseRegion anchors.fill="{cancelIcon}" onClicked="cancel()"/>
+        <MouseRegion anchors.fill="{confirmIcon}" onClicked="confirm()"/>
+        <MouseRegion id="editRegion" anchors.fill="{textEdit}" onClicked="start()"/>
+    </Rect>
+    <states>
+        <State name="editing">
+            <SetProperty target="{confirmIcon}" property="opacity" value="1"/>
+            <SetProperty target="{cancelIcon}" property="opacity" value="1"/>
+            <SetProperty target="{border}" property="color" value="white"/>
+            <SetProperty target="{textEdit}" property="color" value="black"/>
+            <SetProperty target="{textEdit}" property="readOnly" value="false"/>
+            <SetProperty target="{textEdit}" property="focus" value="true"/>
+            <SetProperty target="{textEdit}" property="x" value="35"/>
+            <SetProperty target="{editRegion}" property="opacity" value="0"/>
+        </State>
+    </states>
+    <transitions>
+        <Transition fromState='' toState="*" reversible="true">
+            <NumericAnimation target="{textEdit}" properties="x" duration="200"/>
+            <NumericAnimation target="{confirmIcon}" properties="opacity" duration="200"/>
+            <NumericAnimation target="{cancelIcon}" properties="opacity" duration="200"/>
+            <ColorAnimation duration="150"/>
+        </Transition>
+    </transitions>
+</Item>
diff --git a/examples/declarative/tutorials/contacts/t8/SearchBar.qml b/examples/declarative/tutorials/contacts/t8/SearchBar.qml
new file mode 100644
index 0000000..f8e1a6a
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/t8/SearchBar.qml
@@ -0,0 +1,16 @@
+<Item height="30" width="{parent.width}">
+    <properties>
+        <Property name="text" value="{searchEdit.text}"/>
+    </properties>
+    <Rect color="white" anchors.fill="{parent}">
+        <Image id="searchIcon" src="../shared/pics/search.png"
+            anchors.left="{parent.left}" anchors.leftMargin="5"
+            anchors.verticalCenter="{parent.verticalCenter}"/>
+        <TextEdit id="searchEdit" focus="{Page.listShown == 1}" 
+            anchors.left="{searchIcon.right}" anchors.right="{parent.right}"
+            anchors.leftMargin="5" anchors.rightMargin="5"
+            anchors.verticalCenter="{parent.verticalCenter}"
+            readOnly="false" wrap="false"/>
+    </Rect>
+</Item>
+
diff --git a/examples/declarative/tutorials/contacts/t8/contacts.qml b/examples/declarative/tutorials/contacts/t8/contacts.qml
new file mode 100644
index 0000000..f76ccfd
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/t8/contacts.qml
@@ -0,0 +1,133 @@
+<Rect id="Page" color="black" width="240" height="320">
+    <properties>
+        <Property name="listShown" value="1"/>
+        <Property name="mode" value="list"/>
+        <Property name="mouseGrabbed" value="false"/>
+    </properties>
+    <resources>
+        <SqlConnection id="contactDatabase" name="qmlConnection" driver="QSQLITE" databaseName="../shared/contacts.sqlite"/>
+        <SqlQuery id="contactList" connection="{contactDatabase}">
+            <query>SELECT recid, label, email, phone FROM contacts WHERE lower(label) LIKE lower(:searchTerm) ORDER BY label, recid</query>
+            <bindings>
+                <SqlBind name=":searchTerm" value="{searchBar.text + '%' }"/>
+            </bindings>
+        </SqlQuery>
+        <Component id="contactDelegate">
+            <Item id="wrapper" x="0" width="{ListView.view.width}" height="34">
+                <Text id="label" x="45" y="12" text="{model.label}" color="white" font.bold="true" width="{parent.width-30}" opacity="{listShown}"/>
+                <Item id="Details" anchors.fill="{wrapper}">
+                    <Bind target="{Details.qmlItem}" property="contactid" value="{model.recid}"/>
+                    <Bind target="{Details.qmlItem}" property="mode" value="{wrapper.state}"/>
+                    <Bind target="{Details.qmlItem}" property="label" value="{model.label}"/>
+                    <Bind target="{Details.qmlItem}" property="phone" value="{model.phone}"/>
+                    <Bind target="{Details.qmlItem}" property="email" value="{model.email}"/>
+                </Item>
+                <MouseRegion anchors.fill="{label}" opacity="{listShown}">
+                    <onClicked>
+                        Details.qml = 'Contact.qml';
+                        wrapper.state='opened';
+                    </onClicked>
+                </MouseRegion>
+                <states>
+                    <State name='opened'>
+                        <SetProperty target="{wrapper}" property="height" value="{contactListView.height}"/>
+                        <SetProperty target="{contactListView}" property="yPosition" value="{wrapper.y}"/>
+                        <SetProperty target="{contactListView}" property="locked" value="1"/>
+                        <SetProperty target="{Details.qmlItem}" property="mode" value="opened"/>
+                        <SetProperty target="{Page}" property="mode" value="editExisting"/>
+                    </State>
+                </states>
+                <transitions>
+                    <Transition>
+                        <NumericAnimation duration="500" properties="yPosition,height,opacity"/>
+                    </Transition>
+                </transitions>
+                <Connection sender="{confirmEditButton}" signal="clicked()">
+                    if (Details.qmlItem.mode == 'opened' &amp;&amp; Page.mouseGrabbed != 'true') {
+                        Details.qmlItem.mode = 'closed';
+                        wrapper.state = "";
+                        Details.qmlItem.confirm.emit();
+                    }
+                </Connection>
+                <Connection sender="{cancelEditButton}" signal="clicked()">
+                    if (Details.qmlItem.mode == 'opened' &amp;&amp; Page.mouseGrabbed != 'true') {
+                        Details.qmlItem.mode = 'closed';
+                        wrapper.state = "";
+                        Details.qmlItem.cancel.emit();
+                    }
+                </Connection>
+            </Item>
+        </Component>
+    </resources>
+    <Button id="newContactButton" icon="../shared/pics/new.png"
+        anchors.top="{parent.top}" anchors.topMargin="5"
+        anchors.right="{parent.right}" anchors.rightMargin="5"
+        onClicked="newContactItem.label = ''; newContactItem.phone = ''; newContactItem.email = ''; Page.mode = 'editNew'"
+        opacity="{Page.mode == 'list' ? 1 : 0}"/>
+    <Button id="cancelEditButton" icon="../shared/pics/cancel.png"
+        anchors.top="{parent.top}" anchors.topMargin="5"
+        anchors.right="{parent.right}" anchors.rightMargin="5"
+        opacity="{Page.mode == 'list' || Page.mouseGrabbed == 'true' ? 0 : 1}"/>
+    <Button id="confirmEditButton" icon="../shared/pics/ok.png"
+        anchors.top="{parent.top}" anchors.topMargin="5"
+        anchors.left="{parent.left}" anchors.leftMargin="5"
+        opacity="{Page.mode == 'list' || Page.mouseGrabbed == 'true' ? 0 : 1}"/>
+    <FocusRealm id="searchBarRealm"
+        height="30"
+        anchors.bottom="{parent.bottom}"
+        anchors.left="{parent.left}" anchors.right="{parent.right}"
+        focus="{Page.mode == 'list' ? 'true' : 'false'}">
+        <SearchBar id="searchBar" anchors.fill="{parent}">
+            <states>
+                <State name="searchHidden" when="{searchBar.text == '' || Page.listShown == 0}">
+                    <SetProperty target="{searchBarRealm}" property="anchors.bottomMargin" value="-30"/>
+                </State>
+            </states>
+            <transitions>
+                <Transition fromState="*" toState="*">
+                    <NumericAnimation property="bottomMargin" duration="250"/>
+                </Transition>
+            </transitions>
+        </SearchBar>
+    </FocusRealm>
+    <ListView id="contactListView" model="{contactList}" delegate="{contactDelegate}"
+        anchors.top="{newContactButton.bottom}" anchors.topMargin="10"
+        anchors.left="{parent.left}" anchors.right="{parent.right}"
+        anchors.bottom="{searchBarRealm.top}"
+        clip="true"
+        focus="{Page.mode == 'list' ? 'false' : 'true'}"
+        />
+    <Contact id="newContactItem"
+        mode="opened"
+        anchors.top="{newContactButton.bottom}" anchors.topMargin="10"
+        anchors.left="{parent.left}" anchors.right="{parent.right}"
+        anchors.bottom="{searchBarRealm.top}"
+        onClose="Page.mode='list'"
+        opacity="0"
+    />
+    <Connection sender="{confirmEditButton}" signal="clicked()">
+        if (Page.mode == 'editNew' &amp;&amp; Page.mouseGrabbed != 'true') {
+            newContactItem.confirm.emit()
+        }
+    </Connection>
+    <Connection sender="{cancelEditButton}" signal="clicked()">
+        if (Page.mode == 'editNew' &amp;&amp; Page.mouseGrabbed != 'true') {
+            newContactItem.cancel.emit()
+        }
+    </Connection>
+    <states>
+        <State name="editExistingState" when="{Page.mode == 'editExisting'}">
+            <SetProperty target="{Page}" property="listShown" value="0"/>
+        </State>
+        <State name="editNewState" when="{Page.mode == 'editNew'}">
+            <SetProperty target="{Page}" property="listShown" value="0"/>
+            <SetProperty target="{contactListView}" property="opacity" value="0"/>
+            <SetProperty target="{newContactItem}" property="opacity" value="1"/>
+        </State>
+    </states>
+    <transitions>
+        <Transition fromState="*" toState="*">
+            <NumericAnimation property="opacity" duration="500"/>
+        </Transition>
+    </transitions>
+</Rect>
diff --git a/examples/declarative/tutorials/t1/tutorial1.qml b/examples/declarative/tutorials/t1/tutorial1.qml
new file mode 100644
index 0000000..e4de571
--- /dev/null
+++ b/examples/declarative/tutorials/t1/tutorial1.qml
@@ -0,0 +1,3 @@
+<Rect id="Page" width="480" height="200" color="white">
+    <Text id="HelloText" text="Hello world!" font.size="24" font.bold="true" y="30" anchors.horizontalCenter="{Page.horizontalCenter}"/>
+</Rect>
diff --git a/examples/declarative/tutorials/t2/Cell.qml b/examples/declarative/tutorials/t2/Cell.qml
new file mode 100644
index 0000000..5d6ff52
--- /dev/null
+++ b/examples/declarative/tutorials/t2/Cell.qml
@@ -0,0 +1,7 @@
+<Item id="CellContainer" width="40" height="25">
+    <properties>
+        <Property name="color"/>
+    </properties>
+    <Rect anchors.fill="{parent}" color="{CellContainer.color}"/>
+    <MouseRegion anchors.fill="{parent}" onClicked="HelloText.color = CellContainer.color" />
+</Item>
diff --git a/examples/declarative/tutorials/t2/tutorial2.qml b/examples/declarative/tutorials/t2/tutorial2.qml
new file mode 100644
index 0000000..1e3af16
--- /dev/null
+++ b/examples/declarative/tutorials/t2/tutorial2.qml
@@ -0,0 +1,11 @@
+<Rect id="Page" width="480" height="200" color="white">
+    <Text id="HelloText" text="Hello world!" font.size="24" font.bold="true" y="30" anchors.horizontalCenter="{Page.horizontalCenter}"/>
+    <GridLayout id="ColorPicker" x="0" anchors.bottom="{Page.bottom}" width="120" height="50" columns="3" rows="2">
+        <Cell color="#ff0000"/>
+        <Cell color="#00ff00"/>
+        <Cell color="#0000ff"/>
+        <Cell color="#ffff00"/>
+        <Cell color="#00ffff"/>
+        <Cell color="#ff00ff"/>
+    </GridLayout>
+</Rect>
diff --git a/examples/declarative/tutorials/t3/Cell.qml b/examples/declarative/tutorials/t3/Cell.qml
new file mode 100644
index 0000000..5d6ff52
--- /dev/null
+++ b/examples/declarative/tutorials/t3/Cell.qml
@@ -0,0 +1,7 @@
+<Item id="CellContainer" width="40" height="25">
+    <properties>
+        <Property name="color"/>
+    </properties>
+    <Rect anchors.fill="{parent}" color="{CellContainer.color}"/>
+    <MouseRegion anchors.fill="{parent}" onClicked="HelloText.color = CellContainer.color" />
+</Item>
diff --git a/examples/declarative/tutorials/t3/tutorial3.qml b/examples/declarative/tutorials/t3/tutorial3.qml
new file mode 100644
index 0000000..f9f1415
--- /dev/null
+++ b/examples/declarative/tutorials/t3/tutorial3.qml
@@ -0,0 +1,27 @@
+<Rect id="Page" width="480" height="200" color="white">
+    <Text id="HelloText" text="Hello world!" font.size="24" font.bold="true" y="30" anchors.horizontalCenter="{Page.horizontalCenter}">
+        <states>
+            <State name="down" when="{MouseRegion.pressed == true}">
+                <SetProperty target="{HelloText}" property="y" value="160"/>
+                <SetProperty target="{HelloText}" property="color" value="red"/>
+            </State>
+        </states>
+        <transitions>
+            <Transition fromState="*" toState="down" reversible="true">
+                <ParallelAnimation>
+                    <NumericAnimation properties="y" duration="500" easing="easeOutBounce"/>
+                    <ColorAnimation duration="500"/>
+                </ParallelAnimation>
+            </Transition>
+        </transitions>
+    </Text>
+    <MouseRegion id="MouseRegion" anchors.fill="{HelloText}"/>
+    <GridLayout id="ColorPicker" x="0" anchors.bottom="{Page.bottom}" width="120" height="50" columns="3" rows="2">
+        <Cell color="#ff0000"/>
+        <Cell color="#00ff00"/>
+        <Cell color="#0000ff"/>
+        <Cell color="#ffff00"/>
+        <Cell color="#00ffff"/>
+        <Cell color="#ff00ff"/>
+    </GridLayout>
+</Rect>
diff --git a/examples/declarative/velocity/Day.qml b/examples/declarative/velocity/Day.qml
new file mode 100644
index 0000000..3441648
--- /dev/null
+++ b/examples/declarative/velocity/Day.qml
@@ -0,0 +1,41 @@
+<Rect width="400" height="500" radius="7" pen.color="black" id="Page">
+    <properties>
+        <Property name="day" type="string" />
+        <Property name="stickies" />
+    </properties>
+
+    <Image x="10" y="10" src="cork.jpg" opaque="true"/>
+    <Text x="20" y="20" height="40" font.size="14" font.bold="true" width="370" text="{day}" style="Outline" styleColor="#dedede"/>
+
+    <Repeater dataSource="{Page.stickies}">
+        <Item x="{Math.random() * 200 + 100}" y="{Math.random() * 300 + 50}" id="StickyPage">
+            <rotation>
+                <Follow source="{-Flick.xVelocity / 100}" spring="2.0" damping="0.1"/>
+            </rotation>
+            <Item id="Sticky" scale="0.5">
+                <Image id="StickyImage" src="sticky.png" smooth="true" y="-20" x="{8 + -width * 0.6 / 2}" scale="0.6" />
+                <TextEdit id="MyText" smooth="true" font.size="28" readOnly="false" x="-104" y="36" wrap="true" rotation="-8" text="{noteText}" width="195" height="172" />
+                <Item y="-20" x="{StickyImage.x}" width="{StickyImage.width * StickyImage.scale}" height="{StickyImage.height * StickyImage.scale}" >
+                    <MouseRegion id="Mouse" onClicked="MyText.focus = true" anchors.fill="{parent}" drag.target="{StickyPage}" drag.axis="xy" drag.ymin="0" drag.ymax="500" drag.xmin="0" drag.xmax="400"/>
+                </Item>
+            </Item>
+            <Image src="tack.png" x="{-width / 2}" y="{-height * 0.7 / 2}" scale="0.7" />
+
+            <states>
+                <State name="pressed" when="{Mouse.pressed}">
+                    <SetProperties target="{Sticky}" rotation="8" scale="1"/>
+                    <SetProperties target="{Page}" z="8"/>
+                </State>
+            </states>
+            <transitions>
+                <Transition>
+                    <NumericAnimation properties="rotation,scale" duration="200"/>
+                </Transition>
+            </transitions>
+        </Item>
+    </Repeater>
+
+
+
+
+</Rect>
diff --git a/examples/declarative/velocity/cork.jpg b/examples/declarative/velocity/cork.jpg
new file mode 100644
index 0000000..d4d706c
--- /dev/null
+++ b/examples/declarative/velocity/cork.jpg
diff --git a/examples/declarative/velocity/sticky.png b/examples/declarative/velocity/sticky.png
new file mode 100644
index 0000000..73df3cd
--- /dev/null
+++ b/examples/declarative/velocity/sticky.png
diff --git a/examples/declarative/velocity/tack.png b/examples/declarative/velocity/tack.png
new file mode 100644
index 0000000..cef2d1c
--- /dev/null
+++ b/examples/declarative/velocity/tack.png
diff --git a/examples/declarative/velocity/velocity.qml b/examples/declarative/velocity/velocity.qml
new file mode 100644
index 0000000..0215d37
--- /dev/null
+++ b/examples/declarative/velocity/velocity.qml
@@ -0,0 +1,81 @@
+<Rect color="lightSteelBlue" width="800" height="600">
+    <ListModel id="List">
+        <Day>
+            <name>Sunday</name>
+            <dayColor>#808080</dayColor>
+            <notes>
+                <Note noteText="Lunch" />
+                <Note noteText="Party" />
+            </notes>
+        </Day>
+        <Day>
+            <name>Monday</name>
+            <dayColor>blue</dayColor>
+            <notes>
+                <Note noteText="Pickup kids" />
+                <Note noteText="Checkout kinetic" />
+                <Note noteText="Read email" />
+            </notes>
+        </Day>
+        <Day>
+            <name>Tuesday</name>
+            <dayColor>yellow</dayColor>
+            <notes>
+                <Note noteText="Walk dog" />
+                <Note noteText="Buy newspaper" />
+            </notes>
+        </Day>
+        <Day>
+            <name>Wednesday</name>
+            <dayColor>purple</dayColor>
+            <notes>
+                <Note noteText="Cook dinner" />
+                <Note noteText="Eat dinner" />
+            </notes>
+        </Day>
+        <Day>
+            <name>Thursday</name>
+            <dayColor>blue</dayColor>
+            <notes>
+                <Note noteText="5:30pm Meeting" />
+                <Note noteText="Weed garden" />
+            </notes>
+        </Day>
+        <Day>
+            <name>Friday</name>
+            <dayColor>green</dayColor>
+            <notes>
+                <Note noteText="Still work" />
+                <Note noteText="Drink" />
+            </notes>
+        </Day>
+        <Day>
+            <name>Saturday</name>
+            <dayColor>orange</dayColor>
+            <notes>
+                <Note noteText="Drink" />
+                <Note noteText="Drink" />
+            </notes>
+        </Day>
+    </ListModel>
+
+    <Flickable id="Flick" anchors.fill="{parent}" viewportWidth="{Lay.width}">
+        <HorizontalLayout id="Lay">
+            <Repeater dataSource="{List}">
+                <Component>
+                    <Day day="{name}" color="{dayColor}" stickies="{notes}"/>
+                </Component>
+            </Repeater>
+            <!--
+            <Day color="#808080" day="Sunday" />
+            <Day color="blue" day="Monday"/>
+            <Day color="yellow" day="Tuesday"/>
+            <Day color="purple" day="Wednesday"/>
+            <Day color="blue" day="Thursday"/>
+            <Day color="green" day="Friday"/>
+            <Day color="orange" day="Saturday"/>
+            -->
+        </HorizontalLayout>
+    </Flickable>
+
+</Rect>
diff --git a/examples/declarative/webview/autosize.qml b/examples/declarative/webview/autosize.qml
new file mode 100644
index 0000000..fedd497
--- /dev/null
+++ b/examples/declarative/webview/autosize.qml
@@ -0,0 +1,42 @@
+<!-- The WebView size is determined by the width, height,
+     idealWidth, and idealHeight properties. -->
+<Rect id="Rect" color="white" width="200" height="{Layout.height}">
+    <VerticalLayout id="Layout" spacing="2">
+        <WebView>
+            <html><![CDATA[
+                No width defined.
+            ]]></html>
+            <Rect color="#10000000" anchors.fill="{parent}"/>
+        </WebView>
+        <WebView width="{Rect.width}">
+            <html><![CDATA[
+                The width is full.
+            ]]></html>
+            <Rect color="#10000000" anchors.fill="{parent}"/>
+        </WebView>
+        <WebView width="{Rect.width/2}">
+            <html><![CDATA[
+                The width is half.
+            ]]></html>
+            <Rect color="#10000000" anchors.fill="{parent}"/>
+        </WebView>
+        <WebView idealWidth="{Rect.width/2}">
+            <html><![CDATA[
+                The idealWidth is half.
+            ]]></html>
+            <Rect color="#10000000" anchors.fill="{parent}"/>
+        </WebView>
+        <WebView idealWidth="{Rect.width/2}">
+            <html><![CDATA[
+                The_idealWidth_is_half.
+            ]]></html>
+            <Rect color="#10000000" anchors.fill="{parent}"/>
+        </WebView>
+        <WebView width="{Rect.width/2}">
+            <html><![CDATA[
+                The_width_is_half.
+            ]]></html>
+            <Rect color="#10000000" anchors.fill="{parent}"/>
+        </WebView>
+    </VerticalLayout>
+</Rect>
diff --git a/examples/declarative/webview/content/SpinSquare.qml b/examples/declarative/webview/content/SpinSquare.qml
new file mode 100644
index 0000000..ced45d5
--- /dev/null
+++ b/examples/declarative/webview/content/SpinSquare.qml
@@ -0,0 +1,12 @@
+<Item id="Root">
+    <properties>
+        <Property name="period" value="250"/>
+        <Property name="color" value="black"/>
+    </properties>
+    <Item x="{Root.width/2}" y="{Root.height/2}">
+        <Rect color="{Root.color}" width="{Root.width}" height="{width}" x="{-width/2}" y="{-height/2}"/>
+        <rotation>
+            <NumericAnimation from="0" to="360" repeat="true" running="true" duration="{Root.period}"/>
+        </rotation>
+    </Item>
+</Item>
diff --git a/examples/declarative/webview/inline-html.qml b/examples/declarative/webview/inline-html.qml
new file mode 100644
index 0000000..701db41
--- /dev/null
+++ b/examples/declarative/webview/inline-html.qml
@@ -0,0 +1,13 @@
+<!-- Inline HTML with loose formatting can be
+     set on the html property by using CDATA. -->
+<WebView>
+    <html><![CDATA[
+        <body bgcolor="white">
+        <table border=1>
+            <tr><th><th>One<th>Two<th>Three
+            <tr><th>1<td>X<td>1<td>X
+            <tr><th>2<td>0<td>X<td>0
+            <tr><th>3<td>X<td>1<td>X
+        </table>
+    ]]></html>
+</WebView>
diff --git a/examples/declarative/webview/inline-xhtml.qml b/examples/declarative/webview/inline-xhtml.qml
new file mode 100644
index 0000000..4acb417
--- /dev/null
+++ b/examples/declarative/webview/inline-xhtml.qml
@@ -0,0 +1,14 @@
+<!-- Inline xHTML (with strict XML formatting) can be
+     set on the html property by giving it the appropriate namespace. -->
+<WebView>
+    <html xmlns="http://www.w3.org/1999/xhtml">
+        <body bgcolor="white">
+        <table border="1">
+            <tr><th></th><th>One</th><th>Two</th><th>Three</th></tr>
+            <tr><th>1</th><td>X</td><td>1</td><td>X</td></tr>
+            <tr><th>2</th><td>0</td><td>X</td><td>0</td></tr>
+            <tr><th>3</th><td>X</td><td>1</td><td>X</td></tr>
+        </table>
+        </body>
+    </html>
+</WebView>
diff --git a/examples/declarative/webview/qml-in-html.qml b/examples/declarative/webview/qml-in-html.qml
new file mode 100644
index 0000000..2715788
--- /dev/null
+++ b/examples/declarative/webview/qml-in-html.qml
@@ -0,0 +1,20 @@
+<!-- The WebView supports QML data through the HTML OBJECT tag --> 
+<Flickable width="{250*.75}" height="240"
+    viewportWidth="{Web.width*Web.scale}" viewportHeight="{Web.height*Web.scale}">
+<WebView id="Web" width="250" height="420" scale="0.75">
+    <html><![CDATA[
+        <html>
+        <body bgcolor=white>
+        These are QML plugins, shown in a QML WebView via HTML OBJECT tags, all scaled to 75%
+        and placed in a Flickable area...
+        <table border=1>
+        <tr><th>Duration <th>Color <th>Plugin
+        <tr><td>500      <td>red   <td><OBJECT data=content/SpinSquare.qml TYPE=application/x-qt-plugin width=100 height=100 period=500 color=red />
+        <tr><td>2000     <td>blue  <td><OBJECT data=content/SpinSquare.qml TYPE=application/x-qt-plugin width=100 height=100 period=2000 color=blue />
+        <tr><td>1000     <td>green <td><OBJECT data=content/SpinSquare.qml TYPE=application/x-qt-plugin width=100 height=100 period=1000 color=green />
+        </table>
+        </body>
+        </html>
+    ]]></html>
+</WebView>
+</Flickable>
diff --git a/examples/declarative/webview/transparent.qml b/examples/declarative/webview/transparent.qml
new file mode 100644
index 0000000..71e1621
--- /dev/null
+++ b/examples/declarative/webview/transparent.qml
@@ -0,0 +1,6 @@
+<!-- The WebView background is transparent
+     if the HTML does not specify a background -->
+
+<Rect color="green" width="{Web.width}" height="{Web.height}">
+    <WebView id="Web" html="Hello &lt;b&gt;World!&lt;/b&gt;"/>
+</Rect>
diff --git a/examples/declarative/xmldata/daringfireball.qml b/examples/declarative/xmldata/daringfireball.qml
new file mode 100644
index 0000000..cfd0a98
--- /dev/null
+++ b/examples/declarative/xmldata/daringfireball.qml
@@ -0,0 +1,25 @@
+<Rect color="white" width="600" height="600">
+  <resources>
+        <XmlListModel id="feedModel" src="http://daringfireball.net/index.xml"
+                                     query="doc($src)/feed/entry">
+            <namespaceDeclarations>
+                declare default element namespace 'http://www.w3.org/2005/Atom';
+            </namespaceDeclarations>
+            <Role name="title" query="title/string()"/>
+            <Role name="tagline" query="author/name/string()"/>
+            <Role name="content" query="content/string()" isCData="true"/>
+        </XmlListModel>
+        <Component id="feedDelegate">
+            <Item height="{contents.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)</onLinkActivated>
+                </Text>
+            </Item>
+        </Component>
+    </resources>
+
+    <ListView id="list" anchors.fill="{parent}" clip="true"
+              model="{feedModel}" delegate="{feedDelegate}"/>
+</Rect>
diff --git a/examples/declarative/xmldata/yahoonews.qml b/examples/declarative/xmldata/yahoonews.qml
new file mode 100644
index 0000000..80ace18
--- /dev/null
+++ b/examples/declarative/xmldata/yahoonews.qml
@@ -0,0 +1,38 @@
+<Rect color="black" gradientColor="#AAAAAA" width="600" height="600">
+  <resources>
+        <XmlListModel id="feedModel" src="http://rss.news.yahoo.com/rss/oceania" query="doc($src)/rss/channel/item">
+            <Role name="title" query="title/string()"/>
+            <Role name="link" query="link/string()"/>
+            <Role name="description" query="description/string()" isCData="true"/>
+        </XmlListModel>
+        <Component id="feedDelegate">
+            <Item id="Delegate" height="{Wrapper.height + 10}">
+                <MouseRegion anchors.fill="{Wrapper}" onPressed="Delegate.ListView.list.currentIndex = index;"
+                             onClicked="if (Wrapper.state == 'Details') { Wrapper.state = '';} else {Wrapper.state = 'Details';}"/>
+                <Rect id="Wrapper" y="5" height="{TitleText.height + 10}" width="580" color="#F0F0F0" radius="5">
+                    <Text x="10" y="5" id="TitleText" text="{'&lt;a href=\'' + link + '\'&gt;' + title + '&lt;/a&gt;'}" font.bold="true" font.family="Helvetica" font.size="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"/>
+
+                    <states>
+                        <State name="Details">
+                            <SetProperty target="{Wrapper}" property="height" binding="contents.height + 10"/>
+                            <SetProperty target="{Description}" property="opacity" value="1"/>
+                        </State>
+                    </states>
+                    <transitions>
+                        <Transition fromState="*" toState="Details" reversible="true">
+                            <SequentialAnimation>
+                                <NumericAnimation duration="200" properties="height" easing="easeOutQuad"/>
+                                <NumericAnimation duration="200" properties="opacity"/>
+                            </SequentialAnimation>
+                        </Transition>
+                    </transitions>
+                </Rect>
+            </Item>
+        </Component>
+    </resources>
+
+    <ListView id="list" x="10" y="10" width="{parent.width - 20}" height="{parent.height - 20}" clip="true"
+              model="{feedModel}" delegate="{feedDelegate}" currentItemPositioning="Snap"/>
+</Rect>
author	Michael Brasser <michael.brasser@nokia.com>	2009-04-22 04:47:24 (GMT)
committer	Michael Brasser <michael.brasser@nokia.com>	2009-04-22 04:47:24 (GMT)
commit	2366667fc97eb6a56203b2dd7dac776ff4164abd (patch)
tree	b2acb6cc6bfe475d7e619e4788973b61fff775e0 /examples/declarative
parent	2c762f3b8b284a7c6dc0c499b7052013bad5b707 (diff)
download	Qt-2366667fc97eb6a56203b2dd7dac776ff4164abd.zip Qt-2366667fc97eb6a56203b2dd7dac776ff4164abd.tar.gz Qt-2366667fc97eb6a56203b2dd7dac776ff4164abd.tar.bz2