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

46 files changed, 1213 insertions, 561 deletions

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/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/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/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/qfxlayouts.cpp b/src/declarative/fx/qfxlayouts.cpp
index a421fd2..b89e795 100644
--- a/src/declarative/fx/qfxlayouts.cpp
+++ b/src/declarative/fx/qfxlayouts.cpp
@@ -612,7 +612,6 @@ void QFxVerticalLayout::doLayout()
             setMovingItem(child);
             child->setY(voffset);
             setMovingItem(0);
-            child->setX(0);
         }
         voffset += child->height();
         voffset += spacing();
@@ -766,7 +765,6 @@ void QFxHorizontalLayout::doLayout()
             setMovingItem(child);
             child->setX(hoffset);
             setMovingItem(0);
-            child->setY(0);
         }
         hoffset += child->width();
         hoffset += spacing();
diff --git a/src/declarative/qml/qmlcomponent.cpp b/src/declarative/qml/qmlcomponent.cpp
index ccc591a..0f60870 100644
--- a/src/declarative/qml/qmlcomponent.cpp
+++ b/src/declarative/qml/qmlcomponent.cpp
@@ -65,6 +65,30 @@ 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);
 
 /*!
diff --git a/src/declarative/util/qmlbind.cpp b/src/declarative/util/qmlbind.cpp
index 1becc34..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 
diff --git a/tools/qdoc3/node.cpp b/tools/qdoc3/node.cpp
index 9e7e306..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();
 }
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)