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

Conflicts: demos/declarative/webbrowser/WebBrowser.qml demos/declarative/webbrowser/content/pics/addressbar-filled.png demos/declarative/webbrowser/content/pics/addressbar.png demos/declarative/webbrowser/content/pics/back-disabled.png demos/declarative/webbrowser/content/pics/back.png demos/declarative/webbrowser/content/pics/footer.png demos/declarative/webbrowser/content/pics/forward-disabled.png demos/declarative/webbrowser/content/pics/forward.png demos/declarative/webbrowser/content/pics/header.png demos/declarative/webbrowser/content/pics/reload.png
author: Warwick Allison <warwick.allison@nokia.com> 2009-04-24 04:29:31 (GMT)
committer: Warwick Allison <warwick.allison@nokia.com> 2009-04-24 04:29:31 (GMT)
commit: 0c5f0baa59ae56749707c9f73754132cd9b4a44d (patch)
tree: cc8e8ca8d889a64ee5cdaa91647b2cf221c8edf3
parent: 363265d790c9f6b69d5a706209b28e467de3a2d6 (diff)
parent: db815819dae525c64575de38b92afa4cf092ce06 (diff)
download: Qt-0c5f0baa59ae56749707c9f73754132cd9b4a44d.zip
Qt-0c5f0baa59ae56749707c9f73754132cd9b4a44d.tar.gz
Qt-0c5f0baa59ae56749707c9f73754132cd9b4a44d.tar.bz2
116 files changed, 1966 insertions, 1289 deletions
diff --git a/demos/declarative/webbrowser/README b/demos/declarative/webbrowser/README
index a081e30..7bfd41f 100644
--- a/demos/declarative/webbrowser/README
+++ b/demos/declarative/webbrowser/README
@@ -1,5 +1,6 @@
 For good performance, be sure to use disk cache for remote content:
 
-  duiviewer -cache WebBrowser.qml
+  duiviewer -cache webbrowser.qml
 
 Otherwise everything always re-loads over the network.
+
diff --git a/demos/declarative/webbrowser/WebBrowser.qml b/demos/declarative/webbrowser/WebBrowser.qml
deleted file mode 100644
index ead0ad3..0000000
--- a/demos/declarative/webbrowser/WebBrowser.qml
+++ /dev/null
@@ -1,175 +0,0 @@
-<?qtfx namespacepath:=content?>
-<Item width="320" height="500" id="webbrowser" state="Normal">
-    <properties><Property name="url" value="http://www.qtsoftware.com"/></properties>
-    <Script>
-        function zoomOut() {
-            webbrowser.state = "ZoomedOut";
-        }
-        function toggleZoom() {
-            if(webbrowser.state == "ZoomedOut") {
-                flick.centerX = webview.mouseX;
-                flick.centerY = webview.mouseY;
-                webbrowser.state = "Normal";
-            } else {
-                zoomOut();
-            }
-        }
-    </Script>
-
-    <Item id="webpanel" anchors.fill="{parent}" clip="true">
-        <Rect color="#555555" anchors.fill="{parent}"/>
-        <Image src="content/pics/softshadow-bottom.png" width="{webpanel.width}" height="16" />
-        <Image src="content/pics/softshadow-top.png" width="{webpanel.width}" anchors.bottom="{footer.top}" height="16" />
-        <RectSoftShadow x="{-flick.xPosition}" y="{-flick.yPosition}"
-            width="{webview.width*webview.scale}" height="{flick.y+webview.height*webview.scale}"/>
-        <Item id="headerspace" width="{parent.width}" height="60" z="1">
-            <Image id="header" width="{parent.width}" state="normal"
-                    x="{flick.xPosition &lt; 0
-                                ? -flick.xPosition
-                                : flick.xPosition &gt; flick.viewportWidth-flick.width
-                                    ? -flick.xPosition+flick.viewportWidth-flick.width
-                                    : 0}"
-                    y="{flick.yPosition &lt; 0 ? -flick.yPosition : progressoff*(flick.yPosition>height?-height:-flick.yPosition)}"
-                    height="60" src="content/pics/header.png">
-                <Text id="header_text" text="{webview.title!='' || webview.progress == 1.0 ? webview.title : 'Loading...'}"
-                    color="#000000"
-                    font.family="Helvetica" font.size="9" font.bold="true" elide="ElideRight"
-                    anchors.left="{header.left}" anchors.right="{header.right}"
-                    anchors.leftMargin="4" anchors.rightMargin="4"
-                    anchors.top="{header.top}" anchors.topMargin="4" hAlign="AlignHCenter"/>
-                <Item anchors.top="{header_text.bottom}" anchors.topMargin="2" anchors.bottom="{parent.bottom}" width="{parent.width}">
-                    <Item id="urlbox" anchors.left="{parent.left}" anchors.leftMargin="12" anchors.right="{parent.right}" anchors.rightMargin="12" height="31" anchors.top="{parent.top}" clip="true">
-                        <Image src="content/pics/addressbar.sci" anchors.fill="{urlbox}"/>
-                        <Image id="urlboxhl" src="content/pics/addressbar-filled.sci" opacity="{1-header.progressoff}" clip="true" width="{parent.width*webview.progress}" height="{parent.height}"/>
-                        <KeyProxy id="proxy" anchors.left="{urlbox.left}" anchors.fill="{urlbox}" focusable="true" targets="{[keyActions,editurl]}"/>
-                        <KeyActions id="keyActions" return="webbrowser.url = editurl.text; proxy.focus=false;"/>
-                        <TextEdit id="editurl" color="#555555" text="{webview.url == '' ? ' ' : webview.url}"
-                            anchors.left="{urlbox.left}" anchors.right="{urlbox.right}" anchors.leftMargin="6"
-                            anchors.verticalCenter="{urlbox.verticalCenter}" anchors.verticalCenterOffset="1"
-                            font.size="11" wrap="false" opacity="0"/>
-                        <Text id="showurl" color="#555555" text="{webview.url == '' ? ' ' : webview.url}"
-                            anchors.left="{urlbox.left}" anchors.right="{urlbox.right}" anchors.leftMargin="6"
-                            anchors.verticalCenter="{urlbox.verticalCenter}" anchors.verticalCenterOffset="1"
-                            font.size="11" />
-                    </Item>
-                    <MouseRegion anchors.fill="{urlbox}" onClicked="proxy.focus=true"/>
-                </Item>
-                <properties>
-                    <Property name="progressoff" value="1" type="Real"/>
-                </properties>
-                <states>
-                    <State name="normal" when="{webview.progress == 1.0}">
-                        <SetProperty target="{header}" property="progressoff" value="1"/>
-                    </State>
-                    <State name="progressshown" when="{webview.progress &lt; 1.0}">
-                        <SetProperty target="{header}" property="progressoff" value="0"/>
-                    </State>
-                </states>
-                <transitions>
-                    <Transition>
-                        <NumericAnimation target="{header}" properties="progressoff" easing="easeInOutQuad" duration="300"/>
-                    </Transition>
-                </transitions>
-            </Image>
-        </Item>
-        <Flickable id="flick"
-                anchors.top="{headerspace.bottom}" anchors.bottom="{footer.top}"
-                anchors.left="{parent.left}" anchors.right="{parent.right}"
-                width="{parent.width}"
-                viewportWidth="{Math.max(parent.width,webview.width*webview.scale)}"
-                viewportHeight="{Math.max(parent.height,webview.height*webview.scale)}"
-                >
-            <properties>
-                <Property name="centerX" value="0" type="Real"/>
-                <Property name="centerY" value="0" type="Real"/>
-            </properties>
-            <WebView id="webview"
-                cacheSize="4000000"
-                smooth="true"
-                url="{webbrowser.url}"
-                onDoubleClick="toggleZoom()"
-                focusable="true"
-                focus="true"
-                idealWidth="{flick.width}"
-                idealHeight="{flick.height/scale}"
-                onUrlChanged="flick.xPosition=0; flick.yPosition=0; zoomOut()"
-                scale="{(width > 0) ? flick.width/width*zoomedout+(1-zoomedout) : 1}"
-                >
-                <properties>
-                    <Property name="zoomedout" type="real" value="1"/>
-                </properties>
-            </WebView>
-            <Rect id="webviewTint" anchors.fill="{webview}" color="black" opacity="0">
-                <MouseRegion anchors.fill="{webviewTint}" onClicked="proxy.focus=false"/>
-            </Rect>
-        </Flickable>
-        <Image id="footer" width="{parent.width}" anchors.bottom="{parent.bottom}"
-                height="43" src="content/pics/footer.png">
-            <Rect y="-1" width="{parent.width}" height="1" color="#555555"/>
-            <Item id="backbutton" anchors.right="{reload.left}" anchors.rightMargin="10" anchors.verticalCenter="{parent.verticalCenter}" width="{back_e.width}" height="{back_e.height}">
-                <Image anchors.fill="{parent}" id="back_e" src="content/pics/back.png" />
-                <Image anchors.fill="{parent}" id="back_d" src="content/pics/back-disabled.png" />
-                <states>
-                    <State name="Enabled" when="{webview.back.enabled==true}">
-                        <SetProperty target="{back_e}" property="opacity" value="1"/>
-                        <SetProperty target="{back_d}" property="opacity" value="0"/>
-                    </State>
-                    <State name="Disabled" when="{webview.back.enabled==false}">
-                        <SetProperty target="{back_e}" property="opacity" value="0"/>
-                        <SetProperty target="{back_d}" property="opacity" value="1"/>
-                    </State>
-                </states>
-                <transitions>
-                    <Transition>
-                        <NumericAnimation properties="opacity" easing="easeInOutQuad" duration="300"/>
-                    </Transition>
-                </transitions>
-                <MouseRegion anchors.fill="{back_e}" onClicked="if (webview.back.enabled) webview.back.trigger()"/>
-            </Item>
-            <Image id="reload" src="content/pics/reload.png" anchors.horizontalCenter="{parent.horizontalCenter}" anchors.verticalCenter="{parent.verticalCenter}"/>
-            <MouseRegion anchors.fill="{reload}" onClicked="webview.reload.trigger()"/>
-            <Item id="forwardbutton" anchors.left="{reload.right}" anchors.leftMargin="10" anchors.verticalCenter="{parent.verticalCenter}" width="{forward_e.width}" height="{forward_e.height}">
-                <Image anchors.fill="{parent}" anchors.verticalCenter="{parent.verticalCenter}" id="forward_e" src="content/pics/forward.png" />
-                <Image anchors.fill="{parent}" id="forward_d" src="content/pics/forward-disabled.png" />
-                <states>
-                    <State name="Enabled" when="{webview.forward.enabled==true}">
-                        <SetProperty target="{forward_e}" property="opacity" value="1"/>
-                        <SetProperty target="{forward_d}" property="opacity" value="0"/>
-                    </State>
-                    <State name="Disabled" when="{webview.forward.enabled==false}">
-                        <SetProperty target="{forward_e}" property="opacity" value="0"/>
-                        <SetProperty target="{forward_d}" property="opacity" value="1"/>
-                    </State>
-                </states>
-                <transitions>
-                    <Transition>
-                        <NumericAnimation properties="opacity" easing="easeInOutQuad" duration="320"/>
-                    </Transition>
-                </transitions>
-                <MouseRegion anchors.fill="{parent}" onClicked="if (webview.forward.enabled) webview.forward.trigger()"/>
-            </Item>
-        </Image>
-    </Item>
-    <states>
-        <State name="Normal">
-            <SetProperty target="{webview}" property="zoomedout" value="0"/>
-            <SetProperty target="{flick}" property="xPosition" value="{Math.min(webview.width-flick.width,Math.max(0,flick.centerX-flick.width/2))}"/>
-            <SetProperty target="{flick}" property="yPosition" value="{Math.min(webview.height-flick.height,Math.max(0,flick.centerY-flick.height/2))}"/>
-        </State>
-        <State name="ZoomedOut">
-            <SetProperty target="{webview}" property="zoomedout" value="1"/>
-        </State>
-    </states>
-    <transitions>
-        <Transition>
-            <SequentialAnimation>
-                <SetPropertyAction target="{webview}" property="smooth" value="false" />
-                <ParallelAnimation>
-                    <NumericAnimation target="{webview}" properties="zoomedout" easing="easeInOutQuad" duration="200"/>
-                    <NumericAnimation target="{flick}" properties="xPosition,yPosition" easing="easeInOutQuad" duration="200"/>
-                </ParallelAnimation>
-                <SetPropertyAction target="{webview}" property="smooth" value="true" />
-            </SequentialAnimation>
-        </Transition>
-    </transitions>
-</Item>
diff --git a/demos/declarative/webbrowser/content/pics/addressbar-filled.png b/demos/declarative/webbrowser/content/pics/addressbar-filled.png
index 2abcb0c..d8452ec 100644
--- a/demos/declarative/webbrowser/content/pics/addressbar-filled.png
+++ b/demos/declarative/webbrowser/content/pics/addressbar-filled.png
diff --git a/demos/declarative/webbrowser/content/pics/addressbar.png b/demos/declarative/webbrowser/content/pics/addressbar.png
index f5cf17e..3278f58 100644
--- a/demos/declarative/webbrowser/content/pics/addressbar.png
+++ b/demos/declarative/webbrowser/content/pics/addressbar.png
diff --git a/demos/declarative/webbrowser/content/pics/back-disabled.png b/demos/declarative/webbrowser/content/pics/back-disabled.png
index 281b6f3..91b9e76 100644
--- a/demos/declarative/webbrowser/content/pics/back-disabled.png
+++ b/demos/declarative/webbrowser/content/pics/back-disabled.png
diff --git a/demos/declarative/webbrowser/content/pics/back.png b/demos/declarative/webbrowser/content/pics/back.png
index e6546c2..9988dd3 100644
--- a/demos/declarative/webbrowser/content/pics/back.png
+++ b/demos/declarative/webbrowser/content/pics/back.png
diff --git a/demos/declarative/webbrowser/content/pics/footer.png b/demos/declarative/webbrowser/content/pics/footer.png
index ae68bf7..8391a93 100644
--- a/demos/declarative/webbrowser/content/pics/footer.png
+++ b/demos/declarative/webbrowser/content/pics/footer.png
diff --git a/demos/declarative/webbrowser/content/pics/forward-disabled.png b/demos/declarative/webbrowser/content/pics/forward-disabled.png
index f32841a..cb87f4f 100644
--- a/demos/declarative/webbrowser/content/pics/forward-disabled.png
+++ b/demos/declarative/webbrowser/content/pics/forward-disabled.png
diff --git a/demos/declarative/webbrowser/content/pics/forward.png b/demos/declarative/webbrowser/content/pics/forward.png
index 2da9631..83870ee 100644
--- a/demos/declarative/webbrowser/content/pics/forward.png
+++ b/demos/declarative/webbrowser/content/pics/forward.png
diff --git a/demos/declarative/webbrowser/content/pics/header.png b/demos/declarative/webbrowser/content/pics/header.png
index 7211bfc..26588c3 100644
--- a/demos/declarative/webbrowser/content/pics/header.png
+++ b/demos/declarative/webbrowser/content/pics/header.png
diff --git a/demos/declarative/webbrowser/content/pics/reload.png b/demos/declarative/webbrowser/content/pics/reload.png
index a4fca0c..45b5535 100644
--- a/demos/declarative/webbrowser/content/pics/reload.png
+++ b/demos/declarative/webbrowser/content/pics/reload.png
diff --git a/demos/declarative/webbrowser/webbrowser.qml b/demos/declarative/webbrowser/webbrowser.qml
new file mode 100644
index 0000000..7618f4d
--- /dev/null
+++ b/demos/declarative/webbrowser/webbrowser.qml
@@ -0,0 +1,175 @@
+<?qtfx namespacepath:=content?>
+<Item width="640" height="480" id="WebBrowser" state="Normal">
+    <properties><Property name="url" value="http://www.qtsoftware.com"/></properties>
+    <Script>
+        function zoomOut() {
+            WebBrowser.state = "ZoomedOut";
+        }
+        function toggleZoom() {
+            if(WebBrowser.state == "ZoomedOut") {
+                Flick.centerX = WebView.mouseX;
+                Flick.centerY = WebView.mouseY;
+                WebBrowser.state = "Normal";
+            } else {
+                zoomOut();
+            }
+        }
+    </Script>
+
+    <Item id="WebPanel" anchors.fill="{parent}" clip="true">
+        <Rect color="#555555" anchors.fill="{parent}"/>
+        <Image src="content/pics/softshadow-bottom.png" width="{WebPanel.width}" height="16" />
+        <Image src="content/pics/softshadow-top.png" width="{WebPanel.width}" anchors.bottom="{Footer.top}" height="16" />
+        <RectSoftShadow x="{-Flick.xPosition}" y="{-Flick.yPosition}"
+            width="{WebView.width*WebView.scale}" height="{Flick.y+WebView.height*WebView.scale}"/>
+        <Item id="HeaderSpace" width="{parent.width}" height="60" z="1">
+            <Image id="Header" width="{parent.width}" state="Normal"
+                    x="{Flick.xPosition &lt; 0
+                                ? -Flick.xPosition
+                                : Flick.xPosition &gt; Flick.viewportWidth-Flick.width
+                                    ? -Flick.xPosition+Flick.viewportWidth-Flick.width
+                                    : 0}"
+                    y="{Flick.yPosition &lt; 0 ? -Flick.yPosition : progressOff*(Flick.yPosition>height?-height:-Flick.yPosition)}"
+                    height="64" src="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"
+                    anchors.left="{Header.left}" anchors.right="{Header.right}"
+                    anchors.leftMargin="4" anchors.rightMargin="4"
+                    anchors.top="{Header.top}" anchors.topMargin="4" hAlign="AlignHCenter"/>
+                <Item anchors.top="{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}"/>
+                        <KeyProxy id="proxy" anchors.left="{UrlBox.left}" anchors.fill="{UrlBox}" focusable="true" targets="{[keyActions,EditUrl]}"/>
+                        <KeyActions id="keyActions" return="WebBrowser.url = EditUrl.text; proxy.focus=false;"/>
+                        <TextEdit id="EditUrl" color="#555555" text="{WebView.url == '' ? ' ' : WebView.url}"
+                            anchors.left="{UrlBox.left}" anchors.right="{UrlBox.right}" anchors.leftMargin="6"
+                            anchors.verticalCenter="{UrlBox.verticalCenter}" anchors.verticalCenterOffset="1"
+                            font.size="11" wrap="false" opacity="0"/>
+                        <Text id="ShowUrl" color="#555555" text="{WebView.url == '' ? ' ' : WebView.url}"
+                            anchors.left="{UrlBox.left}" anchors.right="{UrlBox.right}" anchors.leftMargin="6"
+                            anchors.verticalCenter="{UrlBox.verticalCenter}" anchors.verticalCenterOffset="1"
+                            font.size="11" />
+                    </Item>
+                    <MouseRegion anchors.fill="{UrlBox}" onClicked="proxy.focus=true"/>
+                </Item>
+                <properties>
+                    <Property name="progressOff" value="1" type="Real"/>
+                </properties>
+                <states>
+                    <State name="Normal" when="{WebView.progress == 1.0}">
+                        <SetProperty target="{Header}" property="progressOff" value="1"/>
+                    </State>
+                    <State name="ProgressShown" when="{WebView.progress &lt; 1.0}">
+                        <SetProperty target="{Header}" property="progressOff" value="0"/>
+                    </State>
+                </states>
+                <transitions>
+                    <Transition>
+                        <NumericAnimation target="{Header}" properties="progressOff" easing="easeInOutQuad" duration="300"/>
+                    </Transition>
+                </transitions>
+            </Image>
+        </Item>
+        <Flickable id="Flick"
+                anchors.top="{HeaderSpace.bottom}" anchors.bottom="{Footer.top}"
+                anchors.left="{parent.left}" anchors.right="{parent.right}"
+                width="{parent.width}"
+                viewportWidth="{Math.max(parent.width,WebView.width*WebView.scale)}"
+                viewportHeight="{Math.max(parent.height,WebView.height*WebView.scale)}"
+                >
+            <properties>
+                <Property name="centerX" value="0" type="Real"/>
+                <Property name="centerY" value="0" type="Real"/>
+            </properties>
+            <WebView id="WebView"
+                cacheSize="4000000"
+                smooth="true"
+                url="{WebBrowser.url}"
+                onDoubleClick="toggleZoom()"
+                focusable="true"
+                focus="true"
+                idealWidth="{Flick.width}"
+                idealHeight="{Flick.height/scale}"
+                onUrlChanged="Flick.xPosition=0; Flick.yPosition=0; zoomOut()"
+                scale="{(width > 0) ? Flick.width/width*zoomedOut+(1-zoomedOut) : 1}"
+                >
+                <properties>
+                    <Property name="zoomedOut" type="real" value="1"/>
+                </properties>
+            </WebView>
+            <Rect id="WebViewTint" anchors.fill="{WebView}" color="black" opacity="0">
+                <MouseRegion anchors.fill="{WebViewTint}" onClicked="proxy.focus=false"/>
+            </Rect>
+        </Flickable>
+        <Image id="Footer" width="{parent.width}" anchors.bottom="{parent.bottom}"
+                height="43" src="content/pics/footer.sci">
+            <Rect y="-1" width="{parent.width}" height="1" color="#555555"/>
+            <Item id="backbutton" anchors.right="{reload.left}" anchors.rightMargin="10" anchors.verticalCenter="{parent.verticalCenter}" width="{back_e.width}" height="{back_e.height}">
+                <Image anchors.fill="{parent}" id="back_e" src="content/pics/back.png" />
+                <Image anchors.fill="{parent}" id="back_d" src="content/pics/back-disabled.png" />
+                <states>
+                    <State name="Enabled" when="{WebView.back.enabled==true}">
+                        <SetProperty target="{back_e}" property="opacity" value="1"/>
+                        <SetProperty target="{back_d}" property="opacity" value="0"/>
+                    </State>
+                    <State name="Disabled" when="{WebView.back.enabled==false}">
+                        <SetProperty target="{back_e}" property="opacity" value="0"/>
+                        <SetProperty target="{back_d}" property="opacity" value="1"/>
+                    </State>
+                </states>
+                <transitions>
+                    <Transition>
+                        <NumericAnimation properties="opacity" easing="easeInOutQuad" duration="300"/>
+                    </Transition>
+                </transitions>
+                <MouseRegion anchors.fill="{back_e}" onClicked="if (WebView.back.enabled) WebView.back.trigger()"/>
+            </Item>
+            <Image id="reload" src="content/pics/reload.png" anchors.horizontalCenter="{parent.horizontalCenter}" anchors.verticalCenter="{parent.verticalCenter}"/>
+            <MouseRegion anchors.fill="{reload}" onClicked="WebView.reload.trigger()"/>
+            <Item id="forwardbutton" anchors.left="{reload.right}" anchors.leftMargin="10" anchors.verticalCenter="{parent.verticalCenter}" width="{forward_e.width}" height="{forward_e.height}">
+                <Image anchors.fill="{parent}" anchors.verticalCenter="{parent.verticalCenter}" id="forward_e" src="content/pics/forward.png" />
+                <Image anchors.fill="{parent}" id="forward_d" src="content/pics/forward-disabled.png" />
+                <states>
+                    <State name="Enabled" when="{WebView.forward.enabled==true}">
+                        <SetProperty target="{forward_e}" property="opacity" value="1"/>
+                        <SetProperty target="{forward_d}" property="opacity" value="0"/>
+                    </State>
+                    <State name="Disabled" when="{WebView.forward.enabled==false}">
+                        <SetProperty target="{forward_e}" property="opacity" value="0"/>
+                        <SetProperty target="{forward_d}" property="opacity" value="1"/>
+                    </State>
+                </states>
+                <transitions>
+                    <Transition>
+                        <NumericAnimation properties="opacity" easing="easeInOutQuad" duration="320"/>
+                    </Transition>
+                </transitions>
+                <MouseRegion anchors.fill="{parent}" onClicked="if (WebView.forward.enabled) WebView.forward.trigger()"/>
+            </Item>
+        </Image>
+    </Item>
+    <states>
+        <State name="Normal">
+            <SetProperty target="{WebView}" property="zoomedOut" value="0"/>
+            <SetProperty target="{Flick}" property="xPosition" value="{Math.min(WebView.width-Flick.width,Math.max(0,Flick.centerX-Flick.width/2))}"/>
+            <SetProperty target="{Flick}" property="yPosition" value="{Math.min(WebView.height-Flick.height,Math.max(0,Flick.centerY-Flick.height/2))}"/>
+        </State>
+        <State name="ZoomedOut">
+            <SetProperty target="{WebView}" property="zoomedOut" value="1"/>
+        </State>
+    </states>
+    <transitions>
+        <Transition>
+            <SequentialAnimation>
+                <SetPropertyAction target="{WebView}" property="smooth" value="false" />
+                <ParallelAnimation>
+                    <NumericAnimation target="{WebView}" properties="zoomedOut" easing="easeInOutQuad" duration="200"/>
+                    <NumericAnimation target="{Flick}" properties="xPosition,yPosition" easing="easeInOutQuad" duration="200"/>
+                </ParallelAnimation>
+                <SetPropertyAction target="{WebView}" property="smooth" value="true" />
+            </SequentialAnimation>
+        </Transition>
+    </transitions>
+</Item>
diff --git a/doc/src/declarative/components.qdoc b/doc/src/declarative/components.qdoc
index b5c5ae7..9a6f2dd 100644
--- a/doc/src/declarative/components.qdoc
+++ b/doc/src/declarative/components.qdoc
@@ -3,7 +3,7 @@
 \target components
 \title Components
 
-A \b component is a reusable, encapsulated Qml element with a well-defined interface.
+A \bold component is a reusable, encapsulated Qml element with a well-defined interface.
 
 Writing and using components allows you to:
 \list
