Changing over to new qml format, add snippets

Structure hasn't changed, just used qmlconv and started adding
snippet tags

37 files changed, 2674 insertions, 1599 deletions

diff --git a/doc/src/tutorials/declarative.qdoc b/doc/src/tutorials/declarative.qdoc
index e763a56..bbe2ebd 100644
--- a/doc/src/tutorials/declarative.qdoc
+++ b/doc/src/tutorials/declarative.qdoc
@@ -121,27 +121,14 @@
 
     \image declarative-roundrect.png
 
-    \code
-    <Rect id="removeButton"
-        width="30" height="30"
-        color="red"
-        radius="5"/>
-    \endcode
+    \snippet declarative/tutorials/contacts/1_Drawing_and_Animation/1/RemoveButton.qml 0
 
     This is the simplest of QML components.  It describes a rectangle with
     some simple properties.  In QML all components start with a capital
     letter, and their properties with lower case letters.  Properties
     can either be declared as XML attributes or as children of the 
-    component element.  The above rectangle could equally be written
+    component element.  
     
-    \code
-    <Rect id="removeButton" color="red">
-        <width>30</width>
-        <height>30</height>
-        <radius>5</radius>
-    </Rect>
-    \endcode
-
     The rectangle component is one of the more simple QML components.  Apart
     from the properties all QML components share, it has the properties
 
@@ -183,18 +170,7 @@
 
     \image declarative-removebutton-close.png
 
-    \code
-    <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>
-    \endcode
+    \snippet declarative/tutorials/contacts/1_Drawing_and_Animation/2/RemoveButton.qml 0
 
     The trashIcon image is added as a child of the Rectangle.  In this case
     the <children> tag isn't used because the default property of the
@@ -202,20 +178,7 @@
     and use some other default component, when this is the case its possible
     to explicitly list the sub component as a child as follows:
 
-    \code
-    <Rect id="removeButton"
-        width="30" height="30"
-            color="red"
-        radius="5">
-        <children>
-            <Image id="trashIcon"
-                width="22" height="22"
-                anchors.right="{parent.right}" anchors.rightMargin="4"
-                anchors.verticalCenter="{parent.verticalCenter}"
-                src="../shared/pics/trash.png"/>
-        </children>
-    </Rect>
-    \endcode
+    \snippet declarative/tutorials/contacts/1_Drawing_and_Animation/2a/RemoveButton.qml 0
 
     The Image element allows loading an image file for display.  The source
     specified is a URL, and in this case refers to a portable network graphics
@@ -252,31 +215,7 @@
     This is a wider rectangle with two images and some text.  The code to
     draw this state of the button could be written as follows:
 
-    \code
-    <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>
-    \endcode
+    \snippet declarative/tutorials/contacts/1_Drawing_and_Animation/3/RemoveButton.qml 0
 
     The rectangle with is now wider by 200 pixels.  Also the trashIcon has
     been replaced with the confirm state children.  Normally we wouldn't
@@ -310,21 +249,32 @@
     might look like.
 
     \code
-    <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"/>
-        <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"/>
+    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"
+            opacity: 1
+        }
+        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
+        }
     \endcode
 
     The code above includes components from both states of the RemoveButton,
@@ -335,17 +285,7 @@
     should be changed.  For the RemoveButton there is only one non-base state
     required.  In this tutorial we will name it the 'opened' state.
 
-    \code
-    <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>
-    \endcode
+    \snippet declarative/tutorials/contacts/1_Drawing_and_Animation/4/RemoveButton.qml states
 
     In the opened state the width of the button itself changes from the base
     width of 30 to the new width of 230.  Also the opacity of the children
@@ -357,18 +297,7 @@
     To trigger the change we will react to the 'clicked' signal of a
     MouseRegion component.
 
-    \code
-    <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>
-    \endcode
+    \snippet declarative/tutorials/contacts/1_Drawing_and_Animation/4/RemoveButton.qml mouse region
 
     MouseRegion components handle mouse actions within their geometry.  This
     geometry behaves the same way as painted components, such that children
@@ -381,7 +310,7 @@
     a function called toggle() is called.  It might also have been written
 
     \code
-    onClicked="removeButton.state='opened'"
+    onClicked: { removeButton.state='opened' }
     \endcode
 
     However in this case we are using a function because it allows multiple
@@ -391,69 +320,24 @@
     The toggle() function is a new function specified as part of the remove
     button element.
 
-    \code
-    <resources>
-        <Script>
-            function toggle() {
-                print('removeButton.toggle()');
-                if (removeButton.state == 'opened') {
-                    removeButton.state = '';
-                } else {
-                    removeButton.state = 'opened';
-                }
-            }
-        </Script>
-    </resources>
-    \endcode
+    \snippet declarative/tutorials/contacts/1_Drawing_and_Animation/4/RemoveButton.qml script
 
     Any QML component can have a set of resources specified.  One of those
     resources is any Script that might be needed.   See the
     {QtScript Module}{QtScript Module} for more information on how to write
-    script code in Qt.  There are only a couple of additional items to
-    note when using Script with QML components.  The first is that it
-    is an xml file, that means either CDATA or other forms of escaping
-    should be used if special characters are needed.  For example, 
-    the expression;
+    script code in Qt.
 
-    \code
-    if (a && b) {}
-    \endcode
-
-    Should either be escaped as:
-
-    \code
-    if (a &amp;&amp; b) {}
-    \endcode
-
-    or enclosed in a CDATA section as
-
-    \code
-    <![CDATA[if (a && b) {}]]>
-    \endcode
-
-    The other item to note is that you can refer to identified QML components
+    It is possible to refer to identified QML components
     within the script.  Hence the function for our RemoveButton will check
     if the state is already open to determine what the new state should be.
 
-    We also have added a print function.  This isn't required for the button
-    to function, but is useful for tracking down possible bugs when
-    working with QML.
-
-    See the file RemoveButton4.qml for the full multi-state specification.
-
     \section1 Animation
 
     Currently the RemoveButton is function, but snaps between our two states.
     Fortunately making the transition between states smooth is very simple.
     We only need one more bit of code at the end of our removeButton component.
 
-    \code
-    <transitions>
-        <Transition fromState="*" toState="opened" reversible="true">
-            <NumericAnimation properties="opacity,x,width" duration="200"/>
-        </Transition>
-    </transitions>
-    \endcode
+    \snippet declarative/tutorials/contacts/1_Drawing_and_Animation/5/RemoveButton.qml transition
 
     All QML components have a transitions property.  This describes how
     properties of items within the component should change.  In this case
