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

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

132 files changed, 4385 insertions, 2584 deletions

diff --git a/demos/declarative/calculator/CalcButton.qml b/demos/declarative/calculator/CalcButton.qml
index f240000..f4ccdae 100644
--- a/demos/declarative/calculator/CalcButton.qml
+++ b/demos/declarative/calculator/CalcButton.qml
@@ -25,13 +25,13 @@ Item {
 
     Image {
         id: Image
-        src: "pics/button.sci"
+        source: "pics/button.sci"
         width: Button.width; height: Button.height
     }
 
     Image {
         id: ImagePressed
-        src: "pics/button-pressed.sci"
+        source: "pics/button-pressed.sci"
         width: Button.width; height: Button.height
         opacity: 0
     }
diff --git a/demos/declarative/calculator/calculator.qml b/demos/declarative/calculator/calculator.qml
index 1e7c30a..145435b 100644
--- a/demos/declarative/calculator/calculator.qml
+++ b/demos/declarative/calculator/calculator.qml
@@ -2,7 +2,7 @@ Rect {
     id: MainWindow;
     width: 320; height: 270; color: "black"
 
-    Script { src: "calculator.js" }
+    Script { source: "calculator.js" }
 
     VerticalLayout {
         spacing: 2; margin: 2
diff --git a/demos/declarative/mediabrowser/content/LikeOMeter.qml b/demos/declarative/mediabrowser/content/LikeOMeter.qml
deleted file mode 100644
index 68584a5..0000000
--- a/demos/declarative/mediabrowser/content/LikeOMeter.qml
+++ /dev/null
@@ -1,13 +0,0 @@
-<Item id="Container">
-    <properties>
-        <Property name="rating" value="2"/>
-    </properties>
-
-    <HorizontalLayout>
-        <Star rating="0" onClicked="Container.rating = rating" on="{Container.rating >= 0}"/>
-        <Star rating="1" onClicked="Container.rating = rating" on="{Container.rating >= 1}"/>
-        <Star rating="2" onClicked="Container.rating = rating" on="{Container.rating >= 2}"/>
-        <Star rating="3" onClicked="Container.rating = rating" on="{Container.rating >= 3}"/>
-        <Star rating="4" onClicked="Container.rating = rating" on="{Container.rating >= 4}"/>
-    </HorizontalLayout>
-</Item>
diff --git a/demos/declarative/mediabrowser/content/MediaButton.qml b/demos/declarative/mediabrowser/content/MediaButton.qml
deleted file mode 100644
index c92305a..0000000
--- a/demos/declarative/mediabrowser/content/MediaButton.qml
+++ /dev/null
@@ -1,21 +0,0 @@
-<Item id="Container">
-    <signals>
-        <Signal name="clicked"/>
-    </signals>
-
-    <properties>
-        <Property name="text"/>
-    </properties>
-
-    <Image id="Image" src="pics/button.png"/>
-    <Image id="Pressed" src="pics/button-pressed.png" opacity="0"/>
-    <MouseRegion id="MouseRegion" anchors.fill="{Image}" onClicked="Container.clicked.emit();"/>
-    <Text font.bold="true" color="white" anchors.centeredIn="{Image}" text="{Container.text}"/>
-    <width>{Image.width}</width>
-
-    <states>
-        <State name="Pressed" when="{MouseRegion.pressed == true}">
-            <SetProperties target="{Pressed}" opacity="1"/>
-        </State>
-    </states>
-</Item>
diff --git a/demos/declarative/mediabrowser/content/PhoneInfoContainer.qml b/demos/declarative/mediabrowser/content/PhoneInfoContainer.qml
deleted file mode 100644
index 34fd889..0000000
--- a/demos/declarative/mediabrowser/content/PhoneInfoContainer.qml
+++ /dev/null
@@ -1,66 +0,0 @@
-<Flipable id="Container">
-    <properties>
-        <Property name="frontContainer" value="{ContainerFront}"/>
-        <Property name="flickableArea" value="{Flickable}"/>
-        <Property name="phoneTitle" value="N/A"/>
-        <Property name="phoneDescription" value="..."/>
-        <Property name="phoneSpecifications" value=""/>
-        <Property name="phoneUrl" value=""/>
-        <Property name="rating" value="2"/>
-    </properties>
-
-    <signals>
-        <Signal name="closed"/>
-    </signals>
-
-    <axis>
-        <Axis startX="{Container.width / 2}" endX="{Container.width / 2}" endY="1" />
-    </axis>
-
-    <front>
-        <Item id="ContainerFront" anchors.fill="{Container}">
-            <Rect anchors.fill="{parent}" color="black" opacity="0.4" pen.color="white" pen.width="2"/>
-
-            <MediaButton id="BackButton" x="630" y="400" text="Back" onClicked="Container.closed.emit()"/>
-            <MediaButton id="MoreButton" x="530" y="400" text="More..." onClicked="Container.state='Back'"/>
-
-            <Text id="TitleText" style="Raised" styleColor="black" color="white" x="420" y="30" width="{parent.width}"
-                  text="{Container.phoneTitle}" font.size="22"/>
-
-            <LikeOMeter x="420" y="75" rating="{Container.rating}"/>
-
-            <Flickable id="Flickable" x="420" width="280" height="260" y="120" clip="true" viewportWidth="280"
-                       viewportHeight="{DescriptionText.height}">
-                <Text id="DescriptionText"  wrap="true" color="white" width="{parent.width}"
-                      text="{Container.phoneDescription}" font.size="12"/>
-            </Flickable>
-            <Text color="white" width="300" x="50" y="300" text="{Container.phoneSpecifications}"/>
-            <ScrollBar id="ScrollBar" x="720" y="{Flickable.y}" width="7" height="{Flickable.height}" opacity="0"
-                       flickableArea="{Flickable}" clip="true"/>
-        </Item>
-    </front>
-
-    <back>
-        <Item anchors.fill="{Container}">
-            <Rect anchors.fill="{parent}" color="black" opacity="0.4" pen.color="white" pen.width="2"/>
-            <Flickable x="10" width="{Container.width-20}" height="{Container.height-20}" y="10" clip="true"
-                    viewportWidth="{UrlView.width}" viewportHeight="{UrlView.height}">
-                <WebView id="UrlView" url="{Container.phoneUrl}" idealWidth="{parent.width}"/>
-            </Flickable>
-            <MediaButton id="BackButton2" x="630" y="400" text="Back" onClicked="Container.state=''"/>
-        </Item>
-    </back>
-
-    <states>
-        <State name="Back">
-            <SetProperty target="{Container}" property="rotation" value="180"/>
-        </State>
-    </states>
-
-    <transitions>
-        <Transition>
-            <NumericAnimation easing="easeInOutQuad" properties="rotation" duration="500"/>
-        </Transition>
-    </transitions>
-
-</Flipable>
diff --git a/demos/declarative/mediabrowser/content/PhonesPathView.qml b/demos/declarative/mediabrowser/content/PhonesPathView.qml
deleted file mode 100644
index 8ec1938..0000000
--- a/demos/declarative/mediabrowser/content/PhonesPathView.qml
+++ /dev/null
@@ -1,79 +0,0 @@
-<PathView id="Container" pathItemCount="6">
-
-    <path>
-        <Path startX="-50" startY="40">
-            <PathAttribute name="scale" value="0.2"/>
-            <PathCubic x="400" y="220" control1X="140" control1Y="40" control2X="210" control2Y="220"/>
-            <PathAttribute name="scale" value="1.2"/>
-            <PathAttribute name="z" value="1"/>
-            <PathCubic x="850" y="40" control2X="660" control2Y="40" control1X="590" control1Y="220"/>
-            <PathAttribute name="scale" value="0.2"/>
-        </Path>
-    </path>
-
-    <delegate>
-        <Component id="PhoneDelegate">
-            <Item id="Wrapper" width="320" height="200" scale="{Wrapper.PathView.scale}" z="{Wrapper.PathView.z}">
-                <Connection sender="{PhoneInfoContainer}" script="if (Wrapper.state == 'Details') Wrapper.state = ''" signal="closed()"/>
-
-                <Script>
-                    function phoneClicked() {
-                        if (MainWindow.minimized == true) {
-                            MainWindow.minimized = false;
-                        } else {
-                            PhoneInfoContainer.phoneTitle = title;
-                            PhoneInfoContainer.flickableArea.yPosition = 0;
-                            PhoneInfoContainer.phoneDescription = description;
-                            PhoneInfoContainer.phoneSpecifications = specifications;
-                            PhoneInfoContainer.phoneUrl = url;
-                            PhoneInfoContainer.rating = rating;
-                            Wrapper.state = "Details";
-                        }
-                    }
-                </Script>
-
-                <Rect id="Dvd" anchors.fill="{parent}" color="white">
-                    <Item x="{(parent.width-width)/2}" y="{(parent.height-height)/2}" width="{Thumb.width*Thumb.scale}" height="{Thumb.height*Thumb.scale}">
-                        <Image id="Thumb" src="{thumb}" scale="{0.95*Math.min(Dvd.height/height,Dvd.width/width)}"/>
-                    </Item>
-                    <!-- <Image src="pics/reflection.png" anchors.fill="{parent}"/> -->
-                    <Image src="pics/shadow-right.png" x="{Dvd.width}" height="{Dvd.height}"/>
-                    <Image src="pics/shadow-bottom.png" y="{Dvd.height}" width="{Dvd.width}"/>
-                    <Image id="Corner" src="pics/shadow-corner.png" x="{Dvd.width}" y="{Dvd.height}"/>
-                </Rect>
-
-                <MouseRegion anchors.fill="{Wrapper}" onClicked="phoneClicked()"/>
-
-                <states>
-                    <State name="Details">
-                        <ParentChange target="{Wrapper}" parent="{PhoneInfoContainer.frontContainer}"/>
-                        <SetProperties target="{Wrapper}" x="50" y="60" scale="1"/>
-                        <SetProperties target="{PhoneInfoContainer}" y="20"/>
-                        <SetProperties target="{Container}" y="-480"/>
-                        <SetProperties target="{CloseButton}" opacity="0"/>
-                        <SetProperties target="{CategoryText}" y="-50"/>
-                    </State>
-                    <State name="Stacked" when="{MainWindow.minimized == true}">
-                        <ParentChange target="{Wrapper}" parent="{Stack}"/>
-                        <SetProperties target="{Wrapper}" x="0" y="0" scale="0.2"/>
-                        <SetProperties target="{CloseButton}" opacity="0"/>
-                        <SetProperties target="{CategoryText}" y="-50"/>
-                    </State>
-                </states>
-
-                <transitions>
-                    <Transition fromState="" toState="Details,Stacked">
-                        <ParentChangeAction/>
-                        <NumericAnimation properties="x,y,scale,opacity" duration="500" easing="easeInOutQuad"/>
-                    </Transition>
-                    <Transition fromState="Details,Stacked" toState="">
-                        <ParentChangeAction/>
-                        <NumericAnimation properties="x,y,scale,opacity" duration="500" easing="easeInOutQuad"/>
-                    </Transition>
-                </transitions>
-
-            </Item>
-        </Component>
-    </delegate>
-
-</PathView>
diff --git a/demos/declarative/mediabrowser/content/ScrollBar.qml b/demos/declarative/mediabrowser/content/ScrollBar.qml
deleted file mode 100644
index 974f4d0..0000000
--- a/demos/declarative/mediabrowser/content/ScrollBar.qml
+++ /dev/null
@@ -1,18 +0,0 @@
-<Item id="Container">
-    <properties>
-        <Property name="flickableArea"/>
-    </properties>
-
-    <Rect radius="5" color="black" opacity="0.3" pen.color="white" pen.width="2" x="0" y="{flickableArea.pageYPosition * Container.height}"
-          width="{parent.width}" height="{flickableArea.pageHeight * Container.height}"/>
-    <states>
-        <State name="show" when="{flickableArea.moving}">
-            <SetProperties target="{Container}" opacity="1" />
-        </State>
-    </states>
-    <transitions>
-        <Transition fromState="*" toState="*">
-            <NumericAnimation target="{Container}" properties="opacity" duration="400"/>
-        </Transition>
-    </transitions>
-</Item>
diff --git a/demos/declarative/mediabrowser/content/Star.qml b/demos/declarative/mediabrowser/content/Star.qml
deleted file mode 100644
index 1db29e8..0000000
--- a/demos/declarative/mediabrowser/content/Star.qml
+++ /dev/null
@@ -1,25 +0,0 @@
-<Item id="Container" width="24" height="24">
-    <properties>
-        <Property name="rating"/>
-        <Property name="on"/>
-    </properties>
-
-    <signals>
-        <Signal name="clicked"/>
-    </signals>
-
-    <Image id="Image" src="pics/ghns_star.png" x="6" y="7" opacity="0.4" scale="0.5"/>
-    <MouseRegion anchors.fill="{Container}" onClicked="Container.clicked.emit()"/>
-
-    <states>
-        <State name="on" when="{Container.on == true}">
-            <SetProperties target="{Image}" opacity="1" scale="1" x="1" y="0"/>
-        </State>
-    </states>
-    <transitions>
-        <Transition>
-            <NumericAnimation properties="opacity,scale,x,y" easing="easeOutBounce"/>
-        </Transition>
-    </transitions>
-
-</Item>
diff --git a/demos/declarative/mediabrowser/mediabrowser.qml b/demos/declarative/mediabrowser/mediabrowser.qml
deleted file mode 100644
index bcdca56..0000000
--- a/demos/declarative/mediabrowser/mediabrowser.qml
+++ /dev/null
@@ -1,36 +0,0 @@
-<?qtfx namespacepath:=content ?>
-<Item width="800" height="480" id="MainWindow">
-    <properties>
-        <Property name="minimized" value="false"/>
-    </properties>
-
-    <Item id="Background">
-        <Image src="content/pics/background.png" opaque="true"/>
-
-        <Rect id="Menu" x="-150" width="150" height="480" color="#232323">
-            <Text id="IconText" x="40" y="110" font.bold="true" font.size="9" text="Nokia Devices" color="white" style="Raised" styleColor="black"/>
-            <Image src="content/pics/shadow-right-screen.png" x="150" height="480" tile="true"/>
-        </Rect>
-
-        <PhonesPathView id="PhonesPathView" model="{PhonesModel}" y="60" width="800" height="360"/>
-        <PhoneInfoContainer id="PhoneInfoContainer" width="750" x="25" y="500" height="440"/>
-        <MediaButton id="CloseButton" x="680" y="440" text="Close" onClicked="MainWindow.minimized = true"/>
-
-        <states>
-            <State name="Minimized" when="{MainWindow.minimized == true}">
-                <SetProperties target="{Background}" x="75"/>
-                <SetProperties target="{Menu}" x="-75"/>
-            </State>
-        </states>
-        <transitions>
-            <Transition fromState="*" toState="*">
-                <NumericAnimation properties="x,y,size" duration="500" easing="easeInOutQuad"/>
-            </Transition>
-        </transitions>
-    </Item>
-
-    <Text id="CategoryText" x="300" y="15" text="Nokia Devices" font.size="22" color="white" style="Raised" styleColor="black"/>
-    <Item id="Stack" x="45" y="50"/>
-
-</Item>
-
diff --git a/demos/declarative/phonebrowser/content/LikeOMeter.qml b/demos/declarative/phonebrowser/content/LikeOMeter.qml
new file mode 100644
index 0000000..31b8195
--- /dev/null
+++ b/demos/declarative/phonebrowser/content/LikeOMeter.qml
@@ -0,0 +1,34 @@
+Item {
+    id: Container
+    properties: Property {
+        name: "rating"
+        value: 2
+    }
+    HorizontalLayout {
+        Star {
+            rating: 0
+            onClicked: { Container.rating = rating }
+            on: Container.rating >= 0
+        }
+        Star {
+            rating: 1
+            onClicked: { Container.rating = rating }
+            on: Container.rating >= 1
+        }
+        Star {
+            rating: 2
+            onClicked: { Container.rating = rating }
+            on: Container.rating >= 2
+        }
+        Star {
+            rating: 3
+            onClicked: { Container.rating = rating }
+            on: Container.rating >= 3
+        }
+        Star {
+            rating: 4
+            onClicked: { Container.rating = rating }
+            on: Container.rating >= 4
+        }
+    }
+}
diff --git a/demos/declarative/phonebrowser/content/MediaButton.qml b/demos/declarative/phonebrowser/content/MediaButton.qml
new file mode 100644
index 0000000..bb2510a
--- /dev/null
+++ b/demos/declarative/phonebrowser/content/MediaButton.qml
@@ -0,0 +1,40 @@
+Item {
+    id: Container
+    signals: Signal {
+        name: "clicked"
+    }
+    properties: Property {
+        name: "text"
+    }
+    Image {
+        id: Image
+        source: "pics/button.png"
+    }
+    Image {
+        id: Pressed
+        source: "pics/button-pressed.png"
+        opacity: 0
+    }
+    MouseRegion {
+        id: MouseRegion
+        anchors.fill: Image
+        onClicked: { Container.clicked.emit(); }
+    }
+    Text {
+        font.bold: true
+        color: "white"
+        anchors.centeredIn: Image
+        text: Container.text
+    }
+    width: Image.width
+    states: [
+        State {
+            name: "Pressed"
+            when: MouseRegion.pressed == true
+            SetProperties {
+                target: Pressed
+                opacity: 1
+            }
+        }
+    ]
+}
diff --git a/demos/declarative/phonebrowser/content/PhoneInfoContainer.qml b/demos/declarative/phonebrowser/content/PhoneInfoContainer.qml
new file mode 100644
index 0000000..da475b1
--- /dev/null
+++ b/demos/declarative/phonebrowser/content/PhoneInfoContainer.qml
@@ -0,0 +1,113 @@
+Flipable {
+    id: Container
+
+    properties: [
+        Property { name: "frontContainer"; value: ContainerFront },
+        Property { name: "flickableArea"; value: Flickable },
+        Property { name: "phoneTitle"; value: "N/A" },
+        Property { name: "phoneDescription"; value: "..." },
+        Property { name: "phoneSpecifications"; value: "" },
+        Property { name: "phoneUrl"; value: "" },
+        Property { name: "rating"; value: 2 }
+    ]
+
+    signals: Signal { name: "closed" }
+
+    axis: Axis { startX: Container.width / 2; endX: Container.width / 2; endY: 1 }
+
+    front: Item {
+        id: ContainerFront; anchors.fill: Container
+
+        Rect {
+            anchors.fill: parent
+            color: "black"; opacity: 0.4
+            pen.color: "white"; pen.width: 2
+        }
+
+        MediaButton {
+            id: BackButton; x: 630; y: 400; text: "Back"
+            onClicked: { Container.closed.emit() }
+        }
+
+        MediaButton {
+            id: MoreButton; x: 530; y: 400; text: "More..."
+            onClicked: { Container.state='Back' }
+        }
+
+        Text {
+            id: TitleText
+            style: Raised; styleColor: "black"
+            color: "white"
+            x: 420; y: 30; width: parent.width
+            text: Container.phoneTitle; font.size: 22
+        }
+
+        LikeOMeter { x: 420; y: 75; rating: Container.rating }
+
+        Flickable {
+            id: Flickable
+            x: 420; width: 280; height: 260; y: 120; clip: true
+            viewportWidth: 280; viewportHeight: DescriptionText.height
+
+            Text {
+                id: DescriptionText
+                wrap: true
+                color: "white"
+                width: parent.width
+                text: Container.phoneDescription
+                font.size: 12
+            }
+        }
+
+        Text {
+            color: "white"; width: 300; x: 50; y: 300
+            text: Container.phoneSpecifications
+        }
+
+        ScrollBar {
+            id: ScrollBar
+            x: 720; y: Flickable.y; width: 7
+            height: Flickable.height; opacity: 0
+            flickableArea: Flickable; clip: true
+        }
+    }
+
+    back: Item {
+        anchors.fill: Container
+
+        Rect {
+            anchors.fill: parent
+            color: "black"
+            opacity: 0.4
+            pen.color: "white"
+            pen.width: 2
+        }
+
+        Flickable {
+            width: Container.width-20
+            height: Container.height-20
+            x: 10; y: 10; clip: true
+            viewportWidth: UrlView.width
+            viewportHeight: UrlView.height
+
+            WebView { id: UrlView; url: Container.phoneUrl; idealWidth: parent.width }
+        }
+
+        MediaButton {
+            id: BackButton2; x: 630; y: 400; text: "Back"; onClicked: { Container.state='' }
+        }
+    }
+
+    states: [
+        State {
+            name: "Back"
+            SetProperty { target: Container; property: "rotation"; value: 180 }
+        }
+    ]
+
+    transitions: [
+        Transition {
+            NumericAnimation { easing: "easeInOutQuad"; properties: "rotation"; duration: 500 }
+        }
+    ]
+}
diff --git a/demos/declarative/phonebrowser/content/PhonesPathView.qml b/demos/declarative/phonebrowser/content/PhonesPathView.qml
new file mode 100644
index 0000000..acef6c3
--- /dev/null
+++ b/demos/declarative/phonebrowser/content/PhonesPathView.qml
@@ -0,0 +1,120 @@
+PathView {
+    id: Container; pathItemCount: 6
+
+    path: Path {
+        startX: -50; startY: 40;
+
+        PathAttribute { name: "scale"; value: 0.2 }
+
+        PathCubic {
+            x: 400; y: 220
+            control1X: 140; control1Y: 40
+            control2X: 210; control2Y: 220
+        }
+
+        PathAttribute { name: "scale"; value: 1.2  }
+        PathAttribute { name: "z"; value: 1 }
+
+        PathCubic {
+            x: 850; y: 40
+            control2X: 660; control2Y: 40
+            control1X: 590; control1Y: 220
+        }
+
+        PathAttribute { name: "scale"; value: 0.2 }
+    }
+
+    delegate: Component {
+        id: PhoneDelegate
+
+        Item {
+            id: Wrapper; width: 320; height: 200
+            scale: Wrapper.PathView.scale; z: Wrapper.PathView.z
+
+            Connection {
+                sender: PhoneInfoContainer; signal: "closed()"
+                script: { if (Wrapper.state == 'Details') Wrapper.state = '' }
+            }
+
+            Script {
+               function phoneClicked() {
+                  if (MainWindow.minimized == true) {
+                     MainWindow.minimized = false;
+                  } else {
+                     PhoneInfoContainer.phoneTitle = title;
+                     PhoneInfoContainer.flickableArea.yPosition = 0;
+                     PhoneInfoContainer.phoneDescription = description;
+                     PhoneInfoContainer.phoneSpecifications = specifications;
+                     PhoneInfoContainer.phoneUrl = url;
+                     PhoneInfoContainer.rating = rating;
+                     Wrapper.state = "Details";
+                  }
+               }
+            }
+
+            Rect {
+                id: Dvd; anchors.fill: parent; color: "white"
+
+                Item {
+                    x: (parent.width-width)/2
+                    y: (parent.height-height)/2
+                    width: Thumb.width*Thumb.scale
+                    height: Thumb.height*Thumb.scale
+
+                    Image {
+                        id: Thumb; source: thumb
+                        scale: 0.95*Math.min(Dvd.height/height,Dvd.width/width)
+                    }
+                }
+
+                Image { source: "pics/shadow-right.png"; x: Dvd.width; height: Dvd.height }
+                Image { source: "pics/shadow-bottom.png"; y: Dvd.height; width: Dvd.width }
+
+                Image {
+                    id: Corner
+                    source: "pics/shadow-corner.png"
+                    x: Dvd.width; y: Dvd.height
+                }
+            }
+
+            MouseRegion { anchors.fill: Wrapper; onClicked: { phoneClicked() } }
+
+            states: [
+                State {
+                    name: "Details"
+                    ParentChange { target: Wrapper; parent: PhoneInfoContainer.frontContainer }
+                    SetProperties { target: Wrapper; x: 50; y: 60; scale: 1 }
+                    SetProperties { target: PhoneInfoContainer; y: 20 }
+                    SetProperties { target: Container; y: "-480" }
+                    SetProperties { target: CloseButton; opacity: 0 }
+                    SetProperties { target: CategoryText; y: "-50" }
+                },
+
+                State {
+                    name: "Stacked"
+                    when: MainWindow.minimized == true
+                    ParentChange { target: Wrapper; parent: Stack }
+                    SetProperties {target: Wrapper; x: 0; y: 0; scale: 0.2 }
+                    SetProperties { target: CloseButton; opacity: 0 }
+                    SetProperties { target: CategoryText; y: "-50" }
+                }
+            ]
+
+            transitions: [
+                Transition {
+                    fromState: ""; toState: "Details,Stacked"
+                    ParentChangeAction { }
+                    NumericAnimation { properties: "x,y,scale,opacity"; duration: 500; easing: "easeInOutQuad" }
+                },
+
+                Transition {
+                    fromState: "Details,Stacked"
+                    toState: ""
+                    ParentChangeAction { }
+                    NumericAnimation { properties: "x,y,scale,opacity"; duration: 500; easing: "easeInOutQuad" }
+                }
+            ]
+
+        }
+    }
+}
diff --git a/demos/declarative/phonebrowser/content/ScrollBar.qml b/demos/declarative/phonebrowser/content/ScrollBar.qml
new file mode 100644
index 0000000..a0f2925
--- /dev/null
+++ b/demos/declarative/phonebrowser/content/ScrollBar.qml
@@ -0,0 +1,38 @@
+Item {
+    id: Container
+    properties: Property {
+        name: "flickableArea"
+    }
+    Rect {
+        radius: 5
+        color: "black"
+        opacity: 0.3
+        pen.color: "white"
+        pen.width: 2
+        x: 0
+        y: flickableArea.pageYPosition * Container.height
+        width: parent.width
+        height: flickableArea.pageHeight * Container.height
+    }
+    states: [
+        State {
+            name: "show"
+            when: flickableArea.moving
+            SetProperties {
+                target: Container
+                opacity: 1
+            }
+        }
+    ]
+    transitions: [
+        Transition {
+            fromState: "*"
+            toState: "*"
+            NumericAnimation {
+                target: Container
+                properties: "opacity"
+                duration: 400
+            }
+        }
+    ]
+}
diff --git a/demos/declarative/phonebrowser/content/Star.qml b/demos/declarative/phonebrowser/content/Star.qml
new file mode 100644
index 0000000..ebcd78b
--- /dev/null
+++ b/demos/declarative/phonebrowser/content/Star.qml
@@ -0,0 +1,47 @@
+Item {
+    id: Container
+    width: 24
+    height: 24
+
+    properties: [
+        Property { name: "rating" },
+        Property { name: "on" }
+    ]
+
+    signals: Signal {
+        name: "clicked"
+    }
+    Image {
+        id: Image
+        source: "pics/ghns_star.png"
+        x: 6
+        y: 7
+        opacity: 0.4
+        scale: 0.5
+    }
+    MouseRegion {
+        anchors.fill: Container
+        onClicked: { Container.clicked.emit() }
+    }
+    states: [
+        State {
+            name: "on"
+            when: Container.on == true
+            SetProperties {
+                target: Image
+                opacity: 1
+                scale: 1
+                x: 1
+                y: 0
+            }
+        }
+    ]
+    transitions: [
+        Transition {
+            NumericAnimation {
+                properties: "opacity,scale,x,y"
+                easing: "easeOutBounce"
+            }
+        }
+    ]
+}
diff --git a/demos/declarative/mediabrowser/content/pics/background.png b/demos/declarative/phonebrowser/content/pics/background.png
index 5b37072..5b37072 100644
--- a/demos/declarative/mediabrowser/content/pics/background.png
+++ b/demos/declarative/phonebrowser/content/pics/background.png
diff --git a/demos/declarative/mediabrowser/content/pics/button-pressed.png b/demos/declarative/phonebrowser/content/pics/button-pressed.png
index e434d32..e434d32 100644
--- a/demos/declarative/mediabrowser/content/pics/button-pressed.png
+++ b/demos/declarative/phonebrowser/content/pics/button-pressed.png
diff --git a/demos/declarative/mediabrowser/content/pics/button.png b/demos/declarative/phonebrowser/content/pics/button.png
index 56a63ce..56a63ce 100644
--- a/demos/declarative/mediabrowser/content/pics/button.png
+++ b/demos/declarative/phonebrowser/content/pics/button.png
diff --git a/demos/declarative/mediabrowser/content/pics/ghns_star.png b/demos/declarative/phonebrowser/content/pics/ghns_star.png
index 4ad43cc..4ad43cc 100644
--- a/demos/declarative/mediabrowser/content/pics/ghns_star.png
+++ b/demos/declarative/phonebrowser/content/pics/ghns_star.png
diff --git a/demos/declarative/mediabrowser/content/pics/reflection.png b/demos/declarative/phonebrowser/content/pics/reflection.png
index c143a48..c143a48 100644
--- a/demos/declarative/mediabrowser/content/pics/reflection.png
+++ b/demos/declarative/phonebrowser/content/pics/reflection.png
diff --git a/demos/declarative/mediabrowser/content/pics/shadow-bottom.png b/demos/declarative/phonebrowser/content/pics/shadow-bottom.png
index 523f6e7..523f6e7 100644
--- a/demos/declarative/mediabrowser/content/pics/shadow-bottom.png
+++ b/demos/declarative/phonebrowser/content/pics/shadow-bottom.png
diff --git a/demos/declarative/mediabrowser/content/pics/shadow-corner.png b/demos/declarative/phonebrowser/content/pics/shadow-corner.png
index ef8c856..ef8c856 100644
--- a/demos/declarative/mediabrowser/content/pics/shadow-corner.png
+++ b/demos/declarative/phonebrowser/content/pics/shadow-corner.png
diff --git a/demos/declarative/mediabrowser/content/pics/shadow-right-screen.png b/demos/declarative/phonebrowser/content/pics/shadow-right-screen.png
index 9856c4f..9856c4f 100644
--- a/demos/declarative/mediabrowser/content/pics/shadow-right-screen.png
+++ b/demos/declarative/phonebrowser/content/pics/shadow-right-screen.png
diff --git a/demos/declarative/mediabrowser/content/pics/shadow-right.png b/demos/declarative/phonebrowser/content/pics/shadow-right.png
index f534a35..f534a35 100644
--- a/demos/declarative/mediabrowser/content/pics/shadow-right.png
+++ b/demos/declarative/phonebrowser/content/pics/shadow-right.png
diff --git a/demos/declarative/mediabrowser/dummydata/PhonesModel.qml b/demos/declarative/phonebrowser/dummydata/PhonesModel.qml
index eb68fdb..eb68fdb 100644
--- a/demos/declarative/mediabrowser/dummydata/PhonesModel.qml
+++ b/demos/declarative/phonebrowser/dummydata/PhonesModel.qml
diff --git a/demos/declarative/phonebrowser/phonebrowser.qml b/demos/declarative/phonebrowser/phonebrowser.qml
new file mode 100644
index 0000000..85d352d
--- /dev/null
+++ b/demos/declarative/phonebrowser/phonebrowser.qml
@@ -0,0 +1,59 @@
+import "content"
+
+Item {
+    id: MainWindow; width: 800; height: 480
+
+    properties: Property { name: "minimized"; value: false }
+
+    Item {
+        id: Background
+
+        Image { source: "content/pics/background.png"; opaque: true }
+
+        Rect {
+            id: Menu; x: -150; width: 150; height: 480; color: "#232323"
+
+            Text {
+                id: IconText; x: 40; y: 110
+                font.bold: true; font.size: 9; text: "Nokia Devices"
+                color: "white"; style: Raised; styleColor: "black"
+            }
+
+            Image {
+                source: "content/pics/shadow-right-screen.png"
+                x: 150; height: 480; tile: true
+            }
+        }
+
+        PhonesPathView { id: PhonesPathView; model: PhonesModel; y: 60; width: 800; height: 360 }
+        PhoneInfoContainer { id: PhoneInfoContainer; width: 750; x: 25; y: 500; height: 440 }
+
+        MediaButton {
+            id: CloseButton; x: 680; y: 440; text: "Close"
+            onClicked: { MainWindow.minimized = true }
+        }
+
+        states: [
+            State {
+                name: "Minimized"
+                when: MainWindow.minimized == true
+                SetProperties { target: Background; x: 75 }
+                SetProperties { target: Menu; x: -75 }
+            }
+        ]
+
+        transitions: [
+            Transition {
+                fromState: "*"; toState: "*"
+                NumericAnimation { properties: "x,y,size"; duration: 500; easing: "easeInOutQuad" }
+            }
+        ]
+    }
+
+    Text {
+        id: CategoryText; x: 300; y: 15; text: "Nokia Devices"
+        font.size: 22; color: "white"; style: Raised; styleColor: "black"
+    }
+
+    Item { id: Stack; x: 45; y: 50 }
+}
diff --git a/demos/declarative/webbrowser/content/RectSoftShadow.qml b/demos/declarative/webbrowser/content/RectSoftShadow.qml
index 0235842..2b39422 100644
--- a/demos/declarative/webbrowser/content/RectSoftShadow.qml
+++ b/demos/declarative/webbrowser/content/RectSoftShadow.qml
@@ -1,10 +1,10 @@
 <Item>
-    <Image src="pics/softshadow-left.sci" x="-16" y="-16"
+    <Image source="pics/softshadow-left.sci" x="-16" y="-16"
         width="16" height="{parent.height+32}" />
-    <Image src="pics/softshadow-right.sci" x="{parent.width}" y="-16"
+    <Image source="pics/softshadow-right.sci" x="{parent.width}" y="-16"
         width="16" height="{parent.height+32}" />
-    <Image src="pics/softshadow-top.png" x="0" y="-16"
+    <Image source="pics/softshadow-top.png" x="0" y="-16"
         width="{parent.width}" height="16" />
-    <Image src="pics/softshadow-bottom.png" x="0" y="{parent.height}"
+    <Image source="pics/softshadow-bottom.png" x="0" y="{parent.height}"
         width="{webview.width*webview.scale}" height="16" />
 </Item>
diff --git a/demos/declarative/webbrowser/webbrowser.qml b/demos/declarative/webbrowser/webbrowser.qml
index 7618f4d..cf96b3f 100644
--- a/demos/declarative/webbrowser/webbrowser.qml
+++ b/demos/declarative/webbrowser/webbrowser.qml
@@ -18,8 +18,8 @@
 
     <Item id="WebPanel" anchors.fill="{parent}" clip="true">
         <Rect color="#555555" anchors.fill="{parent}"/>
-        <Image src="content/pics/softshadow-bottom.png" width="{WebPanel.width}" height="16" />
-        <Image src="content/pics/softshadow-top.png" width="{WebPanel.width}" anchors.bottom="{Footer.top}" height="16" />
+        <Image source="content/pics/softshadow-bottom.png" width="{WebPanel.width}" height="16" />
+        <Image source="content/pics/softshadow-top.png" width="{WebPanel.width}" anchors.bottom="{Footer.top}" height="16" />
         <RectSoftShadow x="{-Flick.xPosition}" y="{-Flick.yPosition}"
             width="{WebView.width*WebView.scale}" height="{Flick.y+WebView.height*WebView.scale}"/>
         <Item id="HeaderSpace" width="{parent.width}" height="60" z="1">
@@ -30,7 +30,7 @@
                                     ? -Flick.xPosition+Flick.viewportWidth-Flick.width
                                     : 0}"
                     y="{Flick.yPosition &lt; 0 ? -Flick.yPosition : progressOff*(Flick.yPosition>height?-height:-Flick.yPosition)}"
-                    height="64" src="content/pics/header.png">
+                    height="64" source="content/pics/header.png">
                 <Text id="HeaderText" text="{WebView.title!='' || WebView.progress == 1.0 ? WebView.title : 'Loading...'}"
                     color="white" styleColor="black" style="Raised"
                     font.family="Helvetica" font.size="10" font.bold="true" elide="ElideRight"
@@ -39,8 +39,8 @@
                     anchors.top="{Header.top}" anchors.topMargin="4" hAlign="AlignHCenter"/>
                 <Item anchors.top="{HeaderText.bottom}" anchors.topMargin="2" anchors.bottom="{parent.bottom}" width="{parent.width}">
                     <Item id="UrlBox" anchors.left="{parent.left}" anchors.leftMargin="12" anchors.right="{parent.right}" anchors.rightMargin="12" height="31" anchors.top="{parent.top}" clip="true">
-                        <Image src="content/pics/addressbar.sci" anchors.fill="{UrlBox}"/>
-                        <Image id="UrlBoxhl" src="content/pics/addressbar-filled.sci" opacity="{1-Header.progressOff}" clip="true" width="{parent.width*WebView.progress}" height="{parent.height}"/>
+                        <Image source="content/pics/addressbar.sci" anchors.fill="{UrlBox}"/>
+                        <Image id="UrlBoxhl" source="content/pics/addressbar-filled.sci" opacity="{1-Header.progressOff}" clip="true" width="{parent.width*WebView.progress}" height="{parent.height}"/>
                         <KeyProxy id="proxy" anchors.left="{UrlBox.left}" anchors.fill="{UrlBox}" focusable="true" targets="{[keyActions,EditUrl]}"/>
                         <KeyActions id="keyActions" return="WebBrowser.url = EditUrl.text; proxy.focus=false;"/>
                         <TextEdit id="EditUrl" color="#555555" text="{WebView.url == '' ? ' ' : WebView.url}"
@@ -104,11 +104,11 @@
             </Rect>
         </Flickable>
         <Image id="Footer" width="{parent.width}" anchors.bottom="{parent.bottom}"
-                height="43" src="content/pics/footer.sci">
+                height="43" source="content/pics/footer.sci">
             <Rect y="-1" width="{parent.width}" height="1" color="#555555"/>
             <Item id="backbutton" anchors.right="{reload.left}" anchors.rightMargin="10" anchors.verticalCenter="{parent.verticalCenter}" width="{back_e.width}" height="{back_e.height}">
-                <Image anchors.fill="{parent}" id="back_e" src="content/pics/back.png" />
-                <Image anchors.fill="{parent}" id="back_d" src="content/pics/back-disabled.png" />
+                <Image anchors.fill="{parent}" id="back_e" source="content/pics/back.png" />
+                <Image anchors.fill="{parent}" id="back_d" source="content/pics/back-disabled.png" />
                 <states>
                     <State name="Enabled" when="{WebView.back.enabled==true}">
                         <SetProperty target="{back_e}" property="opacity" value="1"/>
@@ -126,11 +126,11 @@
                 </transitions>
                 <MouseRegion anchors.fill="{back_e}" onClicked="if (WebView.back.enabled) WebView.back.trigger()"/>
             </Item>
-            <Image id="reload" src="content/pics/reload.png" anchors.horizontalCenter="{parent.horizontalCenter}" anchors.verticalCenter="{parent.verticalCenter}"/>
+            <Image id="reload" source="content/pics/reload.png" anchors.horizontalCenter="{parent.horizontalCenter}" anchors.verticalCenter="{parent.verticalCenter}"/>
             <MouseRegion anchors.fill="{reload}" onClicked="WebView.reload.trigger()"/>
             <Item id="forwardbutton" anchors.left="{reload.right}" anchors.leftMargin="10" anchors.verticalCenter="{parent.verticalCenter}" width="{forward_e.width}" height="{forward_e.height}">
-                <Image anchors.fill="{parent}" anchors.verticalCenter="{parent.verticalCenter}" id="forward_e" src="content/pics/forward.png" />
-                <Image anchors.fill="{parent}" id="forward_d" src="content/pics/forward-disabled.png" />
+                <Image anchors.fill="{parent}" anchors.verticalCenter="{parent.verticalCenter}" id="forward_e" source="content/pics/forward.png" />
+                <Image anchors.fill="{parent}" id="forward_d" source="content/pics/forward-disabled.png" />
                 <states>
                     <State name="Enabled" when="{WebView.forward.enabled==true}">
                         <SetProperty target="{forward_e}" property="opacity" value="1"/>
diff --git a/doc/src/declarative/elements.qdoc b/doc/src/declarative/elements.qdoc
index 8fff472..8955587 100644
--- a/doc/src/declarative/elements.qdoc
+++ b/doc/src/declarative/elements.qdoc
@@ -16,7 +16,7 @@ The following table lists the Qml elements provided by the Qt Declarative module
 
 \o
 \list
-\o \l StateGroup
+\o \l State
 \o \l SetProperty
 \o \l SetProperties
 \o \l ParentChange
diff --git a/doc/src/tutorials/declarative.qdoc b/doc/src/tutorials/declarative.qdoc
index be8fad9..3724b10 100644
--- a/doc/src/tutorials/declarative.qdoc
+++ b/doc/src/tutorials/declarative.qdoc
@@ -80,9 +80,9 @@
     This means you should use the duiviewer application provided with
     Qt to run the examples.
 
-    \list 1
+    \list
     \o \l{tutorials/declarative/contacts/part1}{Drawing and Animation}
-    \o \l{tutorials/declarative/contacts/part2}{Reuse of QML components}
+    \o \l{tutorials/declarative/contacts/part2}{Reusing QML Components}
     \o \l{tutorials/declarative/contacts/part3}{Models, Views and Delegates}
     \o \l{tutorials/declarative/contacts/part4}{Other Tricks}
     \endlist
@@ -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;
-
-    \code
-    if (a && b) {}
-    \endcode
-
-    Should either be escaped as:
-
-    \code
-    if (a &amp;&amp; b) {}
-    \endcode
+    script code in Qt.
 
-    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
@@ -462,9 +346,296 @@
     to complete their transition.
 
     \omit
-        TODO More on types of animation
+        TODO More on types of animation, e.g. ColorAnimation, Behaviors.
     \endomit
 
     In the next chapter we will show how we can use the remove button in
     other QML components.
 */
+
+/*!
+    \page tutorials-declarative-contacts-part2.html
+    \contentspage {Declarative UI Tutorial}{Contents}
+    \previouspage {tutorials/declarative/contacts/part1}{Chapter 1}
+    \nextpage {tutorials/declarative/contacts/part3}{Chapter 3}
+    \example tutorials/declarative/contacts/part2
+    \title Reusing QML Components
+    \tableofcontents
+
+    The second part of this tutorial covers how to reuse QML components and
+    have them interact with each other.  The RemoveButton developed in the 
+    previous chapter is intended to be part of a more complex control for
+    editing a field of our contact.  This ContactField in turn is intended
+    to be used in a contact editing control.
+
+    \section1 Loading QML Components
+
+    Reusing the RemoveButton itself is very simple.  When parsing a QML file
+    if a Component is referred to that isn't already in the system, Qt
+    will try to load it from a file of the same name with the ".qml" extension.
+
+    \snippet declarative/tutorials/contacts/2_Reuse/1/ContactField.qml load
+
+    The above QML code will attempt to load the RemoveButton component from
+    a file with the name "RemoveButton.qml" from the following search paths.
+
+    \list
+    \o Any imported directories. These are listed at the start of the file using
+        \c { import "path" }.
+    \o The run directory
+    \o The run directory + "/qml"
+    \o the directory of the QML code file
+    \o the directory of the QML code file + "/qml"
+    \endlist.
+
+    All the properties of the button are
+    accessible and can be overridden from defaults.  The loaded component
+    can also refer to elements further up in the tree, so that code within
+    RemoveButton.qml could refer to the contactField component.  However only
+    properties of the top level element in RemoveButton.qml are visible to
+    the contact field.  In order to allow contact field to modify how wide
+    the remove button will be when opened we need to add a property to the
+    remove button.
+
+    \section1 Properties and Signals
+
+    \snippet declarative/tutorials/contacts/2_Reuse/2/RemoveButton.qml define properties and signals
+
+    These properties and signals are accessed from the contact field the same
+    way standard system components are accessed.
+
+    \snippet declarative/tutorials/contacts/2_Reuse/2/RemoveButton.qml use properties and signals
+
+    Now when the remove button is expanded, it will expand to the width of the
+    contact field.  Also when the user confirms the remove action, the
+    text section of the contact field will be cleared.  When creating a
+    component that does have children out of its own
+    bounds its important to consider whether the item should be clipped,
+    which is done above with \c{clip: true}.
+
+    \section1 States
+
+    Its also possible to access the state of included components.  The FieldText
+    component we will use in this tutorial is also been written specifically
+    for our contacts application, as was the RemoveButton component.  In
+    this case we want it to expand when editing.  One way to do this would
+    be to anchor the field text component to the center of its parent and
+    then let its own width change push the remove button away, however that
+    would make it difficult to have the remove button also push the field
+    text to the left when the remove button expands.
+
+    So instead we will anchor the right edge of the field text to 
+    the left edge of the remove button and use a state change in the
+    contact field itself to move the remove button and the field icon out of
+    view.
+
+    \snippet declarative/tutorials/contacts/2_Reuse/3/RemoveButton.qml all
+
+    Apart from accessing the fieldText.state, the above code also uses the when
+    attribute of its own editingText state.  This is an alternative to using
+    a signal to change state.  When the value of the expression for the 
+    when attribute changes, Qt will detect if the contactField needs to enter
+    that state.  In the FieldText element a similar approach is used to fade
+    out the label of the FieldText when the user enters some text of their own.
+
+    \snippet declarative/tutorials/contacts/3_Reuse/2/FieldText.qml behavior
+
+    fieldText is the enclosing component and textEdit is a TextEdit element
+    provided by Qt.  In the QML code above, the opacity of the textLabel is
+    only 1 if there is text for the textEdit is empty.  This is a form of
+    short cut to using states for an element, useful if only one property
+    is changing as it is for the textLabel.  To animate a property change is
+    similar to animating a state change.  Using the Behavior element we can
+    specify how the property changes if it does change state, allowing for
+    a smooth transition.
+
+    The fieldText element also handles changes to the text using the
+    onValueChanged attribute when specifying properties.
+
+    \snippet declarative/tutorials/contacts/2_Reuse/3/FieldText.qml value change
+
+    Because the user needs to be able to edit text in the text edit, it
+    shouldn't be simply bound to the text property of the FieldText component.
+    However if a component using the FieldText component sets the text
+    property of the FieldText component it should in turn set the text
+    of the text edit.
+
+    \section1 Key and Mouse Focus
+
+    Unlike in Qt setting focus to true on a component does not always mean
+    that the component has focus.  This is due to the declarative nature
+    of QML, and can be affected by multiple components both indicating
+    focus to be true.  At the time of writing this tutorial both key and mouse
+    focus handling are still being improved.  Hence we will only lightly cover
+    the topic.
+
+    Normally in QML this is handled by FocusRealm components.  A focus realm
+    is a sort of cut off point for determining focus.  If a FocusRealm does
+    not have focus then any children of it won't be able to get focus even
+    if they do set focus to true.  If your component has multiple child
+    components that could gain focus ensure that they are guarded by FocusRealm
+    component, and add code to handle which focus realms have focus
+    at that level.  The alternative and approach done at this stage in
+    the tutorial is to only have one component set focus to true at a time.
+
+    Currently if multiple contact fields were put into our contact editor,
+    any of the FieldText components could be clicked and opened, and
+    any of the RemoveButton components could be clicked and opened, all
+    at the same time.  We would like this behavior to be some what modal
+    instead, encouraging the user to either accept or cancel the current
+    action before moving onto a new action.
+
+    In the tutorial we do this with a property of our top level component
+    to handle whether we are in this state or not.
+
+    \snippet declarative/tutorials/contacts/2_Reuse/4/Contact.qml grab property
+
+    And in the code where we want to check or avoid allowing mouse interaction.
+
+    \snippet declarative/tutorials/contacts/2_Reuse/4/RemoveButton.qml grab
+
+    Handling Key and Mouse focus in QML is quite likely to change before
+    the Qt 4.6 release.
+*/
+
+/*!
+    \page tutorials-declarative-contacts-part3.html
+    \contentspage {Declarative UI Tutorial}{Contents}
+    \previouspage {tutorials/declarative/contacts/part2}{Chapter 2}
+    \nextpage {tutorials/declarative/contacts/part4}{Chapter 4}
+    \example tutorials/declarative/contacts/part3
+    \title Models, Views and Delegates
+    \tableofcontents
+
+    In the previous chapters we designed a component to display and
+    edit a contact.  The next step is to display a list of those contacts
+    and allow the user to expand individual contacts for editing.
+
+    As the previous elements will not be changed in this section, they have
+    been moved to a lib directory for this tutorial and the relevant
+    name space path has been used.
+
+    \section1 Simple List View
+
+    Displaying lists requires three components.  A model that holds the
+    data displayed, a delegate to indicate how elements are drawn and
+    a view to arrange the elements.
+
+    For the purposes of this tutorial we will be using an SQL query as our
+    data model.  This can be declared in the resources section of
+    the parent item.
+
+    \snippet declarative/tutorials/contacts/3_Collections/1/ContactView.qml model
+
+    The SqlConnection component describes how to connect to the database in
+    much the same ways as the QSqlDatabase::addDatabase() function is used.
+    In this case an SQLite database is used as it can be connected to as a
+    file, reducing complexity in setting up a database server or credentials.
+
+    The SqlQuery component allows various forms of queries to be described.
+    When the query is a select statement, the component also acts as a model
+    allowing it to provide data to a ListView component.  The query above
+    retrieves the fields recid, label, email and phone from a contacts table,
+    and orders the results by the label of the contact first, and then by 
+    the recid for any contacts with equivalent labels.
+
+    The ListView component is suitable for displaying models, and is declared
+    much like any other QML component.  However since it might have any number
+    of child items in the list, it has a property that defines how to construct
+    components for items when displayed.
+
+    \snippet declarative/tutorials/contacts/3_Collections/1/ContactView.qml delegate
+
+    Unlike a child element, this describes a template on how to build the component
+    for each element, much in the same way that components are loaded from
+    files such as RemoveButton.qml.
+
+    The entire view component will look like:
+
+    \snippet declarative/tutorials/contacts/3_Collections/1/ContactView.qml view
+
+    This gives us a list of contacts that the user can flick through.
+
+    .image.
+
+    \section1 Animating Delegates
+
+    The next step is to allow the user to click on a contact to edit the
+    contact.  We will take advantage of QML to open a Contact component
+    in the list rather than as a new dialog or view.  This is very
+    similar to how the contents of the FieldText and RemoveButton components
+    are swapped in and out.
+
+    \snippet declarative/tutorials/contacts/3_Collections/2/ContactView.qml components
+
+    The first step is to have two children of our delegate component that can
+    be swapped between.  The plain Text component and the Contact component built
+    in the previous chapters.  We also add a MouseRegion that can be clicked upon
+    to change the state of the delegate component.
+
+    \snippet declarative/tutorials/contacts/3_Collections/2/ContactView.qml states
+
+    This defines the open state of the delegate.  It changes the height of the delegate
+    component to that of the whole list view, pushing the other items off each end of
+    the list.  It sets the lists views scroll yPosition of the ListView to the
+    y value of the delegate so that the top of the delegate matches the top of the list view.
+    The next step is to lock the list view.  This prevents  the user being able to flick
+    the list view, meaning while in this state the delegate will continue to
+    fill the ListView's visible area.  The final to properties that are set should
+    be familiar from previous chapters, setting the opacity of the items such
+    that the new item is visible and the old item hidden.
+
+    We then add a transition so that this becomes animated:
+
+    \snippet declarative/tutorials/contacts/3_Collections/2/ContactView.qml transition
+
+    This allows the user to click on an item to enter the open state.
+
+    .image.
+
+    Elsewhere on our contact view we add a button so that the user can leave the
+    detailed view of the contact.
+    \snippet declarative/tutorials/contacts/3_Collections/2/ContactView.qml button
+
+    And connect it's clicked value to some script to set the state of the delegate
+    back to its default state.
+
+    \snippet declarative/tutorials/contacts/3_Collections/2/ContactView.qml connection
+
+    Something worth noting at this point is that every delegate created has this connection.
+    It is important to check whether the delegate is the one in the open state, and
+    taking some effort to ensure only one is, before acting on the signal from the button.
+    
+    \section1 Performance Considerations
+
+    We have now made a contact application that can view a list of contacts, open one,
+    and close it again.  Its now time to take a moment and consider the implications
+    of a list view delegate.  It is created for each and every item in the list,
+    and while the list cleans up after itself and only has delegate components constructed
+    for visible items and any single point of animation, the list can scroll very quickly.
+    This means potentially thousands of delegate components will be constructed and
+    destroyed when the user is flipping through the list.
+
+    Its important then to try and minimize the complexity of the delegate.  This
+    can be done by delaying the loading of the component.  By using the qml property
+    of the Item component, we can delay building the Contact.qml item until the user
+    attempts to open the list.
+
+    \snippet declarative/tutorials/contacts/3_Collections/3/ContactView.qml setting qml
+
+    Each item has a qml property that represents the filename for the contents of
+    a special qmlItem child of the Item.  By setting the qml property of the Details
+    component on clicking the mouse region, the more complex component isn't loaded
+    until needed.  The down side about this though is the properties of Contact
+    cannot be set until the item is loaded.  This requires using the Bind
+    properties of an item.
+
+    \snippet declarative/tutorials/contacts/3_Collections/3/ContactView.qml binding
+
+    The Bind properties bind a value to another component, however the target of
+    this binding can be changed, unlike when setting the properties of a component
+    directly.  This means that when the qml property is set, it will change the
+    qmlItem property of the Details component.  This in turn triggers the Bind
+    elements to set the required properties of the qmlItem, which is now
+    an instance of the Contact component.
+*/
diff --git a/examples/declarative/contacts/contacts.qml b/examples/declarative/contacts/contacts.qml
index fa50010..f9901ed 100644
--- a/examples/declarative/contacts/contacts.qml
+++ b/examples/declarative/contacts/contacts.qml
@@ -24,7 +24,7 @@ Rect {
                 }
                 Image {
                     id: portraitPic
-                    src: portrait
+                    source: portrait
                     x: 10
                     y: 10
                 }
diff --git a/examples/declarative/dial/DialLibrary/Dial.qml b/examples/declarative/dial/DialLibrary/Dial.qml
index 8336a70..fe8528d 100644
--- a/examples/declarative/dial/DialLibrary/Dial.qml
+++ b/examples/declarative/dial/DialLibrary/Dial.qml
@@ -8,14 +8,14 @@ Item {
     }
     Image {
         id: Background
-        src: "background.svg"
+        source: "background.svg"
     }
     Item {
         x: 104
         y: 102
         rotation: Needle.rotation
         Image {
-            src: "needle_shadow.svg"
+            source: "needle_shadow.svg"
             x: -104
             y: -102
         }
@@ -31,12 +31,12 @@ Item {
             source: Math.min(Math.max(-130, value*2.2 - 130), 133)
         }
         Image {
-            src: "needle.svg"
+            source: "needle.svg"
             x: -102
             y: -98
         }
     }
     Image {
-        src: "overlay.svg"
+        source: "overlay.svg"
     }
 }
diff --git a/examples/declarative/listview/content/MediaButton.qml b/examples/declarative/listview/content/MediaButton.qml
index c92305a..6c672ea 100644
--- a/examples/declarative/listview/content/MediaButton.qml
+++ b/examples/declarative/listview/content/MediaButton.qml
@@ -7,8 +7,8 @@
         <Property name="text"/>
     </properties>
 
-    <Image id="Image" src="pics/button.png"/>
-    <Image id="Pressed" src="pics/button-pressed.png" opacity="0"/>
+    <Image id="Image" source="pics/button.png"/>
+    <Image id="Pressed" source="pics/button-pressed.png" opacity="0"/>
     <MouseRegion id="MouseRegion" anchors.fill="{Image}" onClicked="Container.clicked.emit();"/>
     <Text font.bold="true" color="white" anchors.centeredIn="{Image}" text="{Container.text}"/>
     <width>{Image.width}</width>
diff --git a/examples/declarative/listview/recipes.qml b/examples/declarative/listview/recipes.qml
index 0f6324f..db8604e 100644
--- a/examples/declarative/listview/recipes.qml
+++ b/examples/declarative/listview/recipes.qml
@@ -54,7 +54,7 @@ Rect {
                     width: parent.width
                     Image {
                         id: recipePic
-                        src: picture
+                        source: picture
                         width: 48
                         height: 48
                     }
@@ -115,13 +115,13 @@ Rect {
                     Image {
                         anchors.right: flick.right
                         anchors.top: flick.top
-                        src: "content/pics/moreUp.png"
+                        source: "content/pics/moreUp.png"
                         opacity: flick.atYBeginning ? 0 : 1
                     }
                     Image {
                         anchors.right: flick.right
                         anchors.bottom: flick.bottom
-                        src: "content/pics/moreDown.png"
+                        source: "content/pics/moreDown.png"
                         opacity: flick.atYEnd ? 0 : 1
                     }
                 }
diff --git a/examples/declarative/minehunt/Explosion.qml b/examples/declarative/minehunt/Explosion.qml
index 1e4f03d..8d868bc 100644
--- a/examples/declarative/minehunt/Explosion.qml
+++ b/examples/declarative/minehunt/Explosion.qml
@@ -9,7 +9,7 @@ Item {
         height: 21
         lifeSpan: 3600000
         lifeSpanDeviation: 0
-        src: "pics/star.png"
+        source: "pics/star.png"
         count: 200
         angle: 270
         angleDeviation: 360
diff --git a/examples/declarative/minehunt/minehunt.qml b/examples/declarative/minehunt/minehunt.qml
index 5c1b071..fb65fa3 100644
--- a/examples/declarative/minehunt/minehunt.qml
+++ b/examples/declarative/minehunt/minehunt.qml
@@ -10,10 +10,10 @@
                     <Axis startX="20" startY="20" endX="20" endY="0" />
                 </axis>
                 <front>
-                    <Image src="pics/front.png" width="40" height="40">
+                    <Image source="pics/front.png" width="40" height="40">
                         <Image anchors.horizontalCenter="{parent.horizontalCenter}"
                                anchors.verticalCenter="{parent.verticalCenter}"
-                                src="pics/flag.png" opacity="{modelData.hasFlag}">
+                                source="pics/flag.png" opacity="{modelData.hasFlag}">
                                 <opacity>
                                     <Behaviour>
                                         <NumericAnimation property="opacity" duration="250"/>
@@ -23,12 +23,12 @@
                     </Image>
                 </front>
                 <back>
-                    <Image src="pics/back.png" width="40" height="40">
+                    <Image source="pics/back.png" width="40" height="40">
                         <Text anchors.horizontalCenter="{parent.horizontalCenter}" anchors.verticalCenter="{parent.verticalCenter}" 
                               text="{modelData.hint}" color="white" font.bold="true" 
                               opacity="{modelData.hasMine == false &amp;&amp; modelData.hint > 0}"/>
                         <Image anchors.horizontalCenter="{parent.horizontalCenter}" anchors.verticalCenter="{parent.verticalCenter}" 
-                                src="pics/bomb.png" opacity="{modelData.hasMine}"/>
+                                source="pics/bomb.png" opacity="{modelData.hasMine}"/>
                         <Explosion anchors.horizontalCenter="{parent.horizontalCenter}" anchors.verticalCenter="{parent.verticalCenter}" explode="{modelData.hasMine==true &amp;&amp; modelData.flipped==true}"/>
                     </Image>
                 </back>
@@ -50,7 +50,7 @@
             </Flipable>
         </Component>
     </resources>
-    <Image src="pics/No-Ones-Laughing-3.jpg" tile="true"/>
+    <Image source="pics/No-Ones-Laughing-3.jpg" tile="true"/>
     <Description text="Use the 'minehunt' executable to run this demo!" width="300" opacity="{tiles?0:1}" anchors.horizontalCenter="{parent.horizontalCenter}" anchors.verticalCenter="{parent.verticalCenter}"/>
     <Repeater dataSource="{tiles}" x="1" y="1">
         <Component>
@@ -61,12 +61,12 @@
     </Repeater>
     <Item id="gamedata" width="370" height="100" y="380">
         <Text color="white" font.size="18" x="20" y="20">In play:</Text>
-        <Image x="100" y="20" src="pics/bomb-color.png"/>
+        <Image x="100" y="20" source="pics/bomb-color.png"/>
         <Text x="100" y="60" color="white" text="{numMines}"/>
-        <Image x="140" y="20" src="pics/flag-color.png"/>
+        <Image x="140" y="20" source="pics/flag-color.png"/>
         <Text x="140" y="60" color="white" text="{numFlags}"/>
 
-        <Image x="240" y="0" src="{if(isPlaying==true){'pics/smile.png'}else{if(hasWon==true){'pics/glee.png'}else{'pics/frown.png'}}}">
+        <Image x="240" y="0" source="{if(isPlaying==true){'pics/smile.png'}else{if(hasWon==true){'pics/glee.png'}else{'pics/frown.png'}}}">
             <MouseRegion anchors.fill="{parent}" onClicked="reset()"/>
         </Image>
     </Item>
diff --git a/examples/declarative/namespaces/lib/Chronos/Clock.qml b/examples/declarative/namespaces/lib/Chronos/Clock.qml
index 088a45c..959d193 100644
--- a/examples/declarative/namespaces/lib/Chronos/Clock.qml
+++ b/examples/declarative/namespaces/lib/Chronos/Clock.qml
@@ -1,6 +1,6 @@
 <?qtfx namespacepath:http://nokia.com/qml/Chronos=. ?>
 
-<Image id="clock" src="pics/clockface.png" xmlns:This="http://nokia.com/qml/Chronos">
+<Image id="clock" source="pics/clockface.png" xmlns:This="http://nokia.com/qml/Chronos">
     <properties>
         <Property name="hours" value="0"/>
         <Property name="minutes" value="0"/>
diff --git a/examples/declarative/scrollbar/display.qml b/examples/declarative/scrollbar/display.qml
index 4412d7f..42e8f25 100644
--- a/examples/declarative/scrollbar/display.qml
+++ b/examples/declarative/scrollbar/display.qml
@@ -7,7 +7,7 @@ Rect {
         anchors.fill: parent
         Image {
             id: Picture
-            src: "pics/niagara_falls.jpg"
+            source: "pics/niagara_falls.jpg"
         }
         viewportWidth: Picture.width
         viewportHeight: Picture.height
diff --git a/examples/declarative/slideswitch/Switch.qml b/examples/declarative/slideswitch/Switch.qml
index f62e4b6..a3f75e8 100644
--- a/examples/declarative/slideswitch/Switch.qml
+++ b/examples/declarative/slideswitch/Switch.qml
@@ -31,7 +31,7 @@ Item {
     }
     Image {
         id: Groove
-        src: "background.svg"
+        source: "background.svg"
     }
     MouseRegion {
         anchors.fill: Groove
@@ -39,7 +39,7 @@ Item {
     }
     Image {
         id: Knob
-        src: "knob.svg"
+        source: "knob.svg"
         x: 1
         y: 2
     }
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
new file mode 100644
index 0000000..bbe9f55
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/1/Removebutton.qml
@@ -0,0 +1,9 @@
+//! [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 4ea77f3..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}" margin="5" spacing="5">
-        <GroupBox contents="RemoveButton1.qml" label="Rectangle Component"/>
-        <GroupBox contents="RemoveButton2.qml" label="Closed Remove Item Button"/>
-        <GroupBox contents="RemoveButton3.qml" label="Open Remove Item Button"/>
-        <GroupBox contents="RemoveButton4.qml" label="State Based Button"/>
-        <GroupBox contents="RemoveButton5.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
new file mode 100644
index 0000000..247e38b
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/2/RemoveButton.qml
@@ -0,0 +1,18 @@
+//! [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
+        source: "../../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..6c6a949
--- /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
+            source: "../../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
new file mode 100644
index 0000000..964975f
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/3/RemoveButton.qml
@@ -0,0 +1,39 @@
+//! [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
+        source: "../../shared/pics/cancel.png"
+    }
+    Image {
+        id: confirmIcon
+        width: 22
+        height: 22
+        anchors.left: parent.left
+        anchors.leftMargin: 4
+        anchors.verticalCenter: parent.verticalCenter
+        source: "../../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
new file mode 100644
index 0000000..79aae7a
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/4/RemoveButton.qml
@@ -0,0 +1,110 @@
+Rect {
+    id: removeButton
+    width: 30
+    height: 30
+    color: "red"
+    radius: 5
+//! [script]
+    resources: [
+        Script {
+            function toggle() {
+                if (removeButton.state == 'opened') {
+                    removeButton.state = '';
+                } else {
+                    removeButton.state = 'opened';
+                }
+            }
+        
+        }
+    ]
+//! [script]
+//! [mouse region]
+    Image {
+        id: trashIcon
+        width: 22
+        height: 22
+        anchors.right: parent.right
+        anchors.rightMargin: 4
+        anchors.verticalCenter: parent.verticalCenter
+        source: "../../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
+        source: "../../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
+        source: "../../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
new file mode 100644
index 0000000..6c9078a
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/5/RemoveButton.qml
@@ -0,0 +1,117 @@
+Rect {
+    id: removeButton
+    width: 30
+    height: 30
+    color: "red"
+    radius: 5
+    resources: [
+        Script {
+            function toggle() {
+                if (removeButton.state == 'opened') {
+                    removeButton.state = '';
+                } else {
+                    removeButton.state = 'opened';
+                }
+            }
+        
+        }
+    ]
+    Image {
+        id: trashIcon
+        width: 22
+        height: 22
+        anchors.right: parent.right
+        anchors.rightMargin: 4
+        anchors.verticalCenter: parent.verticalCenter
+        source: "../../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
+        source: "../../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
+        source: "../../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 01f26ee..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,17 +1,59 @@
-<Item 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>
-</Item>
+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/1_Drawing_and_Animation/RemoveButton1.qml b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/RemoveButton1.qml
deleted file mode 100644
index dc3f505..0000000
--- a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/RemoveButton1.qml
+++ /dev/null
@@ -1,4 +0,0 @@
-<Rect id="removeButton"
-    width="30" height="30"
-    color="red"
-    radius="5"/>
diff --git a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/RemoveButton2.qml b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/RemoveButton2.qml
deleted file mode 100644
index 2ba488d..0000000
--- a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/RemoveButton2.qml
+++ /dev/null
@@ -1,10 +0,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"/>
-</Rect>
diff --git a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/RemoveButton3.qml b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/RemoveButton3.qml
deleted file mode 100644
index 9a364c5..0000000
--- a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/RemoveButton3.qml
+++ /dev/null
@@ -1,23 +0,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"/>
-</Rect>
diff --git a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/RemoveButton4.qml b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/RemoveButton4.qml
deleted file mode 100644
index 45ca19d..0000000
--- a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/RemoveButton4.qml
+++ /dev/null
@@ -1,65 +0,0 @@
-<Rect id="removeButton"
-    width="30" height="30"
-    color="red"
-    radius="5">
-    <resources>
-        <Script>
-            function toggle() {
-                print('removeButton.toggle()');
-                if (removeButton.state == 'opened') {
-                    removeButton.state = '';
-                } else {
-                    removeButton.state = 'opened';
-                }
-            }
-        </Script>
-    </resources>
-    <Image id="trashIcon"
-        width="22" height="22"
-        anchors.right="{parent.right}" anchors.rightMargin="4"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        src="../shared/pics/trash.png"
-        opacity="1">
-        <MouseRegion
-            anchors.fill="{parent}"
-            onClicked="toggle()"/>
-    </Image>
-    <Image id="cancelIcon"
-        width="22" height="22"
-        anchors.right="{parent.right}" anchors.rightMargin="4"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        src="../shared/pics/cancel.png"
-        opacity="0">
-        <MouseRegion
-            anchors.fill="{parent}"
-            onClicked="toggle()"/>
-    </Image>
-    <Image id="confirmIcon"
-        width="22" height="22"
-        anchors.left="{parent.left}" anchors.leftMargin="4"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        src="../shared/pics/ok.png"
-        opacity="0">
-        <MouseRegion
-            anchors.fill="{parent}"
-            onClicked="toggle()"/>
-    </Image>
-    <Text id="text"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        anchors.left="{confirmIcon.right}" anchors.leftMargin="4"
-        anchors.right="{cancelIcon.left}" anchors.rightMargin="4"
-        font.bold="true"
-        color="white"
-        hAlign="AlignHCenter"
-        text="Remove"
-        opacity="0"/>
-    <states>
-        <State name="opened">
-            <SetProperty target="{removeButton}" property="width" value="230"/>
-            <SetProperty target="{text}" property="opacity" value="1"/>
-            <SetProperty target="{confirmIcon}" property="opacity" value="1"/>
-            <SetProperty target="{cancelIcon}" property="opacity" value="1"/>
-            <SetProperty target="{trashIcon}" property="opacity" value="0"/>
-        </State>
-    </states>
-</Rect>
diff --git a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/RemoveButton5.qml b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/RemoveButton5.qml
deleted file mode 100644
index 68c1838..0000000
--- a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/RemoveButton5.qml
+++ /dev/null
@@ -1,70 +0,0 @@
-<Rect id="removeButton"
-    width="30" height="30"
-    color="red"
-    radius="5">
-    <resources>
-        <Script>
-            function toggle() {
-                print('removeButton.toggle()');
-                if (removeButton.state == 'opened') {
-                    removeButton.state = '';
-                } else {
-                    removeButton.state = 'opened';
-                }
-            }
-        </Script>
-    </resources>
-    <Image id="trashIcon"
-        width="22" height="22"
-        anchors.right="{parent.right}" anchors.rightMargin="4"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        src="../shared/pics/trash.png"
-        opacity="1">
-        <MouseRegion
-            anchors.fill="{parent}"
-            onClicked="toggle()"/>
-    </Image>
-    <Image id="cancelIcon"
-        width="22" height="22"
-        anchors.right="{parent.right}" anchors.rightMargin="4"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        src="../shared/pics/cancel.png"
-        opacity="0">
-        <MouseRegion
-            anchors.fill="{parent}"
-            onClicked="toggle()"/>
-    </Image>
-    <Image id="confirmIcon"
-        width="22" height="22"
-        anchors.left="{parent.left}" anchors.leftMargin="4"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        src="../shared/pics/ok.png"
-        opacity="0">
-        <MouseRegion
-            anchors.fill="{parent}"
-            onClicked="toggle()"/>
-    </Image>
-    <Text id="text"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        anchors.left="{confirmIcon.right}" anchors.leftMargin="4"
-        anchors.right="{cancelIcon.left}" anchors.rightMargin="4"
-        font.bold="true"
-        color="white"
-        hAlign="AlignHCenter"
-        text="Remove"
-        opacity="0"/>
-    <states>
-        <State name="opened">
-            <SetProperty target="{removeButton}" property="width" value="230"/>
-            <SetProperty target="{text}" property="opacity" value="1"/>
-            <SetProperty target="{confirmIcon}" property="opacity" value="1"/>
-            <SetProperty target="{cancelIcon}" property="opacity" value="1"/>
-            <SetProperty target="{trashIcon}" property="opacity" value="0"/>
-        </State>
-    </states>
-    <transitions>
-        <Transition fromState="*" toState="opened" reversible="true">
-            <NumericAnimation properties="opacity,x,width" duration="200"/>
-        </Transition>
-    </transitions>
-</Rect>
diff --git a/examples/declarative/tutorials/contacts/2_Reuse/1/ContactField.qml b/examples/declarative/tutorials/contacts/2_Reuse/1/ContactField.qml
new file mode 100644
index 0000000..0218c3d
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/2_Reuse/1/ContactField.qml
@@ -0,0 +1,30 @@
+//! [load]
+Item {
+    id: contactField
+    clip: true
+    width: 230
+    height: 30
+    RemoveButton {
+        id: removeButton
+        anchors.right: parent.right
+        anchors.top: parent.top
+        anchors.bottom: parent.bottom
+    }
+//! [load]
+    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 {
+        source: "../../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
new file mode 100644
index 0000000..3142c45
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/2_Reuse/1/RemoveButton.qml
@@ -0,0 +1,115 @@
+Rect {
+    id: removeButton
+    width: 30
+    height: 30
+    color: "red"
+    radius: 5
+    resources: [
+        Script {
+            function toggle() {
+                if (removeButton.state == 'opened') {
+                    removeButton.state = '';
+                } else {
+                    removeButton.state = 'opened';
+                }
+            }
+        
+        }
+    ]
+    Image {
+        id: trashIcon
+        width: 22
+        height: 22
+        anchors.right: parent.right
+        anchors.rightMargin: 4
+        anchors.verticalCenter: parent.verticalCenter
+        source: "../../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
+        source: "../../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
+        source: "../../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
new file mode 100644
index 0000000..62089b8
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/2_Reuse/1a/ContactField.qml
@@ -0,0 +1,33 @@
+//! [load]
+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
+    }
+//! [load]
+    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 {
+        source: "../../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
new file mode 100644
index 0000000..3142c45
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/2_Reuse/1a/RemoveButton.qml
@@ -0,0 +1,115 @@
+Rect {
+    id: removeButton
+    width: 30
+    height: 30
+    color: "red"
+    radius: 5
+    resources: [
+        Script {
+            function toggle() {
+                if (removeButton.state == 'opened') {
+                    removeButton.state = '';
+                } else {
+                    removeButton.state = 'opened';
+                }
+            }
+        
+        }
+    ]
+    Image {
+        id: trashIcon
+        width: 22
+        height: 22
+        anchors.right: parent.right
+        anchors.rightMargin: 4
+        anchors.verticalCenter: parent.verticalCenter
+        source: "../../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
+        source: "../../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
+        source: "../../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
new file mode 100644
index 0000000..1366548
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/2_Reuse/1b/ContactField.qml
@@ -0,0 +1,29 @@
+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 {
+        source: "../../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
new file mode 100644
index 0000000..a358b21
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/2_Reuse/1b/lib/RemoveButton.qml
@@ -0,0 +1,117 @@
+Rect {
+    id: removeButton
+    width: 30
+    height: 30
+    color: "red"
+    radius: 5
+    resources: [
+        Script {
+
+            function toggle() {
+                print('removeButton.toggle()');
+                if (removeButton.state == 'opened') {
+                    removeButton.state = '';
+                } else {
+                    removeButton.state = 'opened';
+                }
+            }
+        
+        }
+    ]
+    Image {
+        id: trashIcon
+        width: 22
+        height: 22
+        anchors.right: parent.right
+        anchors.rightMargin: 4
+        anchors.verticalCenter: parent.verticalCenter
+        source: "../../../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
+        source: "../../../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
+        source: "../../../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
new file mode 100644
index 0000000..2542c1c
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/2_Reuse/2/ContactField.qml
@@ -0,0 +1,32 @@
+Item {
+    id: contactField
+    clip: true
+    width: 230
+    height: 30
+//! [use properties and signals]
+    RemoveButton {
+        id: removeButton
+        anchors.right: parent.right
+        anchors.top: parent.top
+        anchors.bottom: parent.bottom
+        expandedWidth: contactField.width
+        onConfirmed: { fieldText.text='' }
+    }
+//! [use properties and signals]
+    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 {
+        source: "../../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
new file mode 100644
index 0000000..45b1899
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/2_Reuse/2/RemoveButton.qml
@@ -0,0 +1,124 @@
+//! [define properties and signals]
+Rect {
+    id: removeButton
+    width: 30
+    height: 30
+    color: "red"
+    radius: 5
+    properties: Property {
+        name: "expandedWidth"
+        value: 230
+    }
+    signals: Signal {
+        name: "confirmed"
+    }
+//! [define properties and signals]
+    resources: [
+        Script {
+            function toggle() {
+                if (removeButton.state == 'opened') {
+                    removeButton.state = '';
+                } else {
+                    removeButton.state = 'opened';
+                }
+            }
+        
+        }
+    ]
+    Image {
+        id: trashIcon
+        width: 22
+        height: 22
+        anchors.right: parent.right
+        anchors.rightMargin: 4
+        anchors.verticalCenter: parent.verticalCenter
+        source: "../../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
+        source: "../../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
+        source: "../../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 13bc209..4d95424 100644
--- a/examples/declarative/tutorials/contacts/2_Reuse/2_Reuse.qml
+++ b/examples/declarative/tutorials/contacts/2_Reuse/2_Reuse.qml
@@ -1,12 +1,47 @@
-<Rect id="page" width="{layout.width}" height="{layout.height}" color='white'>
-    <properties>
-        <Property name="mouseGrabbed" value="false"/>
-    </properties>
-    <VerticalLayout id="layout" width="{contents.width}" margin="5" spacing="5">
-        <GroupBox contents="ContactField1.qml" label="Loading Component"/>
-        <GroupBox contents="ContactField2.qml" label="Using properties"/>
-        <GroupBox contents="ContactField3.qml" label="Defining signals"/>
-        <GroupBox contents="Contact3.qml" label="Multiple Items"/>
-        <GroupBox contents="Contact4.qml" label="Mouse Grabbing"/>
-    </VerticalLayout>
-</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: "2/ContactField.qml"
+            label: "Using properties"
+        }
+        GroupBox {
+            id: prev
+            contents: "3/ContactField.qml"
+            label: "Defining signals"
+        }
+        Rect {
+            color: "black"
+            opacity: 0.3
+            width: prev.width
+            height: prev.height
+        }
+        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
new file mode 100644
index 0000000..33ac627
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/2_Reuse/3/Contact.qml
@@ -0,0 +1,53 @@
+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
new file mode 100644
index 0000000..2d3d58a
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/2_Reuse/3/ContactField.qml
@@ -0,0 +1,69 @@
+//! [all]
+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: { 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
+        source: 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
+            }
+        }
+    ]
+}
+//! [all]
diff --git a/examples/declarative/tutorials/contacts/2_Reuse/3/FieldText.qml b/examples/declarative/tutorials/contacts/2_Reuse/3/FieldText.qml
new file mode 100644
index 0000000..cf654cf
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/2_Reuse/3/FieldText.qml
@@ -0,0 +1,156 @@
+//! [value change]
+Rect {
+    id: fieldText
+    height: 30
+    radius: 5
+    color: "white"
+    properties: Property {
+        name: "text"
+        value: ""
+        onValueChanged: { reset() }
+    }
+//! [value change]
+    properties: Property {
+        name: "label"
+        value: ""
+    }
+    signals: Signal {
+        name: "confirmed"
+    }
+    resources: [
+        Script {
+
+            function edit() {
+                fieldText.state='editing';
+            }
+            function confirm() {
+                fieldText.text = textEdit.text;
+                fieldText.state='';
+                fieldText.confirmed.emit();
+            }
+            function reset() {
+                textEdit.text = fieldText.text;
+                fieldText.state='';
+            }
+        
+        }
+    ]
+    Image {
+        id: cancelIcon
+        width: 22
+        height: 22
+        anchors.right: parent.right
+        anchors.rightMargin: 4
+        anchors.verticalCenter: parent.verticalCenter
+        source: "../../shared/pics/cancel.png"
+        opacity: 0
+    }
+    Image {
+        id: confirmIcon
+        width: 22
+        height: 22
+        anchors.left: parent.left
+        anchors.leftMargin: 4
+        anchors.verticalCenter: parent.verticalCenter
+        source: "../../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
+    }
+//! [behavior]
+    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
+            }
+        }
+    }
+//! [behavior]
+    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
new file mode 100644
index 0000000..309ee5a
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/2_Reuse/3/RemoveButton.qml
@@ -0,0 +1,122 @@
+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() {
+                if (removeButton.state == 'opened') {
+                    removeButton.state = '';
+                } else {
+                    removeButton.state = 'opened';
+                }
+            }
+        
+        }
+    ]
+    Image {
+        id: trashIcon
+        width: 22
+        height: 22
+        anchors.right: parent.right
+        anchors.rightMargin: 4
+        anchors.verticalCenter: parent.verticalCenter
+        source: "../../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
+        source: "../../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
+        source: "../../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
new file mode 100644
index 0000000..0587a51
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/2_Reuse/4/Contact.qml
@@ -0,0 +1,59 @@
+//! [grab property]
+Item {
+    id: contactDetails
+    width: 230
+    height: layout.height
+    properties: Property {
+        name: "mouseGrabbed"
+        value: false
+    }
+//! [grab property]
+    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
new file mode 100644
index 0000000..0c422b7
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/2_Reuse/4/ContactField.qml
@@ -0,0 +1,64 @@
+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: { 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
+        source: 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
new file mode 100644
index 0000000..6bb4e0a
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/2_Reuse/4/FieldText.qml
@@ -0,0 +1,157 @@
+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';
+                    contactDetails.mouseGrabbed=true;
+                }
+            }
+            function confirm() {
+                fieldText.text = textEdit.text;
+                fieldText.state='';
+                contactDetails.mouseGrabbed=false;
+                fieldText.confirmed.emit();
+            }
+            function reset() {
+                textEdit.text = fieldText.text;
+                fieldText.state='';
+                contactDetails.mouseGrabbed=false;
+            }
+        
+        }
+    ]
+    Image {
+        id: cancelIcon
+        width: 22
+        height: 22
+        anchors.right: parent.right
+        anchors.rightMargin: 4
+        anchors.verticalCenter: parent.verticalCenter
+        source: "../../shared/pics/cancel.png"
+        opacity: 0
+    }
+    Image {
+        id: confirmIcon
+        width: 22
+        height: 22
+        anchors.left: parent.left
+        anchors.leftMargin: 4
+        anchors.verticalCenter: parent.verticalCenter
+        source: "../../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
new file mode 100644
index 0000000..b57a95b
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/2_Reuse/4/RemoveButton.qml
@@ -0,0 +1,128 @@
+Rect {
+    id: removeButton
+    width: 30
+    height: 30
+    color: "red"
+    radius: 5
+    properties: Property {
+        name: "expandedWidth"
+        value: 230
+    }
+    signals: Signal {
+        name: "confirmed"
+    }
+    resources: [
+//! [grab]
+        Script {
+            function toggle() {
+                if (removeButton.state == 'opened') {
+                    removeButton.state = '';
+                    contactDetails.mouseGrabbed=false;
+                } else {
+                    if (!contactDetails.mouseGrabbed) {
+                        removeButton.state = 'opened';
+                        contactDetails.mouseGrabbed=true;
+                    }
+                }
+            }
+        
+        }
+//! [grab]
+    ]
+    Image {
+        id: trashIcon
+        width: 22
+        height: 22
+        anchors.right: parent.right
+        anchors.rightMargin: 4
+        anchors.verticalCenter: parent.verticalCenter
+        source: "../../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
+        source: "../../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
+        source: "../../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/Contact3.qml b/examples/declarative/tutorials/contacts/2_Reuse/Contact3.qml
deleted file mode 100644
index 2933437..0000000
--- a/examples/declarative/tutorials/contacts/2_Reuse/Contact3.qml
+++ /dev/null
@@ -1,29 +0,0 @@
-<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">
-        <ContactField3 id="labelField"
-            anchors.left="{layout.left}" anchors.leftMargin="5"
-            anchors.right="{layout.right}" anchors.rightMargin="5"
-            label="Name"/>
-        <ContactField3 id="phoneField"
-            anchors.left="{layout.left}" anchors.leftMargin="5"
-            anchors.right="{layout.right}" anchors.rightMargin="5"
-            icon="../shared/pics/phone.png"
-            label="Phone"/>
-        <ContactField3 id="emailField"
-            anchors.left="{layout.left}" anchors.leftMargin="5"
-            anchors.right="{layout.right}" anchors.rightMargin="5"
-            icon="../shared/pics/email.png"
-            label="Email"/>
-    </VerticalLayout>
-</Item>
diff --git a/examples/declarative/tutorials/contacts/2_Reuse/Contact4.qml b/examples/declarative/tutorials/contacts/2_Reuse/Contact4.qml
deleted file mode 100644
index 9e988c0..0000000
--- a/examples/declarative/tutorials/contacts/2_Reuse/Contact4.qml
+++ /dev/null
@@ -1,29 +0,0 @@
-<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">
-        <ContactField4 id="labelField"
-            anchors.left="{layout.left}" anchors.leftMargin="5"
-            anchors.right="{layout.right}" anchors.rightMargin="5"
-            label="Name"/>
-        <ContactField4 id="phoneField"
-            anchors.left="{layout.left}" anchors.leftMargin="5"
-            anchors.right="{layout.right}" anchors.rightMargin="5"
-            icon="../shared/pics/phone.png"
-            label="Phone"/>
-        <ContactField4 id="emailField"
-            anchors.left="{layout.left}" anchors.leftMargin="5"
-            anchors.right="{layout.right}" anchors.rightMargin="5"
-            icon="../shared/pics/email.png"
-            label="Email"/>
-    </VerticalLayout>
-</Item>
diff --git a/examples/declarative/tutorials/contacts/2_Reuse/ContactField1.qml b/examples/declarative/tutorials/contacts/2_Reuse/ContactField1.qml
deleted file mode 100644
index 7bfdd28..0000000
--- a/examples/declarative/tutorials/contacts/2_Reuse/ContactField1.qml
+++ /dev/null
@@ -1,18 +0,0 @@
-<Item id="contactField"
-    clip="true"
-    width="230"
-    height="30">
-    <RemoveButton1 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>
diff --git a/examples/declarative/tutorials/contacts/2_Reuse/ContactField2.qml b/examples/declarative/tutorials/contacts/2_Reuse/ContactField2.qml
deleted file mode 100644
index 7ec3e4d..0000000
--- a/examples/declarative/tutorials/contacts/2_Reuse/ContactField2.qml
+++ /dev/null
@@ -1,20 +0,0 @@
-<Item id="contactField"
-    clip="true"
-    width="230"
-    height="30">
-    <RemoveButton2 id="removeButton"
-        anchors.right="{parent.right}"
-        anchors.top="{parent.top}" anchors.bottom="{parent.bottom}"
-        expandedWidth="{contactField.width}"
-        onConfirmed="print('Clear field text'); fieldText.text=''"/>
-    <Text id="fieldText"
-        width="{contactField.width-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>
diff --git a/examples/declarative/tutorials/contacts/2_Reuse/ContactField3.qml b/examples/declarative/tutorials/contacts/2_Reuse/ContactField3.qml
deleted file mode 100644
index cef25ce..0000000
--- a/examples/declarative/tutorials/contacts/2_Reuse/ContactField3.qml
+++ /dev/null
@@ -1,36 +0,0 @@
-<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>
-    <RemoveButton3 id="removeButton"
-        anchors.right="{parent.right}"
-        anchors.top="{parent.top}" anchors.bottom="{parent.bottom}"
-        expandedWidth="{contactField.width}"
-        onConfirmed="print('Clear field text'); fieldText.text=''"/>
-    <FieldText3 id="fieldText"
-        width="{contactField.width-70}"
-        anchors.right="{removeButton.left}" anchors.rightMargin="5"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        label="{contactField.label}"
-        text="{contactField.value}"/>
-    <Image
-        anchors.right="{fieldText.left}" anchors.rightMargin="5"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        src="{contactField.icon}"/>
-    <states>
-        <State name="editingText" when="{fieldText.state == 'editing'}">
-            <SetProperty target="{removeButton.anchors}" property="rightMargin" value="-35"/>
-            <SetProperty target="{fieldText}" property="width" value="{contactField.width}"/>
-        </State>
-    </states>
-    <transitions>
-        <Transition fromState='' toState="*" reversible="true">
-            <NumericAnimation properties="width,rightMargin" duration="200"/>
-        </Transition>
-    </transitions>
-</Item>
diff --git a/examples/declarative/tutorials/contacts/2_Reuse/ContactField4.qml b/examples/declarative/tutorials/contacts/2_Reuse/ContactField4.qml
deleted file mode 100644
index 13ccbc0..0000000
--- a/examples/declarative/tutorials/contacts/2_Reuse/ContactField4.qml
+++ /dev/null
@@ -1,35 +0,0 @@
-<Item id="contactField"
-    clip="true"
-    height="30">
-    <properties>
-        <Property name="label"/>
-        <Property name="icon"/>
-        <Property name="value"/>
-    </properties>
-    <RemoveButton4 id="removeButton"
-        anchors.right="{parent.right}"
-        anchors.top="{parent.top}" anchors.bottom="{parent.bottom}"
-        expandedWidth="{contactField.width}"
-        onConfirmed="print('Clear field text'); fieldText.text=''"/>
-    <FieldText4 id="fieldText"
-        width="{contactField.width-70}"
-        anchors.right="{removeButton.left}" anchors.rightMargin="5"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        label="{contactField.label}"
-        text="{contactField.value}"/>
-    <Image
-        anchors.right="{fieldText.left}" anchors.rightMargin="5"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        src="{contactField.icon}"/>
-    <states>
-        <State name="editingText" when="{fieldText.state == 'editing'}">
-            <SetProperty target="{removeButton.anchors}" property="rightMargin" value="-35"/>
-            <SetProperty target="{fieldText}" property="width" value="{contactField.width}"/>
-        </State>
-    </states>
-    <transitions>
-        <Transition fromState='' toState="*" reversible="true">
-            <NumericAnimation properties="width,rightMargin" duration="200"/>
-        </Transition>
-    </transitions>
-</Item>
diff --git a/examples/declarative/tutorials/contacts/2_Reuse/FieldText3.qml b/examples/declarative/tutorials/contacts/2_Reuse/FieldText3.qml
deleted file mode 100644
index 97c0772..0000000
--- a/examples/declarative/tutorials/contacts/2_Reuse/FieldText3.qml
+++ /dev/null
@@ -1,91 +0,0 @@
-<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>
-            function edit() {
-                fieldText.state='editing';
-            }
-            function confirm() {
-                fieldText.text = textEdit.text;
-                fieldText.state='';
-                fieldText.confirmed.emit();
-            }
-            function reset() {
-                textEdit.text = fieldText.text;
-                fieldText.state='';
-            }
-        </Script>
-    </resources>
-    <Image id="cancelIcon"
-        width="22" height="22"
-        anchors.right="{parent.right}" anchors.rightMargin="4"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        src="../shared/pics/cancel.png"
-        opacity="0"/>
-    <Image id="confirmIcon"
-        width="22" height="22"
-        anchors.left="{parent.left}" anchors.leftMargin="4"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        src="../shared/pics/ok.png"
-        opacity="0"/>
-    <TextEdit id="textEdit"
-        anchors.left="{parent.left}" anchors.leftMargin="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 != '' ? 0 : 1}">
-        <opacity>
-            <Behaviour>
-                <NumericAnimation property="opacity" duration="250"/>
-            </Behaviour>
-        </opacity>
-    </Text>
-    <MouseRegion anchors.fill="{cancelIcon}" onClicked="reset()"/>
-    <MouseRegion anchors.fill="{confirmIcon}" onClicked="confirm()"/>
-    <MouseRegion
-        id="editRegion"
-        anchors.fill="{textEdit}"
-        onClicked="edit()"/>
-    <states>
-        <State name="editing">
-            <SetProperty target="{confirmIcon}" property="opacity" value="1"/>
-            <SetProperty target="{cancelIcon}" property="opacity" value="1"/>
-            <SetProperty target="{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>
diff --git a/examples/declarative/tutorials/contacts/2_Reuse/FieldText4.qml b/examples/declarative/tutorials/contacts/2_Reuse/FieldText4.qml
deleted file mode 100644
index 45bb18d..0000000
--- a/examples/declarative/tutorials/contacts/2_Reuse/FieldText4.qml
+++ /dev/null
@@ -1,96 +0,0 @@
-<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>
-            function edit() {
-                if (!page.mouseGrabbed) {
-                    fieldText.state='editing';
-                    page.mouseGrabbed=true;
-                }
-            }
-            function confirm() {
-                fieldText.text = textEdit.text;
-                fieldText.state='';
-                page.mouseGrabbed=false;
-                fieldText.confirmed.emit();
-            }
-            function reset() {
-                textEdit.text = fieldText.text;
-                fieldText.state='';
-                page.mouseGrabbed=false;
-            }
-        </Script>
-    </resources>
-    <Image id="cancelIcon"
-        width="22" height="22"
-        anchors.right="{parent.right}" anchors.rightMargin="4"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        src="../shared/pics/cancel.png"
-        opacity="0"/>
-    <Image id="confirmIcon"
-        width="22" height="22"
-        anchors.left="{parent.left}" anchors.leftMargin="4"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        src="../shared/pics/ok.png"
-        opacity="0"/>
-    <TextEdit id="textEdit"
-        anchors.left="{parent.left}" anchors.leftMargin="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 != '' ? 0 : 1}">
-        <opacity>
-            <Behaviour>
-                <NumericAnimation property="opacity" duration="250"/>
-            </Behaviour>
-        </opacity>
-    </Text>
-    <MouseRegion anchors.fill="{cancelIcon}" onClicked="reset()"/>
-    <MouseRegion anchors.fill="{confirmIcon}" onClicked="confirm()"/>
-    <MouseRegion
-        id="editRegion"
-        anchors.fill="{textEdit}"
-        onClicked="edit()"/>
-    <states>
-        <State name="editing">
-            <SetProperty target="{confirmIcon}" property="opacity" value="1"/>
-            <SetProperty target="{cancelIcon}" property="opacity" value="1"/>
-            <SetProperty target="{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>
diff --git a/examples/declarative/tutorials/contacts/2_Reuse/GroupBox.qml b/examples/declarative/tutorials/contacts/2_Reuse/GroupBox.qml
index 01f26ee..665c072 100644
--- a/examples/declarative/tutorials/contacts/2_Reuse/GroupBox.qml
+++ b/examples/declarative/tutorials/contacts/2_Reuse/GroupBox.qml
@@ -1,17 +1,59 @@
-<Item 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>
-</Item>
+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/RemoveButton1.qml b/examples/declarative/tutorials/contacts/2_Reuse/RemoveButton1.qml
deleted file mode 100644
index 68c1838..0000000
--- a/examples/declarative/tutorials/contacts/2_Reuse/RemoveButton1.qml
+++ /dev/null
@@ -1,70 +0,0 @@
-<Rect id="removeButton"
-    width="30" height="30"
-    color="red"
-    radius="5">
-    <resources>
-        <Script>
-            function toggle() {
-                print('removeButton.toggle()');
-                if (removeButton.state == 'opened') {
-                    removeButton.state = '';
-                } else {
-                    removeButton.state = 'opened';
-                }
-            }
-        </Script>
-    </resources>
-    <Image id="trashIcon"
-        width="22" height="22"
-        anchors.right="{parent.right}" anchors.rightMargin="4"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        src="../shared/pics/trash.png"
-        opacity="1">
-        <MouseRegion
-            anchors.fill="{parent}"
-            onClicked="toggle()"/>
-    </Image>
-    <Image id="cancelIcon"
-        width="22" height="22"
-        anchors.right="{parent.right}" anchors.rightMargin="4"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        src="../shared/pics/cancel.png"
-        opacity="0">
-        <MouseRegion
-            anchors.fill="{parent}"
-            onClicked="toggle()"/>
-    </Image>
-    <Image id="confirmIcon"
-        width="22" height="22"
-        anchors.left="{parent.left}" anchors.leftMargin="4"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        src="../shared/pics/ok.png"
-        opacity="0">
-        <MouseRegion
-            anchors.fill="{parent}"
-            onClicked="toggle()"/>
-    </Image>
-    <Text id="text"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        anchors.left="{confirmIcon.right}" anchors.leftMargin="4"
-        anchors.right="{cancelIcon.left}" anchors.rightMargin="4"
-        font.bold="true"
-        color="white"
-        hAlign="AlignHCenter"
-        text="Remove"
-        opacity="0"/>
-    <states>
-        <State name="opened">
-            <SetProperty target="{removeButton}" property="width" value="230"/>
-            <SetProperty target="{text}" property="opacity" value="1"/>
-            <SetProperty target="{confirmIcon}" property="opacity" value="1"/>
-            <SetProperty target="{cancelIcon}" property="opacity" value="1"/>
-            <SetProperty target="{trashIcon}" property="opacity" value="0"/>
-        </State>
-    </states>
-    <transitions>
-        <Transition fromState="*" toState="opened" reversible="true">
-            <NumericAnimation properties="opacity,x,width" duration="200"/>
-        </Transition>
-    </transitions>
-</Rect>
diff --git a/examples/declarative/tutorials/contacts/2_Reuse/RemoveButton2.qml b/examples/declarative/tutorials/contacts/2_Reuse/RemoveButton2.qml
deleted file mode 100644
index d9ff4c5..0000000
--- a/examples/declarative/tutorials/contacts/2_Reuse/RemoveButton2.qml
+++ /dev/null
@@ -1,76 +0,0 @@
-<Rect id="removeButton"
-    width="30" height="30"
-    color="red"
-    radius="5">
-    <properties>
-        <Property name="expandedWidth" value="230"/>
-    </properties>
-    <signals>
-        <Signal name="confirmed"/>
-    </signals>
-    <resources>
-        <Script>
-            function toggle() {
-                print('removeButton.toggle()');
-                if (removeButton.state == 'opened') {
-                    removeButton.state = '';
-                } else {
-                    removeButton.state = 'opened';
-                }
-            }
-        </Script>
-    </resources>
-    <Image id="trashIcon"
-        width="22" height="22"
-        anchors.right="{parent.right}" anchors.rightMargin="4"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        src="../shared/pics/trash.png"
-        opacity="1">
-        <MouseRegion
-            anchors.fill="{parent}"
-            onClicked="toggle()"/>
-    </Image>
-    <Image id="cancelIcon"
-        width="22" height="22"
-        anchors.right="{parent.right}" anchors.rightMargin="4"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        src="../shared/pics/cancel.png"
-        opacity="0">
-        <MouseRegion
-            anchors.fill="{parent}"
-            onClicked="toggle()"/>
-    </Image>
-    <Image id="confirmIcon"
-        width="22" height="22"
-        anchors.left="{parent.left}" anchors.leftMargin="4"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        src="../shared/pics/ok.png"
-        opacity="0">
-        <MouseRegion
-            anchors.fill="{parent}"
-            onClicked="toggle(); removeButton.confirmed.emit()"/>
-    </Image>
-    <Text id="text"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        anchors.left="{confirmIcon.right}" anchors.leftMargin="4"
-        anchors.right="{cancelIcon.left}" anchors.rightMargin="4"
-        font.bold="true"
-        color="white"
-        hAlign="AlignHCenter"
-        text="Remove"
-        opacity="0"/>
-    <states>
-        <State name="opened">
-            <SetProperty target="{removeButton}" property="width" value="{removeButton.expandedWidth}"/>
-            <SetProperty target="{text}" property="opacity" value="1"/>
-            <SetProperty target="{confirmIcon}" property="opacity" value="1"/>
-            <SetProperty target="{cancelIcon}" property="opacity" value="1"/>
-            <SetProperty target="{trashIcon}" property="opacity" value="0"/>
-        </State>
-    </states>
-    <transitions>
-        <Transition fromState="*" toState="opened" reversible="true">
-            <NumericAnimation properties="opacity,x,width" duration="200"/>
-        </Transition>
-    </transitions>
-</Rect>
diff --git a/examples/declarative/tutorials/contacts/2_Reuse/RemoveButton3.qml b/examples/declarative/tutorials/contacts/2_Reuse/RemoveButton3.qml
deleted file mode 100644
index d9ff4c5..0000000
--- a/examples/declarative/tutorials/contacts/2_Reuse/RemoveButton3.qml
+++ /dev/null
@@ -1,76 +0,0 @@
-<Rect id="removeButton"
-    width="30" height="30"
-    color="red"
-    radius="5">
-    <properties>
-        <Property name="expandedWidth" value="230"/>
-    </properties>
-    <signals>
-        <Signal name="confirmed"/>
-    </signals>
-    <resources>
-        <Script>
-            function toggle() {
-                print('removeButton.toggle()');
-                if (removeButton.state == 'opened') {
-                    removeButton.state = '';
-                } else {
-                    removeButton.state = 'opened';
-                }
-            }
-        </Script>
-    </resources>
-    <Image id="trashIcon"
-        width="22" height="22"
-        anchors.right="{parent.right}" anchors.rightMargin="4"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        src="../shared/pics/trash.png"
-        opacity="1">
-        <MouseRegion
-            anchors.fill="{parent}"
-            onClicked="toggle()"/>
-    </Image>
-    <Image id="cancelIcon"
-        width="22" height="22"
-        anchors.right="{parent.right}" anchors.rightMargin="4"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        src="../shared/pics/cancel.png"
-        opacity="0">
-        <MouseRegion
-            anchors.fill="{parent}"
-            onClicked="toggle()"/>
-    </Image>
-    <Image id="confirmIcon"
-        width="22" height="22"
-        anchors.left="{parent.left}" anchors.leftMargin="4"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        src="../shared/pics/ok.png"
-        opacity="0">
-        <MouseRegion
-            anchors.fill="{parent}"
-            onClicked="toggle(); removeButton.confirmed.emit()"/>
-    </Image>
-    <Text id="text"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        anchors.left="{confirmIcon.right}" anchors.leftMargin="4"
-        anchors.right="{cancelIcon.left}" anchors.rightMargin="4"
-        font.bold="true"
-        color="white"
-        hAlign="AlignHCenter"
-        text="Remove"
-        opacity="0"/>
-    <states>
-        <State name="opened">
-            <SetProperty target="{removeButton}" property="width" value="{removeButton.expandedWidth}"/>
-            <SetProperty target="{text}" property="opacity" value="1"/>
-            <SetProperty target="{confirmIcon}" property="opacity" value="1"/>
-            <SetProperty target="{cancelIcon}" property="opacity" value="1"/>
-            <SetProperty target="{trashIcon}" property="opacity" value="0"/>
-        </State>
-    </states>
-    <transitions>
-        <Transition fromState="*" toState="opened" reversible="true">
-            <NumericAnimation properties="opacity,x,width" duration="200"/>
-        </Transition>
-    </transitions>
-</Rect>
diff --git a/examples/declarative/tutorials/contacts/2_Reuse/RemoveButton4.qml b/examples/declarative/tutorials/contacts/2_Reuse/RemoveButton4.qml
deleted file mode 100644
index a489e95..0000000
--- a/examples/declarative/tutorials/contacts/2_Reuse/RemoveButton4.qml
+++ /dev/null
@@ -1,80 +0,0 @@
-<Rect id="removeButton"
-    width="30" height="30"
-    color="red"
-    radius="5">
-    <properties>
-        <Property name="expandedWidth" value="230"/>
-    </properties>
-    <signals>
-        <Signal name="confirmed"/>
-    </signals>
-    <resources>
-        <Script>
-            function toggle() {
-                print('removeButton.toggle()');
-                if (removeButton.state == 'opened') {
-                    removeButton.state = '';
-                    page.mouseGrabbed=false;
-                } else {
-                    if (!page.mouseGrabbed) {
-                        removeButton.state = 'opened';
-                        page.mouseGrabbed=true;
-                    }
-                }
-            }
-        </Script>
-    </resources>
-    <Image id="trashIcon"
-        width="22" height="22"
-        anchors.right="{parent.right}" anchors.rightMargin="4"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        src="../shared/pics/trash.png"
-        opacity="1">
-        <MouseRegion
-            anchors.fill="{parent}"
-            onClicked="toggle()"/>
-    </Image>
-    <Image id="cancelIcon"
-        width="22" height="22"
-        anchors.right="{parent.right}" anchors.rightMargin="4"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        src="../shared/pics/cancel.png"
-        opacity="0">
-        <MouseRegion
-            anchors.fill="{parent}"
-            onClicked="toggle()"/>
-    </Image>
-    <Image id="confirmIcon"
-        width="22" height="22"
-        anchors.left="{parent.left}" anchors.leftMargin="4"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        src="../shared/pics/ok.png"
-        opacity="0">
-        <MouseRegion
-            anchors.fill="{parent}"
-            onClicked="toggle(); removeButton.confirmed.emit()"/>
-    </Image>
-    <Text id="text"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        anchors.left="{confirmIcon.right}" anchors.leftMargin="4"
-        anchors.right="{cancelIcon.left}" anchors.rightMargin="4"
-        font.bold="true"
-        color="white"
-        hAlign="AlignHCenter"
-        text="Remove"
-        opacity="0"/>
-    <states>
-        <State name="opened">
-            <SetProperty target="{removeButton}" property="width" value="{removeButton.expandedWidth}"/>
-            <SetProperty target="{text}" property="opacity" value="1"/>
-            <SetProperty target="{confirmIcon}" property="opacity" value="1"/>
-            <SetProperty target="{cancelIcon}" property="opacity" value="1"/>
-            <SetProperty target="{trashIcon}" property="opacity" value="0"/>
-        </State>
-    </states>
-    <transitions>
-        <Transition fromState="*" toState="opened" reversible="true">
-            <NumericAnimation properties="opacity,x,width" duration="200"/>
-        </Transition>
-    </transitions>
-</Rect>
diff --git a/examples/declarative/tutorials/contacts/3_Collections/1/ContactView.qml b/examples/declarative/tutorials/contacts/3_Collections/1/ContactView.qml
new file mode 100644
index 0000000..ce338e2
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/3_Collections/1/ContactView.qml
@@ -0,0 +1,47 @@
+import "../lib"
+Item {
+    id: contacts
+    width: 240
+    height: 230
+    properties: Property {
+        name: "mouseGrabbed"
+        value: false
+    }
+    resources: [
+//! [model]
+        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"
+        }
+//! [model]
+    ]
+//! [view]
+    ListView {
+        id: contactListView
+        anchors.fill: parent
+        clip: true
+        model: contactList
+        focus: true
+//! [delegate]
+        delegate: [
+            Text {
+                x: 45
+                y: 12
+                width: contactListView.width-45
+                height: 30
+                color: "black"
+                font.bold: true
+                text: model.label
+            }
+        ]
+//! [delegate]
+    }
+//! [view]
+}
diff --git a/examples/declarative/tutorials/contacts/3_Collections/2/ContactView.qml b/examples/declarative/tutorials/contacts/3_Collections/2/ContactView.qml
new file mode 100644
index 0000000..b6b3c31
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/3_Collections/2/ContactView.qml
@@ -0,0 +1,129 @@
+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"
+        }
+    ]
+//! [button]
+    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
+    }
+//! [button]
+    ListView {
+        id: contactListView
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.top: cancelEditButton.bottom
+        anchors.bottom: parent.bottom
+        clip: true
+        model: contactList
+        focus: true
+        delegate: [
+//! [components]
+            Item {
+                id: wrapper
+                x: 0
+                width: ListView.view.width
+                height: 34
+                Text {
+                    id: label
+                    x: 45
+                    y: 12
+                    width: parent.width-45
+                    color: "black"
+                    font.bold: true
+                    text: model.label
+                }
+                MouseRegion {
+                    anchors.fill: label
+                    onClicked: { wrapper.state='opened' }
+                }
+                Contact {
+                    id: details
+                    anchors.fill: parent
+                    contactid: model.recid
+                    label: model.label
+                    email: model.email
+                    phone: model.phone
+                    opacity: 0
+                }
+//! [components]
+//! [states]
+                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
+                        }
+                    }
+                ]
+//! [states]
+//! [transitions]
+                transitions: [
+                    Transition {
+                        NumericAnimation {
+                            duration: 500
+                            properties: "yPosition,height,opacity"
+                        }
+                    }
+                ]
+//! [transitions]
+//! [connections]
+                Connection {
+                    sender: cancelEditButton
+                    signal: "clicked()"
+                    script: {
+                        if (wrapper.state == 'opened') {
+                            wrapper.state = '';
+                        }
+                    }
+                }
+//! [connections]
+            }
+        ]
+    }
+}
diff --git a/examples/declarative/tutorials/contacts/3_Collections/3/ContactView.qml b/examples/declarative/tutorials/contacts/3_Collections/3/ContactView.qml
new file mode 100644
index 0000000..f0b55db
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/3_Collections/3/ContactView.qml
@@ -0,0 +1,142 @@
+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"
+        }
+    ]
+    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
+        focus: true
+        delegate: [
+            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
+                }
+//! [setting qml]
+                MouseRegion {
+                    anchors.fill: label
+                    onClicked: {
+                        Details.qml = 'Contact.qml';
+                        wrapper.state='opened';
+                    }
+                }
+                Item {
+                    id: Details
+                    anchors.fill: wrapper
+                    opacity: 0
+//! [setting qml]
+//! [binding]
+                    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
+                    }
+//! [binding]
+                }
+                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 = '';
+                        }
+                    }
+                }
+            }
+        ]
+    }
+}
diff --git a/examples/declarative/tutorials/contacts/3_Collections/3_Collections.qml b/examples/declarative/tutorials/contacts/3_Collections/3_Collections.qml
index 6907676..e8d9a19 100644
--- a/examples/declarative/tutorials/contacts/3_Collections/3_Collections.qml
+++ b/examples/declarative/tutorials/contacts/3_Collections/3_Collections.qml
@@ -1,37 +1,29 @@
-<Rect id="page" width="{layout.width}" height="{layout.height}" color='white'>
-    <GridLayout id="layout" width="{contents.width}" height="{contents.height}">
-        <FocusRealm id="realm1" focus="false" width="280" height="320">
-            <GroupBox contents="ContactView1.qml" label="something" anchors.fill="{parent}"/>
-            <Rect id="box1" color="black" anchors.fill="{parent}" opacity="0.3">
-                <MouseRegion anchors.fill="{parent}" onClicked="print('1'); realm1.focus=true; realm2.focus=false; realm3.focus=false; box1.opacity='0'; box2.opacity='0.3'; box3.opacity='0.3'" onPressed="" onPositionChanged=""/>
-                <opacity>
-                    <Behaviour>
-                        <NumericAnimation property="opacity" duration="250"/>
-                    </Behaviour>
-                </opacity>
-            </Rect>
-        </FocusRealm>
-        <FocusRealm id="realm2" focus="false" width="280" height="320">
-            <GroupBox contents="ContactView2.qml" label="something" anchors.fill="{parent}"/>
-            <Rect id="box2" color="black" anchors.fill="{parent}" opacity="0.3">
-                <MouseRegion anchors.fill="{parent}" onClicked="realm1.focus=false; realm2.focus=true; realm3.focus=false; box1.opacity='0.3'; box2.opacity='0'; box3.opacity='0.3'" onPressed="" onPositionChanged=""/>
-                <opacity>
-                    <Behaviour>
-                        <NumericAnimation property="opacity" duration="250"/>
-                    </Behaviour>
-                </opacity>
-            </Rect>
-        </FocusRealm>
-        <FocusRealm id="realm3" focus="true" width="280" height="320">
-            <GroupBox contents="ContactView3.qml" label="something" anchors.fill="{parent}"/>
-            <Rect id="box3" color="black" anchors.fill="{parent}" opacity="0.3">
-                <MouseRegion anchors.fill="{parent}" onClicked="realm1.focus=false; realm2.focus=false; realm3.focus=true; box1.opacity='0.3'; box2.opacity='0.3'; box3.opacity='0'" onPressed="" onPositionChanged=""/>
-                <opacity>
-                    <Behaviour>
-                        <NumericAnimation property="opacity" duration="250"/>
-                    </Behaviour>
-                </opacity>
-            </Rect>
-        </FocusRealm>
-    </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/Button.qml b/examples/declarative/tutorials/contacts/3_Collections/Button.qml
deleted file mode 100644
index 8290d35..0000000
--- a/examples/declarative/tutorials/contacts/3_Collections/Button.qml
+++ /dev/null
@@ -1,38 +0,0 @@
-<Item id="button" width="30" height="30">
-    <properties>
-        <Property name="icon"/>
-    </properties>
-    <signals>
-        <Signal name="clicked"/>
-    </signals>
-    <Rect id="buttonRect"
-        anchors.fill="{parent}"
-        color="lightgreen"
-        radius="5">
-        <Image id="iconImage"
-            src="{button.icon}"
-            anchors.horizontalCenter="{buttonRect.horizontalCenter}"
-            anchors.verticalCenter="{buttonRect.verticalCenter}"/>
-        <MouseRegion id="buttonMouseRegion"
-            anchors.fill="{buttonRect}"
-            onClicked="button.clicked.emit()"/>
-        <states>
-            <State name="pressed" when="{buttonMouseRegion.pressed == true}">
-                <SetProperty target="{buttonRect}" property="color" value="green"/>
-            </State>
-        </states>
-        <transitions>
-            <Transition fromState="*" toState="pressed">
-                <ColorAnimation duration="200"/>
-            </Transition>
-            <Transition fromState="pressed" toState="*">
-                <ColorAnimation duration="1000"/>
-            </Transition>
-        </transitions>
-    </Rect>
-    <opacity>
-        <Behaviour>
-            <NumericAnimation property="opacity" duration="250"/>
-        </Behaviour>
-    </opacity>
-</Item>
diff --git a/examples/declarative/tutorials/contacts/3_Collections/Contact.qml b/examples/declarative/tutorials/contacts/3_Collections/Contact.qml
deleted file mode 100644
index f620c25..0000000
--- a/examples/declarative/tutorials/contacts/3_Collections/Contact.qml
+++ /dev/null
@@ -1,28 +0,0 @@
-<Item id="contactDetails"
-    anchors.fill="{parent}">
-    <properties>
-        <Property name="contactid" value=""/>
-        <Property name="label" onValueChanged="labelField.value = label"/>
-        <Property name="phone" onValueChanged="phoneField.value = phone"/>
-        <Property name="email" onValueChanged="emailField.value = email"/>
-    </properties>
-    <VerticalLayout id="layout"
-        anchors.fill="{parent}"
-        spacing="5"
-        margin="5">
-        <ContactField id="labelField"
-            anchors.left="{layout.left}" anchors.leftMargin="5"
-            anchors.right="{layout.right}" anchors.rightMargin="5"
-            label="Name"/>
-        <ContactField id="phoneField"
-            anchors.left="{layout.left}" anchors.leftMargin="5"
-            anchors.right="{layout.right}" anchors.rightMargin="5"
-            icon="../shared/pics/phone.png"
-            label="Phone"/>
-        <ContactField id="emailField"
-            anchors.left="{layout.left}" anchors.leftMargin="5"
-            anchors.right="{layout.right}" anchors.rightMargin="5"
-            icon="../shared/pics/email.png"
-            label="Email"/>
-    </VerticalLayout>
-</Item>
diff --git a/examples/declarative/tutorials/contacts/3_Collections/ContactField.qml b/examples/declarative/tutorials/contacts/3_Collections/ContactField.qml
deleted file mode 100644
index 819914c..0000000
--- a/examples/declarative/tutorials/contacts/3_Collections/ContactField.qml
+++ /dev/null
@@ -1,35 +0,0 @@
-<Item id="contactField"
-    clip="true"
-    height="30">
-    <properties>
-        <Property name="label"/>
-        <Property name="icon"/>
-        <Property name="value"/>
-    </properties>
-    <RemoveButton id="removeButton"
-        anchors.right="{parent.right}"
-        anchors.top="{parent.top}" anchors.bottom="{parent.bottom}"
-        expandedWidth="{contactField.width}"
-        onConfirmed="print('Clear field text'); fieldText.text=''"/>
-    <FieldText id="fieldText"
-        width="{contactField.width-70}"
-        anchors.right="{removeButton.left}" anchors.rightMargin="5"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        label="{contactField.label}"
-        text="{contactField.value}"/>
-    <Image
-        anchors.right="{fieldText.left}" anchors.rightMargin="5"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        src="{contactField.icon}"/>
-    <states>
-        <State name="editingText" when="{fieldText.state == 'editing'}">
-            <SetProperty target="{removeButton.anchors}" property="rightMargin" value="-35"/>
-            <SetProperty target="{fieldText}" property="width" value="{contactField.width}"/>
-        </State>
-    </states>
-    <transitions>
-        <Transition fromState='' toState="*" reversible="true">
-            <NumericAnimation properties="width,rightMargin" duration="200"/>
-        </Transition>
-    </transitions>
-</Item>
diff --git a/examples/declarative/tutorials/contacts/3_Collections/ContactView1.qml b/examples/declarative/tutorials/contacts/3_Collections/ContactView1.qml
deleted file mode 100644
index 6606094..0000000
--- a/examples/declarative/tutorials/contacts/3_Collections/ContactView1.qml
+++ /dev/null
@@ -1,28 +0,0 @@
-<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>
diff --git a/examples/declarative/tutorials/contacts/3_Collections/ContactView2.qml b/examples/declarative/tutorials/contacts/3_Collections/ContactView2.qml
deleted file mode 100644
index 97868e3..0000000
--- a/examples/declarative/tutorials/contacts/3_Collections/ContactView2.qml
+++ /dev/null
@@ -1,68 +0,0 @@
-<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 = '';
-                    }
-                </Connection>
-            </Item>
-        </Component>
-    </resources>
-    <Button id="cancelEditButton"
-        anchors.top="{parent.top}" anchors.topMargin="5"
-        anchors.right="{parent.right}" anchors.rightMargin="5"
-        icon="../shared/pics/cancel.png"/>
-    <ListView id="contactListView"
-        anchors.left="{parent.left}"
-        anchors.right="{parent.right}"
-        anchors.top="{cancelEditButton.bottom}"
-        anchors.bottom="{parent.bottom}"
-        clip="true"
-        model="{contactList}"
-        delegate="{contactDelegate}"
-        focus="true"/>
-</Item>
diff --git a/examples/declarative/tutorials/contacts/3_Collections/ContactView3.qml b/examples/declarative/tutorials/contacts/3_Collections/ContactView3.qml
deleted file mode 100644
index c15ece2..0000000
--- a/examples/declarative/tutorials/contacts/3_Collections/ContactView3.qml
+++ /dev/null
@@ -1,73 +0,0 @@
-<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 = '';
-                    }
-                </Connection>
-            </Item>
-        </Component>
-    </resources>
-    <Button id="cancelEditButton"
-        anchors.top="{parent.top}" anchors.topMargin="5"
-        anchors.right="{parent.right}" anchors.rightMargin="5"
-        icon="../shared/pics/cancel.png"/>
-    <ListView id="contactListView"
-        anchors.left="{parent.left}"
-        anchors.right="{parent.right}"
-        anchors.top="{cancelEditButton.bottom}"
-        anchors.bottom="{parent.bottom}"
-        clip="true"
-        model="{contactList}"
-        delegate="{contactDelegate}"
-        focus="true"/>
-</Item>
diff --git a/examples/declarative/tutorials/contacts/3_Collections/FieldText.qml b/examples/declarative/tutorials/contacts/3_Collections/FieldText.qml
deleted file mode 100644
index 583c73e..0000000
--- a/examples/declarative/tutorials/contacts/3_Collections/FieldText.qml
+++ /dev/null
@@ -1,96 +0,0 @@
-<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>
-            function edit() {
-                if (!contacts.mouseGrabbed) {
-                    fieldText.state='editing';
-                    contacts.mouseGrabbed=true;
-                }
-            }
-            function confirm() {
-                fieldText.text = textEdit.text;
-                fieldText.state='';
-                contacts.mouseGrabbed=false;
-                fieldText.confirmed.emit();
-            }
-            function reset() {
-                textEdit.text = fieldText.text;
-                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 != '' ? 0 : 1}">
-        <opacity>
-            <Behaviour>
-                <NumericAnimation property="opacity" duration="250"/>
-            </Behaviour>
-        </opacity>
-    </Text>
-    <MouseRegion anchors.fill="{cancelIcon}" onClicked="reset()"/>
-    <MouseRegion anchors.fill="{confirmIcon}" onClicked="confirm()"/>
-    <MouseRegion
-        id="editRegion"
-        anchors.fill="{textEdit}"
-        onClicked="edit()"/>
-    <states>
-        <State name="editing">
-            <SetProperty target="{confirmIcon}" property="opacity" value="1"/>
-            <SetProperty target="{cancelIcon}" property="opacity" value="1"/>
-            <SetProperty target="{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>
diff --git a/examples/declarative/tutorials/contacts/3_Collections/GroupBox.qml b/examples/declarative/tutorials/contacts/3_Collections/GroupBox.qml
index 01f26ee..665c072 100644
--- a/examples/declarative/tutorials/contacts/3_Collections/GroupBox.qml
+++ b/examples/declarative/tutorials/contacts/3_Collections/GroupBox.qml
@@ -1,17 +1,59 @@
-<Item 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>
-</Item>
+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/RemoveButton.qml b/examples/declarative/tutorials/contacts/3_Collections/RemoveButton.qml
deleted file mode 100644
index 493ab7a..0000000
--- a/examples/declarative/tutorials/contacts/3_Collections/RemoveButton.qml
+++ /dev/null
@@ -1,80 +0,0 @@
-<Rect id="removeButton"
-    width="30" height="30"
-    color="red"
-    radius="5">
-    <properties>
-        <Property name="expandedWidth" value="230"/>
-    </properties>
-    <signals>
-        <Signal name="confirmed"/>
-    </signals>
-    <resources>
-        <Script>
-            function toggle() {
-                print('removeButton.toggle()');
-                if (removeButton.state == 'opened') {
-                    removeButton.state = '';
-                    contacts.mouseGrabbed=false;
-                } else {
-                    if (!contacts.mouseGrabbed) {
-                        removeButton.state = 'opened';
-                        contacts.mouseGrabbed=true;
-                    }
-                }
-            }
-        </Script>
-    </resources>
-    <Image id="trashIcon"
-        width="22" height="22"
-        anchors.right="{parent.right}" anchors.rightMargin="4"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        src="../shared/pics/trash.png"
-        opacity="1">
-        <MouseRegion
-            anchors.fill="{parent}"
-            onClicked="toggle()"/>
-    </Image>
-    <Image id="cancelIcon"
-        width="22" height="22"
-        anchors.right="{parent.right}" anchors.rightMargin="4"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        src="../shared/pics/cancel.png"
-        opacity="0">
-        <MouseRegion
-            anchors.fill="{parent}"
-            onClicked="toggle()"/>
-    </Image>
-    <Image id="confirmIcon"
-        width="22" height="22"
-        anchors.left="{parent.left}" anchors.leftMargin="4"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        src="../shared/pics/ok.png"
-        opacity="0">
-        <MouseRegion
-            anchors.fill="{parent}"
-            onClicked="toggle(); removeButton.confirmed.emit()"/>
-    </Image>
-    <Text id="text"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        anchors.left="{confirmIcon.right}" anchors.leftMargin="4"
-        anchors.right="{cancelIcon.left}" anchors.rightMargin="4"
-        font.bold="true"
-        color="white"
-        hAlign="AlignHCenter"
-        text="Remove"
-        opacity="0"/>
-    <states>
-        <State name="opened">
-            <SetProperty target="{removeButton}" property="width" value="{removeButton.expandedWidth}"/>
-            <SetProperty target="{text}" property="opacity" value="1"/>
-            <SetProperty target="{confirmIcon}" property="opacity" value="1"/>
-            <SetProperty target="{cancelIcon}" property="opacity" value="1"/>
-            <SetProperty target="{trashIcon}" property="opacity" value="0"/>
-        </State>
-    </states>
-    <transitions>
-        <Transition fromState="*" toState="opened" reversible="true">
-            <NumericAnimation properties="opacity,x,width" duration="200"/>
-        </Transition>
-    </transitions>
-</Rect>
diff --git a/examples/declarative/tutorials/contacts/3_Collections/lib/Button.qml b/examples/declarative/tutorials/contacts/3_Collections/lib/Button.qml
new file mode 100644
index 0000000..57267f8
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/3_Collections/lib/Button.qml
@@ -0,0 +1,61 @@
+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
+            source: 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
new file mode 100644
index 0000000..a7e78dc
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/3_Collections/lib/Contact.qml
@@ -0,0 +1,52 @@
+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
new file mode 100644
index 0000000..0c422b7
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/3_Collections/lib/ContactField.qml
@@ -0,0 +1,64 @@
+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: { 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
+        source: 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
new file mode 100644
index 0000000..8ba01da
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/3_Collections/lib/FieldText.qml
@@ -0,0 +1,157 @@
+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';
+                    contacts.mouseGrabbed=true;
+                }
+            }
+            function confirm() {
+                fieldText.text = textEdit.text;
+                fieldText.state='';
+                contacts.mouseGrabbed=false;
+                fieldText.confirmed.emit();
+            }
+            function reset() {
+                textEdit.text = fieldText.text;
+                fieldText.state='';
+                contacts.mouseGrabbed=false;
+            }
+        
+        }
+    ]
+    Image {
+        id: cancelIcon
+        width: 22
+        height: 22
+        anchors.right: parent.right
+        anchors.rightMargin: 4
+        anchors.verticalCenter: parent.verticalCenter
+        source: "../../shared/pics/cancel.png"
+        opacity: 0
+    }
+    Image {
+        id: confirmIcon
+        width: 22
+        height: 22
+        anchors.left: parent.left
+        anchors.leftMargin: 4
+        anchors.verticalCenter: parent.verticalCenter
+        source: "../../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
new file mode 100644
index 0000000..0b90e48
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/3_Collections/lib/RemoveButton.qml
@@ -0,0 +1,126 @@
+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() {
+                if (removeButton.state == 'opened') {
+                    removeButton.state = '';
+                    contacts.mouseGrabbed=false;
+                } else {
+                    if (!contacts.mouseGrabbed) {
+                        removeButton.state = 'opened';
+                        contacts.mouseGrabbed=true;
+                    }
+                }
+            }
+        
+        }
+    ]
+    Image {
+        id: trashIcon
+        width: 22
+        height: 22
+        anchors.right: parent.right
+        anchors.rightMargin: 4
+        anchors.verticalCenter: parent.verticalCenter
+        source: "../../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
+        source: "../../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
+        source: "../../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/Final/Button.qml b/examples/declarative/tutorials/contacts/Final/Button.qml
index 8290d35..14965b5 100644
--- a/examples/declarative/tutorials/contacts/Final/Button.qml
+++ b/examples/declarative/tutorials/contacts/Final/Button.qml
@@ -10,7 +10,7 @@
         color="lightgreen"
         radius="5">
         <Image id="iconImage"
-            src="{button.icon}"
+            source="{button.icon}"
             anchors.horizontalCenter="{buttonRect.horizontalCenter}"
             anchors.verticalCenter="{buttonRect.verticalCenter}"/>
         <MouseRegion id="buttonMouseRegion"
diff --git a/examples/declarative/tutorials/contacts/Final/ContactField.qml b/examples/declarative/tutorials/contacts/Final/ContactField.qml
index fe9329a..80ffd30 100644
--- a/examples/declarative/tutorials/contacts/Final/ContactField.qml
+++ b/examples/declarative/tutorials/contacts/Final/ContactField.qml
@@ -21,7 +21,7 @@
     <Image
         anchors.right="{fieldText.left}" anchors.rightMargin="5"
         anchors.verticalCenter="{parent.verticalCenter}"
-        src="{contactField.icon}"/>
+        source="{contactField.icon}"/>
     <states>
         <State name="editingText" when="{fieldText.state == 'editing'}">
             <SetProperty target="{removeButton.anchors}" property="rightMargin" value="-35"/>
diff --git a/examples/declarative/tutorials/contacts/Final/FieldText.qml b/examples/declarative/tutorials/contacts/Final/FieldText.qml
index a82cecd..ad7669d 100644
--- a/examples/declarative/tutorials/contacts/Final/FieldText.qml
+++ b/examples/declarative/tutorials/contacts/Final/FieldText.qml
@@ -39,13 +39,13 @@
         width="22" height="22"
         anchors.right="{parent.right}" anchors.rightMargin="4"
         anchors.verticalCenter="{parent.verticalCenter}"
-        src="../shared/pics/cancel.png"
+        source="../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"
+        source="../shared/pics/ok.png"
         opacity="0"/>
     <TextEdit id="textEdit"
         anchors.left="{parent.left}" anchors.leftMargin="0"
@@ -63,7 +63,7 @@
         color="#505050"
         font.italic="true"
         text="{fieldText.label}"
-        opacity="{textEdit.text != '' ? 0 : 1}">
+        opacity="{textEdit.text == '' ? 1 : 0}">
         <opacity>
             <Behaviour>
                 <NumericAnimation property="opacity" duration="250"/>
diff --git a/examples/declarative/tutorials/contacts/Final/RemoveButton.qml b/examples/declarative/tutorials/contacts/Final/RemoveButton.qml
index 493ab7a..b096bca 100644
--- a/examples/declarative/tutorials/contacts/Final/RemoveButton.qml
+++ b/examples/declarative/tutorials/contacts/Final/RemoveButton.qml
@@ -28,7 +28,7 @@
         width="22" height="22"
         anchors.right="{parent.right}" anchors.rightMargin="4"
         anchors.verticalCenter="{parent.verticalCenter}"
-        src="../shared/pics/trash.png"
+        source="../shared/pics/trash.png"
         opacity="1">
         <MouseRegion
             anchors.fill="{parent}"
@@ -38,7 +38,7 @@
         width="22" height="22"
         anchors.right="{parent.right}" anchors.rightMargin="4"
         anchors.verticalCenter="{parent.verticalCenter}"
-        src="../shared/pics/cancel.png"
+        source="../shared/pics/cancel.png"
         opacity="0">
         <MouseRegion
             anchors.fill="{parent}"
@@ -48,7 +48,7 @@
         width="22" height="22"
         anchors.left="{parent.left}" anchors.leftMargin="4"
         anchors.verticalCenter="{parent.verticalCenter}"
-        src="../shared/pics/ok.png"
+        source="../shared/pics/ok.png"
         opacity="0">
         <MouseRegion
             anchors.fill="{parent}"
diff --git a/examples/declarative/tutorials/contacts/Final/SearchBar.qml b/examples/declarative/tutorials/contacts/Final/SearchBar.qml
index aea5a5d..3965e39 100644
--- a/examples/declarative/tutorials/contacts/Final/SearchBar.qml
+++ b/examples/declarative/tutorials/contacts/Final/SearchBar.qml
@@ -6,7 +6,7 @@
     <Image id="searchIcon"
         anchors.left="{parent.left}" anchors.leftMargin="5"
         anchors.verticalCenter="{parent.verticalCenter}"
-        src="../shared/pics/search.png"/>
+        source="../shared/pics/search.png"/>
     <TextEdit id="searchEdit"
         anchors.left="{searchIcon.right}" anchors.right="{parent.right}"
         anchors.leftMargin="5" anchors.rightMargin="5"
diff --git a/examples/declarative/tutorials/contacts/shared/contacts.sqlite b/examples/declarative/tutorials/contacts/shared/contacts.sqlite
index 7347adc..6918878 100644
--- a/examples/declarative/tutorials/contacts/shared/contacts.sqlite
+++ b/examples/declarative/tutorials/contacts/shared/contacts.sqlite
diff --git a/examples/declarative/velocity/Day.qml b/examples/declarative/velocity/Day.qml
index 3441648..b65f2bc 100644
--- a/examples/declarative/velocity/Day.qml
+++ b/examples/declarative/velocity/Day.qml
@@ -4,7 +4,7 @@
         <Property name="stickies" />
     </properties>
 
-    <Image x="10" y="10" src="cork.jpg" opaque="true"/>
+    <Image x="10" y="10" source="cork.jpg" opaque="true"/>
     <Text x="20" y="20" height="40" font.size="14" font.bold="true" width="370" text="{day}" style="Outline" styleColor="#dedede"/>
 
     <Repeater dataSource="{Page.stickies}">
@@ -13,13 +13,13 @@
                 <Follow source="{-Flick.xVelocity / 100}" spring="2.0" damping="0.1"/>
             </rotation>
             <Item id="Sticky" scale="0.5">
-                <Image id="StickyImage" src="sticky.png" smooth="true" y="-20" x="{8 + -width * 0.6 / 2}" scale="0.6" />
+                <Image id="StickyImage" source="sticky.png" smooth="true" y="-20" x="{8 + -width * 0.6 / 2}" scale="0.6" />
                 <TextEdit id="MyText" smooth="true" font.size="28" readOnly="false" x="-104" y="36" wrap="true" rotation="-8" text="{noteText}" width="195" height="172" />
                 <Item y="-20" x="{StickyImage.x}" width="{StickyImage.width * StickyImage.scale}" height="{StickyImage.height * StickyImage.scale}" >
                     <MouseRegion id="Mouse" onClicked="MyText.focus = true" anchors.fill="{parent}" drag.target="{StickyPage}" drag.axis="xy" drag.ymin="0" drag.ymax="500" drag.xmin="0" drag.xmax="400"/>
                 </Item>
             </Item>
-            <Image src="tack.png" x="{-width / 2}" y="{-height * 0.7 / 2}" scale="0.7" />
+            <Image source="tack.png" x="{-width / 2}" y="{-height * 0.7 / 2}" scale="0.7" />
 
             <states>
                 <State name="pressed" when="{Mouse.pressed}">
diff --git a/examples/declarative/xmldata/daringfireball.qml b/examples/declarative/xmldata/daringfireball.qml
index cfd0a98..5e98d1b 100644
--- a/examples/declarative/xmldata/daringfireball.qml
+++ b/examples/declarative/xmldata/daringfireball.qml
@@ -1,6 +1,6 @@
 <Rect color="white" width="600" height="600">
   <resources>
-        <XmlListModel id="feedModel" src="http://daringfireball.net/index.xml"
+        <XmlListModel id="feedModel" source="http://daringfireball.net/index.xml"
                                      query="doc($src)/feed/entry">
             <namespaceDeclarations>
                 declare default element namespace 'http://www.w3.org/2005/Atom';
diff --git a/examples/declarative/xmldata/yahoonews.qml b/examples/declarative/xmldata/yahoonews.qml
index 80ace18..32a706e 100644
--- a/examples/declarative/xmldata/yahoonews.qml
+++ b/examples/declarative/xmldata/yahoonews.qml
@@ -1,6 +1,6 @@
 <Rect color="black" gradientColor="#AAAAAA" width="600" height="600">
   <resources>
-        <XmlListModel id="feedModel" src="http://rss.news.yahoo.com/rss/oceania" query="doc($src)/rss/channel/item">
+        <XmlListModel id="feedModel" source="http://rss.news.yahoo.com/rss/oceania" query="doc($src)/rss/channel/item">
             <Role name="title" query="title/string()"/>
             <Role name="link" query="link/string()"/>
             <Role name="description" query="description/string()" isCData="true"/>
diff --git a/src/declarative/extra/qmlxmllistmodel.cpp b/src/declarative/extra/qmlxmllistmodel.cpp
index 562a1c8..91c8139 100644
--- a/src/declarative/extra/qmlxmllistmodel.cpp
+++ b/src/declarative/extra/qmlxmllistmodel.cpp
@@ -192,13 +192,13 @@ QString QmlXmlListModel::toString(int role) const
     return d->roleNames.at(index);
 }
 