diff --git a/doc/src/declarative/elements.qdoc b/doc/src/declarative/elements.qdoc
index 076ef13..afc3726 100644
--- a/doc/src/declarative/elements.qdoc
+++ b/doc/src/declarative/elements.qdoc
@@ -42,6 +42,7 @@ The following table lists the Qml elements provided by the Qt Declarative module
 \o \l Script
 \o \l Bind
 \o \l Connection
+\o \l Component
 \o \l ListModel
 \o \l DateTimeFormatter
 \endlist
diff --git a/doc/src/declarative/tutorial2.qdoc b/doc/src/declarative/tutorial2.qdoc
index 8898e68..db846b8 100644
--- a/doc/src/declarative/tutorial2.qdoc
+++ b/doc/src/declarative/tutorial2.qdoc
@@ -53,7 +53,7 @@ The root element of our component is an \c Item. It is the most basic 'Fx' eleme
 </properties>
 \endcode
 
-We declare a \c color property. This property is accessible from  \i outside our component, this allows us to instantiate the cells with different colors.
+We declare a \c color property. This property is accessible from  \e outside our component, this allows us to instantiate the cells with different colors.
 
 \code
 <Rect anchors.fill="{parent}" color="{CellContainer.color}"/>
@@ -71,7 +71,7 @@ We bind the \c color property of this \c Rect to the color property of our compo
 
 In order to change the color of the text when clicking on a cell, we create a \c MouseRegion element with the same size as its parent.
 
-The \c onClick property sets the \c color property of the element named \i HelloText to our cell color.
+The \c onClick property sets the \c color property of the element named \e HelloText to our cell color.
 
 \section2 The main QML file
 
diff --git a/doc/src/images/declarative-removebutton-close.png b/doc/src/images/declarative-removebutton-close.png
new file mode 100644
index 0000000..d73f8e1
--- /dev/null
+++ b/doc/src/images/declarative-removebutton-close.png
diff --git a/doc/src/images/declarative-removebutton-open.png b/doc/src/images/declarative-removebutton-open.png
new file mode 100644
index 0000000..b54d797
--- /dev/null
+++ b/doc/src/images/declarative-removebutton-open.png
diff --git a/doc/src/images/declarative-removebutton.png b/doc/src/images/declarative-removebutton.png
new file mode 100644
index 0000000..f783e6a
--- /dev/null
+++ b/doc/src/images/declarative-removebutton.png
diff --git a/doc/src/images/declarative-roundrect.png b/doc/src/images/declarative-roundrect.png
new file mode 100644
index 0000000..607da81
--- /dev/null
+++ b/doc/src/images/declarative-roundrect.png
diff --git a/doc/src/tutorials/declarative.qdoc b/doc/src/tutorials/declarative.qdoc
new file mode 100644
index 0000000..be8fad9
--- /dev/null
+++ b/doc/src/tutorials/declarative.qdoc
@@ -0,0 +1,470 @@
+/****************************************************************************
+**
+** Copyright (C) 2009 Nokia Corporation and/or its subsidiary(-ies).
+** Contact: Qt Software Information (qt-info@nokia.com)
+**
+** This file is part of the documentation 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$
+**
+****************************************************************************/
+
+/*!
+    \page tutorials-declarative-contacts.html
+    \startpage {index.html}{Qt Reference Documentation}
+    \nextpage {tutorials/declarative/contacts/part1}{Chapter 1}
+
+    \title Declarative UI Tutorial
+    \ingroup howto
+    \ingroup tutorials
+    \brief An introduction to using Qt Declarative UI to put together a
+    simple animated application.
+
+    \omit 
+    At the time of writing the tutorial Declarative UI was still under
+    development.  It is extremely likely that an update will be required
+    prior to 4.6 release.
+    \endomit
+
+    This tutorial gives an introduction to using the Qt Declarative UI
+    animation framework.
+
+    In this process we will learn about some of the basics of using
+    Declarative UI, such as
+
+    \list
+    \o Basic drawing
+    \o States and Transitions
+    \o Reuse of components
+    \o Models and Views
+    \endlist
+
+    An existing knowledge of Qt is not required.
+
+    The tutorial's source code is located in Qt's
+    \c examples/declarative/tutorials/contacts directory.
+    It is split up into a number of sub directories, and within each
+    sub directory the files are numbered in an order of increasing features.
+
+    The code in this example is not compiled, but interpreted at run time.
+    This means you should use the duiviewer application provided with
+    Qt to run the examples.
+
+    \list 1
+    \o \l{tutorials/declarative/contacts/part1}{Drawing and Animation}
+    \o \l{tutorials/declarative/contacts/part2}{Reuse of QML components}
+    \o \l{tutorials/declarative/contacts/part3}{Models, Views and Delegates}
+    \o \l{tutorials/declarative/contacts/part4}{Other Tricks}
+    \endlist
+*/
+
+/*!
+    \page tutorials-declarative-contacts-part1.html
+    \contentspage {Declarative UI Tutorial}{Contents}
+    \nextpage {tutorials/declarative/contacts/part2}{Chapter 2}
+    \example tutorials/declarative/contacts/part1
+    \title Drawing and Animation
+    \tableofcontents
+
+    The first part of this tutorial covers basic drawing of elements on the
+    screen and causing them to animate.  The file 1_Drawing_and_Animation.qml
+    loads and displays each of the five stages of this tutorial in a single
+    window.  For now you don't need to worry about the contents of
+    1_Drawing_and_Animation.qml.
+
+    \section1 Drawing
+
+    In this first chapter we will build a button that indicates something
+    can be removed and asks for confirmation.  When clicked it will expand
+    from a small button with a trash can icon, to a wide button with a
+    confirm icon on the left, the text "Remove" in the middle, and a
+    cancel icon on the right.
+
+    \image declarative-removebutton.png
+
+    Because Declarative UI is declarative, you don't pass instructions on
+    what to paint in a sequential manner as you may be used to.  Instead
+    elements and how they appear on the screen are declared in much the
+    same was as elements on a web page are declared.
+
+    We will start by drawing a simple red rectangle with rounded corners.
+
+    \image declarative-roundrect.png
+
+    \code
+    <Rect id="removeButton"
+        width="30" height="30"
+        color="red"
+        radius="5"/>
+    \endcode
+
+    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
+    
+    \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
+
+    \list
+    \o color - The background color of the rectangle
+    \o tintColor - The overlay color of the rectangle
+    \o gradientColor - The color at the base of the rectangle to blend upwards
+    \o pen - The description of how to draw the border of the rectangle
+    \o radius - The corner radius used to draw rounded rectangles.
+    \endlist
+
+    \omit
+    For more information on the Rect element, see: TODO
+    \endomit
+
+    There are also a number of properties all QML components share.  To see
+    a full description of the base QML item, see {QFxItem}.  The rectangle
+    drawn in the above code uses the properties;
+
+    \list
+    \o id - An identifier of the component
+    \o width - the width of the component when drawn
+    \o height - the height of the component when drawn
+    \endlist
+
+    All items have properties to handle their position on the screen, size,
+    clipping, rotation, scale and layout in regards to other elements.  In
+    the current example width and height refer to how large to draw the
+    rectangle.  The identifier allows other components to refer to the
+    identified component.
+
+    Another important property of a component is its children.  All components
+    have a list of children.  When drawing, first any components earlier
+    siblings are drawn, then the component, then any of the components children.
+
+    \section1 Layout
+
+    The next step of the tutorial adds an image over the rectangle.
+
+    \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
+
+    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
+    Rect component is its children.  Some elements don't often have children
+    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
+
+    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
+    file in a relative directory to where the QML file was loaded from.
+
+    Also new in this code is the use of anchors.  In QML components can either
+    have their position and size specified explicitly using x, y, width
+    and height, or they can instead specify the size and position in relation
+    to elements either parent or sibling elements.  The Image component uses
+    a combination of both styles.  It has a fixed size, but specifies its
+    position to align to the right of its parent and for its vertical center
+    to align with the vertical center of its parent.  The braces "{}" are
+    used to indicate that the value is not a static value, but instead a
+    binding to an expression.  In this case it binds to the parent
+    element, which is a special identifier that always refers to the
+    parent component of a component.  The removeButton identifier can
+    be used interchangeably with parent in this case, however it must
+    always be a parent or sibling.  Because of this its most common to
+    use the parent identifier as it makes later refactoring of code easier.
+
+    Anchors are most useful when the size of items might change based on
+    the component state or contents.
+
+    \omit
+    See TODO for full list of anchor properties.
+    \endomit
+
+    At this point the initial state of the RemoveButton is complete.  A small
+    rounded rectangle with a trash icon.  The component also needs a
+    description of its open state:
+
+    \image declarative-removebutton-open.png
+
+    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
+
+    The rectangle with is now wider by 200 pixels.  Also the trashIcon has
+    been replaced with the confirm state children.  Normally we wouldn't
+    remove the trashIcon when developing an alternate state of the RemoveButton,
+    however since this is a tutorial its been done so that its easier to
+    understand the alternate state we are aiming for and how it relates to
+    transitioning between states.
+
+    We also introduce the Text element, which is used to display read only
+    text.  \omit see {Text} for more information on the text element \endomit
+    Because we want text to fill the space between the icons, rather than
+    a fixed with the left and right anchors are specified instead.  This
+    means as the parent removeButton gets wider, so will the text component.
+    It also means that if we animate a width change on the removeButton,
+    any bindings, that is the values specified by a braced expression such as
+    "{parent.left}" will be evaluated and animated as well.
+
+    \section1 Defining States
+
+    When designing a component with multiple states, it should be developed
+    with the initial state and the changes that would be made specified
+    as an additional state.  Its not possible to add new children to an
+    element when changing state, only changing the properties of existing
+    children.  This means that all possible child components should be included
+    in the initial state, and those that should not be visible in the initial
+    state should have their opacity set to zero.  Thus
+    for the RemoveButton we specify the starting size of the removeButton
+    and hide any items that should not initially be visible.
+
+    The code snippet below shows what the start of the duel state specification
+    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"/>
+    \endcode
+
+    The code above includes components from both states of the RemoveButton,
+    but by setting opacity="0" for the cancelIcon it means that the
+    components of the second state won't be drawn yet.
+    The base state of a component always has an empty name, however new
+    states can be added that describe how a component and its children
+    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
+
+    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
+    are changed so that the trash icon is now hidden and the other elements
+    are now visible.
+
+    \section1 Changing States
+
+    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
+
+    MouseRegion components handle mouse actions within their geometry.  This
+    geometry behaves the same way as painted components, such that children
+    cover their parents and later siblings will cover earlier siblings and
+    all the children of the earlier sibling, should they overlap.
+
+    When a component has a signal, such as clicked, the action for the signal
+    can be specified using on<SignalName>, as is done above.  In this
+    case when the clicked signal is emitted by the MouseRegion component,
+    a function called toggle() is called.  It might also have been written
+
+    \code
+    onClicked="removeButton.state='opened'"
+    \endcode
+
+    However in this case we are using a function because it allows multiple
+    mouse regions to use the same functionality, and also makes it
+    easier to specify complex behavior in response to a signal.
+
+    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
+
+    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
+
+    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
+    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
+
+    All QML components have a transitions property.  This describes how
+    properties of items within the component should change.  In this case
+    we specify that if the x, width or opacity of the removeButton or its
+    children change due to a change in state, that they should take 200ms
+    to complete their transition.
+
+    \omit
+        TODO More on types of animation
+    \endomit
+
+    In the next chapter we will show how we can use the remove button in
+    other QML components.
+*/
diff --git a/examples/declarative/dial/DialLibrary/Dial.qml b/examples/declarative/dial/DialLibrary/Dial.qml
index acff119..e1b9f18 100644
--- a/examples/declarative/dial/DialLibrary/Dial.qml
+++ b/examples/declarative/dial/DialLibrary/Dial.qml
@@ -1,12 +1,11 @@
 <Item width="210" height="210">
     <properties><Property name="value" type="real" value="0"/></properties>
     <Image id="Background" src="background.svg"/>
-    <Item x="102" y="98" rotation="-130">
+    <Item id="Needle" x="102" y="98" rotation="-130">
         <rotation><Follow spring="1.4" damping=".15" source="{Math.min(Math.max(-130, value*2.2 - 130), 133)}"/></rotation>
         <Image src="needle.svg" x="-102" y="-98"/>
     </Item>
-    <Item x="104" y="102" rotation="-130">
-        <rotation><Follow spring="1.4" damping=".15" source="{Math.min(Math.max(-130, value*2.2 - 130), 133)}"/></rotation>
+    <Item x="104" y="102" rotation="{Needle.rotation}">
         <Image src="needle_shadow.svg" x="-104" y="-102"/>
     </Item>
     <Image src="overlay.svg"/>
diff --git a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/1_Drawing_an_animation.qml b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/1_Drawing_an_animation.qml
deleted file mode 100644
index 06c9f5a..0000000
--- a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/1_Drawing_an_animation.qml
+++ /dev/null
@@ -1,22 +0,0 @@
-<Rect id="page" width="240" height="180" color='black'>
-    <RemoveButton1
-        y="5"
-        anchors.right="{page.right}"
-        anchors.rightMargin="5"/>
-    <RemoveButton2
-        y="40"
-        anchors.right="{page.right}"
-        anchors.rightMargin="5"/>
-    <RemoveButton3
-        y="75"
-        anchors.right="{page.right}"
-        anchors.rightMargin="5"/>
-    <RemoveButton4
-        y="110"
-        anchors.right="{page.right}"
-        anchors.rightMargin="5"/>
-    <RemoveButton5
-        y="145"
-        anchors.right="{page.right}"
-        anchors.rightMargin="5"/>
-</Rect>
diff --git a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/1_Drawing_and_animation.qml b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/1_Drawing_and_animation.qml
new file mode 100644
index 0000000..4ea77f3
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/1_Drawing_and_animation.qml
@@ -0,0 +1,9 @@
+<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>
diff --git a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/GroupBox.qml b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/GroupBox.qml
new file mode 100644
index 0000000..01f26ee
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/GroupBox.qml
@@ -0,0 +1,17 @@
+<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>
diff --git a/examples/declarative/tutorials/contacts/2_Reuse/2_Reuse.qml b/examples/declarative/tutorials/contacts/2_Reuse/2_Reuse.qml
index 29fdf51..13bc209 100644
--- a/examples/declarative/tutorials/contacts/2_Reuse/2_Reuse.qml
+++ b/examples/declarative/tutorials/contacts/2_Reuse/2_Reuse.qml
@@ -1,34 +1,12 @@
-<Rect id="page" width="480" height="360" color='black'>
+<Rect id="page" width="{layout.width}" height="{layout.height}" color='white'>
     <properties>
         <Property name="mouseGrabbed" value="false"/>
     </properties>
-    <Item x="0" y="0" width="240" height="180">
-        <ContactField1
-            y="5"
-            anchors.left="{parent.left}" anchors.leftMargin="5"
-            anchors.right="{parent.right}" anchors.rightMargin="5"/>
-        <ContactField2
-            y="40"
-            anchors.left="{parent.left}" anchors.leftMargin="5"
-            anchors.right="{parent.right}" anchors.rightMargin="5"/>
-        <ContactField3
-            y="75"
-            anchors.left="{parent.left}" anchors.leftMargin="5"
-            anchors.right="{parent.right}" anchors.rightMargin="5"
-            label="Phone Number"
-            icon="../shared/pics/phone.png"
-            value="123123"/>
-    </Item>
-    <Rect pen.color="gray" x="5" y="115" width="230" height="180" radius="5">
-        <Contact3 anchors.fill="{parent}"
-                label="Brian"
-                phone="123123"
-                email="brian@bigisp.com" />
-    </Rect>
-    <Rect pen.color="gray" x="245" y="115" width="230" height="180" radius="5">
-        <Contact4 anchors.fill="{parent}"
-                label="Brian"
-                phone="123123"
-                email="brian@bigisp.com" />
-    </Rect>
+    <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>
diff --git a/examples/declarative/tutorials/contacts/2_Reuse/Contact3.qml b/examples/declarative/tutorials/contacts/2_Reuse/Contact3.qml
index fdd0c6d..2933437 100644
--- a/examples/declarative/tutorials/contacts/2_Reuse/Contact3.qml
+++ b/examples/declarative/tutorials/contacts/2_Reuse/Contact3.qml
@@ -1,4 +1,6 @@
-<Item id="contactDetails">
+<Item id="contactDetails"
+    width="230"
+    height="{layout.height}">
     <properties>
         <Property name="contactid" value=""/>
         <Property name="label" onValueChanged="labelField.value = label"/>
diff --git a/examples/declarative/tutorials/contacts/2_Reuse/Contact4.qml b/examples/declarative/tutorials/contacts/2_Reuse/Contact4.qml
index b1882da..9e988c0 100644
--- a/examples/declarative/tutorials/contacts/2_Reuse/Contact4.qml
+++ b/examples/declarative/tutorials/contacts/2_Reuse/Contact4.qml
@@ -1,4 +1,6 @@
-<Item id="contactDetails">
+<Item id="contactDetails"
+    width="230"
+    height="{layout.height}">
     <properties>
         <Property name="contactid" value=""/>
         <Property name="label" onValueChanged="labelField.value = label"/>
diff --git a/examples/declarative/tutorials/contacts/2_Reuse/ContactField1.qml b/examples/declarative/tutorials/contacts/2_Reuse/ContactField1.qml
index 5547a3b..7bfdd28 100644
--- a/examples/declarative/tutorials/contacts/2_Reuse/ContactField1.qml
+++ b/examples/declarative/tutorials/contacts/2_Reuse/ContactField1.qml
@@ -1,17 +1,18 @@
 <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-70}"
-        anchors.right="{removeButton.left}" anchors.rightMargin="5"
+        width="{contactField.width-80}"
+        anchors.right="{removeButton.left}" anchors.rightMargin="10"
         anchors.verticalCenter="{parent.verticalCenter}"
         font.bold="true"
-        color="white"
-        text="Phone Number"/>
+        color="black"
+        text="123123"/>
     <Image src="../shared/pics/phone.png"
-        anchors.right="{fieldText.left}" anchors.rightMargin="5"
+        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
index b69e03c..7ec3e4d 100644
--- a/examples/declarative/tutorials/contacts/2_Reuse/ContactField2.qml
+++ b/examples/declarative/tutorials/contacts/2_Reuse/ContactField2.qml
@@ -1,5 +1,6 @@
 <Item id="contactField"
     clip="true"
+    width="230"
     height="30">
     <RemoveButton2 id="removeButton"
         anchors.right="{parent.right}"
@@ -7,13 +8,13 @@
         expandedWidth="{contactField.width}"
         onConfirmed="print('Clear field text'); fieldText.text=''"/>
     <Text id="fieldText"
-        width="{contactField.width-70}"
-        anchors.right="{removeButton.left}" anchors.rightMargin="5"
+        width="{contactField.width-80}"
+        anchors.right="{removeButton.left}" anchors.rightMargin="10"
         anchors.verticalCenter="{parent.verticalCenter}"
         font.bold="true"
-        color="white"
-        text="Phone Number"/>
+        color="black"
+        text="123123"/>
     <Image src="../shared/pics/phone.png"
-        anchors.right="{fieldText.left}" anchors.rightMargin="5"
+        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
index f3a11f9..cef25ce 100644
--- a/examples/declarative/tutorials/contacts/2_Reuse/ContactField3.qml
+++ b/examples/declarative/tutorials/contacts/2_Reuse/ContactField3.qml
@@ -1,9 +1,10 @@
 <Item id="contactField"
     clip="true"
+    width="230"
     height="30">
     <properties>
-        <Property name="label"/>
-        <Property name="icon"/>
+        <Property name="label" value="Name"/>
+        <Property name="icon" value="../shared/pics/phone.png"/>
         <Property name="value"/>
     </properties>
     <RemoveButton3 id="removeButton"
diff --git a/examples/declarative/tutorials/contacts/2_Reuse/FieldText3.qml b/examples/declarative/tutorials/contacts/2_Reuse/FieldText3.qml
index c807aed..97c0772 100644
--- a/examples/declarative/tutorials/contacts/2_Reuse/FieldText3.qml
+++ b/examples/declarative/tutorials/contacts/2_Reuse/FieldText3.qml
@@ -1,7 +1,7 @@
 <Rect id="fieldText"
     height="30"
     radius="5"
-    color="black">
+    color="white">
     <properties>
         <Property
             name="text"
@@ -43,10 +43,10 @@
         src="../shared/pics/ok.png"
         opacity="0"/>
     <TextEdit id="textEdit"
-        anchors.left="{parent.left}" anchors.leftMargin="0"
-        anchors.right="{parent.right}" anchors.rightMargin="0"
+        anchors.left="{parent.left}" anchors.leftMargin="5"
+        anchors.right="{parent.right}" anchors.rightMargin="5"
         anchors.verticalCenter="{parent.verticalCenter}"
-        color="white"
+        color="black"
         font.bold="true"
         readOnly="true"
         wrap="false"
@@ -75,13 +75,11 @@
         <State name="editing">
             <SetProperty target="{confirmIcon}" property="opacity" value="1"/>
             <SetProperty target="{cancelIcon}" property="opacity" value="1"/>
-            <SetProperty target="{fieldText}" property="color" value="white"/>
-            <SetProperty target="{textEdit}" property="color" value="black"/>
             <SetProperty target="{textEdit}" property="readOnly" value="false"/>
             <SetProperty target="{textEdit}" property="focus" value="true"/>
             <SetProperty target="{editRegion}" property="opacity" value="0"/>
-            <SetProperty target="{textEdit.anchors}" property="leftMargin" value="34"/>
-            <SetProperty target="{textEdit.anchors}" property="rightMargin" value="34"/>
+            <SetProperty target="{textEdit.anchors}" property="leftMargin" value="39"/>
+            <SetProperty target="{textEdit.anchors}" property="rightMargin" value="39"/>
         </State>
     </states>
     <transitions>
diff --git a/examples/declarative/tutorials/contacts/2_Reuse/FieldText4.qml b/examples/declarative/tutorials/contacts/2_Reuse/FieldText4.qml
index a4df42b..45bb18d 100644
--- a/examples/declarative/tutorials/contacts/2_Reuse/FieldText4.qml
+++ b/examples/declarative/tutorials/contacts/2_Reuse/FieldText4.qml
@@ -1,7 +1,7 @@
 <Rect id="fieldText"
     height="30"
     radius="5"
-    color="black">
+    color="white">
     <properties>
         <Property
             name="text"
@@ -48,10 +48,10 @@
         src="../shared/pics/ok.png"
         opacity="0"/>
     <TextEdit id="textEdit"
-        anchors.left="{parent.left}" anchors.leftMargin="0"
-        anchors.right="{parent.right}" anchors.rightMargin="0"
+        anchors.left="{parent.left}" anchors.leftMargin="5"
+        anchors.right="{parent.right}" anchors.rightMargin="5"
         anchors.verticalCenter="{parent.verticalCenter}"
-        color="white"
+        color="black"
         font.bold="true"
         readOnly="true"
         wrap="false"
@@ -80,13 +80,11 @@
         <State name="editing">
             <SetProperty target="{confirmIcon}" property="opacity" value="1"/>
             <SetProperty target="{cancelIcon}" property="opacity" value="1"/>
-            <SetProperty target="{fieldText}" property="color" value="white"/>
-            <SetProperty target="{textEdit}" property="color" value="black"/>
             <SetProperty target="{textEdit}" property="readOnly" value="false"/>
             <SetProperty target="{textEdit}" property="focus" value="true"/>
             <SetProperty target="{editRegion}" property="opacity" value="0"/>
-            <SetProperty target="{textEdit.anchors}" property="leftMargin" value="34"/>
-            <SetProperty target="{textEdit.anchors}" property="rightMargin" value="34"/>
+            <SetProperty target="{textEdit.anchors}" property="leftMargin" value="39"/>
+            <SetProperty target="{textEdit.anchors}" property="rightMargin" value="39"/>
         </State>
     </states>
     <transitions>
diff --git a/examples/declarative/tutorials/contacts/2_Reuse/GroupBox.qml b/examples/declarative/tutorials/contacts/2_Reuse/GroupBox.qml
new file mode 100644
index 0000000..01f26ee
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/2_Reuse/GroupBox.qml
@@ -0,0 +1,17 @@
+<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>
diff --git a/examples/declarative/tutorials/contacts/3_Collections/3_Collections.qml b/examples/declarative/tutorials/contacts/3_Collections/3_Collections.qml
index ed2a3dc..6907676 100644
--- a/examples/declarative/tutorials/contacts/3_Collections/3_Collections.qml
+++ b/examples/declarative/tutorials/contacts/3_Collections/3_Collections.qml
@@ -1,8 +1,37 @@
-<Rect id="page" width="480" height="640" color='black'>
-    <properties>
-        <Property name="mouseGrabbed" value="false"/>
-    </properties>
-    <ContactView1 x="0" y="0" width="240" height="320"/>
-    <ContactView2 x="240" y="0" width="240" height="320"/>
-    <ContactView3 x="0" y="320" width="240" height="320"/>
+<Rect 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>
diff --git a/examples/declarative/tutorials/contacts/3_Collections/ContactView1.qml b/examples/declarative/tutorials/contacts/3_Collections/ContactView1.qml
index d6f7bad..6606094 100644
--- a/examples/declarative/tutorials/contacts/3_Collections/ContactView1.qml
+++ b/examples/declarative/tutorials/contacts/3_Collections/ContactView1.qml
@@ -1,4 +1,9 @@
-<Item id="contacts">
+<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}">
@@ -6,10 +11,10 @@
         </SqlQuery>
         <Component id="contactDelegate">
             <Text
-                x="40" y="12"
-                width="{contactListView.width-30}"
+                x="45" y="12"
+                width="{contactListView.width-45}"
                 height="30"
-                color="white"
+                color="black"
                 font.bold="true"
                 text="{model.label}"/>
         </Component>