diff --git a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/1/Removebutton.qml b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/1/Removebutton.qml
index dc3f505..bbe9f55 100644
--- a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/1/Removebutton.qml
+++ b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/1/Removebutton.qml
@@ -1,4 +1,9 @@
-<Rect id="removeButton"
-    width="30" height="30"
-    color="red"
-    radius="5"/>
+//! [0]
+Rect {
+    id: removeButton
+    width: 30
+    height: 30
+    color: "red"
+    radius: 5
+}
+//! [0]
diff --git a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/1_Drawing_and_animation.qml b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/1_Drawing_and_animation.qml
index 31a95c6..cc5ebae 100644
--- a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/1_Drawing_and_animation.qml
+++ b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/1_Drawing_and_animation.qml
@@ -1,9 +1,34 @@
-<Rect id="page" width="{layout.width}" height="{layout.height}" color='white'>
-    <VerticalLayout id="layout" width="{contents.width}">
-        <GroupBox contents="1/RemoveButton.qml" label="Rectangle Component"/>
-        <GroupBox contents="2/RemoveButton.qml" label="Closed Remove Item Button"/>
-        <GroupBox contents="3/RemoveButton.qml" label="Open Remove Item Button"/>
-        <GroupBox contents="4/RemoveButton.qml" label="State Based Button"/>
-        <GroupBox contents="5/RemoveButton.qml" label="Animated Button"/>
-    </VerticalLayout>
-</Rect>
+Rect {
+    id: page
+    width: layout.width
+    height: layout.height
+    color: "white"
+    VerticalLayout {
+        id: layout
+        width: contents.width
+        GroupBox {
+            contents: "1/RemoveButton.qml"
+            label: "Rectangle Component"
+        }
+        GroupBox {
+            contents: "2/RemoveButton.qml"
+            label: "Closed Remove Item Button"
+        }
+        GroupBox {
+            contents: "2a/RemoveButton.qml"
+            label: "Alternative Closed Button"
+        }
+        GroupBox {
+            contents: "3/RemoveButton.qml"
+            label: "Open Remove Item Button"
+        }
+        GroupBox {
+            contents: "4/RemoveButton.qml"
+            label: "State Based Button"
+        }
+        GroupBox {
+            contents: "5/RemoveButton.qml"
+            label: "Animated Button"
+        }
+    }
+}
diff --git a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/2/RemoveButton.qml b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/2/RemoveButton.qml
index d3cb045..cf7d2bc 100644
--- a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/2/RemoveButton.qml
+++ b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/2/RemoveButton.qml
@@ -1,10 +1,18 @@
-<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>
+//! [0]
+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"
+    }
+}
+//! [0]
diff --git a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/2a/RemoveButton.qml b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/2a/RemoveButton.qml
new file mode 100644
index 0000000..9df2864
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/2a/RemoveButton.qml
@@ -0,0 +1,20 @@
+//! [0]
+Rect {
+    id: removeButton
+    width: 30
+    height: 30
+    color: "red"
+    radius: 5
+    children: [
+        Image {
+            id: trashIcon
+            width: 22
+            height: 22
+            anchors.right: parent.right
+            anchors.rightMargin: 4
+            anchors.verticalCenter: parent.verticalCenter
+            src: "../../shared/pics/trash.png"
+        }
+    ]
+}
+//! [0]
diff --git a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/3/RemoveButton.qml b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/3/RemoveButton.qml
index 257686f..02b8145 100644
--- a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/3/RemoveButton.qml
+++ b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/3/RemoveButton.qml
@@ -1,23 +1,39 @@
-<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>
+//! [0]
+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"
+    }
+}
+//! [0]
diff --git a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/4/RemoveButton.qml b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/4/RemoveButton.qml
index 6d97db1..632ade9 100644
--- a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/4/RemoveButton.qml
+++ b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/4/RemoveButton.qml
@@ -1,9 +1,13 @@
-<Rect id="removeButton"
-    width="30" height="30"
-    color="red"
-    radius="5">
-    <resources>
-        <Script>
+Rect {
+    id: removeButton
+    width: 30
+    height: 30
+    color: "red"
+    radius: 5
+//! [script]
+    resources: [
+        Script {
+
             function toggle() {
                 print('removeButton.toggle()');
                 if (removeButton.state == 'opened') {
@@ -12,54 +16,97 @@
                     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>
+        
+        }
+    ]
+//! [script]
+//! [mouse region]
+    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() }
+        }
+    }
+//! [mouse region]
+    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 {
+        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() }
+        }
+    }
+    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]
+    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
+            }
+        }
+    ]
+//! [states]
+}
diff --git a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/5/RemoveButton.qml b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/5/RemoveButton.qml
index ddb3507..a56193d 100644
--- a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/5/RemoveButton.qml
+++ b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/5/RemoveButton.qml
@@ -1,9 +1,12 @@
-<Rect id="removeButton"
-    width="30" height="30"
-    color="red"
-    radius="5">
-    <resources>
-        <Script>
+Rect {
+    id: removeButton
+    width: 30
+    height: 30
+    color: "red"
+    radius: 5
+    resources: [
+        Script {
+
             function toggle() {
                 print('removeButton.toggle()');
                 if (removeButton.state == 'opened') {
@@ -12,59 +15,105 @@
                     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>
+        
+        }
+    ]
+    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 {
+        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 {
+        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() }
+        }
+    }
+    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
+            }
+        }
+    ]
+//! [transition]
+    transitions: [
+        Transition {
+            fromState: "*"
+            toState: "opened"
+            reversible: true
+            NumericAnimation {
+                properties: "opacity,x,width"
+                duration: 200
+            }
+        }
+    ]
+//! [transition]
+}
diff --git a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/GroupBox.qml b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/GroupBox.qml
index 77f7093..665c072 100644
--- a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/GroupBox.qml
+++ b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/GroupBox.qml
@@ -1,25 +1,59 @@
-<FocusRealm id="groupBox" width="{Math.max(270, subItem.width+40)}" height="{Math.max(70, subItem.height+40)}">
-    <properties>
-        <Property name="contents"/>
-        <Property name="label"/>
-    </properties>
-    <Rect id="wrapper" x="5" y="10" radius="10"
-        width="{groupBox.width-20}" height="{groupBox.height-20}"
-        color="white" pen.color="black">
-        <Item id="subItem" qml="{groupBox.contents}"
-            anchors.top="{parent.top}" anchors.topMargin="10"
-            anchors.right="{parent.right}" anchors.rightMargin="10"
-            width="{qmlItem.width}" height="{qmlItem.height}"/>
-    </Rect>
-    <Rect x="20" y="0" height="{text.height}" width="{text.width+10}" color="white">
-        <Text x="5" id="text" text="{label}" font.bold="true"/>
-    </Rect>
-    <Rect color="black" anchors.fill="{parent}" opacity="{parent.focus ? 0 : 0.3}">
-        <MouseRegion anchors.fill="{parent}" onClicked="parent.parent.focus=true"/>
-        <opacity>
-            <Behaviour>
-                <NumericAnimation property="opacity" duration="250"/>
-            </Behaviour>
-        </opacity>
-    </Rect>
-</FocusRealm>
+FocusRealm {
+    id: groupBox
+    width: Math.max(270, subItem.width+40)
+    height: Math.max(70, subItem.height+40)
+    properties: Property {
+        name: "contents"
+    }
+    properties: Property {
+        name: "label"
+    }
+    Rect {
+        id: wrapper
+        x: 5
+        y: 10
+        radius: 10
+        width: groupBox.width-20
+        height: groupBox.height-20
+        color: "white"
+        pen.color: "black"
+        Item {
+            id: subItem
+            qml: groupBox.contents
+            anchors.top: parent.top
+            anchors.topMargin: 10
+            anchors.right: parent.right
+            anchors.rightMargin: 10
+            width: qmlItem.width
+            height: qmlItem.height
+        }
+    }
+    Rect {
+        x: 20
+        y: 0
+        height: text.height
+        width: text.width+10
+        color: "white"
+        Text {
+            x: 5
+            id: text
+            text: label
+            font.bold: true
+        }
+    }
+    Rect {
+        color: "black"
+        anchors.fill: parent
+        opacity: parent.focus ? 0 : 0.3
+        MouseRegion {
+            anchors.fill: parent
+            onClicked: { parent.parent.focus=true }
+        }
+        opacity: Behaviour {
+            NumericAnimation {
+                property: "opacity"
+                duration: 250
+            }
+        }
+    }
+}
diff --git a/examples/declarative/tutorials/contacts/2_Reuse/1/ContactField.qml b/examples/declarative/tutorials/contacts/2_Reuse/1/ContactField.qml
index 6d8bb9f..1c50110 100644
--- a/examples/declarative/tutorials/contacts/2_Reuse/1/ContactField.qml
+++ b/examples/declarative/tutorials/contacts/2_Reuse/1/ContactField.qml
@@ -1,18 +1,28 @@
-<Item id="contactField"
-    clip="true"
-    width="230"
-    height="30">
-    <RemoveButton id="removeButton"
-        anchors.right="{parent.right}"
-        anchors.top="{parent.top}" anchors.bottom="{parent.bottom}"/>
-    <Text id="fieldText"
-        width="{contactField.width-80}"
-        anchors.right="{removeButton.left}" anchors.rightMargin="10"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        font.bold="true"
-        color="black"
-        text="123123"/>
-    <Image src="../../shared/pics/phone.png"
-        anchors.right="{fieldText.left}" anchors.rightMargin="10"
-        anchors.verticalCenter="{parent.verticalCenter}"/>
-</Item>
+Item {
+    id: contactField
+    clip: true
+    width: 230
+    height: 30
+    RemoveButton {
+        id: removeButton
+        anchors.right: parent.right
+        anchors.top: parent.top
+        anchors.bottom: parent.bottom
+    }
+    Text {
+        id: fieldText
+        width: contactField.width-80
+        anchors.right: removeButton.left
+        anchors.rightMargin: 10
+        anchors.verticalCenter: parent.verticalCenter
+        font.bold: true
+        color: "black"
+        text: 123123
+    }
+    Image {
+        src: "../../shared/pics/phone.png"
+        anchors.right: fieldText.left
+        anchors.rightMargin: 10
+        anchors.verticalCenter: parent.verticalCenter
+    }
+}
diff --git a/examples/declarative/tutorials/contacts/2_Reuse/1/RemoveButton.qml b/examples/declarative/tutorials/contacts/2_Reuse/1/RemoveButton.qml
index ddb3507..b3ac12d 100644
--- a/examples/declarative/tutorials/contacts/2_Reuse/1/RemoveButton.qml
+++ b/examples/declarative/tutorials/contacts/2_Reuse/1/RemoveButton.qml
@@ -1,9 +1,12 @@
-<Rect id="removeButton"
-    width="30" height="30"
-    color="red"
-    radius="5">
-    <resources>
-        <Script>
+Rect {
+    id: removeButton
+    width: 30
+    height: 30
+    color: "red"
+    radius: 5
+    resources: [
+        Script {
+
             function toggle() {
                 print('removeButton.toggle()');
                 if (removeButton.state == 'opened') {
@@ -12,59 +15,103 @@
                     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>
+        
+        }
+    ]
+    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 {
+        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 {
+        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() }
+        }
+    }
+    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
+            }
+        }
+    ]
+    transitions: [
+        Transition {
+            fromState: "*"
+            toState: "opened"
+            reversible: true
+            NumericAnimation {
+                properties: "opacity,x,width"
+                duration: 200
+            }
+        }
+    ]
+}
diff --git a/examples/declarative/tutorials/contacts/2_Reuse/1a/ContactField.qml b/examples/declarative/tutorials/contacts/2_Reuse/1a/ContactField.qml
index ee860b0..07ab55c 100644
--- a/examples/declarative/tutorials/contacts/2_Reuse/1a/ContactField.qml
+++ b/examples/declarative/tutorials/contacts/2_Reuse/1a/ContactField.qml
@@ -1,20 +1,31 @@
-<Item id="contactField"
-    clip="true"
-    width="230"
-    height="30">
-    <Item id="removeButton"
-        qml="RemoveButton.qml"
-        width="{qmlItem.width}" height="{qmlItem.height}"
-        anchors.right="{parent.right}"
-        anchors.top="{parent.top}" anchors.bottom="{parent.bottom}"/>
-    <Text id="fieldText"
-        width="{contactField.width-80}"
-        anchors.right="{removeButton.left}" anchors.rightMargin="10"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        font.bold="true"
-        color="black"
-        text="123123"/>
-    <Image src="../../shared/pics/phone.png"
-        anchors.right="{fieldText.left}" anchors.rightMargin="10"
-        anchors.verticalCenter="{parent.verticalCenter}"/>
-</Item>
+Item {
+    id: contactField
+    clip: true
+    width: 230
+    height: 30
+    Item {
+        id: removeButton
+        qml: "RemoveButton.qml"
+        width: qmlItem.width
+        height: qmlItem.height
+        anchors.right: parent.right
+        anchors.top: parent.top
+        anchors.bottom: parent.bottom
+    }
+    Text {
+        id: fieldText
+        width: contactField.width-80
+        anchors.right: removeButton.left
+        anchors.rightMargin: 10
+        anchors.verticalCenter: parent.verticalCenter
+        font.bold: true
+        color: "black"
+        text: 123123
+    }
+    Image {
+        src: "../../shared/pics/phone.png"
+        anchors.right: fieldText.left
+        anchors.rightMargin: 10
+        anchors.verticalCenter: parent.verticalCenter
+    }
+}
diff --git a/examples/declarative/tutorials/contacts/2_Reuse/1a/RemoveButton.qml b/examples/declarative/tutorials/contacts/2_Reuse/1a/RemoveButton.qml
index ddb3507..b3ac12d 100644
--- a/examples/declarative/tutorials/contacts/2_Reuse/1a/RemoveButton.qml
+++ b/examples/declarative/tutorials/contacts/2_Reuse/1a/RemoveButton.qml
@@ -1,9 +1,12 @@
-<Rect id="removeButton"
-    width="30" height="30"
-    color="red"
-    radius="5">
-    <resources>
-        <Script>
+Rect {
+    id: removeButton
+    width: 30
+    height: 30
+    color: "red"
+    radius: 5
+    resources: [
+        Script {
+
             function toggle() {
                 print('removeButton.toggle()');
                 if (removeButton.state == 'opened') {
@@ -12,59 +15,103 @@
                     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>
+        
+        }
+    ]
+    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 {
+        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 {
+        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() }
+        }
+    }
+    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
+            }
+        }
+    ]
+    transitions: [
+        Transition {
+            fromState: "*"
+            toState: "opened"
+            reversible: true
+            NumericAnimation {
+                properties: "opacity,x,width"
+                duration: 200
+            }
+        }
+    ]
+}
diff --git a/examples/declarative/tutorials/contacts/2_Reuse/1b/ContactField.qml b/examples/declarative/tutorials/contacts/2_Reuse/1b/ContactField.qml
index bff68b9..a31a5e0 100644
--- a/examples/declarative/tutorials/contacts/2_Reuse/1b/ContactField.qml
+++ b/examples/declarative/tutorials/contacts/2_Reuse/1b/ContactField.qml
@@ -1,19 +1,29 @@
-<?qtfx namespacepath:=lib ?> <!-- RemoveButton location -->
-<Item id="contactField"
-    clip="true"
-    width="230"
-    height="30">
-    <RemoveButton id="removeButton"
-        anchors.right="{parent.right}"
-        anchors.top="{parent.top}" anchors.bottom="{parent.bottom}"/>
-    <Text id="fieldText"
-        width="{contactField.width-80}"
-        anchors.right="{removeButton.left}" anchors.rightMargin="10"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        font.bold="true"
-        color="black"
-        text="123123"/>
-    <Image src="../../shared/pics/phone.png"
-        anchors.right="{fieldText.left}" anchors.rightMargin="10"
-        anchors.verticalCenter="{parent.verticalCenter}"/>
-</Item>
+import "lib"
+Item {
+    id: contactField
+    clip: true
+    width: 230
+    height: 30
+    RemoveButton {
+        id: removeButton
+        anchors.right: parent.right
+        anchors.top: parent.top
+        anchors.bottom: parent.bottom
+    }
+    Text {
+        id: fieldText
+        width: contactField.width-80
+        anchors.right: removeButton.left
+        anchors.rightMargin: 10
+        anchors.verticalCenter: parent.verticalCenter
+        font.bold: true
+        color: "black"
+        text: 123123
+    }
+    Image {
+        src: "../../shared/pics/phone.png"
+        anchors.right: fieldText.left
+        anchors.rightMargin: 10
+        anchors.verticalCenter: parent.verticalCenter
+    }
+}
diff --git a/examples/declarative/tutorials/contacts/2_Reuse/1b/lib/RemoveButton.qml b/examples/declarative/tutorials/contacts/2_Reuse/1b/lib/RemoveButton.qml
index 524bde2..30985fb 100644
--- a/examples/declarative/tutorials/contacts/2_Reuse/1b/lib/RemoveButton.qml
+++ b/examples/declarative/tutorials/contacts/2_Reuse/1b/lib/RemoveButton.qml
@@ -1,9 +1,12 @@
-<Rect id="removeButton"
-    width="30" height="30"
-    color="red"
-    radius="5">
-    <resources>
-        <Script>
+Rect {
+    id: removeButton
+    width: 30
+    height: 30
+    color: "red"
+    radius: 5
+    resources: [
+        Script {
+
             function toggle() {
                 print('removeButton.toggle()');
                 if (removeButton.state == 'opened') {
@@ -12,59 +15,103 @@
                     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>
+        
+        }
+    ]
+    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 {
+        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 {
+        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() }
+        }
+    }
+    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
+            }
+        }
+    ]
+    transitions: [
+        Transition {
+            fromState: "*"
+            toState: "opened"
+            reversible: true
+            NumericAnimation {
+                properties: "opacity,x,width"
+                duration: 200
+            }
+        }
+    ]
+}
diff --git a/examples/declarative/tutorials/contacts/2_Reuse/2/ContactField.qml b/examples/declarative/tutorials/contacts/2_Reuse/2/ContactField.qml
index 5f8ff51..badf7a4 100644
--- a/examples/declarative/tutorials/contacts/2_Reuse/2/ContactField.qml
+++ b/examples/declarative/tutorials/contacts/2_Reuse/2/ContactField.qml
@@ -1,20 +1,30 @@
-<Item id="contactField"
-    clip="true"
-    width="230"
-    height="30">
-    <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=''"/>
-    <Text id="fieldText"
-        width="{contactField.width-80}"
-        anchors.right="{removeButton.left}" anchors.rightMargin="10"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        font.bold="true"
-        color="black"
-        text="123123"/>
-    <Image src="../../shared/pics/phone.png"
-        anchors.right="{fieldText.left}" anchors.rightMargin="10"
-        anchors.verticalCenter="{parent.verticalCenter}"/>
-</Item>
+Item {
+    id: contactField
+    clip: true
+    width: 230
+    height: 30
+    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='' }
+    }
+    Text {
+        id: fieldText
+        width: contactField.width-80
+        anchors.right: removeButton.left
+        anchors.rightMargin: 10
+        anchors.verticalCenter: parent.verticalCenter
+        font.bold: true
+        color: "black"
+        text: 123123
+    }
+    Image {
+        src: "../../shared/pics/phone.png"
+        anchors.right: fieldText.left
+        anchors.rightMargin: 10
+        anchors.verticalCenter: parent.verticalCenter
+    }
+}
diff --git a/examples/declarative/tutorials/contacts/2_Reuse/2/RemoveButton.qml b/examples/declarative/tutorials/contacts/2_Reuse/2/RemoveButton.qml
index e52bcbf..e6c7c82 100644
--- a/examples/declarative/tutorials/contacts/2_Reuse/2/RemoveButton.qml
+++ b/examples/declarative/tutorials/contacts/2_Reuse/2/RemoveButton.qml
@@ -1,15 +1,19 @@
-<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>
+Rect {
+    id: removeButton
+    width: 30
+    height: 30
+    color: "red"
+    radius: 5
+    properties: Property {
+        name: "expandedWidth"
+        value: 230
+    }
+    signals: Signal {
+        name: "confirmed"
+    }
+    resources: [
+        Script {
+
             function toggle() {
                 print('removeButton.toggle()');
                 if (removeButton.state == 'opened') {
@@ -18,59 +22,103 @@
                     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>
+        
+        }
+    ]
+    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 {
+        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 {
+        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() }
+        }
+    }
+    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
+            }
+        }
+    ]
+    transitions: [
+        Transition {
+            fromState: "*"
+            toState: "opened"
+            reversible: true
+            NumericAnimation {
+                properties: "opacity,x,width"
+                duration: 200
+            }
+        }
+    ]
+}
diff --git a/examples/declarative/tutorials/contacts/2_Reuse/2_Reuse.qml b/examples/declarative/tutorials/contacts/2_Reuse/2_Reuse.qml
index 6210308..540e900 100644
--- a/examples/declarative/tutorials/contacts/2_Reuse/2_Reuse.qml
+++ b/examples/declarative/tutorials/contacts/2_Reuse/2_Reuse.qml
@@ -1,13 +1,44 @@
-<Rect id="page" width="{layout.width}" height="{layout.height}" color='white'>
-    <GridLayout id="layout" columns="2" rows="4" width="{contents.width}">
-        <GroupBox contents="1/ContactField.qml" label="Loading: simple"/>
-        <GroupBox contents="1a/ContactField.qml" label="Loading: qml property"/>
-        <GroupBox contents="1b/ContactField.qml" label="Loading: added path"/>
-        <GroupBox contents="1c/ContactField.qml" label="Loading: added namespace"/>
-
-        <GroupBox contents="2/ContactField.qml" label="Using properties"/>
-        <GroupBox contents="3/ContactField.qml" label="Defining signals"/>
-        <GroupBox contents="3/Contact.qml" label="Multiple Items"/>
-        <GroupBox contents="4/Contact.qml" label="Mouse Grabbing"/>
-    </GridLayout>
-</Rect>
+Rect {
+    id: page
+    width: layout.width
+    height: layout.height
+    color: "white"
+    GridLayout {
+        id: layout
+        columns: 2
+        rows: 4
+        width: contents.width
+        GroupBox {
+            contents: "1/ContactField.qml"
+            label: "Loading: simple"
+        }
+        GroupBox {
+            contents: "1a/ContactField.qml"
+            label: "Loading: qml property"
+        }
+        GroupBox {
+            contents: "1b/ContactField.qml"
+            label: "Loading: added path"
+        }
+        GroupBox {
+            contents: "1c/ContactField.qml"
+            label: "Loading: added namespace"
+        }
+        GroupBox {
+            contents: "2/ContactField.qml"
+            label: "Using properties"
+        }
+        GroupBox {
+            contents: "3/ContactField.qml"
+            label: "Defining signals"
+        }
+        GroupBox {
+            contents: "3/Contact.qml"
+            label: "Multiple Items"
+        }
+        GroupBox {
+            contents: "4/Contact.qml"
+            label: "Mouse Grabbing"
+        }
+    }
+}
diff --git a/examples/declarative/tutorials/contacts/2_Reuse/3/Contact.qml b/examples/declarative/tutorials/contacts/2_Reuse/3/Contact.qml
index cf6c657..33ac627 100644
--- a/examples/declarative/tutorials/contacts/2_Reuse/3/Contact.qml
+++ b/examples/declarative/tutorials/contacts/2_Reuse/3/Contact.qml
@@ -1,29 +1,53 @@
-<Item id="contactDetails"
-    width="230"
-    height="{layout.height}">
-    <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>
+Item {
+    id: contactDetails
+    width: 230
+    height: layout.height
+    properties: Property {
+        name: "contactid"
+        value: ""
+    }
+    properties: Property {
+        name: "label"
+        onValueChanged: { labelField.value = label }
+    }
+    properties: Property {
+        name: "phone"
+        onValueChanged: { phoneField.value = phone }
+    }
+    properties: Property {
+        name: "email"
+        onValueChanged: { emailField.value = email }
+    }
+    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"
+        }
+    }
+}
diff --git a/examples/declarative/tutorials/contacts/2_Reuse/3/ContactField.qml b/examples/declarative/tutorials/contacts/2_Reuse/3/ContactField.qml
index 5748a81..26bfca5 100644
--- a/examples/declarative/tutorials/contacts/2_Reuse/3/ContactField.qml
+++ b/examples/declarative/tutorials/contacts/2_Reuse/3/ContactField.qml
@@ -1,36 +1,67 @@
-<Item id="contactField"
-    clip="true"
-    width="230"
-    height="30">
-    <properties>
-        <Property name="label" value="Name"/>
-        <Property name="icon" value="../../shared/pics/phone.png"/>
-        <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>
+Item {
+    id: contactField
+    clip: true
+    width: 230
+    height: 30
+    properties: Property {
+        name: "label"
+        value: "Name"
+    }
+    properties: Property {
+        name: "icon"
+        value: "../../shared/pics/phone.png"
+    }
+    properties: Property {
+        name: "value"
+    }
+    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
+            }
+        }
+    ]
+    transitions: [
+        Transition {
+            fromState: ""
+            toState: "*"
+            reversible: true
+            NumericAnimation {
+                properties: "width,rightMargin"
+                duration: 200
+            }
+        }
+    ]
+}
diff --git a/examples/declarative/tutorials/contacts/2_Reuse/3/FieldText.qml b/examples/declarative/tutorials/contacts/2_Reuse/3/FieldText.qml
index 8010ac0..7da13e7 100644
--- a/examples/declarative/tutorials/contacts/2_Reuse/3/FieldText.qml
+++ b/examples/declarative/tutorials/contacts/2_Reuse/3/FieldText.qml
@@ -1,21 +1,23 @@
-<Rect id="fieldText"
-    height="30"
-    radius="5"
-    color="white">
-    <properties>
-        <Property
-            name="text"
-            value=""
-            onValueChanged="reset()"/>
-        <Property
-            name="label"
-            value=""/>
-    </properties>
-    <signals>
-        <Signal name="confirmed"/>
-    </signals>
-    <resources>
-        <Script>
+Rect {
+    id: fieldText
+    height: 30
+    radius: 5
+    color: "white"
+    properties: Property {
+        name: "text"
+        value: ""
+        onValueChanged: { reset() }
+    }
+    properties: Property {
+        name: "label"
+        value: ""
+    }
+    signals: Signal {
+        name: "confirmed"
+    }
+    resources: [
+        Script {
+
             function edit() {
                 fieldText.state='editing';
             }
@@ -28,64 +30,123 @@
                 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="5"
-        anchors.right="{parent.right}" anchors.rightMargin="5"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        color="black"
-        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 == '' ? 1 : 0}">
-        <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="{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="39"/>
-            <SetProperty target="{textEdit.anchors}" property="rightMargin" value="39"/>
-        </State>
-    </states>
-    <transitions>
-        <Transition fromState='' toState="*" reversible="true">
-            <NumericAnimation properties="opacity,leftMargin,rightMargin" duration="200"/>
-            <ColorAnimation duration="150"/>
-        </Transition>
-    </transitions>
-</Rect>
+        
+        }
+    ]
+    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: 5
+        anchors.right: parent.right
+        anchors.rightMargin: 5
+        anchors.verticalCenter: parent.verticalCenter
+        color: "black"
+        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 == '' ? 1 : 0
+        opacity: Behaviour {
+            NumericAnimation {
+                property: "opacity"
+                duration: 250
+            }
+        }
+    }
+    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: 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: 39
+            }
+            SetProperty {
+                target: textEdit.anchors
+                property: "rightMargin"
+                value: 39
+            }
+        }
+    ]
+    transitions: [
+        Transition {
+            fromState: ""
+            toState: "*"
+            reversible: true
+            NumericAnimation {
+                properties: "opacity,leftMargin,rightMargin"
+                duration: 200
+            }
+            ColorAnimation {
+                duration: 150
+            }
+        }
+    ]
+}
diff --git a/examples/declarative/tutorials/contacts/2_Reuse/3/RemoveButton.qml b/examples/declarative/tutorials/contacts/2_Reuse/3/RemoveButton.qml
index e52bcbf..e6c7c82 100644
--- a/examples/declarative/tutorials/contacts/2_Reuse/3/RemoveButton.qml
+++ b/examples/declarative/tutorials/contacts/2_Reuse/3/RemoveButton.qml
@@ -1,15 +1,19 @@
-<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>
+Rect {
+    id: removeButton
+    width: 30
+    height: 30
+    color: "red"
+    radius: 5
+    properties: Property {
+        name: "expandedWidth"
+        value: 230
+    }
+    signals: Signal {
+        name: "confirmed"
+    }
+    resources: [
+        Script {
+
             function toggle() {
                 print('removeButton.toggle()');
                 if (removeButton.state == 'opened') {
@@ -18,59 +22,103 @@
                     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>
+        
+        }
+    ]
+    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 {
+        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 {
+        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() }
+        }
+    }
+    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
+            }
+        }
+    ]
+    transitions: [
+        Transition {
+            fromState: "*"
+            toState: "opened"
+            reversible: true
+            NumericAnimation {
+                properties: "opacity,x,width"
+                duration: 200
+            }
+        }
+    ]
+}
diff --git a/examples/declarative/tutorials/contacts/2_Reuse/4/Contact.qml b/examples/declarative/tutorials/contacts/2_Reuse/4/Contact.qml
index 2f4d540..626f99d 100644
--- a/examples/declarative/tutorials/contacts/2_Reuse/4/Contact.qml
+++ b/examples/declarative/tutorials/contacts/2_Reuse/4/Contact.qml
@@ -1,32 +1,57 @@
-<Item id="contactDetails"
-    width="230"
-    height="{layout.height}">
-    <properties>
-        <Property name="mouseGrabbed" value="false"/>
-    </properties>
-    <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>
+Item {
+    id: contactDetails
+    width: 230
+    height: layout.height
+    properties: Property {
+        name: "mouseGrabbed"
+        value: false
+    }
+    properties: Property {
+        name: "contactid"
+        value: ""
+    }
+    properties: Property {
+        name: "label"
+        onValueChanged: { labelField.value = label }
+    }
+    properties: Property {
+        name: "phone"
+        onValueChanged: { phoneField.value = phone }
+    }
+    properties: Property {
+        name: "email"
+        onValueChanged: { emailField.value = email }
+    }
+    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"
+        }
+    }
+}
diff --git a/examples/declarative/tutorials/contacts/2_Reuse/4/ContactField.qml b/examples/declarative/tutorials/contacts/2_Reuse/4/ContactField.qml
index 819914c..acc40e2 100644
--- a/examples/declarative/tutorials/contacts/2_Reuse/4/ContactField.qml
+++ b/examples/declarative/tutorials/contacts/2_Reuse/4/ContactField.qml
@@ -1,35 +1,64 @@
-<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>
+Item {
+    id: contactField
+    clip: true
+    height: 30
+    properties: Property {
+        name: "label"
+    }
+    properties: Property {
+        name: "icon"
+    }
+    properties: Property {
+        name: "value"
+    }
+    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
+            }
+        }
+    ]
+    transitions: [
+        Transition {
+            fromState: ""
+            toState: "*"
+            reversible: true
+            NumericAnimation {
+                properties: "width,rightMargin"
+                duration: 200
+            }
+        }
+    ]
+}
diff --git a/examples/declarative/tutorials/contacts/2_Reuse/4/FieldText.qml b/examples/declarative/tutorials/contacts/2_Reuse/4/FieldText.qml
index 0f2ef4e..3d92827 100644
--- a/examples/declarative/tutorials/contacts/2_Reuse/4/FieldText.qml
+++ b/examples/declarative/tutorials/contacts/2_Reuse/4/FieldText.qml
@@ -1,21 +1,23 @@
-<Rect id="fieldText"
-    height="30"
-    radius="5"
-    color="white">
-    <properties>
-        <Property
-            name="text"
-            value=""
-            onValueChanged="reset()"/>
-        <Property
-            name="label"
-            value=""/>
-    </properties>
-    <signals>
-        <Signal name="confirmed"/>
-    </signals>
-    <resources>
-        <Script>
+Rect {
+    id: fieldText
+    height: 30
+    radius: 5
+    color: "white"
+    properties: Property {
+        name: "text"
+        value: ""
+        onValueChanged: { reset() }
+    }
+    properties: Property {
+        name: "label"
+        value: ""
+    }
+    signals: Signal {
+        name: "confirmed"
+    }
+    resources: [
+        Script {
+
             function edit() {
                 if (!contactDetails.mouseGrabbed) {
                     fieldText.state='editing';
@@ -33,64 +35,123 @@
                 fieldText.state='';
                 contactDetails.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="5"
-        anchors.right="{parent.right}" anchors.rightMargin="5"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        color="black"
-        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 == '' ? 1 : 0}">
-        <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="{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="39"/>
-            <SetProperty target="{textEdit.anchors}" property="rightMargin" value="39"/>
-        </State>
-    </states>
-    <transitions>
-        <Transition fromState='' toState="*" reversible="true">
-            <NumericAnimation properties="opacity,leftMargin,rightMargin" duration="200"/>
-            <ColorAnimation duration="150"/>
-        </Transition>
-    </transitions>
-</Rect>
+        
+        }
+    ]
+    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: 5
+        anchors.right: parent.right
+        anchors.rightMargin: 5
+        anchors.verticalCenter: parent.verticalCenter
+        color: "black"
+        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 == '' ? 1 : 0
+        opacity: Behaviour {
+            NumericAnimation {
+                property: "opacity"
+                duration: 250
+            }
+        }
+    }
+    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: 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: 39
+            }
+            SetProperty {
+                target: textEdit.anchors
+                property: "rightMargin"
+                value: 39
+            }
+        }
+    ]
+    transitions: [
+        Transition {
+            fromState: ""
+            toState: "*"
+            reversible: true
+            NumericAnimation {
+                properties: "opacity,leftMargin,rightMargin"
+                duration: 200
+            }
+            ColorAnimation {
+                duration: 150
+            }
+        }
+    ]
+}
diff --git a/examples/declarative/tutorials/contacts/2_Reuse/4/RemoveButton.qml b/examples/declarative/tutorials/contacts/2_Reuse/4/RemoveButton.qml
index 14e5043..1e3b5ad 100644
--- a/examples/declarative/tutorials/contacts/2_Reuse/4/RemoveButton.qml
+++ b/examples/declarative/tutorials/contacts/2_Reuse/4/RemoveButton.qml
@@ -1,15 +1,19 @@
-<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>
+Rect {
+    id: removeButton
+    width: 30
+    height: 30
+    color: "red"
+    radius: 5
+    properties: Property {
+        name: "expandedWidth"
+        value: 230
+    }
+    signals: Signal {
+        name: "confirmed"
+    }
+    resources: [
+        Script {
+
             function toggle() {
                 print('removeButton.toggle()');
                 if (removeButton.state == 'opened') {
@@ -22,59 +26,103 @@
                     }
                 }
             }
-        </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>
+        
+        }
+    ]
+    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 {
+        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 {
+        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() }
+        }
+    }
+    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
+            }
+        }
+    ]
+    transitions: [
+        Transition {
+            fromState: "*"
+            toState: "opened"
+            reversible: true
+            NumericAnimation {
+                properties: "opacity,x,width"
+                duration: 200
+            }
+        }
+    ]
+}
diff --git a/examples/declarative/tutorials/contacts/2_Reuse/GroupBox.qml b/examples/declarative/tutorials/contacts/2_Reuse/GroupBox.qml
index 77f7093..665c072 100644
--- a/examples/declarative/tutorials/contacts/2_Reuse/GroupBox.qml
+++ b/examples/declarative/tutorials/contacts/2_Reuse/GroupBox.qml
@@ -1,25 +1,59 @@
-<FocusRealm id="groupBox" width="{Math.max(270, subItem.width+40)}" height="{Math.max(70, subItem.height+40)}">
-    <properties>
-        <Property name="contents"/>
-        <Property name="label"/>
-    </properties>
-    <Rect id="wrapper" x="5" y="10" radius="10"
-        width="{groupBox.width-20}" height="{groupBox.height-20}"
-        color="white" pen.color="black">
-        <Item id="subItem" qml="{groupBox.contents}"
-            anchors.top="{parent.top}" anchors.topMargin="10"
-            anchors.right="{parent.right}" anchors.rightMargin="10"
-            width="{qmlItem.width}" height="{qmlItem.height}"/>
-    </Rect>
-    <Rect x="20" y="0" height="{text.height}" width="{text.width+10}" color="white">
-        <Text x="5" id="text" text="{label}" font.bold="true"/>
-    </Rect>
-    <Rect color="black" anchors.fill="{parent}" opacity="{parent.focus ? 0 : 0.3}">
-        <MouseRegion anchors.fill="{parent}" onClicked="parent.parent.focus=true"/>
-        <opacity>
-            <Behaviour>
-                <NumericAnimation property="opacity" duration="250"/>
-            </Behaviour>
-        </opacity>
-    </Rect>
-</FocusRealm>
+FocusRealm {
+    id: groupBox
+    width: Math.max(270, subItem.width+40)
+    height: Math.max(70, subItem.height+40)
+    properties: Property {
+        name: "contents"
+    }
+    properties: Property {
+        name: "label"
+    }
+    Rect {
+        id: wrapper
+        x: 5
+        y: 10
+        radius: 10
+        width: groupBox.width-20
+        height: groupBox.height-20
+        color: "white"
+        pen.color: "black"
+        Item {
+            id: subItem
+            qml: groupBox.contents
+            anchors.top: parent.top
+            anchors.topMargin: 10
+            anchors.right: parent.right
+            anchors.rightMargin: 10
+            width: qmlItem.width
+            height: qmlItem.height
+        }
+    }
+    Rect {
+        x: 20
+        y: 0
+        height: text.height
+        width: text.width+10
+        color: "white"
+        Text {
+            x: 5
+            id: text
+            text: label
+            font.bold: true
+        }
+    }
+    Rect {
+        color: "black"
+        anchors.fill: parent
+        opacity: parent.focus ? 0 : 0.3
+        MouseRegion {
+            anchors.fill: parent
+            onClicked: { parent.parent.focus=true }
+        }
+        opacity: Behaviour {
+            NumericAnimation {
+                property: "opacity"
+                duration: 250
+            }
+        }
+    }
+}
diff --git a/examples/declarative/tutorials/contacts/3_Collections/1/ContactView.qml b/examples/declarative/tutorials/contacts/3_Collections/1/ContactView.qml
index e4cc1ce..8c02b48 100644
--- a/examples/declarative/tutorials/contacts/3_Collections/1/ContactView.qml
+++ b/examples/declarative/tutorials/contacts/3_Collections/1/ContactView.qml
@@ -1,32 +1,43 @@
-<?qtfx namespacepath:=../lib ?>
-<Item id="contacts"
-    width="240"
-    height="230">
-    <properties>
-        <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 ORDER BY label, recid</query>
-        </SqlQuery>
-        <Component id="contactDelegate">
-            <Text
-                x="45" y="12"
-                width="{contactListView.width-45}"
-                height="30"
-                color="black"
-                font.bold="true"
-                text="{model.label}"/>
-        </Component>
-    </resources>
-    <ListView id="contactListView"
-        anchors.fill="{parent}"
-        clip="true"
-        model="{contactList}"
-        delegate="{contactDelegate}"
-        focus="true"/>
-</Item>
+import "../lib"
+Item {
+    id: contacts
+    width: 240
+    height: 230
+    properties: Property {
+        name: "mouseGrabbed"
+        value: false
+    }
+    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"
+        },
+        Component {
+            id: contactDelegate
+            Text {
+                x: 45
+                y: 12
+                width: contactListView.width-45
+                height: 30
+                color: "black"
+                font.bold: true
+                text: model.label
+            }
+        }
+    ]
+    ListView {
+        id: contactListView
+        anchors.fill: parent
+        clip: true
+        model: contactList
+        delegate: contactDelegate
+        focus: true
+    }
+}
diff --git a/examples/declarative/tutorials/contacts/3_Collections/2/ContactView.qml b/examples/declarative/tutorials/contacts/3_Collections/2/ContactView.qml
index 99d0bbb..88fc121 100644
--- a/examples/declarative/tutorials/contacts/3_Collections/2/ContactView.qml
+++ b/examples/declarative/tutorials/contacts/3_Collections/2/ContactView.qml
@@ -1,70 +1,123 @@
-<?qtfx namespacepath:=../lib ?>
-<Item id="contacts"
-    width="240"
-    height="230">
-    <properties>
-        <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 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="45" y="12"
-                    width="{parent.width-45}" 
-                    text="{model.label}"
-                    color="black"
-                    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 = '';
+import "../lib"
+Item {
+    id: contacts
+    width: 240
+    height: 230
+    properties: Property {
+        name: "mouseGrabbed"
+        value: false
+    }
+    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"
+        },
+        Component {
+            id: contactDelegate
+            Item {
+                id: wrapper
+                x: 0
+                width: ListView.view.width
+                height: 34
+                Text {
+                    id: label
+                    x: 45
+                    y: 12
+                    width: parent.width-45
+                    text: model.label
+                    color: "black"
+                    font.bold: true
+                }
+                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
+                        }
                     }