-QString QmlXmlListModel::src() const
+QString QmlXmlListModel::source() const
 {
     Q_D(const QmlXmlListModel);
     return d->src;
 }
 
-void QmlXmlListModel::setSrc(const QString &src)
+void QmlXmlListModel::setSource(const QString &src)
 {
     Q_D(QmlXmlListModel);
     d->src = src;
diff --git a/src/declarative/extra/qmlxmllistmodel.h b/src/declarative/extra/qmlxmllistmodel.h
index a8f3087..d06cabf 100644
--- a/src/declarative/extra/qmlxmllistmodel.h
+++ b/src/declarative/extra/qmlxmllistmodel.h
@@ -90,7 +90,7 @@ class Q_DECLARATIVE_EXPORT QmlXmlListModel : public QListModelInterface, public
     Q_OBJECT
     Q_INTERFACES(QmlParserStatus)
 
-    Q_PROPERTY(QString src READ src WRITE setSrc)
+    Q_PROPERTY(QString source READ source WRITE setSource)
     Q_PROPERTY(QString query READ query WRITE setQuery)
     Q_PROPERTY(QString namespaceDeclarations READ namespaceDeclarations WRITE setNamespaceDeclarations)
     Q_PROPERTY(QmlList<XmlListModelRole *> *roles READ roleObjects)
@@ -106,8 +106,8 @@ public:
 
     QmlList<XmlListModelRole *> *roleObjects();
 
-    QString src() const;
-    void setSrc(const QString&);
+    QString source() const;
+    void setSource(const QString&);
 
     QString query() const;
     void setQuery(const QString&);
diff --git a/src/declarative/fx/qfxcomponentinstance.cpp b/src/declarative/fx/qfxcomponentinstance.cpp
index 951c25d..5343f7d 100644
--- a/src/declarative/fx/qfxcomponentinstance.cpp
+++ b/src/declarative/fx/qfxcomponentinstance.cpp
@@ -51,15 +51,14 @@ QML_DEFINE_TYPE(QFxComponentInstance,ComponentInstance);
 
 /*!
     \internal
-    \class QFxComponentInstance
-    \qmlclass ComponentInstance
+    \class QFxComponentInstance ComponentInstance
 
     \brief The QFxComponentInstance class provides a way to instantiate an item from a component.
  */
 
 /*!
     \qmlclass ComponentInstance QFxComponentInstance
-    \brief The ComponentInstance element allows you to instantiate an arbitrary component.
+    \brief The ComponentInstance element allows you to instantiate a \l{qml-component.html} {Component}.
 
     \code
     <Item>
diff --git a/src/declarative/fx/qfxhighlightfilter.cpp b/src/declarative/fx/qfxhighlightfilter.cpp
index ab0512c..70b50cd 100644
--- a/src/declarative/fx/qfxhighlightfilter.cpp
+++ b/src/declarative/fx/qfxhighlightfilter.cpp
@@ -119,7 +119,7 @@ QFxHighlightFilter::~QFxHighlightFilter()
 */
 
 /*!
-    \property QFxHighlightFilter::src
+    \property QFxHighlightFilter::source
     \brief the URL of the image to be used as the highlight.
 */
 QString QFxHighlightFilter::source() const
diff --git a/src/declarative/fx/qfxhighlightfilter.h b/src/declarative/fx/qfxhighlightfilter.h
index 6204242..218f4e1 100644
--- a/src/declarative/fx/qfxhighlightfilter.h
+++ b/src/declarative/fx/qfxhighlightfilter.h
@@ -56,7 +56,7 @@ class Q_DECLARATIVE_EXPORT QFxHighlightFilter : public QSimpleCanvasFilter
 {
     Q_OBJECT
 
-    Q_PROPERTY(QString src READ source WRITE setSource NOTIFY sourceChanged)
+    Q_PROPERTY(QString source READ source WRITE setSource NOTIFY sourceChanged)
     Q_PROPERTY(bool tiled READ tiled WRITE setTiled NOTIFY tiledChanged)
     Q_PROPERTY(int xOffset READ xOffset WRITE setXOffset NOTIFY offsetChanged)
     Q_PROPERTY(int yOffset READ yOffset WRITE setYOffset NOTIFY offsetChanged)
diff --git a/src/declarative/fx/qfximage.h b/src/declarative/fx/qfximage.h
index 4eed0ef..37fe5be 100644
--- a/src/declarative/fx/qfximage.h
+++ b/src/declarative/fx/qfximage.h
@@ -57,7 +57,7 @@ class Q_DECLARATIVE_EXPORT QFxImage : public QFxItem
     Q_ENUMS(Status)
 
     Q_PROPERTY(Status status READ status NOTIFY statusChanged)
-    Q_PROPERTY(QString src READ source WRITE setSource NOTIFY sourceChanged)
+    Q_PROPERTY(QString source READ source WRITE setSource NOTIFY sourceChanged)
 
     Q_PROPERTY(QFxScaleGrid *scaleGrid READ scaleGrid)
     Q_PROPERTY(bool tile READ isTiled WRITE setTiled)
diff --git a/src/declarative/fx/qfxparticles.cpp b/src/declarative/fx/qfxparticles.cpp
index 309ebe8..16b3570 100644
--- a/src/declarative/fx/qfxparticles.cpp
+++ b/src/declarative/fx/qfxparticles.cpp
@@ -573,10 +573,10 @@ QFxParticles::~QFxParticles()
 */
 
 /*!
-    \property QFxParticles::src
+    \property QFxParticles::source
     \brief the URL of the particle image.
 */
-QString QFxParticles::url() const
+QString QFxParticles::source() const
 {
     Q_D(const QFxParticles);
     return d->source;
@@ -593,7 +593,7 @@ void QFxParticles::imageLoaded()
     update();
 }
 
-void QFxParticles::setUrl(const QString &name)
+void QFxParticles::setSource(const QString &name)
 {
     Q_D(QFxParticles);
 
diff --git a/src/declarative/fx/qfxparticles.h b/src/declarative/fx/qfxparticles.h
index d9c810d..0696e60 100644
--- a/src/declarative/fx/qfxparticles.h
+++ b/src/declarative/fx/qfxparticles.h
@@ -153,7 +153,7 @@ class Q_DECLARATIVE_EXPORT QFxParticles : public QFxItem
 {
     Q_OBJECT
 
-    Q_PROPERTY(QString src READ url WRITE setUrl);
+    Q_PROPERTY(QString source READ source WRITE setSource);
     Q_PROPERTY(int count READ count WRITE setCount);
     Q_PROPERTY(int lifeSpan READ lifeSpan WRITE setLifeSpan);
     Q_PROPERTY(int lifeSpanDeviation READ lifeSpanDeviation WRITE setLifeSpanDeviation);
@@ -172,8 +172,8 @@ public:
     QFxParticles(QFxItem *parent=0);
     ~QFxParticles();
 
-    QString url() const;
-    void setUrl(const QString &);
+    QString source() const;
+    void setSource(const QString &);
 
     int count() const;
     void setCount(int cnt);
diff --git a/src/declarative/fx/qfxwebview.cpp b/src/declarative/fx/qfxwebview.cpp
index b2ad06c..7c05088 100644
--- a/src/declarative/fx/qfxwebview.cpp
+++ b/src/declarative/fx/qfxwebview.cpp
@@ -1018,11 +1018,11 @@ QString QFxWebView::html() const
 void QFxWebView::setHtml(const QString &html, const QUrl &baseUrl)
 {
     Q_D(QFxWebView);
-    d->page->setViewportSize(QSize(
+    page()->setViewportSize(QSize(
         d->idealwidth>0 ? d->idealwidth : width(),
         d->idealheight>0 ? d->idealheight : height()));
     if (isComponentComplete())
-        d->page->mainFrame()->setHtml(html, baseUrl);
+        page()->mainFrame()->setHtml(html, baseUrl);
     else {
         d->pending = d->PendingHtml;
         d->pending_url = baseUrl;
@@ -1033,12 +1033,12 @@ void QFxWebView::setHtml(const QString &html, const QUrl &baseUrl)
 void QFxWebView::setContent(const QByteArray &data, const QString &mimeType, const QUrl &baseUrl)
 {
     Q_D(QFxWebView);
-    d->page->setViewportSize(QSize(
+    page()->setViewportSize(QSize(
         d->idealwidth>0 ? d->idealwidth : width(),
         d->idealheight>0 ? d->idealheight : height()));
 
     if (isComponentComplete())
-        d->page->mainFrame()->setContent(data,mimeType,baseUrl);
+        page()->mainFrame()->setContent(data,mimeType,baseUrl);
     else {
         d->pending = d->PendingContent;
         d->pending_url = baseUrl;
diff --git a/src/declarative/qml/parser/javascript.g b/src/declarative/qml/parser/javascript.g
index 2284e93..f9a2165 100644
--- a/src/declarative/qml/parser/javascript.g
+++ b/src/declarative/qml/parser/javascript.g
@@ -87,7 +87,7 @@
 %nonassoc T_IDENTIFIER T_COLON
 %nonassoc REDUCE_HERE
 
-%start Program
+%start UiProgram
 
 /.
 /****************************************************************************
@@ -286,7 +286,7 @@ public:
     bool parse(JavaScriptEnginePrivate *driver);
 
     JavaScript::AST::UiProgram *ast()
-    { return sym(1).UiProgram; }
+    { return program; }
 
     QList<DiagnosticMessage> diagnosticMessages() const
     { return diagnostic_messages; }
@@ -326,6 +326,8 @@ protected:
     int *state_stack;
     JavaScript::AST::SourceLocation *location_stack;
 
+    JavaScript::AST::UiProgram *program;
+
     // error recovery
     enum { TOKEN_BUFFER_SIZE = 3 };
 
@@ -422,6 +424,7 @@ bool JavaScriptParser::parse(JavaScriptEnginePrivate *driver)
     first_token = last_token = 0;
 
     tos = -1;
+    program = 0;
 
     do {
         if (++tos == stack_size)
@@ -466,11 +469,12 @@ bool JavaScriptParser::parse(JavaScriptEnginePrivate *driver)
 -- Declarative UI
 --------------------------------------------------------------------------------------------------------
 
-Program: UiImportListOpt UiObjectMemberList ;
+UiProgram: UiImportListOpt UiObjectMemberList ;
 /.
 case $rule_number: {
-    sym(1).Node = makeAstNode<AST::UiProgram> (driver->nodePool(), sym(1).UiImportList,
+  program = makeAstNode<AST::UiProgram> (driver->nodePool(), sym(1).UiImportList,
         sym(2).UiObjectMemberList->finish());
+  sym(1).UiProgram = program;    
 } break;
 ./
 
@@ -602,7 +606,7 @@ case $rule_number: {
         sym(4).UiObjectMemberList->finish());
     node->colonToken = loc(2);
     node->lbracketToken = loc(3);
-    node->rbraceToken = loc(5);
+    node->rbracketToken = loc(5);
     sym(1).Node = node;
 }   break;
 ./
@@ -2643,6 +2647,7 @@ PropertyNameAndValueListOpt: PropertyNameAndValueList ;
                 yytoken = *tk;
                 yylval = 0;
                 yylloc = token_buffer[0].loc;
+		yylloc.length = 0;
 
                 first_token = &token_buffer[0];
                 last_token = &token_buffer[2];
@@ -2665,6 +2670,7 @@ PropertyNameAndValueListOpt: PropertyNameAndValueList ;
                 yytoken = tk;
                 yylval = 0;
                 yylloc = token_buffer[0].loc;
+		yylloc.length = 0;
 
                 action = errorState;
                 goto _Lcheck_token;
diff --git a/src/declarative/qml/parser/javascriptast_p.h b/src/declarative/qml/parser/javascriptast_p.h
index dabc0e0..4aa89c9 100644
--- a/src/declarative/qml/parser/javascriptast_p.h
+++ b/src/declarative/qml/parser/javascriptast_p.h
@@ -128,6 +128,11 @@ public:
           startLine(0), startColumn(0)
     { }
 
+    bool isValid() const { return length != 0; }
+
+    quint32 begin() const { return offset; }
+    quint32 end() const { return offset + length; }
+
 // attributes
     // ### encode
     quint32 offset;
@@ -2175,6 +2180,40 @@ public:
     UiObjectMemberList *members;
 };
 
+class UiQualifiedId: public Node
+{
+public:
+    JAVASCRIPT_DECLARE_AST_NODE(UiQualifiedId)
+
+    UiQualifiedId(JavaScriptNameIdImpl *name)
+        : next(this), name(name)
+    { kind = K; }
+
+    UiQualifiedId(UiQualifiedId *previous, JavaScriptNameIdImpl *name)
+        : name(name)
+    {
+        kind = K;
+        next = previous->next;
+        previous->next = this;
+    }
+
+    virtual ~UiQualifiedId() {}
+
+    UiQualifiedId *finish()
+    {
+        UiQualifiedId *head = next;
+        next = 0;
+        return head;
+    }
+
+    virtual void accept0(Visitor *visitor);
+
+// attributes
+    UiQualifiedId *next;
+    JavaScriptNameIdImpl *name;
+    SourceLocation identifierToken;
+};
+
 class UiImport: public Node
 {
 public:
@@ -2227,6 +2266,57 @@ public:
 
 class UiObjectMember: public Node
 {
+public:
+    virtual SourceLocation firstSourceLocation() const = 0;
+    virtual SourceLocation lastSourceLocation() const = 0;
+};
+
+class UiObjectMemberList: public Node
+{
+public:
+    JAVASCRIPT_DECLARE_AST_NODE(UiObjectMemberList)
+
+    UiObjectMemberList(UiObjectMember *member)
+        : next(this), member(member)
+    { kind = K; }
+
+    UiObjectMemberList(UiObjectMemberList *previous, UiObjectMember *member)
+        : member(member)
+    {
+        kind = K;
+        next = previous->next;
+        previous->next = this;
+    }
+
+    virtual void accept0(Visitor *visitor);
+
+    UiObjectMemberList *finish()
+    {
+        UiObjectMemberList *head = next;
+        next = 0;
+        return head;
+    }
+
+// attributes
+    UiObjectMemberList *next;
+    UiObjectMember *member;
+};
+
+class UiObjectInitializer: public Node
+{
+public:
+    JAVASCRIPT_DECLARE_AST_NODE(UiObjectInitializer)
+
+    UiObjectInitializer(UiObjectMemberList *members)
+        : members(members)
+    { kind = K; }
+
+    virtual void accept0(Visitor *visitor);
+
+// attributes
+    SourceLocation lbraceToken;
+    UiObjectMemberList *members;
+    SourceLocation rbraceToken;
 };
 
 class UiPublicMember: public UiObjectMember
@@ -2245,6 +2335,22 @@ public:
         : memberType(memberType), name(name), expression(expression), isDefaultMember(false)
     { kind = K; }
 
+    virtual SourceLocation firstSourceLocation() const
+    { return publicToken; }
+
+    virtual SourceLocation lastSourceLocation() const
+    {
+      if (expression)
+	return expression->lastSourceLocation();
+      else if (colonToken.isValid())
+	return colonToken;
+      else if (identifierToken.isValid())
+	return identifierToken;
+      else if (attributeTypeToken.isValid())
+	return attributeTypeToken;
+      return publicToken;
+    }
+
     virtual void accept0(Visitor *visitor);
 
 // attributes
@@ -2268,29 +2374,23 @@ public:
         : name(name), initializer(initializer)
     { kind = K; }
 
-    virtual void accept0(Visitor *visitor);
-
-// attributes
-    JavaScriptNameIdImpl *name;
-    UiObjectInitializer *initializer;
-    SourceLocation identifierToken;
-};
+    virtual SourceLocation firstSourceLocation() const
+    { return identifierToken; }
 
-class UiObjectInitializer: public Node
-{
-public:
-    JAVASCRIPT_DECLARE_AST_NODE(UiObjectInitializer)
+    virtual SourceLocation lastSourceLocation() const
+    {
+      if (initializer)
+	return initializer->rbraceToken;
 
-    UiObjectInitializer(UiObjectMemberList *members)
-        : members(members)
-    { kind = K; }
+      return identifierToken;
+    }
 
     virtual void accept0(Visitor *visitor);
 
 // attributes
-    SourceLocation lbraceToken;
-    UiObjectMemberList *members;
-    SourceLocation rbraceToken;
+    JavaScriptNameIdImpl *name;
+    UiObjectInitializer *initializer;
+    SourceLocation identifierToken;
 };
 
 class UiSourceElement: public UiObjectMember
@@ -2302,6 +2402,27 @@ public:
         : sourceElement(sourceElement)
     { kind = K; }
 
+    virtual SourceLocation firstSourceLocation() const
+    {
+      if (FunctionDeclaration *funDecl = cast<FunctionDeclaration *>(sourceElement))
+	return funDecl->firstSourceLocation();
+      else if (VariableStatement *varStmt = cast<VariableStatement *>(sourceElement))
+	return varStmt->firstSourceLocation();
+
+      return SourceLocation();
+    }
+
+    virtual SourceLocation lastSourceLocation() const
+    {
+      if (FunctionDeclaration *funDecl = cast<FunctionDeclaration *>(sourceElement))
+	return funDecl->lastSourceLocation();
+      else if (VariableStatement *varStmt = cast<VariableStatement *>(sourceElement))
+	return varStmt->lastSourceLocation();
+
+      return SourceLocation();
+    }
+
+
     virtual void accept0(Visitor *visitor);
 
 // attributes
@@ -2321,6 +2442,12 @@ public:
           initializer(initializer)
     { kind = K; }
 
+    virtual SourceLocation firstSourceLocation() const
+    { return qualifiedId->identifierToken; }
+
+    virtual SourceLocation lastSourceLocation() const
+    { return initializer->rbraceToken; }
+
     virtual void accept0(Visitor *visitor);
 
 // attributes
@@ -2342,6 +2469,12 @@ public:
           statement(statement)
     { kind = K; }
 
+    virtual SourceLocation firstSourceLocation() const
+    { return qualifiedId->identifierToken; }
+
+    virtual SourceLocation lastSourceLocation() const
+    { return statement->lastSourceLocation(); }
+
     virtual void accept0(Visitor *visitor);
 
 // attributes
@@ -2361,6 +2494,12 @@ public:
           members(members)
     { kind = K; }
 
+    virtual SourceLocation firstSourceLocation() const
+    { return lbracketToken; }
+
+    virtual SourceLocation lastSourceLocation() const
+    { return rbracketToken; }
+
     virtual void accept0(Visitor *visitor);
 
 // attributes
@@ -2368,75 +2507,9 @@ public:
     UiObjectMemberList *members;
     SourceLocation colonToken;
     SourceLocation lbracketToken;
-    SourceLocation rbraceToken;
-};
-
-class UiObjectMemberList: public Node
-{
-public:
-    JAVASCRIPT_DECLARE_AST_NODE(UiObjectMemberList)
-
-    UiObjectMemberList(UiObjectMember *member)
-        : next(this), member(member)
-    { kind = K; }
-
-    UiObjectMemberList(UiObjectMemberList *previous, UiObjectMember *member)
-        : member(member)
-    {
-        kind = K;
-        next = previous->next;
-        previous->next = this;
-    }
-
-    virtual void accept0(Visitor *visitor);
-
-    UiObjectMemberList *finish()
-    {
-        UiObjectMemberList *head = next;
-        next = 0;
-        return head;
-    }
-
-// attributes
-    UiObjectMemberList *next;
-    UiObjectMember *member;
-};
-
-class UiQualifiedId: public Node
-{
-public:
-    JAVASCRIPT_DECLARE_AST_NODE(UiQualifiedId)
-
-    UiQualifiedId(JavaScriptNameIdImpl *name)
-        : next(this), name(name)
-    { kind = K; }
-
-    UiQualifiedId(UiQualifiedId *previous, JavaScriptNameIdImpl *name)
-        : name(name)
-    {
-        kind = K;
-        next = previous->next;
-        previous->next = this;
-    }
-
-    virtual ~UiQualifiedId() {}
-
-    UiQualifiedId *finish()
-    {
-        UiQualifiedId *head = next;
-        next = 0;
-        return head;
-    }
-
-    virtual void accept0(Visitor *visitor);
-
-// attributes
-    UiQualifiedId *next;
-    JavaScriptNameIdImpl *name;
-    SourceLocation identifierToken;
+    SourceLocation rbracketToken;
 };
 
-
 } } // namespace AST
 
 
diff --git a/src/declarative/qml/parser/javascriptgrammar.cpp b/src/declarative/qml/parser/javascriptgrammar.cpp
index afbec36..13c3fad 100644
--- a/src/declarative/qml/parser/javascriptgrammar.cpp
+++ b/src/declarative/qml/parser/javascriptgrammar.cpp
@@ -1,45 +1,4 @@
 // This file was generated by qlalr - DO NOT EDIT!
-/****************************************************************************
-**
-** Copyright (C) 2009 Nokia Corporation and/or its subsidiary(-ies).
-** Contact: Qt Software Information (qt-info@nokia.com)
-**
-** This file is part of the QtCore module of the Qt Toolkit.
-**
-** $QT_BEGIN_LICENSE:LGPL$
-** No Commercial Usage
-** This file contains pre-release code and may not be distributed.
-** You may use this file in accordance with the terms and conditions
-** contained in the either Technology Preview License Agreement or the
-** Beta Release License Agreement.
-**
-** GNU Lesser General Public License Usage
-** Alternatively, this file may be used under the terms of the GNU Lesser
-** General Public License version 2.1 as published by the Free Software
-** Foundation and appearing in the file LICENSE.LGPL included in the
-** packaging of this file.  Please review the following information to
-** ensure the GNU Lesser General Public License version 2.1 requirements
-** will be met: http://www.gnu.org/licenses/old-licenses/lgpl-2.1.html.
-**
-** In addition, as a special exception, Nokia gives you certain
-** additional rights. These rights are described in the Nokia Qt LGPL
-** Exception version 1.0, included in the file LGPL_EXCEPTION.txt in this
-** package.
-**
-** GNU General Public License Usage
-** Alternatively, this file may be used under the terms of the GNU
-** General Public License version 3.0 as published by the Free Software
-** Foundation and appearing in the file LICENSE.GPL included in the
-** packaging of this file.  Please review the following information to
-** ensure the GNU General Public License version 3.0 requirements will be
-** met: http://www.gnu.org/copyleft/gpl.html.
-**
-** If you are unsure which license is appropriate for your use, please
-** contact the sales department at qt-sales@nokia.com.
-** $QT_END_LICENSE$
-**
-****************************************************************************/
-
 #include "javascriptgrammar_p.h"
 
 const char *const JavaScriptGrammar::spell [] = {
@@ -118,523 +77,512 @@ const int JavaScriptGrammar:: rhs[] = {
   2, 1, 1, 0, 1, 0, 1, 2};
 
 const int JavaScriptGrammar::action_default [] = {
-  8, 2, 0, 0, 4, 3, 0, 298, 0, 6, 
-  7, 5, 27, 225, 0, 29, 0, 226, 9, 1, 
-  0, 0, 28, 0, 285, 286, 0, 283, 0, 284, 
-  0, 287, 128, 195, 159, 167, 163, 203, 210, 107, 
-  179, 209, 217, 205, 155, 0, 206, 288, 0, 293, 
-  92, 207, 208, 213, 108, 171, 175, 96, 125, 106, 
-  111, 91, 145, 211, 132, 290, 289, 292, 214, 0, 
-  0, 0, 0, 38, 39, 0, 35, 0, 294, 32, 
-  0, 296, 50, 0, 0, 0, 0, 0, 33, 36, 
-  0, 0, 197, 239, 37, 0, 31, 0, 0, 34, 
-  0, 0, 0, 0, 0, 215, 216, 121, 204, 212, 
-  0, 0, 108, 127, 294, 32, 296, 110, 109, 0, 
-  0, 0, 123, 124, 122, 0, 295, 285, 0, 0, 
-  287, 0, 282, 0, 297, 0, 57, 58, 59, 60, 
-  85, 61, 86, 62, 63, 64, 65, 66, 67, 68, 
-  69, 54, 70, 71, 72, 73, 74, 56, 87, 75, 
-  55, 76, 77, 78, 79, 80, 81, 82, 83, 84, 
-  88, 0, 52, 0, 0, 44, 0, 53, 43, 126, 
-  0, 156, 0, 0, 0, 0, 146, 0, 0, 0, 
-  0, 0, 0, 136, 0, 0, 0, 130, 131, 129, 
-  134, 138, 137, 135, 133, 148, 147, 149, 0, 164, 
-  0, 160, 0, 0, 102, 101, 90, 89, 0, 0, 
-  100, 196, 103, 0, 104, 0, 105, 99, 240, 241, 
-  281, 0, 192, 185, 183, 190, 191, 189, 188, 194, 
-  187, 186, 184, 193, 180, 0, 168, 0, 0, 172, 
-  0, 0, 176, 0, 0, 102, 94, 0, 93, 0, 
-  98, 291, 255, 0, 256, 257, 258, 251, 0, 252, 
-  253, 254, 279, 280, 112, 0, 0, 0, 0, 0, 
-  244, 245, 201, 199, 161, 169, 165, 181, 157, 202, 
-  0, 108, 173, 177, 150, 139, 0, 0, 158, 0, 
-  0, 0, 0, 151, 0, 0, 0, 0, 0, 143, 
-  141, 144, 142, 140, 153, 152, 154, 0, 166, 0, 
-  162, 0, 200, 108, 0, 182, 197, 198, 0, 197, 
-  0, 0, 247, 0, 0, 0, 249, 0, 170, 0, 
-  0, 174, 0, 0, 178, 237, 0, 229, 238, 232, 
-  0, 236, 0, 197, 230, 0, 197, 0, 0, 248, 
-  0, 0, 0, 250, 295, 0, 271, 0, 0, 0, 
-  243, 0, 242, 219, 222, 0, 58, 85, 61, 86, 
-  63, 64, 35, 68, 69, 32, 70, 73, 33, 36, 
-  197, 37, 76, 31, 78, 34, 80, 81, 82, 83, 
-  84, 88, 220, 218, 96, 97, 102, 0, 95, 0, 
-  259, 260, 0, 0, 0, 262, 267, 265, 268, 0, 
-  0, 266, 267, 0, 263, 0, 264, 221, 270, 0, 
-  221, 269, 0, 272, 273, 0, 221, 274, 275, 0, 
-  0, 276, 0, 0, 0, 277, 278, 114, 113, 0, 
-  0, 0, 246, 0, 0, 0, 261, 0, 51, 0, 
-  48, 50, 41, 0, 47, 42, 49, 46, 40, 0, 
-  45, 118, 116, 120, 117, 115, 119, 0, 18, 13, 
-  0, 14, 10, 0, 0, 0, 24, 0, 26, 23, 
-  0, 25, 0, 0, 22, 32, 50, 16, 29, 0, 
-  11, 0, 17, 0, 20, 12, 0, 21, 32, 50, 
-  15, 0, 19, 30, 234, 227, 0, 235, 231, 0, 
-  233, 223, 0, 224, 228};
+  8, 2, 0, 4, 3, 0, 0, 0, 6, 7, 
+  5, 27, 225, 0, 29, 0, 226, 9, 1, 0, 
+  0, 28, 0, 285, 286, 0, 283, 0, 284, 0, 
+  287, 128, 195, 159, 167, 163, 203, 210, 107, 179, 
+  209, 217, 205, 155, 0, 206, 288, 0, 293, 92, 
+  207, 208, 213, 108, 171, 175, 96, 125, 106, 111, 
+  91, 145, 211, 132, 290, 289, 292, 214, 0, 0, 
+  0, 0, 38, 39, 0, 35, 0, 294, 32, 0, 
+  296, 50, 0, 0, 0, 0, 0, 33, 36, 0, 
+  0, 197, 239, 37, 0, 31, 0, 0, 34, 0, 
+  0, 0, 0, 0, 215, 216, 121, 204, 212, 0, 
+  0, 108, 127, 294, 32, 296, 110, 109, 0, 0, 
+  0, 123, 124, 122, 0, 295, 285, 0, 0, 287, 
+  0, 282, 0, 297, 0, 57, 58, 59, 60, 85, 
+  61, 86, 62, 63, 64, 65, 66, 67, 68, 69, 
+  54, 70, 71, 72, 73, 74, 56, 87, 75, 55, 
+  76, 77, 78, 79, 80, 81, 82, 83, 84, 88, 
+  0, 52, 0, 0, 44, 0, 53, 43, 126, 0, 
+  156, 0, 0, 0, 0, 146, 0, 0, 0, 0, 
+  0, 0, 136, 0, 0, 0, 130, 131, 129, 134, 
+  138, 137, 135, 133, 148, 147, 149, 0, 164, 0, 
+  160, 0, 0, 102, 101, 90, 89, 0, 0, 100, 
+  196, 103, 0, 104, 0, 105, 99, 240, 241, 281, 
+  0, 192, 185, 183, 190, 191, 189, 188, 194, 187, 
+  186, 184, 193, 180, 0, 168, 0, 0, 172, 0, 
+  0, 176, 0, 0, 102, 94, 0, 93, 0, 98, 
+  291, 255, 0, 256, 257, 258, 251, 0, 252, 253, 
+  254, 279, 280, 112, 0, 0, 0, 0, 0, 244, 
+  245, 201, 199, 161, 169, 165, 181, 157, 202, 0, 
+  108, 173, 177, 150, 139, 0, 0, 158, 0, 0, 
+  0, 0, 151, 0, 0, 0, 0, 0, 143, 141, 
+  144, 142, 140, 153, 152, 154, 0, 166, 0, 162, 
+  0, 200, 108, 0, 182, 197, 198, 0, 197, 0, 
+  0, 247, 0, 0, 0, 249, 0, 170, 0, 0, 
+  174, 0, 0, 178, 237, 0, 229, 238, 232, 0, 
+  236, 0, 197, 230, 0, 197, 0, 0, 248, 0, 
+  0, 0, 250, 295, 0, 271, 0, 0, 0, 243, 
+  0, 242, 219, 222, 0, 58, 85, 61, 86, 63, 
+  64, 35, 68, 69, 32, 70, 73, 33, 36, 197, 
+  37, 76, 31, 78, 34, 80, 81, 82, 83, 84, 
+  88, 220, 218, 96, 97, 102, 0, 95, 0, 259, 
+  260, 0, 0, 0, 262, 267, 265, 268, 0, 0, 
+  266, 267, 0, 263, 0, 264, 221, 270, 0, 221, 
+  269, 0, 272, 273, 0, 221, 274, 275, 0, 0, 
+  276, 0, 0, 0, 277, 278, 114, 113, 0, 0, 
+  0, 246, 0, 0, 0, 261, 0, 51, 0, 48, 
+  50, 41, 0, 47, 42, 49, 46, 40, 0, 45, 
+  118, 116, 120, 117, 115, 119, 0, 18, 13, 0, 
+  14, 10, 0, 0, 0, 24, 0, 26, 23, 0, 
+  25, 0, 0, 22, 32, 50, 16, 29, 0, 11, 
+  0, 17, 0, 20, 12, 0, 21, 32, 50, 15, 
+  0, 19, 30, 234, 227, 0, 235, 231, 0, 233, 
+  223, 0, 224, 228, 298};
 
 const int JavaScriptGrammar::goto_default [] = {
-  2, 6, 19, 1, 5, 4, 18, 499, 500, 478, 
-  20, 373, 45, 12, 108, 61, 459, 457, 135, 134, 
-  33, 458, 133, 136, 215, 57, 50, 223, 59, 39, 
-  222, 54, 60, 107, 58, 32, 64, 62, 294, 44, 
-  288, 34, 284, 36, 286, 35, 285, 55, 292, 56, 
-  293, 40, 287, 283, 324, 409, 289, 290, 37, 43, 
-  46, 51, 52, 41, 38, 63, 109, 53, 68, 105, 
-  106, 42, 375, 374, 21, 516, 515, 346, 347, 518, 
-  349, 517, 348, 415, 419, 422, 418, 417, 437, 438, 
-  26, 48, 125, 25, 47, 66, 65, 0};
+  6, 5, 18, 1, 4, 3, 17, 498, 499, 477, 
+  19, 372, 44, 11, 107, 60, 458, 456, 134, 133, 
+  32, 457, 132, 135, 214, 56, 49, 222, 58, 38, 
+  221, 53, 59, 106, 57, 31, 63, 61, 293, 43, 
+  287, 33, 283, 35, 285, 34, 284, 54, 291, 55, 
+  292, 39, 286, 282, 323, 408, 288, 289, 36, 42, 
+  45, 50, 51, 40, 37, 62, 108, 52, 67, 104, 
+  105, 41, 374, 373, 20, 515, 514, 345, 346, 517, 
+  348, 516, 347, 414, 418, 421, 417, 416, 436, 437, 
+  25, 47, 124, 24, 46, 65, 64, 0};
 
 const int JavaScriptGrammar::action_index [] = {
-  -8, -88, 76, 23, -88, 35, 267, -88, 62, -88, 
-  -88, -88, -88, -88, 49, 58, 122, -88, -88, 257, 
-  124, -17, -88, -22, -16, 12, -39, -88, 0, -88, 
-  -2, 1331, 132, -88, 8, -47, -69, -88, -88, 209, 
-  -88, -88, -88, -88, 255, 177, -88, -88, -10, -88, 
-  -88, -88, -88, -88, 522, 45, 92, 236, 224, -88, 
-  -88, -88, 437, -88, 215, -88, 1331, -88, -88, 164, 
-  206, 107, 599, -88, -88, 1247, -88, 78, 77, 87, 
-  69, 1583, 60, 599, 599, 599, 398, 599, -88, -88, 
-  599, 599, 599, -88, -88, 80, -88, 599, 599, -88, 
-  63, 599, 599, 66, 59, -88, -88, -88, -88, -88, 
-  599, 599, 123, 174, -1, -88, 1079, -88, -88, 599, 
-  599, 599, -88, -88, -88, 16, -88, -24, -54, -11, 
-  1331, 18, -88, 86, 84, 20, -88, -88, -88, -88, 
+  -18, -88, 35, -88, 13, 262, 83, 118, -88, -88, 
+  -88, -88, -88, 76, 71, 162, -88, -88, 249, 125, 
+  46, -88, 42, 41, 58, 17, -88, 52, -88, 54, 
+  1419, 126, -88, 156, 31, 10, -88, -88, 228, -88, 
+  -88, -88, -88, 201, 199, -88, -88, 55, -88, -88, 
+  -88, -88, -88, 408, 72, 79, 203, 188, -88, -88, 
+  -88, 365, -88, 300, -88, 1419, -88, -88, 197, 204, 
+  80, 603, -88, -88, 1335, -88, 48, 33, 61, 37, 
+  1587, 64, 603, 603, 603, 441, 603, -88, -88, 603, 
+  603, 603, -88, -88, 44, -88, 603, 603, -88, 36, 
+  603, 603, 73, 59, -88, -88, -88, -88, -88, 603, 
+  603, 78, 185, 62, -88, 1083, -88, -88, 603, 603, 
+  603, -88, -88, -88, 65, -88, 74, 32, 60, 1419, 
+  57, -88, 81, 77, 75, -88, -88, -88, -88, -88, 
   -88, -88, -88, -88, -88, -88, -88, -88, -88, -88, 
   -88, -88, -88, -88, -88, -88, -88, -88, -88, -88, 
   -88, -88, -88, -88, -88, -88, -88, -88, -88, -88, 
-  -88, 599, -88, 1163, 52, -88, 599, -88, -88, 191, 
-  599, 266, 599, 599, 599, 599, 329, 599, 599, 599, 
-  599, 599, 599, 157, 599, 599, 599, 120, 103, 90, 
-  196, 192, 175, 163, 195, 345, 366, 312, 599, 22, 
-  599, 73, 995, 599, 599, -88, -88, -88, 148, 599, 
-  -88, -88, 64, 48, -88, 599, -88, -88, -88, -88, 
-  -88, 599, -88, -88, -88, -88, -88, -88, -88, -88, 
-  -88, -88, -88, -88, -88, 599, 34, 599, 599, 171, 
-  74, 599, -88, 995, 599, 599, -88, 154, -88, 40, 
-  -88, -88, -88, 116, -88, -88, -88, -88, 88, -88, 
-  -88, -88, -88, -88, -88, 37, 65, 599, 129, 97, 
-  -88, -88, 676, -88, 53, -33, -59, -88, 258, 11, 
-  -43, 478, 85, 113, 282, 225, -13, 599, 247, 599, 
-  599, 599, 599, 286, 599, 599, 599, 599, 599, 219, 
-  222, 231, 307, 237, 372, 372, 372, 599, -46, 599, 
-  24, 599, -88, 522, 599, -88, 599, 15, -50, 599, 
-  -60, 1247, -88, 599, 156, 1247, -88, 599, -44, 599, 
-  599, 85, 1, 599, -88, -14, 119, -29, -88, -88, 
-  599, -88, 6, 599, -88, -3, 599, -5, 1247, -88, 
-  599, 101, 1247, -88, 26, 1247, -88, 599, 95, 1247, 
-  51, 1247, -88, -88, 1247, 14, 146, 31, 150, 72, 
-  599, 1247, 57, 27, 81, 54, 29, 406, 44, 43, 
-  834, 30, 7, 32, 599, 25, 5, 599, 4, 599, 
-  10, 13, -88, -88, 244, -88, 599, -12, -88, 83, 
-  -88, -88, 599, 139, 9, -88, 36, -88, 21, 126, 
-  599, -88, 39, 33, -88, -21, -88, 1247, -88, 118, 
-  1247, -88, 221, -88, -88, 109, 1247, 46, -88, 17, 
-  3, -88, 28, -4, -9, -88, -88, -88, -88, 599, 
-  145, 1247, -88, 599, 149, 1247, -88, 162, 2, 753, 
-  -88, 19, -88, 911, -88, -88, -88, -88, -88, 127, 
-  -88, -88, -88, -88, -88, -88, -88, 302, -88, -88, 
-  291, -88, -88, 41, 42, 61, 79, 599, 75, 82, 
-  599, 71, 1499, 56, -88, 115, 111, -88, 47, 110, 
-  -88, 106, -88, 70, -88, -88, 1415, -88, 105, 99, 
-  -88, 96, -88, -88, 67, -88, 166, -88, -88, 599, 
-  -88, -88, 68, -88, -88, 
+  603, -88, 1167, 56, -88, 603, -88, -88, 166, 603, 
+  235, 603, 603, 603, 603, 365, 603, 603, 603, 603, 
+  603, 603, 163, 603, 603, 603, 94, 96, 84, 300, 
+  300, 300, 300, 190, 365, 365, 365, 603, 10, 603, 
+  156, 999, 603, 603, -88, -88, -88, 131, 603, -88, 
+  -88, 68, 30, -88, 603, -88, -88, -88, -88, -88, 
+  603, -88, -88, -88, -88, -88, -88, -88, -88, -88, 
+  -88, -88, -88, -88, 603, 34, 603, 603, 63, 82, 
+  603, -88, 999, 603, 603, -88, 148, -88, 67, -88, 
+  -88, -88, 124, -88, -88, -88, -88, 120, -88, -88, 
+  -88, -88, -88, -88, 70, 66, 603, 111, 122, -88, 
+  -88, 757, -88, 21, -24, -53, -88, 222, 5, -51, 
+  526, 69, 108, 266, 300, -17, 603, 251, 603, 603, 
+  603, 603, 250, 603, 603, 603, 603, 603, 211, 168, 
+  187, 167, 171, 276, 291, 270, 603, -76, 603, 1, 
+  603, -88, 352, 603, -88, 603, -1, -8, 603, 4, 
+  1335, -88, 603, 114, 1335, -88, 603, -20, 603, 603, 
+  69, 24, 603, -88, 18, 89, 9, -88, -88, 603, 
+  -88, 15, 603, -88, -19, 603, -21, 1335, -88, 603, 
+  86, 1335, -88, 2, 1335, -88, 603, 88, 1335, 27, 
+  1335, -88, -88, 1335, -22, 173, 3, 170, 92, 603, 
+  1335, 49, 19, 85, 53, 25, 441, 47, 38, 915, 
+  39, 11, 43, 603, 45, -6, 603, 0, 603, -32, 
+  -27, -88, -88, 174, -88, 603, -43, -88, 90, -88, 
+  -88, 603, 100, -25, -88, 6, -88, 20, 106, 603, 
+  -88, 14, 7, -88, -39, -88, 1335, -88, 99, 1335, 
+  -88, 160, -88, -88, 93, 1335, -2, -88, -15, -13, 
+  -88, -23, -57, -28, -88, -88, -88, -88, 603, 110, 
+  1335, -88, 603, 109, 1335, -88, 103, 50, 834, -88, 
+  40, -88, 680, -88, -88, -88, -88, -88, 107, -88, 
+  -88, -88, -88, -88, -88, -88, 287, -88, -88, 295, 
+  -88, -88, 12, 8, -3, 23, 603, 26, 29, 603, 
+  51, 1503, 28, -88, 130, 147, -88, 16, 117, -88, 
+  237, -88, 22, -88, -88, 1251, -88, 116, 135, -88, 
+  157, -88, -88, -16, -88, 195, -88, -88, 603, -88, 
+  -88, -14, -88, -88, -88, 
 
-  -98, -98, -98, -98, -98, 2, 9, -98, -98, -98, 
-  -98, -98, -98, -98, -98, -98, -98, -98, -98, 70, 
+  -98, -98, -98, -98, 2, -10, -98, -98, -98, -98, 
+  -98, -98, -98, -98, -98, -98, -98, -98, 50, -98, 
+  -98, -98, -98, -98, -98, -98, -98, -98, -98, -98, 
+  57, -98, -98, -98, -98, -98, -98, -98, -98, -98, 
   -98, -98, -98, -98, -98, -98, -98, -98, -98, -98, 
-  -98, 157, -98, -98, -98, -98, -98, -98, -98, -98, 
+  -98, -98, -98, -36, -98, -98, -98, -98, -98, -98, 
+  -98, -98, -98, -98, -98, 191, -98, -98, -98, -98, 
+  -98, 68, -98, -98, 67, -98, -98, -98, -98, -98, 
+  -98, -98, 41, 114, 150, 232, 153, -98, -98, 146, 
+  149, 47, -98, -98, -98, -98, 25, 89, -98, -29, 
+  85, 80, -98, -98, -98, -98, -98, -98, -98, 103, 
+  108, -98, -98, -98, -98, -98, -98, -98, 105, 100, 
+  96, -98, -98, -98, -98, -98, -68, -98, -98, 176, 
   -98, -98, -98, -98, -98, -98, -98, -98, -98, -98, 
-  -98, -98, -98, -98, -39, -98, -98, -98, -98, -98, 
-  -98, -98, -98, -98, -98, -98, 258, -98, -98, -98, 
-  -98, -98, 100, -98, -98, 15, -98, -98, -98, -98, 
-  -98, -98, -98, 51, 81, 90, 91, 103, -98, -98, 
-  76, 60, 44, -98, -98, -98, -98, 50, 114, -98, 
-  -13, 133, 125, -98, -98, -98, -98, -98, -98, -98, 
-  171, 128, -98, -98, -98, -98, -98, -98, -98, 107, 
-  120, 117, -98, -98, -98, -98, -98, -61, -98, -98, 
-  173, -98, -98, -98, -98, -98, -98, -98, -98, -98, 
   -98, -98, -98, -98, -98, -98, -98, -98, -98, -98, 
   -98, -98, -98, -98, -98, -98, -98, -98, -98, -98, 
   -98, -98, -98, -98, -98, -98, -98, -98, -98, -98, 
-  -98, 34, -98, 36, -98, -98, 40, -98, -98, -98, 
-  63, -98, 55, 64, 66, 68, -98, 54, 42, 43, 
-  46, 52, 93, -98, 97, 95, 69, -98, -98, -98, 
-  -98, -98, -98, -98, -98, -98, -98, -98, 75, -98, 
-  79, -98, 19, 32, 16, -98, -98, -98, -98, 12, 
-  -98, -98, -98, -98, -98, 27, -98, -98, -98, -98, 
-  -98, 33, -98, -98, -98, -98, -98, -98, -98, -98, 
-  -98, -98, -98, -98, -98, 80, -98, 96, 35, -98, 
-  -98, 39, -98, 47, 37, 48, -98, -98, -98, -98, 
+  -12, -98, -13, -98, -98, 7, -98, -98, -98, 118, 
+  -98, 117, 119, 141, 121, -98, 128, 130, 124, 140, 
+  83, 51, -98, 48, 62, 55, -98, -98, -98, -98, 
+  -98, -98, -98, -98, -98, -98, -98, 60, -98, 54, 
+  -98, 31, 37, 43, -98, -98, -98, -98, 22, -98, 
+  -98, -98, -98, -98, 42, -98, -98, -98, -98, -98, 
+  45, -98, -98, -98, -98, -98, -98, -98, -98, -98, 
+  -98, -98, -98, -98, 61, -98, 58, -20, -98, -98, 
+  -7, -98, 52, 4, 53, -98, -98, -98, -98, -98, 
   -98, -98, -98, -98, -98, -98, -98, -98, -98, -98, 
-  -98, -98, -98, -98, -98, -98, -98, 31, -98, -98, 
-  -98, -98, 86, -98, -98, -98, -98, -98, -98, -98, 
-  -98, -98, -98, -98, -98, -98, -98, 190, -98, 176, 
-  172, 180, 168, -98, 124, 136, 138, 106, 121, -98, 
-  -98, -98, -98, -98, -98, -98, -98, 152, -98, 159, 
-  -98, 186, -98, -98, 192, -98, 134, -98, -98, 137, 
-  -98, 30, -98, 18, -98, 22, -98, 196, -98, 188, 
-  184, -98, -98, 145, -98, -98, -98, -98, -98, -98, 
-  144, -98, -51, 127, -98, -98, 123, -98, 23, -98, 
-  25, -98, 28, -98, -98, 29, -98, 26, -98, 24, 
-  -98, 17, -98, -98, 41, -98, -98, -98, -98, -98, 
-  130, 53, -98, -98, -98, -98, -98, 116, -98, -98, 
-  45, -98, -98, -98, 49, -98, -12, 65, -98, 56, 
-  -98, -98, -98, -98, -98, -98, 88, -98, -98, -98, 
-  -98, -98, 38, -98, -98, -98, -98, -98, -81, -98, 
-  -7, -98, -83, -98, -98, -98, -98, -72, -98, -98, 
-  -64, -98, -98, -98, -98, -98, -98, -70, -98, -98, 
-  -42, -98, -98, -98, -33, -98, -98, -98, -98, -2, 
-  -98, 0, -98, 5, -98, 7, -98, -98, -98, -6, 
-  -98, 6, -98, 11, -98, -98, -98, -98, -98, -98, 
-  -98, -98, -98, -98, -98, -98, -98, 163, -98, -98, 
-  165, -98, -98, -98, -98, -98, -98, -8, -98, -98, 
-  8, -98, 10, -98, -98, 4, -1, -98, 3, -98, 
-  -98, -98, -98, 57, -98, -98, 13, -98, 104, 59, 
-  -98, -98, -98, -98, -98, -98, -98, -98, -98, -17, 
-  -98, -98, -74, -98, -98};
+  -98, -98, -98, -98, -98, -98, 9, -98, -98, -98, 
+  -98, 138, -98, -98, -98, -98, -98, -98, -98, -98, 
+  -98, -98, -98, -98, -98, -98, 194, -98, 167, 170, 
+  180, 186, -98, 73, 76, 90, 92, 99, -98, -98, 
+  -98, -98, -98, -98, -98, -98, 196, -98, 184, -98, 
+  161, -98, -98, 160, -98, 112, -98, -98, 120, -98, 
+  6, -98, 12, -98, 17, -98, 163, -98, 164, 157, 
+  -98, -98, 154, -98, -98, -98, -98, -98, -98, 192, 
+  -98, -28, 113, -98, -98, 86, -98, 49, -98, 20, 
+  -98, 28, -98, -98, 35, -98, 36, -98, 24, -98, 
+  30, -98, -98, 29, -98, -98, -98, -98, -98, 77, 
+  67, -98, -98, -98, -98, -98, 115, -98, -98, 19, 
+  -98, -98, -98, 26, -98, -24, 84, -98, 69, -98, 
+  -98, -98, -98, -98, -98, 126, -98, -98, -98, -98, 
+  -98, 39, -98, -98, -98, -98, -98, -42, -98, 18, 
+  -98, -82, -98, -98, -98, -98, -67, -98, -98, -71, 
+  -98, -98, -98, -98, -98, -98, -86, -98, -98, -35, 
+  -98, -98, -98, -33, -98, -98, -98, -98, 14, -98, 
+  8, -98, -2, -98, 1, -98, -98, -98, -9, -98, 
+  -1, -98, -6, -98, -98, -98, -98, -98, -98, -98, 
+  -98, -98, -98, -98, -98, -98, 82, -98, -98, 159, 
+  -98, -98, -98, -98, -98, -98, 40, -98, -98, 46, 
+  -98, 44, -98, -98, 38, 23, -98, 27, -98, -98, 
+  -98, -98, 64, -98, -98, 33, -98, 34, 59, -98, 
+  -98, -98, -98, -98, -98, -98, -98, -98, -14, -98, 
+  -98, -56, -98, -98, -98};
 
 const int JavaScriptGrammar::action_info [] = {
-  331, 208, 360, 350, 317, 27, 129, 210, 343, 180, 
-  466, 329, 514, 27, 24, 317, 345, 319, 326, 321, 
-  28, 30, 130, 219, 436, 297, 420, 460, 126, 29, 
-  319, 31, -79, -226, 426, 345, 436, -55, 436, -77, 
-  427, 420, 416, 412, 420, 230, 449, 245, 408, 453, 
-  -56, -74, 127, 442, 297, 358, 444, 443, 356, 176, 
-  -225, -54, 24, 282, -66, 367, 440, 371, 460, 403, 
-  485, 489, 225, 132, 180, 178, 7, 3, 23, 219, 
-  477, 251, 208, 219, 519, 513, 487, 337, 8, 490, 
-  486, 477, 173, 171, 365, 453, 436, 514, 210, 498, 
-  260, 277, 449, 219, 503, 367, 364, 460, 227, 219, 
-  126, 276, 365, 506, 282, 439, 412, -294, 503, 460, 
-  3, 493, 365, 10, 9, 430, 219, 352, 498, 440, 
-  110, 492, 483, 273, 272, 219, 423, 219, 477, 493, 
-  498, 111, 247, 110, 411, 410, 248, 219, 477, 271, 
-  270, 484, 512, 219, 111, 369, 219, 219, 281, 280, 
-  110, 362, 219, 339, 219, 117, 504, 340, 273, 272, 
-  461, 111, 110, 245, 522, 263, 118, 266, 265, 268, 
-  353, 424, 194, 111, 195, 219, 119, 470, 194, 279, 
-  195, 0, 0, 263, 0, 196, 0, 0, 0, 414, 
-  194, 196, 195, 119, 220, 451, 0, 264, 262, 455, 
-  258, 269, 267, 196, 0, 0, 335, 194, 462, 195, 
-  194, 194, 195, 195, 212, 264, 262, 523, 521, 219, 
-  196, 120, 0, 196, 196, 268, 119, 121, 229, 228, 
-  194, 0, 195, 213, 194, 214, 195, 194, 120, 195, 
-  194, 253, 195, 196, 121, 0, 194, 196, 195, 253, 
-  196, 0, 194, 196, 195, 299, 300, 269, 267, 196, 
-  254, 0, 255, 182, 183, 196, 299, 300, 254, 14, 
-  406, 120, 434, 433, 182, 183, 15, 121, 0, 14, 
-  0, 0, 301, 302, 0, 0, 15, 0, 0, 0, 
-  184, 185, 0, 301, 302, 304, 305, 0, 0, 304, 
-  305, 184, 185, 14, 306, 0, 0, 307, 306, 308, 
-  15, 307, 0, 308, 14, 0, 0, 0, 0, 17, 
-  0, 15, 194, 0, 195, 187, 188, 0, 13, 17, 
-  0, 16, 0, 189, 190, 196, 481, 191, 13, 192, 
-  0, 16, 187, 188, 0, 0, 0, 479, 0, 0, 
-  189, 190, 0, 17, 191, 0, 192, 0, 187, 188, 
-  0, 0, 13, 0, 17, 16, 189, 190, 0, 0, 
-  191, 0, 192, 13, 0, 0, 16, 0, 0, 187, 
-  188, 0, 0, 0, 0, 304, 305, 189, 190, 0, 
-  0, 191, 0, 192, 306, 0, 0, 307, 0, 308, 
-  73, 74, 0, 0, 0, 0, 0, 0, 73, 74, 
-  114, 0, 0, 0, 0, 0, 0, 115, 114, 0, 
-  0, 116, 82, 0, 83, 115, 0, 0, 0, 116, 
-  82, 86, 83, 0, 0, 89, 0, 0, 0, 86, 
-  0, 0, 0, 89, 0, 0, 0, 0, 0, 0, 
-  187, 188, 0, 94, 0, 96, 0, 0, 189, 190, 
-  0, 94, 191, 96, 192, 0, 88, 99, 76, 0, 
-  0, 232, 0, 0, 88, 99, 76, 0, 0, 0, 
-  0, 233, 0, 0, 0, 234, 0, 0, 0, 0, 
-  0, 0, 0, 0, 235, 0, 236, 0, 0, 333, 
-  0, 0, 0, 0, 0, 0, 0, 237, 0, 238, 
-  117, 0, 0, 0, 0, 232, 0, 239, 0, 0, 
-  240, 118, 0, 0, 0, 233, 241, 0, 0, 234, 
-  0, 0, 242, 0, 0, 0, 0, 0, 235, 0, 
-  236, 0, 0, 0, 0, 243, 0, 0, 0, 0, 
-  0, 237, 0, 238, 117, 0, 0, 0, 0, 0, 
-  0, 239, 0, 0, 240, 118, 0, 0, 0, 0, 
-  241, 0, 0, 0, 0, 0, 242, 0, 0, 0, 
-  0, 0, 0, 0, 0, 0, 0, 0, 0, 243, 
+  318, 518, 296, 443, 448, 435, 442, 218, 415, 452, 
+  325, 419, 344, 320, 426, 513, 425, 407, 439, 419, 
+  435, 441, 296, 318, 316, 419, 485, 435, 316, -226, 
+  486, 342, -225, 402, 218, 349, 489, 488, 23, 357, 
+  359, 484, 355, 370, 344, -56, -55, 411, 459, 476, 
+  -77, 497, -79, 328, -74, 281, -66, 512, 465, 218, 
+  -54, 366, 363, 175, 330, 244, 27, 2, 364, 435, 
+  26, 336, 459, 366, 244, 513, 224, 29, 23, 207, 
+  411, 28, 207, 524, 281, 172, 209, 30, 170, 250, 
+  226, 125, 128, 129, 218, 452, 218, 351, 2, 438, 
+  7, 126, 276, 26, 476, 22, 429, 218, 218, 448, 
+  229, 460, 131, 439, 125, 218, 422, 218, 218, 218, 
+  116, -294, 218, 364, 109, 502, 0, 259, 0, 246, 
+  177, 117, 491, 247, 109, 110, 109, 364, 0, 218, 
+  492, 272, 271, 459, 275, 110, 361, 110, 368, 476, 
+  352, 410, 409, 272, 271, 459, 218, 179, 338, 461, 
+  413, 423, 339, 476, 497, 502, 109, 469, 218, 454, 
+  450, 278, 482, 503, 334, 0, 497, 110, 118, 9, 
+  8, 270, 269, 280, 279, 265, 264, 219, 193, 252, 
+  194, 483, 193, 193, 194, 194, 193, 118, 194, 267, 
+  118, 195, 262, 521, 257, 195, 195, 218, 253, 195, 
+  405, 0, 193, 511, 194, 193, 0, 194, 252, 181, 
+  182, 433, 432, 119, 0, 195, 262, 0, 195, 120, 
+  0, 268, 266, 267, 263, 261, 193, 253, 194, 254, 
+  298, 299, 119, 211, 505, 119, 183, 184, 120, 195, 
+  0, 120, 492, 181, 182, 0, 522, 520, 263, 261, 
+  228, 227, 212, 0, 213, 268, 266, 300, 301, 298, 
+  299, 13, 0, 303, 304, 0, 0, 0, 14, 0, 
+  183, 184, 305, 0, 13, 306, 0, 307, 0, 303, 
+  304, 14, 0, 303, 304, 0, 300, 301, 305, 303, 
+  304, 306, 305, 307, 0, 306, 0, 307, 305, 13, 
+  0, 306, 0, 307, 303, 304, 14, 13, 0, 0, 
+  0, 16, 0, 305, 14, 193, 306, 194, 307, 0, 
+  12, 0, 0, 15, 16, 0, 0, 0, 195, 0, 
+  0, 0, 478, 12, 0, 0, 15, 0, 0, 0, 
+  480, 0, 0, 0, 0, 231, 0, 0, 0, 16, 
+  0, 0, 0, 0, 0, 232, 0, 16, 12, 233, 
+  0, 15, 0, 0, 0, 0, 12, 0, 234, 15, 
+  235, 0, 0, 0, 0, 0, 0, 0, 186, 187, 
+  0, 236, 0, 237, 116, 0, 188, 189, 0, 0, 
+  190, 238, 191, 0, 239, 117, 0, 0, 0, 0, 
+  240, 231, 0, 0, 0, 0, 241, 0, 0, 0, 
+  0, 232, 0, 0, 0, 233, 0, 0, 0, 242, 
+  0, 0, 0, 0, 234, 0, 235, 0, 0, 0, 
+  0, 0, 0, 0, 0, 0, 0, 236, 0, 237, 
+  116, 0, 0, 72, 73, 0, 0, 238, 0, 0, 
+  239, 117, 0, 113, 0, 0, 240, 0, 0, 0, 
+  114, 0, 241, 0, 115, 81, 0, 82, 0, 0, 
+  0, 0, 0, 0, 85, 242, 0, 0, 88, 0, 
   0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 
-  72, 73, 74, 0, 0, 0, 0, 0, 0, 0, 
-  0, 114, 0, 0, 0, 0, 0, 0, 115, 0, 
-  0, 0, 116, 82, 0, 83, 0, 0, 0, 84, 
-  0, 85, 86, 87, 0, 0, 89, 0, 0, 0, 
-  90, 0, 91, 0, 0, 0, 0, 0, 0, 0, 
-  0, 0, 0, 0, 94, 0, 96, 0, 98, 0, 
-  101, 0, 102, 0, 0, 0, 0, 88, 99, 76, 
-  0, 0, 0, 0, 0, 0, 0, 72, 73, 74, 
-  0, 0, 0, 0, 0, 0, 0, 0, 114, 0, 
-  0, 0, 0, 0, 0, 115, 0, 0, 0, 116, 
-  82, 0, 83, 0, 0, 0, 84, 0, 85, 86, 
-  87, 0, 0, 89, 0, 0, 0, 90, 0, 91, 
-  0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 
-  0, 94, 0, 96, 0, 98, 0, 101, 296, 102, 
-  0, 0, 0, 0, 88, 99, 76, 0, 0, 0, 
-  0, 0, 0, 0, 72, 73, 74, 0, 0, 0, 
-  0, 0, 0, 0, 0, 114, 0, 0, 0, 0, 
-  0, 0, 115, 0, 0, 0, 116, 82, 0, 83, 
-  0, 0, 0, 84, 0, 85, 86, 87, 0, 0, 
-  89, 0, 0, 0, 90, 0, 91, 0, 0, 468, 
-  0, 0, 0, 0, 0, 0, 0, 0, 94, 0, 
-  96, 0, 98, 0, 101, 0, 102, 0, 0, 0, 
-  0, 88, 99, 76, 0, 0, 0, 0, 0, 0, 
-  0, -75, 0, 0, 0, 72, 73, 74, 0, 0, 
+  0, 0, 0, 0, 0, 0, 93, 0, 95, 0, 
+  0, 0, 0, 0, 0, 0, 0, 0, 0, 87, 
+  98, 75, 0, 0, 0, 0, 0, 0, 0, 231, 
+  0, 0, 0, 0, 0, 0, 0, 0, 0, 232, 
+  0, 0, 0, 233, 0, 0, 0, 0, 0, 0, 
+  0, 0, 234, 0, 235, 0, 0, 332, 0, 0, 
+  0, 0, 0, 0, 0, 236, 0, 237, 116, 0, 
+  0, 0, 0, 0, 0, 238, 0, 0, 239, 117, 
+  0, 0, 0, 0, 240, 0, 0, 0, 0, 0, 
+  241, 0, 0, 0, 0, 0, 0, 0, 0, 0, 
+  0, 0, 0, 242, 0, 0, 0, 0, 0, 0, 
+  0, 0, 0, 0, 71, 72, 73, 0, 0, 0, 
+  0, 0, 0, 0, 0, 113, 0, 0, 0, 0, 
+  0, 0, 114, 0, 0, 0, 115, 81, 0, 82, 
+  0, 0, 0, 83, 0, 84, 85, 86, 0, 0, 
+  88, 0, 0, 0, 89, 0, 90, 0, 0, 0, 
+  0, 0, 0, 0, 0, 0, 0, 0, 93, 0, 
+  95, 0, 97, 0, 100, 0, 101, 0, 0, 0, 
+  0, 87, 98, 75, 0, 0, 0, 0, 0, 0, 
+  0, 71, 72, 73, 0, 0, 0, 0, 0, 0, 
+  0, 0, 113, 0, 0, 0, 0, 0, 0, 114, 
+  0, 0, 0, 115, 81, 0, 82, 0, 0, 0, 
+  83, 0, 84, 85, 86, 0, 0, 88, 0, 0, 
+  0, 89, 0, 90, 0, 0, 464, 0, 0, 0, 
+  0, 0, 0, 0, 0, 93, 0, 95, 0, 97, 
+  0, 100, 0, 101, 0, 0, 0, 0, 87, 98, 
+  75, 0, 0, 0, 0, 0, 0, 0, 71, 72, 
+  73, 0, 0, 0, 0, 0, 0, 0, 0, 113, 
   0, 0, 0, 0, 0, 0, 114, 0, 0, 0, 
-  0, 0, 0, 115, 0, 0, 0, 116, 82, 0, 
-  83, 0, 0, 0, 84, 0, 85, 86, 87, 0, 
-  0, 89, 0, 0, 0, 90, 0, 91, 0, 0, 
-  0, 0, 0, 0, 0, 0, 0, 0, 0, 94, 
-  0, 96, 0, 98, 0, 101, 0, 102, 0, 0, 
-  0, 0, 88, 99, 76, 0, 0, 0, 0, 0, 
-  0, 0, 72, 73, 74, 0, 0, 0, 0, 0, 
-  0, 0, 0, 114, 0, 0, 0, 0, 0, 0, 
-  115, 0, 0, 0, 116, 82, 0, 83, 0, 0, 
-  0, 84, 0, 85, 86, 87, 0, 0, 89, 0, 
-  0, 0, 90, 0, 91, 0, 0, 465, 0, 0, 
-  0, 0, 0, 0, 0, 0, 94, 0, 96, 0, 
-  98, 0, 101, 0, 102, 0, 0, 0, 0, 88, 
-  99, 76, 0, 0, 0, 0, 0, 0, 0, 137, 
-  138, 139, 0, 0, 141, 143, 144, 0, 0, 145, 
-  0, 146, 0, 0, 0, 148, 149, 150, 0, 0, 
-  0, 0, 0, 0, 217, 152, 153, 154, 0, 0, 
-  0, 0, 0, 0, 0, 0, 0, 0, 155, 0, 
-  0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 
-  0, 0, 0, 0, 159, 0, 0, 0, 0, 0, 
-  0, 161, 162, 163, 0, 165, 166, 167, 168, 169, 
-  170, 0, 0, 156, 164, 147, 140, 142, 158, 0, 
-  0, 0, 0, 137, 138, 139, 0, 0, 141, 143, 
-  144, 0, 0, 145, 0, 146, 0, 0, 0, 148, 
-  149, 150, 0, 0, 0, 0, 0, 0, 151, 152, 
-  153, 154, 0, 0, 0, 0, 0, 0, 0, 0, 
-  0, 0, 155, 0, 0, 0, 157, 0, 0, 0, 
-  0, 0, 0, 0, 0, 0, 0, 0, 159, 0, 
-  0, 0, 0, 0, 160, 161, 162, 163, 0, 165, 
-  166, 167, 168, 169, 170, 0, 0, 156, 164, 147, 
-  140, 142, 158, 0, 0, 0, 0, 137, 138, 139, 
-  0, 0, 141, 143, 144, 0, 0, 145, 0, 146, 
-  0, 0, 0, 148, 149, 150, 0, 0, 0, 0, 
-  0, 0, 151, 152, 153, 154, 0, 0, 0, 0, 
-  0, 0, 0, 0, 0, 0, 155, 0, 0, 0, 
-  157, 0, 0, 0, 0, 0, 0, 0, 175, 0, 
-  0, 0, 159, 0, 0, 0, 0, 0, 160, 161, 
-  162, 163, 0, 165, 166, 167, 168, 169, 170, 0, 
-  0, 156, 164, 147, 140, 142, 158, 0, 0, 0, 
-  0, 69, 0, 0, 0, 0, 70, 0, 72, 73, 
-  74, 75, 0, 0, 0, 0, 0, 0, 77, 114, 
-  0, 0, 0, 0, 0, 0, 79, 80, 0, 0, 
-  81, 82, 0, 83, 0, 0, 0, 84, 0, 85, 
-  86, 87, 0, 0, 89, 0, 0, 0, 90, 0, 
-  91, 0, 0, 0, 0, 0, 92, 0, 93, 0, 
-  0, 0, 94, 95, 96, 97, 98, 100, 101, 17, 
-  102, 103, 104, 0, 0, 88, 99, 76, 13, 71, 
-  0, 0, 0, 0, 0, 69, 0, 0, 0, 0, 
-  70, 0, 72, 73, 74, 75, 0, 0, 0, 0, 
-  0, 0, 77, 78, 0, 0, 0, 0, 0, 0, 
-  79, 80, 0, 0, 81, 82, 0, 83, 0, 0, 
-  0, 84, 0, 85, 86, 87, 0, 0, 89, 0, 
-  0, 0, 90, 0, 91, 0, 0, 0, 0, 0, 
-  92, 0, 93, 0, 0, 0, 94, 95, 96, 97, 
-  98, 100, 101, 17, 102, 103, 104, 0, 0, 88, 
-  99, 76, 13, 71, 0, 0, 0, 0, 0, 69, 
-  0, 0, 0, 0, 70, 0, 72, 73, 74, 75, 
-  0, 0, 0, 0, 0, 0, 77, 114, 0, 0, 
-  0, 0, 0, 0, 508, 80, 0, 0, 81, 509, 
-  0, 83, 0, 0, 0, 84, 0, 85, 86, 87, 
-  0, 0, 89, 0, 0, 0, 90, 0, 91, 0, 
-  0, 0, 0, 0, 92, 0, 93, 0, 0, 0, 
-  94, 95, 96, 97, 98, 100, 101, 17, 102, 103, 
-  104, 0, 0, 88, 99, 76, 13, 71, 0, 0, 
-  0, 0, 0, 69, 0, 0, 0, 0, 70, 0, 
-  72, 73, 74, 75, 0, 0, 0, 0, 0, 0, 
-  77, 114, 0, 0, 0, 0, 0, 0, 495, 80, 
-  0, 0, 81, 496, 0, 83, 0, 0, 0, 84, 
-  0, 85, 86, 87, 0, 0, 89, 0, 0, 0, 
-  90, 0, 91, 0, 0, 0, 0, 0, 92, 0, 
-  93, 0, 0, 0, 94, 95, 96, 97, 98, 100, 
-  101, 17, 102, 103, 104, 0, 0, 88, 99, 76, 
-  13, 71, 0, 0, 0, 0, 0, 376, 138, 139, 
-  0, 0, 378, 143, 380, 73, 74, 381, 0, 146, 
-  0, 0, 0, 148, 383, 384, 0, 0, 0, 0, 
-  0, 0, 385, 386, 153, 154, 81, 82, 0, 83, 
-  0, 0, 0, 84, 0, 85, 387, 87, 0, 0, 
-  389, 0, 0, 0, 90, 0, 91, 0, -221, 0, 
-  0, 0, 390, 0, 93, 0, 0, 0, 391, 392, 
-  393, 394, 98, 396, 397, 398, 399, 400, 401, 0, 
-  0, 388, 395, 382, 377, 379, 158, 0, 0, 0, 
-  0, 
-
-  428, 425, 524, 520, 488, 429, 421, 11, 431, 501, 
-  450, 452, 502, 497, 467, 231, 446, 454, 456, 441, 
-  491, 494, 463, 22, 507, 445, 275, 354, 372, 128, 
-  334, 464, 221, 336, 359, 370, 224, 361, 368, 363, 
-  366, 332, 216, 278, 218, 435, 435, 226, 0, 257, 
-  413, 0, 402, 244, 172, 250, 327, 327, 174, 252, 
-  177, 432, 432, 469, 275, 505, 511, 501, 224, 501, 
-  216, 256, 0, 112, 112, 259, 482, 112, 200, 201, 
-  0, 0, 202, 112, 22, 112, 112, 112, 203, 448, 
-  193, 112, 186, 475, 112, 112, 112, 112, 447, 112, 
-  112, 205, 181, 206, 199, 207, 112, 112, 224, 474, 
-  112, 112, 112, 510, 471, 407, 404, 291, 209, 405, 
-  211, 112, 295, 472, 112, 246, 112, 112, 112, 204, 
-  198, 112, 197, 274, 112, 327, 473, 112, 112, 327, 
-  122, 404, 312, 249, 405, 112, 327, 476, 112, 327, 
-  124, 112, 112, 123, 0, 112, 112, 313, 448, 112, 
-  309, 112, 179, 274, 112, 480, 447, 112, 67, 112, 
-  49, 482, 310, 0, 311, 323, 323, 22, 357, 22, 
-  295, 295, 355, 112, 67, 0, 49, 0, 295, 328, 
-  112, 0, 330, 0, 0, 295, 318, 351, 344, 112, 
-  0, 320, 112, 112, 295, 113, 316, 112, 295, 0, 
-  314, 112, 295, 0, 303, 323, 295, 323, 315, 112, 
-  295, 112, 295, 323, 295, 0, 295, 112, 295, 0, 
-  298, 0, 295, 0, 0, 0, 341, 342, 0, 322, 
-  0, 0, 338, 0, 0, 325, 0, 0, 0, 0, 
-  0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 
-  0, 0, 0, 0, 131, 0, 0, 0, 0, 67, 
-  0, 49, 0, 0, 0, 0, 0, 0, 0, 0, 
-  0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 
+  115, 81, 0, 82, 0, 0, 0, 83, 0, 84, 
+  85, 86, 0, 0, 88, 0, 0, 0, 89, 0, 
+  90, 0, 0, 0, 0, 0, 0, 0, 0, 0, 
+  0, 0, 93, 0, 95, 0, 97, 0, 100, 295, 
+  101, 0, 0, 0, 0, 87, 98, 75, 0, 0, 
+  0, 0, 0, 0, 0, 71, 72, 73, 0, 0, 
+  0, 0, 0, 0, 0, 0, 113, 0, 0, 0, 
+  0, 0, 0, 114, 0, 0, 0, 115, 81, 0, 
+  82, 0, 0, 0, 83, 0, 84, 85, 86, 0, 
+  0, 88, 0, 0, 0, 89, 0, 90, 0, 0, 
+  467, 0, 0, 0, 0, 0, 0, 0, 0, 93, 
+  0, 95, 0, 97, 0, 100, 0, 101, 0, 0, 
+  0, 0, 87, 98, 75, 0, 0, 0, 0, 0, 
+  0, 0, -75, 0, 0, 0, 71, 72, 73, 0, 
+  0, 0, 0, 0, 0, 0, 0, 113, 0, 0, 
+  0, 0, 0, 0, 114, 0, 0, 0, 115, 81, 
+  0, 82, 0, 0, 0, 83, 0, 84, 85, 86, 
+  0, 0, 88, 0, 0, 0, 89, 0, 90, 0, 
   0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 
+  93, 0, 95, 0, 97, 0, 100, 0, 101, 0, 
+  0, 0, 0, 87, 98, 75, 0, 0, 0, 0, 
+  0, 0, 0, 136, 137, 138, 0, 0, 140, 142, 
+  143, 0, 0, 144, 0, 145, 0, 0, 0, 147, 
+  148, 149, 0, 0, 0, 0, 0, 0, 216, 151, 
+  152, 153, 0, 0, 0, 0, 0, 0, 0, 0, 
+  0, 0, 154, 0, 0, 0, 0, 0, 0, 0, 
+  0, 0, 0, 0, 0, 0, 0, 0, 158, 0, 
+  0, 0, 0, 0, 0, 160, 161, 162, 0, 164, 
+  165, 166, 167, 168, 169, 0, 0, 155, 163, 146, 
+  139, 141, 157, 0, 0, 0, 0, 136, 137, 138, 
+  0, 0, 140, 142, 143, 0, 0, 144, 0, 145, 
+  0, 0, 0, 147, 148, 149, 0, 0, 0, 0, 
+  0, 0, 150, 151, 152, 153, 0, 0, 0, 0, 
+  0, 0, 0, 0, 0, 0, 154, 0, 0, 0, 
+  156, 0, 0, 0, 0, 0, 0, 0, 0, 0, 
+  0, 0, 158, 0, 0, 0, 0, 0, 159, 160, 
+  161, 162, 0, 164, 165, 166, 167, 168, 169, 0, 
+  0, 155, 163, 146, 139, 141, 157, 0, 0, 0, 
+  0, 136, 137, 138, 0, 0, 140, 142, 143, 0, 
+  0, 144, 0, 145, 0, 0, 0, 147, 148, 149, 
+  0, 0, 0, 0, 0, 0, 150, 151, 152, 153, 
   0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 
+  154, 0, 0, 0, 156, 0, 0, 0, 0, 0, 
+  0, 0, 174, 0, 0, 0, 158, 0, 0, 0, 
+  0, 0, 159, 160, 161, 162, 0, 164, 165, 166, 
+  167, 168, 169, 0, 0, 155, 163, 146, 139, 141, 
+  157, 0, 0, 0, 0, 68, 0, 0, 0, 0, 
+  69, 0, 71, 72, 73, 74, 0, 0, 0, 0, 
+  0, 0, 76, 113, 0, 0, 0, 0, 0, 0, 
+  507, 79, 0, 0, 80, 508, 0, 82, 0, 0, 
+  0, 83, 0, 84, 85, 86, 0, 0, 88, 0, 
+  0, 0, 89, 0, 90, 0, 0, 0, 0, 0, 
+  91, 0, 92, 0, 0, 0, 93, 94, 95, 96, 
+  97, 99, 100, 16, 101, 102, 103, 0, 0, 87, 
+  98, 75, 12, 70, 0, 0, 0, 0, 0, 68, 
+  0, 0, 0, 0, 69, 0, 71, 72, 73, 74, 
+  0, 0, 0, 0, 0, 0, 76, 113, 0, 0, 
+  0, 0, 0, 0, 78, 79, 0, 0, 80, 81, 
+  0, 82, 0, 0, 0, 83, 0, 84, 85, 86, 
+  0, 0, 88, 0, 0, 0, 89, 0, 90, 0, 
+  0, 0, 0, 0, 91, 0, 92, 0, 0, 0, 
+  93, 94, 95, 96, 97, 99, 100, 16, 101, 102, 
+  103, 0, 0, 87, 98, 75, 12, 70, 0, 0, 
+  0, 0, 0, 68, 0, 0, 0, 0, 69, 0, 
+  71, 72, 73, 74, 0, 0, 0, 0, 0, 0, 
+  76, 77, 0, 0, 0, 0, 0, 0, 78, 79, 
+  0, 0, 80, 81, 0, 82, 0, 0, 0, 83, 
+  0, 84, 85, 86, 0, 0, 88, 0, 0, 0, 
+  89, 0, 90, 0, 0, 0, 0, 0, 91, 0, 
+  92, 0, 0, 0, 93, 94, 95, 96, 97, 99, 
+  100, 16, 101, 102, 103, 0, 0, 87, 98, 75, 
+  12, 70, 0, 0, 0, 0, 0, 68, 0, 0, 
+  0, 0, 69, 0, 71, 72, 73, 74, 0, 0, 
+  0, 0, 0, 0, 76, 113, 0, 0, 0, 0, 
+  0, 0, 494, 79, 0, 0, 80, 495, 0, 82, 
+  0, 0, 0, 83, 0, 84, 85, 86, 0, 0, 
+  88, 0, 0, 0, 89, 0, 90, 0, 0, 0, 
+  0, 0, 91, 0, 92, 0, 0, 0, 93, 94, 
+  95, 96, 97, 99, 100, 16, 101, 102, 103, 0, 
+  0, 87, 98, 75, 12, 70, 0, 0, 0, 0, 
+  0, 375, 137, 138, 0, 0, 377, 142, 379, 72, 
+  73, 380, 0, 145, 0, 0, 0, 147, 382, 383, 
+  0, 0, 0, 0, 0, 0, 384, 385, 152, 153, 
+  80, 81, 0, 82, 0, 0, 0, 83, 0, 84, 
+  386, 86, 0, 0, 388, 0, 0, 0, 89, 0, 
+  90, 0, -221, 0, 0, 0, 389, 0, 92, 0, 
+  0, 0, 390, 391, 392, 393, 97, 395, 396, 397, 
+  398, 399, 400, 0, 0, 387, 394, 381, 376, 378, 
+  157, 0, 0, 0, 0, 
+
+  249, 430, 424, 440, 21, 427, 519, 10, 171, 173, 
+  453, 466, 455, 251, 463, 462, 256, 331, 230, 451, 
+  523, 277, 127, 445, 333, 444, 449, 176, 335, 434, 
+  428, 326, 360, 500, 434, 369, 501, 431, 431, 362, 
+  401, 371, 220, 509, 506, 420, 365, 496, 367, 217, 
+  353, 412, 487, 468, 215, 493, 481, 0, 490, 326, 
+  358, 0, 225, 223, 21, 243, 510, 0, 66, 500, 
+  48, 0, 504, 223, 500, 215, 255, 0, 274, 111, 
+  258, 0, 111, 196, 479, 111, 111, 203, 0, 111, 
+  198, 111, 111, 111, 0, 210, 21, 197, 326, 111, 
+  111, 273, 447, 208, 111, 248, 245, 111, 111, 308, 
+  273, 111, 309, 447, 111, 111, 111, 446, 446, 202, 
+  111, 111, 475, 111, 326, 326, 310, 111, 311, 123, 
+  111, 111, 326, 122, 111, 312, 111, 112, 121, 111, 
+  403, 356, 178, 404, 0, 111, 223, 470, 111, 111, 
+  111, 0, 111, 406, 185, 111, 204, 180, 206, 111, 
+  200, 111, 0, 0, 192, 481, 199, 327, 354, 290, 
+  0, 111, 111, 21, 294, 329, 201, 111, 205, 473, 
+  111, 111, 474, 471, 111, 322, 472, 66, 322, 48, 
+  294, 322, 322, 294, 111, 111, 294, 294, 111, 294, 
+  294, 111, 66, 294, 48, 302, 294, 343, 313, 337, 
+  341, 111, 340, 324, 321, 111, 294, 111, 314, 0, 
+  294, 0, 294, 322, 315, 111, 319, 111, 294, 0, 
+  294, 0, 294, 0, 297, 0, 0, 0, 0, 0, 
+  317, 0, 0, 0, 0, 350, 0, 0, 0, 0, 
+  0, 0, 0, 0, 0, 0, 0, 403, 0, 0, 
+  404, 0, 0, 0, 0, 0, 0, 130, 0, 0, 
   0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 
+  0, 0, 0, 0, 0, 0, 0, 260, 0, 0, 
   0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 
   0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 
   0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 
-  0, 0, 0, 0, 261, 0};
+  0, 0, 0, 0, 0, 0, 0, 0, 0, 0};
 
 const int JavaScriptGrammar::action_check [] = {
-  60, 48, 31, 17, 48, 29, 60, 76, 7, 1, 
-  8, 61, 29, 29, 36, 48, 29, 76, 61, 8, 
-  8, 60, 33, 8, 33, 1, 5, 8, 29, 29, 
-  76, 33, 7, 29, 55, 29, 33, 7, 33, 7, 
-  7, 5, 33, 36, 5, 55, 36, 2, 60, 36, 
-  7, 7, 36, 36, 1, 60, 60, 29, 61, 7, 
-  29, 7, 36, 36, 7, 36, 20, 16, 8, 55, 
-  29, 29, 8, 55, 1, 55, 0, 85, 29, 8, 
-  33, 7, 48, 8, 17, 29, 7, 2, 65, 7, 
-  29, 33, 8, 7, 7, 36, 33, 29, 76, 29, 
-  60, 36, 36, 8, 8, 36, 29, 8, 60, 8, 
-  29, 74, 7, 7, 36, 6, 36, 36, 8, 8, 
-  85, 15, 7, 61, 62, 7, 8, 8, 29, 20, 
-  40, 7, 10, 61, 62, 8, 10, 8, 33, 15, 
-  29, 51, 50, 40, 61, 62, 54, 8, 33, 61, 
-  62, 29, 56, 8, 51, 60, 8, 8, 61, 62, 
-  40, 60, 8, 50, 8, 42, 56, 54, 61, 62, 
-  8, 51, 40, 2, 8, 29, 53, 61, 62, 29, 
-  61, 55, 25, 51, 27, 8, 12, 60, 25, 60, 
-  27, -1, -1, 29, -1, 38, -1, -1, -1, 60, 
-  25, 38, 27, 12, 56, 60, -1, 61, 62, 60, 
-  56, 61, 62, 38, -1, -1, 60, 25, 56, 27, 
-  25, 25, 27, 27, 15, 61, 62, 61, 62, 8, 
-  38, 57, -1, 38, 38, 29, 12, 63, 61, 62, 
-  25, -1, 27, 34, 25, 36, 27, 25, 57, 27, 
-  25, 15, 27, 38, 63, -1, 25, 38, 27, 15, 
-  38, -1, 25, 38, 27, 18, 19, 61, 62, 38, 
-  34, -1, 36, 18, 19, 38, 18, 19, 34, 22, 
-  36, 57, 61, 62, 18, 19, 29, 63, -1, 22, 
-  -1, -1, 45, 46, -1, -1, 29, -1, -1, -1, 
-  45, 46, -1, 45, 46, 23, 24, -1, -1, 23, 
-  24, 45, 46, 22, 32, -1, -1, 35, 32, 37, 
-  29, 35, -1, 37, 22, -1, -1, -1, -1, 72, 
-  -1, 29, 25, -1, 27, 23, 24, -1, 81, 72, 
-  -1, 84, -1, 31, 32, 38, 55, 35, 81, 37, 
-  -1, 84, 23, 24, -1, -1, -1, 55, -1, -1, 
-  31, 32, -1, 72, 35, -1, 37, -1, 23, 24, 
-  -1, -1, 81, -1, 72, 84, 31, 32, -1, -1, 
-  35, -1, 37, 81, -1, -1, 84, -1, -1, 23, 
-  24, -1, -1, -1, -1, 23, 24, 31, 32, -1, 
-  -1, 35, -1, 37, 32, -1, -1, 35, -1, 37, 
-  12, 13, -1, -1, -1, -1, -1, -1, 12, 13, 
-  22, -1, -1, -1, -1, -1, -1, 29, 22, -1, 
-  -1, 33, 34, -1, 36, 29, -1, -1, -1, 33, 
-  34, 43, 36, -1, -1, 47, -1, -1, -1, 43, 
-  -1, -1, -1, 47, -1, -1, -1, -1, -1, -1, 
-  23, 24, -1, 65, -1, 67, -1, -1, 31, 32, 
-  -1, 65, 35, 67, 37, -1, 78, 79, 80, -1, 
-  -1, 3, -1, -1, 78, 79, 80, -1, -1, -1, 
-  -1, 13, -1, -1, -1, 17, -1, -1, -1, -1, 
-  -1, -1, -1, -1, 26, -1, 28, -1, -1, 31, 
+  76, 17, 1, 60, 36, 33, 29, 8, 33, 36, 
+  61, 5, 29, 8, 7, 29, 55, 60, 20, 5, 
+  33, 36, 1, 76, 48, 5, 29, 33, 48, 29, 
+  7, 7, 29, 55, 8, 17, 7, 29, 36, 60, 
+  31, 29, 61, 16, 29, 7, 7, 36, 8, 33, 
+  7, 29, 7, 61, 7, 36, 7, 29, 8, 8, 
+  7, 36, 29, 7, 60, 2, 8, 85, 7, 33, 
+  29, 2, 8, 36, 2, 29, 8, 60, 36, 48, 
+  36, 29, 48, 0, 36, 8, 76, 33, 7, 7, 
+  60, 29, 60, 33, 8, 36, 8, 8, 85, 6, 
+  65, 36, 36, 29, 33, 29, 7, 8, 8, 36, 
+  55, 8, 55, 20, 29, 8, 10, 8, 8, 8, 
+  42, 36, 8, 7, 40, 8, -1, 60, -1, 50, 
+  55, 53, 7, 54, 40, 51, 40, 7, -1, 8, 
+  15, 61, 62, 8, 74, 51, 60, 51, 60, 33, 
+  61, 61, 62, 61, 62, 8, 8, 1, 50, 56, 
+  60, 55, 54, 33, 29, 8, 40, 60, 8, 60, 
+  60, 60, 10, 56, 60, -1, 29, 51, 12, 61, 
+  62, 61, 62, 61, 62, 61, 62, 56, 25, 15, 
+  27, 29, 25, 25, 27, 27, 25, 12, 27, 29, 
+  12, 38, 29, 8, 56, 38, 38, 8, 34, 38, 
+  36, -1, 25, 56, 27, 25, -1, 27, 15, 18, 
+  19, 61, 62, 57, -1, 38, 29, -1, 38, 63, 
+  -1, 61, 62, 29, 61, 62, 25, 34, 27, 36, 
+  18, 19, 57, 15, 7, 57, 45, 46, 63, 38, 
+  -1, 63, 15, 18, 19, -1, 61, 62, 61, 62, 
+  61, 62, 34, -1, 36, 61, 62, 45, 46, 18, 
+  19, 22, -1, 23, 24, -1, -1, -1, 29, -1, 
+  45, 46, 32, -1, 22, 35, -1, 37, -1, 23, 
+  24, 29, -1, 23, 24, -1, 45, 46, 32, 23, 
+  24, 35, 32, 37, -1, 35, -1, 37, 32, 22, 
+  -1, 35, -1, 37, 23, 24, 29, 22, -1, -1, 
+  -1, 72, -1, 32, 29, 25, 35, 27, 37, -1, 
+  81, -1, -1, 84, 72, -1, -1, -1, 38, -1, 
+  -1, -1, 55, 81, -1, -1, 84, -1, -1, -1, 
+  55, -1, -1, -1, -1, 3, -1, -1, -1, 72, 
+  -1, -1, -1, -1, -1, 13, -1, 72, 81, 17, 
+  -1, 84, -1, -1, -1, -1, 81, -1, 26, 84, 
+  28, -1, -1, -1, -1, -1, -1, -1, 23, 24, 
+  -1, 39, -1, 41, 42, -1, 31, 32, -1, -1, 
+  35, 49, 37, -1, 52, 53, -1, -1, -1, -1, 
+  58, 3, -1, -1, -1, -1, 64, -1, -1, -1, 
+  -1, 13, -1, -1, -1, 17, -1, -1, -1, 77, 
+  -1, -1, -1, -1, 26, -1, 28, -1, -1, -1, 
   -1, -1, -1, -1, -1, -1, -1, 39, -1, 41, 
-  42, -1, -1, -1, -1, 3, -1, 49, -1, -1, 
-  52, 53, -1, -1, -1, 13, 58, -1, -1, 17, 
-  -1, -1, 64, -1, -1, -1, -1, -1, 26, -1, 
-  28, -1, -1, -1, -1, 77, -1, -1, -1, -1, 
-  -1, 39, -1, 41, 42, -1, -1, -1, -1, -1, 
-  -1, 49, -1, -1, 52, 53, -1, -1, -1, -1, 
-  58, -1, -1, -1, -1, -1, 64, -1, -1, -1, 
-  -1, -1, -1, -1, -1, -1, -1, -1, -1, 77, 
+  42, -1, -1, 12, 13, -1, -1, 49, -1, -1, 
+  52, 53, -1, 22, -1, -1, 58, -1, -1, -1, 
+  29, -1, 64, -1, 33, 34, -1, 36, -1, -1, 
+  -1, -1, -1, -1, 43, 77, -1, -1, 47, -1, 
   -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 
-  11, 12, 13, -1, -1, -1, -1, -1, -1, -1, 
-  -1, 22, -1, -1, -1, -1, -1, -1, 29, -1, 
-  -1, -1, 33, 34, -1, 36, -1, -1, -1, 40, 
-  -1, 42, 43, 44, -1, -1, 47, -1, -1, -1, 
-  51, -1, 53, -1, -1, -1, -1, -1, -1, -1, 
-  -1, -1, -1, -1, 65, -1, 67, -1, 69, -1, 
-  71, -1, 73, -1, -1, -1, -1, 78, 79, 80, 
-  -1, -1, -1, -1, -1, -1, -1, 11, 12, 13, 
-  -1, -1, -1, -1, -1, -1, -1, -1, 22, -1, 
-  -1, -1, -1, -1, -1, 29, -1, -1, -1, 33, 
-  34, -1, 36, -1, -1, -1, 40, -1, 42, 43, 
-  44, -1, -1, 47, -1, -1, -1, 51, -1, 53, 
-  -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 
-  -1, 65, -1, 67, -1, 69, -1, 71, 72, 73, 
-  -1, -1, -1, -1, 78, 79, 80, -1, -1, -1, 
+  -1, -1, -1, -1, -1, -1, 65, -1, 67, -1, 
+  -1, -1, -1, -1, -1, -1, -1, -1, -1, 78, 
+  79, 80, -1, -1, -1, -1, -1, -1, -1, 3, 
+  -1, -1, -1, -1, -1, -1, -1, -1, -1, 13, 
+  -1, -1, -1, 17, -1, -1, -1, -1, -1, -1, 
+  -1, -1, 26, -1, 28, -1, -1, 31, -1, -1, 
+  -1, -1, -1, -1, -1, 39, -1, 41, 42, -1, 
+  -1, -1, -1, -1, -1, 49, -1, -1, 52, 53, 
+  -1, -1, -1, -1, 58, -1, -1, -1, -1, -1, 
+  64, -1, -1, -1, -1, -1, -1, -1, -1, -1, 
+  -1, -1, -1, 77, -1, -1, -1, -1, -1, -1, 
   -1, -1, -1, -1, 11, 12, 13, -1, -1, -1, 
   -1, -1, -1, -1, -1, 22, -1, -1, -1, -1, 
   -1, -1, 29, -1, -1, -1, 33, 34, -1, 36, 
   -1, -1, -1, 40, -1, 42, 43, 44, -1, -1, 
-  47, -1, -1, -1, 51, -1, 53, -1, -1, 56, 
+  47, -1, -1, -1, 51, -1, 53, -1, -1, -1, 
   -1, -1, -1, -1, -1, -1, -1, -1, 65, -1, 
   67, -1, 69, -1, 71, -1, 73, -1, -1, -1, 
   -1, 78, 79, 80, -1, -1, -1, -1, -1, -1, 
-  -1, 7, -1, -1, -1, 11, 12, 13, -1, -1, 
+  -1, 11, 12, 13, -1, -1, -1, -1, -1, -1, 
+  -1, -1, 22, -1, -1, -1, -1, -1, -1, 29, 
+  -1, -1, -1, 33, 34, -1, 36, -1, -1, -1, 
+  40, -1, 42, 43, 44, -1, -1, 47, -1, -1, 
+  -1, 51, -1, 53, -1, -1, 56, -1, -1, -1, 
+  -1, -1, -1, -1, -1, 65, -1, 67, -1, 69, 
+  -1, 71, -1, 73, -1, -1, -1, -1, 78, 79, 
+  80, -1, -1, -1, -1, -1, -1, -1, 11, 12, 
+  13, -1, -1, -1, -1, -1, -1, -1, -1, 22, 
+  -1, -1, -1, -1, -1, -1, 29, -1, -1, -1, 
+  33, 34, -1, 36, -1, -1, -1, 40, -1, 42, 
+  43, 44, -1, -1, 47, -1, -1, -1, 51, -1, 
+  53, -1, -1, -1, -1, -1, -1, -1, -1, -1, 
+  -1, -1, 65, -1, 67, -1, 69, -1, 71, 72, 
+  73, -1, -1, -1, -1, 78, 79, 80, -1, -1, 
+  -1, -1, -1, -1, -1, 11, 12, 13, -1, -1, 
   -1, -1, -1, -1, -1, -1, 22, -1, -1, -1, 
   -1, -1, -1, 29, -1, -1, -1, 33, 34, -1, 
   36, -1, -1, -1, 40, -1, 42, 43, 44, -1, 
   -1, 47, -1, -1, -1, 51, -1, 53, -1, -1, 
-  -1, -1, -1, -1, -1, -1, -1, -1, -1, 65, 
+  56, -1, -1, -1, -1, -1, -1, -1, -1, 65, 
   -1, 67, -1, 69, -1, 71, -1, 73, -1, -1, 
   -1, -1, 78, 79, 80, -1, -1, -1, -1, -1, 
-  -1, -1, 11, 12, 13, -1, -1, -1, -1, -1, 
-  -1, -1, -1, 22, -1, -1, -1, -1, -1, -1, 
-  29, -1, -1, -1, 33, 34, -1, 36, -1, -1, 
-  -1, 40, -1, 42, 43, 44, -1, -1, 47, -1, 
-  -1, -1, 51, -1, 53, -1, -1, 56, -1, -1, 
-  -1, -1, -1, -1, -1, -1, 65, -1, 67, -1, 
-  69, -1, 71, -1, 73, -1, -1, -1, -1, 78, 
-  79, 80, -1, -1, -1, -1, -1, -1, -1, 4, 
-  5, 6, -1, -1, 9, 10, 11, -1, -1, 14, 
-  -1, 16, -1, -1, -1, 20, 21, 22, -1, -1, 
-  -1, -1, -1, -1, 29, 30, 31, 32, -1, -1, 
-  -1, -1, -1, -1, -1, -1, -1, -1, 43, -1, 
+  -1, -1, 7, -1, -1, -1, 11, 12, 13, -1, 
+  -1, -1, -1, -1, -1, -1, -1, 22, -1, -1, 
+  -1, -1, -1, -1, 29, -1, -1, -1, 33, 34, 
+  -1, 36, -1, -1, -1, 40, -1, 42, 43, 44, 
+  -1, -1, 47, -1, -1, -1, 51, -1, 53, -1, 
   -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 
-  -1, -1, -1, -1, 59, -1, -1, -1, -1, -1, 
-  -1, 66, 67, 68, -1, 70, 71, 72, 73, 74, 
-  75, -1, -1, 78, 79, 80, 81, 82, 83, -1, 
+  65, -1, 67, -1, 69, -1, 71, -1, 73, -1, 
+  -1, -1, -1, 78, 79, 80, -1, -1, -1, -1, 
   -1, -1, -1, 4, 5, 6, -1, -1, 9, 10, 
   11, -1, -1, 14, -1, 16, -1, -1, -1, 20, 
   21, 22, -1, -1, -1, -1, -1, -1, 29, 30, 
   31, 32, -1, -1, -1, -1, -1, -1, -1, -1, 
-  -1, -1, 43, -1, -1, -1, 47, -1, -1, -1, 
+  -1, -1, 43, -1, -1, -1, -1, -1, -1, -1, 
   -1, -1, -1, -1, -1, -1, -1, -1, 59, -1, 
-  -1, -1, -1, -1, 65, 66, 67, 68, -1, 70, 
+  -1, -1, -1, -1, -1, 66, 67, 68, -1, 70, 
   71, 72, 73, 74, 75, -1, -1, 78, 79, 80, 
   81, 82, 83, -1, -1, -1, -1, 4, 5, 6, 
   -1, -1, 9, 10, 11, -1, -1, 14, -1, 16, 
   -1, -1, -1, 20, 21, 22, -1, -1, -1, -1, 
   -1, -1, 29, 30, 31, 32, -1, -1, -1, -1, 
   -1, -1, -1, -1, -1, -1, 43, -1, -1, -1, 
-  47, -1, -1, -1, -1, -1, -1, -1, 55, -1, 
+  47, -1, -1, -1, -1, -1, -1, -1, -1, -1, 
   -1, -1, 59, -1, -1, -1, -1, -1, 65, 66, 
   67, 68, -1, 70, 71, 72, 73, 74, 75, -1, 
   -1, 78, 79, 80, 81, 82, 83, -1, -1, -1, 
-  -1, 4, -1, -1, -1, -1, 9, -1, 11, 12, 
-  13, 14, -1, -1, -1, -1, -1, -1, 21, 22, 
-  -1, -1, -1, -1, -1, -1, 29, 30, -1, -1, 
-  33, 34, -1, 36, -1, -1, -1, 40, -1, 42, 
-  43, 44, -1, -1, 47, -1, -1, -1, 51, -1, 
-  53, -1, -1, -1, -1, -1, 59, -1, 61, -1, 
-  -1, -1, 65, 66, 67, 68, 69, 70, 71, 72, 
+  -1, 4, 5, 6, -1, -1, 9, 10, 11, -1, 
+  -1, 14, -1, 16, -1, -1, -1, 20, 21, 22, 
+  -1, -1, -1, -1, -1, -1, 29, 30, 31, 32, 
+  -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 
+  43, -1, -1, -1, 47, -1, -1, -1, -1, -1, 
+  -1, -1, 55, -1, -1, -1, 59, -1, -1, -1, 
+  -1, -1, 65, 66, 67, 68, -1, 70, 71, 72, 
   73, 74, 75, -1, -1, 78, 79, 80, 81, 82, 
-  -1, -1, -1, -1, -1, 4, -1, -1, -1, -1, 
+  83, -1, -1, -1, -1, 4, -1, -1, -1, -1, 
   9, -1, 11, 12, 13, 14, -1, -1, -1, -1, 
   -1, -1, 21, 22, -1, -1, -1, -1, -1, -1, 
   29, 30, -1, -1, 33, 34, -1, 36, -1, -1, 
@@ -659,51 +607,56 @@ const int JavaScriptGrammar::action_check [] = {
   51, -1, 53, -1, -1, -1, -1, -1, 59, -1, 
   61, -1, -1, -1, 65, 66, 67, 68, 69, 70, 
   71, 72, 73, 74, 75, -1, -1, 78, 79, 80, 
-  81, 82, -1, -1, -1, -1, -1, 4, 5, 6, 
-  -1, -1, 9, 10, 11, 12, 13, 14, -1, 16, 
-  -1, -1, -1, 20, 21, 22, -1, -1, -1, -1, 
-  -1, -1, 29, 30, 31, 32, 33, 34, -1, 36, 
+  81, 82, -1, -1, -1, -1, -1, 4, -1, -1, 
+  -1, -1, 9, -1, 11, 12, 13, 14, -1, -1, 
+  -1, -1, -1, -1, 21, 22, -1, -1, -1, -1, 
+  -1, -1, 29, 30, -1, -1, 33, 34, -1, 36, 
   -1, -1, -1, 40, -1, 42, 43, 44, -1, -1, 
-  47, -1, -1, -1, 51, -1, 53, -1, 55, -1, 
+  47, -1, -1, -1, 51, -1, 53, -1, -1, -1, 
   -1, -1, 59, -1, 61, -1, -1, -1, 65, 66, 
   67, 68, 69, 70, 71, 72, 73, 74, 75, -1, 
-  -1, 78, 79, 80, 81, 82, 83, -1, -1, -1, 
-  -1, 
+  -1, 78, 79, 80, 81, 82, -1, -1, -1, -1, 
+  -1, 4, 5, 6, -1, -1, 9, 10, 11, 12, 
+  13, 14, -1, 16, -1, -1, -1, 20, 21, 22, 
+  -1, -1, -1, -1, -1, -1, 29, 30, 31, 32, 
+  33, 34, -1, 36, -1, -1, -1, 40, -1, 42, 
+  43, 44, -1, -1, 47, -1, -1, -1, 51, -1, 
+  53, -1, 55, -1, -1, -1, 59, -1, 61, -1, 
+  -1, -1, 65, 66, 67, 68, 69, 70, 71, 72, 
+  73, 74, 75, -1, -1, 78, 79, 80, 81, 82, 
+  83, -1, -1, -1, -1, 
 
-  72, 84, 76, 20, 12, 12, 87, 5, 72, 10, 
-  12, 11, 9, 9, 20, 54, 58, 12, 11, 89, 
-  12, 11, 16, 14, 11, 58, 11, 78, 11, 90, 
-  12, 20, 20, 11, 11, 11, 20, 12, 12, 11, 
-  11, 11, 23, 12, 12, 58, 58, 20, -1, 12, 
-  12, -1, 11, 20, 20, 20, 12, 12, 22, 20, 
-  20, 12, 12, 12, 11, 8, 7, 10, 20, 10, 
-  23, 24, -1, 31, 31, 27, 6, 31, 36, 36, 
-  -1, -1, 36, 31, 14, 31, 31, 31, 36, 33, 
-  36, 31, 37, 33, 31, 31, 31, 31, 33, 31, 
-  31, 37, 39, 37, 35, 37, 31, 31, 20, 33, 
-  31, 31, 31, 9, 33, 27, 25, 31, 43, 28, 
-  41, 31, 36, 33, 31, 45, 31, 31, 31, 36, 
-  35, 31, 35, 33, 31, 12, 33, 31, 31, 12, 
-  33, 25, 36, 47, 28, 31, 12, 33, 31, 12, 
-  33, 31, 31, 33, -1, 31, 31, 36, 33, 31, 
-  36, 31, 34, 33, 31, 2, 33, 31, 11, 31, 
-  13, 6, 36, -1, 36, 31, 31, 14, 55, 14, 
-  36, 36, 55, 31, 11, -1, 13, -1, 36, 55, 
-  31, -1, 55, -1, -1, 36, 44, 53, 53, 31, 
-  -1, 42, 31, 31, 36, 34, 38, 31, 36, -1, 
-  38, 31, 36, -1, 38, 31, 36, 31, 38, 31, 
-  36, 31, 36, 31, 36, -1, 36, 31, 36, -1, 
-  40, -1, 36, -1, -1, -1, 48, 53, -1, 53, 
-  -1, -1, 46, -1, -1, 53, -1, -1, -1, -1, 
-  -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 
-  -1, -1, -1, -1, 91, -1, -1, -1, -1, 11, 
-  -1, 13, -1, -1, -1, -1, -1, -1, -1, -1, 
-  -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 
-  -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 
-  -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 
+  20, 72, 84, 89, 14, 72, 20, 5, 20, 22, 
+  12, 20, 11, 20, 20, 16, 12, 11, 54, 11, 
+  76, 12, 90, 58, 12, 58, 12, 20, 11, 58, 
+  12, 12, 12, 10, 58, 11, 9, 12, 12, 11, 
+  11, 11, 20, 9, 11, 87, 11, 9, 12, 12, 
+  78, 12, 12, 12, 23, 11, 6, -1, 12, 12, 
+  11, -1, 20, 20, 14, 20, 7, -1, 11, 10, 
+  13, -1, 8, 20, 10, 23, 24, -1, 11, 31, 
+  27, -1, 31, 35, 2, 31, 31, 36, -1, 31, 
+  35, 31, 31, 31, -1, 41, 14, 35, 12, 31, 
+  31, 33, 33, 43, 31, 47, 45, 31, 31, 36, 
+  33, 31, 36, 33, 31, 31, 31, 33, 33, 36, 
+  31, 31, 33, 31, 12, 12, 36, 31, 36, 33, 
+  31, 31, 12, 33, 31, 36, 31, 34, 33, 31, 
+  25, 55, 34, 28, -1, 31, 20, 33, 31, 31, 
+  31, -1, 31, 27, 37, 31, 37, 39, 37, 31, 
+  36, 31, -1, -1, 36, 6, 36, 55, 55, 31, 
+  -1, 31, 31, 14, 36, 55, 36, 31, 37, 33, 
+  31, 31, 33, 33, 31, 31, 33, 11, 31, 13, 
+  36, 31, 31, 36, 31, 31, 36, 36, 31, 36, 
+  36, 31, 11, 36, 13, 38, 36, 53, 38, 46, 
+  53, 31, 48, 53, 53, 31, 36, 31, 38, -1, 
+  36, -1, 36, 31, 38, 31, 42, 31, 36, -1, 
+  36, -1, 36, -1, 40, -1, -1, -1, -1, -1, 
+  44, -1, -1, -1, -1, 53, -1, -1, -1, -1, 
+  -1, -1, -1, -1, -1, -1, -1, 25, -1, -1, 
+  28, -1, -1, -1, -1, -1, -1, 91, -1, -1, 
   -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 
+  -1, -1, -1, -1, -1, -1, -1, 96, -1, -1, 
   -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 
   -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 
   -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 
-  -1, -1, -1, -1, 96, -1};
+  -1, -1, -1, -1, -1, -1, -1, -1, -1, -1};
 
diff --git a/src/declarative/qml/parser/javascriptgrammar_p.h b/src/declarative/qml/parser/javascriptgrammar_p.h
index 22d3d76..b6ffbc6 100644
--- a/src/declarative/qml/parser/javascriptgrammar_p.h
+++ b/src/declarative/qml/parser/javascriptgrammar_p.h
@@ -1,56 +1,4 @@
 // This file was generated by qlalr - DO NOT EDIT!
-/****************************************************************************
-**
-** Copyright (C) 2009 Nokia Corporation and/or its subsidiary(-ies).
-** Contact: Qt Software Information (qt-info@nokia.com)
-**
-** This file is part of the QtCore module of the Qt Toolkit.
-**
-** $QT_BEGIN_LICENSE:LGPL$
-** No Commercial Usage
-** This file contains pre-release code and may not be distributed.
-** You may use this file in accordance with the terms and conditions
-** contained in the either Technology Preview License Agreement or the
-** Beta Release License Agreement.
-**
-** GNU Lesser General Public License Usage
-** Alternatively, this file may be used under the terms of the GNU Lesser
-** General Public License version 2.1 as published by the Free Software
-** Foundation and appearing in the file LICENSE.LGPL included in the
-** packaging of this file.  Please review the following information to
-** ensure the GNU Lesser General Public License version 2.1 requirements
-** will be met: http://www.gnu.org/licenses/old-licenses/lgpl-2.1.html.
-**
-** In addition, as a special exception, Nokia gives you certain
-** additional rights. These rights are described in the Nokia Qt LGPL
-** Exception version 1.0, included in the file LGPL_EXCEPTION.txt in this
-** package.
-**
-** GNU General Public License Usage
-** Alternatively, this file may be used under the terms of the GNU
-** General Public License version 3.0 as published by the Free Software
-** Foundation and appearing in the file LICENSE.GPL included in the
-** packaging of this file.  Please review the following information to
-** ensure the GNU General Public License version 3.0 requirements will be
-** met: http://www.gnu.org/copyleft/gpl.html.
-**
-** If you are unsure which license is appropriate for your use, please
-** contact the sales department at qt-sales@nokia.com.
-** $QT_END_LICENSE$
-**
-****************************************************************************/
-
-//
-//  W A R N I N G
-//  -------------
-//
-// This file is not part of the Qt API.  It exists for the convenience
-// of other Qt classes.  This header file may change from version to
-// version without notice, or even be removed.
-//
-// We mean it.
-//
-
 #ifndef JAVASCRIPTGRAMMAR_P_H
 #define JAVASCRIPTGRAMMAR_P_H
 
@@ -147,15 +95,15 @@ public:
     T_XOR = 76,
     T_XOR_EQ = 77,
 
-    ACCEPT_STATE = 7,
+    ACCEPT_STATE = 524,
     RULE_COUNT = 298,
     STATE_COUNT = 525,
     TERMINAL_COUNT = 88,
     NON_TERMINAL_COUNT = 98,
 
     GOTO_INDEX_OFFSET = 525,
-    GOTO_INFO_OFFSET = 1671,
-    GOTO_CHECK_OFFSET = 1671
+    GOTO_INFO_OFFSET = 1675,
+    GOTO_CHECK_OFFSET = 1675
   };
 
   static const char  *const spell [];
diff --git a/src/declarative/qml/parser/javascriptparser.cpp b/src/declarative/qml/parser/javascriptparser.cpp
index 81a7e7b..f868216 100644
--- a/src/declarative/qml/parser/javascriptparser.cpp
+++ b/src/declarative/qml/parser/javascriptparser.cpp
@@ -123,6 +123,7 @@ bool JavaScriptParser::parse(JavaScriptEnginePrivate *driver)
     first_token = last_token = 0;
 
     tos = -1;
+    program = 0;
 
     do {
         if (++tos == stack_size)
@@ -163,8 +164,9 @@ bool JavaScriptParser::parse(JavaScriptEnginePrivate *driver)
           switch (r) {
 
 case 0: {
-    sym(1).Node = makeAstNode<AST::UiProgram> (driver->nodePool(), sym(1).UiImportList,
+  program = makeAstNode<AST::UiProgram> (driver->nodePool(), sym(1).UiImportList,
         sym(2).UiObjectMemberList->finish());
+  sym(1).UiProgram = program;    
 } break;
 
 case 2: {
@@ -246,7 +248,7 @@ case 19: {
         sym(4).UiObjectMemberList->finish());
     node->colonToken = loc(2);
     node->lbracketToken = loc(3);
-    node->rbraceToken = loc(5);
+    node->rbracketToken = loc(5);
     sym(1).Node = node;
 }   break;
  case 20: 
@@ -1550,6 +1552,7 @@ case 295: {
                 yytoken = *tk;
                 yylval = 0;
                 yylloc = token_buffer[0].loc;
+		yylloc.length = 0;
 
                 first_token = &token_buffer[0];
                 last_token = &token_buffer[2];
@@ -1572,6 +1575,7 @@ case 295: {
                 yytoken = tk;
                 yylval = 0;
                 yylloc = token_buffer[0].loc;
+		yylloc.length = 0;
 
                 action = errorState;
                 goto _Lcheck_token;
diff --git a/src/declarative/qml/parser/javascriptparser_p.h b/src/declarative/qml/parser/javascriptparser_p.h
index 226ad8b..34edaf7 100644
--- a/src/declarative/qml/parser/javascriptparser_p.h
+++ b/src/declarative/qml/parser/javascriptparser_p.h
@@ -143,7 +143,7 @@ public:
     bool parse(JavaScriptEnginePrivate *driver);
 
     JavaScript::AST::UiProgram *ast()
-    { return sym(1).UiProgram; }
+    { return program; }
 
     QList<DiagnosticMessage> diagnosticMessages() const
     { return diagnostic_messages; }
@@ -183,6 +183,8 @@ protected:
     int *state_stack;
     JavaScript::AST::SourceLocation *location_stack;
 
+    JavaScript::AST::UiProgram *program;
+
     // error recovery
     enum { TOKEN_BUFFER_SIZE = 3 };
 
diff --git a/src/declarative/qml/qmlinfo.cpp b/src/declarative/qml/qmlinfo.cpp
index a2b304f..65a4298 100644
--- a/src/declarative/qml/qmlinfo.cpp
+++ b/src/declarative/qml/qmlinfo.cpp
@@ -47,12 +47,14 @@ QT_BEGIN_NAMESPACE
     \class QmlInfo
     \brief The QmlInfo class prints warnings messages that include the file and line number for QML types.
 
-    When QML types display warning messages, it improves tracibility if they include the
-    QML file and line number on which the particular instance was instantiated.  
+    When QML types display warning messages, it improves tracibility
+    if they include the QML file and line number on which the
+    particular instance was instantiated.
     
-    QmlInfo statements work just like regular Qt qDebug() statements.  To include the file
-    and line number, an object must be passed.  If the file and line number is not available
-    for that instance (either it was not instantiated by the QML engine or location 
+    QmlInfo statements work just like regular Qt qDebug() statements.
+    To include the file and line number, an object must be passed.  If
+    the file and line number is not available for that instance
+    (either it was not instantiated by the QML engine or location
     information is disabled), "unknown location" will be used instead.
 
     For example, 
@@ -69,7 +71,8 @@ QT_BEGIN_NAMESPACE
 */
 
 /*!
-    Construct a QmlInfo, using \a object for file and line number information.
+    Construct a QmlInfo, using \a object for file and line number
+    information.
 */
 QmlInfo::QmlInfo(QObject *object)
 : QDebug(QtWarningMsg)
@@ -81,17 +84,16 @@ QmlInfo::QmlInfo(QObject *object)
 }
 
 /*!
-    \internal
+  The destructor does nothing special.
 */
 QmlInfo::~QmlInfo()
 {
 }
 
 /*!
-    \fn QmlInfo qmlInfo(QObject *me)
-    \internal
-
-    XXX - how do we document these?
+  \relates QmlInfo
+  \fn QmlInfo qmlInfo(QObject *me)
+  Constructs an instance of QmlInfo from \a me and returns it.
 */
 
 QT_END_NAMESPACE
diff --git a/src/declarative/util/qfxview.cpp b/src/declarative/util/qfxview.cpp
index 1e9d5a4..42047b6 100644
--- a/src/declarative/util/qfxview.cpp
+++ b/src/declarative/util/qfxview.cpp
@@ -49,6 +49,7 @@
 #include "qicon.h"
 #include "qurl.h"
 #include "qboxlayout.h"
+#include "qbasictimer.h"
 
 #include "qmlbindablevalue.h"
 #include "qml.h"
@@ -100,6 +101,8 @@ public:
 
     QmlEngine engine;
     QmlComponent *component;
+    QBasicTimer resizetimer;
+
     void init();
 };
 
@@ -107,10 +110,10 @@ public:
     \class QFxView
     \brief The QFxView class provides a widget for displaying a Qt Declarative user interface.
 
-    QFxView currently provides a minimal interface for displaying Qml files, and
-    connecting between QML and C++ Qt objects.
+    QFxView currently provides a minimal interface for displaying QML
+    files, and connecting between QML and C++ Qt objects.
 
-    Typcial usage looks something like this:
+    Typcial usage:
     \code
     ...
     QFxView *view = new QFxView(this);
@@ -129,12 +132,24 @@ public:
     \endcode
 */
 
+/*!
+  \fn QFxView::QFxView(QWidget *parent)
+  
+  Constructs a QFxView with the given \a parent.
+*/
 QFxView::QFxView(QWidget *parent)
 : QSimpleCanvas(parent), d(new QFxViewPrivate(this))
 {
     d->init();
 }
 
+/*!
+  \fn QFxView::QFxView(QSimpleCanvas::CanvasMode mode, QWidget *parent)
+  
+  Constructs a QFxView with the given \a parent. The canvas
+  \a mode can be QSimpleCanvas::GraphicsView or
+  QSimpleCanvas::SimpleCanvas.
+*/
 QFxView::QFxView(QSimpleCanvas::CanvasMode mode, QWidget *parent)
 : QSimpleCanvas(mode, parent), d(new QFxViewPrivate(this))
 {
@@ -157,29 +172,49 @@ void QFxViewPrivate::init()
     QFontDatabase database;
 }
 
+/*!
+  The destructor clears the instance and deletes the internal
+  representation.
+
+  \sa clearItems()
+ */
 QFxView::~QFxView()
 {
     clearItems();
     delete d; d = 0;
 }
 
+/*!
+  Sets the source to the \a url. The XML string is set to
+  empty.
+ */
 void QFxView::setUrl(const QUrl& url)
 {
     d->source = url;
     d->xml = QString();
 }
 
+/*!
+  Sets the source to the URL from the \a filename, and sets
+  the XML string to \a xml.
+ */
 void QFxView::setXml(const QString &xml, const QString &filename)
 {
     d->source = QUrl::fromLocalFile(filename);
     d->xml = xml;
 }
 
+/*!
+  Returns the XML string.
+ */
 QString QFxView::xml() const
 {
     return d->xml;
 }
 
+/*!
+  Returns a pointer to the QmlEngine.
+ */
 QmlEngine* QFxView::engine()
 {
     return &d->engine;
@@ -250,8 +285,17 @@ void QFxView::continueExecute()
 
 void QFxView::sizeChanged()
 {
-    if (d->root)
-        emit sceneResized(QSize(d->root->width(),d->root->height()));
+    // delay, so we catch both width and height changing.
+    d->resizetimer.start(0,this);
+}
+
+void QFxView::timerEvent(QTimerEvent* e)
+{
+    if (e->timerId() == d->resizetimer.timerId()) {
+        if (d->root)
+            emit sceneResized(QSize(d->root->width(),d->root->height()));
+        d->resizetimer.stop();
+    }
 }
 
 QFxItem* QFxView::addItem(const QString &xml, QFxItem* parent)
diff --git a/src/declarative/util/qfxview.h b/src/declarative/util/qfxview.h
index 3c4be20..c658f07 100644
--- a/src/declarative/util/qfxview.h
+++ b/src/declarative/util/qfxview.h
@@ -95,6 +95,7 @@ protected:
     virtual void resizeEvent(QResizeEvent *);
     void focusInEvent(QFocusEvent *);
     void focusOutEvent(QFocusEvent *);
+    void timerEvent(QTimerEvent*);
 
 private:
     friend class QFxViewPrivate;
diff --git a/src/declarative/util/qmlscript.h b/src/declarative/util/qmlscript.h
index fc038b4..8047a88 100644
--- a/src/declarative/util/qmlscript.h
+++ b/src/declarative/util/qmlscript.h
@@ -58,7 +58,7 @@ class Q_DECLARATIVE_EXPORT QmlScript : public QObject
     Q_DECLARE_PRIVATE(QmlScript);
 
     Q_PROPERTY(QString script READ script WRITE setScript);
-    Q_PROPERTY(QString src READ source WRITE setSource);
+    Q_PROPERTY(QString source READ source WRITE setSource);
     Q_CLASSINFO("DefaultProperty", "script");
 
 public:
diff --git a/src/declarative/util/qmlstate.cpp b/src/declarative/util/qmlstate.cpp
index 5850a97..cd33f5e 100644
--- a/src/declarative/util/qmlstate.cpp
+++ b/src/declarative/util/qmlstate.cpp
@@ -175,7 +175,6 @@ void QmlState::setWhen(QmlBindableValue *when)
 }
 
 /*!
-    \advanced
     \qmlproperty string State::extends
     This property holds the state that this state extends
 
diff --git a/tools/duiviewer/qfxviewer.cpp b/tools/duiviewer/qfxviewer.cpp
index 7b39f53..b15a8bf 100644
--- a/tools/duiviewer/qfxviewer.cpp
+++ b/tools/duiviewer/qfxviewer.cpp
@@ -55,7 +55,7 @@ QFxViewer::QFxViewer(QFxTestEngine::TestMode testMode, const QString &testDir, Q
 
     QObject::connect(canvas, SIGNAL(sceneResized(QSize)), this, SLOT(sceneResized(QSize)));
     canvas->setFixedSize(width, height);
-    setFixedSize(width, height);
+    resize(width, height);
 }
 
 void QFxViewer::reload()
@@ -217,15 +217,21 @@ void QFxViewer::setRecordPeriod(int ms)
 
 void QFxViewer::sceneResized(QSize size)
 {
-    if(size.width() > 0 && size.height() > 0) {
+    if (size.width() > 0 && size.height() > 0) {
         canvas->setFixedSize(size.width(), size.height());
         if (skin)
             skin->setScreenSize(size);
         else
-            setFixedSize(size);
+            resize(size);
     }
 }
 
+void QFxViewer::resizeEvent(QResizeEvent *)
+{
+    if (!skin)
+        canvas->setFixedSize(width(),height());
+}
+
 void QFxViewer::keyPressEvent(QKeyEvent *event)
 {
     if (event->key() == Qt::Key_0 && devicemode)
diff --git a/tools/duiviewer/qfxviewer.h b/tools/duiviewer/qfxviewer.h
index 5733591..7a190c5 100644
--- a/tools/duiviewer/qfxviewer.h
+++ b/tools/duiviewer/qfxviewer.h
@@ -49,6 +49,7 @@ public slots:
 protected:
     virtual void keyPressEvent(QKeyEvent *);
     virtual void timerEvent(QTimerEvent *);
+    virtual void resizeEvent(QResizeEvent *);
 
 private:
     QString currentFileName;
diff --git a/tools/qdoc3/test/qt-inc.qdocconf b/tools/qdoc3/test/qt-inc.qdocconf
index d6cb0e6..decdc15 100644
--- a/tools/qdoc3/test/qt-inc.qdocconf
+++ b/tools/qdoc3/test/qt-inc.qdocconf
@@ -99,7 +99,8 @@ Cpp.ignoretokens        = QAXFACTORY_EXPORT \
                           Q_TESTLIB_EXPORT \
                           Q_TYPENAME \
                           Q_XML_EXPORT \
-                          QDBUS_EXPORT
+                          QDBUS_EXPORT \
+                          Q_DECLARATIVE_EXPORT
 Cpp.ignoredirectives    = Q_DECLARE_HANDLE \
                           Q_DECLARE_INTERFACE \
                           Q_DECLARE_METATYPE \