@@ -18,5 +23,6 @@
         anchors.fill="{parent}"
         clip="true"
         model="{contactList}"
-        delegate="{contactDelegate}"/>
+        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
index da1e5db..97868e3 100644
--- a/examples/declarative/tutorials/contacts/3_Collections/ContactView2.qml
+++ b/examples/declarative/tutorials/contacts/3_Collections/ContactView2.qml
@@ -1,4 +1,9 @@
-<Item id="contacts">
+<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}">
@@ -9,10 +14,10 @@
                 x="0"
                 width="{ListView.view.width}" height="34">
                 <Text id="label"
-                    x="40" y="12"
-                    width="{parent.width-30}" 
+                    x="45" y="12"
+                    width="{parent.width-45}" 
                     text="{model.label}"
-                    color="white"
+                    color="black"
                     font.bold="true">
                 </Text>
                 <MouseRegion
@@ -58,5 +63,6 @@
         anchors.bottom="{parent.bottom}"
         clip="true"
         model="{contactList}"
-        delegate="{contactDelegate}"/>
+        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
index a5d88a1..c15ece2 100644
--- a/examples/declarative/tutorials/contacts/3_Collections/ContactView3.qml
+++ b/examples/declarative/tutorials/contacts/3_Collections/ContactView3.qml
@@ -1,4 +1,9 @@
-<Item id="contacts">
+<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}">
@@ -9,10 +14,10 @@
                 x="0"
                 width="{ListView.view.width}" height="34">
                 <Text id="label"
-                    x="40" y="12"
-                    width="{parent.width-30}" 
+                    x="45" y="12"
+                    width="{parent.width-45}" 
                     text="{model.label}"
-                    color="white"
+                    color="black"
                     font.bold="true">
                 </Text>
                 <MouseRegion
@@ -63,5 +68,6 @@
         anchors.bottom="{parent.bottom}"
         clip="true"
         model="{contactList}"
-        delegate="{contactDelegate}"/>
+        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
index a4df42b..583c73e 100644
--- a/examples/declarative/tutorials/contacts/3_Collections/FieldText.qml
+++ b/examples/declarative/tutorials/contacts/3_Collections/FieldText.qml
@@ -1,7 +1,7 @@
 <Rect id="fieldText"
     height="30"
     radius="5"
-    color="black">
+    color="white">
     <properties>
         <Property
             name="text"