-                </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"
-        opacity="{mouseGrabbed ? 0 : 1}"/>
-    <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}"
-        focus="true"/>
-</Item>
+                ]
+                transitions: [
+                    Transition {
+                        NumericAnimation {
+                            duration: 500
+                            properties: "yPosition,height,opacity"
+                        }
+                    }
+                ]
+                Connection {
+                    sender: cancelEditButton
+                    signal: "clicked()"
+                    script: {
+                    
+                                        if (wrapper.state == 'opened') {
+                                            wrapper.state = '';
+                                        }
+                                    
+                    }
+                }
+            }
+        },
+        Button {
+            id: cancelEditButton
+            anchors.top: parent.top
+            anchors.topMargin: 5
+            anchors.right: parent.right
+            anchors.rightMargin: 5
+            icon: "../../shared/pics/cancel.png"
+            opacity: mouseGrabbed ? 0 : 1
+        },
+        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
+            focus: true
+        }
+    ]
+}
diff --git a/examples/declarative/tutorials/contacts/3_Collections/3/ContactView.qml b/examples/declarative/tutorials/contacts/3_Collections/3/ContactView.qml
index a8c5cd0..09aab71 100644
--- a/examples/declarative/tutorials/contacts/3_Collections/3/ContactView.qml
+++ b/examples/declarative/tutorials/contacts/3_Collections/3/ContactView.qml
@@ -1,75 +1,140 @@
-<?qtfx namespacepath:=../lib ?>
-<Item id="contacts"
-    width="240"
-    height="230">
-    <properties>
-        <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 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="45" y="12"
-                    width="{parent.width-45}" 
-                    text="{model.label}"
-                    color="black"
-                    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 = '';
+import "../lib"
+Item {
+    id: contacts
+    width: 240
+    height: 230
+    properties: Property {
+        name: "mouseGrabbed"
+        value: false
+    }
+    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"
+        },
+        Component {
+            id: contactDelegate
+            Item {
+                id: wrapper
+                x: 0
+                width: ListView.view.width
+                height: 34
+                Text {
+                    id: label
+                    x: 45
+                    y: 12
+                    width: parent.width-45
+                    text: model.label
+                    color: "black"
+                    font.bold: true
+                }
+                MouseRegion {
+                    anchors.fill: label
+                    onClicked: { Details.qml = 'Contact.qml';
+                        wrapper.state='opened'; }
+                }
+                Item {
+                    id: Details
+                    anchors.fill: wrapper
+                    opacity: 0
+                    Bind {
+                        target: Details.qmlItem
+                        property: "contactid"
+                        value: model.contactid
                     }
-                </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"
-        opacity="{mouseGrabbed ? 0 : 1}"/>
-    <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}"
-        focus="true"/>
-</Item>
+                    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
+                    }
+                }
+                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
+                        }
+                    }
+                ]
+                transitions: [
+                    Transition {
+                        NumericAnimation {
+                            duration: 500
+                            properties: "yPosition,height,opacity"
+                        }
+                    }
+                ]
+                Connection {
+                    sender: cancelEditButton
+                    signal: "clicked()"
+                    script: {
+                    
+                                        if (wrapper.state == 'opened') {
+                                            wrapper.state = '';
+                                        }
+                                    
+                    }
+                }
+            }
+        },
+        Button {
+            id: cancelEditButton
+            anchors.top: parent.top
+            anchors.topMargin: 5
+            anchors.right: parent.right
+            anchors.rightMargin: 5
+            icon: "../../shared/pics/cancel.png"
+            opacity: mouseGrabbed ? 0 : 1
+        },
+        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
+            focus: true
+        }
+    ]
+}
diff --git a/examples/declarative/tutorials/contacts/3_Collections/3_Collections.qml b/examples/declarative/tutorials/contacts/3_Collections/3_Collections.qml
index dcbbe57..e8d9a19 100644
--- a/examples/declarative/tutorials/contacts/3_Collections/3_Collections.qml
+++ b/examples/declarative/tutorials/contacts/3_Collections/3_Collections.qml
@@ -1,12 +1,29 @@
-<Rect id="page" width="{layout.width}" height="{layout.height}" color='white'>
-    <Bind id="currentItem" value="true"/>
-<!--
-    relies on the current focus behavior whereby setting focus=true on a
-    component removes focus from any previous element
--->
-    <GridLayout id="layout" width="{contents.width}" height="{contents.height}">
-        <GroupBox contents="1/ContactView.qml" label="something"/>
-        <GroupBox contents="2/ContactView.qml" label="something"/>
-        <GroupBox contents="3/ContactView.qml" label="something"/>
-    </GridLayout>
-</Rect>
+Rect {
+    id: page
+    width: layout.width
+    height: layout.height
+    color: "white"
+    Bind {
+        id: currentItem
+        value: true
+    }
+    // relies on the current focus behavior whereby setting focus=true on a
+    // component removes focus from any previous element
+    GridLayout {
+        id: layout
+        width: contents.width
+        height: contents.height
+        GroupBox {
+            contents: "1/ContactView.qml"
+            label: "something"
+        }
+        GroupBox {
+            contents: "2/ContactView.qml"
+            label: "something"
+        }
+        GroupBox {
+            contents: "3/ContactView.qml"
+            label: "something"
+        }
+    }
+}
diff --git a/examples/declarative/tutorials/contacts/3_Collections/GroupBox.qml b/examples/declarative/tutorials/contacts/3_Collections/GroupBox.qml
index 77f7093..665c072 100644
--- a/examples/declarative/tutorials/contacts/3_Collections/GroupBox.qml
+++ b/examples/declarative/tutorials/contacts/3_Collections/GroupBox.qml
@@ -1,25 +1,59 @@
-<FocusRealm id="groupBox" width="{Math.max(270, subItem.width+40)}" height="{Math.max(70, subItem.height+40)}">
-    <properties>
-        <Property name="contents"/>
-        <Property name="label"/>
-    </properties>
-    <Rect id="wrapper" x="5" y="10" radius="10"
-        width="{groupBox.width-20}" height="{groupBox.height-20}"
-        color="white" pen.color="black">
-        <Item id="subItem" qml="{groupBox.contents}"
-            anchors.top="{parent.top}" anchors.topMargin="10"
-            anchors.right="{parent.right}" anchors.rightMargin="10"
-            width="{qmlItem.width}" height="{qmlItem.height}"/>
-    </Rect>
-    <Rect x="20" y="0" height="{text.height}" width="{text.width+10}" color="white">
-        <Text x="5" id="text" text="{label}" font.bold="true"/>
-    </Rect>
-    <Rect color="black" anchors.fill="{parent}" opacity="{parent.focus ? 0 : 0.3}">
-        <MouseRegion anchors.fill="{parent}" onClicked="parent.parent.focus=true"/>
-        <opacity>
-            <Behaviour>
-                <NumericAnimation property="opacity" duration="250"/>
-            </Behaviour>
-        </opacity>
-    </Rect>
-</FocusRealm>
+FocusRealm {
+    id: groupBox
+    width: Math.max(270, subItem.width+40)
+    height: Math.max(70, subItem.height+40)
+    properties: Property {
+        name: "contents"
+    }
+    properties: Property {
+        name: "label"
+    }
+    Rect {
+        id: wrapper
+        x: 5
+        y: 10
+        radius: 10
+        width: groupBox.width-20
+        height: groupBox.height-20
+        color: "white"
+        pen.color: "black"
+        Item {
+            id: subItem
+            qml: groupBox.contents
+            anchors.top: parent.top
+            anchors.topMargin: 10
+            anchors.right: parent.right
+            anchors.rightMargin: 10
+            width: qmlItem.width
+            height: qmlItem.height
+        }
+    }
+    Rect {
+        x: 20
+        y: 0
+        height: text.height
+        width: text.width+10
+        color: "white"
+        Text {
+            x: 5
+            id: text
+            text: label
+            font.bold: true
+        }
+    }
+    Rect {
+        color: "black"
+        anchors.fill: parent
+        opacity: parent.focus ? 0 : 0.3
+        MouseRegion {
+            anchors.fill: parent
+            onClicked: { parent.parent.focus=true }
+        }
+        opacity: Behaviour {
+            NumericAnimation {
+                property: "opacity"
+                duration: 250
+            }
+        }
+    }
+}
diff --git a/examples/declarative/tutorials/contacts/3_Collections/lib/Button.qml b/examples/declarative/tutorials/contacts/3_Collections/lib/Button.qml
index 8290d35..80588cf 100644
--- a/examples/declarative/tutorials/contacts/3_Collections/lib/Button.qml
+++ b/examples/declarative/tutorials/contacts/3_Collections/lib/Button.qml
@@ -1,38 +1,61 @@
-<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>
+Item {
+    id: button
+    width: 30
+    height: 30
+    properties: Property {
+        name: "icon"
+    }
+    signals: Signal {
+        name: "clicked"
+    }
+    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"
+                }
+            }
+        ]
+        transitions: [
+            Transition {
+                fromState: "*"
+                toState: "pressed"
+                ColorAnimation {
+                    duration: 200
+                }
+            },
+            Transition {
+                fromState: "pressed"
+                toState: "*"
+                ColorAnimation {
+                    duration: 1000
+                }
+            }
+        ]
+    }
+    opacity: Behaviour {
+        NumericAnimation {
+            property: "opacity"
+            duration: 250
+        }
+    }
+}
diff --git a/examples/declarative/tutorials/contacts/3_Collections/lib/Contact.qml b/examples/declarative/tutorials/contacts/3_Collections/lib/Contact.qml
index 293b3a5..a7e78dc 100644
--- a/examples/declarative/tutorials/contacts/3_Collections/lib/Contact.qml
+++ b/examples/declarative/tutorials/contacts/3_Collections/lib/Contact.qml
@@ -1,28 +1,52 @@
-<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>
+Item {
+    id: contactDetails
+    anchors.fill: parent
+    properties: Property {
+        name: "contactid"
+        value: ""
+    }
+    properties: Property {
+        name: "label"
+        onValueChanged: { labelField.value = label }
+    }
+    properties: Property {
+        name: "phone"
+        onValueChanged: { phoneField.value = phone }
+    }
+    properties: Property {
+        name: "email"
+        onValueChanged: { emailField.value = email }
+    }
+    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"
+        }
+    }
+}
diff --git a/examples/declarative/tutorials/contacts/3_Collections/lib/ContactField.qml b/examples/declarative/tutorials/contacts/3_Collections/lib/ContactField.qml
index 819914c..acc40e2 100644
--- a/examples/declarative/tutorials/contacts/3_Collections/lib/ContactField.qml
+++ b/examples/declarative/tutorials/contacts/3_Collections/lib/ContactField.qml
@@ -1,35 +1,64 @@
-<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>
+Item {
+    id: contactField
+    clip: true
+    height: 30
+    properties: Property {
+        name: "label"
+    }
+    properties: Property {
+        name: "icon"
+    }
+    properties: Property {
+        name: "value"
+    }
+    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
+            }
+        }
+    ]
+    transitions: [
+        Transition {
+            fromState: ""
+            toState: "*"
+            reversible: true
+            NumericAnimation {
+                properties: "width,rightMargin"
+                duration: 200
+            }
+        }
+    ]
+}
diff --git a/examples/declarative/tutorials/contacts/3_Collections/lib/FieldText.qml b/examples/declarative/tutorials/contacts/3_Collections/lib/FieldText.qml
index 068590a..1329db6 100644
--- a/examples/declarative/tutorials/contacts/3_Collections/lib/FieldText.qml
+++ b/examples/declarative/tutorials/contacts/3_Collections/lib/FieldText.qml
@@ -1,21 +1,23 @@
-<Rect id="fieldText"
-    height="30"
-    radius="5"
-    color="white">
-    <properties>
-        <Property
-            name="text"
-            value=""
-            onValueChanged="reset()"/>
-        <Property
-            name="label"
-            value=""/>
-    </properties>
-    <signals>
-        <Signal name="confirmed"/>
-    </signals>
-    <resources>
-        <Script>
+Rect {
+    id: fieldText
+    height: 30
+    radius: 5
+    color: "white"
+    properties: Property {
+        name: "text"
+        value: ""
+        onValueChanged: { reset() }
+    }
+    properties: Property {
+        name: "label"
+        value: ""
+    }
+    signals: Signal {
+        name: "confirmed"
+    }
+    resources: [
+        Script {
+
             function edit() {
                 if (!contacts.mouseGrabbed) {
                     fieldText.state='editing';
@@ -33,64 +35,123 @@
                 fieldText.state='';
                 contacts.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="5"
-        anchors.right="{parent.right}" anchors.rightMargin="5"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        color="black"
-        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 == '' ? 1 : 0}">
-        <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="{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="39"/>
-            <SetProperty target="{textEdit.anchors}" property="rightMargin" value="39"/>
-        </State>
-    </states>
-    <transitions>
-        <Transition fromState='' toState="*" reversible="true">
-            <NumericAnimation properties="opacity,leftMargin,rightMargin" duration="200"/>
-            <ColorAnimation duration="150"/>
-        </Transition>
-    </transitions>
-</Rect>
+        
+        }
+    ]
+    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: 5
+        anchors.right: parent.right
+        anchors.rightMargin: 5
+        anchors.verticalCenter: parent.verticalCenter
+        color: "black"
+        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 == '' ? 1 : 0
+        opacity: Behaviour {
+            NumericAnimation {
+                property: "opacity"
+                duration: 250
+            }
+        }
+    }
+    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: 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: 39
+            }
+            SetProperty {
+                target: textEdit.anchors
+                property: "rightMargin"
+                value: 39
+            }
+        }
+    ]
+    transitions: [
+        Transition {
+            fromState: ""
+            toState: "*"
+            reversible: true
+            NumericAnimation {
+                properties: "opacity,leftMargin,rightMargin"
+                duration: 200
+            }
+            ColorAnimation {
+                duration: 150
+            }
+        }
+    ]
+}
diff --git a/examples/declarative/tutorials/contacts/3_Collections/lib/RemoveButton.qml b/examples/declarative/tutorials/contacts/3_Collections/lib/RemoveButton.qml
index ad488c1..d99b550 100644
--- a/examples/declarative/tutorials/contacts/3_Collections/lib/RemoveButton.qml
+++ b/examples/declarative/tutorials/contacts/3_Collections/lib/RemoveButton.qml
@@ -1,15 +1,19 @@
-<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>
+Rect {
+    id: removeButton
+    width: 30
+    height: 30
+    color: "red"
+    radius: 5
+    properties: Property {
+        name: "expandedWidth"
+        value: 230
+    }
+    signals: Signal {
+        name: "confirmed"
+    }
+    resources: [
+        Script {
+
             function toggle() {
                 print('removeButton.toggle()');
                 if (removeButton.state == 'opened') {
@@ -22,59 +26,103 @@
                     }
                 }
             }
-        </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>
+        
+        }
+    ]
+    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 {
+        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 {
+        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() }
+        }
+    }
+    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
+            }
+        }
+    ]
+    transitions: [
+        Transition {
+            fromState: "*"
+            toState: "opened"
+            reversible: true
+            NumericAnimation {
+                properties: "opacity,x,width"
+                duration: 200
+            }
+        }
+    ]
+}