@@ -17,21 +17,21 @@
     <resources>
         <Script>
             function edit() {
-                if (!page.mouseGrabbed) {
+                if (!contacts.mouseGrabbed) {
                     fieldText.state='editing';
-                    page.mouseGrabbed=true;
+                    contacts.mouseGrabbed=true;
                 }
             }
             function confirm() {
                 fieldText.text = textEdit.text;
                 fieldText.state='';
-                page.mouseGrabbed=false;
+                contacts.mouseGrabbed=false;
                 fieldText.confirmed.emit();
             }
             function reset() {
                 textEdit.text = fieldText.text;
                 fieldText.state='';
-                page.mouseGrabbed=false;
+                contacts.mouseGrabbed=false;
             }
         </Script>
     </resources>
@@ -48,10 +48,10 @@
         src="../shared/pics/ok.png"
         opacity="0"/>
     <TextEdit id="textEdit"
-        anchors.left="{parent.left}" anchors.leftMargin="0"
-        anchors.right="{parent.right}" anchors.rightMargin="0"
+        anchors.left="{parent.left}" anchors.leftMargin="5"
+        anchors.right="{parent.right}" anchors.rightMargin="5"
         anchors.verticalCenter="{parent.verticalCenter}"
-        color="white"
+        color="black"
         font.bold="true"
         readOnly="true"
         wrap="false"
@@ -80,13 +80,11 @@
         <State name="editing">
             <SetProperty target="{confirmIcon}" property="opacity" value="1"/>
             <SetProperty target="{cancelIcon}" property="opacity" value="1"/>
-            <SetProperty target="{fieldText}" property="color" value="white"/>
-            <SetProperty target="{textEdit}" property="color" value="black"/>
             <SetProperty target="{textEdit}" property="readOnly" value="false"/>
             <SetProperty target="{textEdit}" property="focus" value="true"/>
             <SetProperty target="{editRegion}" property="opacity" value="0"/>
-            <SetProperty target="{textEdit.anchors}" property="leftMargin" value="34"/>
-            <SetProperty target="{textEdit.anchors}" property="rightMargin" value="34"/>
+            <SetProperty target="{textEdit.anchors}" property="leftMargin" value="39"/>
+            <SetProperty target="{textEdit.anchors}" property="rightMargin" value="39"/>
         </State>
     </states>
     <transitions>
diff --git a/examples/declarative/tutorials/contacts/3_Collections/GroupBox.qml b/examples/declarative/tutorials/contacts/3_Collections/GroupBox.qml
new file mode 100644
index 0000000..01f26ee
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/3_Collections/GroupBox.qml
@@ -0,0 +1,17 @@
+<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>
diff --git a/examples/declarative/tutorials/contacts/3_Collections/RemoveButton.qml b/examples/declarative/tutorials/contacts/3_Collections/RemoveButton.qml
index a489e95..493ab7a 100644
--- a/examples/declarative/tutorials/contacts/3_Collections/RemoveButton.qml
+++ b/examples/declarative/tutorials/contacts/3_Collections/RemoveButton.qml
@@ -14,11 +14,11 @@
                 print('removeButton.toggle()');
                 if (removeButton.state == 'opened') {
                     removeButton.state = '';
-                    page.mouseGrabbed=false;
+                    contacts.mouseGrabbed=false;
                 } else {
-                    if (!page.mouseGrabbed) {
+                    if (!contacts.mouseGrabbed) {
                         removeButton.state = 'opened';
-                        page.mouseGrabbed=true;
+                        contacts.mouseGrabbed=true;
                     }
                 }
             }
diff --git a/examples/declarative/tutorials/contacts/t8/Button.qml b/examples/declarative/tutorials/contacts/Final/Button.qml
index 63c4636..8290d35 100644
--- a/examples/declarative/tutorials/contacts/t8/Button.qml
+++ b/examples/declarative/tutorials/contacts/Final/Button.qml
@@ -1,16 +1,21 @@
-<Item width="30" height="30" id="button">
+<Item id="button" width="30" height="30">
     <properties>
         <Property name="icon"/>
     </properties>
     <signals>
         <Signal name="clicked"/>
     </signals>
-    <Rect id="buttonRect" color="lightgreen" anchors.fill="{parent}" radius="5">
+    <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()"/>
+        <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"/>
diff --git a/examples/declarative/tutorials/contacts/Final/Contact.qml b/examples/declarative/tutorials/contacts/Final/Contact.qml
new file mode 100644
index 0000000..679f4a8
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/Final/Contact.qml
@@ -0,0 +1,57 @@
+<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>
+    <signals>
+        <Signal name="update"/>
+        <Signal name="insert"/>
+    </signals>
+    <resources>
+        <SqlQuery id="updateContactQuery" connection="{contactDatabase}">
+            <query>UPDATE contacts SET label = :l, email = :e, phone = :p WHERE recid = :r</query>
+            <bindings>
+                <SqlBind name=":r" value="{contactid}"/>
+                <SqlBind name=":l" value="{labelField.value}"/>
+                <SqlBind name=":e" value="{emailField.value}"/>
+                <SqlBind name=":p" value="{phoneField.value}"/>
+            </bindings>
+        </SqlQuery>
+        <SqlQuery id="insertContactQuery" connection="{contactDatabase}">
+            <query>INSERT INTO contacts (label, email, phone) VALUES(:l, :e, :p)</query>
+            <bindings>
+                <SqlBind name=":l" value="{labelField.value}"/>
+                <SqlBind name=":e" value="{emailField.value}"/>
+                <SqlBind name=":p" value="{phoneField.value}"/>
+            </bindings>
+        </SqlQuery>
+    </resources>
+    <Connection sender="{contactDetails}" signal="update()">
+        updateContactQuery.exec();
+    </Connection>
+    <Connection sender="{contactDetails}" signal="insert()">
+        insertContactQuery.exec();
+    </Connection>
+    <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/Final/ContactField.qml b/examples/declarative/tutorials/contacts/Final/ContactField.qml
new file mode 100644
index 0000000..fe9329a
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/Final/ContactField.qml
@@ -0,0 +1,36 @@
+<Item id="contactField"
+    clip="true"
+    height="30">
+    <properties>
+        <Property name="label"/>
+        <Property name="icon"/>
+        <Property name="value" onValueChanged="fieldText.text=field.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}"
+        onConfirmed="contactField.value=fieldText.text"/>
+    <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/Final/ContactView2.qml b/examples/declarative/tutorials/contacts/Final/ContactView2.qml
new file mode 100644
index 0000000..da1e5db
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/Final/ContactView2.qml
@@ -0,0 +1,62 @@
+<Item id="contacts">
+    <resources>
+        <SqlConnection id="contactDatabase" name="qmlConnection" driver="QSQLITE" databaseName="../shared/contacts.sqlite"/>
+        <SqlQuery id="contactList" connection="{contactDatabase}">
+            <query>SELECT recid AS contactid, label, email, phone FROM contacts ORDER BY label, recid</query>
+        </SqlQuery>
+        <Component id="contactDelegate">
+            <Item id="wrapper"
+                x="0"
+                width="{ListView.view.width}" height="34">
+                <Text id="label"
+                    x="40" y="12"
+                    width="{parent.width-30}" 
+                    text="{model.label}"
+                    color="white"
+                    font.bold="true">
+                </Text>
+                <MouseRegion
+                    anchors.fill="{label}"
+                    onClicked="wrapper.state='opened'"/>
+                <Contact id="details"
+                    anchors.fill="{parent}"
+                    contactid="{model.contactid}"
+                    label="{model.label}"
+                    email="{model.email}"
+                    phone="{model.phone}"
+                    opacity="0"/>
+                <states>
+                    <State name='opened'>
+                        <SetProperty target="{wrapper}" property="height" value="{contactListView.height}"/>
+                        <SetProperty target="{contactListView}" property="yPosition" value="{wrapper.y}"/>
+                        <SetProperty target="{contactListView}" property="locked" value="1"/>
+                        <SetProperty target="{label}" property="opacity" value="0"/>
+                        <SetProperty target="{details}" property="opacity" value="1"/>
+                    </State>
+                </states>
+                <transitions>
+                    <Transition>
+                        <NumericAnimation duration="500" properties="yPosition,height,opacity"/>
+                    </Transition>
+                </transitions>
+                <Connection sender="{cancelEditButton}" signal="clicked()">
+                    if (wrapper.state == 'opened') {
+                        wrapper.state = '';
+                    }
+                </Connection>
+            </Item>
+        </Component>
+    </resources>
+    <Button id="cancelEditButton"
+        anchors.top="{parent.top}" anchors.topMargin="5"
+        anchors.right="{parent.right}" anchors.rightMargin="5"
+        icon="../shared/pics/cancel.png"/>
+    <ListView id="contactListView"
+        anchors.left="{parent.left}"
+        anchors.right="{parent.right}"
+        anchors.top="{cancelEditButton.bottom}"
+        anchors.bottom="{parent.bottom}"
+        clip="true"
+        model="{contactList}"
+        delegate="{contactDelegate}"/>
+</Item>
diff --git a/examples/declarative/tutorials/contacts/Final/FieldText.qml b/examples/declarative/tutorials/contacts/Final/FieldText.qml
new file mode 100644
index 0000000..a82cecd
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/Final/FieldText.qml
@@ -0,0 +1,98 @@
+<Rect id="fieldText"
+    height="30"
+    radius="5"
+    color="black">
+    <properties>
+        <Property
+            name="text"
+            value=""
+            onValueChanged="reset()"/>
+        <Property
+            name="label"
+            value=""/>
+    </properties>
+    <signals>
+        <Signal name="confirmed"/>
+    </signals>
+    <resources>
+        <Script>
+            function edit() {
+                if (!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="0"
+        anchors.right="{parent.right}" anchors.rightMargin="0"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        color="white"
+        font.bold="true"
+        readOnly="true"
+        wrap="false"
+        />
+    <Text id="textLabel"
+        x="5" width="{parent.width-10}"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        hAlign="AlignHCenter"
+        color="#505050"
+        font.italic="true"
+        text="{fieldText.label}"
+        opacity="{textEdit.text != '' ? 0 : 1}">
+        <opacity>
+            <Behaviour>
+                <NumericAnimation property="opacity" duration="250"/>
+            </Behaviour>
+        </opacity>
+    </Text>
+    <MouseRegion anchors.fill="{cancelIcon}" onClicked="reset()"/>
+    <MouseRegion anchors.fill="{confirmIcon}" onClicked="confirm()"/>
+    <MouseRegion
+        id="editRegion"
+        anchors.fill="{textEdit}"
+        onClicked="edit()"/>
+    <states>
+        <State name="editing">
+            <SetProperty target="{confirmIcon}" property="opacity" value="1"/>
+            <SetProperty target="{cancelIcon}" property="opacity" value="1"/>
+            <SetProperty target="{fieldText}" property="color" value="white"/>
+            <SetProperty target="{textEdit}" property="color" value="black"/>
+            <SetProperty target="{textEdit}" property="readOnly" value="false"/>
+            <SetProperty target="{textEdit}" property="focus" value="true"/>
+            <SetProperty target="{editRegion}" property="opacity" value="0"/>
+            <SetProperty target="{textEdit.anchors}" property="leftMargin" value="34"/>
+            <SetProperty target="{textEdit.anchors}" property="rightMargin" value="34"/>
+        </State>
+    </states>
+    <transitions>
+        <Transition fromState='' toState="*" reversible="true">
+            <NumericAnimation properties="opacity,leftMargin,rightMargin" duration="200"/>
+            <ColorAnimation duration="150"/>
+        </Transition>
+    </transitions>
+</Rect>
diff --git a/examples/declarative/tutorials/contacts/Final/RemoveButton.qml b/examples/declarative/tutorials/contacts/Final/RemoveButton.qml
new file mode 100644
index 0000000..493ab7a
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/Final/RemoveButton.qml
@@ -0,0 +1,80 @@
+<Rect id="removeButton"
+    width="30" height="30"
+    color="red"
+    radius="5">
+    <properties>
+        <Property name="expandedWidth" value="230"/>
+    </properties>
+    <signals>
+        <Signal name="confirmed"/>
+    </signals>
+    <resources>
+        <Script>
+            function toggle() {
+                print('removeButton.toggle()');
+                if (removeButton.state == 'opened') {
+                    removeButton.state = '';
+                    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/Final/SearchBar.qml b/examples/declarative/tutorials/contacts/Final/SearchBar.qml
new file mode 100644
index 0000000..aea5a5d
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/Final/SearchBar.qml
@@ -0,0 +1,18 @@
+<Rect id="searchBar"
+    color="white">
+    <properties>
+        <Property name="text" value="{searchEdit.text}"/>
+    </properties>
+    <Image id="searchIcon"
+        anchors.left="{parent.left}" anchors.leftMargin="5"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        src="../shared/pics/search.png"/>
+    <TextEdit id="searchEdit"
+        anchors.left="{searchIcon.right}" anchors.right="{parent.right}"
+        anchors.leftMargin="5" anchors.rightMargin="5"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        readOnly="false"
+        wrap="false"
+        focus="true"/>
+</Rect>
+
diff --git a/examples/declarative/tutorials/contacts/Final/contacts.qml b/examples/declarative/tutorials/contacts/Final/contacts.qml
new file mode 100644
index 0000000..8b0d6d0
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/Final/contacts.qml
@@ -0,0 +1,148 @@
+<Rect id="contacts"
+    width="240"
+    height="320"
+    color="black">
+    <properties>
+        <Property name="mode" value="list"/>
+        <Property name="mouseGrabbed" value="false"/>
+    </properties>
+    <resources>
+        <SqlConnection id="contactDatabase" name="qmlConnection" driver="QSQLITE" databaseName="../shared/contacts.sqlite"/>
+        <SqlQuery id="contactList" connection="{contactDatabase}">
+            <query>SELECT recid AS contactid, label, email, phone FROM contacts WHERE lower(label) LIKE lower(:searchTerm) ORDER BY label, recid</query>
+            <bindings>
+                <SqlBind name=":searchTerm" value="{searchBar.text + '%' }"/>
+            </bindings>
+        </SqlQuery>
+        <Component id="contactDelegate">
+            <Item id="wrapper"
+                x="0"
+                width="{ListView.view.width}"
+                height="34">
+                <Text id="label"
+                    x="40" y="12"
+                    width="{parent.width-30}" 
+                    text="{model.label}"
+                    color="white"
+                    font.bold="true">
+                    <children>
+                        <MouseRegion
+                            anchors.fill="{parent}">
+                            <onClicked>
+                                Details.qml = 'Contact.qml';
+                                wrapper.state='opened';
+                                contacts.mode = 'edit';
+                            </onClicked>
+                        </MouseRegion>
+                    </children>
+                </Text>
+                <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' &amp;&amp; !contacts.mouseGrabbed) {
+                        wrapper.state = '';
+                        contacts.mode = 'list';
+                    }
+                </Connection>
+                <Connection sender="{confirmEditButton}" signal="clicked()">
+                    if (wrapper.state == 'opened' &amp;&amp; !contacts.mouseGrabbed) {
+                        print('confirm and close edit');
+                        Details.qmlItem.update.emit();
+                        wrapper.state = '';
+                        contacts.mode = 'list';
+                        contactList.exec();
+                    }
+                </Connection>
+            </Item>
+        </Component>
+    </resources>
+    <Button id="newContactButton"
+        anchors.top="{parent.top}" anchors.topMargin="5"
+        anchors.right="{parent.right}" anchors.rightMargin="5"
+        icon="../shared/pics/new.png"
+        onClicked="newContactItem.label = ''; newContactItem.phone = ''; newContactItem.email = ''; contacts.mode = 'new'"
+        opacity="{contacts.mode == 'list' ? 1 : 0}"/>
+    <Button id="confirmEditButton"
+        anchors.top="{parent.top}" anchors.topMargin="5"
+        anchors.left="{parent.left}" anchors.leftMargin="5"
+        icon="../shared/pics/ok.png"
+        opacity="{contacts.mode == 'list' || contacts.mouseGrabbed ? 0 : 1}"/>
+    <Button id="cancelEditButton"
+        anchors.top="{parent.top}" anchors.topMargin="5"
+        anchors.right="{parent.right}" anchors.rightMargin="5"
+        icon="../shared/pics/cancel.png"
+        opacity="{contacts.mode == 'list' || contacts.mouseGrabbed ? 0 : 1}"/>
+    <ListView id="contactListView"
+        anchors.left="{parent.left}"
+        anchors.right="{parent.right}"
+        anchors.top="{cancelEditButton.bottom}"
+        anchors.bottom="{searchBarWrapper.bottom}"
+        clip="true"
+        model="{contactList}"
+        delegate="{contactDelegate}"
+        focus="{contacts.mode != 'list'}"/>
+    <Contact id="newContactItem"
+        anchors.fill="{contactListView}"
+        opacity="0"/>
+    <Connection sender="{confirmEditButton}" signal="clicked()">
+        if (contacts.mode == 'new' &amp;&amp; contacts.mouseGrabbed != 'true') {
+            newContactItem.insert.emit();
+            contacts.mode = 'list';
+            contactList.exec();
+        }
+    </Connection>
+    <Connection sender="{cancelEditButton}" signal="clicked()">
+        if (contacts.mode == 'new' &amp;&amp; contacts.mouseGrabbed != 'true') {
+            contacts.mode = 'list';
+        }
+    </Connection>
+    <FocusRealm id="searchBarWrapper"
+        height="30"
+        anchors.bottom="{parent.bottom}"
+        anchors.left="{parent.left}" anchors.right="{parent.right}"
+        anchors.bottomMargin="0"
+        focus="{contacts.mode == 'list'}">
+        <SearchBar id="searchBar" anchors.fill="{parent}"/>
+        <states>
+            <State name="searchHidden" when="{searchBar.text == '' || contacts.mode != 'list'}">
+                <SetProperty target="{searchBarWrapper.anchors}" property="bottomMargin" value="-30"/>
+            </State>
+        </states>
+        <transitions>
+            <Transition fromState="*" toState="*">
+                <NumericAnimation property="bottomMargin" duration="250"/>
+            </Transition>
+        </transitions>
+    </FocusRealm>
+    <states>
+        <State name="editNewState" when="{contacts.mode == 'new'}">
+            <SetProperty target="{contactListView}" property="opacity" value="0"/>
+            <SetProperty target="{newContactItem}" property="opacity" value="1"/>
+        </State>
+    </states>
+    <transitions>
+        <Transition fromState="*" toState="*">
+            <NumericAnimation property="opacity" duration="500"/>
+        </Transition>
+    </transitions>
+</Rect>
diff --git a/examples/declarative/tutorials/contacts/t8/Contact.qml b/examples/declarative/tutorials/contacts/t8/Contact.qml
deleted file mode 100644
index 5852b43..0000000
--- a/examples/declarative/tutorials/contacts/t8/Contact.qml
+++ /dev/null
@@ -1,80 +0,0 @@
-<Item id="contactDetails" anchors.fill="{parent}">
-    <properties>
-        <Property name="label" onValueChanged="c_label.value = label"/>
-        <Property name="contactid" value=""/>
-        <Property name="phone" onValueChanged="c_phone.value = phone"/>
-        <Property name="email" onValueChanged="c_email.value = email"/>
-        <Property name="mode" value="closed"/>
-    </properties>
-    <signals>
-        <Signal name="open"/>
-        <Signal name="close"/>
-        <Signal name="confirm"/>
-        <Signal name="cancel"/>
-    </signals>
-    <resources>
-        <SqlQuery id="updateContactQuery" connection="{contactDatabase}">
-            <query>UPDATE contacts SET label = :l, email = :e, phone = :p WHERE recid = :r</query>
-            <bindings>
-                <SqlBind name=":r" value="{contactid}"/>
-                <SqlBind name=":l" value="{c_label.value}"/>
-                <SqlBind name=":e" value="{c_email.value}"/>
-                <SqlBind name=":p" value="{c_phone.value}"/>
-            </bindings>
-        </SqlQuery>
-        <SqlQuery id="insertContactQuery" connection="{contactDatabase}">
-            <query>INSERT INTO contacts (label, email, phone) VALUES(:l, :e, :p)</query>
-            <bindings>
-                <SqlBind name=":l" value="{c_label.value}"/>
-                <SqlBind name=":e" value="{c_email.value}"/>
-                <SqlBind name=":p" value="{c_phone.value}"/>
-            </bindings>
-        </SqlQuery>
-    </resources>
-    <Connection sender="{contactDetails}" signal="cancel()">
-        c_label.value = label;
-        c_phone.value = phone;
-        c_email.value = email;
-        contactDetails.close.emit();
-    </Connection>
-    <Connection sender="{contactDetails}" signal="confirm()">
-        if (c_label.value != '') {
-            if (contactid == '') {
-                insertContactQuery.exec();
-                c_label.value = label;
-                c_phone.value = phone;
-                c_email.value = email;
-            } else {
-                updateContactQuery.exec();
-            }
-            contactList.exec();
-        }
-        contactDetails.close.emit();
-    </Connection>
-    <VerticalLayout id="layout" anchors.fill="{parent}" spacing="5" margin="5">
-        <Field id="c_label" label="Name"
-            editable="{mode == 'opened' ? 1 : 0}"
-            anchors.left="{layout.left}" anchors.leftMargin="5"
-            anchors.right="{layout.right}" anchors.rightMargin="5"/>
-        <Field id="c_phone" icon="../shared/pics/phone.png" label="Phone"
-            opacity="0" editable="{mode == 'opened' ? 1 : 0}"
-            anchors.left="{layout.left}" anchors.leftMargin="5"
-            anchors.right="{layout.right}" anchors.rightMargin="5"/>
-        <Field id="c_email" icon="../shared/pics/email.png" label="Email"
-            opacity="0" editable="{mode == 'opened' ? 1 : 0}"
-            anchors.left="{layout.left}" anchors.leftMargin="5"
-            anchors.right="{layout.right}" anchors.rightMargin="5"/>
-    </VerticalLayout>
-    <MouseRegion anchors.fill="{contactDetails}" onClicked="contactDetails.open.emit()" z="{mode=='opened' ? -1 : 1}"/>
-    <states>
-        <State name="opened" when="{mode == 'opened'}">
-            <SetProperty target="{c_phone}" property="opacity" value="1"/>
-            <SetProperty target="{c_email}" property="opacity" value="1"/>
-        </State>
-    </states>
-    <transitions>
-        <Transition fromState="*" toState="opened" reversible="true">
-            <NumericAnimation target="{contactFields}" properties="opacity" duration="200"/>
-        </Transition>
-    </transitions>
-</Item>
diff --git a/examples/declarative/tutorials/contacts/t8/Field.qml b/examples/declarative/tutorials/contacts/t8/Field.qml
deleted file mode 100644
index 0191ef8..0000000
--- a/examples/declarative/tutorials/contacts/t8/Field.qml
+++ /dev/null
@@ -1,54 +0,0 @@
-<Item height="30" width="200" id="field">
-    <properties>
-        <Property name="value" onValueChanged="fieldText.text=field.value"/>
-        <Property name="icon"/>
-        <Property name="editable" value="0"/>
-        <Property name="label"/>
-    </properties>
-    <Item id="fieldSelector" width="30" height="30"
-        x="0"
-        anchors.top="{parent.top}"
-        anchors.bottom="{parent.bottom}">
-        <Image src="{field.icon}"
-            anchors.verticalCenter="{parent.verticalCenter}"
-            anchors.horizontalCenter="{parent.horizontalCenter}"/>
-    </Item>
-    <FieldText id="fieldText"
-        label="{field.label}"
-        width="{field.width-70}"
-        anchors.left="{fieldSelector.right}"
-        anchors.leftMargin="5"
-        anchors.top="{parent.top}"
-        anchors.bottom="{parent.bottom}"
-        onTextEdited="field.value = fieldText.text"/>
-    <FieldRemover id="fieldRemover"
-        anchors.left="{fieldText.right}"
-        anchors.leftMargin="5"
-        anchors.top="{parent.top}"
-        anchors.bottom="{parent.bottom}"
-        onConfirm="fieldText.text = ''"
-        opacity="{field.editable}"/>
-    <states>
-        <State name="textFill" when="{fieldText.open == 'true'}">
-            <SetProperty target="{fieldText}" property="width" value="{field.width}"/>
-            <SetProperty target="{fieldText}" property="x" value="0"/>
-            <SetProperty target="{fieldRemover}" property="opacity" value="0"/>
-            <SetProperty target="{fieldSelector}" property="opacity" value="0"/>
-            <SetProperty target="{fieldSelector}" property="x" value="{-5-fieldSelector.width}"/>
-        </State>
-        <State name="removerFill" when="{fieldRemover.open == 'true'}">
-            <SetProperty target="{fieldRemover}" property="width" value="{field.width}"/>
-            <SetProperty target="{fieldRemover}" property="x" value="0"/>
-            <SetProperty target="{fieldText}" property="opacity" value="0"/>
-            <SetProperty target="{fieldSelector}" property="opacity" value="0"/>
-            <SetProperty target="{fieldSelector}" property="x" value="{-10-fieldText.width-fieldSelector.width}"/>
-        </State>
-    </states>
-    <transitions>
-        <Transition fromState="*" toState="*">
-            <NumericAnimation target="{fieldSelector}" properties="width,x,opacity" duration="200"/>
-            <NumericAnimation target="{fieldText}" properties="width,x,opacity" duration="200"/>
-            <NumericAnimation target="{fieldRemover}" properties="width,x,opacity" duration="200"/>
-        </Transition>
-    </transitions>
-</Item>
diff --git a/examples/declarative/tutorials/contacts/t8/FieldRemover.qml b/examples/declarative/tutorials/contacts/t8/FieldRemover.qml
deleted file mode 100644
index a7dad64..0000000
--- a/examples/declarative/tutorials/contacts/t8/FieldRemover.qml
+++ /dev/null
@@ -1,57 +0,0 @@
-<Item height="30" width="30" id="fieldRemover" clip="true">
-    <properties>
-        <Property name="open" value="false"/>
-    </properties>
-    <signals>
-        <Signal name="confirm"/>
-    </signals>
-    <resources>
-        <Script>
-            function toggle() {
-                if (fieldRemover.state=='opened') {
-                    fieldRemover.state='';
-                    open='false';
-                    Page.mouseGrabbed='false';
-                } else {
-                    if (Page.mouseGrabbed != 'true') {
-                        fieldRemover.state='opened';
-                        open='true';
-                        Page.mouseGrabbed='true';
-                    }
-                }
-            }
-        </Script>
-    </resources>
-    <Rect id="border" anchors.fill="{parent}" color="red" radius="5"/>
-    <Image id="trashIcon" src="../shared/pics/trash.png"
-        width="22" height="22"
-        anchors.right="{parent.right}" anchors.rightMargin="4"
-        anchors.verticalCenter="{parent.verticalCenter}"/>
-    <Image id="cancelIcon" src="../shared/pics/cancel.png"
-        width="22" height="22" opacity="0"
-        anchors.right="{parent.right}" anchors.rightMargin="4"
-        anchors.verticalCenter="{parent.verticalCenter}"/>
-    <Image id="confirmIcon" src="../shared/pics/ok.png"
-        width="22" height="22" opacity="0"
-        anchors.left="{parent.left}" anchors.leftMargin="4"
-        anchors.verticalCenter="{parent.verticalCenter}"/>
-    <Text id="text" opacity="0" text="Remove" font.bold="true" color="white" hAlign="AlignHCenter"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        anchors.left="{confirmIcon.right}" anchors.leftMargin="4"
-        anchors.right="{cancelIcon.left}" anchors.rightMargin="4"/>
-    <MouseRegion anchors.fill="{confirmIcon}" onClicked="toggle(); fieldRemover.confirm.emit()"/>
-    <MouseRegion anchors.fill="{trashIcon}" onClicked="toggle()"/>
-    <states>
-        <State name="opened">
-            <SetProperty target="{text}" property="opacity" value="1"/>
-            <SetProperty target="{confirmIcon}" property="opacity" value="1"/>
-            <SetProperty target="{cancelIcon}" property="opacity" value="1"/>
-            <SetProperty target="{trashIcon}" property="opacity" value="0"/>
-        </State>
-    </states>
-    <transitions>
-        <Transition fromState="*" toState="opened" reversible="true">
-            <NumericAnimation properties="opacity,x,width" duration="200"/>
-        </Transition>
-    </transitions>
-</Item>
diff --git a/examples/declarative/tutorials/contacts/t8/FieldText.qml b/examples/declarative/tutorials/contacts/t8/FieldText.qml
deleted file mode 100644
index d3a158a..0000000
--- a/examples/declarative/tutorials/contacts/t8/FieldText.qml
+++ /dev/null
@@ -1,89 +0,0 @@
-<Item height="30" id="fieldText">
-    <properties>
-        <Property name="open" value="false"/>
-        <Property name="text" value="" onValueChanged="setText(fieldText.text)"/>
-        <Property name="label" value=""/>
-    </properties>
-    <signals>
-        <Signal name="textEdited"/>
-    </signals>
-    <resources>
-        <Script>
-            function start() {
-                if (Page.mouseGrabbed != 'true') {
-                    fieldText.state='editing';
-                    open='true';
-                    Page.mouseGrabbed='true';
-                }
-            }
-            function confirm() {
-                fieldText.text = textEdit.text;
-                fieldText.state='';
-                open='false';
-                Page.mouseGrabbed='false';
-                fieldText.textEdited.emit();
-            }
-            function cancel() {
-                textEdit.text = fieldText.text;
-                fieldText.state='';
-                open='false';
-                Page.mouseGrabbed='false';
-            }
-            function setText(value) {
-                if (textEdit.text != value) {
-                    fieldText.state='';
-                    open='false';
-                    textEdit.text = value;
-                }
-            }
-        </Script>
-    </resources>
-    <Rect id="border" radius="5" anchors.fill="{parent}" color="{field.editable == 1 ? '#202020' : '#000000'}">
-        <TextEdit id="textEdit" vAlign="AlignVCenter" text=""
-            readOnly="true" font.bold="true" wrap="false" color="white"
-            x="5" width="{parent.width-10}"
-            anchors.verticalCenter="{parent.verticalCenter}"
-            />
-        <Text id="textLabel" vAlign="AlignVCenter" hAlign="AlignHCenter"
-            color="#505050" font.italic="true"
-            anchors.fill="{border}" text="{fieldText.label}"
-            opacity="{textEdit.text == '' ? 1 : 0}">
-            <opacity>
-                <Behaviour>
-                    <NumericAnimation target="{textLabel}" property="opacity" duration="250"/>
-                </Behaviour>
-            </opacity>
-        </Text>
-        <Image id="cancelIcon" src="../shared/pics/cancel.png"
-            width="22" height="22" opacity="0"
-            anchors.right="{parent.right}" anchors.rightMargin="4"
-            anchors.verticalCenter="{parent.verticalCenter}"/>
-        <Image id="confirmIcon" src="../shared/pics/ok.png"
-            width="22" height="22" opacity="0"
-            anchors.left="{parent.left}" anchors.leftMargin="4"
-            anchors.verticalCenter="{parent.verticalCenter}"/>
-        <MouseRegion anchors.fill="{cancelIcon}" onClicked="cancel()"/>
-        <MouseRegion anchors.fill="{confirmIcon}" onClicked="confirm()"/>
-        <MouseRegion id="editRegion" anchors.fill="{textEdit}" onClicked="start()"/>
-    </Rect>
-    <states>
-        <State name="editing">
-            <SetProperty target="{confirmIcon}" property="opacity" value="1"/>
-            <SetProperty target="{cancelIcon}" property="opacity" value="1"/>
-            <SetProperty target="{border}" property="color" value="white"/>
-            <SetProperty target="{textEdit}" property="color" value="black"/>
-            <SetProperty target="{textEdit}" property="readOnly" value="false"/>
-            <SetProperty target="{textEdit}" property="focus" value="true"/>
-            <SetProperty target="{textEdit}" property="x" value="35"/>
-            <SetProperty target="{editRegion}" property="opacity" value="0"/>
-        </State>
-    </states>
-    <transitions>
-        <Transition fromState='' toState="*" reversible="true">
-            <NumericAnimation target="{textEdit}" properties="x" duration="200"/>
-            <NumericAnimation target="{confirmIcon}" properties="opacity" duration="200"/>
-            <NumericAnimation target="{cancelIcon}" properties="opacity" duration="200"/>
-            <ColorAnimation duration="150"/>
-        </Transition>
-    </transitions>
-</Item>
diff --git a/examples/declarative/tutorials/contacts/t8/SearchBar.qml b/examples/declarative/tutorials/contacts/t8/SearchBar.qml
deleted file mode 100644
index f8e1a6a..0000000
--- a/examples/declarative/tutorials/contacts/t8/SearchBar.qml
+++ /dev/null
@@ -1,16 +0,0 @@
-<Item height="30" width="{parent.width}">
-    <properties>
-        <Property name="text" value="{searchEdit.text}"/>
-    </properties>
-    <Rect color="white" anchors.fill="{parent}">
-        <Image id="searchIcon" src="../shared/pics/search.png"
-            anchors.left="{parent.left}" anchors.leftMargin="5"
-            anchors.verticalCenter="{parent.verticalCenter}"/>
-        <TextEdit id="searchEdit" focus="{Page.listShown == 1}" 
-            anchors.left="{searchIcon.right}" anchors.right="{parent.right}"
-            anchors.leftMargin="5" anchors.rightMargin="5"
-            anchors.verticalCenter="{parent.verticalCenter}"
-            readOnly="false" wrap="false"/>
-    </Rect>
-</Item>
-
diff --git a/examples/declarative/tutorials/contacts/t8/contacts.qml b/examples/declarative/tutorials/contacts/t8/contacts.qml
deleted file mode 100644
index f76ccfd..0000000
--- a/examples/declarative/tutorials/contacts/t8/contacts.qml
+++ /dev/null
@@ -1,133 +0,0 @@
-<Rect id="Page" color="black" width="240" height="320">
-    <properties>
-        <Property name="listShown" value="1"/>
-        <Property name="mode" value="list"/>
-        <Property name="mouseGrabbed" value="false"/>
-    </properties>
-    <resources>
-        <SqlConnection id="contactDatabase" name="qmlConnection" driver="QSQLITE" databaseName="../shared/contacts.sqlite"/>
-        <SqlQuery id="contactList" connection="{contactDatabase}">
-            <query>SELECT recid, label, email, phone FROM contacts WHERE lower(label) LIKE lower(:searchTerm) ORDER BY label, recid</query>
-            <bindings>
-                <SqlBind name=":searchTerm" value="{searchBar.text + '%' }"/>
-            </bindings>
-        </SqlQuery>
-        <Component id="contactDelegate">
-            <Item id="wrapper" x="0" width="{ListView.view.width}" height="34">
-                <Text id="label" x="45" y="12" text="{model.label}" color="white" font.bold="true" width="{parent.width-30}" opacity="{listShown}"/>
-                <Item id="Details" anchors.fill="{wrapper}">
-                    <Bind target="{Details.qmlItem}" property="contactid" value="{model.recid}"/>
-                    <Bind target="{Details.qmlItem}" property="mode" value="{wrapper.state}"/>
-                    <Bind target="{Details.qmlItem}" property="label" value="{model.label}"/>
-                    <Bind target="{Details.qmlItem}" property="phone" value="{model.phone}"/>
-                    <Bind target="{Details.qmlItem}" property="email" value="{model.email}"/>
-                </Item>
-                <MouseRegion anchors.fill="{label}" opacity="{listShown}">
-                    <onClicked>
-                        Details.qml = 'Contact.qml';
-                        wrapper.state='opened';
-                    </onClicked>
-                </MouseRegion>
-                <states>
-                    <State name='opened'>
-                        <SetProperty target="{wrapper}" property="height" value="{contactListView.height}"/>
-                        <SetProperty target="{contactListView}" property="yPosition" value="{wrapper.y}"/>
-                        <SetProperty target="{contactListView}" property="locked" value="1"/>
-                        <SetProperty target="{Details.qmlItem}" property="mode" value="opened"/>
-                        <SetProperty target="{Page}" property="mode" value="editExisting"/>
-                    </State>
-                </states>
-                <transitions>
-                    <Transition>
-                        <NumericAnimation duration="500" properties="yPosition,height,opacity"/>
-                    </Transition>
-                </transitions>
-                <Connection sender="{confirmEditButton}" signal="clicked()">
-                    if (Details.qmlItem.mode == 'opened' &amp;&amp; Page.mouseGrabbed != 'true') {
-                        Details.qmlItem.mode = 'closed';
-                        wrapper.state = "";
-                        Details.qmlItem.confirm.emit();
-                    }
-                </Connection>
-                <Connection sender="{cancelEditButton}" signal="clicked()">
-                    if (Details.qmlItem.mode == 'opened' &amp;&amp; Page.mouseGrabbed != 'true') {
-                        Details.qmlItem.mode = 'closed';
-                        wrapper.state = "";
-                        Details.qmlItem.cancel.emit();
-                    }
-                </Connection>
-            </Item>
-        </Component>
-    </resources>
-    <Button id="newContactButton" icon="../shared/pics/new.png"
-        anchors.top="{parent.top}" anchors.topMargin="5"
-        anchors.right="{parent.right}" anchors.rightMargin="5"
-        onClicked="newContactItem.label = ''; newContactItem.phone = ''; newContactItem.email = ''; Page.mode = 'editNew'"
-        opacity="{Page.mode == 'list' ? 1 : 0}"/>
-    <Button id="cancelEditButton" icon="../shared/pics/cancel.png"
-        anchors.top="{parent.top}" anchors.topMargin="5"
-        anchors.right="{parent.right}" anchors.rightMargin="5"
-        opacity="{Page.mode == 'list' || Page.mouseGrabbed == 'true' ? 0 : 1}"/>
-    <Button id="confirmEditButton" icon="../shared/pics/ok.png"
-        anchors.top="{parent.top}" anchors.topMargin="5"
-        anchors.left="{parent.left}" anchors.leftMargin="5"
-        opacity="{Page.mode == 'list' || Page.mouseGrabbed == 'true' ? 0 : 1}"/>
-    <FocusRealm id="searchBarRealm"
-        height="30"
-        anchors.bottom="{parent.bottom}"
-        anchors.left="{parent.left}" anchors.right="{parent.right}"
-        focus="{Page.mode == 'list' ? 'true' : 'false'}">
-        <SearchBar id="searchBar" anchors.fill="{parent}">
-            <states>
-                <State name="searchHidden" when="{searchBar.text == '' || Page.listShown == 0}">
-                    <SetProperty target="{searchBarRealm}" property="anchors.bottomMargin" value="-30"/>
-                </State>
-            </states>
-            <transitions>
-                <Transition fromState="*" toState="*">
-                    <NumericAnimation property="bottomMargin" duration="250"/>
-                </Transition>
-            </transitions>
-        </SearchBar>
-    </FocusRealm>
-    <ListView id="contactListView" model="{contactList}" delegate="{contactDelegate}"
-        anchors.top="{newContactButton.bottom}" anchors.topMargin="10"
-        anchors.left="{parent.left}" anchors.right="{parent.right}"
-        anchors.bottom="{searchBarRealm.top}"
-        clip="true"
-        focus="{Page.mode == 'list' ? 'false' : 'true'}"
-        />
-    <Contact id="newContactItem"
-        mode="opened"
-        anchors.top="{newContactButton.bottom}" anchors.topMargin="10"
-        anchors.left="{parent.left}" anchors.right="{parent.right}"
-        anchors.bottom="{searchBarRealm.top}"
-        onClose="Page.mode='list'"
-        opacity="0"
-    />
-    <Connection sender="{confirmEditButton}" signal="clicked()">
-        if (Page.mode == 'editNew' &amp;&amp; Page.mouseGrabbed != 'true') {
-            newContactItem.confirm.emit()
-        }
-    </Connection>
-    <Connection sender="{cancelEditButton}" signal="clicked()">
-        if (Page.mode == 'editNew' &amp;&amp; Page.mouseGrabbed != 'true') {
-            newContactItem.cancel.emit()
-        }
-    </Connection>
-    <states>
-        <State name="editExistingState" when="{Page.mode == 'editExisting'}">
-            <SetProperty target="{Page}" property="listShown" value="0"/>
-        </State>
-        <State name="editNewState" when="{Page.mode == 'editNew'}">
-            <SetProperty target="{Page}" property="listShown" value="0"/>
-            <SetProperty target="{contactListView}" property="opacity" value="0"/>
-            <SetProperty target="{newContactItem}" property="opacity" value="1"/>
-        </State>
-    </states>
-    <transitions>
-        <Transition fromState="*" toState="*">
-            <NumericAnimation property="opacity" duration="500"/>
-        </Transition>
-    </transitions>
-</Rect>
diff --git a/src/declarative/canvas/qsimplecanvasitem.cpp b/src/declarative/canvas/qsimplecanvasitem.cpp
index 3d3bf84..5e4b5fa 100644
--- a/src/declarative/canvas/qsimplecanvasitem.cpp
+++ b/src/declarative/canvas/qsimplecanvasitem.cpp
@@ -238,15 +238,15 @@ QPointF QSimpleCanvasItem::scenePos() const
 
     Controls the point about which simple transforms like scale apply.
 
-    \o TopLeft The top-left corner of the item.
-    \o TopCenter The center point of the top of the item.
-    \o TopRight The top-right corner of the item.
-    \o MiddleLeft The left most point of the vertical middle.
-    \o Center The center of the item.
-    \o MiddleRight The right most point of the vertical middle.
-    \o BottomLeft The bottom-left corner of the item.
-    \o BottomCenter The center point of the bottom of the item. 
-    \o BottomRight The bottom-right corner of the item.
+    \value TopLeft The top-left corner of the item.
+    \value TopCenter The center point of the top of the item.
+    \value TopRight The top-right corner of the item.
+    \value MiddleLeft The left most point of the vertical middle.
+    \value Center The center of the item.
+    \value MiddleRight The right most point of the vertical middle.
+    \value BottomLeft The bottom-left corner of the item.
+    \value BottomCenter The center point of the bottom of the item. 
+    \value BottomRight The bottom-right corner of the item.
 */
 
 /*!
diff --git a/src/declarative/extra/qmlnumberformatter.cpp b/src/declarative/extra/qmlnumberformatter.cpp
index a12c4e6..60b154d 100644
--- a/src/declarative/extra/qmlnumberformatter.cpp
+++ b/src/declarative/extra/qmlnumberformatter.cpp
@@ -79,7 +79,7 @@ public:
     */
 /*!
     \class QmlNumberFormatter
-    \ingroup utility
+    \ingroup group_utility
     \brief The QmlNumberFormatter class allows you to format a number to a particular string format/locale specific number format.
 */
 
diff --git a/src/declarative/fx/qfxanchors.cpp b/src/declarative/fx/qfxanchors.cpp
index b7a7dd2..7372866 100644
--- a/src/declarative/fx/qfxanchors.cpp
+++ b/src/declarative/fx/qfxanchors.cpp
@@ -122,7 +122,7 @@ static qreal adjustedPosition(QFxItem *item, QFxAnchorLine::AnchorLine anchorLin
 /*!
     \internal
     \class QFxAnchors
-    \ingroup layouts
+    \ingroup group_layouts
     \brief The QFxAnchors class provides a way to lay out items relative to other items.
 
     \warning Currently, only anchoring to siblings or parent is supported.
diff --git a/src/declarative/fx/qfxblendedimage.cpp b/src/declarative/fx/qfxblendedimage.cpp
index 773018f..9a3bb72 100644
--- a/src/declarative/fx/qfxblendedimage.cpp
+++ b/src/declarative/fx/qfxblendedimage.cpp
@@ -97,7 +97,7 @@ void QFxBlendedImage::setPrimaryUrl(const QString &url)
 }
 
 /*!
-    \property QFxBlendedImage::secondaryFile
+    \property QFxBlendedImage::secondaryUrl
     \brief the URL of the second image to be displayed in this item.
 */
 QString QFxBlendedImage::secondaryUrl() const
diff --git a/src/declarative/fx/qfxblurfilter.cpp b/src/declarative/fx/qfxblurfilter.cpp
index 8cc9380..748fd8b 100644
--- a/src/declarative/fx/qfxblurfilter.cpp
+++ b/src/declarative/fx/qfxblurfilter.cpp
@@ -93,7 +93,7 @@ public:
 /*!
     \internal
     \class QFxBlurFilter
-    \ingroup effects
+    \ingroup group_effects
     \brief The QFxBlurFilter class allows you to blur an item.
 */
 
diff --git a/src/declarative/fx/qfxcomponentinstance.cpp b/src/declarative/fx/qfxcomponentinstance.cpp
index d561d05..b456716 100644
--- a/src/declarative/fx/qfxcomponentinstance.cpp
+++ b/src/declarative/fx/qfxcomponentinstance.cpp
@@ -60,6 +60,16 @@ QML_DEFINE_TYPE(QFxComponentInstance,ComponentInstance);
 /*!
     \qmlclass ComponentInstance QFxComponentInstance
     \brief The ComponentInstance element allows you to instantiate an arbitrary component.
+
+    \code
+    <Item>
+        <Component id="RedSquare">
+            <Rect color="red" width="10" height="10"/>
+        </Component>
+
+        <ComponentInstance component="{RedSquare}"/>
+    </Item>
+    \endcode
 */
 QFxComponentInstance::QFxComponentInstance(QFxItem *parent)
   : QFxItem(*(new QFxComponentInstancePrivate), parent)
@@ -73,6 +83,11 @@ QFxComponentInstance::QFxComponentInstance(QFxComponentInstancePrivate &dd, QFxI
     setOptions(IsFocusRealm);
 }
 
+/*!
+    \qmlproperty Component QFxComponentInstance::component
+
+    This property holds the component to instantiate.
+*/
 QmlComponent *QFxComponentInstance::component() const
 {
     Q_D(const QFxComponentInstance);
@@ -123,6 +138,11 @@ void QFxComponentInstance::updateSize()
     }
 }
 
+/*!
+    \qmlproperty Item QFxComponentInstance::instance
+
+    This property holds the instantiated component.
+*/
 QFxItem *QFxComponentInstance::instance() const
 {
     Q_D(const QFxComponentInstance);
diff --git a/src/declarative/fx/qfxcontentwrapper.cpp b/src/declarative/fx/qfxcontentwrapper.cpp
index 80710ca..5ce5430 100644
--- a/src/declarative/fx/qfxcontentwrapper.cpp
+++ b/src/declarative/fx/qfxcontentwrapper.cpp
@@ -95,7 +95,7 @@ QML_DEFINE_TYPE(QFxContent,Content);
 
 /*!
     \qmlclass Content QFxContent
-    \ingroup utility
+    \ingroup group_utility
     \brief Content is used as a placeholder for the content of a component.
     \inherits Item
 
diff --git a/src/declarative/fx/qfxflickable.cpp b/src/declarative/fx/qfxflickable.cpp
index 7e13036..e35d6cf 100644
--- a/src/declarative/fx/qfxflickable.cpp
+++ b/src/declarative/fx/qfxflickable.cpp
@@ -253,7 +253,7 @@ QML_DEFINE_TYPE(QFxFlickable,Flickable);
     \class QFxFlickable
     \brief The QFxFlickable class provides a view that can be "flicked".
 
-    \ingroup widgets
+    \ingroup group_widgets
 
     QFxFlickable allows its children to be dragged and flicked.
     
diff --git a/src/declarative/fx/qfxhighlightfilter.cpp b/src/declarative/fx/qfxhighlightfilter.cpp
index 6c6277a..d1ff3d3 100644
--- a/src/declarative/fx/qfxhighlightfilter.cpp
+++ b/src/declarative/fx/qfxhighlightfilter.cpp
@@ -96,7 +96,7 @@ public:
 /*!
     \internal
     \class QFxHighlightFilter
-    \ingroup effects
+    \ingroup group_effects
     \brief The QFxHightlightFilter class allows you to add a highlight to an item.
 */
 
diff --git a/src/declarative/fx/qfximage.cpp b/src/declarative/fx/qfximage.cpp
index a137bc3..9fe491c 100644
--- a/src/declarative/fx/qfximage.cpp
+++ b/src/declarative/fx/qfximage.cpp
@@ -99,7 +99,7 @@ QML_DEFINE_TYPE(QFxImage,Image);
     \class QFxImage Image
     \brief The QFxImage class provides an image item that you can add to a QFxView.
 
-    \ingroup coreitems
+    \ingroup group_coreitems
 
     Example:
     \code
diff --git a/src/declarative/fx/qfximageitem.cpp b/src/declarative/fx/qfximageitem.cpp
index 6c257fa..a6f6d8f 100644
--- a/src/declarative/fx/qfximageitem.cpp
+++ b/src/declarative/fx/qfximageitem.cpp
@@ -59,7 +59,7 @@ QT_BEGIN_NAMESPACE
 /*!
     \class QFxImageItem
     \brief The QFxImageItem class is an abstract base class for QFxView items that render using QPainter.
-    \ingroup coreitems
+    \ingroup group_coreitems
 
     This is a convenience class allowing easy use of a QPainter within a custom
     item.  The contents of the item are are cached behind the scenes.
diff --git a/src/declarative/fx/qfxitem.cpp b/src/declarative/fx/qfxitem.cpp
index 2406597..ade7d77 100644
--- a/src/declarative/fx/qfxitem.cpp
+++ b/src/declarative/fx/qfxitem.cpp
@@ -74,20 +74,49 @@ QML_DEFINE_TYPE(QFxItem,Item);
 QML_DEFINE_NOCREATE_TYPE(QSimpleCanvasFilter);
 
 /*!
-    \defgroup animation Animation
-    \defgroup coreitems Basic Items
-    \defgroup effects Effects
-    \defgroup layouts Layouts
-    \defgroup states States and Transitions
-    \defgroup utility Utility
-    \defgroup views Views
-    \defgroup widgets Widgets
+    \group group_animation
+    \title Animation
+*/
+
+/*!
+    \group group_coreitems
+    \title Basic Items
+*/
+
+/*!
+    \group group_effects
+    \title Effects
+*/
+
+/*!
+    \group group_layouts
+    \title Layouts
+*/
+
+/*!
+    \group group_states
+    \title States and Transitions
+*/
+
+/*!
+    \group group_utility
+    \title Utility
+*/
+
+/*!
+    \group group_views
+    \title Views
+*/
+
+/*!
+    \group group_widgets
+    \title Widgets
 */
 
 /*!
     \internal
     \class QFxContents
-    \ingroup utility
+    \ingroup group_utility
     \brief The QFxContents class gives access to the height and width of an item's contents.
 
 */
@@ -194,7 +223,7 @@ void QFxContents::setItem(QFxItem *item)
     \endqml
     \endqmltext
     
-    \ingroup coreitems
+    \ingroup group_coreitems
 */
 
 /*!
@@ -291,7 +320,7 @@ void QFxContents::setItem(QFxItem *item)
 */
 
 /*!
-    \fn void QFxItem::keyPress()
+    \fn void QFxItem::keyPress(QObject *event)
 
     This signal is emitted when a key is pressed.
 
@@ -306,7 +335,7 @@ void QFxContents::setItem(QFxItem *item)
 */
 
 /*!
-    \fn void QFxItem::keyRelease()
+    \fn void QFxItem::keyRelease(QObject *event)
 
     This signal is emitted when a key is released.
 
@@ -751,10 +780,10 @@ void QFxItem::setQml(const QString &qml)
     } else {
         d->_qmlcomp = 
             new QmlComponent(itemContext()->engine(), d->_qmlurl, this);
-        if(d->_qmlcomp->isReady())
+        if(!d->_qmlcomp->isLoading())
             qmlLoaded();
         else
-            QObject::connect(d->_qmlcomp, SIGNAL(readyChanged()),
+            QObject::connect(d->_qmlcomp, SIGNAL(statusChanged(QmlComponent::Status)),
                              this, SLOT(qmlLoaded()));
     }
 }
@@ -768,7 +797,7 @@ void QFxItem::qmlLoaded()
         // ###
         for (int i=0; i<d->_qmlnewloading.length(); ++i) {
             QmlComponent *c = d->_qmlnewcomp.at(i);
-            if(!c->isReady())
+            if(c->isLoading())
                 continue;
 
             QmlContext *ctxt = new QmlContext(itemContext());
@@ -1618,10 +1647,10 @@ void QFxItem::newChild(const QString &type)
     d->_qmlnewloading.append(url);
     d->_qmlnewcomp.append(new QmlComponent(itemContext()->engine(), url, this));
 
-    if(d->_qmlnewcomp.last()->isReady())
+    if(!d->_qmlnewcomp.last()->isLoading())
         qmlLoaded();
     else
-        connect(d->_qmlnewcomp.last(), SIGNAL(readyChanged()), 
+        connect(d->_qmlnewcomp.last(), SIGNAL(statusChanged(QmlComponent::Status)), 
                 this, SLOT(qmlLoaded()));
 }
 
diff --git a/src/declarative/fx/qfxkeyproxy.cpp b/src/declarative/fx/qfxkeyproxy.cpp
index 8598ad6..7d5726f 100644
--- a/src/declarative/fx/qfxkeyproxy.cpp
+++ b/src/declarative/fx/qfxkeyproxy.cpp
@@ -56,7 +56,7 @@ QML_DEFINE_TYPE(QFxKeyProxy,KeyProxy);
     \internal
     \class QFxKeyProxy
     \brief The QFxKeyProxy class proxies key presses to a number of other elements.
-    \ingroup utility
+    \ingroup group_utility
 */
 
 class QFxKeyProxyPrivate
diff --git a/src/declarative/fx/qfxlayouts.cpp b/src/declarative/fx/qfxlayouts.cpp
index 455b8a5..b89e795 100644
--- a/src/declarative/fx/qfxlayouts.cpp
+++ b/src/declarative/fx/qfxlayouts.cpp
@@ -65,7 +65,7 @@ QT_BEGIN_NAMESPACE
     that you use the move, remove and add transitions when those conditions
     arise.
 
-    \ingroup layouts
+    \ingroup group_layouts
 */
 QFxBaseLayout::QFxBaseLayout(AutoUpdateType at, QFxItem *parent)
     : QFxItem(*(new QFxBaseLayoutPrivate), parent)
@@ -577,7 +577,7 @@ QML_DEFINE_TYPE(QFxVerticalLayout, VerticalLayout);
     \internal
     \class QFxVerticalLayout
     \brief The QFxVerticalLayout class lines up items vertically.
-    \ingroup layouts
+    \ingroup group_layouts
 */
 QFxVerticalLayout::QFxVerticalLayout(QFxItem *parent)
 : QFxBaseLayout(Vertical, parent)
@@ -612,7 +612,6 @@ void QFxVerticalLayout::doLayout()
             setMovingItem(child);
             child->setY(voffset);
             setMovingItem(0);
-            child->setX(0);
         }
         voffset += child->height();
         voffset += spacing();
@@ -731,7 +730,7 @@ QML_DEFINE_TYPE(QFxHorizontalLayout,HorizontalLayout);
     \internal
     \class QFxHorizontalLayout
     \brief The QFxHorizontalLayout class lines up items horizontally.
-    \ingroup layouts
+    \ingroup group_layouts
 */
 QFxHorizontalLayout::QFxHorizontalLayout(QFxItem *parent)
 : QFxBaseLayout(Horizontal, parent)
@@ -766,7 +765,6 @@ void QFxHorizontalLayout::doLayout()
             setMovingItem(child);
             child->setX(hoffset);
             setMovingItem(0);
-            child->setY(0);
         }
         hoffset += child->width();
         hoffset += spacing();
@@ -910,7 +908,7 @@ QML_DEFINE_TYPE(QFxGridLayout,GridLayout);
     \internal
     \class QFxGridLayout
     \brief The QFxGridLayout class lays out items in a grid.
-    \ingroup layouts
+    \ingroup group_layouts
 
 */
 QFxGridLayout::QFxGridLayout(QFxItem *parent) :
diff --git a/src/declarative/fx/qfxmouseregion.cpp b/src/declarative/fx/qfxmouseregion.cpp
index 2bf7aa7..c6a7f96 100644
--- a/src/declarative/fx/qfxmouseregion.cpp
+++ b/src/declarative/fx/qfxmouseregion.cpp
@@ -242,7 +242,7 @@ QML_DEFINE_TYPE(QFxMouseRegion,MouseRegion);
     \class QFxMouseRegion
     \brief The QFxMouseRegion class provides a simple mouse handling abstraction for use within Qml.
 
-    \ingroup coreitems
+    \ingroup group_coreitems
 
     All QFxItem derived classes can do mouse handling but the QFxMouseRegion class exposes mouse
     handling data as properties and tracks flicking and dragging of the mouse.
diff --git a/src/declarative/fx/qfxpainted.cpp b/src/declarative/fx/qfxpainted.cpp
index a1eec69..8109efa 100644
--- a/src/declarative/fx/qfxpainted.cpp
+++ b/src/declarative/fx/qfxpainted.cpp
@@ -48,7 +48,7 @@ QT_BEGIN_NAMESPACE
     \class QFxPainted
     \brief QFxPainted is an abstract base class for QFxView items that paint using QPainter.
 
-    \ingroup coreitems
+    \ingroup group_coreitems
 
     This is a convenience class allowing easy use of QPainter within a custom item.
     The contents of the item are cached behind the scenes. Any time you change the contents
diff --git a/src/declarative/fx/qfxparticles.cpp b/src/declarative/fx/qfxparticles.cpp
index 3526541..939afba 100644
--- a/src/declarative/fx/qfxparticles.cpp
+++ b/src/declarative/fx/qfxparticles.cpp
@@ -110,7 +110,7 @@ QML_DEFINE_TYPE(QFxParticleMotion,ParticleMotion);
 
 /*!
     \class QFxParticleMotion
-    \ingroup effects
+    \ingroup group_effects
     \brief The QFxParticleMotion class is the base class for particle motion.
 
     This class causes the particles to remain static.
@@ -160,7 +160,7 @@ void QFxParticleMotion::destroy(QFxParticle &particle)
 /*!
     \internal
     \class QFxParticleMotionLinear
-    \ingroup effects
+    \ingroup group_effects
     \brief The QFxParticleMotionLinear class moves the particles linearly.
 
     \sa QFxParticles
@@ -184,7 +184,7 @@ void QFxParticleMotionLinear::advance(QFxParticle &p, int interval)
 /*!
     \internal
     \class QFxParticleMotionGravity
-    \ingroup effects
+    \ingroup group_effects
     \brief The QFxParticleMotionGravity class moves the particles towards a point.
 
     \sa QFxParticles
@@ -259,7 +259,7 @@ void QFxParticleMotionGravity::advance(QFxParticle &p, int interval)
 /*!
     \internal
     \class QFxParticleMotionWander
-    \ingroup effects
+    \ingroup group_effects
     \brief The QFxParticleMotionWander class moves particles in a somewhat random fashion.
 
     The particles will continue roughly in the original direction, however will randomly
@@ -544,7 +544,7 @@ QML_DEFINE_TYPE(QFxParticles,Particles);
 /*!
     \internal
     \class QFxParticles
-    \ingroup effects
+    \ingroup group_effects
     \brief The QFxParticles class generates and moves particles.
 */
 
diff --git a/src/declarative/fx/qfxpath.cpp b/src/declarative/fx/qfxpath.cpp
index 199f5fb..14c06bb 100644
--- a/src/declarative/fx/qfxpath.cpp
+++ b/src/declarative/fx/qfxpath.cpp
@@ -65,7 +65,7 @@ QML_DEFINE_TYPE(QFxPathCubic,PathCubic);
 /*!
     \internal
     \class QFxPath
-    \ingroup utility
+    \ingroup group_utility
     \brief The QFxPath class defines a path.
     \sa QFxPathView
 */
@@ -469,7 +469,7 @@ void QFxCurve::setY(int y)
 /*!
     \internal
     \class QFxPathAttribute
-    \ingroup utility
+    \ingroup group_utility
     \brief The QFxPathAttribute class allows to set the value of an attribute at a given position in the path.
 
     \sa QFxPath
@@ -527,7 +527,7 @@ void QFxPathAttribute::setValue(qreal value)
 /*!
     \internal
     \class QFxPathLine
-    \ingroup utility
+    \ingroup group_utility
     \brief The QFxPathLine class defines a straight line.
 
     \sa QFxPath
@@ -549,7 +549,7 @@ void QFxPathLine::addToPath(QPainterPath &path)
 /*!
     \internal
     \class QFxPathQuad
-    \ingroup utility
+    \ingroup group_utility
     \brief The QFxPathQuad class defines a quadratic Bezier curve with a control point.
 
     \sa QFxPath
@@ -613,7 +613,7 @@ void QFxPathQuad::addToPath(QPainterPath &path)
 /*!
     \internal
     \class QFxPathCubic
-    \ingroup utility
+    \ingroup group_utility
     \brief The QFxPathCubic class defines a cubic Bezier curve with two control points.
 
     \sa QFxPath
@@ -723,7 +723,7 @@ void QFxPathCubic::addToPath(QPainterPath &path)
 /*!
     \internal
     \class QFxPathPercent
-    \ingroup utility
+    \ingroup group_utility
     \brief The QFxPathPercent class manipulates the way a path is interpreted.
 
     QFxPathPercent allows you to bunch up items (or spread out items) along various
diff --git a/src/declarative/fx/qfxpathview.cpp b/src/declarative/fx/qfxpathview.cpp
index 79b0f8e..99f6e86 100644
--- a/src/declarative/fx/qfxpathview.cpp
+++ b/src/declarative/fx/qfxpathview.cpp
@@ -88,7 +88,7 @@ private:
     \class QFxPathView
     \brief The QFxPathView class lays out items provided by a model on a path.
 
-    \ingroup views
+    \ingroup group_views
 
     The model must be a \l QListModelInterface subclass.
 
diff --git a/src/declarative/fx/qfxpixmap.cpp b/src/declarative/fx/qfxpixmap.cpp
index 883dbdf..5a08679 100644
--- a/src/declarative/fx/qfxpixmap.cpp
+++ b/src/declarative/fx/qfxpixmap.cpp
@@ -85,7 +85,7 @@ public:
 /*!
     \internal
     \class QFxPixmap
-    \ingroup utility
+    \ingroup group_utility
     \brief Enacapsultes a pixmap for QFx items.
 
     This class is NOT reentrant.
diff --git a/src/declarative/fx/qfxrect.cpp b/src/declarative/fx/qfxrect.cpp
index 718dc76..2e84c74 100644
--- a/src/declarative/fx/qfxrect.cpp
+++ b/src/declarative/fx/qfxrect.cpp
@@ -49,7 +49,7 @@ QML_DEFINE_TYPE(QFxPen,Pen);
 /*!
     \internal
     \class QFxPen
-    \ingroup utility
+    \ingroup group_utility
     \brief The QFxPen class provides a pen used for drawing rect borders on a QFxView.
 
     Example:
@@ -126,7 +126,7 @@ QML_DEFINE_TYPE(QFxRect,Rect);
 
     A QFxRect object can be instantiated in Qml using the tag \l Rect.
 
-    \ingroup coreitems
+    \ingroup group_coreitems
 */
 QFxRect::QFxRect(QFxItem *parent)
   : QFxItem(*(new QFxRectPrivate), parent)
diff --git a/src/declarative/fx/qfxreflectionfilter.cpp b/src/declarative/fx/qfxreflectionfilter.cpp
index a541083..d67095b 100644
--- a/src/declarative/fx/qfxreflectionfilter.cpp
+++ b/src/declarative/fx/qfxreflectionfilter.cpp
@@ -111,7 +111,7 @@ public:
 /*!
     \internal
     \class QFxReflectionFilter
-    \ingroup effects
+    \ingroup group_effects
     \brief The QFxReflectionFilter class allows you to add a reflection to an item.
 */
 QFxReflectionFilter::QFxReflectionFilter(QObject *parent)
diff --git a/src/declarative/fx/qfxrepeater.cpp b/src/declarative/fx/qfxrepeater.cpp
index 823932c..ec1d88c 100644
--- a/src/declarative/fx/qfxrepeater.cpp
+++ b/src/declarative/fx/qfxrepeater.cpp
@@ -122,7 +122,7 @@ QML_DEFINE_TYPE(QFxRepeater,Repeater);
 /*!
     \internal
     \class QFxRepeater
-    \ingroup utility
+    \ingroup group_utility
     \qmlclass Repeater
 
     \brief The QFxRepeater class allows you to repeat a component based on a 
diff --git a/src/declarative/fx/qfxshadowfilter.cpp b/src/declarative/fx/qfxshadowfilter.cpp
index d10899f..3760a4d 100644
--- a/src/declarative/fx/qfxshadowfilter.cpp
+++ b/src/declarative/fx/qfxshadowfilter.cpp
@@ -90,7 +90,7 @@ public:
 /*!
     \internal
     \class QFxShadowFilter
-    \ingroup effects
+    \ingroup group_effects
     \brief The QFxShadowFilter class allows you to add a shadow to an item.
 */
 
@@ -128,7 +128,7 @@ void QFxShadowFilter::setXOffset(int offset)
 }
 
 /*!
-    \property QFxShadowFilter::xOffset
+    \property QFxShadowFilter::yOffset
     \brief the y offset of the shadow relative to the item.
 */
 int QFxShadowFilter::yOffset() const
diff --git a/src/declarative/fx/qfxtext.cpp b/src/declarative/fx/qfxtext.cpp
index 9cf1bb0..bc03d7c 100644
--- a/src/declarative/fx/qfxtext.cpp
+++ b/src/declarative/fx/qfxtext.cpp
@@ -93,7 +93,7 @@ QML_DEFINE_TYPE(QFxText,Text);
     \internal
     \class QFxText
     \qmlclass Text
-    \ingroup coreitems
+    \ingroup group_coreitems
 
     \brief The QFxText class provides a formatted text item that you can add to a QFxView.
 
diff --git a/src/declarative/fx/qfxtextedit.cpp b/src/declarative/fx/qfxtextedit.cpp
index ebfe799..96ebe0d 100644
--- a/src/declarative/fx/qfxtextedit.cpp
+++ b/src/declarative/fx/qfxtextedit.cpp
@@ -83,7 +83,7 @@ QML_DEFINE_TYPE(QFxTextEdit, TextEdit);
     \internal
     \class QFxTextEdit
     \qmlclass TextEdit
-    \ingroup coreitems
+    \ingroup group_coreitems
 
     \brief The QFxTextEdit class provides an editable formatted text item that you can add to a QFxView.
 
diff --git a/src/declarative/fx/qfxtransform.cpp b/src/declarative/fx/qfxtransform.cpp
index 8d8e5b4..90875a6 100644
--- a/src/declarative/fx/qfxtransform.cpp
+++ b/src/declarative/fx/qfxtransform.cpp
@@ -344,7 +344,7 @@ public:
     \class QFxFlipable
     \brief The QFxFlipable class provides a flipable surface.
 
-    \ingroup widgets
+    \ingroup group_widgets
 
     QFxFlipable allows you to specify a front and a back, as well as an
     axis for the flip.
diff --git a/src/declarative/fx/qfxwebview.cpp b/src/declarative/fx/qfxwebview.cpp
index c4a2750..a5d2ac3 100644
--- a/src/declarative/fx/qfxwebview.cpp
+++ b/src/declarative/fx/qfxwebview.cpp
@@ -243,7 +243,7 @@ void QFxWebView::componentComplete()
     This property holds the progress of loading the current URL, from 0 to 1.
 */
 /*!
-    \property qreal QFxWebView::progress
+    \property QFxWebView::progress
     \brief the progress of loading the current URL, from 0 to 1.
 */
 qreal QFxWebView::progress() const
@@ -284,7 +284,7 @@ void QFxWebView::doLoadFinished(bool ok)
     loading of the URL successfully starts.
 */
 /*!
-    \property QString QFxWebView::url
+    \property QFxWebView::url
     \brief the URL to the page displayed in this item.
 
     \sa urlChanged()
@@ -330,7 +330,7 @@ void QFxWebView::setUrl(const QString &n)
     This property holds the ideal width for displaying the current URL.
 */
 /*!
-    \property int QFxWebView::idealWidth
+    \property QFxWebView::idealWidth
     \brief the ideal width for displaying the current URL.
 */
 int QFxWebView::idealWidth() const
@@ -353,7 +353,7 @@ void QFxWebView::setIdealWidth(int iw)
     This property holds the ideal height for displaying the current URL.
 */
 /*!
-    \property int QFxWebView::idealHeight
+    \property QFxWebView::idealHeight
     \brief the ideal height for displaying the current URL.
 */
 int QFxWebView::idealHeight() const
@@ -376,7 +376,7 @@ void QFxWebView::setIdealHeight(int ih)
     This property holds controls whether the item responds to mouse and key events.
 */
 /*!
-    \property bool QFxWebView::interactive
+    \property QFxWebView::interactive
     \brief controls whether the item responds to mouse and key events.
 */
 bool QFxWebView::interactive() const
@@ -398,7 +398,7 @@ void QFxWebView::setInteractive(bool i)
     This property holds hints as to whether the item should be drawn anti-aliased.
 */
 /*!
-    \property bool QFxWebView::smooth
+    \property QFxWebView::smooth
     \brief hints as to whether the item should be drawn anti-aliased.
 */
 bool QFxWebView::smooth() const
@@ -466,7 +466,7 @@ void QFxWebView::paintPage(const QRect& r)
     The cache will not be larger than the (unscaled) size of the WebView.
 */
 /*!
-    \property int QFxWebView::cacheSize
+    \property QFxWebView::cacheSize
     \brief the maximum number of pixels of image cache to allow
     The default is 0.1 megapixels.
 
@@ -1029,7 +1029,7 @@ public:
         QmlEngine *engine = webview->itemContext()->engine();
         component = new QmlComponent(engine, url, this);
         item = 0;
-        connect(engine, SIGNAL(readyChanged()), this, SLOT(qmlLoaded()));
+        connect(engine, SIGNAL(statusChanged(Status)), this, SLOT(qmlLoaded()));
     }
 
 public Q_SLOTS:
diff --git a/src/declarative/qml/qmlcompiler.cpp b/src/declarative/qml/qmlcompiler.cpp
index 9af0a06..f03ce20 100644
--- a/src/declarative/qml/qmlcompiler.cpp
+++ b/src/declarative/qml/qmlcompiler.cpp
@@ -448,7 +448,7 @@ void QmlCompiler::reset(QmlCompiledComponent *cc, bool deleteMemory)
     }
 
 bool QmlCompiler::compile(QmlEngine *engine, 
-                          QmlCompositeTypeManager::TypeData *unit,
+                          QmlCompositeTypeData *unit,
                           QmlCompiledComponent *out)
 {
 #ifdef Q_ENABLE_PERFORMANCE_LOG
@@ -463,7 +463,7 @@ bool QmlCompiler::compile(QmlEngine *engine,
 
     // Compile types
     for(int ii = 0; ii < unit->types.count(); ++ii) {
-        QmlCompositeTypeManager::TypeData::TypeReference &tref = unit->types[ii];
+        QmlCompositeTypeData::TypeReference &tref = unit->types[ii];
         QmlCompiledComponent::TypeReference ref;
         if(tref.type)
             ref.type = tref.type;
diff --git a/src/declarative/qml/qmlcompiler_p.h b/src/declarative/qml/qmlcompiler_p.h
index 732d9ea..754e284 100644
--- a/src/declarative/qml/qmlcompiler_p.h
+++ b/src/declarative/qml/qmlcompiler_p.h
@@ -112,7 +112,7 @@ class Q_DECLARATIVE_EXPORT QmlCompiler
 public:
     QmlCompiler();
 
-    bool compile(QmlEngine *, QmlCompositeTypeManager::TypeData *, QmlCompiledComponent *);
+    bool compile(QmlEngine *, QmlCompositeTypeData *, QmlCompiledComponent *);
 
     bool isError() const;
     qint64 errorLine() const;
diff --git a/src/declarative/qml/qmlcomponent.cpp b/src/declarative/qml/qmlcomponent.cpp
index c863a00..83d500c 100644
--- a/src/declarative/qml/qmlcomponent.cpp
+++ b/src/declarative/qml/qmlcomponent.cpp
@@ -65,8 +65,43 @@ class QByteArray;
     \brief The QmlComponent class encapsulates a QML component description.
     \mainclass
 */
+
+/*!
+    \qmlclass Component QmlComponent
+    \brief The Component element encapsulates a QML component description.
+
+    Components are reusable, encapsulated Qml element with a well-defined interface.
+    They are often defined in \l {components}{Component Files}.
+
+    The \e Component element allows defining components within a QML file.
+    This can be useful for reusing a small component within a single QML
+    file, or for defining a component that logically belongs with the
+    file containing it.
+
+    \code
+    <Item>
+        <Component id="RedSquare">
+            <Rect color="red" width="10" height="10"/>
+        </Component>
+
+        <ComponentInstance component="{RedSquare}"/>
+        <ComponentInstance component="{RedSquare}" x="20"/>
+    </Item>
+    \endcode
+*/
 QML_DEFINE_TYPE(QmlComponent,Component);
 
+/*!
+    \enum QmlComponent::Status
+    
+    Specifies the loading status of the QmlComponent.
+
+    \value Null This QmlComponent has no data.  Call loadUrl() or setData() to add QML content.
+    \value Ready This QmlComponent is ready and create() may be called.
+    \value Loading This QmlComponent is loading network data.
+    \value Error An error has occured.  Calling errorDescription() to retrieve a description.
+*/
+
 void QmlComponentPrivate::typeDataReady()
 {
     Q_Q(QmlComponent);
@@ -76,19 +111,21 @@ void QmlComponentPrivate::typeDataReady()
     fromTypeData(typeData);
     typeData = 0;
 
-    emit q->readyChanged();
+    emit q->statusChanged(q->status());
 }
 
-void QmlComponentPrivate::fromTypeData(QmlCompositeTypeManager::TypeData *data)
+void QmlComponentPrivate::fromTypeData(QmlCompositeTypeData *data)
 {
-    name = data->url;
+    url = QUrl(data->url);
     QmlCompiledComponent *c = data->toCompiledComponent(engine);
 
     if(!c) {
-        Q_ASSERT(data->status == QmlCompositeTypeManager::TypeData::Error);
+        Q_ASSERT(data->status == QmlCompositeTypeData::Error);
 
+        errorDescription = data->errorDescription;
         qWarning().nospace() << "QmlComponent: "
                              << data->errorDescription.toLatin1().constData();
+
     } else {
 
         cc = c;
@@ -98,14 +135,26 @@ void QmlComponentPrivate::fromTypeData(QmlCompositeTypeManager::TypeData *data)
     data->release();
 }
 
+void QmlComponentPrivate::clear()
+{
+    if(typeData) {
+        typeData->remWaiter(this);
+        typeData->release();
+        typeData = 0;
+    }
+        
+    if(cc) { 
+        cc->release();
+        cc = 0;
+    }
+}
+
 /*!
-    Construct a null QmlComponent.
+    \internal
 */
 QmlComponent::QmlComponent(QObject *parent)
     : QObject(*(new QmlComponentPrivate), parent)
 {
-    Q_D(QmlComponent);
-    d->name = QLatin1String("<unspecified file>");
 }
 
 /*!
@@ -122,62 +171,66 @@ QmlComponent::~QmlComponent()
         d->cc->release();
 }
 
-/*!
-    \property QmlComponent::name
-    \brief the component's name.
-
-    The component's name is used in error and warning messages.  If available,
-    the XML source file name is used as the component's name, otherwise it is
-    set to "<unspecified file>".
-*/
-QString QmlComponent::name() const
+QmlComponent::Status QmlComponent::status() const
 {
     Q_D(const QmlComponent);
-    return d->name;
-}
 
-void QmlComponent::setName(const QString &name)
-{
-    Q_D(QmlComponent);
-    d->name = name;
+    if(d->typeData)
+        return Loading;
+    else if(d->engine && d->cc)
+        return Ready;
+    else if(!d->errorDescription.isEmpty())
+        return Error;
+    else
+        return Null;
 }
 
 /*!
-    \internal
+    Returns true if the component is in the Null state, false otherwise.
+
+    Equivalent to status() == QmlComponent::Null.
 */
-QmlComponent::QmlComponent(QmlEngine *engine, QmlCompiledComponent *cc, int start, int count, QObject *parent)
-    : QObject(*(new QmlComponentPrivate), parent)
+bool QmlComponent::isNull() const
 {
-    Q_D(QmlComponent);
-    d->engine = engine;
-    d->name = QLatin1String("<unspecified file>");
-    d->cc = cc;
-    cc->addref();
-    d->start = start;
-    d->count = count;
+    return status() == Null;
 }
 
-QmlComponent::QmlComponent(QmlEngine *engine, const QUrl &url, QObject *parent)
-: QObject(*(new QmlComponentPrivate), parent)
+/*!
+    Returns true if the component is in the Ready state, false otherwise.
+
+    Equivalent to status() == QmlComponent::Ready.
+*/
+bool QmlComponent::isReady() const
 {
-    Q_D(QmlComponent);
-    d->engine = engine;
-    d->name = url.toString();
+    return status() == Ready;
+}
 
-    QmlCompositeTypeManager::TypeData *data = 
-        engine->d_func()->typeManager.get(url);
+/*!
+    Returns true if the component is in the Error state, false otherwise.
 
-    if(data->status == QmlCompositeTypeManager::TypeData::Waiting) {
+    Equivalent to status() == QmlComponent::Error.
+*/
+bool QmlComponent::isError() const
+{
+    return status() == Error;
+}
 
-        d->typeData = data;
-        d->typeData->addWaiter(d);
+/*!
+    Returns true if the component is in the Loading state, false otherwise.
 
-    } else {
+    Equivalent to status() == QmlComponent::Loading.
+*/
+bool QmlComponent::isLoading() const
+{
+    return status() == Loading;
+}
 
-        d->fromTypeData(data);
+/*!
+    \fn void QmlComponent::statusChanged(QmlComponent::Status status)
 
-    }
-}
+    Emitted whenever the component's status changes.  \a status will be the
+    new status.
+*/
 
 /*!
     Create a QmlComponent with no data. Set setData().
@@ -190,6 +243,17 @@ QmlComponent::QmlComponent(QmlEngine *engine, QObject *parent)
 }
 
 /*!
+    Create a QmlComponent from the given \a url.
+*/
+QmlComponent::QmlComponent(QmlEngine *engine, const QUrl &url, QObject *parent)
+: QObject(*(new QmlComponentPrivate), parent)
+{
+    Q_D(QmlComponent);
+    d->engine = engine;
+    loadUrl(url);
+}
+
+/*!
     Create a QmlComponent from the given XML \a data.  If provided, \a filename
     is used to set the component name, and to provide a base path for items
     resolved by this component.
@@ -203,27 +267,36 @@ QmlComponent::QmlComponent(QmlEngine *engine, const QByteArray &data, const QUrl
 }
 
 /*!
-    Sets the QmlComponent to use the given XML \a data.  If provided, \a filename
-    is used to set the component name, and to provide a base path for items
-    resolved by this component.
+    \internal
+*/
+QmlComponent::QmlComponent(QmlEngine *engine, QmlCompiledComponent *cc, int start, int count, QObject *parent)
+    : QObject(*(new QmlComponentPrivate), parent)
+{
+    Q_D(QmlComponent);
+    d->engine = engine;
+    d->cc = cc;
+    cc->addref();
+    d->start = start;
+    d->count = count;
+}
 
-    Currently only supported to call once per component.
+/*!
+    Sets the QmlComponent to use the given XML \a data.  If provided, 
+    \a filename is used to set the component name, and to provide a base path 
+    for items resolved by this component.
 */
 void QmlComponent::setData(const QByteArray &data, const QUrl &url)
 {
     Q_D(QmlComponent);
 
-    if(d->cc) d->cc->release();
-    if(d->typeData) d->typeData->release();
-    d->cc = 0;
-    d->typeData = 0;
+    d->clear();
 
-    d->name = url.toString();
+    d->url = url;
 
-    QmlCompositeTypeManager::TypeData *typeData = 
+    QmlCompositeTypeData *typeData = 
         d->engine->d_func()->typeManager.getImmediate(data, url);
     
-    if(typeData->status == QmlCompositeTypeManager::TypeData::Waiting) {
+    if(typeData->status == QmlCompositeTypeData::Waiting) {
 
         d->typeData = typeData;
         d->typeData->addWaiter(d);
@@ -234,13 +307,54 @@ void QmlComponent::setData(const QByteArray &data, const QUrl &url)
 
     }
 
+    emit statusChanged(status());
 }
 
-bool QmlComponent::isReady() const
+/*!
+    Load the QmlComponent from the provided \a url.
+*/
+void QmlComponent::loadUrl(const QUrl &url)
+{
+    Q_D(QmlComponent);
+
+    d->clear();
+
+    d->url = url;
+
+    QmlCompositeTypeData *data = 
+        d->engine->d_func()->typeManager.get(url);
+
+    if(data->status == QmlCompositeTypeData::Waiting) {
+
+        d->typeData = data;
+        d->typeData->addWaiter(d);
+
+    } else {
+
+        d->fromTypeData(data);
+
+    }
+
+    emit statusChanged(status());
+}
+
+QString QmlComponent::errorDescription() const
 {
     Q_D(const QmlComponent);
+    if(isError())
+        return d->errorDescription;
+    else
+        return QString();
+}
 
-    return d->engine && !d->typeData;
+/*!
+    Return the component URL.  This is the URL passed to either the constructor,
+    or the loadUrl() or setData() methods.
+*/
+QUrl QmlComponent::url() const
+{
+    Q_D(const QmlComponent);
+    return d->url;
 }
 
 /*!
@@ -249,9 +363,6 @@ bool QmlComponent::isReady() const
 QmlComponent::QmlComponent(QmlComponentPrivate &dd, QObject *parent)
     : QObject(dd, parent)
 {
-    Q_D(QmlComponent);
-    d->name = QLatin1String("<unspecified file>");
-    d->cc = new QmlCompiledComponent;
 }
 
 /*!
@@ -320,8 +431,9 @@ QObject *QmlComponent::beginCreate(QmlContext *context)
         qWarning("QmlComponent: Cannot create new component instance before completing the previous");
         return 0;
     }
-    if (!d->cc) {
-        qWarning("QmlComponent: Cannot load component data");
+
+    if(!isReady()) {
+        qWarning("QmlComponent: Cannot create un-ready component");
         return 0;
     }
 
@@ -345,7 +457,7 @@ QObject *QmlComponent::beginCreate(QmlContext *context)
                              << "QmlComponent: "
 #endif
                              << vme.errorDescription().toLatin1().constData() << " @"
-                             << d->name.toLatin1().constData() << ":" << vme.errorLine();
+                             << d->url.toString().toLatin1().constData() << ":" << vme.errorLine();
     }
 
 
diff --git a/src/declarative/qml/qmlcomponent.h b/src/declarative/qml/qmlcomponent.h
index 1a74fe9..83d08ea 100644
--- a/src/declarative/qml/qmlcomponent.h
+++ b/src/declarative/qml/qmlcomponent.h
@@ -62,36 +62,43 @@ class Q_DECLARATIVE_EXPORT QmlComponent : public QObject
     Q_OBJECT
     Q_DECLARE_PRIVATE(QmlComponent);
 
-    Q_PROPERTY(QString name READ name WRITE setName);
-
 public:
-    QmlComponent(QObject *parent=0);
+    QmlComponent(QObject *parent = 0);
     QmlComponent(QmlEngine *, QObject *parent=0);
     QmlComponent(QmlEngine *, const QUrl &url, QObject *parent = 0);
-    QmlComponent(QmlEngine *, const QByteArray &, const QUrl &url=QUrl(), QObject *parent=0);
-    ~QmlComponent();
+    QmlComponent(QmlEngine *, const QByteArray &data, 
+                 const QUrl &baseUrl=QUrl(), QObject *parent=0);
+    virtual ~QmlComponent();
 
-    virtual QObject *create(QmlContext *context = 0);
-    virtual QObject *beginCreate(QmlContext *);
-    virtual void completeCreate();
+    enum Status { Null, Ready, Loading, Error };
+    Status status() const;
 
-    QString name() const;
-    void setName(const QString &name);
+    bool isNull() const;
+    bool isReady() const;
+    bool isError() const;
+    bool isLoading() const;
+    QString errorDescription() const;
 
-    void setData(const QByteArray &, const QUrl &url);
+    QUrl url() const;
 
-    bool isReady() const;
+    virtual QObject *create(QmlContext *context = 0);
+    virtual QObject *beginCreate(QmlContext *);
+    virtual void completeCreate();
 
-    QmlComponent(QmlEngine *, QmlCompiledComponent *, int, int, QObject *parent);
+    void loadUrl(const QUrl &url);
+    void setData(const QByteArray &, const QUrl &baseUrl = QUrl());
 
 Q_SIGNALS:
-    void readyChanged();
+    void statusChanged(QmlComponent::Status);
 
 protected:
     QmlComponent(QmlComponentPrivate &dd, QObject* parent);
 
 private:
+    QmlComponent(QmlEngine *, QmlCompiledComponent *, int, int, QObject *parent);
+
     friend class QmlVME;
+    friend class QmlCompositeTypeData;
 };
 QML_DECLARE_TYPE(QmlComponent);
 
diff --git a/src/declarative/qml/qmlcomponent_p.h b/src/declarative/qml/qmlcomponent_p.h
index e97ec67..8074775 100644
--- a/src/declarative/qml/qmlcomponent_p.h
+++ b/src/declarative/qml/qmlcomponent_p.h
@@ -63,12 +63,13 @@ class QmlComponentPrivate : public QObjectPrivate
 public:
     QmlComponentPrivate() : typeData(0), start(-1), count(-1), cc(0), completePending(false), engine(0) {}
 
-    QmlCompositeTypeManager::TypeData *typeData;
+    QmlCompositeTypeData *typeData;
     void typeDataReady();
     
-    void fromTypeData(QmlCompositeTypeManager::TypeData *data);
+    void fromTypeData(QmlCompositeTypeData *data);
 
-    QString name;
+    QString errorDescription;
+    QUrl url;
 
     int start;
     int count;
@@ -78,6 +79,8 @@ public:
     bool completePending;
 
     QmlEngine *engine;
+
+    void clear();
 };
 
 #endif // QMLCOMPONENT_P_H
diff --git a/src/declarative/qml/qmlcompositetypemanager.cpp b/src/declarative/qml/qmlcompositetypemanager.cpp
index 65596ae..b0d121c 100644
--- a/src/declarative/qml/qmlcompositetypemanager.cpp
+++ b/src/declarative/qml/qmlcompositetypemanager.cpp
@@ -50,12 +50,12 @@
 #include <QtDeclarative/qmlcomponent.h>
 #include <private/qmlcomponent_p.h>
 
-QmlCompositeTypeManager::TypeData::TypeData()
+QmlCompositeTypeData::QmlCompositeTypeData()
 : status(Invalid), component(0), compiledComponent(0)
 {
 }
 
-QmlCompositeTypeManager::TypeData::~TypeData()
+QmlCompositeTypeData::~QmlCompositeTypeData()
 {
     for(int ii = 0; ii < dependants.count(); ++ii)
         dependants.at(ii)->release();
@@ -67,17 +67,17 @@ QmlCompositeTypeManager::TypeData::~TypeData()
         delete component;
 }
 
-void QmlCompositeTypeManager::TypeData::addWaiter(QmlComponentPrivate *p)
+void QmlCompositeTypeData::addWaiter(QmlComponentPrivate *p)
 {
     waiters << p;
 }
 
-void QmlCompositeTypeManager::TypeData::remWaiter(QmlComponentPrivate *p)
+void QmlCompositeTypeData::remWaiter(QmlComponentPrivate *p)
 {
     waiters.removeAll(p);
 }
 
-QmlComponent *QmlCompositeTypeManager::TypeData::toComponent(QmlEngine *engine)
+QmlComponent *QmlCompositeTypeData::toComponent(QmlEngine *engine)
 {
     if(!component) {
 
@@ -94,7 +94,7 @@ QmlComponent *QmlCompositeTypeManager::TypeData::toComponent(QmlEngine *engine)
 }
 
 QmlCompiledComponent *
-QmlCompositeTypeManager::TypeData::toCompiledComponent(QmlEngine *engine)
+QmlCompositeTypeData::toCompiledComponent(QmlEngine *engine)
 {
     if(status == Complete && !compiledComponent) {
 
@@ -123,7 +123,7 @@ QmlCompositeTypeManager::TypeData::toCompiledComponent(QmlEngine *engine)
     return compiledComponent;
 }
 
-QmlCompositeTypeManager::TypeData::TypeReference::TypeReference()
+QmlCompositeTypeData::TypeReference::TypeReference()
 : type(0), unit(0), parser(0) 
 {
 }
@@ -133,13 +133,13 @@ QmlCompositeTypeManager::QmlCompositeTypeManager(QmlEngine *e)
 {
 }
 
-QmlCompositeTypeManager::TypeData *QmlCompositeTypeManager::get(const QUrl &url)
+QmlCompositeTypeData *QmlCompositeTypeManager::get(const QUrl &url)
 {
-    TypeData *unit = components.value(url.toString());
+    QmlCompositeTypeData *unit = components.value(url.toString());
 
     if(!unit) {
-        unit = new TypeData;
-        unit->status = TypeData::Waiting;
+        unit = new QmlCompositeTypeData;
+        unit->status = QmlCompositeTypeData::Waiting;
         unit->url = url.toString();
         components.insert(url.toString(), unit);
 
@@ -150,11 +150,11 @@ QmlCompositeTypeManager::TypeData *QmlCompositeTypeManager::get(const QUrl &url)
     return unit;
 }
 
-QmlCompositeTypeManager::TypeData *
+QmlCompositeTypeData *
 QmlCompositeTypeManager::getImmediate(const QByteArray &data, const QUrl &url)
 {
-    TypeData *unit = new TypeData;
-    unit->status = TypeData::Waiting;
+    QmlCompositeTypeData *unit = new QmlCompositeTypeData;
+    unit->status = QmlCompositeTypeData::Waiting;
     unit->url = url.toString();
     setData(unit, data, url);
     return unit;
@@ -163,7 +163,7 @@ QmlCompositeTypeManager::getImmediate(const QByteArray &data, const QUrl &url)
 void QmlCompositeTypeManager::clearCache()
 {
     for(Components::Iterator iter = components.begin(); iter != components.end();) {
-        if((*iter)->status != TypeData::Waiting) {
+        if((*iter)->status != QmlCompositeTypeData::Waiting) {
             (*iter)->release();
             iter = components.erase(iter);
         } else {
@@ -177,7 +177,7 @@ void QmlCompositeTypeManager::replyFinished()
 {
     QNetworkReply *reply = static_cast<QNetworkReply *>(sender());
 
-    TypeData *unit = components.value(reply->url().toString());
+    QmlCompositeTypeData *unit = components.value(reply->url().toString());
     Q_ASSERT(unit);
 
     if(reply->error() != QNetworkReply::NoError) {
@@ -187,7 +187,7 @@ void QmlCompositeTypeManager::replyFinished()
         errorDescription = QLatin1String("Network error for URL ") + 
                       reply->url().toString();
 
-        unit->status = TypeData::Error;
+        unit->status = QmlCompositeTypeData::Error;
         unit->errorDescription = errorDescription;
         doComplete(unit);
 
@@ -200,7 +200,7 @@ void QmlCompositeTypeManager::replyFinished()
     reply->deleteLater();
 }
 
-void QmlCompositeTypeManager::loadSource(TypeData *unit)
+void QmlCompositeTypeManager::loadSource(QmlCompositeTypeData *unit)
 {
     QUrl url(unit->url);
 
@@ -214,7 +214,7 @@ void QmlCompositeTypeManager::loadSource(TypeData *unit)
             QString errorDescription;
             // ### - Fill in error
             errorDescription = QLatin1String("File error for URL ") + url.toString();
-            unit->status = TypeData::Error;
+            unit->status = QmlCompositeTypeData::Error;
             unit->errorDescription = errorDescription;
             doComplete(unit);
         }
@@ -227,12 +227,13 @@ void QmlCompositeTypeManager::loadSource(TypeData *unit)
     }
 }
 
-void QmlCompositeTypeManager::setData(TypeData *unit, const QByteArray &data,
-                              const QUrl &url)
+void QmlCompositeTypeManager::setData(QmlCompositeTypeData *unit, 
+                                     const QByteArray &data,
+                                     const QUrl &url)
 {
     if(!unit->data.parse(data, url)) {
 
-        unit->status = TypeData::Error;
+        unit->status = QmlCompositeTypeData::Error;
         unit->errorDescription = unit->data.errorDescription();
         doComplete(unit);
 
@@ -244,7 +245,7 @@ void QmlCompositeTypeManager::setData(TypeData *unit, const QByteArray &data,
     }
 }
 
-void QmlCompositeTypeManager::doComplete(TypeData *unit)
+void QmlCompositeTypeManager::doComplete(QmlCompositeTypeData *unit)
 {
     for(int ii = 0; ii < unit->dependants.count(); ++ii) {
         checkComplete(unit->dependants.at(ii));
@@ -258,34 +259,34 @@ void QmlCompositeTypeManager::doComplete(TypeData *unit)
     }
 }
 
-void QmlCompositeTypeManager::checkComplete(TypeData *unit)
+void QmlCompositeTypeManager::checkComplete(QmlCompositeTypeData *unit)
 {
-    if(unit->status != TypeData::Waiting)
+    if(unit->status != QmlCompositeTypeData::Waiting)
         return;
 
     int waiting = 0;
     for(int ii = 0; ii < unit->types.count(); ++ii) {
-        TypeData *u = unit->types.at(ii).unit;
+        QmlCompositeTypeData *u = unit->types.at(ii).unit;
 
         if(!u)
             continue;
 
-        if(u->status == TypeData::Error) {
-            unit->status = TypeData::Error;
+        if(u->status == QmlCompositeTypeData::Error) {
+            unit->status = QmlCompositeTypeData::Error;
             unit->errorDescription = u->errorDescription;
             doComplete(unit);
             return;
-        } else if(u->status == TypeData::Waiting) {
+        } else if(u->status == QmlCompositeTypeData::Waiting) {
             waiting++;
         }
     }
     if(!waiting) {
-        unit->status = TypeData::Complete;
+        unit->status = QmlCompositeTypeData::Complete;
         doComplete(unit);
     }
 }
 
-void QmlCompositeTypeManager::compile(TypeData *unit)
+void QmlCompositeTypeManager::compile(QmlCompositeTypeData *unit)
 {
     QStringList typeNames = unit->data.types();
 
@@ -293,7 +294,7 @@ void QmlCompositeTypeManager::compile(TypeData *unit)
     for(int ii = 0; ii < typeNames.count(); ++ii) {
         QByteArray type = typeNames.at(ii).toLatin1();
 
-        TypeData::TypeReference ref;
+        QmlCompositeTypeData::TypeReference ref;
         if (type == QByteArray("Property") ||
             type == QByteArray("Signal")) {
             unit->types << ref;
@@ -317,11 +318,11 @@ void QmlCompositeTypeManager::compile(TypeData *unit)
         }
 
         QUrl url = engine->componentUrl(QUrl(type + ".qml"), QUrl(unit->url));
-        TypeData *urlUnit = components.value(url.toString());
+        QmlCompositeTypeData *urlUnit = components.value(url.toString());
 
         if(!urlUnit) {
-            urlUnit = new TypeData;
-            urlUnit->status = TypeData::Waiting;
+            urlUnit = new QmlCompositeTypeData;
+            urlUnit->status = QmlCompositeTypeData::Waiting;
             urlUnit->url = url.toString();
             components.insert(url.toString(), urlUnit);
 
@@ -330,17 +331,17 @@ void QmlCompositeTypeManager::compile(TypeData *unit)
 
         ref.unit = urlUnit;
         switch(urlUnit->status) {
-        case TypeData::Invalid:
-        case TypeData::Error:
-            unit->status = TypeData::Error;
+        case QmlCompositeTypeData::Invalid:
+        case QmlCompositeTypeData::Error:
+            unit->status = QmlCompositeTypeData::Error;
             unit->errorDescription = urlUnit->errorDescription;
             doComplete(unit);
             return;
 
-        case TypeData::Complete:
+        case QmlCompositeTypeData::Complete:
             break;
 
-        case TypeData::Waiting:
+        case QmlCompositeTypeData::Waiting:
             unit->addref();
             ref.unit->dependants << unit;
             waiting++;
@@ -351,9 +352,9 @@ void QmlCompositeTypeManager::compile(TypeData *unit)
     }
 
     if(waiting) {
-        unit->status = TypeData::Waiting;
+        unit->status = QmlCompositeTypeData::Waiting;
     } else {
-        unit->status = TypeData::Complete;
+        unit->status = QmlCompositeTypeData::Complete;
         doComplete(unit);
     }
 }
diff --git a/src/declarative/qml/qmlcompositetypemanager_p.h b/src/declarative/qml/qmlcompositetypemanager_p.h
index 6982844..814e753 100644
--- a/src/declarative/qml/qmlcompositetypemanager_p.h
+++ b/src/declarative/qml/qmlcompositetypemanager_p.h
@@ -53,70 +53,71 @@ class QmlEngine;
 class QmlCompiledComponent;
 class QmlComponentPrivate;
 class QmlComponent;
+struct QmlCompositeTypeData : public QmlRefCount
+{
+    QmlCompositeTypeData();
+    virtual ~QmlCompositeTypeData();
+
+    enum Status { 
+        Invalid,
+        Complete,
+        Error,
+        Waiting
+    };
+    Status status;
+    QString errorDescription;
+
+    QString url;
+    QList<QmlCompositeTypeData *> dependants;
+
+    // Return a QmlComponent if the QmlCompositeTypeData is not in the Waiting 
+    // state.  The QmlComponent is owned by the QmlCompositeTypeData, so a 
+    // reference should be kept to keep the QmlComponent alive.
+    QmlComponent *toComponent(QmlEngine *);
+    // Return a QmlCompiledComponent if possible, or 0 if an error
+    // occurs
+    QmlCompiledComponent *toCompiledComponent(QmlEngine *);
+
+    struct TypeReference 
+    {
+        TypeReference();
+
+        QmlType *type;
+        QmlCompositeTypeData *unit;
+        QmlCustomParser *parser;
+    };
+
+    QList<TypeReference> types;
+
+    // Add or remove p as a waiter.  When the QmlCompositeTypeData becomes 
+    // ready, the QmlComponentPrivate::typeDataReady() method will be invoked on
+    // p.  The waiter is automatically removed when the typeDataReady() method
+    // is invoked, so there is no need to call remWaiter() in this case.
+    void addWaiter(QmlComponentPrivate *p);
+    void remWaiter(QmlComponentPrivate *p);
+
+private:
+    friend class QmlCompositeTypeManager;
+    friend class QmlCompiler;
+
+    QmlXmlParser data;
+    QList<QmlComponentPrivate *> waiters;
+    QmlComponent *component;
+    QmlCompiledComponent *compiledComponent;
+};
+
 class QmlCompositeTypeManager : public QObject
 {
     Q_OBJECT
 public:
     QmlCompositeTypeManager(QmlEngine *);
 
-    struct TypeData : public QmlRefCount
-    {
-        TypeData();
-        virtual ~TypeData();
-
-        enum Status { 
-            Invalid,
-            Complete,
-            Error,
-            Waiting
-        };
-        Status status;
-        QString errorDescription;
-
-        QString url;
-        QList<TypeData *> dependants;
-
-        // Return a QmlComponent if the TypeData is not in the Waiting state.
-        // The QmlComponent is owned by the TypeData, so a reference should be
-        // kept to keep the QmlComponent alive.
-        QmlComponent *toComponent(QmlEngine *);
-        // Return a QmlCompiledComponent if possible, or 0 if an error
-        // occurs
-        QmlCompiledComponent *toCompiledComponent(QmlEngine *);
-
-        struct TypeReference 
-        {
-            TypeReference();
-
-            QmlType *type;
-            TypeData *unit;
-            QmlCustomParser *parser;
-        };
-
-        QList<TypeReference> types;
-
-        // Add or remove p as a waiter.  When the TypeData becomes ready, the
-        // QmlComponentPrivate::typeDataReady() method will be invoked on p.
-        // The waiter is automatically removed when the typeDataReady() method
-        // is invoked, so there is no need to call remWaiter() in this case.
-        void addWaiter(QmlComponentPrivate *p);
-        void remWaiter(QmlComponentPrivate *p);
-
-    private:
-        friend class QmlCompositeTypeManager;
-        friend class QmlCompiler;
-
-        QmlXmlParser data;
-        QList<QmlComponentPrivate *> waiters;
-        QmlComponent *component;
-        QmlCompiledComponent *compiledComponent;
-    };
-
-    // Return a TypeData for url.  The TypeData may be cached.
-    TypeData *get(const QUrl &url);
-    // Return a TypeData for data, with the provided base url.  The TypeData 
-    // will not be cached.
-    TypeData *getImmediate(const QByteArray &data, const QUrl &url);
+    // Return a QmlCompositeTypeData for url.  The QmlCompositeTypeData may be 
+    // cached.
+    QmlCompositeTypeData *get(const QUrl &url);
+    // Return a QmlCompositeTypeData for data, with the provided base url.  The
+   //  QmlCompositeTypeData will not be cached.
+    QmlCompositeTypeData *getImmediate(const QByteArray &data, const QUrl &url);
 
     // Clear cached types.  Only types that aren't in the Waiting state will
     // be cleared.
@@ -126,15 +127,15 @@ private Q_SLOTS:
     void replyFinished();
 
 private:
-    void loadSource(TypeData *);
-    void compile(TypeData *);
-    void setData(TypeData *, const QByteArray &, const QUrl &);
+    void loadSource(QmlCompositeTypeData *);
+    void compile(QmlCompositeTypeData *);
+    void setData(QmlCompositeTypeData *, const QByteArray &, const QUrl &);
 
-    void doComplete(TypeData *);
-    void checkComplete(TypeData *);
+    void doComplete(QmlCompositeTypeData *);
+    void checkComplete(QmlCompositeTypeData *);
 
     QmlEngine *engine;
-    typedef QHash<QString, TypeData *> Components;
+    typedef QHash<QString, QmlCompositeTypeData *> Components;
     Components components;
 };
 
diff --git a/src/declarative/qml/qmllist.h b/src/declarative/qml/qmllist.h
index 3a1e665..cc13924 100644
--- a/src/declarative/qml/qmllist.h
+++ b/src/declarative/qml/qmllist.h
@@ -56,7 +56,9 @@ class QmlList : private QmlPrivate::ListInterface
 public:
     virtual void append(T) = 0;
     virtual void insert(int, T) = 0;
+    virtual void removeAt(int) = 0;
     virtual T at(int) const = 0;
+    virtual int count() const = 0;
     virtual void clear() = 0;
     QmlList<T> &operator<<(T t) { append(t); return *this; }
 
diff --git a/src/declarative/qml/qmlmetatype.cpp b/src/declarative/qml/qmlmetatype.cpp
index 584ccde..51d5607 100644
--- a/src/declarative/qml/qmlmetatype.cpp
+++ b/src/declarative/qml/qmlmetatype.cpp
@@ -667,11 +667,6 @@ QmlMetaType::attachedPropertiesFunc(const QByteArray &name)
 QMetaProperty QmlMetaType::defaultProperty(const QMetaObject *metaObject)
 {
     int idx = metaObject->indexOfClassInfo("DefaultProperty");
-    while(idx == -1 && metaObject) {
-        metaObject = metaObject->superClass();
-        if(metaObject)
-            idx = metaObject->indexOfClassInfo("DefaultProperty");
-    }
     if(-1 == idx)
         return QMetaProperty();
 
@@ -698,11 +693,6 @@ QMetaProperty QmlMetaType::defaultProperty(QObject *obj)
 QMetaMethod QmlMetaType::defaultMethod(const QMetaObject *metaObject)
 {
     int idx = metaObject->indexOfClassInfo("DefaultMethod");
-    while(idx == -1 && metaObject) {
-        metaObject = metaObject->superClass();
-        if(metaObject)
-            idx = metaObject->indexOfClassInfo("DefaultMethod");
-    }
     if(-1 == idx)
         return QMetaMethod();
 
diff --git a/src/declarative/qml/script/tokens.cpp b/src/declarative/qml/script/tokens.cpp
index 51b46f0..a2fb100 100644
--- a/src/declarative/qml/script/tokens.cpp
+++ b/src/declarative/qml/script/tokens.cpp
@@ -12,7 +12,6 @@
 
 
 /*!
-  \relates <tokens.h>
   Returns a string representation of token \a tok.
 */
 const char *tokenToString(Token tok)
diff --git a/src/declarative/timeline/gfxeasing.cpp b/src/declarative/timeline/gfxeasing.cpp
index c89ba88..45b84eb 100644
--- a/src/declarative/timeline/gfxeasing.cpp
+++ b/src/declarative/timeline/gfxeasing.cpp
@@ -357,7 +357,7 @@ Q_GLOBAL_STATIC(ConfigFunctionMap, configFunctionMap);
 
 /*!
     \class GfxEasing
-    \ingroup animation
+    \ingroup group_animation
     \brief The GfxEasing class provides easing curves for controlling animation.
 
     Easing curves describe a function that controls how a value changes over
@@ -454,169 +454,134 @@ Q_GLOBAL_STATIC(ConfigFunctionMap, configFunctionMap);
     \enum GfxEasing::Curve
 
     The type of easing curve.
-*/
-/*!
-    \var GfxEasing::Curve GfxEasing::None 
+
+    \value None 
     Easing equation function for a simple linear tweening, with no easing.
-*/
-/*!
-    \var GfxEasing::Curve GfxEasing::InQuad 
+
+    \value InQuad 
     Easing equation function for a quadratic (t^2) easing in: accelerating from zero velocity.
-*/
-/*!
-    \var GfxEasing::Curve GfxEasing::OutQuad 
+
+    \value OutQuad 
     Easing equation function for a quadratic (t^2) easing out: decelerating to zero velocity.
-*/
-/*!
-    \var GfxEasing::Curve GfxEasing::InOutQuad 
+
+    \value InOutQuad 
     Easing equation function for a quadratic (t^2) easing in/out: acceleration until halfway, then deceleration.
-*/
-/*!
-    \var GfxEasing::Curve GfxEasing::OutInQuad 
+
+    \value OutInQuad 
     Easing equation function for a quadratic (t^2) easing out/in: deceleration until halfway, then acceleration.
-*/
-/*!
-    \var GfxEasing::Curve GfxEasing::InCubic 
+
+    \value InCubic 
     Easing equation function for a cubic (t^3) easing in: accelerating from zero velocity.
-*/
-/*!
-    \var GfxEasing::Curve GfxEasing::OutCubic 
+
+    \value OutCubic 
     Easing equation function for a cubic (t^3) easing out: decelerating from zero velocity.
-*/
-/*!
-    \var GfxEasing::Curve GfxEasing::InOutCubic 
+
+    \value InOutCubic 
     Easing equation function for a cubic (t^3) easing in/out: acceleration until halfway, then deceleration.
-*/
-/*!
-    \var GfxEasing::Curve GfxEasing::OutInCubic 
+
+    \value OutInCubic 
     Easing equation function for a cubic (t^3) easing out/in: deceleration until halfway, then acceleration.
-*/
-/*!
-    \var GfxEasing::Curve GfxEasing::InQuart 
+
+    \value InQuart 
     Easing equation function for a quartic (t^4) easing in: accelerating from zero velocity.
-*/
-/*!
-    \var GfxEasing::Curve GfxEasing::OutQuart 
+
+    \value OutQuart 
     Easing equation function for a quartic (t^4) easing out: decelerating from zero velocity.
-*/
-/*!
-    \var GfxEasing::Curve GfxEasing::InOutQuart 
+
+    \value InOutQuart 
     Easing equation function for a quartic (t^4) easing in/out: acceleration until halfway, then deceleration.
-*/
-/*!
-    \var GfxEasing::Curve GfxEasing::OutInQuart 
+
+    \value OutInQuart 
     Easing equation function for a quartic (t^4) easing out/in: deceleration until halfway, then acceleration.
-*/
-/*!
-    \var GfxEasing::Curve GfxEasing::InQuint 
+
+    \value InQuint 
     Easing equation function for a quintic (t^5) easing in: accelerating from zero velocity.
-*/
-/*!
-    \var GfxEasing::Curve GfxEasing::OutQuint 
+
+    \value OutQuint 
     Easing equation function for a quintic (t^5) easing out: decelerating from zero velocity.
-*/
-/*!
-    \var GfxEasing::Curve GfxEasing::InOutQuint 
+
+    \value InOutQuint 
     Easing equation function for a quintic (t^5) easing in/out: acceleration until halfway, then deceleration.
-*/
-/*!
-    \var GfxEasing::Curve GfxEasing::OutInQuint 
+
+    \value OutInQuint 
     Easing equation function for a quintic (t^5) easing out/in: deceleration until halfway, then acceleration.
-*/
-/*!
-    \var GfxEasing::Curve GfxEasing::InSine 
+
+    \value InSine 
     Easing equation function for a sinusoidal (sin(t)) easing in: accelerating from zero velocity.
-*/
-/*!
-    \var GfxEasing::Curve GfxEasing::OutSine 
+
+    \value OutSine 
     Easing equation function for a sinusoidal (sin(t)) easing out: decelerating from zero velocity.
-*/
-/*!
-    \var GfxEasing::Curve GfxEasing::InOutSine 
+
+    \value InOutSine 
     Easing equation function for a sinusoidal (sin(t)) easing in/out: acceleration until halfway, then deceleration.
-*/
-/*!
-    \var GfxEasing::Curve GfxEasing::OutInSine 
+
+    \value OutInSine 
     Easing equation function for a sinusoidal (sin(t)) easing out/in: deceleration until halfway, then acceleration.
-*/
-/*!
-    \var GfxEasing::Curve GfxEasing::InExpo 
+
+    \value InExpo 
     Easing equation function for an exponential (2^t) easing in: accelerating from zero velocity.
-*/
-/*!
-    \var GfxEasing::Curve GfxEasing::OutExpo 
+
+    \value OutExpo 
     Easing equation function for an exponential (2^t) easing out: decelerating from zero velocity.
-*/
-/*!
-    \var GfxEasing::Curve GfxEasing::InOutExpo 
+
+    \value InOutExpo 
     Easing equation function for an exponential (2^t) easing in/out: acceleration until halfway, then deceleration.
-*/
-/*!
-    \var GfxEasing::Curve GfxEasing::OutInExpo 
+
+    \value OutInExpo 
     Easing equation function for an exponential (2^t) easing out/in: deceleration until halfway, then acceleration.
-*/
-/*!
-    \var GfxEasing::Curve GfxEasing::InCirc 
+
+    \value InCirc 
     Easing equation function for a circular (sqrt(1-t^2)) easing in: accelerating from zero velocity.
-*/
-/*!
-    \var GfxEasing::Curve GfxEasing::OutCirc 
+
+    \value OutCirc 
     Easing equation function for a circular (sqrt(1-t^2)) easing out: decelerating from zero velocity.
-*/
-/*!
-    \var GfxEasing::Curve GfxEasing::InOutCirc 
+
+    \value InOutCirc 
     Easing equation function for a circular (sqrt(1-t^2)) easing in/out: acceleration until halfway, then deceleration.
-*/
-/*!
-    \var GfxEasing::Curve GfxEasing::OutInCirc 
+
+    \value OutInCirc 
     Easing equation function for a circular (sqrt(1-t^2)) easing out/in: deceleration until halfway, then acceleration.
-*/
-/*!
-    \var GfxEasing::Curve GfxEasing::InElastic 
-    Easing equation function for an elastic (exponentially decaying sine wave) easing in: accelerating from zero velocity.  The peak amplitude can be set with the \i amplitude parameter, and the period of decay by the \i period parameter.
-*/
-/*!
-    \var GfxEasing::Curve GfxEasing::OutElastic 
-    Easing equation function for an elastic (exponentially decaying sine wave) easing out: decelerating from zero velocity.  The peak amplitude can be set with the \i amplitude parameter, and the period of decay by the \i period parameter.
-*/
-/*!
-    \var GfxEasing::Curve GfxEasing::InOutElastic 
+
+    \value InElastic
+    Easing equation function for an elastic (exponentially decaying
+    sine wave) easing in: accelerating from zero velocity.  The peak
+    amplitude can be set with the \e amplitude parameter, and the
+    period of decay by the \e period parameter.
+
+    \value OutElastic
+    Easing equation function for an elastic (exponentially decaying
+    sine wave) easing out: decelerating from zero velocity.  The peak
+    amplitude can be set with the \e amplitude parameter, and the
+    period of decay by the \e period parameter.
+
+    \value InOutElastic 
     Easing equation function for an elastic (exponentially decaying sine wave) easing in/out: acceleration until halfway, then deceleration.
-*/
-/*!
-    \var GfxEasing::Curve GfxEasing::OutInElastic 
+
+    \value OutInElastic 
     Easing equation function for an elastic (exponentially decaying sine wave) easing out/in: deceleration until halfway, then acceleration.
-*/
-/*!
-    \var GfxEasing::Curve GfxEasing::InBack 
+
+    \value InBack 
     Easing equation function for a back (overshooting cubic easing: (s+1)*t^3 - s*t^2) easing in: accelerating from zero velocity.
-*/
-/*!
-    \var GfxEasing::Curve GfxEasing::OutBack 
+
+    \value OutBack 
     Easing equation function for a back (overshooting cubic easing: (s+1)*t^3 - s*t^2) easing out: decelerating from zero velocity.
-*/
-/*!
-    \var GfxEasing::Curve GfxEasing::InOutBack 
+
+    \value InOutBack 
     Easing equation function for a back (overshooting cubic easing: (s+1)*t^3 - s*t^2) easing in/out: acceleration until halfway, then deceleration.
-*/
-/*!
-    \var GfxEasing::Curve GfxEasing::OutInBack 
+
+    \value OutInBack 
     Easing equation function for a back (overshooting cubic easing: (s+1)*t^3 - s*t^2) easing out/in: deceleration until halfway, then acceleration.
-*/
-/*!
-    \var GfxEasing::Curve GfxEasing::OutBounce 
+
+    \value OutBounce 
     Easing equation function for a bounce (exponentially decaying parabolic bounce) easing out: decelerating from zero velocity.
-*/
-/*!
-    \var GfxEasing::Curve GfxEasing::InBounce 
+
+    \value InBounce 
     Easing equation function for a bounce (exponentially decaying parabolic bounce) easing in: accelerating from zero velocity.
-*/
-/*!
-    \var GfxEasing::Curve GfxEasing::InOutBounce 
+
+    \value InOutBounce 
     Easing equation function for a bounce (exponentially decaying parabolic bounce) easing in/out: acceleration until halfway, then deceleration.
-*/
-/*!
-    \var GfxEasing::Curve GfxEasing::OutInBounce 
+
+    \value OutInBounce 
     Easing equation function for a bounce (exponentially decaying parabolic bounce) easing out/in: deceleration until halfway, then acceleration.
 */
 
@@ -647,7 +612,7 @@ GfxEasing::GfxEasing(Curve curve)
 
     Curve names have the form
     \c {ease<CurveName>[(<arg>: <arg value>[, <arg2>: <arg value>])]}.  The
-    \i CurveName is equivalent to the GfxEasing::Curve enum name.  Some more
+    \e CurveName is equivalent to the GfxEasing::Curve enum name.  Some more
     advanced curves can take arguments to further refine their behaviour.  Where
     applicable, these parameters are described in the corresponding
     GfxEasing::Curve value documentation.
diff --git a/src/declarative/timeline/gfxtimeline.cpp b/src/declarative/timeline/gfxtimeline.cpp
index 36b18d0..3e84df8 100644
--- a/src/declarative/timeline/gfxtimeline.cpp
+++ b/src/declarative/timeline/gfxtimeline.cpp
@@ -261,7 +261,7 @@ qreal QmlTimeLinePrivate::value(const Op &op, int time, qreal base, bool *change
 
 /*!
     \class QmlTimeLine
-    \ingroup animation
+    \ingroup group_animation
     \brief The QmlTimeLine class provides a timeline for controlling animations.
 
     QmlTimeLine is similar to QTimeLine except:
@@ -872,7 +872,7 @@ void QmlTimeLine::remove(QmlTimeLineObject *v)
 
 /*!
     \class GfxValue
-    \ingroup animation
+    \ingroup group_animation
     \brief The GfxValue class is modified by QmlTimeLine.
 */
 
diff --git a/src/declarative/util/qfxview.cpp b/src/declarative/util/qfxview.cpp
index 3fb30e9..a8b8eea 100644
--- a/src/declarative/util/qfxview.cpp
+++ b/src/declarative/util/qfxview.cpp
@@ -200,16 +200,16 @@ void QFxView::execute()
         d->component = new QmlComponent(&d->engine, d->xml.toUtf8(), d->source);
     }
 
-    if(d->component->isReady()) {
+    if(!d->component->isLoading()) {
         continueExecute();
     } else {
-        connect(d->component, SIGNAL(readyChanged()), this, SLOT(continueExecute()));
+        connect(d->component, SIGNAL(statusChanged(QmlComponent::Status)), this, SLOT(continueExecute()));
     }
 }
 
 void QFxView::continueExecute()
 {
-    disconnect(d->component, SIGNAL(readyChanged()), this, SLOT(continueExecute()));
+    disconnect(d->component, SIGNAL(statusChanged(QmlComponent::Status)), this, SLOT(continueExecute()));
 
     if(!d->component){
         qWarning() << "Error in loading" << d->source;
diff --git a/src/declarative/util/qmlanimation.cpp b/src/declarative/util/qmlanimation.cpp
index 729d53a..ede4008 100644
--- a/src/declarative/util/qmlanimation.cpp
+++ b/src/declarative/util/qmlanimation.cpp
@@ -55,6 +55,7 @@
 #include <QtCore/qset.h>
 #include <QtDeclarative/qmlexpression.h>
 #include <private/qmlstringconverters_p.h>
+#include <private/qvariantanimation_p.h>
 
 /* TODO:
     Check for any memory leaks
@@ -538,14 +539,15 @@ void QmlAbstractAnimation::timelineComplete()
 /*!
     \internal
     \class QmlPauseAnimation
-    \ingroup animation states
+    \ingroup group_animation
+    \ingroup group_states
     \brief The QmlPauseAnimation class provides a pause for an animation.
 
     When used in a QmlSequentialAnimation, QmlPauseAnimation is a step when
     nothing happens, for a specified duration.
 
     A QmlPauseAnimation object can be instantiated in Qml using the tag
-    \ref xmlPauseAnimation "&lt;PauseAnimation&gt;".
+    \l{xmlPauseAnimation} {&lt;PauseAnimation&gt;}.
 */
 
 QML_DEFINE_TYPE(QmlPauseAnimation,PauseAnimation);
@@ -629,11 +631,12 @@ QAbstractAnimation *QmlPauseAnimation::qtAnimation()
 /*!
     \internal
     \class QmlColorAnimation
-    \ingroup animation states
+    \ingroup group_animation
+    \ingroup group_states
     \brief The QmlColorAnimation class allows you to animate color changes.
 
     A QmlColorAnimation object can be instantiated in Qml using the tag
-    \ref xmlColorAnimation "&lt;ColorAnimation&gt;".
+    \l{xmlColorAnimation} {&lt;ColorAnimation&gt;}.
 */
 
 QmlColorAnimation::QmlColorAnimation(QObject *parent)
@@ -930,9 +933,9 @@ QML_DEFINE_TYPE(QmlColorAnimation,ColorAnimation);
 /*!
     \internal
     \class QmlRunScriptAction
-    \brief The QmlRunScriptAction class allows scropts to be run during transitions
+    \brief The QmlRunScriptAction class allows scripts to be run during transitions
 
-    \ref xmlRunScriptAction
+    \sa xmlRunScriptAction
 */
 QmlRunScriptAction::QmlRunScriptAction(QObject *parent)
     :QmlAbstractAnimation(*(new QmlRunScriptActionPrivate), parent)
@@ -1039,7 +1042,7 @@ QML_DEFINE_TYPE(QmlRunScriptAction, RunScriptAction);
     \brief The QmlSetPropertyAction class allows property changes during transitions.
 
     A QmlSetPropertyAction object can be instantiated in Qml using the tag
-    \ref xmlSetPropertyAction "&lt;SetPropertyAction&gt;".
+    \l{xmlSetPropertyAction} {&lt;SetPropertyAction&gt;}.
 */
 QmlSetPropertyAction::QmlSetPropertyAction(QObject *parent)
 : QmlAbstractAnimation(*(new QmlSetPropertyActionPrivate), parent)
@@ -1337,11 +1340,12 @@ QML_DEFINE_TYPE(QmlParentChangeAction,ParentChangeAction);
 /*!
     \internal
     \class QmlNumericAnimation
-    \ingroup animation states
+    \ingroup group_animation
+    \ingroup group_states
     \brief The QmlNumericAnimation class allows you to animate changes in properties of type qreal.
 
     A QmlNumericAnimation object can be instantiated in Qml using the tag
-    \ref xmlNumericAnimation "&lt;NumericAnimation&gt;".
+    \l{xmlNumericAnimation} {&lt;NumericAnimation&gt;}.
 */
 
 QmlNumericAnimation::QmlNumericAnimation(QObject *parent)
@@ -1766,7 +1770,8 @@ QML_DEFINE_TYPE(QmlSequentialAnimation,SequentialAnimation);
 /*!
     \internal
     \class QmlParallelAnimation
-    \ingroup animation states
+    \ingroup group_animation
+    \ingroup group_states
     \brief The QmlParallelAnimation class allows you to run animations in parallel.
 
     Animations controlled by QmlParallelAnimation will be run at the same time.
@@ -1774,7 +1779,7 @@ QML_DEFINE_TYPE(QmlSequentialAnimation,SequentialAnimation);
     \sa QmlSequentialAnimation
 
     A QmlParallelAnimation object can be instantiated in Qml using the tag
-    \ref xmlParallelAnimation "&lt;ParallelAnimation&gt;".
+    \l{xmlParallelAnimation} {&lt;ParallelAnimation&gt;}.
 */
 
 QmlParallelAnimation::QmlParallelAnimation(QObject *parent) :
@@ -1819,99 +1824,13 @@ void QmlParallelAnimation::transition(QmlStateActions &actions,
 
 QML_DEFINE_TYPE(QmlParallelAnimation,ParallelAnimation);
 
-//XXX it would be good to use QVariantAnimation's interpolators if possible
 QVariant QmlVariantAnimationPrivate::interpolateVariant(const QVariant &from, const QVariant &to, qreal progress)
 {
     if (from.userType() != to.userType())
         return QVariant();
 
-    QVariant res;
-    switch (from.userType()) {
-    case QVariant::Int: {
-        int f = from.toInt();
-        int t = to.toInt();
-        res = f + (t - f) * progress;
-        break;
-    }
-    case QVariant::Double: {
-        double f = from.toDouble();
-        double t = to.toDouble();
-        res = f + (t - f) * progress;
-        break;
-    }
-    case QMetaType::Float: {
-        float f = from.toDouble();
-        float t = to.toDouble();
-        res = f + (t - f) * progress;
-        break;
-    }
-    case QVariant::Color: {
-        QColor f = from.value<QColor>();
-        QColor t = to.value<QColor>();
-        uint red = uint(qreal(f.red()) + progress * (qreal(t.red()) - qreal(f.red())));
-        uint green = uint(qreal(f.green()) + progress * (qreal(t.green()) - qreal(f.green())));
-        uint blue = uint(qreal(f.blue()) + progress * (qreal(t.blue()) - qreal(f.blue())));
-        res = QColor(red,green,blue);
-        break;
-    }
-    case QVariant::Rect: {
-        QRect f = from.value<QRect>();
-        QRect t = to.value<QRect>();
-        int x = f.x() + (t.x() - f.x()) * progress;
-        int y = f.y() + (t.y() - f.y()) * progress;
-        int w = f.width() + (t.width() - f.width()) * progress;
-        int h = f.height() + (t.height() - f.height()) * progress;
-        res = QRect(x, y, w, h);
-        break;
-    }
-    case QVariant::RectF: {
-        QRectF f = from.value<QRectF>();
-        QRectF t = to.value<QRectF>();
-        qreal x = f.x() + (t.x() - f.x()) * progress;
-        qreal y = f.y() + (t.y() - f.y()) * progress;
-        qreal w = f.width() + (t.width() - f.width()) * progress;
-        qreal h = f.height() + (t.height() - f.height()) * progress;
-        res = QRectF(x, y, w, h);
-        break;
-    }
-    case QVariant::Point: {
-        QPoint f = from.value<QPoint>();
-        QPoint t = to.value<QPoint>();
-        int x = f.x() + (t.x() - f.x()) * progress;
-        int y = f.y() + (t.y() - f.y()) * progress;
-        res = QPointF(x, y);
-        break;
-    }
-    case QVariant::PointF: {
-        QPointF f = from.value<QPointF>();
-        QPointF t = to.value<QPointF>();
-        qreal x = f.x() + (t.x() - f.x()) * progress;
-        qreal y = f.y() + (t.y() - f.y()) * progress;
-        res = QPointF(x, y);
-        break;
-    }
-    case QVariant::Size: {
-        QSize f = from.value<QSize>();
-        QSize t = to.value<QSize>();
-        int w = f.width() + (t.width() - f.width()) * progress;
-        int h = f.height() + (t.height() - f.height()) * progress;
-        res = QSize(w, h);
-        break;
-    }
-    case QVariant::SizeF: {
-        QSizeF f = from.value<QSizeF>();
-        QSizeF t = to.value<QSizeF>();
-        qreal w = f.width() + (t.width() - f.width()) * progress;
-        qreal h = f.height() + (t.height() - f.height()) * progress;
-        res = QSizeF(w, h);
-        break;
-    }
-    default:
-        res = to;
-        break;
-    }
-
-    return res;
+    QVariantAnimation::Interpolator interpolator = QVariantAnimationPrivate::getInterpolator(from.userType());
+    return interpolator(from.constData(), to.constData(), progress);
 }
 
 //convert a variant from string type to another animatable type
diff --git a/src/declarative/util/qmlbind.cpp b/src/declarative/util/qmlbind.cpp
index d71d711..4451ca2 100644
--- a/src/declarative/util/qmlbind.cpp
+++ b/src/declarative/util/qmlbind.cpp
@@ -77,10 +77,10 @@ QML_DEFINE_TYPE(QmlBind,Bind);
     property into QML.  You could use Bind to update the enteredText property 
     like this.
     \code
-    <LineEdit id="myTextField" text="Please type here..." />
+    <TextEdit id="myTextField" text="Please type here..." />
     <Bind target="{app}" property="enteredText" value="{myTextField.text}" />
     \endcode
-    Whenever the text in the LineEdit is updated, the C++ property will be
+    Whenever the text in the TextEdit is updated, the C++ property will be
     updated also.
 
     If the bind target or bind property is changed, the bound value is 
@@ -91,7 +91,7 @@ QML_DEFINE_TYPE(QmlBind,Bind);
 /*!
     \internal
     \class QmlBind
-    \ingroup utility
+    \ingroup group_utility
     \brief The QmlBind class allows arbitrary property bindings to be created.
 
     Simple bindings are usually earier to do in-place rather than creating a
diff --git a/src/declarative/util/qmldatetimeformatter.cpp b/src/declarative/util/qmldatetimeformatter.cpp
index 138f68b..efddd81 100644
--- a/src/declarative/util/qmldatetimeformatter.cpp
+++ b/src/declarative/util/qmldatetimeformatter.cpp
@@ -85,7 +85,7 @@ public:
 /*!
     \internal
     \class QmlDateTimeFormatter
-    \ingroup utility
+    \ingroup group_utility
     \brief The QmlDateTimeFormatter class allows you to format a date string.
 */
 
diff --git a/src/declarative/util/qmlfont.cpp b/src/declarative/util/qmlfont.cpp
index ad91edd..9f3225a 100644
--- a/src/declarative/util/qmlfont.cpp
+++ b/src/declarative/util/qmlfont.cpp
@@ -56,7 +56,7 @@ QML_DEFINE_TYPE(QmlFont,Font);
 /*!
     \internal
     \class QmlFont
-    \ingroup utility
+    \ingroup group_utility
     \brief The QmlFont class provides a font used for drawing text on a QFxView.
 */
 QmlFont::QmlFont(QObject *parent)
diff --git a/src/declarative/util/qmlscript.cpp b/src/declarative/util/qmlscript.cpp
index a24c427..859e21e 100644
--- a/src/declarative/util/qmlscript.cpp
+++ b/src/declarative/util/qmlscript.cpp
@@ -79,7 +79,7 @@ public:
 /*!
     \qmlclass Script QmlScript
     \brief The Script element adds JavaScript snippets.
-    \ingroup utility
+    \ingroup group_utility
 
     QmlScript is used to add convenient JavaScript "glue" methods to
     your Qt Declarative application or component. While you can have any JavaScript code
@@ -139,7 +139,7 @@ void QmlScript::setScript(const QString &script)
     the file specified.
  */
 /*!
-    \property QmlScript::source
+    \property QmlScript::src
     \brief the path to a script file.
 */
 QString QmlScript::source() const
diff --git a/src/declarative/util/qmlsetproperties.cpp b/src/declarative/util/qmlsetproperties.cpp
index f385391..61890b9 100644
--- a/src/declarative/util/qmlsetproperties.cpp
+++ b/src/declarative/util/qmlsetproperties.cpp
@@ -122,7 +122,7 @@ void QmlSetPropertiesMetaObject::propertyWrite(int id)
     \class QmlSetProperties
     \brief The QmlSetProperties class describes new property values for a state.
 
-    \ingroup states
+    \ingroup group_states
 
     QmlSetProperties is a convenience class for changing many properties on a single
     object. It allows you to specify the property names and values similar to how
diff --git a/src/declarative/util/qmlstate.cpp b/src/declarative/util/qmlstate.cpp
index 50ae6b5..f07fecb 100644
--- a/src/declarative/util/qmlstate.cpp
+++ b/src/declarative/util/qmlstate.cpp
@@ -97,7 +97,7 @@ QmlStateOperation::QmlStateOperation(QObjectPrivate &dd, QObject *parent)
     \class QmlState
     \brief The QmlState class allows you to define configurations of objects and properties.
 
-    \ingroup states
+    \ingroup group_states
 
     QmlState allows you to specify a state as a set of batched changes from the default
     configuration.
diff --git a/src/declarative/util/qmlstateoperations.cpp b/src/declarative/util/qmlstateoperations.cpp
index c2ba4b8..a8779f9 100644
--- a/src/declarative/util/qmlstateoperations.cpp
+++ b/src/declarative/util/qmlstateoperations.cpp
@@ -236,7 +236,7 @@ QmlRunScript::ActionList QmlRunScript::actions()
     \class QmlSetProperty
     \brief The QmlSetProperty class describes a new property value or binding for a state.
 
-    \ingroup states
+    \ingroup group_states
 
     \sa QmlSetProperties
 */
diff --git a/src/declarative/util/qmltransition.cpp b/src/declarative/util/qmltransition.cpp
index fb09e32..181fdb9 100644
--- a/src/declarative/util/qmltransition.cpp
+++ b/src/declarative/util/qmltransition.cpp
@@ -62,7 +62,7 @@ QT_BEGIN_NAMESPACE
     \class QmlTransition
     \brief The QmlTransition class allows you to define animated transitions that occur on state changes.
 
-    \ingroup states
+    \ingroup group_states
 */
 
 //ParallelAnimationWrapperallows us to do a "callback" when the animation finishes, rather than connecting
diff --git a/tests/auto/declarative/listview/tst_listview.cpp b/tests/auto/declarative/listview/tst_listview.cpp
index 5dd94a2..681af57 100644
--- a/tests/auto/declarative/listview/tst_listview.cpp
+++ b/tests/auto/declarative/listview/tst_listview.cpp
@@ -177,7 +177,7 @@ void tst_QFxListView::items()
     model.addItem("Bob", "54321");
 
     QmlContext *ctxt = canvas->rootContext();
-    ctxt->setProperty("testModel", &model);
+    ctxt->setContextProperty("testModel", &model);
 
     canvas->execute();
     qApp->processEvents();
@@ -213,7 +213,7 @@ void tst_QFxListView::changed()
     model.addItem("Bob", "54321");
 
     QmlContext *ctxt = canvas->rootContext();
-    ctxt->setProperty("testModel", &model);
+    ctxt->setContextProperty("testModel", &model);
 
     canvas->execute();
     qApp->processEvents();
@@ -246,7 +246,7 @@ void tst_QFxListView::inserted()
     model.addItem("Bob", "54321");
 
     QmlContext *ctxt = canvas->rootContext();
-    ctxt->setProperty("testModel", &model);
+    ctxt->setContextProperty("testModel", &model);
 
     canvas->execute();
     qApp->processEvents();
@@ -312,7 +312,7 @@ void tst_QFxListView::removed()
         model.addItem("Item" + QString::number(i), "");
 
     QmlContext *ctxt = canvas->rootContext();
-    ctxt->setProperty("testModel", &model);
+    ctxt->setContextProperty("testModel", &model);
 
     canvas->execute();
     qApp->processEvents();
diff --git a/tests/auto/declarative/pathview/tst_pathview.cpp b/tests/auto/declarative/pathview/tst_pathview.cpp
index 4d58e57..110d129 100644
--- a/tests/auto/declarative/pathview/tst_pathview.cpp
+++ b/tests/auto/declarative/pathview/tst_pathview.cpp
@@ -109,7 +109,7 @@ void tst_QFxPathView::items()
     model.addItem("Bob", "54321");
 
     QmlContext *ctxt = canvas->rootContext();
-    ctxt->setProperty("testModel", &model);
+    ctxt->setContextProperty("testModel", &model);
 
     canvas->execute();
     qApp->processEvents();
@@ -142,7 +142,7 @@ void tst_QFxPathView::pathMoved()
     model.addItem("Bill", "4321");
 
     QmlContext *ctxt = canvas->rootContext();
-    ctxt->setProperty("testModel", &model);
+    ctxt->setContextProperty("testModel", &model);
 
     canvas->execute();
     qApp->processEvents();
@@ -183,7 +183,7 @@ void tst_QFxPathView::limitedItems()
         model.addItem("Bob", QString::number(i));
 
     QmlContext *ctxt = canvas->rootContext();
-    ctxt->setProperty("testModel", &model);
+    ctxt->setContextProperty("testModel", &model);
 
     canvas->execute();
     qApp->processEvents();
diff --git a/tests/auto/declarative/qbindablemap/tst_qbindablemap.cpp b/tests/auto/declarative/qbindablemap/tst_qbindablemap.cpp
index 9519382..da58857 100644
--- a/tests/auto/declarative/qbindablemap/tst_qbindablemap.cpp
+++ b/tests/auto/declarative/qbindablemap/tst_qbindablemap.cpp
@@ -58,7 +58,7 @@ void tst_QBindableMap::changed()
     //make changes in QML
     QmlEngine engine;
     QmlContext *ctxt = engine.rootContext();
-    ctxt->setProperty("data", &map);
+    ctxt->setContextProperty(QLatin1String("data"), &map);
     QmlComponent component(&engine, "<Script script=\"data.key1 = 'Hello World';\"/>");
     component.create();
     QCOMPARE(spy.count(), 1);
diff --git a/tests/auto/declarative/qfxtext/tst_qfxtext.cpp b/tests/auto/declarative/qfxtext/tst_qfxtext.cpp
index 2448898..ee74040 100644
--- a/tests/auto/declarative/qfxtext/tst_qfxtext.cpp
+++ b/tests/auto/declarative/qfxtext/tst_qfxtext.cpp
@@ -134,7 +134,7 @@ void tst_qfxtext::width()
         QmlComponent textComponent(&engine, "<Text text=\"\"/>");
         QFxText *textObject = qobject_cast<QFxText*>(textComponent.create());
 
-        QCOMPARE(textObject->width(), 0);
+        QCOMPARE(textObject->width(), 0.);
     }
 
     for (int i = 0; i < standard.size(); i++)
@@ -147,7 +147,7 @@ void tst_qfxtext::width()
         QmlComponent textComponent(&engine, componentStr.toLatin1());
         QFxText *textObject = qobject_cast<QFxText*>(textComponent.create());
 
-        QCOMPARE(textObject->width(), metricWidth);
+        QCOMPARE(textObject->width(), qreal(metricWidth));
     }
 
     for (int i = 0; i < richText.size(); i++)
@@ -162,7 +162,7 @@ void tst_qfxtext::width()
         QmlComponent textComponent(&engine, componentStr.toLatin1());
         QFxText *textObject = qobject_cast<QFxText*>(textComponent.create());
 
-        QCOMPARE(textObject->width(), documentWidth);
+        QCOMPARE(textObject->width(), qreal(documentWidth));
     }
 }
 
@@ -175,7 +175,7 @@ void tst_qfxtext::wrap()
         QmlComponent textComponent(&engine, "<Text text=\"\" wrap=\"true\" width=\"300\"/>");
         QFxText *textObject = qobject_cast<QFxText*>(textComponent.create());
 
-        QCOMPARE(textObject->width(), 300);
+        QCOMPARE(textObject->width(), 300.);
     }
 
     for (int i = 0; i < standard.size(); i++)
@@ -184,7 +184,7 @@ void tst_qfxtext::wrap()
         QmlComponent textComponent(&engine, componentStr.toLatin1());
         QFxText *textObject = qobject_cast<QFxText*>(textComponent.create());
 
-        QCOMPARE(textObject->width(), 300);
+        QCOMPARE(textObject->width(), 300.);
     }
 
     for (int i = 0; i < richText.size(); i++)
@@ -193,7 +193,7 @@ void tst_qfxtext::wrap()
         QmlComponent textComponent(&engine, componentStr.toLatin1());
         QFxText *textObject = qobject_cast<QFxText*>(textComponent.create());
 
-        QCOMPARE(textObject->width(), 300);
+        QCOMPARE(textObject->width(), 300.);
     }
 
 }
@@ -210,7 +210,7 @@ void tst_qfxtext::elide()
             QmlComponent textComponent(&engine, ("<Text text=\"\" "+elide+" width=\"300\"/>").toLatin1());
             QFxText *textObject = qobject_cast<QFxText*>(textComponent.create());
 
-            QCOMPARE(textObject->width(), 300);
+            QCOMPARE(textObject->width(), 300.);
         }
 
         for (int i = 0; i < standard.size(); i++)
@@ -219,7 +219,7 @@ void tst_qfxtext::elide()
             QmlComponent textComponent(&engine, componentStr.toLatin1());
             QFxText *textObject = qobject_cast<QFxText*>(textComponent.create());
 
-            QCOMPARE(textObject->width(), 300);
+            QCOMPARE(textObject->width(), 300.);
         }
 
         // richtext - does nothing
@@ -229,7 +229,7 @@ void tst_qfxtext::elide()
             QmlComponent textComponent(&engine, componentStr.toLatin1());
             QFxText *textObject = qobject_cast<QFxText*>(textComponent.create());
 
-            QCOMPARE(textObject->width(), 300);
+            QCOMPARE(textObject->width(), 300.);
         }
     }
 }
diff --git a/tests/auto/declarative/qfxtextedit/tst_qfxtextedit.cpp b/tests/auto/declarative/qfxtextedit/tst_qfxtextedit.cpp
index e988918..8baef3d 100644
--- a/tests/auto/declarative/qfxtextedit/tst_qfxtextedit.cpp
+++ b/tests/auto/declarative/qfxtextedit/tst_qfxtextedit.cpp
@@ -124,7 +124,7 @@ void tst_qfxtextedit::width()
         QmlComponent texteditComponent(&engine, "<TextEdit text=\"\"/>");
         QFxTextEdit *textEditObject = qobject_cast<QFxTextEdit*>(texteditComponent.create());
 
-        QCOMPARE(textEditObject->width(), 0);
+        QCOMPARE(textEditObject->width(), 0.);
     }
 
     for (int i = 0; i < standard.size(); i++)
@@ -137,7 +137,7 @@ void tst_qfxtextedit::width()
         QmlComponent texteditComponent(&engine, componentStr.toLatin1());
         QFxTextEdit *textEditObject = qobject_cast<QFxTextEdit*>(texteditComponent.create());
 
-        QCOMPARE(textEditObject->width(), metricWidth);
+        QCOMPARE(textEditObject->width(), qreal(metricWidth));
     }
 
     for (int i = 0; i < richText.size(); i++)
@@ -152,7 +152,7 @@ void tst_qfxtextedit::width()
         QmlComponent texteditComponent(&engine, componentStr.toLatin1());
         QFxTextEdit *textEditObject = qobject_cast<QFxTextEdit*>(texteditComponent.create());
 
-        QCOMPARE(textEditObject->width(), documentWidth);
+        QCOMPARE(textEditObject->width(), qreal(documentWidth));
     }
 }
 
@@ -163,7 +163,7 @@ void tst_qfxtextedit::wrap()
         QmlComponent texteditComponent(&engine, "<TextEdit text=\"\" wrap=\"true\" width=\"300\"/>");
         QFxTextEdit *textEditObject = qobject_cast<QFxTextEdit*>(texteditComponent.create());
 
-        QCOMPARE(textEditObject->width(), 300);
+        QCOMPARE(textEditObject->width(), 300.);
     }
 
     for (int i = 0; i < standard.size(); i++)
@@ -172,7 +172,7 @@ void tst_qfxtextedit::wrap()
         QmlComponent texteditComponent(&engine, componentStr.toLatin1());
         QFxTextEdit *textEditObject = qobject_cast<QFxTextEdit*>(texteditComponent.create());
 
-        QCOMPARE(textEditObject->width(), 300);
+        QCOMPARE(textEditObject->width(), 300.);
     }
 
     for (int i = 0; i < richText.size(); i++)
@@ -181,7 +181,7 @@ void tst_qfxtextedit::wrap()
         QmlComponent texteditComponent(&engine, componentStr.toLatin1());
         QFxTextEdit *textEditObject = qobject_cast<QFxTextEdit*>(texteditComponent.create());
 
-        QCOMPARE(textEditObject->width(), 300);
+        QCOMPARE(textEditObject->width(), 300.);
     }
 
 }
diff --git a/tools/qdoc3/cppcodeparser.cpp b/tools/qdoc3/cppcodeparser.cpp
index 92d6cf9..e271590 100644
--- a/tools/qdoc3/cppcodeparser.cpp
+++ b/tools/qdoc3/cppcodeparser.cpp
@@ -90,6 +90,7 @@ QT_BEGIN_NAMESPACE
 #define COMMAND_QMLINHERITS             Doc::alias("inherits")
 #define COMMAND_QMLSIGNAL               Doc::alias("qmlsignal")
 #define COMMAND_QMLMETHOD               Doc::alias("qmlmethod")
+#define COMMAND_QMLDEFAULT              Doc::alias("default")
 #endif
 
 QStringList CppCodeParser::exampleFiles;
@@ -820,7 +821,8 @@ QSet<QString> CppCodeParser::otherMetaCommands()
                                 << COMMAND_INDEXPAGE
 #ifdef QDOC_QML        
                                 << COMMAND_STARTPAGE
-                                << COMMAND_QMLINHERITS;
+                                << COMMAND_QMLINHERITS
+                                << COMMAND_QMLDEFAULT;
 #else    
                                 << COMMAND_STARTPAGE;
 #endif    
@@ -890,14 +892,19 @@ void CppCodeParser::processOtherMetaCommand(const Doc& doc,
     else if (command == COMMAND_RELATES) {
         InnerNode *pseudoParent;
         if (arg.startsWith("<") || arg.startsWith("\"")) {
-            pseudoParent = static_cast<InnerNode *>(tre->findNode(QStringList(arg), Node::Fake));
+            pseudoParent =
+                static_cast<InnerNode *>(tre->findNode(QStringList(arg),
+                                                       Node::Fake));
         }
         else {
             QStringList newPath = arg.split("::");
-            pseudoParent = static_cast<InnerNode *>(tre->findNode(QStringList(newPath), Node::Class));
+            pseudoParent =
+                static_cast<InnerNode*>(tre->findNode(QStringList(newPath),
+                                                      Node::Class));
             if (!pseudoParent)
-                pseudoParent = static_cast<InnerNode *>(tre->findNode(QStringList(newPath),
-                                                        Node::Namespace));
+                pseudoParent =
+                    static_cast<InnerNode*>(tre->findNode(QStringList(newPath),
+                                                          Node::Namespace));
         }
         if (!pseudoParent) {
             doc.location().warning(tr("Cannot find '%1' in '\\%2'")
@@ -926,6 +933,10 @@ void CppCodeParser::processOtherMetaCommand(const Doc& doc,
     else if (command == COMMAND_QMLINHERITS) {
         setLink(node, Node::InheritsLink, arg);
     }
+    else if (command == COMMAND_QMLDEFAULT) {
+        QmlPropGroupNode* qpgn = static_cast<QmlPropGroupNode*>(node);
+        qpgn->setDefault();
+    }
 #endif
     else {
         processCommonMetaCommand(doc.location(),command,arg,node,tre);
diff --git a/tools/qdoc3/htmlgenerator.cpp b/tools/qdoc3/htmlgenerator.cpp
index 9237fea..c507f6c 100644
--- a/tools/qdoc3/htmlgenerator.cpp
+++ b/tools/qdoc3/htmlgenerator.cpp
@@ -3455,6 +3455,13 @@ void HtmlGenerator::generateDetailedQmlMember(const Node *node,
                 out() << "<a name=\"" + refForNode(qpn) + "\"></a>";
                 generateQmlItem(qpn, relative, marker, false);
                 out() << "</td></tr>";
+                if (qpgn->isDefault()) {
+                    out() << "<div class=\"qmlitem\">"
+                          << "<div class=\"qmlproto\">"
+                          << "<table class=\"qmlname\">"
+                          << "<tr><td><font color=\"green\">"
+                          << "default</font></td></tr>";
+                }
             }
             ++p;
         }
diff --git a/tools/qdoc3/node.cpp b/tools/qdoc3/node.cpp
index 211e2df..4734374 100644
--- a/tools/qdoc3/node.cpp
+++ b/tools/qdoc3/node.cpp
@@ -1040,7 +1040,7 @@ QmlClassNode::QmlClassNode(InnerNode *parent,
 }
 
 /*!
-  The base file name for this kind of node has "qml"
+  The base file name for this kind of node has "qml_"
   prepended to it.
 
   But not yet. Still testing.
@@ -1050,7 +1050,7 @@ QString QmlClassNode::fileBase() const
 #if 0    
     if (Node::fileBase() == "item")
         qDebug() << "FILEBASE: qmlitem" << name();
-    return "qml" + Node::fileBase();
+    return "qml_" + Node::fileBase();
 #endif
     return Node::fileBase();
 }
@@ -1060,7 +1060,7 @@ QString QmlClassNode::fileBase() const
   always a QmlClassNode. 
  */
 QmlPropGroupNode::QmlPropGroupNode(QmlClassNode* parent, const QString& name)
-    : FakeNode(parent, name, QmlPropertyGroup)
+    : FakeNode(parent, name, QmlPropertyGroup), isdefault(false)
 {
     // nothing.
 }
diff --git a/tools/qdoc3/node.h b/tools/qdoc3/node.h
index 477c2d2..9024758 100644
--- a/tools/qdoc3/node.h
+++ b/tools/qdoc3/node.h
@@ -367,6 +367,11 @@ class QmlPropGroupNode : public FakeNode
     virtual ~QmlPropGroupNode() { }
 
     const QString& element() const { return name(); }
+    void setDefault() { isdefault = true; }
+    bool isDefault() const { return isdefault; }
+
+ private:
+    bool    isdefault;
 };
 
 class QmlPropertyNode : public LeafNode
@@ -395,8 +400,8 @@ class QmlPropertyNode : public LeafNode
     static bool fromTrool(Trool troolean, bool defaultValue);
 
     QString dt;
-    Trool sto;
-    Trool des;
+    Trool   sto;
+    Trool   des;
 };
 
 class QmlSignalNode : public LeafNode
diff --git a/tools/qdoc3/pagegenerator.cpp b/tools/qdoc3/pagegenerator.cpp
index 8504d2d..e92a067 100644
--- a/tools/qdoc3/pagegenerator.cpp
+++ b/tools/qdoc3/pagegenerator.cpp
@@ -101,16 +101,16 @@ QString PageGenerator::fileBase(const Node *node)
 #ifdef QDOC_QML
         /*
           To avoid file name conflicts in the html directory,
-          we prepend "qml" to the file name of QML element doc
+          we prepend "qml-" to the file name of QML element doc
           files.
          */
         if ((p->subType() == Node::QmlClass) ||
             (p->subType() == Node::QmlPropertyGroup))
-            base.prepend("qml");
+            base.prepend("qml-");
         else if ((p->type() == Node::QmlProperty) ||
                  (p->type() == Node::QmlSignal) ||
                  (p->type() == Node::QmlMethod))
-            base.prepend("qml");
+            base.prepend("qml-");
 #endif        
         const Node *pp = p->parent();
         if (!pp || pp->name().isEmpty() || pp->type() == Node::Fake)
diff --git a/tools/qdoc3/test/linguist.qdocconf b/tools/qdoc3/test/linguist.qdocconf
index 9a9c5b0..f4ee211 100644
--- a/tools/qdoc3/test/linguist.qdocconf
+++ b/tools/qdoc3/test/linguist.qdocconf
@@ -18,7 +18,6 @@ qhp.Linguist.virtualFolder       = qdoc
 qhp.Linguist.indexTitle          = Qt Linguist Manual
 qhp.Linguist.extraFiles          = classic.css images/qt-logo.png images/trolltech-logo.png
 qhp.Linguist.filterAttributes    = qt 4.6.0 tools linguist
->>>>>>> 4.5:tools/qdoc3/test/linguist.qdocconf
 qhp.Linguist.customFilters.Linguist.name = Qt Linguist Manual
 qhp.Linguist.customFilters.Linguist.filterAttributes = qt tools linguist
 qhp.Linguist.subprojects         = manual examples
diff --git a/tools/qdoc3/test/qmake.qdocconf b/tools/qdoc3/test/qmake.qdocconf
index 62cd4ff..642e3be 100644
--- a/tools/qdoc3/test/qmake.qdocconf
+++ b/tools/qdoc3/test/qmake.qdocconf
@@ -18,7 +18,6 @@ qhp.qmake.virtualFolder       = qdoc
 qhp.qmake.indexTitle          = QMake Manual
 qhp.qmake.extraFiles          = classic.css images/qt-logo.png images/trolltech-logo.png
 qhp.qmake.filterAttributes    = qt 4.6.0 tools qmake
->>>>>>> 4.5:tools/qdoc3/test/qmake.qdocconf
 qhp.qmake.customFilters.qmake.name = qmake Manual
 qhp.qmake.customFilters.qmake.filterAttributes = qt tools qmake
 qhp.qmake.subprojects         = manual
author	Warwick Allison <warwick.allison@nokia.com>	2009-04-24 04:29:31 (GMT)
committer	Warwick Allison <warwick.allison@nokia.com>	2009-04-24 04:29:31 (GMT)
commit	0c5f0baa59ae56749707c9f73754132cd9b4a44d (patch)
tree	cc8e8ca8d889a64ee5cdaa91647b2cf221c8edf3
parent	363265d790c9f6b69d5a706209b28e467de3a2d6 (diff)
parent	db815819dae525c64575de38b92afa4cf092ce06 (diff)
download	Qt-0c5f0baa59ae56749707c9f73754132cd9b4a44d.zip Qt-0c5f0baa59ae56749707c9f73754132cd9b4a44d.tar.gz Qt-0c5f0baa59ae56749707c9f73754132cd9b4a44d.tar.bz2