From 4eee67a60a173ba16ee3154377da7f410cabe168 Mon Sep 17 00:00:00 2001
From: Ian Walters <ian.walters@nokia.com>
Date: Fri, 24 Apr 2009 15:08:03 +1000
Subject: Further tutorial work.  Draft of second chapter.

---
 doc/src/tutorials/declarative.qdoc                 | 256 ++++++++++++++++++++-
 .../tutorials/contacts/2_Reuse/2_Reuse.qml         |   3 -
 .../tutorials/contacts/2_Reuse/Contact4.qml        |   3 +
 .../tutorials/contacts/2_Reuse/FieldText3.qml      |   2 +-
 .../tutorials/contacts/2_Reuse/FieldText4.qml      |  10 +-
 .../tutorials/contacts/2_Reuse/RemoveButton4.qml   |   6 +-
 .../contacts/3_Collections/3_Collections.qml       |   6 +-
 .../tutorials/contacts/3_Collections/FieldText.qml |   2 +-
 .../tutorials/contacts/Final/FieldText.qml         |   2 +-
 9 files changed, 271 insertions(+), 19 deletions(-)

diff --git a/doc/src/tutorials/declarative.qdoc b/doc/src/tutorials/declarative.qdoc
index be8fad9..ae2dcca 100644
--- a/doc/src/tutorials/declarative.qdoc
+++ b/doc/src/tutorials/declarative.qdoc
@@ -82,7 +82,7 @@
 
     \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/part2}{Reusing QML Components}
     \o \l{tutorials/declarative/contacts/part3}{Models, Views and Delegates}
     \o \l{tutorials/declarative/contacts/part4}{Other Tricks}
     \endlist
@@ -462,9 +462,261 @@
     to complete their transition.
 
     \omit
-        TODO More on types of animation
+        TODO More on types of animation, e.g. ColorAnimation, Behaviors.
     \endomit
 
     In the next chapter we will show how we can use the remove button in
     other QML components.
 */
+
+/*!
+    \page tutorials-declarative-contacts-part2.html
+    \contentspage {Declarative UI Tutorial}{Contents}
+    \previouspage {tutorials/declarative/contacts/part1}{Chapter 1}
+    \nextpage {tutorials/declarative/contacts/part3}{Chapter 3}
+    \example tutorials/declarative/contacts/part2
+    \title Reusing QML Components
+    \tableofcontents
+
+    The second part of this tutorial covers how to reuse QML components and
+    have them interact with each other.  The RemoveButton developed in the 
+    previous chapter is intended to be part of a more complex control for
+    editing a field of our contact.  This ContactField in turn is intended
+    to be used in a contact editing control.
+
+    \section1 Loading QML Components
+
+    Reusing the RemoveButton itself is very simple.  When parsing a QML file
+    if a Component is refered to that isn't already in the system, Qt
+    will try to load it from a file of the same name with the ".qml" extension.
+
+    \code
+    <Item id="contactField"
+        clip="true"
+        width="230"
+        height="30">
+        <RemoveButton id="removeButton"
+            anchors.right="{parent.right}"
+            anchors.top="{parent.top}" anchors.bottom="{parent.bottom}"/>
+    \endcode
+
+    The above QML code will attempt to load the RemoveButton component from
+    a file called "RemoveButton.qml".  All the properties of the button are
+    accessible and can be overridden from defaults.  The loaded component
+    can also refer to elements further up in the tree, so that code within
+    RemoveButton.qml could refer to the contactField component.  However only
+    properties of the top level element in RemoveButton.qml are visible to
+    the contact field.  In order to allow contact field to modify how wide
+    the remove button will be when opened we need to add a property to the
+    remove button.
+
+    \section1 Properties and Signals
+
+    \code
+    <Rect id="removeButton"
+        width="30" height="30"
+        color="red"
+        radius="5">
+        <properties>
+            <Property name="expandedWidth" value="230"/>
+        </properties>
+        <signals>
+            <Signal name="confirmed"/>
+        </signals>
+    \endcode
+
+    \omit
+    Need reference for more information on declaring properties and signals.
+    \endomit
+
+    These properties and signals are accessed from the contact field the same
+    way standard system components are accessed.
+
+    \code
+    <Item id="contactField"
+        clip="true"
+        width="230"
+        height="30">
+        <RemoveButton id="removeButton"
+            anchors.right="{parent.right}"
+            anchors.top="{parent.top}" anchors.bottom="{parent.bottom}"
+            expandedWidth="{contactField.width}"
+            onConfirmed="print('Clear field text'); fieldText.text=''"/>
+    \endcode
+
+    Now when the remove button is expanded, it will expand to the width of the
+    contact field.  Also when the user confirms the remove action, the
+    text section of the contact field will be cleared.  When creating a
+    component that does have children out of its own
+    bounds its important to consider whether the item should be clipped,
+    which is done above with \c{clip="true"}.
+
+    \section1 States
+
+    Its also possible to access the state of included components.  The FieldText
+    component we will use in this tutorial is also been written specifically
+    for our contacts application, as was the RemoveButton component.  In
+    this case we want it to expand when editing.  One way to do this would
+    be to anchor the field text component to the center of its parent and
+    then let its own width change push the remove button away, however that
+    would make it difficult to have the remove button also push the field
+    text to the left when the remove button expands.
+
+    So instead we will anchor the right edge of the field text to 
+    the left edge of the remove button and use a state change in the
+    contact field itself to move the remove button and the field icon out of
+    view.
+
+    \code
+    <Item id="contactField"
+        clip="true"
+        width="230"
+        height="30">
+        <properties>
+            <Property name="label" value="Name"/>
+            <Property name="icon" value="../shared/pics/phone.png"/>
+            <Property name="value"/>
+        </properties>
+        <RemoveButton id="removeButton"
+            anchors.right="{parent.right}"
+            anchors.top="{parent.top}" anchors.bottom="{parent.bottom}"
+            expandedWidth="{contactField.width}"
+            onConfirmed="print('Clear field text'); fieldText.text=''"/>
+        <FieldText id="fieldText"
+            width="{contactField.width-70}"
+            anchors.right="{removeButton.left}" anchors.rightMargin="5"
+            anchors.verticalCenter="{parent.verticalCenter}"
+            label="{contactField.label}"
+            text="{contactField.value}"/>
+        <Image
+            anchors.right="{fieldText.left}" anchors.rightMargin="5"
+            anchors.verticalCenter="{parent.verticalCenter}"
+            src="{contactField.icon}"/>
+        <states>
+            <State name="editingText" when="{fieldText.state == 'editing'}">
+                <SetProperty target="{removeButton.anchors}" property="rightMargin" value="-35"/>
+                <SetProperty target="{fieldText}" property="width" value="{contactField.width}"/>
+            </State>
+        </states>
+        <transitions>
+            <Transition fromState='' toState="*" reversible="true">
+                <NumericAnimation properties="width,rightMargin" duration="200"/>
+            </Transition>
+        </transitions>
+    </Item> 
+    \endcode
+
+    Apart from accessing the fieldText.state, the above code also uses the when
+    attribute of its own editingText state.  This is an alternative to using
+    a signal to change state.  When the value of the expression for the 
+    when attribute changes, Qt will detect if the contactField needs to enter
+    that state.  In the FieldText element a similar approach is used to fade
+    out the label of the FieldText when the user enters some text of their own.
+
+    \code
+    <Text id="textLabel"
+        x="5" width="{parent.width-10}"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        hAlign="AlignHCenter"
+        color="#505050"
+        font.italic="true"
+        text="{fieldText.label}"
+        opacity="{textEdit.text == '' ? 1 : 0}">
+        <opacity>
+            <Behaviour>
+                <NumericAnimation property="opacity" duration="250"/>
+            </Behaviour>
+        </opacity>
+    </Text>
+   \endcode
+
+    fieldText is the enclosing component and textEdit is a TextEdit element
+    provided by Qt.  In the QML code above, the opacity of the textLabel is
+    only 1 if there is text for the textEdit is empty.  This is a form of
+    short cut to using states for an element, useful if only one property
+    is changing as it is for the textLabel.  To animate a property change is
+    similar to animating a state change.  Using the Behavior element we can
+    specify how the property changes if it does change state, allowing for
+    a smooth transition.
+
+    The fieldText element also handles changes to the text using the
+    onValueChanged attribute when specifying properties.
+
+    \code
+    <Rect id="fieldText"
+        height="30"
+        radius="5"
+        color="white">
+        <properties>
+            <Property
+                name="text"
+                value=""
+                onValueChanged="reset()"/>
+    \endcode
+
+    Because the user needs to be able to edit text in the text edit, it
+    shouldn't be simply bound to the text property of the FieldText component.
+    However if a component using the FieldText component sets the text
+    property of the FieldText component it should in turn set the text
+    of the text edit.
+
+    \section1 Key and Mouse Focus
+
+    Unlike in Qt setting focus to true on a component does not always mean
+    that the component has focus.  This is due to the declarative nature
+    of QML, and can be affected by multiple components both indicating
+    focus to be true.  At the time of writing this tutorial both key and mouse
+    focus handling are still being improved.  Hence we will only lightly cover
+    the topic.
+
+    Normally in QML this is handled by FocusRealm components.  A focus realm
+    is a sort of cut off point for determining focus.  If a FocusRealm does
+    not have focus then any children of it won't be able to get focus even
+    if they do set focus to true.  If your component has multiple child
+    components that could gain focus ensure that they are guarded by FocusRealm
+    component, and add code to handle which focus realms have focus
+    at that level.  The alternative and approach done at this stage in
+    the tutorial is to only have one component set focus to true at a time.
+
+    Currently if multiple contact fields were put into our contact editor,
+    any of the FieldText components could be clicked and opened, and
+    any of the RemoveButton components could be clicked and opened, all
+    at the same time.  We would like this behavior to be some what modal
+    instead, encouraging the user to either accept or cancel the current
+    action before moving onto a new action.
+
+    In the tutorial we do this with a property of our top level component
+    to handle whether we are in this state or not.
+
+    \code
+    <Item id="contactDetails"
+        width="230"
+        height="{layout.height}">
+        <properties>
+            <Property name="mouseGrabbed" value="false"/>
+        </properties>
+    \endcode
+
+    And in the code where we want to check or avoid allowing mouse interaction.
+
+    \code
+    <Script>
+        function toggle() {
+            print('removeButton.toggle()');
+            if (removeButton.state == 'opened') {
+                removeButton.state = '';
+                contactDetails.mouseGrabbed=false;
+            } else {
+                if (!contactDetails.mouseGrabbed) {
+                    removeButton.state = 'opened';
+                    contactDetails.mouseGrabbed=true;
+                }
+            }
+        }
+    </Script>
+    \endcode
+
+    Handling Key and Mouse focus in QML is quite likely to change before
+    the Qt 4.6 release.
+*/
+
diff --git a/examples/declarative/tutorials/contacts/2_Reuse/2_Reuse.qml b/examples/declarative/tutorials/contacts/2_Reuse/2_Reuse.qml
index 13bc209..92afc0c 100644
--- a/examples/declarative/tutorials/contacts/2_Reuse/2_Reuse.qml
+++ b/examples/declarative/tutorials/contacts/2_Reuse/2_Reuse.qml
@@ -1,7 +1,4 @@
 <Rect id="page" width="{layout.width}" height="{layout.height}" color='white'>
-    <properties>
-        <Property name="mouseGrabbed" value="false"/>
-    </properties>
     <VerticalLayout id="layout" width="{contents.width}" margin="5" spacing="5">
         <GroupBox contents="ContactField1.qml" label="Loading Component"/>
         <GroupBox contents="ContactField2.qml" label="Using properties"/>
diff --git a/examples/declarative/tutorials/contacts/2_Reuse/Contact4.qml b/examples/declarative/tutorials/contacts/2_Reuse/Contact4.qml
index 9e988c0..e87ed60 100644
--- a/examples/declarative/tutorials/contacts/2_Reuse/Contact4.qml
+++ b/examples/declarative/tutorials/contacts/2_Reuse/Contact4.qml
@@ -2,6 +2,9 @@
     width="230"
     height="{layout.height}">
     <properties>
+        <Property name="mouseGrabbed" value="false"/>
+    </properties>
+    <properties>
         <Property name="contactid" value=""/>
         <Property name="label" onValueChanged="labelField.value = label"/>
         <Property name="phone" onValueChanged="phoneField.value = phone"/>
diff --git a/examples/declarative/tutorials/contacts/2_Reuse/FieldText3.qml b/examples/declarative/tutorials/contacts/2_Reuse/FieldText3.qml
index 97c0772..d09ad0b 100644
--- a/examples/declarative/tutorials/contacts/2_Reuse/FieldText3.qml
+++ b/examples/declarative/tutorials/contacts/2_Reuse/FieldText3.qml
@@ -58,7 +58,7 @@
         color="#505050"
         font.italic="true"
         text="{fieldText.label}"
-        opacity="{textEdit.text != '' ? 0 : 1}">
+        opacity="{textEdit.text == '' ? 1 : 0}">
         <opacity>
             <Behaviour>
                 <NumericAnimation property="opacity" duration="250"/>
diff --git a/examples/declarative/tutorials/contacts/2_Reuse/FieldText4.qml b/examples/declarative/tutorials/contacts/2_Reuse/FieldText4.qml
index 45bb18d..191da52 100644
--- a/examples/declarative/tutorials/contacts/2_Reuse/FieldText4.qml
+++ b/examples/declarative/tutorials/contacts/2_Reuse/FieldText4.qml
@@ -17,21 +17,21 @@
     <resources>
         <Script>
             function edit() {
-                if (!page.mouseGrabbed) {
+                if (!contactDetails.mouseGrabbed) {
                     fieldText.state='editing';
-                    page.mouseGrabbed=true;
+                    contactDetails.mouseGrabbed=true;
                 }
             }
             function confirm() {
                 fieldText.text = textEdit.text;
                 fieldText.state='';
-                page.mouseGrabbed=false;
+                contactDetails.mouseGrabbed=false;
                 fieldText.confirmed.emit();
             }
             function reset() {
                 textEdit.text = fieldText.text;
                 fieldText.state='';
-                page.mouseGrabbed=false;
+                contactDetails.mouseGrabbed=false;
             }
         </Script>
     </resources>
@@ -63,7 +63,7 @@
         color="#505050"
         font.italic="true"
         text="{fieldText.label}"
-        opacity="{textEdit.text != '' ? 0 : 1}">
+        opacity="{textEdit.text == '' ? 1 : 0}">
         <opacity>
             <Behaviour>
                 <NumericAnimation property="opacity" duration="250"/>
diff --git a/examples/declarative/tutorials/contacts/2_Reuse/RemoveButton4.qml b/examples/declarative/tutorials/contacts/2_Reuse/RemoveButton4.qml
index a489e95..991d6a0 100644
--- a/examples/declarative/tutorials/contacts/2_Reuse/RemoveButton4.qml
+++ b/examples/declarative/tutorials/contacts/2_Reuse/RemoveButton4.qml
@@ -14,11 +14,11 @@
                 print('removeButton.toggle()');
                 if (removeButton.state == 'opened') {
                     removeButton.state = '';
-                    page.mouseGrabbed=false;
+                    contactDetails.mouseGrabbed=false;
                 } else {
-                    if (!page.mouseGrabbed) {
+                    if (!contactDetails.mouseGrabbed) {
                         removeButton.state = 'opened';
-                        page.mouseGrabbed=true;
+                        contactDetails.mouseGrabbed=true;
                     }
                 }
             }
diff --git a/examples/declarative/tutorials/contacts/3_Collections/3_Collections.qml b/examples/declarative/tutorials/contacts/3_Collections/3_Collections.qml
index 6907676..e1df10c 100644
--- a/examples/declarative/tutorials/contacts/3_Collections/3_Collections.qml
+++ b/examples/declarative/tutorials/contacts/3_Collections/3_Collections.qml
@@ -3,7 +3,7 @@
         <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=""/>
+                <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'"/>
                 <opacity>
                     <Behaviour>
                         <NumericAnimation property="opacity" duration="250"/>
@@ -14,7 +14,7 @@
         <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=""/>
+                <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'"/>
                 <opacity>
                     <Behaviour>
                         <NumericAnimation property="opacity" duration="250"/>
@@ -25,7 +25,7 @@
         <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=""/>
+                <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'"/>
                 <opacity>
                     <Behaviour>
                         <NumericAnimation property="opacity" duration="250"/>
diff --git a/examples/declarative/tutorials/contacts/3_Collections/FieldText.qml b/examples/declarative/tutorials/contacts/3_Collections/FieldText.qml
index 583c73e..199270c 100644
--- a/examples/declarative/tutorials/contacts/3_Collections/FieldText.qml
+++ b/examples/declarative/tutorials/contacts/3_Collections/FieldText.qml
@@ -63,7 +63,7 @@
         color="#505050"
         font.italic="true"
         text="{fieldText.label}"
-        opacity="{textEdit.text != '' ? 0 : 1}">
+        opacity="{textEdit.text == '' ? 1 : 0}">
         <opacity>
             <Behaviour>
                 <NumericAnimation property="opacity" duration="250"/>
diff --git a/examples/declarative/tutorials/contacts/Final/FieldText.qml b/examples/declarative/tutorials/contacts/Final/FieldText.qml
index a82cecd..93095be 100644
--- a/examples/declarative/tutorials/contacts/Final/FieldText.qml
+++ b/examples/declarative/tutorials/contacts/Final/FieldText.qml
@@ -63,7 +63,7 @@
         color="#505050"
         font.italic="true"
         text="{fieldText.label}"
-        opacity="{textEdit.text != '' ? 0 : 1}">
+        opacity="{textEdit.text == '' ? 1 : 0}">
         <opacity>
             <Behaviour>
                 <NumericAnimation property="opacity" duration="250"/>
-- 
cgit v0.12


From 75e867d56b12626d3db13d21b6d55c5cebaf9858 Mon Sep 17 00:00:00 2001
From: Ian Walters <ian.walters@nokia.com>
Date: Tue, 28 Apr 2009 10:12:47 +1000
Subject: Reorg so that snippets are more readable.

Reorg not complete though.  May implement use of
namespace features in chapter 2 so that can reduce
duplicated files in chapter 3.
---
 .../1_Drawing_and_Animation/1/Removebutton.qml     |  4 +
 .../1_Drawing_and_animation.qml                    | 12 +--
 .../1_Drawing_and_Animation/2/RemoveButton.qml     | 10 +++
 .../1_Drawing_and_Animation/3/RemoveButton.qml     | 23 ++++++
 .../1_Drawing_and_Animation/4/RemoveButton.qml     | 65 +++++++++++++++
 .../1_Drawing_and_Animation/5/RemoveButton.qml     | 70 ++++++++++++++++
 .../contacts/1_Drawing_and_Animation/GroupBox.qml  | 12 ++-
 .../1_Drawing_and_Animation/RemoveButton1.qml      |  4 -
 .../1_Drawing_and_Animation/RemoveButton2.qml      | 10 ---
 .../1_Drawing_and_Animation/RemoveButton3.qml      | 23 ------
 .../1_Drawing_and_Animation/RemoveButton4.qml      | 65 ---------------
 .../1_Drawing_and_Animation/RemoveButton5.qml      | 70 ----------------
 .../tutorials/contacts/2_Reuse/1/ContactField.qml  | 18 ++++
 .../tutorials/contacts/2_Reuse/1/RemoveButton.qml  | 70 ++++++++++++++++
 .../tutorials/contacts/2_Reuse/2/ContactField.qml  | 20 +++++
 .../tutorials/contacts/2_Reuse/2/RemoveButton.qml  | 76 +++++++++++++++++
 .../tutorials/contacts/2_Reuse/2_Reuse.qml         | 12 +--
 .../tutorials/contacts/2_Reuse/3/Contact.qml       | 29 +++++++
 .../tutorials/contacts/2_Reuse/3/ContactField.qml  | 36 ++++++++
 .../tutorials/contacts/2_Reuse/3/FieldText.qml     | 91 ++++++++++++++++++++
 .../tutorials/contacts/2_Reuse/3/RemoveButton.qml  | 76 +++++++++++++++++
 .../tutorials/contacts/2_Reuse/4/Contact.qml       | 32 ++++++++
 .../tutorials/contacts/2_Reuse/4/ContactField.qml  | 35 ++++++++
 .../tutorials/contacts/2_Reuse/4/FieldText.qml     | 96 ++++++++++++++++++++++
 .../tutorials/contacts/2_Reuse/4/RemoveButton.qml  | 80 ++++++++++++++++++
 .../tutorials/contacts/2_Reuse/Contact3.qml        | 29 -------
 .../tutorials/contacts/2_Reuse/Contact4.qml        | 32 --------
 .../tutorials/contacts/2_Reuse/ContactField1.qml   | 18 ----
 .../tutorials/contacts/2_Reuse/ContactField2.qml   | 20 -----
 .../tutorials/contacts/2_Reuse/ContactField3.qml   | 36 --------
 .../tutorials/contacts/2_Reuse/ContactField4.qml   | 35 --------
 .../tutorials/contacts/2_Reuse/FieldText3.qml      | 91 --------------------
 .../tutorials/contacts/2_Reuse/FieldText4.qml      | 96 ----------------------
 .../tutorials/contacts/2_Reuse/GroupBox.qml        | 12 ++-
 .../tutorials/contacts/2_Reuse/RemoveButton1.qml   | 70 ----------------
 .../tutorials/contacts/2_Reuse/RemoveButton2.qml   | 76 -----------------
 .../tutorials/contacts/2_Reuse/RemoveButton3.qml   | 76 -----------------
 .../tutorials/contacts/2_Reuse/RemoveButton4.qml   | 80 ------------------
 .../tutorials/contacts/3_Collections/1/Button.qml  | 38 +++++++++
 .../tutorials/contacts/3_Collections/1/Contact.qml | 28 +++++++
 .../contacts/3_Collections/1/ContactField.qml      | 35 ++++++++
 .../contacts/3_Collections/1/ContactView.qml       | 28 +++++++
 .../contacts/3_Collections/1/FieldText.qml         | 96 ++++++++++++++++++++++
 .../contacts/3_Collections/1/RemoveButton.qml      | 80 ++++++++++++++++++
 .../tutorials/contacts/3_Collections/2/Button.qml  | 38 +++++++++
 .../tutorials/contacts/3_Collections/2/Contact.qml | 28 +++++++
 .../contacts/3_Collections/2/ContactField.qml      | 35 ++++++++
 .../contacts/3_Collections/2/ContactView.qml       | 69 ++++++++++++++++
 .../contacts/3_Collections/2/FieldText.qml         | 96 ++++++++++++++++++++++
 .../contacts/3_Collections/2/RemoveButton.qml      | 80 ++++++++++++++++++
 .../tutorials/contacts/3_Collections/3/Button.qml  | 38 +++++++++
 .../tutorials/contacts/3_Collections/3/Contact.qml | 28 +++++++
 .../contacts/3_Collections/3/ContactField.qml      | 35 ++++++++
 .../contacts/3_Collections/3/ContactView.qml       | 74 +++++++++++++++++
 .../contacts/3_Collections/3/FieldText.qml         | 96 ++++++++++++++++++++++
 .../contacts/3_Collections/3/RemoveButton.qml      | 80 ++++++++++++++++++
 .../contacts/3_Collections/3_Collections.qml       | 41 ++-------
 .../tutorials/contacts/3_Collections/Button.qml    | 38 ---------
 .../tutorials/contacts/3_Collections/Contact.qml   | 28 -------
 .../contacts/3_Collections/ContactField.qml        | 35 --------
 .../contacts/3_Collections/ContactView1.qml        | 28 -------
 .../contacts/3_Collections/ContactView2.qml        | 68 ---------------
 .../contacts/3_Collections/ContactView3.qml        | 73 ----------------
 .../tutorials/contacts/3_Collections/FieldText.qml | 96 ----------------------
 .../tutorials/contacts/3_Collections/GroupBox.qml  | 12 ++-
 .../contacts/3_Collections/RemoveButton.qml        | 80 ------------------
 66 files changed, 1883 insertions(+), 1328 deletions(-)
 create mode 100644 examples/declarative/tutorials/contacts/1_Drawing_and_Animation/1/Removebutton.qml
 create mode 100644 examples/declarative/tutorials/contacts/1_Drawing_and_Animation/2/RemoveButton.qml
 create mode 100644 examples/declarative/tutorials/contacts/1_Drawing_and_Animation/3/RemoveButton.qml
 create mode 100644 examples/declarative/tutorials/contacts/1_Drawing_and_Animation/4/RemoveButton.qml
 create mode 100644 examples/declarative/tutorials/contacts/1_Drawing_and_Animation/5/RemoveButton.qml
 delete mode 100644 examples/declarative/tutorials/contacts/1_Drawing_and_Animation/RemoveButton1.qml
 delete mode 100644 examples/declarative/tutorials/contacts/1_Drawing_and_Animation/RemoveButton2.qml
 delete mode 100644 examples/declarative/tutorials/contacts/1_Drawing_and_Animation/RemoveButton3.qml
 delete mode 100644 examples/declarative/tutorials/contacts/1_Drawing_and_Animation/RemoveButton4.qml
 delete mode 100644 examples/declarative/tutorials/contacts/1_Drawing_and_Animation/RemoveButton5.qml
 create mode 100644 examples/declarative/tutorials/contacts/2_Reuse/1/ContactField.qml
 create mode 100644 examples/declarative/tutorials/contacts/2_Reuse/1/RemoveButton.qml
 create mode 100644 examples/declarative/tutorials/contacts/2_Reuse/2/ContactField.qml
 create mode 100644 examples/declarative/tutorials/contacts/2_Reuse/2/RemoveButton.qml
 create mode 100644 examples/declarative/tutorials/contacts/2_Reuse/3/Contact.qml
 create mode 100644 examples/declarative/tutorials/contacts/2_Reuse/3/ContactField.qml
 create mode 100644 examples/declarative/tutorials/contacts/2_Reuse/3/FieldText.qml
 create mode 100644 examples/declarative/tutorials/contacts/2_Reuse/3/RemoveButton.qml
 create mode 100644 examples/declarative/tutorials/contacts/2_Reuse/4/Contact.qml
 create mode 100644 examples/declarative/tutorials/contacts/2_Reuse/4/ContactField.qml
 create mode 100644 examples/declarative/tutorials/contacts/2_Reuse/4/FieldText.qml
 create mode 100644 examples/declarative/tutorials/contacts/2_Reuse/4/RemoveButton.qml
 delete mode 100644 examples/declarative/tutorials/contacts/2_Reuse/Contact3.qml
 delete mode 100644 examples/declarative/tutorials/contacts/2_Reuse/Contact4.qml
 delete mode 100644 examples/declarative/tutorials/contacts/2_Reuse/ContactField1.qml
 delete mode 100644 examples/declarative/tutorials/contacts/2_Reuse/ContactField2.qml
 delete mode 100644 examples/declarative/tutorials/contacts/2_Reuse/ContactField3.qml
 delete mode 100644 examples/declarative/tutorials/contacts/2_Reuse/ContactField4.qml
 delete mode 100644 examples/declarative/tutorials/contacts/2_Reuse/FieldText3.qml
 delete mode 100644 examples/declarative/tutorials/contacts/2_Reuse/FieldText4.qml
 delete mode 100644 examples/declarative/tutorials/contacts/2_Reuse/RemoveButton1.qml
 delete mode 100644 examples/declarative/tutorials/contacts/2_Reuse/RemoveButton2.qml
 delete mode 100644 examples/declarative/tutorials/contacts/2_Reuse/RemoveButton3.qml
 delete mode 100644 examples/declarative/tutorials/contacts/2_Reuse/RemoveButton4.qml
 create mode 100644 examples/declarative/tutorials/contacts/3_Collections/1/Button.qml
 create mode 100644 examples/declarative/tutorials/contacts/3_Collections/1/Contact.qml
 create mode 100644 examples/declarative/tutorials/contacts/3_Collections/1/ContactField.qml
 create mode 100644 examples/declarative/tutorials/contacts/3_Collections/1/ContactView.qml
 create mode 100644 examples/declarative/tutorials/contacts/3_Collections/1/FieldText.qml
 create mode 100644 examples/declarative/tutorials/contacts/3_Collections/1/RemoveButton.qml
 create mode 100644 examples/declarative/tutorials/contacts/3_Collections/2/Button.qml
 create mode 100644 examples/declarative/tutorials/contacts/3_Collections/2/Contact.qml
 create mode 100644 examples/declarative/tutorials/contacts/3_Collections/2/ContactField.qml
 create mode 100644 examples/declarative/tutorials/contacts/3_Collections/2/ContactView.qml
 create mode 100644 examples/declarative/tutorials/contacts/3_Collections/2/FieldText.qml
 create mode 100644 examples/declarative/tutorials/contacts/3_Collections/2/RemoveButton.qml
 create mode 100644 examples/declarative/tutorials/contacts/3_Collections/3/Button.qml
 create mode 100644 examples/declarative/tutorials/contacts/3_Collections/3/Contact.qml
 create mode 100644 examples/declarative/tutorials/contacts/3_Collections/3/ContactField.qml
 create mode 100644 examples/declarative/tutorials/contacts/3_Collections/3/ContactView.qml
 create mode 100644 examples/declarative/tutorials/contacts/3_Collections/3/FieldText.qml
 create mode 100644 examples/declarative/tutorials/contacts/3_Collections/3/RemoveButton.qml
 delete mode 100644 examples/declarative/tutorials/contacts/3_Collections/Button.qml
 delete mode 100644 examples/declarative/tutorials/contacts/3_Collections/Contact.qml
 delete mode 100644 examples/declarative/tutorials/contacts/3_Collections/ContactField.qml
 delete mode 100644 examples/declarative/tutorials/contacts/3_Collections/ContactView1.qml
 delete mode 100644 examples/declarative/tutorials/contacts/3_Collections/ContactView2.qml
 delete mode 100644 examples/declarative/tutorials/contacts/3_Collections/ContactView3.qml
 delete mode 100644 examples/declarative/tutorials/contacts/3_Collections/FieldText.qml
 delete mode 100644 examples/declarative/tutorials/contacts/3_Collections/RemoveButton.qml

diff --git a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/1/Removebutton.qml b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/1/Removebutton.qml
new file mode 100644
index 0000000..dc3f505
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/1/Removebutton.qml
@@ -0,0 +1,4 @@
+<Rect id="removeButton"
+    width="30" height="30"
+    color="red"
+    radius="5"/>
diff --git a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/1_Drawing_and_animation.qml b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/1_Drawing_and_animation.qml
index 4ea77f3..31a95c6 100644
--- a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/1_Drawing_and_animation.qml
+++ b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/1_Drawing_and_animation.qml
@@ -1,9 +1,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 id="layout" width="{contents.width}">
+        <GroupBox contents="1/RemoveButton.qml" label="Rectangle Component"/>
+        <GroupBox contents="2/RemoveButton.qml" label="Closed Remove Item Button"/>
+        <GroupBox contents="3/RemoveButton.qml" label="Open Remove Item Button"/>
+        <GroupBox contents="4/RemoveButton.qml" label="State Based Button"/>
+        <GroupBox contents="5/RemoveButton.qml" label="Animated Button"/>
     </VerticalLayout>
 </Rect>
diff --git a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/2/RemoveButton.qml b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/2/RemoveButton.qml
new file mode 100644
index 0000000..d3cb045
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/2/RemoveButton.qml
@@ -0,0 +1,10 @@
+<Rect id="removeButton"
+    width="30" height="30"
+    color="red"
+    radius="5">
+    <Image id="trashIcon"
+        width="22" height="22"
+        anchors.right="{parent.right}" anchors.rightMargin="4"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        src="../../shared/pics/trash.png"/>
+</Rect>
diff --git a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/3/RemoveButton.qml b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/3/RemoveButton.qml
new file mode 100644
index 0000000..257686f
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/3/RemoveButton.qml
@@ -0,0 +1,23 @@
+<Rect id="removeButton"
+    width="230" height="30"
+    color="red"
+    radius="5">
+    <Image id="cancelIcon"
+        width="22" height="22"
+        anchors.right="{parent.right}" anchors.rightMargin="4"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        src="../../shared/pics/cancel.png"/>
+    <Image id="confirmIcon"
+        width="22" height="22"
+        anchors.left="{parent.left}" anchors.leftMargin="4"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        src="../../shared/pics/ok.png"/>
+    <Text id="text"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        anchors.left="{confirmIcon.right}" anchors.leftMargin="4"
+        anchors.right="{cancelIcon.left}" anchors.rightMargin="4"
+        font.bold="true"
+        color="white"
+        hAlign="AlignHCenter"
+        text="Remove"/>
+</Rect>
diff --git a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/4/RemoveButton.qml b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/4/RemoveButton.qml
new file mode 100644
index 0000000..6d97db1
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/4/RemoveButton.qml
@@ -0,0 +1,65 @@
+<Rect id="removeButton"
+    width="30" height="30"
+    color="red"
+    radius="5">
+    <resources>
+        <Script>
+            function toggle() {
+                print('removeButton.toggle()');
+                if (removeButton.state == 'opened') {
+                    removeButton.state = '';
+                } else {
+                    removeButton.state = 'opened';
+                }
+            }
+        </Script>
+    </resources>
+    <Image id="trashIcon"
+        width="22" height="22"
+        anchors.right="{parent.right}" anchors.rightMargin="4"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        src="../../shared/pics/trash.png"
+        opacity="1">
+        <MouseRegion
+            anchors.fill="{parent}"
+            onClicked="toggle()"/>
+    </Image>
+    <Image id="cancelIcon"
+        width="22" height="22"
+        anchors.right="{parent.right}" anchors.rightMargin="4"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        src="../../shared/pics/cancel.png"
+        opacity="0">
+        <MouseRegion
+            anchors.fill="{parent}"
+            onClicked="toggle()"/>
+    </Image>
+    <Image id="confirmIcon"
+        width="22" height="22"
+        anchors.left="{parent.left}" anchors.leftMargin="4"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        src="../../shared/pics/ok.png"
+        opacity="0">
+        <MouseRegion
+            anchors.fill="{parent}"
+            onClicked="toggle()"/>
+    </Image>
+    <Text id="text"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        anchors.left="{confirmIcon.right}" anchors.leftMargin="4"
+        anchors.right="{cancelIcon.left}" anchors.rightMargin="4"
+        font.bold="true"
+        color="white"
+        hAlign="AlignHCenter"
+        text="Remove"
+        opacity="0"/>
+    <states>
+        <State name="opened">
+            <SetProperty target="{removeButton}" property="width" value="230"/>
+            <SetProperty target="{text}" property="opacity" value="1"/>
+            <SetProperty target="{confirmIcon}" property="opacity" value="1"/>
+            <SetProperty target="{cancelIcon}" property="opacity" value="1"/>
+            <SetProperty target="{trashIcon}" property="opacity" value="0"/>
+        </State>
+    </states>
+</Rect>
diff --git a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/5/RemoveButton.qml b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/5/RemoveButton.qml
new file mode 100644
index 0000000..ddb3507
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/5/RemoveButton.qml
@@ -0,0 +1,70 @@
+<Rect id="removeButton"
+    width="30" height="30"
+    color="red"
+    radius="5">
+    <resources>
+        <Script>
+            function toggle() {
+                print('removeButton.toggle()');
+                if (removeButton.state == 'opened') {
+                    removeButton.state = '';
+                } else {
+                    removeButton.state = 'opened';
+                }
+            }
+        </Script>
+    </resources>
+    <Image id="trashIcon"
+        width="22" height="22"
+        anchors.right="{parent.right}" anchors.rightMargin="4"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        src="../../shared/pics/trash.png"
+        opacity="1">
+        <MouseRegion
+            anchors.fill="{parent}"
+            onClicked="toggle()"/>
+    </Image>
+    <Image id="cancelIcon"
+        width="22" height="22"
+        anchors.right="{parent.right}" anchors.rightMargin="4"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        src="../../shared/pics/cancel.png"
+        opacity="0">
+        <MouseRegion
+            anchors.fill="{parent}"
+            onClicked="toggle()"/>
+    </Image>
+    <Image id="confirmIcon"
+        width="22" height="22"
+        anchors.left="{parent.left}" anchors.leftMargin="4"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        src="../../shared/pics/ok.png"
+        opacity="0">
+        <MouseRegion
+            anchors.fill="{parent}"
+            onClicked="toggle()"/>
+    </Image>
+    <Text id="text"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        anchors.left="{confirmIcon.right}" anchors.leftMargin="4"
+        anchors.right="{cancelIcon.left}" anchors.rightMargin="4"
+        font.bold="true"
+        color="white"
+        hAlign="AlignHCenter"
+        text="Remove"
+        opacity="0"/>
+    <states>
+        <State name="opened">
+            <SetProperty target="{removeButton}" property="width" value="230"/>
+            <SetProperty target="{text}" property="opacity" value="1"/>
+            <SetProperty target="{confirmIcon}" property="opacity" value="1"/>
+            <SetProperty target="{cancelIcon}" property="opacity" value="1"/>
+            <SetProperty target="{trashIcon}" property="opacity" value="0"/>
+        </State>
+    </states>
+    <transitions>
+        <Transition fromState="*" toState="opened" reversible="true">
+            <NumericAnimation properties="opacity,x,width" duration="200"/>
+        </Transition>
+    </transitions>
+</Rect>
diff --git a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/GroupBox.qml b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/GroupBox.qml
index 01f26ee..77f7093 100644
--- a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/GroupBox.qml
+++ b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/GroupBox.qml
@@ -1,4 +1,4 @@
-<Item id="groupBox" width="{Math.max(270, subItem.width+40)}" height="{Math.max(70, subItem.height+40)}">
+<FocusRealm id="groupBox" width="{Math.max(270, subItem.width+40)}" height="{Math.max(70, subItem.height+40)}">
     <properties>
         <Property name="contents"/>
         <Property name="label"/>
@@ -14,4 +14,12 @@
     <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>
+    <Rect color="black" anchors.fill="{parent}" opacity="{parent.focus ? 0 : 0.3}">
+        <MouseRegion anchors.fill="{parent}" onClicked="parent.parent.focus=true"/>
+        <opacity>
+            <Behaviour>
+                <NumericAnimation property="opacity" duration="250"/>
+            </Behaviour>
+        </opacity>
+    </Rect>
+</FocusRealm>
diff --git a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/RemoveButton1.qml b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/RemoveButton1.qml
deleted file mode 100644
index dc3f505..0000000
--- a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/RemoveButton1.qml
+++ /dev/null
@@ -1,4 +0,0 @@
-<Rect id="removeButton"
-    width="30" height="30"
-    color="red"
-    radius="5"/>
diff --git a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/RemoveButton2.qml b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/RemoveButton2.qml
deleted file mode 100644
index 2ba488d..0000000
--- a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/RemoveButton2.qml
+++ /dev/null
@@ -1,10 +0,0 @@
-<Rect id="removeButton"
-    width="30" height="30"
-    color="red"
-    radius="5">
-    <Image id="trashIcon"
-        width="22" height="22"
-        anchors.right="{parent.right}" anchors.rightMargin="4"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        src="../shared/pics/trash.png"/>
-</Rect>
diff --git a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/RemoveButton3.qml b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/RemoveButton3.qml
deleted file mode 100644
index 9a364c5..0000000
--- a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/RemoveButton3.qml
+++ /dev/null
@@ -1,23 +0,0 @@
-<Rect id="removeButton"
-    width="230" height="30"
-    color="red"
-    radius="5">
-    <Image id="cancelIcon"
-        width="22" height="22"
-        anchors.right="{parent.right}" anchors.rightMargin="4"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        src="../shared/pics/cancel.png"/>
-    <Image id="confirmIcon"
-        width="22" height="22"
-        anchors.left="{parent.left}" anchors.leftMargin="4"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        src="../shared/pics/ok.png"/>
-    <Text id="text"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        anchors.left="{confirmIcon.right}" anchors.leftMargin="4"
-        anchors.right="{cancelIcon.left}" anchors.rightMargin="4"
-        font.bold="true"
-        color="white"
-        hAlign="AlignHCenter"
-        text="Remove"/>
-</Rect>
diff --git a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/RemoveButton4.qml b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/RemoveButton4.qml
deleted file mode 100644
index 45ca19d..0000000
--- a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/RemoveButton4.qml
+++ /dev/null
@@ -1,65 +0,0 @@
-<Rect id="removeButton"
-    width="30" height="30"
-    color="red"
-    radius="5">
-    <resources>
-        <Script>
-            function toggle() {
-                print('removeButton.toggle()');
-                if (removeButton.state == 'opened') {
-                    removeButton.state = '';
-                } else {
-                    removeButton.state = 'opened';
-                }
-            }
-        </Script>
-    </resources>
-    <Image id="trashIcon"
-        width="22" height="22"
-        anchors.right="{parent.right}" anchors.rightMargin="4"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        src="../shared/pics/trash.png"
-        opacity="1">
-        <MouseRegion
-            anchors.fill="{parent}"
-            onClicked="toggle()"/>
-    </Image>
-    <Image id="cancelIcon"
-        width="22" height="22"
-        anchors.right="{parent.right}" anchors.rightMargin="4"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        src="../shared/pics/cancel.png"
-        opacity="0">
-        <MouseRegion
-            anchors.fill="{parent}"
-            onClicked="toggle()"/>
-    </Image>
-    <Image id="confirmIcon"
-        width="22" height="22"
-        anchors.left="{parent.left}" anchors.leftMargin="4"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        src="../shared/pics/ok.png"
-        opacity="0">
-        <MouseRegion
-            anchors.fill="{parent}"
-            onClicked="toggle()"/>
-    </Image>
-    <Text id="text"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        anchors.left="{confirmIcon.right}" anchors.leftMargin="4"
-        anchors.right="{cancelIcon.left}" anchors.rightMargin="4"
-        font.bold="true"
-        color="white"
-        hAlign="AlignHCenter"
-        text="Remove"
-        opacity="0"/>
-    <states>
-        <State name="opened">
-            <SetProperty target="{removeButton}" property="width" value="230"/>
-            <SetProperty target="{text}" property="opacity" value="1"/>
-            <SetProperty target="{confirmIcon}" property="opacity" value="1"/>
-            <SetProperty target="{cancelIcon}" property="opacity" value="1"/>
-            <SetProperty target="{trashIcon}" property="opacity" value="0"/>
-        </State>
-    </states>
-</Rect>
diff --git a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/RemoveButton5.qml b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/RemoveButton5.qml
deleted file mode 100644
index 68c1838..0000000
--- a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/RemoveButton5.qml
+++ /dev/null
@@ -1,70 +0,0 @@
-<Rect id="removeButton"
-    width="30" height="30"
-    color="red"
-    radius="5">
-    <resources>
-        <Script>
-            function toggle() {
-                print('removeButton.toggle()');
-                if (removeButton.state == 'opened') {
-                    removeButton.state = '';
-                } else {
-                    removeButton.state = 'opened';
-                }
-            }
-        </Script>
-    </resources>
-    <Image id="trashIcon"
-        width="22" height="22"
-        anchors.right="{parent.right}" anchors.rightMargin="4"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        src="../shared/pics/trash.png"
-        opacity="1">
-        <MouseRegion
-            anchors.fill="{parent}"
-            onClicked="toggle()"/>
-    </Image>
-    <Image id="cancelIcon"
-        width="22" height="22"
-        anchors.right="{parent.right}" anchors.rightMargin="4"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        src="../shared/pics/cancel.png"
-        opacity="0">
-        <MouseRegion
-            anchors.fill="{parent}"
-            onClicked="toggle()"/>
-    </Image>
-    <Image id="confirmIcon"
-        width="22" height="22"
-        anchors.left="{parent.left}" anchors.leftMargin="4"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        src="../shared/pics/ok.png"
-        opacity="0">
-        <MouseRegion
-            anchors.fill="{parent}"
-            onClicked="toggle()"/>
-    </Image>
-    <Text id="text"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        anchors.left="{confirmIcon.right}" anchors.leftMargin="4"
-        anchors.right="{cancelIcon.left}" anchors.rightMargin="4"
-        font.bold="true"
-        color="white"
-        hAlign="AlignHCenter"
-        text="Remove"
-        opacity="0"/>
-    <states>
-        <State name="opened">
-            <SetProperty target="{removeButton}" property="width" value="230"/>
-            <SetProperty target="{text}" property="opacity" value="1"/>
-            <SetProperty target="{confirmIcon}" property="opacity" value="1"/>
-            <SetProperty target="{cancelIcon}" property="opacity" value="1"/>
-            <SetProperty target="{trashIcon}" property="opacity" value="0"/>
-        </State>
-    </states>
-    <transitions>
-        <Transition fromState="*" toState="opened" reversible="true">
-            <NumericAnimation properties="opacity,x,width" duration="200"/>
-        </Transition>
-    </transitions>
-</Rect>
diff --git a/examples/declarative/tutorials/contacts/2_Reuse/1/ContactField.qml b/examples/declarative/tutorials/contacts/2_Reuse/1/ContactField.qml
new file mode 100644
index 0000000..6d8bb9f
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/2_Reuse/1/ContactField.qml
@@ -0,0 +1,18 @@
+<Item id="contactField"
+    clip="true"
+    width="230"
+    height="30">
+    <RemoveButton id="removeButton"
+        anchors.right="{parent.right}"
+        anchors.top="{parent.top}" anchors.bottom="{parent.bottom}"/>
+    <Text id="fieldText"
+        width="{contactField.width-80}"
+        anchors.right="{removeButton.left}" anchors.rightMargin="10"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        font.bold="true"
+        color="black"
+        text="123123"/>
+    <Image src="../../shared/pics/phone.png"
+        anchors.right="{fieldText.left}" anchors.rightMargin="10"
+        anchors.verticalCenter="{parent.verticalCenter}"/>
+</Item>
diff --git a/examples/declarative/tutorials/contacts/2_Reuse/1/RemoveButton.qml b/examples/declarative/tutorials/contacts/2_Reuse/1/RemoveButton.qml
new file mode 100644
index 0000000..ddb3507
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/2_Reuse/1/RemoveButton.qml
@@ -0,0 +1,70 @@
+<Rect id="removeButton"
+    width="30" height="30"
+    color="red"
+    radius="5">
+    <resources>
+        <Script>
+            function toggle() {
+                print('removeButton.toggle()');
+                if (removeButton.state == 'opened') {
+                    removeButton.state = '';
+                } else {
+                    removeButton.state = 'opened';
+                }
+            }
+        </Script>
+    </resources>
+    <Image id="trashIcon"
+        width="22" height="22"
+        anchors.right="{parent.right}" anchors.rightMargin="4"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        src="../../shared/pics/trash.png"
+        opacity="1">
+        <MouseRegion
+            anchors.fill="{parent}"
+            onClicked="toggle()"/>
+    </Image>
+    <Image id="cancelIcon"
+        width="22" height="22"
+        anchors.right="{parent.right}" anchors.rightMargin="4"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        src="../../shared/pics/cancel.png"
+        opacity="0">
+        <MouseRegion
+            anchors.fill="{parent}"
+            onClicked="toggle()"/>
+    </Image>
+    <Image id="confirmIcon"
+        width="22" height="22"
+        anchors.left="{parent.left}" anchors.leftMargin="4"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        src="../../shared/pics/ok.png"
+        opacity="0">
+        <MouseRegion
+            anchors.fill="{parent}"
+            onClicked="toggle()"/>
+    </Image>
+    <Text id="text"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        anchors.left="{confirmIcon.right}" anchors.leftMargin="4"
+        anchors.right="{cancelIcon.left}" anchors.rightMargin="4"
+        font.bold="true"
+        color="white"
+        hAlign="AlignHCenter"
+        text="Remove"
+        opacity="0"/>
+    <states>
+        <State name="opened">
+            <SetProperty target="{removeButton}" property="width" value="230"/>
+            <SetProperty target="{text}" property="opacity" value="1"/>
+            <SetProperty target="{confirmIcon}" property="opacity" value="1"/>
+            <SetProperty target="{cancelIcon}" property="opacity" value="1"/>
+            <SetProperty target="{trashIcon}" property="opacity" value="0"/>
+        </State>
+    </states>
+    <transitions>
+        <Transition fromState="*" toState="opened" reversible="true">
+            <NumericAnimation properties="opacity,x,width" duration="200"/>
+        </Transition>
+    </transitions>
+</Rect>
diff --git a/examples/declarative/tutorials/contacts/2_Reuse/2/ContactField.qml b/examples/declarative/tutorials/contacts/2_Reuse/2/ContactField.qml
new file mode 100644
index 0000000..5f8ff51
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/2_Reuse/2/ContactField.qml
@@ -0,0 +1,20 @@
+<Item id="contactField"
+    clip="true"
+    width="230"
+    height="30">
+    <RemoveButton id="removeButton"
+        anchors.right="{parent.right}"
+        anchors.top="{parent.top}" anchors.bottom="{parent.bottom}"
+        expandedWidth="{contactField.width}"
+        onConfirmed="print('Clear field text'); fieldText.text=''"/>
+    <Text id="fieldText"
+        width="{contactField.width-80}"
+        anchors.right="{removeButton.left}" anchors.rightMargin="10"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        font.bold="true"
+        color="black"
+        text="123123"/>
+    <Image src="../../shared/pics/phone.png"
+        anchors.right="{fieldText.left}" anchors.rightMargin="10"
+        anchors.verticalCenter="{parent.verticalCenter}"/>
+</Item>
diff --git a/examples/declarative/tutorials/contacts/2_Reuse/2/RemoveButton.qml b/examples/declarative/tutorials/contacts/2_Reuse/2/RemoveButton.qml
new file mode 100644
index 0000000..e52bcbf
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/2_Reuse/2/RemoveButton.qml
@@ -0,0 +1,76 @@
+<Rect id="removeButton"
+    width="30" height="30"
+    color="red"
+    radius="5">
+    <properties>
+        <Property name="expandedWidth" value="230"/>
+    </properties>
+    <signals>
+        <Signal name="confirmed"/>
+    </signals>
+    <resources>
+        <Script>
+            function toggle() {
+                print('removeButton.toggle()');
+                if (removeButton.state == 'opened') {
+                    removeButton.state = '';
+                } else {
+                    removeButton.state = 'opened';
+                }
+            }
+        </Script>
+    </resources>
+    <Image id="trashIcon"
+        width="22" height="22"
+        anchors.right="{parent.right}" anchors.rightMargin="4"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        src="../../shared/pics/trash.png"
+        opacity="1">
+        <MouseRegion
+            anchors.fill="{parent}"
+            onClicked="toggle()"/>
+    </Image>
+    <Image id="cancelIcon"
+        width="22" height="22"
+        anchors.right="{parent.right}" anchors.rightMargin="4"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        src="../../shared/pics/cancel.png"
+        opacity="0">
+        <MouseRegion
+            anchors.fill="{parent}"
+            onClicked="toggle()"/>
+    </Image>
+    <Image id="confirmIcon"
+        width="22" height="22"
+        anchors.left="{parent.left}" anchors.leftMargin="4"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        src="../../shared/pics/ok.png"
+        opacity="0">
+        <MouseRegion
+            anchors.fill="{parent}"
+            onClicked="toggle(); removeButton.confirmed.emit()"/>
+    </Image>
+    <Text id="text"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        anchors.left="{confirmIcon.right}" anchors.leftMargin="4"
+        anchors.right="{cancelIcon.left}" anchors.rightMargin="4"
+        font.bold="true"
+        color="white"
+        hAlign="AlignHCenter"
+        text="Remove"
+        opacity="0"/>
+    <states>
+        <State name="opened">
+            <SetProperty target="{removeButton}" property="width" value="{removeButton.expandedWidth}"/>
+            <SetProperty target="{text}" property="opacity" value="1"/>
+            <SetProperty target="{confirmIcon}" property="opacity" value="1"/>
+            <SetProperty target="{cancelIcon}" property="opacity" value="1"/>
+            <SetProperty target="{trashIcon}" property="opacity" value="0"/>
+        </State>
+    </states>
+    <transitions>
+        <Transition fromState="*" toState="opened" reversible="true">
+            <NumericAnimation properties="opacity,x,width" duration="200"/>
+        </Transition>
+    </transitions>
+</Rect>
diff --git a/examples/declarative/tutorials/contacts/2_Reuse/2_Reuse.qml b/examples/declarative/tutorials/contacts/2_Reuse/2_Reuse.qml
index 92afc0c..98fdb86 100644
--- a/examples/declarative/tutorials/contacts/2_Reuse/2_Reuse.qml
+++ b/examples/declarative/tutorials/contacts/2_Reuse/2_Reuse.qml
@@ -1,9 +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="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 id="layout" width="{contents.width}">
+        <GroupBox contents="1/ContactField.qml" label="Loading Component"/>
+        <GroupBox contents="2/ContactField.qml" label="Using properties"/>
+        <GroupBox contents="3/ContactField.qml" label="Defining signals"/>
+        <GroupBox contents="3/Contact.qml" label="Multiple Items"/>
+        <GroupBox contents="4/Contact.qml" label="Mouse Grabbing"/>
     </VerticalLayout>
 </Rect>
diff --git a/examples/declarative/tutorials/contacts/2_Reuse/3/Contact.qml b/examples/declarative/tutorials/contacts/2_Reuse/3/Contact.qml
new file mode 100644
index 0000000..cf6c657
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/2_Reuse/3/Contact.qml
@@ -0,0 +1,29 @@
+<Item id="contactDetails"
+    width="230"
+    height="{layout.height}">
+    <properties>
+        <Property name="contactid" value=""/>
+        <Property name="label" onValueChanged="labelField.value = label"/>
+        <Property name="phone" onValueChanged="phoneField.value = phone"/>
+        <Property name="email" onValueChanged="emailField.value = email"/>
+    </properties>
+    <VerticalLayout id="layout"
+        anchors.fill="{parent}"
+        spacing="5"
+        margin="5">
+        <ContactField id="labelField"
+            anchors.left="{layout.left}" anchors.leftMargin="5"
+            anchors.right="{layout.right}" anchors.rightMargin="5"
+            label="Name"/>
+        <ContactField id="phoneField"
+            anchors.left="{layout.left}" anchors.leftMargin="5"
+            anchors.right="{layout.right}" anchors.rightMargin="5"
+            icon="../../shared/pics/phone.png"
+            label="Phone"/>
+        <ContactField id="emailField"
+            anchors.left="{layout.left}" anchors.leftMargin="5"
+            anchors.right="{layout.right}" anchors.rightMargin="5"
+            icon="../../shared/pics/email.png"
+            label="Email"/>
+    </VerticalLayout>
+</Item>
diff --git a/examples/declarative/tutorials/contacts/2_Reuse/3/ContactField.qml b/examples/declarative/tutorials/contacts/2_Reuse/3/ContactField.qml
new file mode 100644
index 0000000..5748a81
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/2_Reuse/3/ContactField.qml
@@ -0,0 +1,36 @@
+<Item id="contactField"
+    clip="true"
+    width="230"
+    height="30">
+    <properties>
+        <Property name="label" value="Name"/>
+        <Property name="icon" value="../../shared/pics/phone.png"/>
+        <Property name="value"/>
+    </properties>
+    <RemoveButton id="removeButton"
+        anchors.right="{parent.right}"
+        anchors.top="{parent.top}" anchors.bottom="{parent.bottom}"
+        expandedWidth="{contactField.width}"
+        onConfirmed="print('Clear field text'); fieldText.text=''"/>
+    <FieldText id="fieldText"
+        width="{contactField.width-70}"
+        anchors.right="{removeButton.left}" anchors.rightMargin="5"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        label="{contactField.label}"
+        text="{contactField.value}"/>
+    <Image
+        anchors.right="{fieldText.left}" anchors.rightMargin="5"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        src="{contactField.icon}"/>
+    <states>
+        <State name="editingText" when="{fieldText.state == 'editing'}">
+            <SetProperty target="{removeButton.anchors}" property="rightMargin" value="-35"/>
+            <SetProperty target="{fieldText}" property="width" value="{contactField.width}"/>
+        </State>
+    </states>
+    <transitions>
+        <Transition fromState='' toState="*" reversible="true">
+            <NumericAnimation properties="width,rightMargin" duration="200"/>
+        </Transition>
+    </transitions>
+</Item>
diff --git a/examples/declarative/tutorials/contacts/2_Reuse/3/FieldText.qml b/examples/declarative/tutorials/contacts/2_Reuse/3/FieldText.qml
new file mode 100644
index 0000000..8010ac0
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/2_Reuse/3/FieldText.qml
@@ -0,0 +1,91 @@
+<Rect id="fieldText"
+    height="30"
+    radius="5"
+    color="white">
+    <properties>
+        <Property
+            name="text"
+            value=""
+            onValueChanged="reset()"/>
+        <Property
+            name="label"
+            value=""/>
+    </properties>
+    <signals>
+        <Signal name="confirmed"/>
+    </signals>
+    <resources>
+        <Script>
+            function edit() {
+                fieldText.state='editing';
+            }
+            function confirm() {
+                fieldText.text = textEdit.text;
+                fieldText.state='';
+                fieldText.confirmed.emit();
+            }
+            function reset() {
+                textEdit.text = fieldText.text;
+                fieldText.state='';
+            }
+        </Script>
+    </resources>
+    <Image id="cancelIcon"
+        width="22" height="22"
+        anchors.right="{parent.right}" anchors.rightMargin="4"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        src="../../shared/pics/cancel.png"
+        opacity="0"/>
+    <Image id="confirmIcon"
+        width="22" height="22"
+        anchors.left="{parent.left}" anchors.leftMargin="4"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        src="../../shared/pics/ok.png"
+        opacity="0"/>
+    <TextEdit id="textEdit"
+        anchors.left="{parent.left}" anchors.leftMargin="5"
+        anchors.right="{parent.right}" anchors.rightMargin="5"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        color="black"
+        font.bold="true"
+        readOnly="true"
+        wrap="false"
+        />
+    <Text id="textLabel"
+        x="5" width="{parent.width-10}"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        hAlign="AlignHCenter"
+        color="#505050"
+        font.italic="true"
+        text="{fieldText.label}"
+        opacity="{textEdit.text == '' ? 1 : 0}">
+        <opacity>
+            <Behaviour>
+                <NumericAnimation property="opacity" duration="250"/>
+            </Behaviour>
+        </opacity>
+    </Text>
+    <MouseRegion anchors.fill="{cancelIcon}" onClicked="reset()"/>
+    <MouseRegion anchors.fill="{confirmIcon}" onClicked="confirm()"/>
+    <MouseRegion
+        id="editRegion"
+        anchors.fill="{textEdit}"
+        onClicked="edit()"/>
+    <states>
+        <State name="editing">
+            <SetProperty target="{confirmIcon}" property="opacity" value="1"/>
+            <SetProperty target="{cancelIcon}" property="opacity" value="1"/>
+            <SetProperty target="{textEdit}" property="readOnly" value="false"/>
+            <SetProperty target="{textEdit}" property="focus" value="true"/>
+            <SetProperty target="{editRegion}" property="opacity" value="0"/>
+            <SetProperty target="{textEdit.anchors}" property="leftMargin" value="39"/>
+            <SetProperty target="{textEdit.anchors}" property="rightMargin" value="39"/>
+        </State>
+    </states>
+    <transitions>
+        <Transition fromState='' toState="*" reversible="true">
+            <NumericAnimation properties="opacity,leftMargin,rightMargin" duration="200"/>
+            <ColorAnimation duration="150"/>
+        </Transition>
+    </transitions>
+</Rect>
diff --git a/examples/declarative/tutorials/contacts/2_Reuse/3/RemoveButton.qml b/examples/declarative/tutorials/contacts/2_Reuse/3/RemoveButton.qml
new file mode 100644
index 0000000..e52bcbf
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/2_Reuse/3/RemoveButton.qml
@@ -0,0 +1,76 @@
+<Rect id="removeButton"
+    width="30" height="30"
+    color="red"
+    radius="5">
+    <properties>
+        <Property name="expandedWidth" value="230"/>
+    </properties>
+    <signals>
+        <Signal name="confirmed"/>
+    </signals>
+    <resources>
+        <Script>
+            function toggle() {
+                print('removeButton.toggle()');
+                if (removeButton.state == 'opened') {
+                    removeButton.state = '';
+                } else {
+                    removeButton.state = 'opened';
+                }
+            }
+        </Script>
+    </resources>
+    <Image id="trashIcon"
+        width="22" height="22"
+        anchors.right="{parent.right}" anchors.rightMargin="4"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        src="../../shared/pics/trash.png"
+        opacity="1">
+        <MouseRegion
+            anchors.fill="{parent}"
+            onClicked="toggle()"/>
+    </Image>
+    <Image id="cancelIcon"
+        width="22" height="22"
+        anchors.right="{parent.right}" anchors.rightMargin="4"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        src="../../shared/pics/cancel.png"
+        opacity="0">
+        <MouseRegion
+            anchors.fill="{parent}"
+            onClicked="toggle()"/>
+    </Image>
+    <Image id="confirmIcon"
+        width="22" height="22"
+        anchors.left="{parent.left}" anchors.leftMargin="4"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        src="../../shared/pics/ok.png"
+        opacity="0">
+        <MouseRegion
+            anchors.fill="{parent}"
+            onClicked="toggle(); removeButton.confirmed.emit()"/>
+    </Image>
+    <Text id="text"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        anchors.left="{confirmIcon.right}" anchors.leftMargin="4"
+        anchors.right="{cancelIcon.left}" anchors.rightMargin="4"
+        font.bold="true"
+        color="white"
+        hAlign="AlignHCenter"
+        text="Remove"
+        opacity="0"/>
+    <states>
+        <State name="opened">
+            <SetProperty target="{removeButton}" property="width" value="{removeButton.expandedWidth}"/>
+            <SetProperty target="{text}" property="opacity" value="1"/>
+            <SetProperty target="{confirmIcon}" property="opacity" value="1"/>
+            <SetProperty target="{cancelIcon}" property="opacity" value="1"/>
+            <SetProperty target="{trashIcon}" property="opacity" value="0"/>
+        </State>
+    </states>
+    <transitions>
+        <Transition fromState="*" toState="opened" reversible="true">
+            <NumericAnimation properties="opacity,x,width" duration="200"/>
+        </Transition>
+    </transitions>
+</Rect>
diff --git a/examples/declarative/tutorials/contacts/2_Reuse/4/Contact.qml b/examples/declarative/tutorials/contacts/2_Reuse/4/Contact.qml
new file mode 100644
index 0000000..2f4d540
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/2_Reuse/4/Contact.qml
@@ -0,0 +1,32 @@
+<Item id="contactDetails"
+    width="230"
+    height="{layout.height}">
+    <properties>
+        <Property name="mouseGrabbed" value="false"/>
+    </properties>
+    <properties>
+        <Property name="contactid" value=""/>
+        <Property name="label" onValueChanged="labelField.value = label"/>
+        <Property name="phone" onValueChanged="phoneField.value = phone"/>
+        <Property name="email" onValueChanged="emailField.value = email"/>
+    </properties>
+    <VerticalLayout id="layout"
+        anchors.fill="{parent}"
+        spacing="5"
+        margin="5">
+        <ContactField id="labelField"
+            anchors.left="{layout.left}" anchors.leftMargin="5"
+            anchors.right="{layout.right}" anchors.rightMargin="5"
+            label="Name"/>
+        <ContactField id="phoneField"
+            anchors.left="{layout.left}" anchors.leftMargin="5"
+            anchors.right="{layout.right}" anchors.rightMargin="5"
+            icon="../../shared/pics/phone.png"
+            label="Phone"/>
+        <ContactField id="emailField"
+            anchors.left="{layout.left}" anchors.leftMargin="5"
+            anchors.right="{layout.right}" anchors.rightMargin="5"
+            icon="../../shared/pics/email.png"
+            label="Email"/>
+    </VerticalLayout>
+</Item>
diff --git a/examples/declarative/tutorials/contacts/2_Reuse/4/ContactField.qml b/examples/declarative/tutorials/contacts/2_Reuse/4/ContactField.qml
new file mode 100644
index 0000000..819914c
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/2_Reuse/4/ContactField.qml
@@ -0,0 +1,35 @@
+<Item id="contactField"
+    clip="true"
+    height="30">
+    <properties>
+        <Property name="label"/>
+        <Property name="icon"/>
+        <Property name="value"/>
+    </properties>
+    <RemoveButton id="removeButton"
+        anchors.right="{parent.right}"
+        anchors.top="{parent.top}" anchors.bottom="{parent.bottom}"
+        expandedWidth="{contactField.width}"
+        onConfirmed="print('Clear field text'); fieldText.text=''"/>
+    <FieldText id="fieldText"
+        width="{contactField.width-70}"
+        anchors.right="{removeButton.left}" anchors.rightMargin="5"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        label="{contactField.label}"
+        text="{contactField.value}"/>
+    <Image
+        anchors.right="{fieldText.left}" anchors.rightMargin="5"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        src="{contactField.icon}"/>
+    <states>
+        <State name="editingText" when="{fieldText.state == 'editing'}">
+            <SetProperty target="{removeButton.anchors}" property="rightMargin" value="-35"/>
+            <SetProperty target="{fieldText}" property="width" value="{contactField.width}"/>
+        </State>
+    </states>
+    <transitions>
+        <Transition fromState='' toState="*" reversible="true">
+            <NumericAnimation properties="width,rightMargin" duration="200"/>
+        </Transition>
+    </transitions>
+</Item>
diff --git a/examples/declarative/tutorials/contacts/2_Reuse/4/FieldText.qml b/examples/declarative/tutorials/contacts/2_Reuse/4/FieldText.qml
new file mode 100644
index 0000000..0f2ef4e
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/2_Reuse/4/FieldText.qml
@@ -0,0 +1,96 @@
+<Rect id="fieldText"
+    height="30"
+    radius="5"
+    color="white">
+    <properties>
+        <Property
+            name="text"
+            value=""
+            onValueChanged="reset()"/>
+        <Property
+            name="label"
+            value=""/>
+    </properties>
+    <signals>
+        <Signal name="confirmed"/>
+    </signals>
+    <resources>
+        <Script>
+            function edit() {
+                if (!contactDetails.mouseGrabbed) {
+                    fieldText.state='editing';
+                    contactDetails.mouseGrabbed=true;
+                }
+            }
+            function confirm() {
+                fieldText.text = textEdit.text;
+                fieldText.state='';
+                contactDetails.mouseGrabbed=false;
+                fieldText.confirmed.emit();
+            }
+            function reset() {
+                textEdit.text = fieldText.text;
+                fieldText.state='';
+                contactDetails.mouseGrabbed=false;
+            }
+        </Script>
+    </resources>
+    <Image id="cancelIcon"
+        width="22" height="22"
+        anchors.right="{parent.right}" anchors.rightMargin="4"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        src="../../shared/pics/cancel.png"
+        opacity="0"/>
+    <Image id="confirmIcon"
+        width="22" height="22"
+        anchors.left="{parent.left}" anchors.leftMargin="4"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        src="../../shared/pics/ok.png"
+        opacity="0"/>
+    <TextEdit id="textEdit"
+        anchors.left="{parent.left}" anchors.leftMargin="5"
+        anchors.right="{parent.right}" anchors.rightMargin="5"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        color="black"
+        font.bold="true"
+        readOnly="true"
+        wrap="false"
+        />
+    <Text id="textLabel"
+        x="5" width="{parent.width-10}"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        hAlign="AlignHCenter"
+        color="#505050"
+        font.italic="true"
+        text="{fieldText.label}"
+        opacity="{textEdit.text == '' ? 1 : 0}">
+        <opacity>
+            <Behaviour>
+                <NumericAnimation property="opacity" duration="250"/>
+            </Behaviour>
+        </opacity>
+    </Text>
+    <MouseRegion anchors.fill="{cancelIcon}" onClicked="reset()"/>
+    <MouseRegion anchors.fill="{confirmIcon}" onClicked="confirm()"/>
+    <MouseRegion
+        id="editRegion"
+        anchors.fill="{textEdit}"
+        onClicked="edit()"/>
+    <states>
+        <State name="editing">
+            <SetProperty target="{confirmIcon}" property="opacity" value="1"/>
+            <SetProperty target="{cancelIcon}" property="opacity" value="1"/>
+            <SetProperty target="{textEdit}" property="readOnly" value="false"/>
+            <SetProperty target="{textEdit}" property="focus" value="true"/>
+            <SetProperty target="{editRegion}" property="opacity" value="0"/>
+            <SetProperty target="{textEdit.anchors}" property="leftMargin" value="39"/>
+            <SetProperty target="{textEdit.anchors}" property="rightMargin" value="39"/>
+        </State>
+    </states>
+    <transitions>
+        <Transition fromState='' toState="*" reversible="true">
+            <NumericAnimation properties="opacity,leftMargin,rightMargin" duration="200"/>
+            <ColorAnimation duration="150"/>
+        </Transition>
+    </transitions>
+</Rect>
diff --git a/examples/declarative/tutorials/contacts/2_Reuse/4/RemoveButton.qml b/examples/declarative/tutorials/contacts/2_Reuse/4/RemoveButton.qml
new file mode 100644
index 0000000..14e5043
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/2_Reuse/4/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 = '';
+                    contactDetails.mouseGrabbed=false;
+                } else {
+                    if (!contactDetails.mouseGrabbed) {
+                        removeButton.state = 'opened';
+                        contactDetails.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/2_Reuse/Contact3.qml b/examples/declarative/tutorials/contacts/2_Reuse/Contact3.qml
deleted file mode 100644
index 2933437..0000000
--- a/examples/declarative/tutorials/contacts/2_Reuse/Contact3.qml
+++ /dev/null
@@ -1,29 +0,0 @@
-<Item id="contactDetails"
-    width="230"
-    height="{layout.height}">
-    <properties>
-        <Property name="contactid" value=""/>
-        <Property name="label" onValueChanged="labelField.value = label"/>
-        <Property name="phone" onValueChanged="phoneField.value = phone"/>
-        <Property name="email" onValueChanged="emailField.value = email"/>
-    </properties>
-    <VerticalLayout id="layout"
-        anchors.fill="{parent}"
-        spacing="5"
-        margin="5">
-        <ContactField3 id="labelField"
-            anchors.left="{layout.left}" anchors.leftMargin="5"
-            anchors.right="{layout.right}" anchors.rightMargin="5"
-            label="Name"/>
-        <ContactField3 id="phoneField"
-            anchors.left="{layout.left}" anchors.leftMargin="5"
-            anchors.right="{layout.right}" anchors.rightMargin="5"
-            icon="../shared/pics/phone.png"
-            label="Phone"/>
-        <ContactField3 id="emailField"
-            anchors.left="{layout.left}" anchors.leftMargin="5"
-            anchors.right="{layout.right}" anchors.rightMargin="5"
-            icon="../shared/pics/email.png"
-            label="Email"/>
-    </VerticalLayout>
-</Item>
diff --git a/examples/declarative/tutorials/contacts/2_Reuse/Contact4.qml b/examples/declarative/tutorials/contacts/2_Reuse/Contact4.qml
deleted file mode 100644
index e87ed60..0000000
--- a/examples/declarative/tutorials/contacts/2_Reuse/Contact4.qml
+++ /dev/null
@@ -1,32 +0,0 @@
-<Item id="contactDetails"
-    width="230"
-    height="{layout.height}">
-    <properties>
-        <Property name="mouseGrabbed" value="false"/>
-    </properties>
-    <properties>
-        <Property name="contactid" value=""/>
-        <Property name="label" onValueChanged="labelField.value = label"/>
-        <Property name="phone" onValueChanged="phoneField.value = phone"/>
-        <Property name="email" onValueChanged="emailField.value = email"/>
-    </properties>
-    <VerticalLayout id="layout"
-        anchors.fill="{parent}"
-        spacing="5"
-        margin="5">
-        <ContactField4 id="labelField"
-            anchors.left="{layout.left}" anchors.leftMargin="5"
-            anchors.right="{layout.right}" anchors.rightMargin="5"
-            label="Name"/>
-        <ContactField4 id="phoneField"
-            anchors.left="{layout.left}" anchors.leftMargin="5"
-            anchors.right="{layout.right}" anchors.rightMargin="5"
-            icon="../shared/pics/phone.png"
-            label="Phone"/>
-        <ContactField4 id="emailField"
-            anchors.left="{layout.left}" anchors.leftMargin="5"
-            anchors.right="{layout.right}" anchors.rightMargin="5"
-            icon="../shared/pics/email.png"
-            label="Email"/>
-    </VerticalLayout>
-</Item>
diff --git a/examples/declarative/tutorials/contacts/2_Reuse/ContactField1.qml b/examples/declarative/tutorials/contacts/2_Reuse/ContactField1.qml
deleted file mode 100644
index 7bfdd28..0000000
--- a/examples/declarative/tutorials/contacts/2_Reuse/ContactField1.qml
+++ /dev/null
@@ -1,18 +0,0 @@
-<Item id="contactField"
-    clip="true"
-    width="230"
-    height="30">
-    <RemoveButton1 id="removeButton"
-        anchors.right="{parent.right}"
-        anchors.top="{parent.top}" anchors.bottom="{parent.bottom}"/>
-    <Text id="fieldText"
-        width="{contactField.width-80}"
-        anchors.right="{removeButton.left}" anchors.rightMargin="10"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        font.bold="true"
-        color="black"
-        text="123123"/>
-    <Image src="../shared/pics/phone.png"
-        anchors.right="{fieldText.left}" anchors.rightMargin="10"
-        anchors.verticalCenter="{parent.verticalCenter}"/>
-</Item>
diff --git a/examples/declarative/tutorials/contacts/2_Reuse/ContactField2.qml b/examples/declarative/tutorials/contacts/2_Reuse/ContactField2.qml
deleted file mode 100644
index 7ec3e4d..0000000
--- a/examples/declarative/tutorials/contacts/2_Reuse/ContactField2.qml
+++ /dev/null
@@ -1,20 +0,0 @@
-<Item id="contactField"
-    clip="true"
-    width="230"
-    height="30">
-    <RemoveButton2 id="removeButton"
-        anchors.right="{parent.right}"
-        anchors.top="{parent.top}" anchors.bottom="{parent.bottom}"
-        expandedWidth="{contactField.width}"
-        onConfirmed="print('Clear field text'); fieldText.text=''"/>
-    <Text id="fieldText"
-        width="{contactField.width-80}"
-        anchors.right="{removeButton.left}" anchors.rightMargin="10"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        font.bold="true"
-        color="black"
-        text="123123"/>
-    <Image src="../shared/pics/phone.png"
-        anchors.right="{fieldText.left}" anchors.rightMargin="10"
-        anchors.verticalCenter="{parent.verticalCenter}"/>
-</Item>
diff --git a/examples/declarative/tutorials/contacts/2_Reuse/ContactField3.qml b/examples/declarative/tutorials/contacts/2_Reuse/ContactField3.qml
deleted file mode 100644
index cef25ce..0000000
--- a/examples/declarative/tutorials/contacts/2_Reuse/ContactField3.qml
+++ /dev/null
@@ -1,36 +0,0 @@
-<Item id="contactField"
-    clip="true"
-    width="230"
-    height="30">
-    <properties>
-        <Property name="label" value="Name"/>
-        <Property name="icon" value="../shared/pics/phone.png"/>
-        <Property name="value"/>
-    </properties>
-    <RemoveButton3 id="removeButton"
-        anchors.right="{parent.right}"
-        anchors.top="{parent.top}" anchors.bottom="{parent.bottom}"
-        expandedWidth="{contactField.width}"
-        onConfirmed="print('Clear field text'); fieldText.text=''"/>
-    <FieldText3 id="fieldText"
-        width="{contactField.width-70}"
-        anchors.right="{removeButton.left}" anchors.rightMargin="5"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        label="{contactField.label}"
-        text="{contactField.value}"/>
-    <Image
-        anchors.right="{fieldText.left}" anchors.rightMargin="5"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        src="{contactField.icon}"/>
-    <states>
-        <State name="editingText" when="{fieldText.state == 'editing'}">
-            <SetProperty target="{removeButton.anchors}" property="rightMargin" value="-35"/>
-            <SetProperty target="{fieldText}" property="width" value="{contactField.width}"/>
-        </State>
-    </states>
-    <transitions>
-        <Transition fromState='' toState="*" reversible="true">
-            <NumericAnimation properties="width,rightMargin" duration="200"/>
-        </Transition>
-    </transitions>
-</Item>
diff --git a/examples/declarative/tutorials/contacts/2_Reuse/ContactField4.qml b/examples/declarative/tutorials/contacts/2_Reuse/ContactField4.qml
deleted file mode 100644
index 13ccbc0..0000000
--- a/examples/declarative/tutorials/contacts/2_Reuse/ContactField4.qml
+++ /dev/null
@@ -1,35 +0,0 @@
-<Item id="contactField"
-    clip="true"
-    height="30">
-    <properties>
-        <Property name="label"/>
-        <Property name="icon"/>
-        <Property name="value"/>
-    </properties>
-    <RemoveButton4 id="removeButton"
-        anchors.right="{parent.right}"
-        anchors.top="{parent.top}" anchors.bottom="{parent.bottom}"
-        expandedWidth="{contactField.width}"
-        onConfirmed="print('Clear field text'); fieldText.text=''"/>
-    <FieldText4 id="fieldText"
-        width="{contactField.width-70}"
-        anchors.right="{removeButton.left}" anchors.rightMargin="5"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        label="{contactField.label}"
-        text="{contactField.value}"/>
-    <Image
-        anchors.right="{fieldText.left}" anchors.rightMargin="5"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        src="{contactField.icon}"/>
-    <states>
-        <State name="editingText" when="{fieldText.state == 'editing'}">
-            <SetProperty target="{removeButton.anchors}" property="rightMargin" value="-35"/>
-            <SetProperty target="{fieldText}" property="width" value="{contactField.width}"/>
-        </State>
-    </states>
-    <transitions>
-        <Transition fromState='' toState="*" reversible="true">
-            <NumericAnimation properties="width,rightMargin" duration="200"/>
-        </Transition>
-    </transitions>
-</Item>
diff --git a/examples/declarative/tutorials/contacts/2_Reuse/FieldText3.qml b/examples/declarative/tutorials/contacts/2_Reuse/FieldText3.qml
deleted file mode 100644
index d09ad0b..0000000
--- a/examples/declarative/tutorials/contacts/2_Reuse/FieldText3.qml
+++ /dev/null
@@ -1,91 +0,0 @@
-<Rect id="fieldText"
-    height="30"
-    radius="5"
-    color="white">
-    <properties>
-        <Property
-            name="text"
-            value=""
-            onValueChanged="reset()"/>
-        <Property
-            name="label"
-            value=""/>
-    </properties>
-    <signals>
-        <Signal name="confirmed"/>
-    </signals>
-    <resources>
-        <Script>
-            function edit() {
-                fieldText.state='editing';
-            }
-            function confirm() {
-                fieldText.text = textEdit.text;
-                fieldText.state='';
-                fieldText.confirmed.emit();
-            }
-            function reset() {
-                textEdit.text = fieldText.text;
-                fieldText.state='';
-            }
-        </Script>
-    </resources>
-    <Image id="cancelIcon"
-        width="22" height="22"
-        anchors.right="{parent.right}" anchors.rightMargin="4"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        src="../shared/pics/cancel.png"
-        opacity="0"/>
-    <Image id="confirmIcon"
-        width="22" height="22"
-        anchors.left="{parent.left}" anchors.leftMargin="4"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        src="../shared/pics/ok.png"
-        opacity="0"/>
-    <TextEdit id="textEdit"
-        anchors.left="{parent.left}" anchors.leftMargin="5"
-        anchors.right="{parent.right}" anchors.rightMargin="5"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        color="black"
-        font.bold="true"
-        readOnly="true"
-        wrap="false"
-        />
-    <Text id="textLabel"
-        x="5" width="{parent.width-10}"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        hAlign="AlignHCenter"
-        color="#505050"
-        font.italic="true"
-        text="{fieldText.label}"
-        opacity="{textEdit.text == '' ? 1 : 0}">
-        <opacity>
-            <Behaviour>
-                <NumericAnimation property="opacity" duration="250"/>
-            </Behaviour>
-        </opacity>
-    </Text>
-    <MouseRegion anchors.fill="{cancelIcon}" onClicked="reset()"/>
-    <MouseRegion anchors.fill="{confirmIcon}" onClicked="confirm()"/>
-    <MouseRegion
-        id="editRegion"
-        anchors.fill="{textEdit}"
-        onClicked="edit()"/>
-    <states>
-        <State name="editing">
-            <SetProperty target="{confirmIcon}" property="opacity" value="1"/>
-            <SetProperty target="{cancelIcon}" property="opacity" value="1"/>
-            <SetProperty target="{textEdit}" property="readOnly" value="false"/>
-            <SetProperty target="{textEdit}" property="focus" value="true"/>
-            <SetProperty target="{editRegion}" property="opacity" value="0"/>
-            <SetProperty target="{textEdit.anchors}" property="leftMargin" value="39"/>
-            <SetProperty target="{textEdit.anchors}" property="rightMargin" value="39"/>
-        </State>
-    </states>
-    <transitions>
-        <Transition fromState='' toState="*" reversible="true">
-            <NumericAnimation properties="opacity,leftMargin,rightMargin" duration="200"/>
-            <ColorAnimation duration="150"/>
-        </Transition>
-    </transitions>
-</Rect>
diff --git a/examples/declarative/tutorials/contacts/2_Reuse/FieldText4.qml b/examples/declarative/tutorials/contacts/2_Reuse/FieldText4.qml
deleted file mode 100644
index 191da52..0000000
--- a/examples/declarative/tutorials/contacts/2_Reuse/FieldText4.qml
+++ /dev/null
@@ -1,96 +0,0 @@
-<Rect id="fieldText"
-    height="30"
-    radius="5"
-    color="white">
-    <properties>
-        <Property
-            name="text"
-            value=""
-            onValueChanged="reset()"/>
-        <Property
-            name="label"
-            value=""/>
-    </properties>
-    <signals>
-        <Signal name="confirmed"/>
-    </signals>
-    <resources>
-        <Script>
-            function edit() {
-                if (!contactDetails.mouseGrabbed) {
-                    fieldText.state='editing';
-                    contactDetails.mouseGrabbed=true;
-                }
-            }
-            function confirm() {
-                fieldText.text = textEdit.text;
-                fieldText.state='';
-                contactDetails.mouseGrabbed=false;
-                fieldText.confirmed.emit();
-            }
-            function reset() {
-                textEdit.text = fieldText.text;
-                fieldText.state='';
-                contactDetails.mouseGrabbed=false;
-            }
-        </Script>
-    </resources>
-    <Image id="cancelIcon"
-        width="22" height="22"
-        anchors.right="{parent.right}" anchors.rightMargin="4"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        src="../shared/pics/cancel.png"
-        opacity="0"/>
-    <Image id="confirmIcon"
-        width="22" height="22"
-        anchors.left="{parent.left}" anchors.leftMargin="4"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        src="../shared/pics/ok.png"
-        opacity="0"/>
-    <TextEdit id="textEdit"
-        anchors.left="{parent.left}" anchors.leftMargin="5"
-        anchors.right="{parent.right}" anchors.rightMargin="5"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        color="black"
-        font.bold="true"
-        readOnly="true"
-        wrap="false"
-        />
-    <Text id="textLabel"
-        x="5" width="{parent.width-10}"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        hAlign="AlignHCenter"
-        color="#505050"
-        font.italic="true"
-        text="{fieldText.label}"
-        opacity="{textEdit.text == '' ? 1 : 0}">
-        <opacity>
-            <Behaviour>
-                <NumericAnimation property="opacity" duration="250"/>
-            </Behaviour>
-        </opacity>
-    </Text>
-    <MouseRegion anchors.fill="{cancelIcon}" onClicked="reset()"/>
-    <MouseRegion anchors.fill="{confirmIcon}" onClicked="confirm()"/>
-    <MouseRegion
-        id="editRegion"
-        anchors.fill="{textEdit}"
-        onClicked="edit()"/>
-    <states>
-        <State name="editing">
-            <SetProperty target="{confirmIcon}" property="opacity" value="1"/>
-            <SetProperty target="{cancelIcon}" property="opacity" value="1"/>
-            <SetProperty target="{textEdit}" property="readOnly" value="false"/>
-            <SetProperty target="{textEdit}" property="focus" value="true"/>
-            <SetProperty target="{editRegion}" property="opacity" value="0"/>
-            <SetProperty target="{textEdit.anchors}" property="leftMargin" value="39"/>
-            <SetProperty target="{textEdit.anchors}" property="rightMargin" value="39"/>
-        </State>
-    </states>
-    <transitions>
-        <Transition fromState='' toState="*" reversible="true">
-            <NumericAnimation properties="opacity,leftMargin,rightMargin" duration="200"/>
-            <ColorAnimation duration="150"/>
-        </Transition>
-    </transitions>
-</Rect>
diff --git a/examples/declarative/tutorials/contacts/2_Reuse/GroupBox.qml b/examples/declarative/tutorials/contacts/2_Reuse/GroupBox.qml
index 01f26ee..77f7093 100644
--- a/examples/declarative/tutorials/contacts/2_Reuse/GroupBox.qml
+++ b/examples/declarative/tutorials/contacts/2_Reuse/GroupBox.qml
@@ -1,4 +1,4 @@
-<Item id="groupBox" width="{Math.max(270, subItem.width+40)}" height="{Math.max(70, subItem.height+40)}">
+<FocusRealm id="groupBox" width="{Math.max(270, subItem.width+40)}" height="{Math.max(70, subItem.height+40)}">
     <properties>
         <Property name="contents"/>
         <Property name="label"/>
@@ -14,4 +14,12 @@
     <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>
+    <Rect color="black" anchors.fill="{parent}" opacity="{parent.focus ? 0 : 0.3}">
+        <MouseRegion anchors.fill="{parent}" onClicked="parent.parent.focus=true"/>
+        <opacity>
+            <Behaviour>
+                <NumericAnimation property="opacity" duration="250"/>
+            </Behaviour>
+        </opacity>
+    </Rect>
+</FocusRealm>
diff --git a/examples/declarative/tutorials/contacts/2_Reuse/RemoveButton1.qml b/examples/declarative/tutorials/contacts/2_Reuse/RemoveButton1.qml
deleted file mode 100644
index 68c1838..0000000
--- a/examples/declarative/tutorials/contacts/2_Reuse/RemoveButton1.qml
+++ /dev/null
@@ -1,70 +0,0 @@
-<Rect id="removeButton"
-    width="30" height="30"
-    color="red"
-    radius="5">
-    <resources>
-        <Script>
-            function toggle() {
-                print('removeButton.toggle()');
-                if (removeButton.state == 'opened') {
-                    removeButton.state = '';
-                } else {
-                    removeButton.state = 'opened';
-                }
-            }
-        </Script>
-    </resources>
-    <Image id="trashIcon"
-        width="22" height="22"
-        anchors.right="{parent.right}" anchors.rightMargin="4"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        src="../shared/pics/trash.png"
-        opacity="1">
-        <MouseRegion
-            anchors.fill="{parent}"
-            onClicked="toggle()"/>
-    </Image>
-    <Image id="cancelIcon"
-        width="22" height="22"
-        anchors.right="{parent.right}" anchors.rightMargin="4"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        src="../shared/pics/cancel.png"
-        opacity="0">
-        <MouseRegion
-            anchors.fill="{parent}"
-            onClicked="toggle()"/>
-    </Image>
-    <Image id="confirmIcon"
-        width="22" height="22"
-        anchors.left="{parent.left}" anchors.leftMargin="4"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        src="../shared/pics/ok.png"
-        opacity="0">
-        <MouseRegion
-            anchors.fill="{parent}"
-            onClicked="toggle()"/>
-    </Image>
-    <Text id="text"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        anchors.left="{confirmIcon.right}" anchors.leftMargin="4"
-        anchors.right="{cancelIcon.left}" anchors.rightMargin="4"
-        font.bold="true"
-        color="white"
-        hAlign="AlignHCenter"
-        text="Remove"
-        opacity="0"/>
-    <states>
-        <State name="opened">
-            <SetProperty target="{removeButton}" property="width" value="230"/>
-            <SetProperty target="{text}" property="opacity" value="1"/>
-            <SetProperty target="{confirmIcon}" property="opacity" value="1"/>
-            <SetProperty target="{cancelIcon}" property="opacity" value="1"/>
-            <SetProperty target="{trashIcon}" property="opacity" value="0"/>
-        </State>
-    </states>
-    <transitions>
-        <Transition fromState="*" toState="opened" reversible="true">
-            <NumericAnimation properties="opacity,x,width" duration="200"/>
-        </Transition>
-    </transitions>
-</Rect>
diff --git a/examples/declarative/tutorials/contacts/2_Reuse/RemoveButton2.qml b/examples/declarative/tutorials/contacts/2_Reuse/RemoveButton2.qml
deleted file mode 100644
index d9ff4c5..0000000
--- a/examples/declarative/tutorials/contacts/2_Reuse/RemoveButton2.qml
+++ /dev/null
@@ -1,76 +0,0 @@
-<Rect id="removeButton"
-    width="30" height="30"
-    color="red"
-    radius="5">
-    <properties>
-        <Property name="expandedWidth" value="230"/>
-    </properties>
-    <signals>
-        <Signal name="confirmed"/>
-    </signals>
-    <resources>
-        <Script>
-            function toggle() {
-                print('removeButton.toggle()');
-                if (removeButton.state == 'opened') {
-                    removeButton.state = '';
-                } else {
-                    removeButton.state = 'opened';
-                }
-            }
-        </Script>
-    </resources>
-    <Image id="trashIcon"
-        width="22" height="22"
-        anchors.right="{parent.right}" anchors.rightMargin="4"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        src="../shared/pics/trash.png"
-        opacity="1">
-        <MouseRegion
-            anchors.fill="{parent}"
-            onClicked="toggle()"/>
-    </Image>
-    <Image id="cancelIcon"
-        width="22" height="22"
-        anchors.right="{parent.right}" anchors.rightMargin="4"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        src="../shared/pics/cancel.png"
-        opacity="0">
-        <MouseRegion
-            anchors.fill="{parent}"
-            onClicked="toggle()"/>
-    </Image>
-    <Image id="confirmIcon"
-        width="22" height="22"
-        anchors.left="{parent.left}" anchors.leftMargin="4"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        src="../shared/pics/ok.png"
-        opacity="0">
-        <MouseRegion
-            anchors.fill="{parent}"
-            onClicked="toggle(); removeButton.confirmed.emit()"/>
-    </Image>
-    <Text id="text"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        anchors.left="{confirmIcon.right}" anchors.leftMargin="4"
-        anchors.right="{cancelIcon.left}" anchors.rightMargin="4"
-        font.bold="true"
-        color="white"
-        hAlign="AlignHCenter"
-        text="Remove"
-        opacity="0"/>
-    <states>
-        <State name="opened">
-            <SetProperty target="{removeButton}" property="width" value="{removeButton.expandedWidth}"/>
-            <SetProperty target="{text}" property="opacity" value="1"/>
-            <SetProperty target="{confirmIcon}" property="opacity" value="1"/>
-            <SetProperty target="{cancelIcon}" property="opacity" value="1"/>
-            <SetProperty target="{trashIcon}" property="opacity" value="0"/>
-        </State>
-    </states>
-    <transitions>
-        <Transition fromState="*" toState="opened" reversible="true">
-            <NumericAnimation properties="opacity,x,width" duration="200"/>
-        </Transition>
-    </transitions>
-</Rect>
diff --git a/examples/declarative/tutorials/contacts/2_Reuse/RemoveButton3.qml b/examples/declarative/tutorials/contacts/2_Reuse/RemoveButton3.qml
deleted file mode 100644
index d9ff4c5..0000000
--- a/examples/declarative/tutorials/contacts/2_Reuse/RemoveButton3.qml
+++ /dev/null
@@ -1,76 +0,0 @@
-<Rect id="removeButton"
-    width="30" height="30"
-    color="red"
-    radius="5">
-    <properties>
-        <Property name="expandedWidth" value="230"/>
-    </properties>
-    <signals>
-        <Signal name="confirmed"/>
-    </signals>
-    <resources>
-        <Script>
-            function toggle() {
-                print('removeButton.toggle()');
-                if (removeButton.state == 'opened') {
-                    removeButton.state = '';
-                } else {
-                    removeButton.state = 'opened';
-                }
-            }
-        </Script>
-    </resources>
-    <Image id="trashIcon"
-        width="22" height="22"
-        anchors.right="{parent.right}" anchors.rightMargin="4"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        src="../shared/pics/trash.png"
-        opacity="1">
-        <MouseRegion
-            anchors.fill="{parent}"
-            onClicked="toggle()"/>
-    </Image>
-    <Image id="cancelIcon"
-        width="22" height="22"
-        anchors.right="{parent.right}" anchors.rightMargin="4"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        src="../shared/pics/cancel.png"
-        opacity="0">
-        <MouseRegion
-            anchors.fill="{parent}"
-            onClicked="toggle()"/>
-    </Image>
-    <Image id="confirmIcon"
-        width="22" height="22"
-        anchors.left="{parent.left}" anchors.leftMargin="4"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        src="../shared/pics/ok.png"
-        opacity="0">
-        <MouseRegion
-            anchors.fill="{parent}"
-            onClicked="toggle(); removeButton.confirmed.emit()"/>
-    </Image>
-    <Text id="text"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        anchors.left="{confirmIcon.right}" anchors.leftMargin="4"
-        anchors.right="{cancelIcon.left}" anchors.rightMargin="4"
-        font.bold="true"
-        color="white"
-        hAlign="AlignHCenter"
-        text="Remove"
-        opacity="0"/>
-    <states>
-        <State name="opened">
-            <SetProperty target="{removeButton}" property="width" value="{removeButton.expandedWidth}"/>
-            <SetProperty target="{text}" property="opacity" value="1"/>
-            <SetProperty target="{confirmIcon}" property="opacity" value="1"/>
-            <SetProperty target="{cancelIcon}" property="opacity" value="1"/>
-            <SetProperty target="{trashIcon}" property="opacity" value="0"/>
-        </State>
-    </states>
-    <transitions>
-        <Transition fromState="*" toState="opened" reversible="true">
-            <NumericAnimation properties="opacity,x,width" duration="200"/>
-        </Transition>
-    </transitions>
-</Rect>
diff --git a/examples/declarative/tutorials/contacts/2_Reuse/RemoveButton4.qml b/examples/declarative/tutorials/contacts/2_Reuse/RemoveButton4.qml
deleted file mode 100644
index 991d6a0..0000000
--- a/examples/declarative/tutorials/contacts/2_Reuse/RemoveButton4.qml
+++ /dev/null
@@ -1,80 +0,0 @@
-<Rect id="removeButton"
-    width="30" height="30"
-    color="red"
-    radius="5">
-    <properties>
-        <Property name="expandedWidth" value="230"/>
-    </properties>
-    <signals>
-        <Signal name="confirmed"/>
-    </signals>
-    <resources>
-        <Script>
-            function toggle() {
-                print('removeButton.toggle()');
-                if (removeButton.state == 'opened') {
-                    removeButton.state = '';
-                    contactDetails.mouseGrabbed=false;
-                } else {
-                    if (!contactDetails.mouseGrabbed) {
-                        removeButton.state = 'opened';
-                        contactDetails.mouseGrabbed=true;
-                    }
-                }
-            }
-        </Script>
-    </resources>
-    <Image id="trashIcon"
-        width="22" height="22"
-        anchors.right="{parent.right}" anchors.rightMargin="4"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        src="../shared/pics/trash.png"
-        opacity="1">
-        <MouseRegion
-            anchors.fill="{parent}"
-            onClicked="toggle()"/>
-    </Image>
-    <Image id="cancelIcon"
-        width="22" height="22"
-        anchors.right="{parent.right}" anchors.rightMargin="4"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        src="../shared/pics/cancel.png"
-        opacity="0">
-        <MouseRegion
-            anchors.fill="{parent}"
-            onClicked="toggle()"/>
-    </Image>
-    <Image id="confirmIcon"
-        width="22" height="22"
-        anchors.left="{parent.left}" anchors.leftMargin="4"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        src="../shared/pics/ok.png"
-        opacity="0">
-        <MouseRegion
-            anchors.fill="{parent}"
-            onClicked="toggle(); removeButton.confirmed.emit()"/>
-    </Image>
-    <Text id="text"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        anchors.left="{confirmIcon.right}" anchors.leftMargin="4"
-        anchors.right="{cancelIcon.left}" anchors.rightMargin="4"
-        font.bold="true"
-        color="white"
-        hAlign="AlignHCenter"
-        text="Remove"
-        opacity="0"/>
-    <states>
-        <State name="opened">
-            <SetProperty target="{removeButton}" property="width" value="{removeButton.expandedWidth}"/>
-            <SetProperty target="{text}" property="opacity" value="1"/>
-            <SetProperty target="{confirmIcon}" property="opacity" value="1"/>
-            <SetProperty target="{cancelIcon}" property="opacity" value="1"/>
-            <SetProperty target="{trashIcon}" property="opacity" value="0"/>
-        </State>
-    </states>
-    <transitions>
-        <Transition fromState="*" toState="opened" reversible="true">
-            <NumericAnimation properties="opacity,x,width" duration="200"/>
-        </Transition>
-    </transitions>
-</Rect>
diff --git a/examples/declarative/tutorials/contacts/3_Collections/1/Button.qml b/examples/declarative/tutorials/contacts/3_Collections/1/Button.qml
new file mode 100644
index 0000000..8290d35
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/3_Collections/1/Button.qml
@@ -0,0 +1,38 @@
+<Item id="button" width="30" height="30">
+    <properties>
+        <Property name="icon"/>
+    </properties>
+    <signals>
+        <Signal name="clicked"/>
+    </signals>
+    <Rect id="buttonRect"
+        anchors.fill="{parent}"
+        color="lightgreen"
+        radius="5">
+        <Image id="iconImage"
+            src="{button.icon}"
+            anchors.horizontalCenter="{buttonRect.horizontalCenter}"
+            anchors.verticalCenter="{buttonRect.verticalCenter}"/>
+        <MouseRegion id="buttonMouseRegion"
+            anchors.fill="{buttonRect}"
+            onClicked="button.clicked.emit()"/>
+        <states>
+            <State name="pressed" when="{buttonMouseRegion.pressed == true}">
+                <SetProperty target="{buttonRect}" property="color" value="green"/>
+            </State>
+        </states>
+        <transitions>
+            <Transition fromState="*" toState="pressed">
+                <ColorAnimation duration="200"/>
+            </Transition>
+            <Transition fromState="pressed" toState="*">
+                <ColorAnimation duration="1000"/>
+            </Transition>
+        </transitions>
+    </Rect>
+    <opacity>
+        <Behaviour>
+            <NumericAnimation property="opacity" duration="250"/>
+        </Behaviour>
+    </opacity>
+</Item>
diff --git a/examples/declarative/tutorials/contacts/3_Collections/1/Contact.qml b/examples/declarative/tutorials/contacts/3_Collections/1/Contact.qml
new file mode 100644
index 0000000..293b3a5
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/3_Collections/1/Contact.qml
@@ -0,0 +1,28 @@
+<Item id="contactDetails"
+    anchors.fill="{parent}">
+    <properties>
+        <Property name="contactid" value=""/>
+        <Property name="label" onValueChanged="labelField.value = label"/>
+        <Property name="phone" onValueChanged="phoneField.value = phone"/>
+        <Property name="email" onValueChanged="emailField.value = email"/>
+    </properties>
+    <VerticalLayout id="layout"
+        anchors.fill="{parent}"
+        spacing="5"
+        margin="5">
+        <ContactField id="labelField"
+            anchors.left="{layout.left}" anchors.leftMargin="5"
+            anchors.right="{layout.right}" anchors.rightMargin="5"
+            label="Name"/>
+        <ContactField id="phoneField"
+            anchors.left="{layout.left}" anchors.leftMargin="5"
+            anchors.right="{layout.right}" anchors.rightMargin="5"
+            icon="../../shared/pics/phone.png"
+            label="Phone"/>
+        <ContactField id="emailField"
+            anchors.left="{layout.left}" anchors.leftMargin="5"
+            anchors.right="{layout.right}" anchors.rightMargin="5"
+            icon="../../shared/pics/email.png"
+            label="Email"/>
+    </VerticalLayout>
+</Item>
diff --git a/examples/declarative/tutorials/contacts/3_Collections/1/ContactField.qml b/examples/declarative/tutorials/contacts/3_Collections/1/ContactField.qml
new file mode 100644
index 0000000..819914c
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/3_Collections/1/ContactField.qml
@@ -0,0 +1,35 @@
+<Item id="contactField"
+    clip="true"
+    height="30">
+    <properties>
+        <Property name="label"/>
+        <Property name="icon"/>
+        <Property name="value"/>
+    </properties>
+    <RemoveButton id="removeButton"
+        anchors.right="{parent.right}"
+        anchors.top="{parent.top}" anchors.bottom="{parent.bottom}"
+        expandedWidth="{contactField.width}"
+        onConfirmed="print('Clear field text'); fieldText.text=''"/>
+    <FieldText id="fieldText"
+        width="{contactField.width-70}"
+        anchors.right="{removeButton.left}" anchors.rightMargin="5"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        label="{contactField.label}"
+        text="{contactField.value}"/>
+    <Image
+        anchors.right="{fieldText.left}" anchors.rightMargin="5"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        src="{contactField.icon}"/>
+    <states>
+        <State name="editingText" when="{fieldText.state == 'editing'}">
+            <SetProperty target="{removeButton.anchors}" property="rightMargin" value="-35"/>
+            <SetProperty target="{fieldText}" property="width" value="{contactField.width}"/>
+        </State>
+    </states>
+    <transitions>
+        <Transition fromState='' toState="*" reversible="true">
+            <NumericAnimation properties="width,rightMargin" duration="200"/>
+        </Transition>
+    </transitions>
+</Item>
diff --git a/examples/declarative/tutorials/contacts/3_Collections/1/ContactView.qml b/examples/declarative/tutorials/contacts/3_Collections/1/ContactView.qml
new file mode 100644
index 0000000..d48aa02
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/3_Collections/1/ContactView.qml
@@ -0,0 +1,28 @@
+<Item id="contacts"
+    width="240"
+    height="230">
+    <properties>
+        <Property name="mouseGrabbed" value="false"/>
+    </properties>
+    <resources>
+        <SqlConnection id="contactDatabase" name="qmlConnection" driver="QSQLITE" databaseName="../../shared/contacts.sqlite"/>
+        <SqlQuery id="contactList" connection="{contactDatabase}">
+            <query>SELECT recid, label, email, phone FROM contacts ORDER BY label, recid</query>
+        </SqlQuery>
+        <Component id="contactDelegate">
+            <Text
+                x="45" y="12"
+                width="{contactListView.width-45}"
+                height="30"
+                color="black"
+                font.bold="true"
+                text="{model.label}"/>
+        </Component>
+    </resources>
+    <ListView id="contactListView"
+        anchors.fill="{parent}"
+        clip="true"
+        model="{contactList}"
+        delegate="{contactDelegate}"
+        focus="true"/>
+</Item>
diff --git a/examples/declarative/tutorials/contacts/3_Collections/1/FieldText.qml b/examples/declarative/tutorials/contacts/3_Collections/1/FieldText.qml
new file mode 100644
index 0000000..068590a
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/3_Collections/1/FieldText.qml
@@ -0,0 +1,96 @@
+<Rect id="fieldText"
+    height="30"
+    radius="5"
+    color="white">
+    <properties>
+        <Property
+            name="text"
+            value=""
+            onValueChanged="reset()"/>
+        <Property
+            name="label"
+            value=""/>
+    </properties>
+    <signals>
+        <Signal name="confirmed"/>
+    </signals>
+    <resources>
+        <Script>
+            function edit() {
+                if (!contacts.mouseGrabbed) {
+                    fieldText.state='editing';
+                    contacts.mouseGrabbed=true;
+                }
+            }
+            function confirm() {
+                fieldText.text = textEdit.text;
+                fieldText.state='';
+                contacts.mouseGrabbed=false;
+                fieldText.confirmed.emit();
+            }
+            function reset() {
+                textEdit.text = fieldText.text;
+                fieldText.state='';
+                contacts.mouseGrabbed=false;
+            }
+        </Script>
+    </resources>
+    <Image id="cancelIcon"
+        width="22" height="22"
+        anchors.right="{parent.right}" anchors.rightMargin="4"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        src="../../shared/pics/cancel.png"
+        opacity="0"/>
+    <Image id="confirmIcon"
+        width="22" height="22"
+        anchors.left="{parent.left}" anchors.leftMargin="4"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        src="../../shared/pics/ok.png"
+        opacity="0"/>
+    <TextEdit id="textEdit"
+        anchors.left="{parent.left}" anchors.leftMargin="5"
+        anchors.right="{parent.right}" anchors.rightMargin="5"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        color="black"
+        font.bold="true"
+        readOnly="true"
+        wrap="false"
+        />
+    <Text id="textLabel"
+        x="5" width="{parent.width-10}"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        hAlign="AlignHCenter"
+        color="#505050"
+        font.italic="true"
+        text="{fieldText.label}"
+        opacity="{textEdit.text == '' ? 1 : 0}">
+        <opacity>
+            <Behaviour>
+                <NumericAnimation property="opacity" duration="250"/>
+            </Behaviour>
+        </opacity>
+    </Text>
+    <MouseRegion anchors.fill="{cancelIcon}" onClicked="reset()"/>
+    <MouseRegion anchors.fill="{confirmIcon}" onClicked="confirm()"/>
+    <MouseRegion
+        id="editRegion"
+        anchors.fill="{textEdit}"
+        onClicked="edit()"/>
+    <states>
+        <State name="editing">
+            <SetProperty target="{confirmIcon}" property="opacity" value="1"/>
+            <SetProperty target="{cancelIcon}" property="opacity" value="1"/>
+            <SetProperty target="{textEdit}" property="readOnly" value="false"/>
+            <SetProperty target="{textEdit}" property="focus" value="true"/>
+            <SetProperty target="{editRegion}" property="opacity" value="0"/>
+            <SetProperty target="{textEdit.anchors}" property="leftMargin" value="39"/>
+            <SetProperty target="{textEdit.anchors}" property="rightMargin" value="39"/>
+        </State>
+    </states>
+    <transitions>
+        <Transition fromState='' toState="*" reversible="true">
+            <NumericAnimation properties="opacity,leftMargin,rightMargin" duration="200"/>
+            <ColorAnimation duration="150"/>
+        </Transition>
+    </transitions>
+</Rect>
diff --git a/examples/declarative/tutorials/contacts/3_Collections/1/RemoveButton.qml b/examples/declarative/tutorials/contacts/3_Collections/1/RemoveButton.qml
new file mode 100644
index 0000000..ad488c1
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/3_Collections/1/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/3_Collections/2/Button.qml b/examples/declarative/tutorials/contacts/3_Collections/2/Button.qml
new file mode 100644
index 0000000..8290d35
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/3_Collections/2/Button.qml
@@ -0,0 +1,38 @@
+<Item id="button" width="30" height="30">
+    <properties>
+        <Property name="icon"/>
+    </properties>
+    <signals>
+        <Signal name="clicked"/>
+    </signals>
+    <Rect id="buttonRect"
+        anchors.fill="{parent}"
+        color="lightgreen"
+        radius="5">
+        <Image id="iconImage"
+            src="{button.icon}"
+            anchors.horizontalCenter="{buttonRect.horizontalCenter}"
+            anchors.verticalCenter="{buttonRect.verticalCenter}"/>
+        <MouseRegion id="buttonMouseRegion"
+            anchors.fill="{buttonRect}"
+            onClicked="button.clicked.emit()"/>
+        <states>
+            <State name="pressed" when="{buttonMouseRegion.pressed == true}">
+                <SetProperty target="{buttonRect}" property="color" value="green"/>
+            </State>
+        </states>
+        <transitions>
+            <Transition fromState="*" toState="pressed">
+                <ColorAnimation duration="200"/>
+            </Transition>
+            <Transition fromState="pressed" toState="*">
+                <ColorAnimation duration="1000"/>
+            </Transition>
+        </transitions>
+    </Rect>
+    <opacity>
+        <Behaviour>
+            <NumericAnimation property="opacity" duration="250"/>
+        </Behaviour>
+    </opacity>
+</Item>
diff --git a/examples/declarative/tutorials/contacts/3_Collections/2/Contact.qml b/examples/declarative/tutorials/contacts/3_Collections/2/Contact.qml
new file mode 100644
index 0000000..293b3a5
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/3_Collections/2/Contact.qml
@@ -0,0 +1,28 @@
+<Item id="contactDetails"
+    anchors.fill="{parent}">
+    <properties>
+        <Property name="contactid" value=""/>
+        <Property name="label" onValueChanged="labelField.value = label"/>
+        <Property name="phone" onValueChanged="phoneField.value = phone"/>
+        <Property name="email" onValueChanged="emailField.value = email"/>
+    </properties>
+    <VerticalLayout id="layout"
+        anchors.fill="{parent}"
+        spacing="5"
+        margin="5">
+        <ContactField id="labelField"
+            anchors.left="{layout.left}" anchors.leftMargin="5"
+            anchors.right="{layout.right}" anchors.rightMargin="5"
+            label="Name"/>
+        <ContactField id="phoneField"
+            anchors.left="{layout.left}" anchors.leftMargin="5"
+            anchors.right="{layout.right}" anchors.rightMargin="5"
+            icon="../../shared/pics/phone.png"
+            label="Phone"/>
+        <ContactField id="emailField"
+            anchors.left="{layout.left}" anchors.leftMargin="5"
+            anchors.right="{layout.right}" anchors.rightMargin="5"
+            icon="../../shared/pics/email.png"
+            label="Email"/>
+    </VerticalLayout>
+</Item>
diff --git a/examples/declarative/tutorials/contacts/3_Collections/2/ContactField.qml b/examples/declarative/tutorials/contacts/3_Collections/2/ContactField.qml
new file mode 100644
index 0000000..819914c
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/3_Collections/2/ContactField.qml
@@ -0,0 +1,35 @@
+<Item id="contactField"
+    clip="true"
+    height="30">
+    <properties>
+        <Property name="label"/>
+        <Property name="icon"/>
+        <Property name="value"/>
+    </properties>
+    <RemoveButton id="removeButton"
+        anchors.right="{parent.right}"
+        anchors.top="{parent.top}" anchors.bottom="{parent.bottom}"
+        expandedWidth="{contactField.width}"
+        onConfirmed="print('Clear field text'); fieldText.text=''"/>
+    <FieldText id="fieldText"
+        width="{contactField.width-70}"
+        anchors.right="{removeButton.left}" anchors.rightMargin="5"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        label="{contactField.label}"
+        text="{contactField.value}"/>
+    <Image
+        anchors.right="{fieldText.left}" anchors.rightMargin="5"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        src="{contactField.icon}"/>
+    <states>
+        <State name="editingText" when="{fieldText.state == 'editing'}">
+            <SetProperty target="{removeButton.anchors}" property="rightMargin" value="-35"/>
+            <SetProperty target="{fieldText}" property="width" value="{contactField.width}"/>
+        </State>
+    </states>
+    <transitions>
+        <Transition fromState='' toState="*" reversible="true">
+            <NumericAnimation properties="width,rightMargin" duration="200"/>
+        </Transition>
+    </transitions>
+</Item>
diff --git a/examples/declarative/tutorials/contacts/3_Collections/2/ContactView.qml b/examples/declarative/tutorials/contacts/3_Collections/2/ContactView.qml
new file mode 100644
index 0000000..c72d9ce
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/3_Collections/2/ContactView.qml
@@ -0,0 +1,69 @@
+<Item id="contacts"
+    width="240"
+    height="230">
+    <properties>
+        <Property name="mouseGrabbed" value="false"/>
+    </properties>
+    <resources>
+        <SqlConnection id="contactDatabase" name="qmlConnection" driver="QSQLITE" databaseName="../../shared/contacts.sqlite"/>
+        <SqlQuery id="contactList" connection="{contactDatabase}">
+            <query>SELECT recid AS contactid, label, email, phone FROM contacts ORDER BY label, recid</query>
+        </SqlQuery>
+        <Component id="contactDelegate">
+            <Item id="wrapper"
+                x="0"
+                width="{ListView.view.width}" height="34">
+                <Text id="label"
+                    x="45" y="12"
+                    width="{parent.width-45}" 
+                    text="{model.label}"
+                    color="black"
+                    font.bold="true">
+                </Text>
+                <MouseRegion
+                    anchors.fill="{label}"
+                    onClicked="wrapper.state='opened'"/>
+                <Contact id="details"
+                    anchors.fill="{parent}"
+                    contactid="{model.contactid}"
+                    label="{model.label}"
+                    email="{model.email}"
+                    phone="{model.phone}"
+                    opacity="0"/>
+                <states>
+                    <State name='opened'>
+                        <SetProperty target="{wrapper}" property="height" value="{contactListView.height}"/>
+                        <SetProperty target="{contactListView}" property="yPosition" value="{wrapper.y}"/>
+                        <SetProperty target="{contactListView}" property="locked" value="1"/>
+                        <SetProperty target="{label}" property="opacity" value="0"/>
+                        <SetProperty target="{details}" property="opacity" value="1"/>
+                    </State>
+                </states>
+                <transitions>
+                    <Transition>
+                        <NumericAnimation duration="500" properties="yPosition,height,opacity"/>
+                    </Transition>
+                </transitions>
+                <Connection sender="{cancelEditButton}" signal="clicked()">
+                    if (wrapper.state == 'opened') {
+                        wrapper.state = '';
+                    }
+                </Connection>
+            </Item>
+        </Component>
+    </resources>
+    <Button id="cancelEditButton"
+        anchors.top="{parent.top}" anchors.topMargin="5"
+        anchors.right="{parent.right}" anchors.rightMargin="5"
+        icon="../../shared/pics/cancel.png"
+        opacity="{mouseGrabbed ? 0 : 1}"/>
+    <ListView id="contactListView"
+        anchors.left="{parent.left}"
+        anchors.right="{parent.right}"
+        anchors.top="{cancelEditButton.bottom}"
+        anchors.bottom="{parent.bottom}"
+        clip="true"
+        model="{contactList}"
+        delegate="{contactDelegate}"
+        focus="true"/>
+</Item>
diff --git a/examples/declarative/tutorials/contacts/3_Collections/2/FieldText.qml b/examples/declarative/tutorials/contacts/3_Collections/2/FieldText.qml
new file mode 100644
index 0000000..068590a
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/3_Collections/2/FieldText.qml
@@ -0,0 +1,96 @@
+<Rect id="fieldText"
+    height="30"
+    radius="5"
+    color="white">
+    <properties>
+        <Property
+            name="text"
+            value=""
+            onValueChanged="reset()"/>
+        <Property
+            name="label"
+            value=""/>
+    </properties>
+    <signals>
+        <Signal name="confirmed"/>
+    </signals>
+    <resources>
+        <Script>
+            function edit() {
+                if (!contacts.mouseGrabbed) {
+                    fieldText.state='editing';
+                    contacts.mouseGrabbed=true;
+                }
+            }
+            function confirm() {
+                fieldText.text = textEdit.text;
+                fieldText.state='';
+                contacts.mouseGrabbed=false;
+                fieldText.confirmed.emit();
+            }
+            function reset() {
+                textEdit.text = fieldText.text;
+                fieldText.state='';
+                contacts.mouseGrabbed=false;
+            }
+        </Script>
+    </resources>
+    <Image id="cancelIcon"
+        width="22" height="22"
+        anchors.right="{parent.right}" anchors.rightMargin="4"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        src="../../shared/pics/cancel.png"
+        opacity="0"/>
+    <Image id="confirmIcon"
+        width="22" height="22"
+        anchors.left="{parent.left}" anchors.leftMargin="4"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        src="../../shared/pics/ok.png"
+        opacity="0"/>
+    <TextEdit id="textEdit"
+        anchors.left="{parent.left}" anchors.leftMargin="5"
+        anchors.right="{parent.right}" anchors.rightMargin="5"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        color="black"
+        font.bold="true"
+        readOnly="true"
+        wrap="false"
+        />
+    <Text id="textLabel"
+        x="5" width="{parent.width-10}"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        hAlign="AlignHCenter"
+        color="#505050"
+        font.italic="true"
+        text="{fieldText.label}"
+        opacity="{textEdit.text == '' ? 1 : 0}">
+        <opacity>
+            <Behaviour>
+                <NumericAnimation property="opacity" duration="250"/>
+            </Behaviour>
+        </opacity>
+    </Text>
+    <MouseRegion anchors.fill="{cancelIcon}" onClicked="reset()"/>
+    <MouseRegion anchors.fill="{confirmIcon}" onClicked="confirm()"/>
+    <MouseRegion
+        id="editRegion"
+        anchors.fill="{textEdit}"
+        onClicked="edit()"/>
+    <states>
+        <State name="editing">
+            <SetProperty target="{confirmIcon}" property="opacity" value="1"/>
+            <SetProperty target="{cancelIcon}" property="opacity" value="1"/>
+            <SetProperty target="{textEdit}" property="readOnly" value="false"/>
+            <SetProperty target="{textEdit}" property="focus" value="true"/>
+            <SetProperty target="{editRegion}" property="opacity" value="0"/>
+            <SetProperty target="{textEdit.anchors}" property="leftMargin" value="39"/>
+            <SetProperty target="{textEdit.anchors}" property="rightMargin" value="39"/>
+        </State>
+    </states>
+    <transitions>
+        <Transition fromState='' toState="*" reversible="true">
+            <NumericAnimation properties="opacity,leftMargin,rightMargin" duration="200"/>
+            <ColorAnimation duration="150"/>
+        </Transition>
+    </transitions>
+</Rect>
diff --git a/examples/declarative/tutorials/contacts/3_Collections/2/RemoveButton.qml b/examples/declarative/tutorials/contacts/3_Collections/2/RemoveButton.qml
new file mode 100644
index 0000000..ad488c1
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/3_Collections/2/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/3_Collections/3/Button.qml b/examples/declarative/tutorials/contacts/3_Collections/3/Button.qml
new file mode 100644
index 0000000..8290d35
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/3_Collections/3/Button.qml
@@ -0,0 +1,38 @@
+<Item id="button" width="30" height="30">
+    <properties>
+        <Property name="icon"/>
+    </properties>
+    <signals>
+        <Signal name="clicked"/>
+    </signals>
+    <Rect id="buttonRect"
+        anchors.fill="{parent}"
+        color="lightgreen"
+        radius="5">
+        <Image id="iconImage"
+            src="{button.icon}"
+            anchors.horizontalCenter="{buttonRect.horizontalCenter}"
+            anchors.verticalCenter="{buttonRect.verticalCenter}"/>
+        <MouseRegion id="buttonMouseRegion"
+            anchors.fill="{buttonRect}"
+            onClicked="button.clicked.emit()"/>
+        <states>
+            <State name="pressed" when="{buttonMouseRegion.pressed == true}">
+                <SetProperty target="{buttonRect}" property="color" value="green"/>
+            </State>
+        </states>
+        <transitions>
+            <Transition fromState="*" toState="pressed">
+                <ColorAnimation duration="200"/>
+            </Transition>
+            <Transition fromState="pressed" toState="*">
+                <ColorAnimation duration="1000"/>
+            </Transition>
+        </transitions>
+    </Rect>
+    <opacity>
+        <Behaviour>
+            <NumericAnimation property="opacity" duration="250"/>
+        </Behaviour>
+    </opacity>
+</Item>
diff --git a/examples/declarative/tutorials/contacts/3_Collections/3/Contact.qml b/examples/declarative/tutorials/contacts/3_Collections/3/Contact.qml
new file mode 100644
index 0000000..293b3a5
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/3_Collections/3/Contact.qml
@@ -0,0 +1,28 @@
+<Item id="contactDetails"
+    anchors.fill="{parent}">
+    <properties>
+        <Property name="contactid" value=""/>
+        <Property name="label" onValueChanged="labelField.value = label"/>
+        <Property name="phone" onValueChanged="phoneField.value = phone"/>
+        <Property name="email" onValueChanged="emailField.value = email"/>
+    </properties>
+    <VerticalLayout id="layout"
+        anchors.fill="{parent}"
+        spacing="5"
+        margin="5">
+        <ContactField id="labelField"
+            anchors.left="{layout.left}" anchors.leftMargin="5"
+            anchors.right="{layout.right}" anchors.rightMargin="5"
+            label="Name"/>
+        <ContactField id="phoneField"
+            anchors.left="{layout.left}" anchors.leftMargin="5"
+            anchors.right="{layout.right}" anchors.rightMargin="5"
+            icon="../../shared/pics/phone.png"
+            label="Phone"/>
+        <ContactField id="emailField"
+            anchors.left="{layout.left}" anchors.leftMargin="5"
+            anchors.right="{layout.right}" anchors.rightMargin="5"
+            icon="../../shared/pics/email.png"
+            label="Email"/>
+    </VerticalLayout>
+</Item>
diff --git a/examples/declarative/tutorials/contacts/3_Collections/3/ContactField.qml b/examples/declarative/tutorials/contacts/3_Collections/3/ContactField.qml
new file mode 100644
index 0000000..819914c
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/3_Collections/3/ContactField.qml
@@ -0,0 +1,35 @@
+<Item id="contactField"
+    clip="true"
+    height="30">
+    <properties>
+        <Property name="label"/>
+        <Property name="icon"/>
+        <Property name="value"/>
+    </properties>
+    <RemoveButton id="removeButton"
+        anchors.right="{parent.right}"
+        anchors.top="{parent.top}" anchors.bottom="{parent.bottom}"
+        expandedWidth="{contactField.width}"
+        onConfirmed="print('Clear field text'); fieldText.text=''"/>
+    <FieldText id="fieldText"
+        width="{contactField.width-70}"
+        anchors.right="{removeButton.left}" anchors.rightMargin="5"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        label="{contactField.label}"
+        text="{contactField.value}"/>
+    <Image
+        anchors.right="{fieldText.left}" anchors.rightMargin="5"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        src="{contactField.icon}"/>
+    <states>
+        <State name="editingText" when="{fieldText.state == 'editing'}">
+            <SetProperty target="{removeButton.anchors}" property="rightMargin" value="-35"/>
+            <SetProperty target="{fieldText}" property="width" value="{contactField.width}"/>
+        </State>
+    </states>
+    <transitions>
+        <Transition fromState='' toState="*" reversible="true">
+            <NumericAnimation properties="width,rightMargin" duration="200"/>
+        </Transition>
+    </transitions>
+</Item>
diff --git a/examples/declarative/tutorials/contacts/3_Collections/3/ContactView.qml b/examples/declarative/tutorials/contacts/3_Collections/3/ContactView.qml
new file mode 100644
index 0000000..ec9ff57
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/3_Collections/3/ContactView.qml
@@ -0,0 +1,74 @@
+<Item id="contacts"
+    width="240"
+    height="230">
+    <properties>
+        <Property name="mouseGrabbed" value="false"/>
+    </properties>
+    <resources>
+        <SqlConnection id="contactDatabase" name="qmlConnection" driver="QSQLITE" databaseName="../../shared/contacts.sqlite"/>
+        <SqlQuery id="contactList" connection="{contactDatabase}">
+            <query>SELECT recid AS contactid, label, email, phone FROM contacts ORDER BY label, recid</query>
+        </SqlQuery>
+        <Component id="contactDelegate">
+            <Item id="wrapper"
+                x="0"
+                width="{ListView.view.width}" height="34">
+                <Text id="label"
+                    x="45" y="12"
+                    width="{parent.width-45}" 
+                    text="{model.label}"
+                    color="black"
+                    font.bold="true">
+                </Text>
+                <MouseRegion
+                    anchors.fill="{label}">
+                    <onClicked>
+                        Details.qml = 'Contact.qml';
+                        wrapper.state='opened';
+                    </onClicked>
+                </MouseRegion>
+                <Item id="Details"
+                    anchors.fill="{wrapper}"
+                    opacity="0">
+                    <Bind target="{Details.qmlItem}" property="contactid" value="{model.contactid}"/>
+                    <Bind target="{Details.qmlItem}" property="label" value="{model.label}"/>
+                    <Bind target="{Details.qmlItem}" property="phone" value="{model.phone}"/>
+                    <Bind target="{Details.qmlItem}" property="email" value="{model.email}"/>
+                </Item>
+                <states>
+                    <State name='opened'>
+                        <SetProperty target="{wrapper}" property="height" value="{contactListView.height}"/>
+                        <SetProperty target="{contactListView}" property="yPosition" value="{wrapper.y}"/>
+                        <SetProperty target="{contactListView}" property="locked" value="1"/>
+                        <SetProperty target="{label}" property="opacity" value="0"/>
+                        <SetProperty target="{Details}" property="opacity" value="1"/>
+                    </State>
+                </states>
+                <transitions>
+                    <Transition>
+                        <NumericAnimation duration="500" properties="yPosition,height,opacity"/>
+                    </Transition>
+                </transitions>
+                <Connection sender="{cancelEditButton}" signal="clicked()">
+                    if (wrapper.state == 'opened') {
+                        wrapper.state = '';
+                    }
+                </Connection>
+            </Item>
+        </Component>
+    </resources>
+    <Button id="cancelEditButton"
+        anchors.top="{parent.top}" anchors.topMargin="5"
+        anchors.right="{parent.right}" anchors.rightMargin="5"
+        icon="../../shared/pics/cancel.png"
+        opacity="{mouseGrabbed ? 0 : 1}"/>
+    <ListView id="contactListView"
+        anchors.left="{parent.left}"
+        anchors.right="{parent.right}"
+        anchors.top="{cancelEditButton.bottom}"
+        anchors.bottom="{parent.bottom}"
+        clip="true"
+        model="{contactList}"
+        delegate="{contactDelegate}"
+        focus="true"/>
+</Item>
diff --git a/examples/declarative/tutorials/contacts/3_Collections/3/FieldText.qml b/examples/declarative/tutorials/contacts/3_Collections/3/FieldText.qml
new file mode 100644
index 0000000..068590a
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/3_Collections/3/FieldText.qml
@@ -0,0 +1,96 @@
+<Rect id="fieldText"
+    height="30"
+    radius="5"
+    color="white">
+    <properties>
+        <Property
+            name="text"
+            value=""
+            onValueChanged="reset()"/>
+        <Property
+            name="label"
+            value=""/>
+    </properties>
+    <signals>
+        <Signal name="confirmed"/>
+    </signals>
+    <resources>
+        <Script>
+            function edit() {
+                if (!contacts.mouseGrabbed) {
+                    fieldText.state='editing';
+                    contacts.mouseGrabbed=true;
+                }
+            }
+            function confirm() {
+                fieldText.text = textEdit.text;
+                fieldText.state='';
+                contacts.mouseGrabbed=false;
+                fieldText.confirmed.emit();
+            }
+            function reset() {
+                textEdit.text = fieldText.text;
+                fieldText.state='';
+                contacts.mouseGrabbed=false;
+            }
+        </Script>
+    </resources>
+    <Image id="cancelIcon"
+        width="22" height="22"
+        anchors.right="{parent.right}" anchors.rightMargin="4"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        src="../../shared/pics/cancel.png"
+        opacity="0"/>
+    <Image id="confirmIcon"
+        width="22" height="22"
+        anchors.left="{parent.left}" anchors.leftMargin="4"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        src="../../shared/pics/ok.png"
+        opacity="0"/>
+    <TextEdit id="textEdit"
+        anchors.left="{parent.left}" anchors.leftMargin="5"
+        anchors.right="{parent.right}" anchors.rightMargin="5"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        color="black"
+        font.bold="true"
+        readOnly="true"
+        wrap="false"
+        />
+    <Text id="textLabel"
+        x="5" width="{parent.width-10}"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        hAlign="AlignHCenter"
+        color="#505050"
+        font.italic="true"
+        text="{fieldText.label}"
+        opacity="{textEdit.text == '' ? 1 : 0}">
+        <opacity>
+            <Behaviour>
+                <NumericAnimation property="opacity" duration="250"/>
+            </Behaviour>
+        </opacity>
+    </Text>
+    <MouseRegion anchors.fill="{cancelIcon}" onClicked="reset()"/>
+    <MouseRegion anchors.fill="{confirmIcon}" onClicked="confirm()"/>
+    <MouseRegion
+        id="editRegion"
+        anchors.fill="{textEdit}"
+        onClicked="edit()"/>
+    <states>
+        <State name="editing">
+            <SetProperty target="{confirmIcon}" property="opacity" value="1"/>
+            <SetProperty target="{cancelIcon}" property="opacity" value="1"/>
+            <SetProperty target="{textEdit}" property="readOnly" value="false"/>
+            <SetProperty target="{textEdit}" property="focus" value="true"/>
+            <SetProperty target="{editRegion}" property="opacity" value="0"/>
+            <SetProperty target="{textEdit.anchors}" property="leftMargin" value="39"/>
+            <SetProperty target="{textEdit.anchors}" property="rightMargin" value="39"/>
+        </State>
+    </states>
+    <transitions>
+        <Transition fromState='' toState="*" reversible="true">
+            <NumericAnimation properties="opacity,leftMargin,rightMargin" duration="200"/>
+            <ColorAnimation duration="150"/>
+        </Transition>
+    </transitions>
+</Rect>
diff --git a/examples/declarative/tutorials/contacts/3_Collections/3/RemoveButton.qml b/examples/declarative/tutorials/contacts/3_Collections/3/RemoveButton.qml
new file mode 100644
index 0000000..ad488c1
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/3_Collections/3/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/3_Collections/3_Collections.qml b/examples/declarative/tutorials/contacts/3_Collections/3_Collections.qml
index e1df10c..dcbbe57 100644
--- a/examples/declarative/tutorials/contacts/3_Collections/3_Collections.qml
+++ b/examples/declarative/tutorials/contacts/3_Collections/3_Collections.qml
@@ -1,37 +1,12 @@
 <Rect id="page" width="{layout.width}" height="{layout.height}" color='white'>
+    <Bind id="currentItem" value="true"/>
+<!--
+    relies on the current focus behavior whereby setting focus=true on a
+    component removes focus from any previous element
+-->
     <GridLayout id="layout" width="{contents.width}" height="{contents.height}">
-        <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'"/>
-                <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'"/>
-                <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'"/>
-                <opacity>
-                    <Behaviour>
-                        <NumericAnimation property="opacity" duration="250"/>
-                    </Behaviour>
-                </opacity>
-            </Rect>
-        </FocusRealm>
+        <GroupBox contents="1/ContactView.qml" label="something"/>
+        <GroupBox contents="2/ContactView.qml" label="something"/>
+        <GroupBox contents="3/ContactView.qml" label="something"/>
     </GridLayout>
 </Rect>
diff --git a/examples/declarative/tutorials/contacts/3_Collections/Button.qml b/examples/declarative/tutorials/contacts/3_Collections/Button.qml
deleted file mode 100644
index 8290d35..0000000
--- a/examples/declarative/tutorials/contacts/3_Collections/Button.qml
+++ /dev/null
@@ -1,38 +0,0 @@
-<Item id="button" width="30" height="30">
-    <properties>
-        <Property name="icon"/>
-    </properties>
-    <signals>
-        <Signal name="clicked"/>
-    </signals>
-    <Rect id="buttonRect"
-        anchors.fill="{parent}"
-        color="lightgreen"
-        radius="5">
-        <Image id="iconImage"
-            src="{button.icon}"
-            anchors.horizontalCenter="{buttonRect.horizontalCenter}"
-            anchors.verticalCenter="{buttonRect.verticalCenter}"/>
-        <MouseRegion id="buttonMouseRegion"
-            anchors.fill="{buttonRect}"
-            onClicked="button.clicked.emit()"/>
-        <states>
-            <State name="pressed" when="{buttonMouseRegion.pressed == true}">
-                <SetProperty target="{buttonRect}" property="color" value="green"/>
-            </State>
-        </states>
-        <transitions>
-            <Transition fromState="*" toState="pressed">
-                <ColorAnimation duration="200"/>
-            </Transition>
-            <Transition fromState="pressed" toState="*">
-                <ColorAnimation duration="1000"/>
-            </Transition>
-        </transitions>
-    </Rect>
-    <opacity>
-        <Behaviour>
-            <NumericAnimation property="opacity" duration="250"/>
-        </Behaviour>
-    </opacity>
-</Item>
diff --git a/examples/declarative/tutorials/contacts/3_Collections/Contact.qml b/examples/declarative/tutorials/contacts/3_Collections/Contact.qml
deleted file mode 100644
index f620c25..0000000
--- a/examples/declarative/tutorials/contacts/3_Collections/Contact.qml
+++ /dev/null
@@ -1,28 +0,0 @@
-<Item id="contactDetails"
-    anchors.fill="{parent}">
-    <properties>
-        <Property name="contactid" value=""/>
-        <Property name="label" onValueChanged="labelField.value = label"/>
-        <Property name="phone" onValueChanged="phoneField.value = phone"/>
-        <Property name="email" onValueChanged="emailField.value = email"/>
-    </properties>
-    <VerticalLayout id="layout"
-        anchors.fill="{parent}"
-        spacing="5"
-        margin="5">
-        <ContactField id="labelField"
-            anchors.left="{layout.left}" anchors.leftMargin="5"
-            anchors.right="{layout.right}" anchors.rightMargin="5"
-            label="Name"/>
-        <ContactField id="phoneField"
-            anchors.left="{layout.left}" anchors.leftMargin="5"
-            anchors.right="{layout.right}" anchors.rightMargin="5"
-            icon="../shared/pics/phone.png"
-            label="Phone"/>
-        <ContactField id="emailField"
-            anchors.left="{layout.left}" anchors.leftMargin="5"
-            anchors.right="{layout.right}" anchors.rightMargin="5"
-            icon="../shared/pics/email.png"
-            label="Email"/>
-    </VerticalLayout>
-</Item>
diff --git a/examples/declarative/tutorials/contacts/3_Collections/ContactField.qml b/examples/declarative/tutorials/contacts/3_Collections/ContactField.qml
deleted file mode 100644
index 819914c..0000000
--- a/examples/declarative/tutorials/contacts/3_Collections/ContactField.qml
+++ /dev/null
@@ -1,35 +0,0 @@
-<Item id="contactField"
-    clip="true"
-    height="30">
-    <properties>
-        <Property name="label"/>
-        <Property name="icon"/>
-        <Property name="value"/>
-    </properties>
-    <RemoveButton id="removeButton"
-        anchors.right="{parent.right}"
-        anchors.top="{parent.top}" anchors.bottom="{parent.bottom}"
-        expandedWidth="{contactField.width}"
-        onConfirmed="print('Clear field text'); fieldText.text=''"/>
-    <FieldText id="fieldText"
-        width="{contactField.width-70}"
-        anchors.right="{removeButton.left}" anchors.rightMargin="5"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        label="{contactField.label}"
-        text="{contactField.value}"/>
-    <Image
-        anchors.right="{fieldText.left}" anchors.rightMargin="5"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        src="{contactField.icon}"/>
-    <states>
-        <State name="editingText" when="{fieldText.state == 'editing'}">
-            <SetProperty target="{removeButton.anchors}" property="rightMargin" value="-35"/>
-            <SetProperty target="{fieldText}" property="width" value="{contactField.width}"/>
-        </State>
-    </states>
-    <transitions>
-        <Transition fromState='' toState="*" reversible="true">
-            <NumericAnimation properties="width,rightMargin" duration="200"/>
-        </Transition>
-    </transitions>
-</Item>
diff --git a/examples/declarative/tutorials/contacts/3_Collections/ContactView1.qml b/examples/declarative/tutorials/contacts/3_Collections/ContactView1.qml
deleted file mode 100644
index 6606094..0000000
--- a/examples/declarative/tutorials/contacts/3_Collections/ContactView1.qml
+++ /dev/null
@@ -1,28 +0,0 @@
-<Item id="contacts"
-    width="240"
-    height="230">
-    <properties>
-        <Property name="mouseGrabbed" value="false"/>
-    </properties>
-    <resources>
-        <SqlConnection id="contactDatabase" name="qmlConnection" driver="QSQLITE" databaseName="../shared/contacts.sqlite"/>
-        <SqlQuery id="contactList" connection="{contactDatabase}">
-            <query>SELECT recid, label, email, phone FROM contacts ORDER BY label, recid</query>
-        </SqlQuery>
-        <Component id="contactDelegate">
-            <Text
-                x="45" y="12"
-                width="{contactListView.width-45}"
-                height="30"
-                color="black"
-                font.bold="true"
-                text="{model.label}"/>
-        </Component>
-    </resources>
-    <ListView id="contactListView"
-        anchors.fill="{parent}"
-        clip="true"
-        model="{contactList}"
-        delegate="{contactDelegate}"
-        focus="true"/>
-</Item>
diff --git a/examples/declarative/tutorials/contacts/3_Collections/ContactView2.qml b/examples/declarative/tutorials/contacts/3_Collections/ContactView2.qml
deleted file mode 100644
index 97868e3..0000000
--- a/examples/declarative/tutorials/contacts/3_Collections/ContactView2.qml
+++ /dev/null
@@ -1,68 +0,0 @@
-<Item id="contacts"
-    width="240"
-    height="230">
-    <properties>
-        <Property name="mouseGrabbed" value="false"/>
-    </properties>
-    <resources>
-        <SqlConnection id="contactDatabase" name="qmlConnection" driver="QSQLITE" databaseName="../shared/contacts.sqlite"/>
-        <SqlQuery id="contactList" connection="{contactDatabase}">
-            <query>SELECT recid AS contactid, label, email, phone FROM contacts ORDER BY label, recid</query>
-        </SqlQuery>
-        <Component id="contactDelegate">
-            <Item id="wrapper"
-                x="0"
-                width="{ListView.view.width}" height="34">
-                <Text id="label"
-                    x="45" y="12"
-                    width="{parent.width-45}" 
-                    text="{model.label}"
-                    color="black"
-                    font.bold="true">
-                </Text>
-                <MouseRegion
-                    anchors.fill="{label}"
-                    onClicked="wrapper.state='opened'"/>
-                <Contact id="details"
-                    anchors.fill="{parent}"
-                    contactid="{model.contactid}"
-                    label="{model.label}"
-                    email="{model.email}"
-                    phone="{model.phone}"
-                    opacity="0"/>
-                <states>
-                    <State name='opened'>
-                        <SetProperty target="{wrapper}" property="height" value="{contactListView.height}"/>
-                        <SetProperty target="{contactListView}" property="yPosition" value="{wrapper.y}"/>
-                        <SetProperty target="{contactListView}" property="locked" value="1"/>
-                        <SetProperty target="{label}" property="opacity" value="0"/>
-                        <SetProperty target="{details}" property="opacity" value="1"/>
-                    </State>
-                </states>
-                <transitions>
-                    <Transition>
-                        <NumericAnimation duration="500" properties="yPosition,height,opacity"/>
-                    </Transition>
-                </transitions>
-                <Connection sender="{cancelEditButton}" signal="clicked()">
-                    if (wrapper.state == 'opened') {
-                        wrapper.state = '';
-                    }
-                </Connection>
-            </Item>
-        </Component>
-    </resources>
-    <Button id="cancelEditButton"
-        anchors.top="{parent.top}" anchors.topMargin="5"
-        anchors.right="{parent.right}" anchors.rightMargin="5"
-        icon="../shared/pics/cancel.png"/>
-    <ListView id="contactListView"
-        anchors.left="{parent.left}"
-        anchors.right="{parent.right}"
-        anchors.top="{cancelEditButton.bottom}"
-        anchors.bottom="{parent.bottom}"
-        clip="true"
-        model="{contactList}"
-        delegate="{contactDelegate}"
-        focus="true"/>
-</Item>
diff --git a/examples/declarative/tutorials/contacts/3_Collections/ContactView3.qml b/examples/declarative/tutorials/contacts/3_Collections/ContactView3.qml
deleted file mode 100644
index c15ece2..0000000
--- a/examples/declarative/tutorials/contacts/3_Collections/ContactView3.qml
+++ /dev/null
@@ -1,73 +0,0 @@
-<Item id="contacts"
-    width="240"
-    height="230">
-    <properties>
-        <Property name="mouseGrabbed" value="false"/>
-    </properties>
-    <resources>
-        <SqlConnection id="contactDatabase" name="qmlConnection" driver="QSQLITE" databaseName="../shared/contacts.sqlite"/>
-        <SqlQuery id="contactList" connection="{contactDatabase}">
-            <query>SELECT recid AS contactid, label, email, phone FROM contacts ORDER BY label, recid</query>
-        </SqlQuery>
-        <Component id="contactDelegate">
-            <Item id="wrapper"
-                x="0"
-                width="{ListView.view.width}" height="34">
-                <Text id="label"
-                    x="45" y="12"
-                    width="{parent.width-45}" 
-                    text="{model.label}"
-                    color="black"
-                    font.bold="true">
-                </Text>
-                <MouseRegion
-                    anchors.fill="{label}">
-                    <onClicked>
-                        Details.qml = 'Contact.qml';
-                        wrapper.state='opened';
-                    </onClicked>
-                </MouseRegion>
-                <Item id="Details"
-                    anchors.fill="{wrapper}"
-                    opacity="0">
-                    <Bind target="{Details.qmlItem}" property="contactid" value="{model.contactid}"/>
-                    <Bind target="{Details.qmlItem}" property="label" value="{model.label}"/>
-                    <Bind target="{Details.qmlItem}" property="phone" value="{model.phone}"/>
-                    <Bind target="{Details.qmlItem}" property="email" value="{model.email}"/>
-                </Item>
-                <states>
-                    <State name='opened'>
-                        <SetProperty target="{wrapper}" property="height" value="{contactListView.height}"/>
-                        <SetProperty target="{contactListView}" property="yPosition" value="{wrapper.y}"/>
-                        <SetProperty target="{contactListView}" property="locked" value="1"/>
-                        <SetProperty target="{label}" property="opacity" value="0"/>
-                        <SetProperty target="{Details}" property="opacity" value="1"/>
-                    </State>
-                </states>
-                <transitions>
-                    <Transition>
-                        <NumericAnimation duration="500" properties="yPosition,height,opacity"/>
-                    </Transition>
-                </transitions>
-                <Connection sender="{cancelEditButton}" signal="clicked()">
-                    if (wrapper.state == 'opened') {
-                        wrapper.state = '';
-                    }
-                </Connection>
-            </Item>
-        </Component>
-    </resources>
-    <Button id="cancelEditButton"
-        anchors.top="{parent.top}" anchors.topMargin="5"
-        anchors.right="{parent.right}" anchors.rightMargin="5"
-        icon="../shared/pics/cancel.png"/>
-    <ListView id="contactListView"
-        anchors.left="{parent.left}"
-        anchors.right="{parent.right}"
-        anchors.top="{cancelEditButton.bottom}"
-        anchors.bottom="{parent.bottom}"
-        clip="true"
-        model="{contactList}"
-        delegate="{contactDelegate}"
-        focus="true"/>
-</Item>
diff --git a/examples/declarative/tutorials/contacts/3_Collections/FieldText.qml b/examples/declarative/tutorials/contacts/3_Collections/FieldText.qml
deleted file mode 100644
index 199270c..0000000
--- a/examples/declarative/tutorials/contacts/3_Collections/FieldText.qml
+++ /dev/null
@@ -1,96 +0,0 @@
-<Rect id="fieldText"
-    height="30"
-    radius="5"
-    color="white">
-    <properties>
-        <Property
-            name="text"
-            value=""
-            onValueChanged="reset()"/>
-        <Property
-            name="label"
-            value=""/>
-    </properties>
-    <signals>
-        <Signal name="confirmed"/>
-    </signals>
-    <resources>
-        <Script>
-            function edit() {
-                if (!contacts.mouseGrabbed) {
-                    fieldText.state='editing';
-                    contacts.mouseGrabbed=true;
-                }
-            }
-            function confirm() {
-                fieldText.text = textEdit.text;
-                fieldText.state='';
-                contacts.mouseGrabbed=false;
-                fieldText.confirmed.emit();
-            }
-            function reset() {
-                textEdit.text = fieldText.text;
-                fieldText.state='';
-                contacts.mouseGrabbed=false;
-            }
-        </Script>
-    </resources>
-    <Image id="cancelIcon"
-        width="22" height="22"
-        anchors.right="{parent.right}" anchors.rightMargin="4"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        src="../shared/pics/cancel.png"
-        opacity="0"/>
-    <Image id="confirmIcon"
-        width="22" height="22"
-        anchors.left="{parent.left}" anchors.leftMargin="4"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        src="../shared/pics/ok.png"
-        opacity="0"/>
-    <TextEdit id="textEdit"
-        anchors.left="{parent.left}" anchors.leftMargin="5"
-        anchors.right="{parent.right}" anchors.rightMargin="5"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        color="black"
-        font.bold="true"
-        readOnly="true"
-        wrap="false"
-        />
-    <Text id="textLabel"
-        x="5" width="{parent.width-10}"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        hAlign="AlignHCenter"
-        color="#505050"
-        font.italic="true"
-        text="{fieldText.label}"
-        opacity="{textEdit.text == '' ? 1 : 0}">
-        <opacity>
-            <Behaviour>
-                <NumericAnimation property="opacity" duration="250"/>
-            </Behaviour>
-        </opacity>
-    </Text>
-    <MouseRegion anchors.fill="{cancelIcon}" onClicked="reset()"/>
-    <MouseRegion anchors.fill="{confirmIcon}" onClicked="confirm()"/>
-    <MouseRegion
-        id="editRegion"
-        anchors.fill="{textEdit}"
-        onClicked="edit()"/>
-    <states>
-        <State name="editing">
-            <SetProperty target="{confirmIcon}" property="opacity" value="1"/>
-            <SetProperty target="{cancelIcon}" property="opacity" value="1"/>
-            <SetProperty target="{textEdit}" property="readOnly" value="false"/>
-            <SetProperty target="{textEdit}" property="focus" value="true"/>
-            <SetProperty target="{editRegion}" property="opacity" value="0"/>
-            <SetProperty target="{textEdit.anchors}" property="leftMargin" value="39"/>
-            <SetProperty target="{textEdit.anchors}" property="rightMargin" value="39"/>
-        </State>
-    </states>
-    <transitions>
-        <Transition fromState='' toState="*" reversible="true">
-            <NumericAnimation properties="opacity,leftMargin,rightMargin" duration="200"/>
-            <ColorAnimation duration="150"/>
-        </Transition>
-    </transitions>
-</Rect>
diff --git a/examples/declarative/tutorials/contacts/3_Collections/GroupBox.qml b/examples/declarative/tutorials/contacts/3_Collections/GroupBox.qml
index 01f26ee..77f7093 100644
--- a/examples/declarative/tutorials/contacts/3_Collections/GroupBox.qml
+++ b/examples/declarative/tutorials/contacts/3_Collections/GroupBox.qml
@@ -1,4 +1,4 @@
-<Item id="groupBox" width="{Math.max(270, subItem.width+40)}" height="{Math.max(70, subItem.height+40)}">
+<FocusRealm id="groupBox" width="{Math.max(270, subItem.width+40)}" height="{Math.max(70, subItem.height+40)}">
     <properties>
         <Property name="contents"/>
         <Property name="label"/>
@@ -14,4 +14,12 @@
     <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>
+    <Rect color="black" anchors.fill="{parent}" opacity="{parent.focus ? 0 : 0.3}">
+        <MouseRegion anchors.fill="{parent}" onClicked="parent.parent.focus=true"/>
+        <opacity>
+            <Behaviour>
+                <NumericAnimation property="opacity" duration="250"/>
+            </Behaviour>
+        </opacity>
+    </Rect>
+</FocusRealm>
diff --git a/examples/declarative/tutorials/contacts/3_Collections/RemoveButton.qml b/examples/declarative/tutorials/contacts/3_Collections/RemoveButton.qml
deleted file mode 100644
index 493ab7a..0000000
--- a/examples/declarative/tutorials/contacts/3_Collections/RemoveButton.qml
+++ /dev/null
@@ -1,80 +0,0 @@
-<Rect id="removeButton"
-    width="30" height="30"
-    color="red"
-    radius="5">
-    <properties>
-        <Property name="expandedWidth" value="230"/>
-    </properties>
-    <signals>
-        <Signal name="confirmed"/>
-    </signals>
-    <resources>
-        <Script>
-            function toggle() {
-                print('removeButton.toggle()');
-                if (removeButton.state == 'opened') {
-                    removeButton.state = '';
-                    contacts.mouseGrabbed=false;
-                } else {
-                    if (!contacts.mouseGrabbed) {
-                        removeButton.state = 'opened';
-                        contacts.mouseGrabbed=true;
-                    }
-                }
-            }
-        </Script>
-    </resources>
-    <Image id="trashIcon"
-        width="22" height="22"
-        anchors.right="{parent.right}" anchors.rightMargin="4"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        src="../shared/pics/trash.png"
-        opacity="1">
-        <MouseRegion
-            anchors.fill="{parent}"
-            onClicked="toggle()"/>
-    </Image>
-    <Image id="cancelIcon"
-        width="22" height="22"
-        anchors.right="{parent.right}" anchors.rightMargin="4"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        src="../shared/pics/cancel.png"
-        opacity="0">
-        <MouseRegion
-            anchors.fill="{parent}"
-            onClicked="toggle()"/>
-    </Image>
-    <Image id="confirmIcon"
-        width="22" height="22"
-        anchors.left="{parent.left}" anchors.leftMargin="4"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        src="../shared/pics/ok.png"
-        opacity="0">
-        <MouseRegion
-            anchors.fill="{parent}"
-            onClicked="toggle(); removeButton.confirmed.emit()"/>
-    </Image>
-    <Text id="text"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        anchors.left="{confirmIcon.right}" anchors.leftMargin="4"
-        anchors.right="{cancelIcon.left}" anchors.rightMargin="4"
-        font.bold="true"
-        color="white"
-        hAlign="AlignHCenter"
-        text="Remove"
-        opacity="0"/>
-    <states>
-        <State name="opened">
-            <SetProperty target="{removeButton}" property="width" value="{removeButton.expandedWidth}"/>
-            <SetProperty target="{text}" property="opacity" value="1"/>
-            <SetProperty target="{confirmIcon}" property="opacity" value="1"/>
-            <SetProperty target="{cancelIcon}" property="opacity" value="1"/>
-            <SetProperty target="{trashIcon}" property="opacity" value="0"/>
-        </State>
-    </states>
-    <transitions>
-        <Transition fromState="*" toState="opened" reversible="true">
-            <NumericAnimation properties="opacity,x,width" duration="200"/>
-        </Transition>
-    </transitions>
-</Rect>
-- 
cgit v0.12


From a9b976c3c68e246f1d6ab83d02715ab81fb4dd6a Mon Sep 17 00:00:00 2001
From: Ian Walters <ian.walters@nokia.com>
Date: Tue, 28 Apr 2009 10:38:48 +1000
Subject: Use namespaces to reduce file duplication

Also add some alternate 'chapter 2, step 1' examples
to demonstrate loading by file name and using namespaces
---
 .../tutorials/contacts/2_Reuse/1a/ContactField.qml | 20 +++++
 .../tutorials/contacts/2_Reuse/1a/RemoveButton.qml | 70 ++++++++++++++++
 .../tutorials/contacts/2_Reuse/1b/ContactField.qml | 19 +++++
 .../contacts/2_Reuse/1b/lib/RemoveButton.qml       | 70 ++++++++++++++++
 .../tutorials/contacts/3_Collections/1/Button.qml  | 38 ---------
 .../tutorials/contacts/3_Collections/1/Contact.qml | 28 -------
 .../contacts/3_Collections/1/ContactField.qml      | 35 --------
 .../contacts/3_Collections/1/ContactView.qml       |  1 +
 .../contacts/3_Collections/1/FieldText.qml         | 96 ----------------------
 .../contacts/3_Collections/1/RemoveButton.qml      | 80 ------------------
 .../tutorials/contacts/3_Collections/2/Button.qml  | 38 ---------
 .../tutorials/contacts/3_Collections/2/Contact.qml | 28 -------
 .../contacts/3_Collections/2/ContactField.qml      | 35 --------
 .../contacts/3_Collections/2/ContactView.qml       |  1 +
 .../contacts/3_Collections/2/FieldText.qml         | 96 ----------------------
 .../contacts/3_Collections/2/RemoveButton.qml      | 80 ------------------
 .../tutorials/contacts/3_Collections/3/Button.qml  | 38 ---------
 .../tutorials/contacts/3_Collections/3/Contact.qml | 28 -------
 .../contacts/3_Collections/3/ContactField.qml      | 35 --------
 .../contacts/3_Collections/3/ContactView.qml       |  1 +
 .../contacts/3_Collections/3/FieldText.qml         | 96 ----------------------
 .../contacts/3_Collections/3/RemoveButton.qml      | 80 ------------------
 .../contacts/3_Collections/lib/Button.qml          | 38 +++++++++
 .../contacts/3_Collections/lib/Contact.qml         | 28 +++++++
 .../contacts/3_Collections/lib/ContactField.qml    | 35 ++++++++
 .../contacts/3_Collections/lib/FieldText.qml       | 96 ++++++++++++++++++++++
 .../contacts/3_Collections/lib/RemoveButton.qml    | 80 ++++++++++++++++++
 27 files changed, 459 insertions(+), 831 deletions(-)
 create mode 100644 examples/declarative/tutorials/contacts/2_Reuse/1a/ContactField.qml
 create mode 100644 examples/declarative/tutorials/contacts/2_Reuse/1a/RemoveButton.qml
 create mode 100644 examples/declarative/tutorials/contacts/2_Reuse/1b/ContactField.qml
 create mode 100644 examples/declarative/tutorials/contacts/2_Reuse/1b/lib/RemoveButton.qml
 delete mode 100644 examples/declarative/tutorials/contacts/3_Collections/1/Button.qml
 delete mode 100644 examples/declarative/tutorials/contacts/3_Collections/1/Contact.qml
 delete mode 100644 examples/declarative/tutorials/contacts/3_Collections/1/ContactField.qml
 delete mode 100644 examples/declarative/tutorials/contacts/3_Collections/1/FieldText.qml
 delete mode 100644 examples/declarative/tutorials/contacts/3_Collections/1/RemoveButton.qml
 delete mode 100644 examples/declarative/tutorials/contacts/3_Collections/2/Button.qml
 delete mode 100644 examples/declarative/tutorials/contacts/3_Collections/2/Contact.qml
 delete mode 100644 examples/declarative/tutorials/contacts/3_Collections/2/ContactField.qml
 delete mode 100644 examples/declarative/tutorials/contacts/3_Collections/2/FieldText.qml
 delete mode 100644 examples/declarative/tutorials/contacts/3_Collections/2/RemoveButton.qml
 delete mode 100644 examples/declarative/tutorials/contacts/3_Collections/3/Button.qml
 delete mode 100644 examples/declarative/tutorials/contacts/3_Collections/3/Contact.qml
 delete mode 100644 examples/declarative/tutorials/contacts/3_Collections/3/ContactField.qml
 delete mode 100644 examples/declarative/tutorials/contacts/3_Collections/3/FieldText.qml
 delete mode 100644 examples/declarative/tutorials/contacts/3_Collections/3/RemoveButton.qml
 create mode 100644 examples/declarative/tutorials/contacts/3_Collections/lib/Button.qml
 create mode 100644 examples/declarative/tutorials/contacts/3_Collections/lib/Contact.qml
 create mode 100644 examples/declarative/tutorials/contacts/3_Collections/lib/ContactField.qml
 create mode 100644 examples/declarative/tutorials/contacts/3_Collections/lib/FieldText.qml
 create mode 100644 examples/declarative/tutorials/contacts/3_Collections/lib/RemoveButton.qml

diff --git a/examples/declarative/tutorials/contacts/2_Reuse/1a/ContactField.qml b/examples/declarative/tutorials/contacts/2_Reuse/1a/ContactField.qml
new file mode 100644
index 0000000..ee860b0
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/2_Reuse/1a/ContactField.qml
@@ -0,0 +1,20 @@
+<Item id="contactField"
+    clip="true"
+    width="230"
+    height="30">
+    <Item id="removeButton"
+        qml="RemoveButton.qml"
+        width="{qmlItem.width}" height="{qmlItem.height}"
+        anchors.right="{parent.right}"
+        anchors.top="{parent.top}" anchors.bottom="{parent.bottom}"/>
+    <Text id="fieldText"
+        width="{contactField.width-80}"
+        anchors.right="{removeButton.left}" anchors.rightMargin="10"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        font.bold="true"
+        color="black"
+        text="123123"/>
+    <Image src="../../shared/pics/phone.png"
+        anchors.right="{fieldText.left}" anchors.rightMargin="10"
+        anchors.verticalCenter="{parent.verticalCenter}"/>
+</Item>
diff --git a/examples/declarative/tutorials/contacts/2_Reuse/1a/RemoveButton.qml b/examples/declarative/tutorials/contacts/2_Reuse/1a/RemoveButton.qml
new file mode 100644
index 0000000..ddb3507
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/2_Reuse/1a/RemoveButton.qml
@@ -0,0 +1,70 @@
+<Rect id="removeButton"
+    width="30" height="30"
+    color="red"
+    radius="5">
+    <resources>
+        <Script>
+            function toggle() {
+                print('removeButton.toggle()');
+                if (removeButton.state == 'opened') {
+                    removeButton.state = '';
+                } else {
+                    removeButton.state = 'opened';
+                }
+            }
+        </Script>
+    </resources>
+    <Image id="trashIcon"
+        width="22" height="22"
+        anchors.right="{parent.right}" anchors.rightMargin="4"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        src="../../shared/pics/trash.png"
+        opacity="1">
+        <MouseRegion
+            anchors.fill="{parent}"
+            onClicked="toggle()"/>
+    </Image>
+    <Image id="cancelIcon"
+        width="22" height="22"
+        anchors.right="{parent.right}" anchors.rightMargin="4"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        src="../../shared/pics/cancel.png"
+        opacity="0">
+        <MouseRegion
+            anchors.fill="{parent}"
+            onClicked="toggle()"/>
+    </Image>
+    <Image id="confirmIcon"
+        width="22" height="22"
+        anchors.left="{parent.left}" anchors.leftMargin="4"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        src="../../shared/pics/ok.png"
+        opacity="0">
+        <MouseRegion
+            anchors.fill="{parent}"
+            onClicked="toggle()"/>
+    </Image>
+    <Text id="text"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        anchors.left="{confirmIcon.right}" anchors.leftMargin="4"
+        anchors.right="{cancelIcon.left}" anchors.rightMargin="4"
+        font.bold="true"
+        color="white"
+        hAlign="AlignHCenter"
+        text="Remove"
+        opacity="0"/>
+    <states>
+        <State name="opened">
+            <SetProperty target="{removeButton}" property="width" value="230"/>
+            <SetProperty target="{text}" property="opacity" value="1"/>
+            <SetProperty target="{confirmIcon}" property="opacity" value="1"/>
+            <SetProperty target="{cancelIcon}" property="opacity" value="1"/>
+            <SetProperty target="{trashIcon}" property="opacity" value="0"/>
+        </State>
+    </states>
+    <transitions>
+        <Transition fromState="*" toState="opened" reversible="true">
+            <NumericAnimation properties="opacity,x,width" duration="200"/>
+        </Transition>
+    </transitions>
+</Rect>
diff --git a/examples/declarative/tutorials/contacts/2_Reuse/1b/ContactField.qml b/examples/declarative/tutorials/contacts/2_Reuse/1b/ContactField.qml
new file mode 100644
index 0000000..bff68b9
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/2_Reuse/1b/ContactField.qml
@@ -0,0 +1,19 @@
+<?qtfx namespacepath:=lib ?> <!-- RemoveButton location -->
+<Item id="contactField"
+    clip="true"
+    width="230"
+    height="30">
+    <RemoveButton id="removeButton"
+        anchors.right="{parent.right}"
+        anchors.top="{parent.top}" anchors.bottom="{parent.bottom}"/>
+    <Text id="fieldText"
+        width="{contactField.width-80}"
+        anchors.right="{removeButton.left}" anchors.rightMargin="10"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        font.bold="true"
+        color="black"
+        text="123123"/>
+    <Image src="../../shared/pics/phone.png"
+        anchors.right="{fieldText.left}" anchors.rightMargin="10"
+        anchors.verticalCenter="{parent.verticalCenter}"/>
+</Item>
diff --git a/examples/declarative/tutorials/contacts/2_Reuse/1b/lib/RemoveButton.qml b/examples/declarative/tutorials/contacts/2_Reuse/1b/lib/RemoveButton.qml
new file mode 100644
index 0000000..524bde2
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/2_Reuse/1b/lib/RemoveButton.qml
@@ -0,0 +1,70 @@
+<Rect id="removeButton"
+    width="30" height="30"
+    color="red"
+    radius="5">
+    <resources>
+        <Script>
+            function toggle() {
+                print('removeButton.toggle()');
+                if (removeButton.state == 'opened') {
+                    removeButton.state = '';
+                } else {
+                    removeButton.state = 'opened';
+                }
+            }
+        </Script>
+    </resources>
+    <Image id="trashIcon"
+        width="22" height="22"
+        anchors.right="{parent.right}" anchors.rightMargin="4"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        src="../../../shared/pics/trash.png"
+        opacity="1">
+        <MouseRegion
+            anchors.fill="{parent}"
+            onClicked="toggle()"/>
+    </Image>
+    <Image id="cancelIcon"
+        width="22" height="22"
+        anchors.right="{parent.right}" anchors.rightMargin="4"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        src="../../../shared/pics/cancel.png"
+        opacity="0">
+        <MouseRegion
+            anchors.fill="{parent}"
+            onClicked="toggle()"/>
+    </Image>
+    <Image id="confirmIcon"
+        width="22" height="22"
+        anchors.left="{parent.left}" anchors.leftMargin="4"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        src="../../../shared/pics/ok.png"
+        opacity="0">
+        <MouseRegion
+            anchors.fill="{parent}"
+            onClicked="toggle()"/>
+    </Image>
+    <Text id="text"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        anchors.left="{confirmIcon.right}" anchors.leftMargin="4"
+        anchors.right="{cancelIcon.left}" anchors.rightMargin="4"
+        font.bold="true"
+        color="white"
+        hAlign="AlignHCenter"
+        text="Remove"
+        opacity="0"/>
+    <states>
+        <State name="opened">
+            <SetProperty target="{removeButton}" property="width" value="230"/>
+            <SetProperty target="{text}" property="opacity" value="1"/>
+            <SetProperty target="{confirmIcon}" property="opacity" value="1"/>
+            <SetProperty target="{cancelIcon}" property="opacity" value="1"/>
+            <SetProperty target="{trashIcon}" property="opacity" value="0"/>
+        </State>
+    </states>
+    <transitions>
+        <Transition fromState="*" toState="opened" reversible="true">
+            <NumericAnimation properties="opacity,x,width" duration="200"/>
+        </Transition>
+    </transitions>
+</Rect>
diff --git a/examples/declarative/tutorials/contacts/3_Collections/1/Button.qml b/examples/declarative/tutorials/contacts/3_Collections/1/Button.qml
deleted file mode 100644
index 8290d35..0000000
--- a/examples/declarative/tutorials/contacts/3_Collections/1/Button.qml
+++ /dev/null
@@ -1,38 +0,0 @@
-<Item id="button" width="30" height="30">
-    <properties>
-        <Property name="icon"/>
-    </properties>
-    <signals>
-        <Signal name="clicked"/>
-    </signals>
-    <Rect id="buttonRect"
-        anchors.fill="{parent}"
-        color="lightgreen"
-        radius="5">
-        <Image id="iconImage"
-            src="{button.icon}"
-            anchors.horizontalCenter="{buttonRect.horizontalCenter}"
-            anchors.verticalCenter="{buttonRect.verticalCenter}"/>
-        <MouseRegion id="buttonMouseRegion"
-            anchors.fill="{buttonRect}"
-            onClicked="button.clicked.emit()"/>
-        <states>
-            <State name="pressed" when="{buttonMouseRegion.pressed == true}">
-                <SetProperty target="{buttonRect}" property="color" value="green"/>
-            </State>
-        </states>
-        <transitions>
-            <Transition fromState="*" toState="pressed">
-                <ColorAnimation duration="200"/>
-            </Transition>
-            <Transition fromState="pressed" toState="*">
-                <ColorAnimation duration="1000"/>
-            </Transition>
-        </transitions>
-    </Rect>
-    <opacity>
-        <Behaviour>
-            <NumericAnimation property="opacity" duration="250"/>
-        </Behaviour>
-    </opacity>
-</Item>
diff --git a/examples/declarative/tutorials/contacts/3_Collections/1/Contact.qml b/examples/declarative/tutorials/contacts/3_Collections/1/Contact.qml
deleted file mode 100644
index 293b3a5..0000000
--- a/examples/declarative/tutorials/contacts/3_Collections/1/Contact.qml
+++ /dev/null
@@ -1,28 +0,0 @@
-<Item id="contactDetails"
-    anchors.fill="{parent}">
-    <properties>
-        <Property name="contactid" value=""/>
-        <Property name="label" onValueChanged="labelField.value = label"/>
-        <Property name="phone" onValueChanged="phoneField.value = phone"/>
-        <Property name="email" onValueChanged="emailField.value = email"/>
-    </properties>
-    <VerticalLayout id="layout"
-        anchors.fill="{parent}"
-        spacing="5"
-        margin="5">
-        <ContactField id="labelField"
-            anchors.left="{layout.left}" anchors.leftMargin="5"
-            anchors.right="{layout.right}" anchors.rightMargin="5"
-            label="Name"/>
-        <ContactField id="phoneField"
-            anchors.left="{layout.left}" anchors.leftMargin="5"
-            anchors.right="{layout.right}" anchors.rightMargin="5"
-            icon="../../shared/pics/phone.png"
-            label="Phone"/>
-        <ContactField id="emailField"
-            anchors.left="{layout.left}" anchors.leftMargin="5"
-            anchors.right="{layout.right}" anchors.rightMargin="5"
-            icon="../../shared/pics/email.png"
-            label="Email"/>
-    </VerticalLayout>
-</Item>
diff --git a/examples/declarative/tutorials/contacts/3_Collections/1/ContactField.qml b/examples/declarative/tutorials/contacts/3_Collections/1/ContactField.qml
deleted file mode 100644
index 819914c..0000000
--- a/examples/declarative/tutorials/contacts/3_Collections/1/ContactField.qml
+++ /dev/null
@@ -1,35 +0,0 @@
-<Item id="contactField"
-    clip="true"
-    height="30">
-    <properties>
-        <Property name="label"/>
-        <Property name="icon"/>
-        <Property name="value"/>
-    </properties>
-    <RemoveButton id="removeButton"
-        anchors.right="{parent.right}"
-        anchors.top="{parent.top}" anchors.bottom="{parent.bottom}"
-        expandedWidth="{contactField.width}"
-        onConfirmed="print('Clear field text'); fieldText.text=''"/>
-    <FieldText id="fieldText"
-        width="{contactField.width-70}"
-        anchors.right="{removeButton.left}" anchors.rightMargin="5"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        label="{contactField.label}"
-        text="{contactField.value}"/>
-    <Image
-        anchors.right="{fieldText.left}" anchors.rightMargin="5"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        src="{contactField.icon}"/>
-    <states>
-        <State name="editingText" when="{fieldText.state == 'editing'}">
-            <SetProperty target="{removeButton.anchors}" property="rightMargin" value="-35"/>
-            <SetProperty target="{fieldText}" property="width" value="{contactField.width}"/>
-        </State>
-    </states>
-    <transitions>
-        <Transition fromState='' toState="*" reversible="true">
-            <NumericAnimation properties="width,rightMargin" duration="200"/>
-        </Transition>
-    </transitions>
-</Item>
diff --git a/examples/declarative/tutorials/contacts/3_Collections/1/ContactView.qml b/examples/declarative/tutorials/contacts/3_Collections/1/ContactView.qml
index d48aa02..5f9abc7 100644
--- a/examples/declarative/tutorials/contacts/3_Collections/1/ContactView.qml
+++ b/examples/declarative/tutorials/contacts/3_Collections/1/ContactView.qml
@@ -1,3 +1,4 @@
+<?qtfx namespacepath:=../lib ?>
 <Item id="contacts"
     width="240"
     height="230">
diff --git a/examples/declarative/tutorials/contacts/3_Collections/1/FieldText.qml b/examples/declarative/tutorials/contacts/3_Collections/1/FieldText.qml
deleted file mode 100644
index 068590a..0000000
--- a/examples/declarative/tutorials/contacts/3_Collections/1/FieldText.qml
+++ /dev/null
@@ -1,96 +0,0 @@
-<Rect id="fieldText"
-    height="30"
-    radius="5"
-    color="white">
-    <properties>
-        <Property
-            name="text"
-            value=""
-            onValueChanged="reset()"/>
-        <Property
-            name="label"
-            value=""/>
-    </properties>
-    <signals>
-        <Signal name="confirmed"/>
-    </signals>
-    <resources>
-        <Script>
-            function edit() {
-                if (!contacts.mouseGrabbed) {
-                    fieldText.state='editing';
-                    contacts.mouseGrabbed=true;
-                }
-            }
-            function confirm() {
-                fieldText.text = textEdit.text;
-                fieldText.state='';
-                contacts.mouseGrabbed=false;
-                fieldText.confirmed.emit();
-            }
-            function reset() {
-                textEdit.text = fieldText.text;
-                fieldText.state='';
-                contacts.mouseGrabbed=false;
-            }
-        </Script>
-    </resources>
-    <Image id="cancelIcon"
-        width="22" height="22"
-        anchors.right="{parent.right}" anchors.rightMargin="4"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        src="../../shared/pics/cancel.png"
-        opacity="0"/>
-    <Image id="confirmIcon"
-        width="22" height="22"
-        anchors.left="{parent.left}" anchors.leftMargin="4"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        src="../../shared/pics/ok.png"
-        opacity="0"/>
-    <TextEdit id="textEdit"
-        anchors.left="{parent.left}" anchors.leftMargin="5"
-        anchors.right="{parent.right}" anchors.rightMargin="5"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        color="black"
-        font.bold="true"
-        readOnly="true"
-        wrap="false"
-        />
-    <Text id="textLabel"
-        x="5" width="{parent.width-10}"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        hAlign="AlignHCenter"
-        color="#505050"
-        font.italic="true"
-        text="{fieldText.label}"
-        opacity="{textEdit.text == '' ? 1 : 0}">
-        <opacity>
-            <Behaviour>
-                <NumericAnimation property="opacity" duration="250"/>
-            </Behaviour>
-        </opacity>
-    </Text>
-    <MouseRegion anchors.fill="{cancelIcon}" onClicked="reset()"/>
-    <MouseRegion anchors.fill="{confirmIcon}" onClicked="confirm()"/>
-    <MouseRegion
-        id="editRegion"
-        anchors.fill="{textEdit}"
-        onClicked="edit()"/>
-    <states>
-        <State name="editing">
-            <SetProperty target="{confirmIcon}" property="opacity" value="1"/>
-            <SetProperty target="{cancelIcon}" property="opacity" value="1"/>
-            <SetProperty target="{textEdit}" property="readOnly" value="false"/>
-            <SetProperty target="{textEdit}" property="focus" value="true"/>
-            <SetProperty target="{editRegion}" property="opacity" value="0"/>
-            <SetProperty target="{textEdit.anchors}" property="leftMargin" value="39"/>
-            <SetProperty target="{textEdit.anchors}" property="rightMargin" value="39"/>
-        </State>
-    </states>
-    <transitions>
-        <Transition fromState='' toState="*" reversible="true">
-            <NumericAnimation properties="opacity,leftMargin,rightMargin" duration="200"/>
-            <ColorAnimation duration="150"/>
-        </Transition>
-    </transitions>
-</Rect>
diff --git a/examples/declarative/tutorials/contacts/3_Collections/1/RemoveButton.qml b/examples/declarative/tutorials/contacts/3_Collections/1/RemoveButton.qml
deleted file mode 100644
index ad488c1..0000000
--- a/examples/declarative/tutorials/contacts/3_Collections/1/RemoveButton.qml
+++ /dev/null
@@ -1,80 +0,0 @@
-<Rect id="removeButton"
-    width="30" height="30"
-    color="red"
-    radius="5">
-    <properties>
-        <Property name="expandedWidth" value="230"/>
-    </properties>
-    <signals>
-        <Signal name="confirmed"/>
-    </signals>
-    <resources>
-        <Script>
-            function toggle() {
-                print('removeButton.toggle()');
-                if (removeButton.state == 'opened') {
-                    removeButton.state = '';
-                    contacts.mouseGrabbed=false;
-                } else {
-                    if (!contacts.mouseGrabbed) {
-                        removeButton.state = 'opened';
-                        contacts.mouseGrabbed=true;
-                    }
-                }
-            }
-        </Script>
-    </resources>
-    <Image id="trashIcon"
-        width="22" height="22"
-        anchors.right="{parent.right}" anchors.rightMargin="4"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        src="../../shared/pics/trash.png"
-        opacity="1">
-        <MouseRegion
-            anchors.fill="{parent}"
-            onClicked="toggle()"/>
-    </Image>
-    <Image id="cancelIcon"
-        width="22" height="22"
-        anchors.right="{parent.right}" anchors.rightMargin="4"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        src="../../shared/pics/cancel.png"
-        opacity="0">
-        <MouseRegion
-            anchors.fill="{parent}"
-            onClicked="toggle()"/>
-    </Image>
-    <Image id="confirmIcon"
-        width="22" height="22"
-        anchors.left="{parent.left}" anchors.leftMargin="4"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        src="../../shared/pics/ok.png"
-        opacity="0">
-        <MouseRegion
-            anchors.fill="{parent}"
-            onClicked="toggle(); removeButton.confirmed.emit()"/>
-    </Image>
-    <Text id="text"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        anchors.left="{confirmIcon.right}" anchors.leftMargin="4"
-        anchors.right="{cancelIcon.left}" anchors.rightMargin="4"
-        font.bold="true"
-        color="white"
-        hAlign="AlignHCenter"
-        text="Remove"
-        opacity="0"/>
-    <states>
-        <State name="opened">
-            <SetProperty target="{removeButton}" property="width" value="{removeButton.expandedWidth}"/>
-            <SetProperty target="{text}" property="opacity" value="1"/>
-            <SetProperty target="{confirmIcon}" property="opacity" value="1"/>
-            <SetProperty target="{cancelIcon}" property="opacity" value="1"/>
-            <SetProperty target="{trashIcon}" property="opacity" value="0"/>
-        </State>
-    </states>
-    <transitions>
-        <Transition fromState="*" toState="opened" reversible="true">
-            <NumericAnimation properties="opacity,x,width" duration="200"/>
-        </Transition>
-    </transitions>
-</Rect>
diff --git a/examples/declarative/tutorials/contacts/3_Collections/2/Button.qml b/examples/declarative/tutorials/contacts/3_Collections/2/Button.qml
deleted file mode 100644
index 8290d35..0000000
--- a/examples/declarative/tutorials/contacts/3_Collections/2/Button.qml
+++ /dev/null
@@ -1,38 +0,0 @@
-<Item id="button" width="30" height="30">
-    <properties>
-        <Property name="icon"/>
-    </properties>
-    <signals>
-        <Signal name="clicked"/>
-    </signals>
-    <Rect id="buttonRect"
-        anchors.fill="{parent}"
-        color="lightgreen"
-        radius="5">
-        <Image id="iconImage"
-            src="{button.icon}"
-            anchors.horizontalCenter="{buttonRect.horizontalCenter}"
-            anchors.verticalCenter="{buttonRect.verticalCenter}"/>
-        <MouseRegion id="buttonMouseRegion"
-            anchors.fill="{buttonRect}"
-            onClicked="button.clicked.emit()"/>
-        <states>
-            <State name="pressed" when="{buttonMouseRegion.pressed == true}">
-                <SetProperty target="{buttonRect}" property="color" value="green"/>
-            </State>
-        </states>
-        <transitions>
-            <Transition fromState="*" toState="pressed">
-                <ColorAnimation duration="200"/>
-            </Transition>
-            <Transition fromState="pressed" toState="*">
-                <ColorAnimation duration="1000"/>
-            </Transition>
-        </transitions>
-    </Rect>
-    <opacity>
-        <Behaviour>
-            <NumericAnimation property="opacity" duration="250"/>
-        </Behaviour>
-    </opacity>
-</Item>
diff --git a/examples/declarative/tutorials/contacts/3_Collections/2/Contact.qml b/examples/declarative/tutorials/contacts/3_Collections/2/Contact.qml
deleted file mode 100644
index 293b3a5..0000000
--- a/examples/declarative/tutorials/contacts/3_Collections/2/Contact.qml
+++ /dev/null
@@ -1,28 +0,0 @@
-<Item id="contactDetails"
-    anchors.fill="{parent}">
-    <properties>
-        <Property name="contactid" value=""/>
-        <Property name="label" onValueChanged="labelField.value = label"/>
-        <Property name="phone" onValueChanged="phoneField.value = phone"/>
-        <Property name="email" onValueChanged="emailField.value = email"/>
-    </properties>
-    <VerticalLayout id="layout"
-        anchors.fill="{parent}"
-        spacing="5"
-        margin="5">
-        <ContactField id="labelField"
-            anchors.left="{layout.left}" anchors.leftMargin="5"
-            anchors.right="{layout.right}" anchors.rightMargin="5"
-            label="Name"/>
-        <ContactField id="phoneField"
-            anchors.left="{layout.left}" anchors.leftMargin="5"
-            anchors.right="{layout.right}" anchors.rightMargin="5"
-            icon="../../shared/pics/phone.png"
-            label="Phone"/>
-        <ContactField id="emailField"
-            anchors.left="{layout.left}" anchors.leftMargin="5"
-            anchors.right="{layout.right}" anchors.rightMargin="5"
-            icon="../../shared/pics/email.png"
-            label="Email"/>
-    </VerticalLayout>
-</Item>
diff --git a/examples/declarative/tutorials/contacts/3_Collections/2/ContactField.qml b/examples/declarative/tutorials/contacts/3_Collections/2/ContactField.qml
deleted file mode 100644
index 819914c..0000000
--- a/examples/declarative/tutorials/contacts/3_Collections/2/ContactField.qml
+++ /dev/null
@@ -1,35 +0,0 @@
-<Item id="contactField"
-    clip="true"
-    height="30">
-    <properties>
-        <Property name="label"/>
-        <Property name="icon"/>
-        <Property name="value"/>
-    </properties>
-    <RemoveButton id="removeButton"
-        anchors.right="{parent.right}"
-        anchors.top="{parent.top}" anchors.bottom="{parent.bottom}"
-        expandedWidth="{contactField.width}"
-        onConfirmed="print('Clear field text'); fieldText.text=''"/>
-    <FieldText id="fieldText"
-        width="{contactField.width-70}"
-        anchors.right="{removeButton.left}" anchors.rightMargin="5"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        label="{contactField.label}"
-        text="{contactField.value}"/>
-    <Image
-        anchors.right="{fieldText.left}" anchors.rightMargin="5"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        src="{contactField.icon}"/>
-    <states>
-        <State name="editingText" when="{fieldText.state == 'editing'}">
-            <SetProperty target="{removeButton.anchors}" property="rightMargin" value="-35"/>
-            <SetProperty target="{fieldText}" property="width" value="{contactField.width}"/>
-        </State>
-    </states>
-    <transitions>
-        <Transition fromState='' toState="*" reversible="true">
-            <NumericAnimation properties="width,rightMargin" duration="200"/>
-        </Transition>
-    </transitions>
-</Item>
diff --git a/examples/declarative/tutorials/contacts/3_Collections/2/ContactView.qml b/examples/declarative/tutorials/contacts/3_Collections/2/ContactView.qml
index c72d9ce..99d0bbb 100644
--- a/examples/declarative/tutorials/contacts/3_Collections/2/ContactView.qml
+++ b/examples/declarative/tutorials/contacts/3_Collections/2/ContactView.qml
@@ -1,3 +1,4 @@
+<?qtfx namespacepath:=../lib ?>
 <Item id="contacts"
     width="240"
     height="230">
diff --git a/examples/declarative/tutorials/contacts/3_Collections/2/FieldText.qml b/examples/declarative/tutorials/contacts/3_Collections/2/FieldText.qml
deleted file mode 100644
index 068590a..0000000
--- a/examples/declarative/tutorials/contacts/3_Collections/2/FieldText.qml
+++ /dev/null
@@ -1,96 +0,0 @@
-<Rect id="fieldText"
-    height="30"
-    radius="5"
-    color="white">
-    <properties>
-        <Property
-            name="text"
-            value=""
-            onValueChanged="reset()"/>
-        <Property
-            name="label"
-            value=""/>
-    </properties>
-    <signals>
-        <Signal name="confirmed"/>
-    </signals>
-    <resources>
-        <Script>
-            function edit() {
-                if (!contacts.mouseGrabbed) {
-                    fieldText.state='editing';
-                    contacts.mouseGrabbed=true;
-                }
-            }
-            function confirm() {
-                fieldText.text = textEdit.text;
-                fieldText.state='';
-                contacts.mouseGrabbed=false;
-                fieldText.confirmed.emit();
-            }
-            function reset() {
-                textEdit.text = fieldText.text;
-                fieldText.state='';
-                contacts.mouseGrabbed=false;
-            }
-        </Script>
-    </resources>
-    <Image id="cancelIcon"
-        width="22" height="22"
-        anchors.right="{parent.right}" anchors.rightMargin="4"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        src="../../shared/pics/cancel.png"
-        opacity="0"/>
-    <Image id="confirmIcon"
-        width="22" height="22"
-        anchors.left="{parent.left}" anchors.leftMargin="4"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        src="../../shared/pics/ok.png"
-        opacity="0"/>
-    <TextEdit id="textEdit"
-        anchors.left="{parent.left}" anchors.leftMargin="5"
-        anchors.right="{parent.right}" anchors.rightMargin="5"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        color="black"
-        font.bold="true"
-        readOnly="true"
-        wrap="false"
-        />
-    <Text id="textLabel"
-        x="5" width="{parent.width-10}"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        hAlign="AlignHCenter"
-        color="#505050"
-        font.italic="true"
-        text="{fieldText.label}"
-        opacity="{textEdit.text == '' ? 1 : 0}">
-        <opacity>
-            <Behaviour>
-                <NumericAnimation property="opacity" duration="250"/>
-            </Behaviour>
-        </opacity>
-    </Text>
-    <MouseRegion anchors.fill="{cancelIcon}" onClicked="reset()"/>
-    <MouseRegion anchors.fill="{confirmIcon}" onClicked="confirm()"/>
-    <MouseRegion
-        id="editRegion"
-        anchors.fill="{textEdit}"
-        onClicked="edit()"/>
-    <states>
-        <State name="editing">
-            <SetProperty target="{confirmIcon}" property="opacity" value="1"/>
-            <SetProperty target="{cancelIcon}" property="opacity" value="1"/>
-            <SetProperty target="{textEdit}" property="readOnly" value="false"/>
-            <SetProperty target="{textEdit}" property="focus" value="true"/>
-            <SetProperty target="{editRegion}" property="opacity" value="0"/>
-            <SetProperty target="{textEdit.anchors}" property="leftMargin" value="39"/>
-            <SetProperty target="{textEdit.anchors}" property="rightMargin" value="39"/>
-        </State>
-    </states>
-    <transitions>
-        <Transition fromState='' toState="*" reversible="true">
-            <NumericAnimation properties="opacity,leftMargin,rightMargin" duration="200"/>
-            <ColorAnimation duration="150"/>
-        </Transition>
-    </transitions>
-</Rect>
diff --git a/examples/declarative/tutorials/contacts/3_Collections/2/RemoveButton.qml b/examples/declarative/tutorials/contacts/3_Collections/2/RemoveButton.qml
deleted file mode 100644
index ad488c1..0000000
--- a/examples/declarative/tutorials/contacts/3_Collections/2/RemoveButton.qml
+++ /dev/null
@@ -1,80 +0,0 @@
-<Rect id="removeButton"
-    width="30" height="30"
-    color="red"
-    radius="5">
-    <properties>
-        <Property name="expandedWidth" value="230"/>
-    </properties>
-    <signals>
-        <Signal name="confirmed"/>
-    </signals>
-    <resources>
-        <Script>
-            function toggle() {
-                print('removeButton.toggle()');
-                if (removeButton.state == 'opened') {
-                    removeButton.state = '';
-                    contacts.mouseGrabbed=false;
-                } else {
-                    if (!contacts.mouseGrabbed) {
-                        removeButton.state = 'opened';
-                        contacts.mouseGrabbed=true;
-                    }
-                }
-            }
-        </Script>
-    </resources>
-    <Image id="trashIcon"
-        width="22" height="22"
-        anchors.right="{parent.right}" anchors.rightMargin="4"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        src="../../shared/pics/trash.png"
-        opacity="1">
-        <MouseRegion
-            anchors.fill="{parent}"
-            onClicked="toggle()"/>
-    </Image>
-    <Image id="cancelIcon"
-        width="22" height="22"
-        anchors.right="{parent.right}" anchors.rightMargin="4"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        src="../../shared/pics/cancel.png"
-        opacity="0">
-        <MouseRegion
-            anchors.fill="{parent}"
-            onClicked="toggle()"/>
-    </Image>
-    <Image id="confirmIcon"
-        width="22" height="22"
-        anchors.left="{parent.left}" anchors.leftMargin="4"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        src="../../shared/pics/ok.png"
-        opacity="0">
-        <MouseRegion
-            anchors.fill="{parent}"
-            onClicked="toggle(); removeButton.confirmed.emit()"/>
-    </Image>
-    <Text id="text"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        anchors.left="{confirmIcon.right}" anchors.leftMargin="4"
-        anchors.right="{cancelIcon.left}" anchors.rightMargin="4"
-        font.bold="true"
-        color="white"
-        hAlign="AlignHCenter"
-        text="Remove"
-        opacity="0"/>
-    <states>
-        <State name="opened">
-            <SetProperty target="{removeButton}" property="width" value="{removeButton.expandedWidth}"/>
-            <SetProperty target="{text}" property="opacity" value="1"/>
-            <SetProperty target="{confirmIcon}" property="opacity" value="1"/>
-            <SetProperty target="{cancelIcon}" property="opacity" value="1"/>
-            <SetProperty target="{trashIcon}" property="opacity" value="0"/>
-        </State>
-    </states>
-    <transitions>
-        <Transition fromState="*" toState="opened" reversible="true">
-            <NumericAnimation properties="opacity,x,width" duration="200"/>
-        </Transition>
-    </transitions>
-</Rect>
diff --git a/examples/declarative/tutorials/contacts/3_Collections/3/Button.qml b/examples/declarative/tutorials/contacts/3_Collections/3/Button.qml
deleted file mode 100644
index 8290d35..0000000
--- a/examples/declarative/tutorials/contacts/3_Collections/3/Button.qml
+++ /dev/null
@@ -1,38 +0,0 @@
-<Item id="button" width="30" height="30">
-    <properties>
-        <Property name="icon"/>
-    </properties>
-    <signals>
-        <Signal name="clicked"/>
-    </signals>
-    <Rect id="buttonRect"
-        anchors.fill="{parent}"
-        color="lightgreen"
-        radius="5">
-        <Image id="iconImage"
-            src="{button.icon}"
-            anchors.horizontalCenter="{buttonRect.horizontalCenter}"
-            anchors.verticalCenter="{buttonRect.verticalCenter}"/>
-        <MouseRegion id="buttonMouseRegion"
-            anchors.fill="{buttonRect}"
-            onClicked="button.clicked.emit()"/>
-        <states>
-            <State name="pressed" when="{buttonMouseRegion.pressed == true}">
-                <SetProperty target="{buttonRect}" property="color" value="green"/>
-            </State>
-        </states>
-        <transitions>
-            <Transition fromState="*" toState="pressed">
-                <ColorAnimation duration="200"/>
-            </Transition>
-            <Transition fromState="pressed" toState="*">
-                <ColorAnimation duration="1000"/>
-            </Transition>
-        </transitions>
-    </Rect>
-    <opacity>
-        <Behaviour>
-            <NumericAnimation property="opacity" duration="250"/>
-        </Behaviour>
-    </opacity>
-</Item>
diff --git a/examples/declarative/tutorials/contacts/3_Collections/3/Contact.qml b/examples/declarative/tutorials/contacts/3_Collections/3/Contact.qml
deleted file mode 100644
index 293b3a5..0000000
--- a/examples/declarative/tutorials/contacts/3_Collections/3/Contact.qml
+++ /dev/null
@@ -1,28 +0,0 @@
-<Item id="contactDetails"
-    anchors.fill="{parent}">
-    <properties>
-        <Property name="contactid" value=""/>
-        <Property name="label" onValueChanged="labelField.value = label"/>
-        <Property name="phone" onValueChanged="phoneField.value = phone"/>
-        <Property name="email" onValueChanged="emailField.value = email"/>
-    </properties>
-    <VerticalLayout id="layout"
-        anchors.fill="{parent}"
-        spacing="5"
-        margin="5">
-        <ContactField id="labelField"
-            anchors.left="{layout.left}" anchors.leftMargin="5"
-            anchors.right="{layout.right}" anchors.rightMargin="5"
-            label="Name"/>
-        <ContactField id="phoneField"
-            anchors.left="{layout.left}" anchors.leftMargin="5"
-            anchors.right="{layout.right}" anchors.rightMargin="5"
-            icon="../../shared/pics/phone.png"
-            label="Phone"/>
-        <ContactField id="emailField"
-            anchors.left="{layout.left}" anchors.leftMargin="5"
-            anchors.right="{layout.right}" anchors.rightMargin="5"
-            icon="../../shared/pics/email.png"
-            label="Email"/>
-    </VerticalLayout>
-</Item>
diff --git a/examples/declarative/tutorials/contacts/3_Collections/3/ContactField.qml b/examples/declarative/tutorials/contacts/3_Collections/3/ContactField.qml
deleted file mode 100644
index 819914c..0000000
--- a/examples/declarative/tutorials/contacts/3_Collections/3/ContactField.qml
+++ /dev/null
@@ -1,35 +0,0 @@
-<Item id="contactField"
-    clip="true"
-    height="30">
-    <properties>
-        <Property name="label"/>
-        <Property name="icon"/>
-        <Property name="value"/>
-    </properties>
-    <RemoveButton id="removeButton"
-        anchors.right="{parent.right}"
-        anchors.top="{parent.top}" anchors.bottom="{parent.bottom}"
-        expandedWidth="{contactField.width}"
-        onConfirmed="print('Clear field text'); fieldText.text=''"/>
-    <FieldText id="fieldText"
-        width="{contactField.width-70}"
-        anchors.right="{removeButton.left}" anchors.rightMargin="5"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        label="{contactField.label}"
-        text="{contactField.value}"/>
-    <Image
-        anchors.right="{fieldText.left}" anchors.rightMargin="5"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        src="{contactField.icon}"/>
-    <states>
-        <State name="editingText" when="{fieldText.state == 'editing'}">
-            <SetProperty target="{removeButton.anchors}" property="rightMargin" value="-35"/>
-            <SetProperty target="{fieldText}" property="width" value="{contactField.width}"/>
-        </State>
-    </states>
-    <transitions>
-        <Transition fromState='' toState="*" reversible="true">
-            <NumericAnimation properties="width,rightMargin" duration="200"/>
-        </Transition>
-    </transitions>
-</Item>
diff --git a/examples/declarative/tutorials/contacts/3_Collections/3/ContactView.qml b/examples/declarative/tutorials/contacts/3_Collections/3/ContactView.qml
index ec9ff57..a8c5cd0 100644
--- a/examples/declarative/tutorials/contacts/3_Collections/3/ContactView.qml
+++ b/examples/declarative/tutorials/contacts/3_Collections/3/ContactView.qml
@@ -1,3 +1,4 @@
+<?qtfx namespacepath:=../lib ?>
 <Item id="contacts"
     width="240"
     height="230">
diff --git a/examples/declarative/tutorials/contacts/3_Collections/3/FieldText.qml b/examples/declarative/tutorials/contacts/3_Collections/3/FieldText.qml
deleted file mode 100644
index 068590a..0000000
--- a/examples/declarative/tutorials/contacts/3_Collections/3/FieldText.qml
+++ /dev/null
@@ -1,96 +0,0 @@
-<Rect id="fieldText"
-    height="30"
-    radius="5"
-    color="white">
-    <properties>
-        <Property
-            name="text"
-            value=""
-            onValueChanged="reset()"/>
-        <Property
-            name="label"
-            value=""/>
-    </properties>
-    <signals>
-        <Signal name="confirmed"/>
-    </signals>
-    <resources>
-        <Script>
-            function edit() {
-                if (!contacts.mouseGrabbed) {
-                    fieldText.state='editing';
-                    contacts.mouseGrabbed=true;
-                }
-            }
-            function confirm() {
-                fieldText.text = textEdit.text;
-                fieldText.state='';
-                contacts.mouseGrabbed=false;
-                fieldText.confirmed.emit();
-            }
-            function reset() {
-                textEdit.text = fieldText.text;
-                fieldText.state='';
-                contacts.mouseGrabbed=false;
-            }
-        </Script>
-    </resources>
-    <Image id="cancelIcon"
-        width="22" height="22"
-        anchors.right="{parent.right}" anchors.rightMargin="4"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        src="../../shared/pics/cancel.png"
-        opacity="0"/>
-    <Image id="confirmIcon"
-        width="22" height="22"
-        anchors.left="{parent.left}" anchors.leftMargin="4"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        src="../../shared/pics/ok.png"
-        opacity="0"/>
-    <TextEdit id="textEdit"
-        anchors.left="{parent.left}" anchors.leftMargin="5"
-        anchors.right="{parent.right}" anchors.rightMargin="5"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        color="black"
-        font.bold="true"
-        readOnly="true"
-        wrap="false"
-        />
-    <Text id="textLabel"
-        x="5" width="{parent.width-10}"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        hAlign="AlignHCenter"
-        color="#505050"
-        font.italic="true"
-        text="{fieldText.label}"
-        opacity="{textEdit.text == '' ? 1 : 0}">
-        <opacity>
-            <Behaviour>
-                <NumericAnimation property="opacity" duration="250"/>
-            </Behaviour>
-        </opacity>
-    </Text>
-    <MouseRegion anchors.fill="{cancelIcon}" onClicked="reset()"/>
-    <MouseRegion anchors.fill="{confirmIcon}" onClicked="confirm()"/>
-    <MouseRegion
-        id="editRegion"
-        anchors.fill="{textEdit}"
-        onClicked="edit()"/>
-    <states>
-        <State name="editing">
-            <SetProperty target="{confirmIcon}" property="opacity" value="1"/>
-            <SetProperty target="{cancelIcon}" property="opacity" value="1"/>
-            <SetProperty target="{textEdit}" property="readOnly" value="false"/>
-            <SetProperty target="{textEdit}" property="focus" value="true"/>
-            <SetProperty target="{editRegion}" property="opacity" value="0"/>
-            <SetProperty target="{textEdit.anchors}" property="leftMargin" value="39"/>
-            <SetProperty target="{textEdit.anchors}" property="rightMargin" value="39"/>
-        </State>
-    </states>
-    <transitions>
-        <Transition fromState='' toState="*" reversible="true">
-            <NumericAnimation properties="opacity,leftMargin,rightMargin" duration="200"/>
-            <ColorAnimation duration="150"/>
-        </Transition>
-    </transitions>
-</Rect>
diff --git a/examples/declarative/tutorials/contacts/3_Collections/3/RemoveButton.qml b/examples/declarative/tutorials/contacts/3_Collections/3/RemoveButton.qml
deleted file mode 100644
index ad488c1..0000000
--- a/examples/declarative/tutorials/contacts/3_Collections/3/RemoveButton.qml
+++ /dev/null
@@ -1,80 +0,0 @@
-<Rect id="removeButton"
-    width="30" height="30"
-    color="red"
-    radius="5">
-    <properties>
-        <Property name="expandedWidth" value="230"/>
-    </properties>
-    <signals>
-        <Signal name="confirmed"/>
-    </signals>
-    <resources>
-        <Script>
-            function toggle() {
-                print('removeButton.toggle()');
-                if (removeButton.state == 'opened') {
-                    removeButton.state = '';
-                    contacts.mouseGrabbed=false;
-                } else {
-                    if (!contacts.mouseGrabbed) {
-                        removeButton.state = 'opened';
-                        contacts.mouseGrabbed=true;
-                    }
-                }
-            }
-        </Script>
-    </resources>
-    <Image id="trashIcon"
-        width="22" height="22"
-        anchors.right="{parent.right}" anchors.rightMargin="4"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        src="../../shared/pics/trash.png"
-        opacity="1">
-        <MouseRegion
-            anchors.fill="{parent}"
-            onClicked="toggle()"/>
-    </Image>
-    <Image id="cancelIcon"
-        width="22" height="22"
-        anchors.right="{parent.right}" anchors.rightMargin="4"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        src="../../shared/pics/cancel.png"
-        opacity="0">
-        <MouseRegion
-            anchors.fill="{parent}"
-            onClicked="toggle()"/>
-    </Image>
-    <Image id="confirmIcon"
-        width="22" height="22"
-        anchors.left="{parent.left}" anchors.leftMargin="4"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        src="../../shared/pics/ok.png"
-        opacity="0">
-        <MouseRegion
-            anchors.fill="{parent}"
-            onClicked="toggle(); removeButton.confirmed.emit()"/>
-    </Image>
-    <Text id="text"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        anchors.left="{confirmIcon.right}" anchors.leftMargin="4"
-        anchors.right="{cancelIcon.left}" anchors.rightMargin="4"
-        font.bold="true"
-        color="white"
-        hAlign="AlignHCenter"
-        text="Remove"
-        opacity="0"/>
-    <states>
-        <State name="opened">
-            <SetProperty target="{removeButton}" property="width" value="{removeButton.expandedWidth}"/>
-            <SetProperty target="{text}" property="opacity" value="1"/>
-            <SetProperty target="{confirmIcon}" property="opacity" value="1"/>
-            <SetProperty target="{cancelIcon}" property="opacity" value="1"/>
-            <SetProperty target="{trashIcon}" property="opacity" value="0"/>
-        </State>
-    </states>
-    <transitions>
-        <Transition fromState="*" toState="opened" reversible="true">
-            <NumericAnimation properties="opacity,x,width" duration="200"/>
-        </Transition>
-    </transitions>
-</Rect>
diff --git a/examples/declarative/tutorials/contacts/3_Collections/lib/Button.qml b/examples/declarative/tutorials/contacts/3_Collections/lib/Button.qml
new file mode 100644
index 0000000..8290d35
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/3_Collections/lib/Button.qml
@@ -0,0 +1,38 @@
+<Item id="button" width="30" height="30">
+    <properties>
+        <Property name="icon"/>
+    </properties>
+    <signals>
+        <Signal name="clicked"/>
+    </signals>
+    <Rect id="buttonRect"
+        anchors.fill="{parent}"
+        color="lightgreen"
+        radius="5">
+        <Image id="iconImage"
+            src="{button.icon}"
+            anchors.horizontalCenter="{buttonRect.horizontalCenter}"
+            anchors.verticalCenter="{buttonRect.verticalCenter}"/>
+        <MouseRegion id="buttonMouseRegion"
+            anchors.fill="{buttonRect}"
+            onClicked="button.clicked.emit()"/>
+        <states>
+            <State name="pressed" when="{buttonMouseRegion.pressed == true}">
+                <SetProperty target="{buttonRect}" property="color" value="green"/>
+            </State>
+        </states>
+        <transitions>
+            <Transition fromState="*" toState="pressed">
+                <ColorAnimation duration="200"/>
+            </Transition>
+            <Transition fromState="pressed" toState="*">
+                <ColorAnimation duration="1000"/>
+            </Transition>
+        </transitions>
+    </Rect>
+    <opacity>
+        <Behaviour>
+            <NumericAnimation property="opacity" duration="250"/>
+        </Behaviour>
+    </opacity>
+</Item>
diff --git a/examples/declarative/tutorials/contacts/3_Collections/lib/Contact.qml b/examples/declarative/tutorials/contacts/3_Collections/lib/Contact.qml
new file mode 100644
index 0000000..293b3a5
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/3_Collections/lib/Contact.qml
@@ -0,0 +1,28 @@
+<Item id="contactDetails"
+    anchors.fill="{parent}">
+    <properties>
+        <Property name="contactid" value=""/>
+        <Property name="label" onValueChanged="labelField.value = label"/>
+        <Property name="phone" onValueChanged="phoneField.value = phone"/>
+        <Property name="email" onValueChanged="emailField.value = email"/>
+    </properties>
+    <VerticalLayout id="layout"
+        anchors.fill="{parent}"
+        spacing="5"
+        margin="5">
+        <ContactField id="labelField"
+            anchors.left="{layout.left}" anchors.leftMargin="5"
+            anchors.right="{layout.right}" anchors.rightMargin="5"
+            label="Name"/>
+        <ContactField id="phoneField"
+            anchors.left="{layout.left}" anchors.leftMargin="5"
+            anchors.right="{layout.right}" anchors.rightMargin="5"
+            icon="../../shared/pics/phone.png"
+            label="Phone"/>
+        <ContactField id="emailField"
+            anchors.left="{layout.left}" anchors.leftMargin="5"
+            anchors.right="{layout.right}" anchors.rightMargin="5"
+            icon="../../shared/pics/email.png"
+            label="Email"/>
+    </VerticalLayout>
+</Item>
diff --git a/examples/declarative/tutorials/contacts/3_Collections/lib/ContactField.qml b/examples/declarative/tutorials/contacts/3_Collections/lib/ContactField.qml
new file mode 100644
index 0000000..819914c
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/3_Collections/lib/ContactField.qml
@@ -0,0 +1,35 @@
+<Item id="contactField"
+    clip="true"
+    height="30">
+    <properties>
+        <Property name="label"/>
+        <Property name="icon"/>
+        <Property name="value"/>
+    </properties>
+    <RemoveButton id="removeButton"
+        anchors.right="{parent.right}"
+        anchors.top="{parent.top}" anchors.bottom="{parent.bottom}"
+        expandedWidth="{contactField.width}"
+        onConfirmed="print('Clear field text'); fieldText.text=''"/>
+    <FieldText id="fieldText"
+        width="{contactField.width-70}"
+        anchors.right="{removeButton.left}" anchors.rightMargin="5"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        label="{contactField.label}"
+        text="{contactField.value}"/>
+    <Image
+        anchors.right="{fieldText.left}" anchors.rightMargin="5"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        src="{contactField.icon}"/>
+    <states>
+        <State name="editingText" when="{fieldText.state == 'editing'}">
+            <SetProperty target="{removeButton.anchors}" property="rightMargin" value="-35"/>
+            <SetProperty target="{fieldText}" property="width" value="{contactField.width}"/>
+        </State>
+    </states>
+    <transitions>
+        <Transition fromState='' toState="*" reversible="true">
+            <NumericAnimation properties="width,rightMargin" duration="200"/>
+        </Transition>
+    </transitions>
+</Item>
diff --git a/examples/declarative/tutorials/contacts/3_Collections/lib/FieldText.qml b/examples/declarative/tutorials/contacts/3_Collections/lib/FieldText.qml
new file mode 100644
index 0000000..068590a
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/3_Collections/lib/FieldText.qml
@@ -0,0 +1,96 @@
+<Rect id="fieldText"
+    height="30"
+    radius="5"
+    color="white">
+    <properties>
+        <Property
+            name="text"
+            value=""
+            onValueChanged="reset()"/>
+        <Property
+            name="label"
+            value=""/>
+    </properties>
+    <signals>
+        <Signal name="confirmed"/>
+    </signals>
+    <resources>
+        <Script>
+            function edit() {
+                if (!contacts.mouseGrabbed) {
+                    fieldText.state='editing';
+                    contacts.mouseGrabbed=true;
+                }
+            }
+            function confirm() {
+                fieldText.text = textEdit.text;
+                fieldText.state='';
+                contacts.mouseGrabbed=false;
+                fieldText.confirmed.emit();
+            }
+            function reset() {
+                textEdit.text = fieldText.text;
+                fieldText.state='';
+                contacts.mouseGrabbed=false;
+            }
+        </Script>
+    </resources>
+    <Image id="cancelIcon"
+        width="22" height="22"
+        anchors.right="{parent.right}" anchors.rightMargin="4"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        src="../../shared/pics/cancel.png"
+        opacity="0"/>
+    <Image id="confirmIcon"
+        width="22" height="22"
+        anchors.left="{parent.left}" anchors.leftMargin="4"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        src="../../shared/pics/ok.png"
+        opacity="0"/>
+    <TextEdit id="textEdit"
+        anchors.left="{parent.left}" anchors.leftMargin="5"
+        anchors.right="{parent.right}" anchors.rightMargin="5"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        color="black"
+        font.bold="true"
+        readOnly="true"
+        wrap="false"
+        />
+    <Text id="textLabel"
+        x="5" width="{parent.width-10}"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        hAlign="AlignHCenter"
+        color="#505050"
+        font.italic="true"
+        text="{fieldText.label}"
+        opacity="{textEdit.text == '' ? 1 : 0}">
+        <opacity>
+            <Behaviour>
+                <NumericAnimation property="opacity" duration="250"/>
+            </Behaviour>
+        </opacity>
+    </Text>
+    <MouseRegion anchors.fill="{cancelIcon}" onClicked="reset()"/>
+    <MouseRegion anchors.fill="{confirmIcon}" onClicked="confirm()"/>
+    <MouseRegion
+        id="editRegion"
+        anchors.fill="{textEdit}"
+        onClicked="edit()"/>
+    <states>
+        <State name="editing">
+            <SetProperty target="{confirmIcon}" property="opacity" value="1"/>
+            <SetProperty target="{cancelIcon}" property="opacity" value="1"/>
+            <SetProperty target="{textEdit}" property="readOnly" value="false"/>
+            <SetProperty target="{textEdit}" property="focus" value="true"/>
+            <SetProperty target="{editRegion}" property="opacity" value="0"/>
+            <SetProperty target="{textEdit.anchors}" property="leftMargin" value="39"/>
+            <SetProperty target="{textEdit.anchors}" property="rightMargin" value="39"/>
+        </State>
+    </states>
+    <transitions>
+        <Transition fromState='' toState="*" reversible="true">
+            <NumericAnimation properties="opacity,leftMargin,rightMargin" duration="200"/>
+            <ColorAnimation duration="150"/>
+        </Transition>
+    </transitions>
+</Rect>
diff --git a/examples/declarative/tutorials/contacts/3_Collections/lib/RemoveButton.qml b/examples/declarative/tutorials/contacts/3_Collections/lib/RemoveButton.qml
new file mode 100644
index 0000000..ad488c1
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/3_Collections/lib/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>
-- 
cgit v0.12


From 07233ff591197c3d7eb206251c72352b85b7aa73 Mon Sep 17 00:00:00 2001
From: Ian Walters <ian.walters@nokia.com>
Date: Tue, 28 Apr 2009 15:01:48 +1000
Subject: Minor changes

A reformat, a couple of extra examples of loading types,
and a start on the contents of chapter 3.
---
 doc/src/tutorials/declarative.qdoc                 | 66 +++++++++++++++++++++-
 .../tutorials/contacts/2_Reuse/2_Reuse.qml         | 10 +++-
 .../contacts/3_Collections/1/ContactView.qml       |  7 ++-
 3 files changed, 77 insertions(+), 6 deletions(-)

diff --git a/doc/src/tutorials/declarative.qdoc b/doc/src/tutorials/declarative.qdoc
index ae2dcca..e763a56 100644
--- a/doc/src/tutorials/declarative.qdoc
+++ b/doc/src/tutorials/declarative.qdoc
@@ -80,7 +80,7 @@
     This means you should use the duiviewer application provided with
     Qt to run the examples.
 
-    \list 1
+    \list
     \o \l{tutorials/declarative/contacts/part1}{Drawing and Animation}
     \o \l{tutorials/declarative/contacts/part2}{Reusing QML Components}
     \o \l{tutorials/declarative/contacts/part3}{Models, Views and Delegates}
@@ -720,3 +720,67 @@
     the Qt 4.6 release.
 */
 
+/*!
+    \page tutorials-declarative-contacts-part3.html
+    \contentspage {Declarative UI Tutorial}{Contents}
+    \previouspage {tutorials/declarative/contacts/part2}{Chapter 2}
+    \nextpage {tutorials/declarative/contacts/part4}{Chapter 4}
+    \example tutorials/declarative/contacts/part3
+    \title Models, Views and Delegates
+    \tableofcontents
+
+    In the previous chapters we designed a component to display and
+    edit a contact.  The next step is to display a list of those contacts
+    and allow the user to expand individual contacts for editing.
+
+    As the previous elements will not be changed in this section, they have
+    been moved to a lib directory for this tutorial and the relevant
+    name space path has been used.
+
+    \section1 Simple List View
+
+    Displaying lists requires three components.  A model that holds the
+    data displayed, a delegate to indicate how elements are drawn and
+    a view to arrange the elements.
+
+    For the purposes of this tutorial we will be using an SQL query as our
+    data model.  This can be declared in the resources section of
+    the parent item.
+
+    \code
+    <SqlConnection id="contactDatabase"
+        name="qmlConnection"
+        driver="QSQLITE" databaseName="../../shared/contacts.sqlite"/>
+    <SqlQuery id="contactList"
+        connection="{contactDatabase}">
+        <query>SELECT recid, label, email, phone FROM contacts ORDER BY label, recid</query>
+    </SqlQuery>
+    \endcode
+
+    The SqlConnection component describes how to connect to the database in
+    much the same ways as the QSqlDatabase::addDatabase() function is used.
+    In this case an SQLite database is used as it can be connected to as a
+    file, reducing complexity in setting up a database server or credentials.
+
+    The SqlQuery component allows various forms of queries to be described.
+    When the query is a select statement, the component also acts as a model
+    allowing it to provide data to a ListView component.  The query above
+    retrieves the fields recid, label, email and phone from a contacts table,
+    and orders the results by the label of the contact first, and then by 
+    the recid for any contacts with equivalent labels.
+
+    To display the data retrieved from the table, a delegate is needed.  This
+    is also declared in the resources section of the parent item.
+
+    \code
+    <Component id="contactDelegate">
+        <Text
+            x="45" y="12"
+            width="{contactListView.width-45}"
+            height="30"
+            color="black"
+            font.bold="true"
+            text="{model.label}"/>
+    </Component>
+    \endcode
+*/
diff --git a/examples/declarative/tutorials/contacts/2_Reuse/2_Reuse.qml b/examples/declarative/tutorials/contacts/2_Reuse/2_Reuse.qml
index 98fdb86..6210308 100644
--- a/examples/declarative/tutorials/contacts/2_Reuse/2_Reuse.qml
+++ b/examples/declarative/tutorials/contacts/2_Reuse/2_Reuse.qml
@@ -1,9 +1,13 @@
 <Rect id="page" width="{layout.width}" height="{layout.height}" color='white'>
-    <VerticalLayout id="layout" width="{contents.width}">
-        <GroupBox contents="1/ContactField.qml" label="Loading Component"/>
+    <GridLayout id="layout" columns="2" rows="4" width="{contents.width}">
+        <GroupBox contents="1/ContactField.qml" label="Loading: simple"/>
+        <GroupBox contents="1a/ContactField.qml" label="Loading: qml property"/>
+        <GroupBox contents="1b/ContactField.qml" label="Loading: added path"/>
+        <GroupBox contents="1c/ContactField.qml" label="Loading: added namespace"/>
+
         <GroupBox contents="2/ContactField.qml" label="Using properties"/>
         <GroupBox contents="3/ContactField.qml" label="Defining signals"/>
         <GroupBox contents="3/Contact.qml" label="Multiple Items"/>
         <GroupBox contents="4/Contact.qml" label="Mouse Grabbing"/>
-    </VerticalLayout>
+    </GridLayout>
 </Rect>
diff --git a/examples/declarative/tutorials/contacts/3_Collections/1/ContactView.qml b/examples/declarative/tutorials/contacts/3_Collections/1/ContactView.qml
index 5f9abc7..e4cc1ce 100644
--- a/examples/declarative/tutorials/contacts/3_Collections/1/ContactView.qml
+++ b/examples/declarative/tutorials/contacts/3_Collections/1/ContactView.qml
@@ -6,8 +6,11 @@
         <Property name="mouseGrabbed" value="false"/>
     </properties>
     <resources>
-        <SqlConnection id="contactDatabase" name="qmlConnection" driver="QSQLITE" databaseName="../../shared/contacts.sqlite"/>
-        <SqlQuery id="contactList" connection="{contactDatabase}">
+        <SqlConnection id="contactDatabase"
+            name="qmlConnection"
+            driver="QSQLITE" databaseName="../../shared/contacts.sqlite"/>
+        <SqlQuery id="contactList"
+            connection="{contactDatabase}">
             <query>SELECT recid, label, email, phone FROM contacts ORDER BY label, recid</query>
         </SqlQuery>
         <Component id="contactDelegate">
-- 
cgit v0.12


From e69b60890feca37db16df2ec7616d9f58c78fa81 Mon Sep 17 00:00:00 2001
From: Ian Walters <ian.walters@nokia.com>
Date: Wed, 29 Apr 2009 11:13:21 +1000
Subject: Changing over to new qml format, add snippets

Structure hasn't changed, just used qmlconv and started adding
snippet tags
---
 doc/src/tutorials/declarative.qdoc                 | 192 ++++--------------
 .../1_Drawing_and_Animation/1/Removebutton.qml     |  13 +-
 .../1_Drawing_and_animation.qml                    |  43 +++-
 .../1_Drawing_and_Animation/2/RemoveButton.qml     |  28 ++-
 .../1_Drawing_and_Animation/2a/RemoveButton.qml    |  20 ++
 .../1_Drawing_and_Animation/3/RemoveButton.qml     |  62 +++---
 .../1_Drawing_and_Animation/4/RemoveButton.qml     | 161 +++++++++------
 .../1_Drawing_and_Animation/5/RemoveButton.qml     | 173 ++++++++++------
 .../contacts/1_Drawing_and_Animation/GroupBox.qml  |  84 +++++---
 .../tutorials/contacts/2_Reuse/1/ContactField.qml  |  46 +++--
 .../tutorials/contacts/2_Reuse/1/RemoveButton.qml  | 171 ++++++++++------
 .../tutorials/contacts/2_Reuse/1a/ContactField.qml |  51 +++--
 .../tutorials/contacts/2_Reuse/1a/RemoveButton.qml | 171 ++++++++++------
 .../tutorials/contacts/2_Reuse/1b/ContactField.qml |  48 +++--
 .../contacts/2_Reuse/1b/lib/RemoveButton.qml       | 171 ++++++++++------
 .../tutorials/contacts/2_Reuse/2/ContactField.qml  |  50 +++--
 .../tutorials/contacts/2_Reuse/2/RemoveButton.qml  | 184 ++++++++++-------
 .../tutorials/contacts/2_Reuse/2_Reuse.qml         |  57 ++++--
 .../tutorials/contacts/2_Reuse/3/Contact.qml       |  82 +++++---
 .../tutorials/contacts/2_Reuse/3/ContactField.qml  | 103 ++++++----
 .../tutorials/contacts/2_Reuse/3/FieldText.qml     | 219 +++++++++++++--------
 .../tutorials/contacts/2_Reuse/3/RemoveButton.qml  | 184 ++++++++++-------
 .../tutorials/contacts/2_Reuse/4/Contact.qml       |  89 ++++++---
 .../tutorials/contacts/2_Reuse/4/ContactField.qml  |  99 ++++++----
 .../tutorials/contacts/2_Reuse/4/FieldText.qml     | 219 +++++++++++++--------
 .../tutorials/contacts/2_Reuse/4/RemoveButton.qml  | 184 ++++++++++-------
 .../tutorials/contacts/2_Reuse/GroupBox.qml        |  84 +++++---
 .../contacts/3_Collections/1/ContactView.qml       |  75 ++++---
 .../contacts/3_Collections/2/ContactView.qml       | 191 +++++++++++-------
 .../contacts/3_Collections/3/ContactView.qml       | 213 +++++++++++++-------
 .../contacts/3_Collections/3_Collections.qml       |  41 ++--
 .../tutorials/contacts/3_Collections/GroupBox.qml  |  84 +++++---
 .../contacts/3_Collections/lib/Button.qml          |  99 ++++++----
 .../contacts/3_Collections/lib/Contact.qml         |  80 +++++---
 .../contacts/3_Collections/lib/ContactField.qml    |  99 ++++++----
 .../contacts/3_Collections/lib/FieldText.qml       | 219 +++++++++++++--------
 .../contacts/3_Collections/lib/RemoveButton.qml    | 184 ++++++++++-------
 37 files changed, 2674 insertions(+), 1599 deletions(-)
 create mode 100644 examples/declarative/tutorials/contacts/1_Drawing_and_Animation/2a/RemoveButton.qml

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


From 03e18459dbe8dabc6b504ea675260e23c9540f6c Mon Sep 17 00:00:00 2001
From: Aaron Kennedy <aaron.kennedy@nokia.com>
Date: Wed, 29 Apr 2009 14:32:41 +1000
Subject: Re-enable property syntax and add a "default" specifier

---
 src/declarative/qml/parser/javascript.g          |   26 +
 src/declarative/qml/parser/javascriptast_p.h     |    5 +-
 src/declarative/qml/parser/javascriptgrammar.cpp | 1035 +++++++++++-----------
 src/declarative/qml/parser/javascriptgrammar_p.h |   10 +-
 src/declarative/qml/parser/javascriptlexer.cpp   |    2 +-
 src/declarative/qml/parser/javascriptparser.cpp  |  380 ++++----
 src/declarative/qml/parser/javascriptparser_p.h  |    4 +-
 src/declarative/qml/qmlcompiler.cpp              |    4 +-
 src/declarative/qml/qmlscriptparser.cpp          |    5 +
 9 files changed, 768 insertions(+), 703 deletions(-)

diff --git a/src/declarative/qml/parser/javascript.g b/src/declarative/qml/parser/javascript.g
index 961041e..2284e93 100644
--- a/src/declarative/qml/parser/javascript.g
+++ b/src/declarative/qml/parser/javascript.g
@@ -630,6 +630,18 @@ case $rule_number: {
 }   break;
 ./
 
+UiObjectMember: T_PUBLIC T_DEFAULT T_IDENTIFIER T_IDENTIFIER ;
+/.
+case $rule_number: {
+    AST::UiPublicMember *node = makeAstNode<AST::UiPublicMember> (driver->nodePool(), sym(3).sval, sym(4).sval);
+    node->isDefaultMember = true;
+    node->publicToken = loc(1);
+    node->attributeTypeToken = loc(3);
+    node->identifierToken = loc(4);
+    sym(1).Node = node;
+}   break;
+./
+
 UiObjectMember: T_PUBLIC T_IDENTIFIER T_IDENTIFIER T_COLON Expression ;
 /.
 case $rule_number: {
@@ -643,6 +655,20 @@ case $rule_number: {
 }   break;
 ./
 
+UiObjectMember: T_PUBLIC T_DEFAULT T_IDENTIFIER T_IDENTIFIER T_COLON Expression ;
+/.
+case $rule_number: {
+    AST::UiPublicMember *node = makeAstNode<AST::UiPublicMember> (driver->nodePool(), sym(3).sval, sym(4).sval,
+        sym(6).Expression);
+    node->isDefaultMember = true;
+    node->publicToken = loc(1);
+    node->attributeTypeToken = loc(3);
+    node->identifierToken = loc(4);
+    node->colonToken = loc(5);
+    sym(1).Node = node;
+}   break;
+./
+
 UiObjectMember: FunctionDeclaration ;
 /.
 case $rule_number: {
diff --git a/src/declarative/qml/parser/javascriptast_p.h b/src/declarative/qml/parser/javascriptast_p.h
index 69958e5..dabc0e0 100644
--- a/src/declarative/qml/parser/javascriptast_p.h
+++ b/src/declarative/qml/parser/javascriptast_p.h
@@ -2236,13 +2236,13 @@ public:
 
     UiPublicMember(JavaScriptNameIdImpl *memberType,
                    JavaScriptNameIdImpl *name)
-        : memberType(memberType), name(name), expression(0)
+        : memberType(memberType), name(name), expression(0), isDefaultMember(false)
     { kind = K; }
 
     UiPublicMember(JavaScriptNameIdImpl *memberType,
                    JavaScriptNameIdImpl *name,
                    ExpressionNode *expression)
-        : memberType(memberType), name(name), expression(expression)
+        : memberType(memberType), name(name), expression(expression), isDefaultMember(false)
     { kind = K; }
 
     virtual void accept0(Visitor *visitor);
@@ -2251,6 +2251,7 @@ public:
     JavaScriptNameIdImpl *memberType;
     JavaScriptNameIdImpl *name;
     ExpressionNode *expression;
+    bool isDefaultMember;
     SourceLocation publicToken;
     SourceLocation attributeTypeToken;
     SourceLocation identifierToken;
diff --git a/src/declarative/qml/parser/javascriptgrammar.cpp b/src/declarative/qml/parser/javascriptgrammar.cpp
index b06fd32..afbec36 100644
--- a/src/declarative/qml/parser/javascriptgrammar.cpp
+++ b/src/declarative/qml/parser/javascriptgrammar.cpp
@@ -56,312 +56,335 @@ const char *const JavaScriptGrammar::spell [] = {
 const int JavaScriptGrammar::lhs [] = {
   88, 89, 89, 92, 92, 93, 93, 91, 90, 90, 
   95, 95, 97, 97, 96, 94, 96, 94, 96, 94, 
-  96, 94, 94, 94, 94, 94, 98, 98, 103, 103, 
+  96, 94, 94, 94, 94, 94, 94, 94, 98, 98, 
   103, 103, 103, 103, 103, 103, 103, 103, 103, 103, 
-  103, 103, 103, 105, 105, 109, 109, 104, 104, 107, 
-  107, 110, 110, 110, 110, 111, 111, 111, 111, 111, 
+  103, 103, 103, 103, 103, 105, 105, 109, 109, 104, 
+  104, 107, 107, 110, 110, 110, 110, 111, 111, 111, 
   111, 111, 111, 111, 111, 111, 111, 111, 111, 111, 
   111, 111, 111, 111, 111, 111, 111, 111, 111, 111, 
-  111, 111, 111, 111, 111, 111, 112, 112, 113, 113, 
-  113, 113, 113, 116, 116, 117, 117, 117, 117, 115, 
-  115, 118, 118, 119, 119, 120, 120, 120, 121, 121, 
-  121, 121, 121, 121, 121, 121, 121, 121, 122, 122, 
-  122, 122, 123, 123, 123, 124, 124, 124, 124, 125, 
-  125, 125, 125, 125, 125, 125, 126, 126, 126, 126, 
-  126, 126, 127, 127, 127, 127, 127, 128, 128, 128, 
-  128, 128, 129, 129, 130, 130, 131, 131, 132, 132, 
-  133, 133, 134, 134, 135, 135, 136, 136, 137, 137, 
-  138, 138, 139, 139, 140, 140, 108, 108, 141, 141, 
-  142, 142, 142, 142, 142, 142, 142, 142, 142, 142, 
-  142, 142, 100, 100, 143, 143, 144, 144, 145, 145, 
-  99, 99, 99, 99, 99, 99, 99, 99, 99, 99, 
-  99, 99, 99, 99, 99, 146, 161, 161, 160, 160, 
-  102, 102, 162, 162, 163, 163, 165, 165, 164, 166, 
-  169, 167, 167, 170, 168, 168, 147, 148, 148, 149, 
-  149, 150, 150, 150, 150, 150, 150, 150, 151, 151, 
-  151, 151, 152, 152, 152, 152, 153, 153, 154, 156, 
-  171, 171, 174, 174, 172, 172, 175, 173, 155, 157, 
-  157, 158, 158, 158, 176, 177, 159, 159, 101, 114, 
-  181, 181, 178, 178, 179, 179, 182, 183, 183, 184, 
-  184, 180, 180, 106, 106, 185};
+  111, 111, 111, 111, 111, 111, 111, 111, 112, 112, 
+  113, 113, 113, 113, 113, 116, 116, 117, 117, 117, 
+  117, 115, 115, 118, 118, 119, 119, 120, 120, 120, 
+  121, 121, 121, 121, 121, 121, 121, 121, 121, 121, 
+  122, 122, 122, 122, 123, 123, 123, 124, 124, 124, 
+  124, 125, 125, 125, 125, 125, 125, 125, 126, 126, 
+  126, 126, 126, 126, 127, 127, 127, 127, 127, 128, 
+  128, 128, 128, 128, 129, 129, 130, 130, 131, 131, 
+  132, 132, 133, 133, 134, 134, 135, 135, 136, 136, 
+  137, 137, 138, 138, 139, 139, 140, 140, 108, 108, 
+  141, 141, 142, 142, 142, 142, 142, 142, 142, 142, 
+  142, 142, 142, 142, 100, 100, 143, 143, 144, 144, 
+  145, 145, 99, 99, 99, 99, 99, 99, 99, 99, 
+  99, 99, 99, 99, 99, 99, 99, 146, 161, 161, 
+  160, 160, 102, 102, 162, 162, 163, 163, 165, 165, 
+  164, 166, 169, 167, 167, 170, 168, 168, 147, 148, 
+  148, 149, 149, 150, 150, 150, 150, 150, 150, 150, 
+  151, 151, 151, 151, 152, 152, 152, 152, 153, 153, 
+  154, 156, 171, 171, 174, 174, 172, 172, 175, 173, 
+  155, 157, 157, 158, 158, 158, 176, 177, 159, 159, 
+  101, 114, 181, 181, 178, 178, 179, 179, 182, 183, 
+  183, 184, 184, 180, 180, 106, 106, 185};
 
 const int JavaScriptGrammar:: rhs[] = {
   2, 1, 1, 1, 2, 3, 3, 0, 1, 2, 
   1, 3, 2, 3, 4, 4, 2, 2, 5, 5, 
-  3, 3, 3, 5, 1, 1, 1, 3, 1, 1, 
-  1, 1, 1, 1, 1, 1, 1, 3, 3, 5, 
-  3, 4, 3, 2, 4, 1, 2, 0, 1, 3, 
-  5, 1, 1, 1, 1, 1, 1, 1, 1, 1, 
+  3, 3, 3, 4, 5, 6, 1, 1, 1, 3, 
+  1, 1, 1, 1, 1, 1, 1, 1, 1, 3, 
+  3, 5, 3, 4, 3, 2, 4, 1, 2, 0, 
+  1, 3, 5, 1, 1, 1, 1, 1, 1, 1, 
   1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 
   1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 
   1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 
-  4, 3, 5, 1, 2, 4, 4, 4, 3, 0, 
-  1, 1, 3, 1, 1, 1, 2, 2, 1, 2, 
-  2, 2, 2, 2, 2, 2, 2, 2, 1, 3, 
-  3, 3, 1, 3, 3, 1, 3, 3, 3, 1, 
-  3, 3, 3, 3, 3, 3, 1, 3, 3, 3, 
-  3, 3, 1, 3, 3, 3, 3, 1, 3, 3, 
-  3, 3, 1, 3, 1, 3, 1, 3, 1, 3, 
+  1, 1, 4, 3, 5, 1, 2, 4, 4, 4, 
+  3, 0, 1, 1, 3, 1, 1, 1, 2, 2, 
+  1, 2, 2, 2, 2, 2, 2, 2, 2, 2, 
+  1, 3, 3, 3, 1, 3, 3, 1, 3, 3, 
+  3, 1, 3, 3, 3, 3, 3, 3, 1, 3, 
+  3, 3, 3, 3, 1, 3, 3, 3, 3, 1, 
+  3, 3, 3, 3, 1, 3, 1, 3, 1, 3, 
   1, 3, 1, 3, 1, 3, 1, 3, 1, 3, 
-  1, 3, 1, 5, 1, 5, 1, 3, 1, 3, 
-  1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 
-  1, 1, 1, 3, 0, 1, 1, 3, 0, 1, 
-  1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 
-  1, 1, 1, 1, 1, 3, 1, 2, 0, 1, 
-  3, 3, 1, 1, 1, 3, 1, 3, 2, 2, 
-  2, 0, 1, 2, 0, 1, 1, 2, 2, 7, 
-  5, 7, 7, 5, 9, 10, 7, 8, 2, 2, 
-  3, 3, 2, 2, 3, 3, 3, 3, 5, 5, 
-  3, 5, 1, 2, 0, 1, 4, 3, 3, 3, 
-  3, 3, 3, 4, 5, 2, 2, 2, 8, 8, 
-  1, 3, 0, 1, 0, 1, 1, 1, 2, 1, 
-  1, 0, 1, 0, 1, 2};
+  1, 3, 1, 3, 1, 5, 1, 5, 1, 3, 
+  1, 3, 1, 1, 1, 1, 1, 1, 1, 1, 
+  1, 1, 1, 1, 1, 3, 0, 1, 1, 3, 
+  0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 
+  1, 1, 1, 1, 1, 1, 1, 3, 1, 2, 
+  0, 1, 3, 3, 1, 1, 1, 3, 1, 3, 
+  2, 2, 2, 0, 1, 2, 0, 1, 1, 2, 
+  2, 7, 5, 7, 7, 5, 9, 10, 7, 8, 
+  2, 2, 3, 3, 2, 2, 3, 3, 3, 3, 
+  5, 5, 3, 5, 1, 2, 0, 1, 4, 3, 
+  3, 3, 3, 3, 3, 4, 5, 2, 2, 2, 
+  8, 8, 1, 3, 0, 1, 0, 1, 1, 1, 
+  2, 1, 1, 0, 1, 0, 1, 2};
 
 const int JavaScriptGrammar::action_default [] = {
-  8, 2, 0, 0, 4, 3, 0, 296, 0, 6, 
-  7, 5, 25, 223, 0, 27, 0, 224, 9, 1, 
-  0, 0, 26, 0, 283, 284, 0, 281, 0, 282, 
-  0, 285, 126, 193, 157, 165, 161, 201, 208, 105, 
-  177, 207, 215, 203, 153, 0, 204, 286, 0, 291, 
-  90, 205, 206, 211, 106, 169, 173, 94, 123, 104, 
-  109, 89, 143, 209, 130, 288, 287, 290, 212, 0, 
-  0, 0, 0, 36, 37, 0, 33, 0, 292, 30, 
-  0, 294, 48, 0, 0, 0, 0, 0, 31, 34, 
-  0, 0, 195, 237, 35, 0, 29, 0, 0, 32, 
-  0, 0, 0, 0, 0, 213, 214, 119, 202, 210, 
-  0, 0, 106, 125, 292, 30, 294, 108, 107, 0, 
-  0, 0, 121, 122, 120, 0, 293, 283, 0, 0, 
-  285, 0, 280, 0, 295, 0, 55, 56, 57, 58, 
-  83, 59, 84, 60, 61, 62, 63, 64, 65, 66, 
-  67, 52, 68, 69, 70, 71, 72, 54, 85, 73, 
-  53, 74, 75, 76, 77, 78, 79, 80, 81, 82, 
-  86, 0, 50, 0, 0, 42, 0, 51, 41, 124, 
-  0, 154, 0, 0, 0, 0, 144, 0, 0, 0, 
-  0, 0, 0, 134, 0, 0, 0, 128, 129, 127, 
-  132, 136, 135, 133, 131, 146, 145, 147, 0, 162, 
-  0, 158, 0, 0, 100, 99, 88, 87, 0, 0, 
-  98, 194, 101, 0, 102, 0, 103, 97, 238, 239, 
-  279, 0, 190, 183, 181, 188, 189, 187, 186, 192, 
-  185, 184, 182, 191, 178, 0, 166, 0, 0, 170, 
-  0, 0, 174, 0, 0, 100, 92, 0, 91, 0, 
-  96, 289, 253, 0, 254, 255, 256, 249, 0, 250, 
-  251, 252, 277, 278, 110, 0, 0, 0, 0, 0, 
-  242, 243, 199, 197, 159, 167, 163, 179, 155, 200, 
-  0, 106, 171, 175, 148, 137, 0, 0, 156, 0, 
-  0, 0, 0, 149, 0, 0, 0, 0, 0, 141, 
-  139, 142, 140, 138, 151, 150, 152, 0, 164, 0, 
-  160, 0, 198, 106, 0, 180, 195, 196, 0, 195, 
-  0, 0, 245, 0, 0, 0, 247, 0, 168, 0, 
-  0, 172, 0, 0, 176, 235, 0, 227, 236, 230, 
-  0, 234, 0, 195, 228, 0, 195, 0, 0, 246, 
-  0, 0, 0, 248, 293, 0, 269, 0, 0, 0, 
-  241, 0, 240, 217, 220, 0, 56, 83, 59, 84, 
-  61, 62, 33, 66, 67, 30, 68, 71, 31, 34, 
-  195, 35, 74, 29, 76, 32, 78, 79, 80, 81, 
-  82, 86, 218, 216, 94, 95, 100, 0, 93, 0, 
-  257, 258, 0, 0, 0, 260, 265, 263, 266, 0, 
-  0, 264, 265, 0, 261, 0, 262, 219, 268, 0, 
-  219, 267, 0, 270, 271, 0, 219, 272, 273, 0, 
-  0, 274, 0, 0, 0, 275, 276, 112, 111, 0, 
-  0, 0, 244, 0, 0, 0, 259, 0, 49, 0, 
-  46, 48, 39, 0, 45, 40, 47, 44, 38, 0, 
-  43, 116, 114, 118, 115, 113, 117, 0, 18, 13, 
-  0, 14, 10, 0, 23, 0, 24, 0, 0, 22, 
-  30, 48, 16, 27, 0, 11, 0, 17, 0, 20, 
-  12, 0, 21, 30, 48, 15, 0, 19, 28, 232, 
-  225, 0, 233, 229, 0, 231, 221, 0, 222, 226};
+  8, 2, 0, 0, 4, 3, 0, 298, 0, 6, 
+  7, 5, 27, 225, 0, 29, 0, 226, 9, 1, 
+  0, 0, 28, 0, 285, 286, 0, 283, 0, 284, 
+  0, 287, 128, 195, 159, 167, 163, 203, 210, 107, 
+  179, 209, 217, 205, 155, 0, 206, 288, 0, 293, 
+  92, 207, 208, 213, 108, 171, 175, 96, 125, 106, 
+  111, 91, 145, 211, 132, 290, 289, 292, 214, 0, 
+  0, 0, 0, 38, 39, 0, 35, 0, 294, 32, 
+  0, 296, 50, 0, 0, 0, 0, 0, 33, 36, 
+  0, 0, 197, 239, 37, 0, 31, 0, 0, 34, 
+  0, 0, 0, 0, 0, 215, 216, 121, 204, 212, 
+  0, 0, 108, 127, 294, 32, 296, 110, 109, 0, 
+  0, 0, 123, 124, 122, 0, 295, 285, 0, 0, 
+  287, 0, 282, 0, 297, 0, 57, 58, 59, 60, 
+  85, 61, 86, 62, 63, 64, 65, 66, 67, 68, 
+  69, 54, 70, 71, 72, 73, 74, 56, 87, 75, 
+  55, 76, 77, 78, 79, 80, 81, 82, 83, 84, 
+  88, 0, 52, 0, 0, 44, 0, 53, 43, 126, 
+  0, 156, 0, 0, 0, 0, 146, 0, 0, 0, 
+  0, 0, 0, 136, 0, 0, 0, 130, 131, 129, 
+  134, 138, 137, 135, 133, 148, 147, 149, 0, 164, 
+  0, 160, 0, 0, 102, 101, 90, 89, 0, 0, 
+  100, 196, 103, 0, 104, 0, 105, 99, 240, 241, 
+  281, 0, 192, 185, 183, 190, 191, 189, 188, 194, 
+  187, 186, 184, 193, 180, 0, 168, 0, 0, 172, 
+  0, 0, 176, 0, 0, 102, 94, 0, 93, 0, 
+  98, 291, 255, 0, 256, 257, 258, 251, 0, 252, 
+  253, 254, 279, 280, 112, 0, 0, 0, 0, 0, 
+  244, 245, 201, 199, 161, 169, 165, 181, 157, 202, 
+  0, 108, 173, 177, 150, 139, 0, 0, 158, 0, 
+  0, 0, 0, 151, 0, 0, 0, 0, 0, 143, 
+  141, 144, 142, 140, 153, 152, 154, 0, 166, 0, 
+  162, 0, 200, 108, 0, 182, 197, 198, 0, 197, 
+  0, 0, 247, 0, 0, 0, 249, 0, 170, 0, 
+  0, 174, 0, 0, 178, 237, 0, 229, 238, 232, 
+  0, 236, 0, 197, 230, 0, 197, 0, 0, 248, 
+  0, 0, 0, 250, 295, 0, 271, 0, 0, 0, 
+  243, 0, 242, 219, 222, 0, 58, 85, 61, 86, 
+  63, 64, 35, 68, 69, 32, 70, 73, 33, 36, 
+  197, 37, 76, 31, 78, 34, 80, 81, 82, 83, 
+  84, 88, 220, 218, 96, 97, 102, 0, 95, 0, 
+  259, 260, 0, 0, 0, 262, 267, 265, 268, 0, 
+  0, 266, 267, 0, 263, 0, 264, 221, 270, 0, 
+  221, 269, 0, 272, 273, 0, 221, 274, 275, 0, 
+  0, 276, 0, 0, 0, 277, 278, 114, 113, 0, 
+  0, 0, 246, 0, 0, 0, 261, 0, 51, 0, 
+  48, 50, 41, 0, 47, 42, 49, 46, 40, 0, 
+  45, 118, 116, 120, 117, 115, 119, 0, 18, 13, 
+  0, 14, 10, 0, 0, 0, 24, 0, 26, 23, 
+  0, 25, 0, 0, 22, 32, 50, 16, 29, 0, 
+  11, 0, 17, 0, 20, 12, 0, 21, 32, 50, 
+  15, 0, 19, 30, 234, 227, 0, 235, 231, 0, 
+  233, 223, 0, 224, 228};
 
 const int JavaScriptGrammar::goto_default [] = {
-  2, 6, 19, 1, 5, 4, 18, 494, 495, 478, 
+  2, 6, 19, 1, 5, 4, 18, 499, 500, 478, 
   20, 373, 45, 12, 108, 61, 459, 457, 135, 134, 
   33, 458, 133, 136, 215, 57, 50, 223, 59, 39, 
   222, 54, 60, 107, 58, 32, 64, 62, 294, 44, 
   288, 34, 284, 36, 286, 35, 285, 55, 292, 56, 
   293, 40, 287, 283, 324, 409, 289, 290, 37, 43, 
   46, 51, 52, 41, 38, 63, 109, 53, 68, 105, 
-  106, 42, 375, 374, 21, 511, 510, 346, 347, 513, 
-  349, 512, 348, 415, 419, 422, 418, 417, 437, 438, 
+  106, 42, 375, 374, 21, 516, 515, 346, 347, 518, 
+  349, 517, 348, 415, 419, 422, 418, 417, 437, 438, 
   26, 48, 125, 25, 47, 66, 65, 0};
 
 const int JavaScriptGrammar::action_index [] = {
-  -25, -88, 89, 70, -88, -15, 251, -88, 85, -88, 
-  -88, -88, -88, -88, 56, 48, 46, -88, -88, 262, 
-  127, 72, -88, -17, -9, 20, -29, -88, -3, -88, 
-  -6, 1289, 112, -88, 13, -44, -76, -88, -88, 212, 
-  -88, -88, -88, -88, 253, 228, -88, -88, -10, -88, 
-  -88, -88, -88, -88, 347, 53, 87, 154, 274, -88, 
-  -88, -88, 287, -88, 191, -88, 1289, -88, -88, 199, 
-  194, 115, 557, -88, -88, 1205, -88, 66, 71, 77, 
-  63, 1541, 79, 557, 557, 557, 480, 557, -88, -88, 
-  557, 557, 557, -88, -88, 60, -88, 557, 557, -88, 
-  41, 557, 557, 42, 44, -88, -88, -88, -88, -88, 
-  557, 557, 83, 177, -24, -88, 1037, -88, -88, 557, 
-  557, 557, -88, -88, -88, 25, -88, -18, -58, -8, 
-  1289, -26, -88, 58, 64, 67, -88, -88, -88, -88, 
+  -8, -88, 76, 23, -88, 35, 267, -88, 62, -88, 
+  -88, -88, -88, -88, 49, 58, 122, -88, -88, 257, 
+  124, -17, -88, -22, -16, 12, -39, -88, 0, -88, 
+  -2, 1331, 132, -88, 8, -47, -69, -88, -88, 209, 
+  -88, -88, -88, -88, 255, 177, -88, -88, -10, -88, 
+  -88, -88, -88, -88, 522, 45, 92, 236, 224, -88, 
+  -88, -88, 437, -88, 215, -88, 1331, -88, -88, 164, 
+  206, 107, 599, -88, -88, 1247, -88, 78, 77, 87, 
+  69, 1583, 60, 599, 599, 599, 398, 599, -88, -88, 
+  599, 599, 599, -88, -88, 80, -88, 599, 599, -88, 
+  63, 599, 599, 66, 59, -88, -88, -88, -88, -88, 
+  599, 599, 123, 174, -1, -88, 1079, -88, -88, 599, 
+  599, 599, -88, -88, -88, 16, -88, -24, -54, -11, 
+  1331, 18, -88, 86, 84, 20, -88, -88, -88, -88, 
   -88, -88, -88, -88, -88, -88, -88, -88, -88, -88, 
   -88, -88, -88, -88, -88, -88, -88, -88, -88, -88, 
   -88, -88, -88, -88, -88, -88, -88, -88, -88, -88, 
-  -88, 557, -88, 1121, 55, -88, 557, -88, -88, 175, 
-  557, 250, 557, 557, 557, 557, 404, 557, 557, 557, 
-  557, 557, 557, 158, 557, 557, 557, 80, 73, 81, 
-  197, 238, 220, 159, 167, 277, 404, 317, 557, 14, 
-  557, 90, 953, 557, 557, -88, -88, -88, 108, 557, 
-  -88, -88, 65, 49, -88, 557, -88, -88, -88, -88, 
-  -88, 557, -88, -88, -88, -88, -88, -88, -88, -88, 
-  -88, -88, -88, -88, -88, 557, 45, 557, 557, 75, 
-  69, 557, -88, 953, 557, 557, -88, 153, -88, 6, 
-  -88, -88, -88, 105, -88, -88, -88, -88, 111, -88, 
-  -88, -88, -88, -88, -88, 21, 62, 557, 122, 95, 
-  -88, -88, 634, -88, 39, -30, -59, -88, 259, 8, 
-  -46, 417, 19, 125, 339, 188, -7, 557, 248, 557, 
-  557, 557, 557, 339, 557, 557, 557, 557, 557, 187, 
-  166, 192, 206, 232, 339, 339, 339, 557, -59, 557, 
-  39, 557, -88, 380, 557, -88, 557, -5, -60, 557, 
-  -48, 1205, -88, 557, 142, 1205, -88, 557, -38, 557, 
-  557, 7, 0, 557, -88, 17, 84, 22, -88, -88, 
-  557, -88, 27, 557, -88, -13, 557, 52, 1205, -88, 
-  557, 102, 1205, -88, 28, 1205, -88, 557, 100, 1205, 
-  34, 1205, -88, -88, 1205, -19, 139, 9, 149, 82, 
-  557, 1205, 23, 1, 119, 36, 10, 480, 40, 120, 
-  869, 35, 5, 26, 557, 37, -1, 557, 29, 557, 
-  31, 33, -88, -88, 205, -88, 557, -11, -88, 78, 
-  -88, -88, 557, 98, 38, -88, 47, -88, 54, 198, 
-  557, -88, 30, 32, -88, -4, -88, 1205, -88, 107, 
-  1205, -88, 213, -88, -88, 113, 1205, 43, -88, 18, 
-  24, -88, -21, -54, -20, -88, -88, -88, -88, 557, 
-  143, 1205, -88, 557, 110, 1205, -88, 118, 16, 788, 
-  -88, 15, -88, 711, -88, -88, -88, -88, -88, 121, 
-  -88, -88, -88, -88, -88, -88, -88, 298, -88, -88, 
-  284, -88, -88, 59, 76, 557, 74, 1373, 57, -88, 
-  147, 130, -88, 61, 97, -88, 96, -88, 50, -88, 
-  -88, 1457, -88, 116, 99, -88, 109, -88, -88, 51, 
-  -88, 190, -88, -88, 557, -88, -88, 68, -88, -88, 
+  -88, 599, -88, 1163, 52, -88, 599, -88, -88, 191, 
+  599, 266, 599, 599, 599, 599, 329, 599, 599, 599, 
+  599, 599, 599, 157, 599, 599, 599, 120, 103, 90, 
+  196, 192, 175, 163, 195, 345, 366, 312, 599, 22, 
+  599, 73, 995, 599, 599, -88, -88, -88, 148, 599, 
+  -88, -88, 64, 48, -88, 599, -88, -88, -88, -88, 
+  -88, 599, -88, -88, -88, -88, -88, -88, -88, -88, 
+  -88, -88, -88, -88, -88, 599, 34, 599, 599, 171, 
+  74, 599, -88, 995, 599, 599, -88, 154, -88, 40, 
+  -88, -88, -88, 116, -88, -88, -88, -88, 88, -88, 
+  -88, -88, -88, -88, -88, 37, 65, 599, 129, 97, 
+  -88, -88, 676, -88, 53, -33, -59, -88, 258, 11, 
+  -43, 478, 85, 113, 282, 225, -13, 599, 247, 599, 
+  599, 599, 599, 286, 599, 599, 599, 599, 599, 219, 
+  222, 231, 307, 237, 372, 372, 372, 599, -46, 599, 
+  24, 599, -88, 522, 599, -88, 599, 15, -50, 599, 
+  -60, 1247, -88, 599, 156, 1247, -88, 599, -44, 599, 
+  599, 85, 1, 599, -88, -14, 119, -29, -88, -88, 
+  599, -88, 6, 599, -88, -3, 599, -5, 1247, -88, 
+  599, 101, 1247, -88, 26, 1247, -88, 599, 95, 1247, 
+  51, 1247, -88, -88, 1247, 14, 146, 31, 150, 72, 
+  599, 1247, 57, 27, 81, 54, 29, 406, 44, 43, 
+  834, 30, 7, 32, 599, 25, 5, 599, 4, 599, 
+  10, 13, -88, -88, 244, -88, 599, -12, -88, 83, 
+  -88, -88, 599, 139, 9, -88, 36, -88, 21, 126, 
+  599, -88, 39, 33, -88, -21, -88, 1247, -88, 118, 
+  1247, -88, 221, -88, -88, 109, 1247, 46, -88, 17, 
+  3, -88, 28, -4, -9, -88, -88, -88, -88, 599, 
+  145, 1247, -88, 599, 149, 1247, -88, 162, 2, 753, 
+  -88, 19, -88, 911, -88, -88, -88, -88, -88, 127, 
+  -88, -88, -88, -88, -88, -88, -88, 302, -88, -88, 
+  291, -88, -88, 41, 42, 61, 79, 599, 75, 82, 
+  599, 71, 1499, 56, -88, 115, 111, -88, 47, 110, 
+  -88, 106, -88, 70, -88, -88, 1415, -88, 105, 99, 
+  -88, 96, -88, -88, 67, -88, 166, -88, -88, 599, 
+  -88, -88, 68, -88, -88, 
 
-  -98, -98, -98, -98, -98, 30, 13, -98, -98, -98, 
-  -98, -98, -98, -98, -98, -98, -98, -98, -98, 87, 
+  -98, -98, -98, -98, -98, 2, 9, -98, -98, -98, 
+  -98, -98, -98, -98, -98, -98, -98, -98, -98, 70, 
   -98, -98, -98, -98, -98, -98, -98, -98, -98, -98, 
-  -98, 83, -98, -98, -98, -98, -98, -98, -98, -98, 
+  -98, 157, -98, -98, -98, -98, -98, -98, -98, -98, 
   -98, -98, -98, -98, -98, -98, -98, -98, -98, -98, 
-  -98, -98, -98, -98, -43, -98, -98, -98, -98, -98, 
-  -98, -98, -98, -98, -98, -98, 184, -98, -98, -98, 
-  -98, -98, 113, -98, -98, -9, -98, -98, -98, -98, 
-  -98, -98, -98, 42, 116, 112, 127, 146, -98, -98, 
-  151, 147, 40, -98, -98, -98, -98, 37, 89, -98, 
-  -10, 90, 86, -98, -98, -98, -98, -98, -98, -98, 
-  77, 94, -98, -98, -98, -98, -98, -98, -98, 106, 
-  103, 98, -98, -98, -98, -98, -98, -47, -98, -98, 
-  253, -98, -98, -98, -98, -98, -98, -98, -98, -98, 
+  -98, -98, -98, -98, -39, -98, -98, -98, -98, -98, 
+  -98, -98, -98, -98, -98, -98, 258, -98, -98, -98, 
+  -98, -98, 100, -98, -98, 15, -98, -98, -98, -98, 
+  -98, -98, -98, 51, 81, 90, 91, 103, -98, -98, 
+  76, 60, 44, -98, -98, -98, -98, 50, 114, -98, 
+  -13, 133, 125, -98, -98, -98, -98, -98, -98, -98, 
+  171, 128, -98, -98, -98, -98, -98, -98, -98, 107, 
+  120, 117, -98, -98, -98, -98, -98, -61, -98, -98, 
+  173, -98, -98, -98, -98, -98, -98, -98, -98, -98, 
   -98, -98, -98, -98, -98, -98, -98, -98, -98, -98, 
   -98, -98, -98, -98, -98, -98, -98, -98, -98, -98, 
   -98, -98, -98, -98, -98, -98, -98, -98, -98, -98, 
-  -98, -7, -98, 0, -98, -98, -3, -98, -98, -98, 
-  136, -98, 117, 119, 132, 134, -98, 130, 49, 36, 
-  35, 61, 64, -98, 47, 46, 38, -98, -98, -98, 
-  -98, -98, -98, -98, -98, -98, -98, -98, 59, -98, 
-  58, -98, 24, 32, 17, -98, -98, -98, -98, 21, 
-  -98, -98, -98, -98, -98, 8, -98, -98, -98, -98, 
-  -98, 4, -98, -98, -98, -98, -98, -98, -98, -98, 
-  -98, -98, -98, -98, -98, 60, -98, 57, -19, -98, 
-  -98, -17, -98, 118, 44, 133, -98, -98, -98, -98, 
+  -98, 34, -98, 36, -98, -98, 40, -98, -98, -98, 
+  63, -98, 55, 64, 66, 68, -98, 54, 42, 43, 
+  46, 52, 93, -98, 97, 95, 69, -98, -98, -98, 
+  -98, -98, -98, -98, -98, -98, -98, -98, 75, -98, 
+  79, -98, 19, 32, 16, -98, -98, -98, -98, 12, 
+  -98, -98, -98, -98, -98, 27, -98, -98, -98, -98, 
+  -98, 33, -98, -98, -98, -98, -98, -98, -98, -98, 
+  -98, -98, -98, -98, -98, 80, -98, 96, 35, -98, 
+  -98, 39, -98, 47, 37, 48, -98, -98, -98, -98, 
   -98, -98, -98, -98, -98, -98, -98, -98, -98, -98, 
-  -98, -98, -98, -98, -98, -98, -98, 3, -98, -98, 
-  -98, -98, 67, -98, -98, -98, -98, -98, -98, -98, 
-  -98, -98, -98, -98, -98, -98, -98, 186, -98, 196, 
-  183, 177, 187, -98, 82, 76, 79, 96, 99, -98, 
-  -98, -98, -98, -98, -98, -98, -98, 168, -98, 158, 
-  -98, 156, -98, -98, 175, -98, 102, -98, -98, 104, 
-  -98, 25, -98, 27, -98, 29, -98, 155, -98, 154, 
-  157, -98, -98, 167, -98, -98, -98, -98, -98, -98, 
-  193, -98, -48, 126, -98, -98, 128, -98, 15, -98, 
-  19, -98, 22, -98, -98, 23, -98, 20, -98, 18, 
-  -98, 34, -98, -98, 53, -98, -98, -98, -98, -98, 
-  93, 52, -98, -98, -98, -98, -98, 81, -98, -98, 
-  45, -98, -98, -98, 43, -98, -35, 137, -98, 141, 
-  -98, -98, -98, -98, -98, -98, 131, -98, -98, -98, 
-  -98, -98, -8, -98, -98, -98, -98, -98, -77, -98, 
-  6, -98, -76, -98, -98, -98, -98, -52, -98, -98, 
-  -51, -98, -98, -98, -98, -98, -98, -75, -98, -98, 
-  -46, -98, -98, -98, -49, -98, -98, -98, -98, 7, 
-  -98, 5, -98, -12, -98, 75, -98, -98, -98, -14, 
-  -98, -11, -98, -13, -98, -98, -98, -98, -98, -98, 
-  -98, -98, -98, -98, -98, -98, -98, 73, -98, -98, 
-  56, -98, -98, -98, -98, 41, -98, 39, -98, -98, 
-  50, 48, -98, 51, -98, -98, -98, -98, 66, -98, 
-  -98, 31, -98, 16, 166, -98, -98, -98, -98, -98, 
-  -98, -98, -98, -98, 26, -98, -98, -38, -98, -98};
+  -98, -98, -98, -98, -98, -98, -98, 31, -98, -98, 
+  -98, -98, 86, -98, -98, -98, -98, -98, -98, -98, 
+  -98, -98, -98, -98, -98, -98, -98, 190, -98, 176, 
+  172, 180, 168, -98, 124, 136, 138, 106, 121, -98, 
+  -98, -98, -98, -98, -98, -98, -98, 152, -98, 159, 
+  -98, 186, -98, -98, 192, -98, 134, -98, -98, 137, 
+  -98, 30, -98, 18, -98, 22, -98, 196, -98, 188, 
+  184, -98, -98, 145, -98, -98, -98, -98, -98, -98, 
+  144, -98, -51, 127, -98, -98, 123, -98, 23, -98, 
+  25, -98, 28, -98, -98, 29, -98, 26, -98, 24, 
+  -98, 17, -98, -98, 41, -98, -98, -98, -98, -98, 
+  130, 53, -98, -98, -98, -98, -98, 116, -98, -98, 
+  45, -98, -98, -98, 49, -98, -12, 65, -98, 56, 
+  -98, -98, -98, -98, -98, -98, 88, -98, -98, -98, 
+  -98, -98, 38, -98, -98, -98, -98, -98, -81, -98, 
+  -7, -98, -83, -98, -98, -98, -98, -72, -98, -98, 
+  -64, -98, -98, -98, -98, -98, -98, -70, -98, -98, 
+  -42, -98, -98, -98, -33, -98, -98, -98, -98, -2, 
+  -98, 0, -98, 5, -98, 7, -98, -98, -98, -6, 
+  -98, 6, -98, 11, -98, -98, -98, -98, -98, -98, 
+  -98, -98, -98, -98, -98, -98, -98, 163, -98, -98, 
+  165, -98, -98, -98, -98, -98, -98, -8, -98, -98, 
+  8, -98, 10, -98, -98, 4, -1, -98, 3, -98, 
+  -98, -98, -98, 57, -98, -98, 13, -98, 104, 59, 
+  -98, -98, -98, -98, -98, -98, -98, -98, -98, -17, 
+  -98, -98, -74, -98, -98};
 
 const int JavaScriptGrammar::action_info [] = {
-  210, 329, 129, 219, 208, 126, 444, 343, 443, 337, 
-  317, 27, 331, 436, 180, 326, 321, 319, 317, 24, 
-  27, 337, 345, 460, 466, 130, 29, 31, 28, 132, 
-  -64, 30, 436, -75, 350, 420, 403, 282, -223, 427, 
-  297, 412, -53, -52, -77, 230, 367, -72, 356, 408, 
-  371, 426, 420, 360, 442, 245, 345, 436, -224, 420, 
-  3, 127, 176, 440, 24, 171, 260, 449, 514, 453, 
-  3, 416, 173, 225, 436, 483, 251, 245, 449, 493, 
-  453, 477, 219, 485, 365, 23, 508, 460, 484, 7, 
-  210, 180, 352, 208, 477, 276, 412, 509, 277, 367, 
-  364, 509, 282, 501, 0, 498, 219, 460, 219, 227, 
-  219, 488, 358, 110, 430, 219, 219, 498, 219, 439, 
-  110, 110, 178, 365, 111, 117, 461, -54, 493, 219, 
-  219, 111, 111, 440, 487, 8, 118, 247, 460, 411, 
-  410, 248, 488, 273, 272, 353, 10, 9, 126, 477, 
-  219, 219, 110, 499, 365, -292, 281, 280, 414, 493, 
-  369, 219, 362, 111, 220, 507, 266, 265, 263, 253, 
-  455, 0, 271, 270, 462, 339, 273, 272, 268, 340, 
-  477, 470, 279, 194, 194, 195, 195, 119, 254, 119, 
-  255, 194, 194, 195, 195, 0, 196, 196, 517, 0, 
-  264, 262, 335, 451, 196, 196, 0, 0, 423, 258, 
-  269, 267, 194, 194, 195, 195, 194, 194, 195, 195, 
-  253, 219, 194, 268, 195, 196, 196, 212, 263, 196, 
-  196, 194, 120, 195, 120, 196, 219, 0, 121, 254, 
-  121, 406, 0, 0, 196, 194, 213, 195, 214, 0, 
-  0, 518, 516, 424, 0, 269, 267, 194, 196, 195, 
-  264, 262, 0, 194, 0, 195, 299, 300, 182, 183, 
-  196, 182, 183, 14, 434, 433, 196, 299, 300, 0, 
-  15, 0, 0, 0, 14, 0, 119, 0, 0, 229, 
-  228, 15, 0, 301, 302, 184, 185, 0, 184, 185, 
-  187, 188, 0, 0, 301, 302, 14, 0, 189, 190, 
-  187, 188, 191, 15, 192, 0, 0, 0, 189, 190, 
-  14, 0, 191, 17, 192, 0, 0, 15, 0, 0, 
-  0, 120, 13, 0, 17, 16, 0, 121, 0, 481, 
-  187, 188, 0, 13, 0, 0, 16, 0, 189, 190, 
-  232, 0, 191, 479, 192, 0, 17, 0, 0, 0, 
-  233, 0, 304, 305, 234, 13, 0, 0, 16, 0, 
-  17, 306, 0, 235, 307, 236, 308, 0, 0, 13, 
-  0, 0, 16, 232, 0, 0, 237, 0, 238, 117, 
-  0, 0, 0, 233, 0, 0, 239, 234, 0, 240, 
-  118, 0, 0, 0, 0, 241, 235, 0, 236, 0, 
-  0, 242, 0, 0, 0, 0, 0, 0, 0, 237, 
-  232, 238, 117, 0, 243, 0, 0, 187, 188, 239, 
-  233, 0, 240, 118, 234, 189, 190, 0, 241, 191, 
-  0, 192, 0, 235, 242, 236, 0, 0, 333, 0, 
-  0, 0, 0, 0, 0, 0, 237, 243, 238, 117, 
-  0, 0, 0, 0, 0, 0, 239, 0, 0, 240, 
-  118, 0, 0, 0, 0, 241, 0, 0, 0, 0, 
-  0, 242, 0, 0, 0, 0, 0, 0, 0, 0, 
-  0, 0, 73, 74, 243, 0, 0, 0, 0, 0, 
-  0, 0, 114, 0, 0, 0, 0, 0, 0, 115, 
-  0, 0, 0, 116, 82, 0, 83, 0, 0, 0, 
-  0, 0, 0, 86, 0, 0, 0, 89, 0, 0, 
+  331, 208, 360, 350, 317, 27, 129, 210, 343, 180, 
+  466, 329, 514, 27, 24, 317, 345, 319, 326, 321, 
+  28, 30, 130, 219, 436, 297, 420, 460, 126, 29, 
+  319, 31, -79, -226, 426, 345, 436, -55, 436, -77, 
+  427, 420, 416, 412, 420, 230, 449, 245, 408, 453, 
+  -56, -74, 127, 442, 297, 358, 444, 443, 356, 176, 
+  -225, -54, 24, 282, -66, 367, 440, 371, 460, 403, 
+  485, 489, 225, 132, 180, 178, 7, 3, 23, 219, 
+  477, 251, 208, 219, 519, 513, 487, 337, 8, 490, 
+  486, 477, 173, 171, 365, 453, 436, 514, 210, 498, 
+  260, 277, 449, 219, 503, 367, 364, 460, 227, 219, 
+  126, 276, 365, 506, 282, 439, 412, -294, 503, 460, 
+  3, 493, 365, 10, 9, 430, 219, 352, 498, 440, 
+  110, 492, 483, 273, 272, 219, 423, 219, 477, 493, 
+  498, 111, 247, 110, 411, 410, 248, 219, 477, 271, 
+  270, 484, 512, 219, 111, 369, 219, 219, 281, 280, 
+  110, 362, 219, 339, 219, 117, 504, 340, 273, 272, 
+  461, 111, 110, 245, 522, 263, 118, 266, 265, 268, 
+  353, 424, 194, 111, 195, 219, 119, 470, 194, 279, 
+  195, 0, 0, 263, 0, 196, 0, 0, 0, 414, 
+  194, 196, 195, 119, 220, 451, 0, 264, 262, 455, 
+  258, 269, 267, 196, 0, 0, 335, 194, 462, 195, 
+  194, 194, 195, 195, 212, 264, 262, 523, 521, 219, 
+  196, 120, 0, 196, 196, 268, 119, 121, 229, 228, 
+  194, 0, 195, 213, 194, 214, 195, 194, 120, 195, 
+  194, 253, 195, 196, 121, 0, 194, 196, 195, 253, 
+  196, 0, 194, 196, 195, 299, 300, 269, 267, 196, 
+  254, 0, 255, 182, 183, 196, 299, 300, 254, 14, 
+  406, 120, 434, 433, 182, 183, 15, 121, 0, 14, 
+  0, 0, 301, 302, 0, 0, 15, 0, 0, 0, 
+  184, 185, 0, 301, 302, 304, 305, 0, 0, 304, 
+  305, 184, 185, 14, 306, 0, 0, 307, 306, 308, 
+  15, 307, 0, 308, 14, 0, 0, 0, 0, 17, 
+  0, 15, 194, 0, 195, 187, 188, 0, 13, 17, 
+  0, 16, 0, 189, 190, 196, 481, 191, 13, 192, 
+  0, 16, 187, 188, 0, 0, 0, 479, 0, 0, 
+  189, 190, 0, 17, 191, 0, 192, 0, 187, 188, 
+  0, 0, 13, 0, 17, 16, 189, 190, 0, 0, 
+  191, 0, 192, 13, 0, 0, 16, 0, 0, 187, 
+  188, 0, 0, 0, 0, 304, 305, 189, 190, 0, 
+  0, 191, 0, 192, 306, 0, 0, 307, 0, 308, 
+  73, 74, 0, 0, 0, 0, 0, 0, 73, 74, 
+  114, 0, 0, 0, 0, 0, 0, 115, 114, 0, 
+  0, 116, 82, 0, 83, 115, 0, 0, 0, 116, 
+  82, 86, 83, 0, 0, 89, 0, 0, 0, 86, 
+  0, 0, 0, 89, 0, 0, 0, 0, 0, 0, 
+  187, 188, 0, 94, 0, 96, 0, 0, 189, 190, 
+  0, 94, 191, 96, 192, 0, 88, 99, 76, 0, 
+  0, 232, 0, 0, 88, 99, 76, 0, 0, 0, 
+  0, 233, 0, 0, 0, 234, 0, 0, 0, 0, 
+  0, 0, 0, 0, 235, 0, 236, 0, 0, 333, 
+  0, 0, 0, 0, 0, 0, 0, 237, 0, 238, 
+  117, 0, 0, 0, 0, 232, 0, 239, 0, 0, 
+  240, 118, 0, 0, 0, 233, 241, 0, 0, 234, 
+  0, 0, 242, 0, 0, 0, 0, 0, 235, 0, 
+  236, 0, 0, 0, 0, 243, 0, 0, 0, 0, 
+  0, 237, 0, 238, 117, 0, 0, 0, 0, 0, 
+  0, 239, 0, 0, 240, 118, 0, 0, 0, 0, 
+  241, 0, 0, 0, 0, 0, 242, 0, 0, 0, 
+  0, 0, 0, 0, 0, 0, 0, 0, 0, 243, 
   0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 
-  0, 0, 0, 0, 0, 94, 0, 96, 0, 0, 
-  0, 0, 0, 0, 0, 0, 0, 0, 88, 99, 
-  76, 0, 0, 0, 0, 0, 0, 0, 72, 73, 
-  74, 0, 0, 0, 0, 0, 0, 0, 0, 114, 
-  0, 0, 0, 0, 0, 0, 115, 0, 0, 0, 
-  116, 82, 0, 83, 0, 0, 0, 84, 0, 85, 
-  86, 87, 0, 0, 89, 0, 0, 0, 90, 0, 
-  91, 0, 0, 0, 0, 0, 0, 0, 0, 0, 
-  0, 0, 94, 0, 96, 0, 98, 0, 101, 0, 
-  102, 0, 0, 0, 0, 88, 99, 76, 0, 0, 
-  0, 0, 0, 0, 0, 72, 73, 74, 0, 0, 
+  72, 73, 74, 0, 0, 0, 0, 0, 0, 0, 
+  0, 114, 0, 0, 0, 0, 0, 0, 115, 0, 
+  0, 0, 116, 82, 0, 83, 0, 0, 0, 84, 
+  0, 85, 86, 87, 0, 0, 89, 0, 0, 0, 
+  90, 0, 91, 0, 0, 0, 0, 0, 0, 0, 
+  0, 0, 0, 0, 94, 0, 96, 0, 98, 0, 
+  101, 0, 102, 0, 0, 0, 0, 88, 99, 76, 
+  0, 0, 0, 0, 0, 0, 0, 72, 73, 74, 
+  0, 0, 0, 0, 0, 0, 0, 0, 114, 0, 
+  0, 0, 0, 0, 0, 115, 0, 0, 0, 116, 
+  82, 0, 83, 0, 0, 0, 84, 0, 85, 86, 
+  87, 0, 0, 89, 0, 0, 0, 90, 0, 91, 
+  0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 
+  0, 94, 0, 96, 0, 98, 0, 101, 296, 102, 
+  0, 0, 0, 0, 88, 99, 76, 0, 0, 0, 
+  0, 0, 0, 0, 72, 73, 74, 0, 0, 0, 
+  0, 0, 0, 0, 0, 114, 0, 0, 0, 0, 
+  0, 0, 115, 0, 0, 0, 116, 82, 0, 83, 
+  0, 0, 0, 84, 0, 85, 86, 87, 0, 0, 
+  89, 0, 0, 0, 90, 0, 91, 0, 0, 468, 
+  0, 0, 0, 0, 0, 0, 0, 0, 94, 0, 
+  96, 0, 98, 0, 101, 0, 102, 0, 0, 0, 
+  0, 88, 99, 76, 0, 0, 0, 0, 0, 0, 
+  0, -75, 0, 0, 0, 72, 73, 74, 0, 0, 
   0, 0, 0, 0, 0, 0, 114, 0, 0, 0, 
   0, 0, 0, 115, 0, 0, 0, 116, 82, 0, 
   83, 0, 0, 0, 84, 0, 85, 86, 87, 0, 
   0, 89, 0, 0, 0, 90, 0, 91, 0, 0, 
   0, 0, 0, 0, 0, 0, 0, 0, 0, 94, 
-  0, 96, 0, 98, 0, 101, 296, 102, 0, 0, 
+  0, 96, 0, 98, 0, 101, 0, 102, 0, 0, 
   0, 0, 88, 99, 76, 0, 0, 0, 0, 0, 
   0, 0, 72, 73, 74, 0, 0, 0, 0, 0, 
   0, 0, 0, 114, 0, 0, 0, 0, 0, 0, 
@@ -370,51 +393,52 @@ const int JavaScriptGrammar::action_info [] = {
   0, 0, 90, 0, 91, 0, 0, 465, 0, 0, 
   0, 0, 0, 0, 0, 0, 94, 0, 96, 0, 
   98, 0, 101, 0, 102, 0, 0, 0, 0, 88, 
-  99, 76, 0, 0, 0, 0, 0, 0, 0, 72, 
-  73, 74, 0, 0, 0, 0, 0, 0, 0, 0, 
-  114, 0, 0, 0, 0, 0, 0, 115, 0, 0, 
-  0, 116, 82, 0, 83, 0, 0, 0, 84, 0, 
-  85, 86, 87, 0, 0, 89, 0, 0, 0, 90, 
-  0, 91, 0, 0, 468, 0, 0, 0, 0, 0, 
-  0, 0, 0, 94, 0, 96, 0, 98, 0, 101, 
-  0, 102, 0, 0, 0, 0, 88, 99, 76, 0, 
-  0, 0, 0, 0, 0, 0, -73, 0, 0, 0, 
-  72, 73, 74, 0, 0, 0, 0, 0, 0, 0, 
-  0, 114, 0, 0, 0, 0, 0, 0, 115, 0, 
-  0, 0, 116, 82, 0, 83, 0, 0, 0, 84, 
-  0, 85, 86, 87, 0, 0, 89, 0, 0, 0, 
-  90, 0, 91, 0, 0, 0, 0, 0, 0, 0, 
-  0, 0, 0, 0, 94, 0, 96, 0, 98, 0, 
-  101, 0, 102, 0, 0, 0, 0, 88, 99, 76, 
-  0, 0, 0, 0, 0, 0, 0, 137, 138, 139, 
+  99, 76, 0, 0, 0, 0, 0, 0, 0, 137, 
+  138, 139, 0, 0, 141, 143, 144, 0, 0, 145, 
+  0, 146, 0, 0, 0, 148, 149, 150, 0, 0, 
+  0, 0, 0, 0, 217, 152, 153, 154, 0, 0, 
+  0, 0, 0, 0, 0, 0, 0, 0, 155, 0, 
+  0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 
+  0, 0, 0, 0, 159, 0, 0, 0, 0, 0, 
+  0, 161, 162, 163, 0, 165, 166, 167, 168, 169, 
+  170, 0, 0, 156, 164, 147, 140, 142, 158, 0, 
+  0, 0, 0, 137, 138, 139, 0, 0, 141, 143, 
+  144, 0, 0, 145, 0, 146, 0, 0, 0, 148, 
+  149, 150, 0, 0, 0, 0, 0, 0, 151, 152, 
+  153, 154, 0, 0, 0, 0, 0, 0, 0, 0, 
+  0, 0, 155, 0, 0, 0, 157, 0, 0, 0, 
+  0, 0, 0, 0, 0, 0, 0, 0, 159, 0, 
+  0, 0, 0, 0, 160, 161, 162, 163, 0, 165, 
+  166, 167, 168, 169, 170, 0, 0, 156, 164, 147, 
+  140, 142, 158, 0, 0, 0, 0, 137, 138, 139, 
   0, 0, 141, 143, 144, 0, 0, 145, 0, 146, 
   0, 0, 0, 148, 149, 150, 0, 0, 0, 0, 
-  0, 0, 217, 152, 153, 154, 0, 0, 0, 0, 
+  0, 0, 151, 152, 153, 154, 0, 0, 0, 0, 
   0, 0, 0, 0, 0, 0, 155, 0, 0, 0, 
-  0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 
-  0, 0, 159, 0, 0, 0, 0, 0, 0, 161, 
+  157, 0, 0, 0, 0, 0, 0, 0, 175, 0, 
+  0, 0, 159, 0, 0, 0, 0, 0, 160, 161, 
   162, 163, 0, 165, 166, 167, 168, 169, 170, 0, 
   0, 156, 164, 147, 140, 142, 158, 0, 0, 0, 
-  0, 137, 138, 139, 0, 0, 141, 143, 144, 0, 
-  0, 145, 0, 146, 0, 0, 0, 148, 149, 150, 
-  0, 0, 0, 0, 0, 0, 151, 152, 153, 154, 
-  0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 
-  155, 0, 0, 0, 157, 0, 0, 0, 0, 0, 
-  0, 0, 0, 0, 0, 0, 159, 0, 0, 0, 
-  0, 0, 160, 161, 162, 163, 0, 165, 166, 167, 
-  168, 169, 170, 0, 0, 156, 164, 147, 140, 142, 
-  158, 0, 0, 0, 0, 137, 138, 139, 0, 0, 
-  141, 143, 144, 0, 0, 145, 0, 146, 0, 0, 
-  0, 148, 149, 150, 0, 0, 0, 0, 0, 0, 
-  151, 152, 153, 154, 0, 0, 0, 0, 0, 0, 
-  0, 0, 0, 0, 155, 0, 0, 0, 157, 0, 
-  0, 0, 0, 0, 0, 0, 175, 0, 0, 0, 
-  159, 0, 0, 0, 0, 0, 160, 161, 162, 163, 
-  0, 165, 166, 167, 168, 169, 170, 0, 0, 156, 
-  164, 147, 140, 142, 158, 0, 0, 0, 0, 69, 
+  0, 69, 0, 0, 0, 0, 70, 0, 72, 73, 
+  74, 75, 0, 0, 0, 0, 0, 0, 77, 114, 
+  0, 0, 0, 0, 0, 0, 79, 80, 0, 0, 
+  81, 82, 0, 83, 0, 0, 0, 84, 0, 85, 
+  86, 87, 0, 0, 89, 0, 0, 0, 90, 0, 
+  91, 0, 0, 0, 0, 0, 92, 0, 93, 0, 
+  0, 0, 94, 95, 96, 97, 98, 100, 101, 17, 
+  102, 103, 104, 0, 0, 88, 99, 76, 13, 71, 
+  0, 0, 0, 0, 0, 69, 0, 0, 0, 0, 
+  70, 0, 72, 73, 74, 75, 0, 0, 0, 0, 
+  0, 0, 77, 78, 0, 0, 0, 0, 0, 0, 
+  79, 80, 0, 0, 81, 82, 0, 83, 0, 0, 
+  0, 84, 0, 85, 86, 87, 0, 0, 89, 0, 
+  0, 0, 90, 0, 91, 0, 0, 0, 0, 0, 
+  92, 0, 93, 0, 0, 0, 94, 95, 96, 97, 
+  98, 100, 101, 17, 102, 103, 104, 0, 0, 88, 
+  99, 76, 13, 71, 0, 0, 0, 0, 0, 69, 
   0, 0, 0, 0, 70, 0, 72, 73, 74, 75, 
   0, 0, 0, 0, 0, 0, 77, 114, 0, 0, 
-  0, 0, 0, 0, 79, 80, 0, 0, 81, 82, 
+  0, 0, 0, 0, 508, 80, 0, 0, 81, 509, 
   0, 83, 0, 0, 0, 84, 0, 85, 86, 87, 
   0, 0, 89, 0, 0, 0, 90, 0, 91, 0, 
   0, 0, 0, 0, 92, 0, 93, 0, 0, 0, 
@@ -422,148 +446,152 @@ const int JavaScriptGrammar::action_info [] = {
   104, 0, 0, 88, 99, 76, 13, 71, 0, 0, 
   0, 0, 0, 69, 0, 0, 0, 0, 70, 0, 
   72, 73, 74, 75, 0, 0, 0, 0, 0, 0, 
-  77, 78, 0, 0, 0, 0, 0, 0, 79, 80, 
-  0, 0, 81, 82, 0, 83, 0, 0, 0, 84, 
+  77, 114, 0, 0, 0, 0, 0, 0, 495, 80, 
+  0, 0, 81, 496, 0, 83, 0, 0, 0, 84, 
   0, 85, 86, 87, 0, 0, 89, 0, 0, 0, 
   90, 0, 91, 0, 0, 0, 0, 0, 92, 0, 
   93, 0, 0, 0, 94, 95, 96, 97, 98, 100, 
   101, 17, 102, 103, 104, 0, 0, 88, 99, 76, 
-  13, 71, 0, 0, 0, 0, 0, 69, 0, 0, 
-  0, 0, 70, 0, 72, 73, 74, 75, 0, 0, 
-  0, 0, 0, 0, 77, 114, 0, 0, 0, 0, 
-  0, 0, 490, 80, 0, 0, 81, 491, 0, 83, 
-  0, 0, 0, 84, 0, 85, 86, 87, 0, 0, 
-  89, 0, 0, 0, 90, 0, 91, 0, 0, 0, 
-  0, 0, 92, 0, 93, 0, 0, 0, 94, 95, 
-  96, 97, 98, 100, 101, 17, 102, 103, 104, 0, 
-  0, 88, 99, 76, 13, 71, 0, 0, 0, 0, 
-  0, 69, 0, 0, 0, 0, 70, 0, 72, 73, 
-  74, 75, 0, 0, 0, 0, 0, 0, 77, 114, 
-  0, 0, 0, 0, 0, 0, 503, 80, 0, 0, 
-  81, 504, 0, 83, 0, 0, 0, 84, 0, 85, 
-  86, 87, 0, 0, 89, 0, 0, 0, 90, 0, 
-  91, 0, 0, 0, 0, 0, 92, 0, 93, 0, 
-  0, 0, 94, 95, 96, 97, 98, 100, 101, 17, 
-  102, 103, 104, 0, 0, 88, 99, 76, 13, 71, 
-  0, 0, 0, 0, 0, 376, 138, 139, 0, 0, 
-  378, 143, 380, 73, 74, 381, 0, 146, 0, 0, 
-  0, 148, 383, 384, 0, 0, 0, 0, 0, 0, 
-  385, 386, 153, 154, 81, 82, 0, 83, 0, 0, 
-  0, 84, 0, 85, 387, 87, 0, 0, 389, 0, 
-  0, 0, 90, 0, 91, 0, -219, 0, 0, 0, 
-  390, 0, 93, 0, 0, 0, 391, 392, 393, 394, 
-  98, 396, 397, 398, 399, 400, 401, 0, 0, 388, 
-  395, 382, 377, 379, 158, 0, 0, 0, 0, 
+  13, 71, 0, 0, 0, 0, 0, 376, 138, 139, 
+  0, 0, 378, 143, 380, 73, 74, 381, 0, 146, 
+  0, 0, 0, 148, 383, 384, 0, 0, 0, 0, 
+  0, 0, 385, 386, 153, 154, 81, 82, 0, 83, 
+  0, 0, 0, 84, 0, 85, 387, 87, 0, 0, 
+  389, 0, 0, 0, 90, 0, 91, 0, -221, 0, 
+  0, 0, 390, 0, 93, 0, 0, 0, 391, 392, 
+  393, 394, 98, 396, 397, 398, 399, 400, 401, 0, 
+  0, 388, 395, 382, 377, 379, 158, 0, 0, 0, 
+  0, 
 
-  454, 250, 275, 252, 413, 463, 467, 464, 425, 445, 
-  421, 231, 446, 172, 441, 278, 452, 177, 429, 450, 
-  428, 431, 174, 435, 244, 505, 359, 22, 226, 370, 
-  354, 361, 368, 363, 366, 11, 332, 224, 519, 334, 
-  336, 221, 502, 128, 218, 372, 515, 216, 435, 432, 
-  489, 0, 327, 486, 469, 432, 257, 327, 496, 492, 
-  497, 0, 482, 275, 402, 0, 112, 112, 0, 112, 
-  22, 202, 201, 199, 500, 480, 496, 112, 112, 0, 
-  112, 198, 197, 0, 0, 200, 456, 22, 112, 112, 
-  112, 112, 112, 482, 67, 112, 49, 203, 291, 211, 
-  204, 22, 209, 295, 249, 246, 404, 112, 112, 405, 
-  112, 113, 310, 112, 327, 311, 327, 112, 309, 448, 
-  112, 112, 476, 447, 112, 112, 274, 112, 179, 112, 
-  112, 124, 312, 0, 112, 313, 123, 112, 327, 122, 
-  327, 216, 256, 112, 112, 472, 274, 112, 112, 471, 
-  112, 224, 404, 224, 186, 405, 205, 328, 407, 330, 
-  259, 112, 0, 112, 0, 112, 193, 112, 112, 206, 
-  447, 207, 112, 506, 448, 181, 496, 112, 112, 473, 
-  475, 355, 112, 357, 474, 112, 112, 323, 323, 112, 
-  295, 295, 295, 295, 295, 67, 0, 49, 323, 112, 
-  320, 338, 341, 295, 295, 0, 323, 0, 112, 322, 
-  342, 295, 318, 295, 112, 315, 0, 112, 112, 295, 
-  344, 314, 295, 295, 323, 316, 298, 112, 325, 295, 
-  0, 0, 295, 0, 303, 0, 0, 0, 0, 0, 
-  0, 0, 0, 0, 0, 0, 351, 0, 0, 0, 
+  428, 425, 524, 520, 488, 429, 421, 11, 431, 501, 
+  450, 452, 502, 497, 467, 231, 446, 454, 456, 441, 
+  491, 494, 463, 22, 507, 445, 275, 354, 372, 128, 
+  334, 464, 221, 336, 359, 370, 224, 361, 368, 363, 
+  366, 332, 216, 278, 218, 435, 435, 226, 0, 257, 
+  413, 0, 402, 244, 172, 250, 327, 327, 174, 252, 
+  177, 432, 432, 469, 275, 505, 511, 501, 224, 501, 
+  216, 256, 0, 112, 112, 259, 482, 112, 200, 201, 
+  0, 0, 202, 112, 22, 112, 112, 112, 203, 448, 
+  193, 112, 186, 475, 112, 112, 112, 112, 447, 112, 
+  112, 205, 181, 206, 199, 207, 112, 112, 224, 474, 
+  112, 112, 112, 510, 471, 407, 404, 291, 209, 405, 
+  211, 112, 295, 472, 112, 246, 112, 112, 112, 204, 
+  198, 112, 197, 274, 112, 327, 473, 112, 112, 327, 
+  122, 404, 312, 249, 405, 112, 327, 476, 112, 327, 
+  124, 112, 112, 123, 0, 112, 112, 313, 448, 112, 
+  309, 112, 179, 274, 112, 480, 447, 112, 67, 112, 
+  49, 482, 310, 0, 311, 323, 323, 22, 357, 22, 
+  295, 295, 355, 112, 67, 0, 49, 0, 295, 328, 
+  112, 0, 330, 0, 0, 295, 318, 351, 344, 112, 
+  0, 320, 112, 112, 295, 113, 316, 112, 295, 0, 
+  314, 112, 295, 0, 303, 323, 295, 323, 315, 112, 
+  295, 112, 295, 323, 295, 0, 295, 112, 295, 0, 
+  298, 0, 295, 0, 0, 0, 341, 342, 0, 322, 
+  0, 0, 338, 0, 0, 325, 0, 0, 0, 0, 
+  0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 
+  0, 0, 0, 0, 131, 0, 0, 0, 0, 67, 
+  0, 49, 0, 0, 0, 0, 0, 0, 0, 0, 
   0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 
-  0, 0, 0, 0, 67, 0, 49, 0, 0, 0, 
   0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 
-  261, 0, 0, 0, 0, 0, 0, 0, 0, 0, 
   0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 
   0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 
   0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 
   0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 
   0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 
-  0, 0, 0, 0, 131, 0, 0, 0, 0, 0, 
-  0};
+  0, 0, 0, 0, 261, 0};
 
 const int JavaScriptGrammar::action_check [] = {
-  76, 61, 60, 8, 48, 29, 60, 7, 29, 2, 
-  48, 29, 60, 33, 1, 61, 8, 76, 48, 36, 
-  29, 2, 29, 8, 8, 33, 29, 33, 8, 55, 
-  7, 60, 33, 7, 17, 5, 55, 36, 29, 7, 
-  1, 36, 7, 7, 7, 55, 36, 7, 61, 60, 
-  16, 55, 5, 31, 36, 2, 29, 33, 29, 5, 
-  85, 36, 7, 20, 36, 7, 60, 36, 17, 36, 
-  85, 33, 8, 8, 33, 29, 7, 2, 36, 29, 
-  36, 33, 8, 7, 7, 29, 29, 8, 29, 0, 
-  76, 1, 8, 48, 33, 74, 36, 29, 36, 36, 
-  29, 29, 36, 7, -1, 8, 8, 8, 8, 60, 
-  8, 15, 60, 40, 7, 8, 8, 8, 8, 6, 
-  40, 40, 55, 7, 51, 42, 8, 7, 29, 8, 
-  8, 51, 51, 20, 7, 65, 53, 50, 8, 61, 
-  62, 54, 15, 61, 62, 61, 61, 62, 29, 33, 
-  8, 8, 40, 56, 7, 36, 61, 62, 60, 29, 
-  60, 8, 60, 51, 56, 56, 61, 62, 29, 15, 
-  60, -1, 61, 62, 56, 50, 61, 62, 29, 54, 
-  33, 60, 60, 25, 25, 27, 27, 12, 34, 12, 
-  36, 25, 25, 27, 27, -1, 38, 38, 8, -1, 
-  61, 62, 60, 60, 38, 38, -1, -1, 10, 56, 
-  61, 62, 25, 25, 27, 27, 25, 25, 27, 27, 
-  15, 8, 25, 29, 27, 38, 38, 15, 29, 38, 
-  38, 25, 57, 27, 57, 38, 8, -1, 63, 34, 
-  63, 36, -1, -1, 38, 25, 34, 27, 36, -1, 
-  -1, 61, 62, 55, -1, 61, 62, 25, 38, 27, 
-  61, 62, -1, 25, -1, 27, 18, 19, 18, 19, 
-  38, 18, 19, 22, 61, 62, 38, 18, 19, -1, 
-  29, -1, -1, -1, 22, -1, 12, -1, -1, 61, 
-  62, 29, -1, 45, 46, 45, 46, -1, 45, 46, 
-  23, 24, -1, -1, 45, 46, 22, -1, 31, 32, 
-  23, 24, 35, 29, 37, -1, -1, -1, 31, 32, 
-  22, -1, 35, 72, 37, -1, -1, 29, -1, -1, 
-  -1, 57, 81, -1, 72, 84, -1, 63, -1, 55, 
-  23, 24, -1, 81, -1, -1, 84, -1, 31, 32, 
-  3, -1, 35, 55, 37, -1, 72, -1, -1, -1, 
-  13, -1, 23, 24, 17, 81, -1, -1, 84, -1, 
-  72, 32, -1, 26, 35, 28, 37, -1, -1, 81, 
-  -1, -1, 84, 3, -1, -1, 39, -1, 41, 42, 
-  -1, -1, -1, 13, -1, -1, 49, 17, -1, 52, 
-  53, -1, -1, -1, -1, 58, 26, -1, 28, -1, 
-  -1, 64, -1, -1, -1, -1, -1, -1, -1, 39, 
-  3, 41, 42, -1, 77, -1, -1, 23, 24, 49, 
-  13, -1, 52, 53, 17, 31, 32, -1, 58, 35, 
-  -1, 37, -1, 26, 64, 28, -1, -1, 31, -1, 
-  -1, -1, -1, -1, -1, -1, 39, 77, 41, 42, 
-  -1, -1, -1, -1, -1, -1, 49, -1, -1, 52, 
-  53, -1, -1, -1, -1, 58, -1, -1, -1, -1, 
-  -1, 64, -1, -1, -1, -1, -1, -1, -1, -1, 
-  -1, -1, 12, 13, 77, -1, -1, -1, -1, -1, 
-  -1, -1, 22, -1, -1, -1, -1, -1, -1, 29, 
-  -1, -1, -1, 33, 34, -1, 36, -1, -1, -1, 
-  -1, -1, -1, 43, -1, -1, -1, 47, -1, -1, 
+  60, 48, 31, 17, 48, 29, 60, 76, 7, 1, 
+  8, 61, 29, 29, 36, 48, 29, 76, 61, 8, 
+  8, 60, 33, 8, 33, 1, 5, 8, 29, 29, 
+  76, 33, 7, 29, 55, 29, 33, 7, 33, 7, 
+  7, 5, 33, 36, 5, 55, 36, 2, 60, 36, 
+  7, 7, 36, 36, 1, 60, 60, 29, 61, 7, 
+  29, 7, 36, 36, 7, 36, 20, 16, 8, 55, 
+  29, 29, 8, 55, 1, 55, 0, 85, 29, 8, 
+  33, 7, 48, 8, 17, 29, 7, 2, 65, 7, 
+  29, 33, 8, 7, 7, 36, 33, 29, 76, 29, 
+  60, 36, 36, 8, 8, 36, 29, 8, 60, 8, 
+  29, 74, 7, 7, 36, 6, 36, 36, 8, 8, 
+  85, 15, 7, 61, 62, 7, 8, 8, 29, 20, 
+  40, 7, 10, 61, 62, 8, 10, 8, 33, 15, 
+  29, 51, 50, 40, 61, 62, 54, 8, 33, 61, 
+  62, 29, 56, 8, 51, 60, 8, 8, 61, 62, 
+  40, 60, 8, 50, 8, 42, 56, 54, 61, 62, 
+  8, 51, 40, 2, 8, 29, 53, 61, 62, 29, 
+  61, 55, 25, 51, 27, 8, 12, 60, 25, 60, 
+  27, -1, -1, 29, -1, 38, -1, -1, -1, 60, 
+  25, 38, 27, 12, 56, 60, -1, 61, 62, 60, 
+  56, 61, 62, 38, -1, -1, 60, 25, 56, 27, 
+  25, 25, 27, 27, 15, 61, 62, 61, 62, 8, 
+  38, 57, -1, 38, 38, 29, 12, 63, 61, 62, 
+  25, -1, 27, 34, 25, 36, 27, 25, 57, 27, 
+  25, 15, 27, 38, 63, -1, 25, 38, 27, 15, 
+  38, -1, 25, 38, 27, 18, 19, 61, 62, 38, 
+  34, -1, 36, 18, 19, 38, 18, 19, 34, 22, 
+  36, 57, 61, 62, 18, 19, 29, 63, -1, 22, 
+  -1, -1, 45, 46, -1, -1, 29, -1, -1, -1, 
+  45, 46, -1, 45, 46, 23, 24, -1, -1, 23, 
+  24, 45, 46, 22, 32, -1, -1, 35, 32, 37, 
+  29, 35, -1, 37, 22, -1, -1, -1, -1, 72, 
+  -1, 29, 25, -1, 27, 23, 24, -1, 81, 72, 
+  -1, 84, -1, 31, 32, 38, 55, 35, 81, 37, 
+  -1, 84, 23, 24, -1, -1, -1, 55, -1, -1, 
+  31, 32, -1, 72, 35, -1, 37, -1, 23, 24, 
+  -1, -1, 81, -1, 72, 84, 31, 32, -1, -1, 
+  35, -1, 37, 81, -1, -1, 84, -1, -1, 23, 
+  24, -1, -1, -1, -1, 23, 24, 31, 32, -1, 
+  -1, 35, -1, 37, 32, -1, -1, 35, -1, 37, 
+  12, 13, -1, -1, -1, -1, -1, -1, 12, 13, 
+  22, -1, -1, -1, -1, -1, -1, 29, 22, -1, 
+  -1, 33, 34, -1, 36, 29, -1, -1, -1, 33, 
+  34, 43, 36, -1, -1, 47, -1, -1, -1, 43, 
+  -1, -1, -1, 47, -1, -1, -1, -1, -1, -1, 
+  23, 24, -1, 65, -1, 67, -1, -1, 31, 32, 
+  -1, 65, 35, 67, 37, -1, 78, 79, 80, -1, 
+  -1, 3, -1, -1, 78, 79, 80, -1, -1, -1, 
+  -1, 13, -1, -1, -1, 17, -1, -1, -1, -1, 
+  -1, -1, -1, -1, 26, -1, 28, -1, -1, 31, 
+  -1, -1, -1, -1, -1, -1, -1, 39, -1, 41, 
+  42, -1, -1, -1, -1, 3, -1, 49, -1, -1, 
+  52, 53, -1, -1, -1, 13, 58, -1, -1, 17, 
+  -1, -1, 64, -1, -1, -1, -1, -1, 26, -1, 
+  28, -1, -1, -1, -1, 77, -1, -1, -1, -1, 
+  -1, 39, -1, 41, 42, -1, -1, -1, -1, -1, 
+  -1, 49, -1, -1, 52, 53, -1, -1, -1, -1, 
+  58, -1, -1, -1, -1, -1, 64, -1, -1, -1, 
+  -1, -1, -1, -1, -1, -1, -1, -1, -1, 77, 
   -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 
-  -1, -1, -1, -1, -1, 65, -1, 67, -1, -1, 
-  -1, -1, -1, -1, -1, -1, -1, -1, 78, 79, 
-  80, -1, -1, -1, -1, -1, -1, -1, 11, 12, 
-  13, -1, -1, -1, -1, -1, -1, -1, -1, 22, 
-  -1, -1, -1, -1, -1, -1, 29, -1, -1, -1, 
-  33, 34, -1, 36, -1, -1, -1, 40, -1, 42, 
-  43, 44, -1, -1, 47, -1, -1, -1, 51, -1, 
-  53, -1, -1, -1, -1, -1, -1, -1, -1, -1, 
-  -1, -1, 65, -1, 67, -1, 69, -1, 71, -1, 
-  73, -1, -1, -1, -1, 78, 79, 80, -1, -1, 
-  -1, -1, -1, -1, -1, 11, 12, 13, -1, -1, 
+  11, 12, 13, -1, -1, -1, -1, -1, -1, -1, 
+  -1, 22, -1, -1, -1, -1, -1, -1, 29, -1, 
+  -1, -1, 33, 34, -1, 36, -1, -1, -1, 40, 
+  -1, 42, 43, 44, -1, -1, 47, -1, -1, -1, 
+  51, -1, 53, -1, -1, -1, -1, -1, -1, -1, 
+  -1, -1, -1, -1, 65, -1, 67, -1, 69, -1, 
+  71, -1, 73, -1, -1, -1, -1, 78, 79, 80, 
+  -1, -1, -1, -1, -1, -1, -1, 11, 12, 13, 
+  -1, -1, -1, -1, -1, -1, -1, -1, 22, -1, 
+  -1, -1, -1, -1, -1, 29, -1, -1, -1, 33, 
+  34, -1, 36, -1, -1, -1, 40, -1, 42, 43, 
+  44, -1, -1, 47, -1, -1, -1, 51, -1, 53, 
+  -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 
+  -1, 65, -1, 67, -1, 69, -1, 71, 72, 73, 
+  -1, -1, -1, -1, 78, 79, 80, -1, -1, -1, 
+  -1, -1, -1, -1, 11, 12, 13, -1, -1, -1, 
+  -1, -1, -1, -1, -1, 22, -1, -1, -1, -1, 
+  -1, -1, 29, -1, -1, -1, 33, 34, -1, 36, 
+  -1, -1, -1, 40, -1, 42, 43, 44, -1, -1, 
+  47, -1, -1, -1, 51, -1, 53, -1, -1, 56, 
+  -1, -1, -1, -1, -1, -1, -1, -1, 65, -1, 
+  67, -1, 69, -1, 71, -1, 73, -1, -1, -1, 
+  -1, 78, 79, 80, -1, -1, -1, -1, -1, -1, 
+  -1, 7, -1, -1, -1, 11, 12, 13, -1, -1, 
   -1, -1, -1, -1, -1, -1, 22, -1, -1, -1, 
   -1, -1, -1, 29, -1, -1, -1, 33, 34, -1, 
   36, -1, -1, -1, 40, -1, 42, 43, 44, -1, 
   -1, 47, -1, -1, -1, 51, -1, 53, -1, -1, 
   -1, -1, -1, -1, -1, -1, -1, -1, -1, 65, 
-  -1, 67, -1, 69, -1, 71, 72, 73, -1, -1, 
+  -1, 67, -1, 69, -1, 71, -1, 73, -1, -1, 
   -1, -1, 78, 79, 80, -1, -1, -1, -1, -1, 
   -1, -1, 11, 12, 13, -1, -1, -1, -1, -1, 
   -1, -1, -1, 22, -1, -1, -1, -1, -1, -1, 
@@ -572,48 +600,49 @@ const int JavaScriptGrammar::action_check [] = {
   -1, -1, 51, -1, 53, -1, -1, 56, -1, -1, 
   -1, -1, -1, -1, -1, -1, 65, -1, 67, -1, 
   69, -1, 71, -1, 73, -1, -1, -1, -1, 78, 
-  79, 80, -1, -1, -1, -1, -1, -1, -1, 11, 
-  12, 13, -1, -1, -1, -1, -1, -1, -1, -1, 
-  22, -1, -1, -1, -1, -1, -1, 29, -1, -1, 
-  -1, 33, 34, -1, 36, -1, -1, -1, 40, -1, 
-  42, 43, 44, -1, -1, 47, -1, -1, -1, 51, 
-  -1, 53, -1, -1, 56, -1, -1, -1, -1, -1, 
-  -1, -1, -1, 65, -1, 67, -1, 69, -1, 71, 
-  -1, 73, -1, -1, -1, -1, 78, 79, 80, -1, 
-  -1, -1, -1, -1, -1, -1, 7, -1, -1, -1, 
-  11, 12, 13, -1, -1, -1, -1, -1, -1, -1, 
-  -1, 22, -1, -1, -1, -1, -1, -1, 29, -1, 
-  -1, -1, 33, 34, -1, 36, -1, -1, -1, 40, 
-  -1, 42, 43, 44, -1, -1, 47, -1, -1, -1, 
-  51, -1, 53, -1, -1, -1, -1, -1, -1, -1, 
-  -1, -1, -1, -1, 65, -1, 67, -1, 69, -1, 
-  71, -1, 73, -1, -1, -1, -1, 78, 79, 80, 
-  -1, -1, -1, -1, -1, -1, -1, 4, 5, 6, 
+  79, 80, -1, -1, -1, -1, -1, -1, -1, 4, 
+  5, 6, -1, -1, 9, 10, 11, -1, -1, 14, 
+  -1, 16, -1, -1, -1, 20, 21, 22, -1, -1, 
+  -1, -1, -1, -1, 29, 30, 31, 32, -1, -1, 
+  -1, -1, -1, -1, -1, -1, -1, -1, 43, -1, 
+  -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 
+  -1, -1, -1, -1, 59, -1, -1, -1, -1, -1, 
+  -1, 66, 67, 68, -1, 70, 71, 72, 73, 74, 
+  75, -1, -1, 78, 79, 80, 81, 82, 83, -1, 
+  -1, -1, -1, 4, 5, 6, -1, -1, 9, 10, 
+  11, -1, -1, 14, -1, 16, -1, -1, -1, 20, 
+  21, 22, -1, -1, -1, -1, -1, -1, 29, 30, 
+  31, 32, -1, -1, -1, -1, -1, -1, -1, -1, 
+  -1, -1, 43, -1, -1, -1, 47, -1, -1, -1, 
+  -1, -1, -1, -1, -1, -1, -1, -1, 59, -1, 
+  -1, -1, -1, -1, 65, 66, 67, 68, -1, 70, 
+  71, 72, 73, 74, 75, -1, -1, 78, 79, 80, 
+  81, 82, 83, -1, -1, -1, -1, 4, 5, 6, 
   -1, -1, 9, 10, 11, -1, -1, 14, -1, 16, 
   -1, -1, -1, 20, 21, 22, -1, -1, -1, -1, 
   -1, -1, 29, 30, 31, 32, -1, -1, -1, -1, 
   -1, -1, -1, -1, -1, -1, 43, -1, -1, -1, 
-  -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 
-  -1, -1, 59, -1, -1, -1, -1, -1, -1, 66, 
+  47, -1, -1, -1, -1, -1, -1, -1, 55, -1, 
+  -1, -1, 59, -1, -1, -1, -1, -1, 65, 66, 
   67, 68, -1, 70, 71, 72, 73, 74, 75, -1, 
   -1, 78, 79, 80, 81, 82, 83, -1, -1, -1, 
-  -1, 4, 5, 6, -1, -1, 9, 10, 11, -1, 
-  -1, 14, -1, 16, -1, -1, -1, 20, 21, 22, 
-  -1, -1, -1, -1, -1, -1, 29, 30, 31, 32, 
-  -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 
-  43, -1, -1, -1, 47, -1, -1, -1, -1, -1, 
-  -1, -1, -1, -1, -1, -1, 59, -1, -1, -1, 
-  -1, -1, 65, 66, 67, 68, -1, 70, 71, 72, 
+  -1, 4, -1, -1, -1, -1, 9, -1, 11, 12, 
+  13, 14, -1, -1, -1, -1, -1, -1, 21, 22, 
+  -1, -1, -1, -1, -1, -1, 29, 30, -1, -1, 
+  33, 34, -1, 36, -1, -1, -1, 40, -1, 42, 
+  43, 44, -1, -1, 47, -1, -1, -1, 51, -1, 
+  53, -1, -1, -1, -1, -1, 59, -1, 61, -1, 
+  -1, -1, 65, 66, 67, 68, 69, 70, 71, 72, 
   73, 74, 75, -1, -1, 78, 79, 80, 81, 82, 
-  83, -1, -1, -1, -1, 4, 5, 6, -1, -1, 
-  9, 10, 11, -1, -1, 14, -1, 16, -1, -1, 
-  -1, 20, 21, 22, -1, -1, -1, -1, -1, -1, 
-  29, 30, 31, 32, -1, -1, -1, -1, -1, -1, 
-  -1, -1, -1, -1, 43, -1, -1, -1, 47, -1, 
-  -1, -1, -1, -1, -1, -1, 55, -1, -1, -1, 
-  59, -1, -1, -1, -1, -1, 65, 66, 67, 68, 
-  -1, 70, 71, 72, 73, 74, 75, -1, -1, 78, 
-  79, 80, 81, 82, 83, -1, -1, -1, -1, 4, 
+  -1, -1, -1, -1, -1, 4, -1, -1, -1, -1, 
+  9, -1, 11, 12, 13, 14, -1, -1, -1, -1, 
+  -1, -1, 21, 22, -1, -1, -1, -1, -1, -1, 
+  29, 30, -1, -1, 33, 34, -1, 36, -1, -1, 
+  -1, 40, -1, 42, 43, 44, -1, -1, 47, -1, 
+  -1, -1, 51, -1, 53, -1, -1, -1, -1, -1, 
+  59, -1, 61, -1, -1, -1, 65, 66, 67, 68, 
+  69, 70, 71, 72, 73, 74, 75, -1, -1, 78, 
+  79, 80, 81, 82, -1, -1, -1, -1, -1, 4, 
   -1, -1, -1, -1, 9, -1, 11, 12, 13, 14, 
   -1, -1, -1, -1, -1, -1, 21, 22, -1, -1, 
   -1, -1, -1, -1, 29, 30, -1, -1, 33, 34, 
@@ -630,67 +659,51 @@ const int JavaScriptGrammar::action_check [] = {
   51, -1, 53, -1, -1, -1, -1, -1, 59, -1, 
   61, -1, -1, -1, 65, 66, 67, 68, 69, 70, 
   71, 72, 73, 74, 75, -1, -1, 78, 79, 80, 
-  81, 82, -1, -1, -1, -1, -1, 4, -1, -1, 
-  -1, -1, 9, -1, 11, 12, 13, 14, -1, -1, 
-  -1, -1, -1, -1, 21, 22, -1, -1, -1, -1, 
-  -1, -1, 29, 30, -1, -1, 33, 34, -1, 36, 
+  81, 82, -1, -1, -1, -1, -1, 4, 5, 6, 
+  -1, -1, 9, 10, 11, 12, 13, 14, -1, 16, 
+  -1, -1, -1, 20, 21, 22, -1, -1, -1, -1, 
+  -1, -1, 29, 30, 31, 32, 33, 34, -1, 36, 
   -1, -1, -1, 40, -1, 42, 43, 44, -1, -1, 
-  47, -1, -1, -1, 51, -1, 53, -1, -1, -1, 
+  47, -1, -1, -1, 51, -1, 53, -1, 55, -1, 
   -1, -1, 59, -1, 61, -1, -1, -1, 65, 66, 
   67, 68, 69, 70, 71, 72, 73, 74, 75, -1, 
-  -1, 78, 79, 80, 81, 82, -1, -1, -1, -1, 
-  -1, 4, -1, -1, -1, -1, 9, -1, 11, 12, 
-  13, 14, -1, -1, -1, -1, -1, -1, 21, 22, 
-  -1, -1, -1, -1, -1, -1, 29, 30, -1, -1, 
-  33, 34, -1, 36, -1, -1, -1, 40, -1, 42, 
-  43, 44, -1, -1, 47, -1, -1, -1, 51, -1, 
-  53, -1, -1, -1, -1, -1, 59, -1, 61, -1, 
-  -1, -1, 65, 66, 67, 68, 69, 70, 71, 72, 
-  73, 74, 75, -1, -1, 78, 79, 80, 81, 82, 
-  -1, -1, -1, -1, -1, 4, 5, 6, -1, -1, 
-  9, 10, 11, 12, 13, 14, -1, 16, -1, -1, 
-  -1, 20, 21, 22, -1, -1, -1, -1, -1, -1, 
-  29, 30, 31, 32, 33, 34, -1, 36, -1, -1, 
-  -1, 40, -1, 42, 43, 44, -1, -1, 47, -1, 
-  -1, -1, 51, -1, 53, -1, 55, -1, -1, -1, 
-  59, -1, 61, -1, -1, -1, 65, 66, 67, 68, 
-  69, 70, 71, 72, 73, 74, 75, -1, -1, 78, 
-  79, 80, 81, 82, 83, -1, -1, -1, -1, 
+  -1, 78, 79, 80, 81, 82, 83, -1, -1, -1, 
+  -1, 
 
-  12, 20, 11, 20, 12, 16, 20, 20, 84, 58, 
-  87, 54, 58, 20, 89, 12, 11, 20, 12, 12, 
-  72, 72, 22, 58, 20, 9, 11, 14, 20, 11, 
-  78, 12, 12, 11, 11, 5, 11, 20, 76, 12, 
-  11, 20, 11, 90, 12, 11, 20, 23, 58, 12, 
-  11, -1, 12, 12, 12, 12, 12, 12, 10, 9, 
-  9, -1, 6, 11, 11, -1, 31, 31, -1, 31, 
-  14, 36, 36, 35, 8, 2, 10, 31, 31, -1, 
-  31, 35, 35, -1, -1, 36, 11, 14, 31, 31, 
-  31, 31, 31, 6, 11, 31, 13, 36, 31, 41, 
-  36, 14, 43, 36, 47, 45, 25, 31, 31, 28, 
-  31, 34, 36, 31, 12, 36, 12, 31, 36, 33, 
-  31, 31, 33, 33, 31, 31, 33, 31, 34, 31, 
-  31, 33, 36, -1, 31, 36, 33, 31, 12, 33, 
-  12, 23, 24, 31, 31, 33, 33, 31, 31, 33, 
-  31, 20, 25, 20, 37, 28, 37, 55, 27, 55, 
-  27, 31, -1, 31, -1, 31, 36, 31, 31, 37, 
-  33, 37, 31, 7, 33, 39, 10, 31, 31, 33, 
-  33, 55, 31, 55, 33, 31, 31, 31, 31, 31, 
-  36, 36, 36, 36, 36, 11, -1, 13, 31, 31, 
-  42, 46, 48, 36, 36, -1, 31, -1, 31, 53, 
-  53, 36, 44, 36, 31, 38, -1, 31, 31, 36, 
-  53, 38, 36, 36, 31, 38, 40, 31, 53, 36, 
-  -1, -1, 36, -1, 38, -1, -1, -1, -1, -1, 
-  -1, -1, -1, -1, -1, -1, 53, -1, -1, -1, 
+  72, 84, 76, 20, 12, 12, 87, 5, 72, 10, 
+  12, 11, 9, 9, 20, 54, 58, 12, 11, 89, 
+  12, 11, 16, 14, 11, 58, 11, 78, 11, 90, 
+  12, 20, 20, 11, 11, 11, 20, 12, 12, 11, 
+  11, 11, 23, 12, 12, 58, 58, 20, -1, 12, 
+  12, -1, 11, 20, 20, 20, 12, 12, 22, 20, 
+  20, 12, 12, 12, 11, 8, 7, 10, 20, 10, 
+  23, 24, -1, 31, 31, 27, 6, 31, 36, 36, 
+  -1, -1, 36, 31, 14, 31, 31, 31, 36, 33, 
+  36, 31, 37, 33, 31, 31, 31, 31, 33, 31, 
+  31, 37, 39, 37, 35, 37, 31, 31, 20, 33, 
+  31, 31, 31, 9, 33, 27, 25, 31, 43, 28, 
+  41, 31, 36, 33, 31, 45, 31, 31, 31, 36, 
+  35, 31, 35, 33, 31, 12, 33, 31, 31, 12, 
+  33, 25, 36, 47, 28, 31, 12, 33, 31, 12, 
+  33, 31, 31, 33, -1, 31, 31, 36, 33, 31, 
+  36, 31, 34, 33, 31, 2, 33, 31, 11, 31, 
+  13, 6, 36, -1, 36, 31, 31, 14, 55, 14, 
+  36, 36, 55, 31, 11, -1, 13, -1, 36, 55, 
+  31, -1, 55, -1, -1, 36, 44, 53, 53, 31, 
+  -1, 42, 31, 31, 36, 34, 38, 31, 36, -1, 
+  38, 31, 36, -1, 38, 31, 36, 31, 38, 31, 
+  36, 31, 36, 31, 36, -1, 36, 31, 36, -1, 
+  40, -1, 36, -1, -1, -1, 48, 53, -1, 53, 
+  -1, -1, 46, -1, -1, 53, -1, -1, -1, -1, 
+  -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 
+  -1, -1, -1, -1, 91, -1, -1, -1, -1, 11, 
+  -1, 13, -1, -1, -1, -1, -1, -1, -1, -1, 
   -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 
-  -1, -1, -1, -1, 11, -1, 13, -1, -1, -1, 
   -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 
-  96, -1, -1, -1, -1, -1, -1, -1, -1, -1, 
   -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 
   -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 
   -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 
   -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 
   -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 
-  -1, -1, -1, -1, 91, -1, -1, -1, -1, -1, 
-  -1};
+  -1, -1, -1, -1, 96, -1};
 
diff --git a/src/declarative/qml/parser/javascriptgrammar_p.h b/src/declarative/qml/parser/javascriptgrammar_p.h
index 490acb2..22d3d76 100644
--- a/src/declarative/qml/parser/javascriptgrammar_p.h
+++ b/src/declarative/qml/parser/javascriptgrammar_p.h
@@ -148,14 +148,14 @@ public:
     T_XOR_EQ = 77,
 
     ACCEPT_STATE = 7,
-    RULE_COUNT = 296,
-    STATE_COUNT = 520,
+    RULE_COUNT = 298,
+    STATE_COUNT = 525,
     TERMINAL_COUNT = 88,
     NON_TERMINAL_COUNT = 98,
 
-    GOTO_INDEX_OFFSET = 520,
-    GOTO_INFO_OFFSET = 1629,
-    GOTO_CHECK_OFFSET = 1629
+    GOTO_INDEX_OFFSET = 525,
+    GOTO_INFO_OFFSET = 1671,
+    GOTO_CHECK_OFFSET = 1671
   };
 
   static const char  *const spell [];
diff --git a/src/declarative/qml/parser/javascriptlexer.cpp b/src/declarative/qml/parser/javascriptlexer.cpp
index 80a558d..81f0983 100644
--- a/src/declarative/qml/parser/javascriptlexer.cpp
+++ b/src/declarative/qml/parser/javascriptlexer.cpp
@@ -311,7 +311,7 @@ int JavaScript::Lexer::findReservedWord(const QChar *c, int size) const
             else if (c[0] == QLatin1Char('p') && c[1] == QLatin1Char('u')
                     && c[2] == QLatin1Char('b') && c[3] == QLatin1Char('l')
                     && c[4] == QLatin1Char('i') && c[5] == QLatin1Char('c'))
-                return JavaScriptGrammar::T_RESERVED_WORD;
+                return JavaScriptGrammar::T_PUBLIC;
             else if (c[0] == QLatin1Char('n') && c[1] == QLatin1Char('a')
                     && c[2] == QLatin1Char('t') && c[3] == QLatin1Char('i')
                     && c[4] == QLatin1Char('v') && c[5] == QLatin1Char('e'))
diff --git a/src/declarative/qml/parser/javascriptparser.cpp b/src/declarative/qml/parser/javascriptparser.cpp
index 6221386..81a7e7b 100644
--- a/src/declarative/qml/parser/javascriptparser.cpp
+++ b/src/declarative/qml/parser/javascriptparser.cpp
@@ -266,6 +266,15 @@ case 22: {
 }   break;
 
 case 23: {
+    AST::UiPublicMember *node = makeAstNode<AST::UiPublicMember> (driver->nodePool(), sym(3).sval, sym(4).sval);
+    node->isDefaultMember = true;
+    node->publicToken = loc(1);
+    node->attributeTypeToken = loc(3);
+    node->identifierToken = loc(4);
+    sym(1).Node = node;
+}   break;
+
+case 24: {
     AST::UiPublicMember *node = makeAstNode<AST::UiPublicMember> (driver->nodePool(), sym(2).sval, sym(3).sval,
         sym(5).Expression);
     node->publicToken = loc(1);
@@ -275,69 +284,80 @@ case 23: {
     sym(1).Node = node;
 }   break;
 
-case 24: {
+case 25: {
+    AST::UiPublicMember *node = makeAstNode<AST::UiPublicMember> (driver->nodePool(), sym(3).sval, sym(4).sval,
+        sym(6).Expression);
+    node->isDefaultMember = true;
+    node->publicToken = loc(1);
+    node->attributeTypeToken = loc(3);
+    node->identifierToken = loc(4);
+    node->colonToken = loc(5);
+    sym(1).Node = node;
+}   break;
+
+case 26: {
     sym(1).Node = makeAstNode<AST::UiSourceElement>(driver->nodePool(), sym(1).Node);
 }   break;
 
-case 25: {
+case 27: {
     sym(1).Node = makeAstNode<AST::UiSourceElement>(driver->nodePool(), sym(1).Node);
 }   break;
 
-case 26: {
+case 28: {
     AST::UiQualifiedId *node = makeAstNode<AST::UiQualifiedId> (driver->nodePool(), sym(1).sval);
     node->identifierToken = loc(1);
     sym(1).Node = node;
 }   break;
 
-case 27: {
+case 29: {
     AST::UiQualifiedId *node = makeAstNode<AST::UiQualifiedId> (driver->nodePool(), sym(1).UiQualifiedId, sym(3).sval);
     node->identifierToken = loc(3);
     sym(1).Node = node;
 }   break;
 
-case 28: {
+case 30: {
   AST::ThisExpression *node = makeAstNode<AST::ThisExpression> (driver->nodePool());
   node->thisToken = loc(1);
   sym(1).Node = node;
 } break;
 
-case 29: {
+case 31: {
   AST::IdentifierExpression *node = makeAstNode<AST::IdentifierExpression> (driver->nodePool(), sym(1).sval);
   node->identifierToken = loc(1);
   sym(1).Node = node;
 } break;
 
-case 30: {
+case 32: {
   AST::NullExpression *node = makeAstNode<AST::NullExpression> (driver->nodePool());
   node->nullToken = loc(1);
   sym(1).Node = node;
 } break;
 
-case 31: {
+case 33: {
   AST::TrueLiteral *node = makeAstNode<AST::TrueLiteral> (driver->nodePool());
   node->trueToken = loc(1);
   sym(1).Node = node;
 } break;
 
-case 32: {
+case 34: {
   AST::FalseLiteral *node = makeAstNode<AST::FalseLiteral> (driver->nodePool());
   node->falseToken = loc(1);
   sym(1).Node = node;
 } break;
 
-case 33: {
+case 35: {
   AST::NumericLiteral *node = makeAstNode<AST::NumericLiteral> (driver->nodePool(), sym(1).dval);
   node->literalToken = loc(1);
   sym(1).Node = node;
 } break;
 
-case 34: {
+case 36: {
   AST::StringLiteral *node = makeAstNode<AST::StringLiteral> (driver->nodePool(), sym(1).sval);
   node->literalToken = loc(1);
   sym(1).Node = node;
 } break;
 
-case 35: {
+case 37: {
   bool rx = lexer->scanRegExp(Lexer::NoPrefix);
   if (!rx) {
     diagnostic_messages.append(DiagnosticMessage(DiagnosticMessage::Error, lexer->startLineNo(),
@@ -349,7 +369,7 @@ case 35: {
   sym(1).Node = node;
 } break;
 
-case 36: {
+case 38: {
   bool rx = lexer->scanRegExp(Lexer::EqualPrefix);
   if (!rx) {
     diagnostic_messages.append(DiagnosticMessage(DiagnosticMessage::Error, lexer->startLineNo(),
@@ -361,21 +381,21 @@ case 36: {
   sym(1).Node = node;
 } break;
 
-case 37: {
+case 39: {
   AST::ArrayLiteral *node = makeAstNode<AST::ArrayLiteral> (driver->nodePool(), sym(2).Elision);
   node->lbracketToken = loc(1);
   node->rbracketToken = loc(3);
   sym(1).Node = node;
 } break;
 
-case 38: {
+case 40: {
   AST::ArrayLiteral *node = makeAstNode<AST::ArrayLiteral> (driver->nodePool(), sym(2).ElementList->finish ());
   node->lbracketToken = loc(1);
   node->rbracketToken = loc(3);
   sym(1).Node = node;
 } break;
 
-case 39: {
+case 41: {
   AST::ArrayLiteral *node = makeAstNode<AST::ArrayLiteral> (driver->nodePool(), sym(2).ElementList->finish (), sym(4).Elision);
   node->lbracketToken = loc(1);
   node->commaToken = loc(3);
@@ -383,7 +403,7 @@ case 39: {
   sym(1).Node = node;
 } break;
 
-case 40: {
+case 42: {
   AST::ObjectLiteral *node = 0;
   if (sym(2).Node)
     node = makeAstNode<AST::ObjectLiteral> (driver->nodePool(),
@@ -395,7 +415,7 @@ case 40: {
   sym(1).Node = node;
 } break;
 
-case 41: {
+case 43: {
   AST::ObjectLiteral *node = makeAstNode<AST::ObjectLiteral> (driver->nodePool(),
     sym(2).PropertyNameAndValueList->finish ());
   node->lbraceToken = loc(1);
@@ -403,51 +423,51 @@ case 41: {
   sym(1).Node = node;
 } break;
 
-case 42: {
+case 44: {
   AST::NestedExpression *node = makeAstNode<AST::NestedExpression>(driver->nodePool(), sym(2).Expression);
   node->lparenToken = loc(1);
   node->rparenToken = loc(3);
   sym(1).Node = node;
 } break;
 
-case 43: {
+case 45: {
   sym(1).Node = makeAstNode<AST::ElementList> (driver->nodePool(), sym(1).Elision, sym(2).Expression);
 } break;
 
-case 44: {
+case 46: {
   AST::ElementList *node = makeAstNode<AST::ElementList> (driver->nodePool(), sym(1).ElementList, sym(3).Elision, sym(4).Expression);
   node->commaToken = loc(2);
   sym(1).Node = node;
 } break;
 
-case 45: {
+case 47: {
   AST::Elision *node = makeAstNode<AST::Elision> (driver->nodePool());
   node->commaToken = loc(1);
   sym(1).Node = node;
 } break;
 
-case 46: {
+case 48: {
   AST::Elision *node = makeAstNode<AST::Elision> (driver->nodePool(), sym(1).Elision);
   node->commaToken = loc(2);
   sym(1).Node = node;
 } break;
 
-case 47: {
+case 49: {
   sym(1).Node = 0;
 } break;
 
-case 48: {
+case 50: {
   sym(1).Elision = sym(1).Elision->finish ();
 } break;
 
-case 49: {
+case 51: {
   AST::PropertyNameAndValueList *node = makeAstNode<AST::PropertyNameAndValueList> (driver->nodePool(),
       sym(1).PropertyName, sym(3).Expression);
   node->colonToken = loc(2);
   sym(1).Node = node;
 } break;
 
-case 50: {
+case 52: {
   AST::PropertyNameAndValueList *node = makeAstNode<AST::PropertyNameAndValueList> (driver->nodePool(),
       sym(1).PropertyNameAndValueList, sym(3).PropertyName, sym(5).Expression);
   node->commaToken = loc(2);
@@ -455,34 +475,30 @@ case 50: {
   sym(1).Node = node;  
 } break;
 
-case 51: {
+case 53: {
   AST::IdentifierPropertyName *node = makeAstNode<AST::IdentifierPropertyName> (driver->nodePool(), sym(1).sval);
   node->propertyNameToken = loc(1);
   sym(1).Node = node;  
 } break;
 
-case 52: {
+case 54: {
   AST::StringLiteralPropertyName *node = makeAstNode<AST::StringLiteralPropertyName> (driver->nodePool(), sym(1).sval);
   node->propertyNameToken = loc(1);
   sym(1).Node = node;  
 } break;
 
-case 53: {
+case 55: {
   AST::NumericLiteralPropertyName *node = makeAstNode<AST::NumericLiteralPropertyName> (driver->nodePool(), sym(1).dval);
   node->propertyNameToken = loc(1);
   sym(1).Node = node;  
 } break;
 
-case 54: {
+case 56: {
   AST::IdentifierPropertyName *node = makeAstNode<AST::IdentifierPropertyName> (driver->nodePool(), sym(1).sval);
   node->propertyNameToken = loc(1);
   sym(1).Node = node;  
 } break;
 
-case 55:
-
-case 56:
-
 case 57:
 
 case 58:
@@ -540,25 +556,29 @@ case 83:
 case 84:
 
 case 85:
+
+case 86:
+
+case 87:
 {
   sym(1).sval = driver->intern(lexer->characterBuffer(), lexer->characterCount());
 } break;
 
-case 90: {
+case 92: {
   AST::ArrayMemberExpression *node = makeAstNode<AST::ArrayMemberExpression> (driver->nodePool(), sym(1).Expression, sym(3).Expression);
   node->lbracketToken = loc(2);
   node->rbracketToken = loc(4);
   sym(1).Node = node;
 } break;
 
-case 91: {
+case 93: {
   AST::FieldMemberExpression *node = makeAstNode<AST::FieldMemberExpression> (driver->nodePool(), sym(1).Expression, sym(3).sval);
   node->dotToken = loc(2);
   node->identifierToken = loc(3);
   sym(1).Node = node;
 } break;
 
-case 92: {
+case 94: {
   AST::NewMemberExpression *node = makeAstNode<AST::NewMemberExpression> (driver->nodePool(), sym(2).Expression, sym(4).ArgumentList);
   node->newToken = loc(1);
   node->lparenToken = loc(3);
@@ -566,316 +586,309 @@ case 92: {
   sym(1).Node = node;
 } break;
 
-case 94: {
+case 96: {
   AST::NewExpression *node = makeAstNode<AST::NewExpression> (driver->nodePool(), sym(2).Expression);
   node->newToken = loc(1);
   sym(1).Node = node;
 } break;
 
-case 95: {
+case 97: {
   AST::CallExpression *node = makeAstNode<AST::CallExpression> (driver->nodePool(), sym(1).Expression, sym(3).ArgumentList);
   node->lparenToken = loc(2);
   node->rparenToken = loc(4);
   sym(1).Node = node;
 } break;
 
-case 96: {
+case 98: {
   AST::CallExpression *node = makeAstNode<AST::CallExpression> (driver->nodePool(), sym(1).Expression, sym(3).ArgumentList);
   node->lparenToken = loc(2);
   node->rparenToken = loc(4);
   sym(1).Node = node;
 } break;
 
-case 97: {
+case 99: {
   AST::ArrayMemberExpression *node = makeAstNode<AST::ArrayMemberExpression> (driver->nodePool(), sym(1).Expression, sym(3).Expression);
   node->lbracketToken = loc(2);
   node->rbracketToken = loc(4);
   sym(1).Node = node;
 } break;
 
-case 98: {
+case 100: {
   AST::FieldMemberExpression *node = makeAstNode<AST::FieldMemberExpression> (driver->nodePool(), sym(1).Expression, sym(3).sval);
   node->dotToken = loc(2);
   node->identifierToken = loc(3);
   sym(1).Node = node;
 } break;
 
-case 99: {
+case 101: {
   sym(1).Node = 0;
 } break;
 
-case 100: {
+case 102: {
   sym(1).Node = sym(1).ArgumentList->finish();
 } break;
 
-case 101: {
+case 103: {
   sym(1).Node = makeAstNode<AST::ArgumentList> (driver->nodePool(), sym(1).Expression);
 } break;
 
-case 102: {
+case 104: {
   AST::ArgumentList *node = makeAstNode<AST::ArgumentList> (driver->nodePool(), sym(1).ArgumentList, sym(3).Expression);
   node->commaToken = loc(2);
   sym(1).Node = node;
 } break;
 
-case 106: {
+case 108: {
   AST::PostIncrementExpression *node = makeAstNode<AST::PostIncrementExpression> (driver->nodePool(), sym(1).Expression);
   node->incrementToken = loc(2);
   sym(1).Node = node;
 } break;
 
-case 107: {
+case 109: {
   AST::PostDecrementExpression *node = makeAstNode<AST::PostDecrementExpression> (driver->nodePool(), sym(1).Expression);
   node->decrementToken = loc(2);
   sym(1).Node = node;
 } break;
 
-case 109: {
+case 111: {
   AST::DeleteExpression *node = makeAstNode<AST::DeleteExpression> (driver->nodePool(), sym(2).Expression);
   node->deleteToken = loc(1);
   sym(1).Node = node;
 } break;
 
-case 110: {
+case 112: {
   AST::VoidExpression *node = makeAstNode<AST::VoidExpression> (driver->nodePool(), sym(2).Expression);
   node->voidToken = loc(1);
   sym(1).Node = node;
 } break;
 
-case 111: {
+case 113: {
   AST::TypeOfExpression *node = makeAstNode<AST::TypeOfExpression> (driver->nodePool(), sym(2).Expression);
   node->typeofToken = loc(1);
   sym(1).Node = node;
 } break;
 
-case 112: {
+case 114: {
   AST::PreIncrementExpression *node = makeAstNode<AST::PreIncrementExpression> (driver->nodePool(), sym(2).Expression);
   node->incrementToken = loc(1);
   sym(1).Node = node;
 } break;
 
-case 113: {
+case 115: {
   AST::PreDecrementExpression *node = makeAstNode<AST::PreDecrementExpression> (driver->nodePool(), sym(2).Expression);
   node->decrementToken = loc(1);
   sym(1).Node = node;
 } break;
 
-case 114: {
+case 116: {
   AST::UnaryPlusExpression *node = makeAstNode<AST::UnaryPlusExpression> (driver->nodePool(), sym(2).Expression);
   node->plusToken = loc(1);
   sym(1).Node = node;
 } break;
 
-case 115: {
+case 117: {
   AST::UnaryMinusExpression *node = makeAstNode<AST::UnaryMinusExpression> (driver->nodePool(), sym(2).Expression);
   node->minusToken = loc(1);
   sym(1).Node = node;
 } break;
 
-case 116: {
+case 118: {
   AST::TildeExpression *node = makeAstNode<AST::TildeExpression> (driver->nodePool(), sym(2).Expression);
   node->tildeToken = loc(1);
   sym(1).Node = node;
 } break;
 
-case 117: {
+case 119: {
   AST::NotExpression *node = makeAstNode<AST::NotExpression> (driver->nodePool(), sym(2).Expression);
   node->notToken = loc(1);
   sym(1).Node = node;
 } break;
 
-case 119: {
+case 121: {
   AST::BinaryExpression *node = makeAstNode<AST::BinaryExpression> (driver->nodePool(), sym(1).Expression,
     QSOperator::Mul, sym(3).Expression);
   node->operatorToken = loc(2);
   sym(1).Node = node;
 } break;
 
-case 120: {
+case 122: {
   AST::BinaryExpression *node = makeAstNode<AST::BinaryExpression> (driver->nodePool(), sym(1).Expression,
     QSOperator::Div, sym(3).Expression);
   node->operatorToken = loc(2);
   sym(1).Node = node;
 } break;
 
-case 121: {
+case 123: {
   AST::BinaryExpression *node = makeAstNode<AST::BinaryExpression> (driver->nodePool(), sym(1).Expression,
     QSOperator::Mod, sym(3).Expression);
   node->operatorToken = loc(2);
   sym(1).Node = node;
 } break;
 
-case 123: {
+case 125: {
   AST::BinaryExpression *node = makeAstNode<AST::BinaryExpression> (driver->nodePool(), sym(1).Expression,
     QSOperator::Add, sym(3).Expression);
   node->operatorToken = loc(2);
   sym(1).Node = node;
 } break;
 
-case 124: {
+case 126: {
   AST::BinaryExpression *node = makeAstNode<AST::BinaryExpression> (driver->nodePool(), sym(1).Expression,
     QSOperator::Sub, sym(3).Expression);
   node->operatorToken = loc(2);
   sym(1).Node = node;
 } break;
 
-case 126: {
+case 128: {
   AST::BinaryExpression *node = makeAstNode<AST::BinaryExpression> (driver->nodePool(), sym(1).Expression,
     QSOperator::LShift, sym(3).Expression);
   node->operatorToken = loc(2);
   sym(1).Node = node;
 } break;
 
-case 127: {
+case 129: {
   AST::BinaryExpression *node = makeAstNode<AST::BinaryExpression> (driver->nodePool(), sym(1).Expression,
     QSOperator::RShift, sym(3).Expression);
   node->operatorToken = loc(2);
   sym(1).Node = node;
 } break;
 
-case 128: {
+case 130: {
   AST::BinaryExpression *node = makeAstNode<AST::BinaryExpression> (driver->nodePool(), sym(1).Expression,
     QSOperator::URShift, sym(3).Expression);
   node->operatorToken = loc(2);
   sym(1).Node = node;
 } break;
 
-case 130: {
+case 132: {
   AST::BinaryExpression *node = makeAstNode<AST::BinaryExpression> (driver->nodePool(), sym(1).Expression,
     QSOperator::Lt, sym(3).Expression);
   node->operatorToken = loc(2);
   sym(1).Node = node;
 } break;
 
-case 131: {
+case 133: {
   AST::BinaryExpression *node = makeAstNode<AST::BinaryExpression> (driver->nodePool(), sym(1).Expression,
     QSOperator::Gt, sym(3).Expression);
   node->operatorToken = loc(2);
   sym(1).Node = node;
 } break;
 
-case 132: {
+case 134: {
   AST::BinaryExpression *node = makeAstNode<AST::BinaryExpression> (driver->nodePool(), sym(1).Expression,
     QSOperator::Le, sym(3).Expression);
   node->operatorToken = loc(2);
   sym(1).Node = node;
 } break;
 
-case 133: {
+case 135: {
   AST::BinaryExpression *node = makeAstNode<AST::BinaryExpression> (driver->nodePool(), sym(1).Expression,
     QSOperator::Ge, sym(3).Expression);
   node->operatorToken = loc(2);
   sym(1).Node = node;
 } break;
 
-case 134: {
+case 136: {
   AST::BinaryExpression *node = makeAstNode<AST::BinaryExpression> (driver->nodePool(), sym(1).Expression,
     QSOperator::InstanceOf, sym(3).Expression);
   node->operatorToken = loc(2);
   sym(1).Node = node;
 } break;
 
-case 135: {
+case 137: {
   AST::BinaryExpression *node = makeAstNode<AST::BinaryExpression> (driver->nodePool(), sym(1).Expression,
     QSOperator::In, sym(3).Expression);
   node->operatorToken = loc(2);
   sym(1).Node = node;
 } break;
 
-case 137: {
+case 139: {
   AST::BinaryExpression *node = makeAstNode<AST::BinaryExpression> (driver->nodePool(), sym(1).Expression,
     QSOperator::Lt, sym(3).Expression);
   node->operatorToken = loc(2);
   sym(1).Node = node;
 } break;
 
-case 138: {
+case 140: {
   AST::BinaryExpression *node = makeAstNode<AST::BinaryExpression> (driver->nodePool(), sym(1).Expression,
     QSOperator::Gt, sym(3).Expression);
   node->operatorToken = loc(2);
   sym(1).Node = node;
 } break;
 
-case 139: {
+case 141: {
   AST::BinaryExpression *node = makeAstNode<AST::BinaryExpression> (driver->nodePool(), sym(1).Expression,
     QSOperator::Le, sym(3).Expression);
   node->operatorToken = loc(2);
   sym(1).Node = node;
 } break;
 
-case 140: {
+case 142: {
   AST::BinaryExpression *node = makeAstNode<AST::BinaryExpression> (driver->nodePool(), sym(1).Expression,
    QSOperator::Ge, sym(3).Expression);
   node->operatorToken = loc(2);
   sym(1).Node = node;
 } break;
 
-case 141: {
+case 143: {
   AST::BinaryExpression *node = makeAstNode<AST::BinaryExpression> (driver->nodePool(), sym(1).Expression,
     QSOperator::InstanceOf, sym(3).Expression);
   node->operatorToken = loc(2);
   sym(1).Node = node;
 } break;
 
-case 143: {
+case 145: {
   AST::BinaryExpression *node = makeAstNode<AST::BinaryExpression> (driver->nodePool(), sym(1).Expression,
     QSOperator::Equal, sym(3).Expression);
   node->operatorToken = loc(2);
   sym(1).Node = node;
 } break;
 
-case 144: {
+case 146: {
   AST::BinaryExpression *node = makeAstNode<AST::BinaryExpression> (driver->nodePool(), sym(1).Expression,
     QSOperator::NotEqual, sym(3).Expression);
   node->operatorToken = loc(2);
   sym(1).Node = node;
 } break;
 
-case 145: {
+case 147: {
   AST::BinaryExpression *node = makeAstNode<AST::BinaryExpression> (driver->nodePool(), sym(1).Expression,
     QSOperator::StrictEqual, sym(3).Expression);
   node->operatorToken = loc(2);
   sym(1).Node = node;
 } break;
 
-case 146: {
+case 148: {
   AST::BinaryExpression *node = makeAstNode<AST::BinaryExpression> (driver->nodePool(), sym(1).Expression,
     QSOperator::StrictNotEqual, sym(3).Expression);
   node->operatorToken = loc(2);
   sym(1).Node = node;
 } break;
 
-case 148: {
+case 150: {
   AST::BinaryExpression *node = makeAstNode<AST::BinaryExpression> (driver->nodePool(), sym(1).Expression,
     QSOperator::Equal, sym(3).Expression);
   node->operatorToken = loc(2);
   sym(1).Node = node;
 } break;
 
-case 149: {
+case 151: {
   AST::BinaryExpression *node = makeAstNode<AST::BinaryExpression> (driver->nodePool(), sym(1).Expression,
     QSOperator::NotEqual, sym(3).Expression);
   node->operatorToken = loc(2);
   sym(1).Node = node;
 } break;
 
-case 150: {
+case 152: {
   AST::BinaryExpression *node = makeAstNode<AST::BinaryExpression> (driver->nodePool(), sym(1).Expression,
     QSOperator::StrictEqual, sym(3).Expression);
   node->operatorToken = loc(2);
   sym(1).Node = node;
 } break;
 
-case 151: {
-  AST::BinaryExpression *node = makeAstNode<AST::BinaryExpression> (driver->nodePool(), sym(1).Expression,
-    QSOperator::StrictNotEqual, sym(3).Expression);
-  node->operatorToken = loc(2);
-  sym(1).Node = node;
-} break;
-
 case 153: {
   AST::BinaryExpression *node = makeAstNode<AST::BinaryExpression> (driver->nodePool(), sym(1).Expression,
-    QSOperator::BitAnd, sym(3).Expression);
+    QSOperator::StrictNotEqual, sym(3).Expression);
   node->operatorToken = loc(2);
   sym(1).Node = node;
 } break;
@@ -889,7 +902,7 @@ case 155: {
 
 case 157: {
   AST::BinaryExpression *node = makeAstNode<AST::BinaryExpression> (driver->nodePool(), sym(1).Expression,
-    QSOperator::BitXor, sym(3).Expression);
+    QSOperator::BitAnd, sym(3).Expression);
   node->operatorToken = loc(2);
   sym(1).Node = node;
 } break;
@@ -903,7 +916,7 @@ case 159: {
 
 case 161: {
   AST::BinaryExpression *node = makeAstNode<AST::BinaryExpression> (driver->nodePool(), sym(1).Expression,
-    QSOperator::BitOr, sym(3).Expression);
+    QSOperator::BitXor, sym(3).Expression);
   node->operatorToken = loc(2);
   sym(1).Node = node;
 } break;
@@ -917,7 +930,7 @@ case 163: {
 
 case 165: {
   AST::BinaryExpression *node = makeAstNode<AST::BinaryExpression> (driver->nodePool(), sym(1).Expression,
-    QSOperator::And, sym(3).Expression);
+    QSOperator::BitOr, sym(3).Expression);
   node->operatorToken = loc(2);
   sym(1).Node = node;
 } break;
@@ -931,7 +944,7 @@ case 167: {
 
 case 169: {
   AST::BinaryExpression *node = makeAstNode<AST::BinaryExpression> (driver->nodePool(), sym(1).Expression,
-    QSOperator::Or, sym(3).Expression);
+    QSOperator::And, sym(3).Expression);
   node->operatorToken = loc(2);
   sym(1).Node = node;
 } break;
@@ -944,6 +957,13 @@ case 171: {
 } break;
 
 case 173: {
+  AST::BinaryExpression *node = makeAstNode<AST::BinaryExpression> (driver->nodePool(), sym(1).Expression,
+    QSOperator::Or, sym(3).Expression);
+  node->operatorToken = loc(2);
+  sym(1).Node = node;
+} break;
+
+case 175: {
   AST::ConditionalExpression *node = makeAstNode<AST::ConditionalExpression> (driver->nodePool(), sym(1).Expression,
     sym(3).Expression, sym(5).Expression);
   node->questionToken = loc(2);
@@ -951,7 +971,7 @@ case 173: {
   sym(1).Node = node;
 } break;
 
-case 175: {
+case 177: {
   AST::ConditionalExpression *node = makeAstNode<AST::ConditionalExpression> (driver->nodePool(), sym(1).Expression,
     sym(3).Expression, sym(5).Expression);
   node->questionToken = loc(2);
@@ -959,112 +979,112 @@ case 175: {
   sym(1).Node = node;
 } break;
 
-case 177: {
+case 179: {
   AST::BinaryExpression *node = makeAstNode<AST::BinaryExpression> (driver->nodePool(), sym(1).Expression,
     sym(2).ival, sym(3).Expression);
   node->operatorToken = loc(2);
   sym(1).Node = node;
 } break;
 
-case 179: {
+case 181: {
   AST::BinaryExpression *node = makeAstNode<AST::BinaryExpression> (driver->nodePool(), sym(1).Expression,
     sym(2).ival, sym(3).Expression);
   node->operatorToken = loc(2);
   sym(1).Node = node;
 } break;
 
-case 180: {
+case 182: {
   sym(1).ival = QSOperator::Assign;
 } break;
 
-case 181: {
+case 183: {
   sym(1).ival = QSOperator::InplaceMul;
 } break;
 
-case 182: {
+case 184: {
   sym(1).ival = QSOperator::InplaceDiv;
 } break;
 
-case 183: {
+case 185: {
   sym(1).ival = QSOperator::InplaceMod;
 } break;
 
-case 184: {
+case 186: {
   sym(1).ival = QSOperator::InplaceAdd;
 } break;
 
-case 185: {
+case 187: {
   sym(1).ival = QSOperator::InplaceSub;
 } break;
 
-case 186: {
+case 188: {
   sym(1).ival = QSOperator::InplaceLeftShift;
 } break;
 
-case 187: {
+case 189: {
   sym(1).ival = QSOperator::InplaceRightShift;
 } break;
 
-case 188: {
+case 190: {
   sym(1).ival = QSOperator::InplaceURightShift;
 } break;
 
-case 189: {
+case 191: {
   sym(1).ival = QSOperator::InplaceAnd;
 } break;
 
-case 190: {
+case 192: {
   sym(1).ival = QSOperator::InplaceXor;
 } break;
 
-case 191: {
+case 193: {
   sym(1).ival = QSOperator::InplaceOr;
 } break;
 
-case 193: {
+case 195: {
   AST::Expression *node = makeAstNode<AST::Expression> (driver->nodePool(), sym(1).Expression, sym(3).Expression);
   node->commaToken = loc(2);
   sym(1).Node = node;
 } break;
 
-case 194: {
+case 196: {
   sym(1).Node = 0;
 } break;
 
-case 197: {
+case 199: {
   AST::Expression *node = makeAstNode<AST::Expression> (driver->nodePool(), sym(1).Expression, sym(3).Expression);
   node->commaToken = loc(2);
   sym(1).Node = node;
 } break;
 
-case 198: {
+case 200: {
   sym(1).Node = 0;
 } break;
 
-case 215: {
+case 217: {
   AST::Block *node = makeAstNode<AST::Block> (driver->nodePool(), sym(2).StatementList);
   node->lbraceToken = loc(1);
   node->rbraceToken = loc(3);
   sym(1).Node = node;
 } break;
 
-case 216: {
+case 218: {
   sym(1).Node = makeAstNode<AST::StatementList> (driver->nodePool(), sym(1).Statement);
 } break;
 
-case 217: {
+case 219: {
   sym(1).Node = makeAstNode<AST::StatementList> (driver->nodePool(), sym(1).StatementList, sym(2).Statement);
 } break;
 
-case 218: {
+case 220: {
   sym(1).Node = 0;
 } break;
 
-case 219: {
+case 221: {
   sym(1).Node = sym(1).StatementList->finish ();
 } break;
 
-case 221: {
+case 223: {
   AST::VariableStatement *node = makeAstNode<AST::VariableStatement> (driver->nodePool(),
      sym(2).VariableDeclarationList->finish (/*readOnly=*/sym(1).ival == T_CONST));
   node->declarationKindToken = loc(1);
@@ -1072,76 +1092,76 @@ case 221: {
   sym(1).Node = node;
 } break;
 
-case 222: {
+case 224: {
   sym(1).ival = T_CONST;
 } break;
 
-case 223: {
+case 225: {
   sym(1).ival = T_VAR;
 } break;
 
-case 224: {
+case 226: {
   sym(1).Node = makeAstNode<AST::VariableDeclarationList> (driver->nodePool(), sym(1).VariableDeclaration);
 } break;
 
-case 225: {
+case 227: {
   AST::VariableDeclarationList *node = makeAstNode<AST::VariableDeclarationList> (driver->nodePool(),
     sym(1).VariableDeclarationList, sym(3).VariableDeclaration);
   node->commaToken = loc(2);
   sym(1).Node = node;
 } break;
 
-case 226: {
+case 228: {
   sym(1).Node = makeAstNode<AST::VariableDeclarationList> (driver->nodePool(), sym(1).VariableDeclaration);
 } break;
 
-case 227: {
+case 229: {
   sym(1).Node = makeAstNode<AST::VariableDeclarationList> (driver->nodePool(), sym(1).VariableDeclarationList, sym(3).VariableDeclaration);
 } break;
 
-case 228: {
+case 230: {
   AST::VariableDeclaration *node = makeAstNode<AST::VariableDeclaration> (driver->nodePool(), sym(1).sval, sym(2).Expression);
   node->identifierToken = loc(1);
   sym(1).Node = node;
 } break;
 
-case 229: {
+case 231: {
   AST::VariableDeclaration *node = makeAstNode<AST::VariableDeclaration> (driver->nodePool(), sym(1).sval, sym(2).Expression);
   node->identifierToken = loc(1);
   sym(1).Node = node;
 } break;
 
-case 230: {
+case 232: {
   // ### TODO: AST for initializer
   sym(1) = sym(2);
 } break;
 
-case 231: {
+case 233: {
   sym(1).Node = 0;
 } break;
 
-case 233: {
+case 235: {
   // ### TODO: AST for initializer
   sym(1) = sym(2);
 } break;
 
-case 234: {
+case 236: {
   sym(1).Node = 0;
 } break;
 
-case 236: {
+case 238: {
   AST::EmptyStatement *node = makeAstNode<AST::EmptyStatement> (driver->nodePool());
   node->semicolonToken = loc(1);
   sym(1).Node = node;
 } break;
 
-case 238: {
+case 240: {
   AST::ExpressionStatement *node = makeAstNode<AST::ExpressionStatement> (driver->nodePool(), sym(1).Expression);
   node->semicolonToken = loc(2);
   sym(1).Node = node;
 } break;
 
-case 239: {
+case 241: {
   AST::IfStatement *node = makeAstNode<AST::IfStatement> (driver->nodePool(), sym(3).Expression, sym(5).Statement, sym(7).Statement);
   node->ifToken = loc(1);
   node->lparenToken = loc(2);
@@ -1150,7 +1170,7 @@ case 239: {
   sym(1).Node = node;
 } break;
 
-case 240: {
+case 242: {
   AST::IfStatement *node = makeAstNode<AST::IfStatement> (driver->nodePool(), sym(3).Expression, sym(5).Statement);
   node->ifToken = loc(1);
   node->lparenToken = loc(2);
@@ -1158,7 +1178,7 @@ case 240: {
   sym(1).Node = node;
 } break;
 
-case 242: {
+case 244: {
   AST::DoWhileStatement *node = makeAstNode<AST::DoWhileStatement> (driver->nodePool(), sym(2).Statement, sym(5).Expression);
   node->doToken = loc(1);
   node->whileToken = loc(3);
@@ -1168,7 +1188,7 @@ case 242: {
   sym(1).Node = node;
 } break;
 
-case 243: {
+case 245: {
   AST::WhileStatement *node = makeAstNode<AST::WhileStatement> (driver->nodePool(), sym(3).Expression, sym(5).Statement);
   node->whileToken = loc(1);
   node->lparenToken = loc(2);
@@ -1176,7 +1196,7 @@ case 243: {
   sym(1).Node = node;
 } break;
 
-case 244: {
+case 246: {
   AST::ForStatement *node = makeAstNode<AST::ForStatement> (driver->nodePool(), sym(3).Expression,
     sym(5).Expression, sym(7).Expression, sym(9).Statement);
   node->forToken = loc(1);
@@ -1187,7 +1207,7 @@ case 244: {
   sym(1).Node = node;
 } break;
 
-case 245: {
+case 247: {
   AST::LocalForStatement *node = makeAstNode<AST::LocalForStatement> (driver->nodePool(),
      sym(4).VariableDeclarationList->finish (/*readOnly=*/false), sym(6).Expression,
      sym(8).Expression, sym(10).Statement);
@@ -1200,7 +1220,7 @@ case 245: {
   sym(1).Node = node;
 } break;
 
-case 246: {
+case 248: {
   AST:: ForEachStatement *node = makeAstNode<AST::ForEachStatement> (driver->nodePool(), sym(3).Expression,
     sym(5).Expression, sym(7).Statement);
   node->forToken = loc(1);
@@ -1210,7 +1230,7 @@ case 246: {
   sym(1).Node = node;
 } break;
 
-case 247: {
+case 249: {
   AST::LocalForEachStatement *node = makeAstNode<AST::LocalForEachStatement> (driver->nodePool(),
     sym(4).VariableDeclaration, sym(6).Expression, sym(8).Statement);
   node->forToken = loc(1);
@@ -1221,14 +1241,14 @@ case 247: {
   sym(1).Node = node;
 } break;
 
-case 249: {
+case 251: {
   AST::ContinueStatement *node = makeAstNode<AST::ContinueStatement> (driver->nodePool());
   node->continueToken = loc(1);
   node->semicolonToken = loc(2);
   sym(1).Node = node;
 } break;
 
-case 251: {
+case 253: {
   AST::ContinueStatement *node = makeAstNode<AST::ContinueStatement> (driver->nodePool(), sym(2).sval);
   node->continueToken = loc(1);
   node->identifierToken = loc(2);
@@ -1236,14 +1256,14 @@ case 251: {
   sym(1).Node = node;
 } break;
 
-case 253: {
+case 255: {
   AST::BreakStatement *node = makeAstNode<AST::BreakStatement> (driver->nodePool());
   node->breakToken = loc(1);
   node->semicolonToken = loc(2);
   sym(1).Node = node;
 } break;
 
-case 255: {
+case 257: {
   AST::BreakStatement *node = makeAstNode<AST::BreakStatement> (driver->nodePool(), sym(2).sval);
   node->breakToken = loc(1);
   node->identifierToken = loc(2);
@@ -1251,14 +1271,14 @@ case 255: {
   sym(1).Node = node;
 } break;
 
-case 257: {
+case 259: {
   AST::ReturnStatement *node = makeAstNode<AST::ReturnStatement> (driver->nodePool(), sym(2).Expression);
   node->returnToken = loc(1);
   node->semicolonToken = loc(3);
   sym(1).Node = node;
 } break;
 
-case 258: {
+case 260: {
   AST::WithStatement *node = makeAstNode<AST::WithStatement> (driver->nodePool(), sym(3).Expression, sym(5).Statement);
   node->withToken = loc(1);
   node->lparenToken = loc(2);
@@ -1266,7 +1286,7 @@ case 258: {
   sym(1).Node = node;
 } break;
 
-case 259: {
+case 261: {
   AST::SwitchStatement *node = makeAstNode<AST::SwitchStatement> (driver->nodePool(), sym(3).Expression, sym(5).CaseBlock);
   node->switchToken = loc(1);
   node->lparenToken = loc(2);
@@ -1274,83 +1294,83 @@ case 259: {
   sym(1).Node = node;
 } break;
 
-case 260: {
+case 262: {
   AST::CaseBlock *node = makeAstNode<AST::CaseBlock> (driver->nodePool(), sym(2).CaseClauses);
   node->lbraceToken = loc(1);
   node->rbraceToken = loc(3);
   sym(1).Node = node;
 } break;
 
-case 261: {
+case 263: {
   AST::CaseBlock *node = makeAstNode<AST::CaseBlock> (driver->nodePool(), sym(2).CaseClauses, sym(3).DefaultClause, sym(4).CaseClauses);
   node->lbraceToken = loc(1);
   node->rbraceToken = loc(5);
   sym(1).Node = node;
 } break;
 
-case 262: {
+case 264: {
   sym(1).Node = makeAstNode<AST::CaseClauses> (driver->nodePool(), sym(1).CaseClause);
 } break;
 
-case 263: {
+case 265: {
   sym(1).Node = makeAstNode<AST::CaseClauses> (driver->nodePool(), sym(1).CaseClauses, sym(2).CaseClause);
 } break;
 
-case 264: {
+case 266: {
   sym(1).Node = 0;
 } break;
 
-case 265: {
+case 267: {
   sym(1).Node = sym(1).CaseClauses->finish ();
 } break;
 
-case 266: {
+case 268: {
   AST::CaseClause *node = makeAstNode<AST::CaseClause> (driver->nodePool(), sym(2).Expression, sym(4).StatementList);
   node->caseToken = loc(1);
   node->colonToken = loc(3);
   sym(1).Node = node;
 } break;
 
-case 267: {
+case 269: {
   AST::DefaultClause *node = makeAstNode<AST::DefaultClause> (driver->nodePool(), sym(3).StatementList);
   node->defaultToken = loc(1);
   node->colonToken = loc(2);
   sym(1).Node = node;
 } break;
 
-case 268: {
+case 270: {
   AST::LabelledStatement *node = makeAstNode<AST::LabelledStatement> (driver->nodePool(), sym(1).sval, sym(3).Statement);
   node->identifierToken = loc(1);
   node->colonToken = loc(2);
   sym(1).Node = node;
 } break;
 
-case 270: {
+case 272: {
   AST::ThrowStatement *node = makeAstNode<AST::ThrowStatement> (driver->nodePool(), sym(2).Expression);
   node->throwToken = loc(1);
   node->semicolonToken = loc(3);
   sym(1).Node = node;
 } break;
 
-case 271: {
+case 273: {
   AST::TryStatement *node = makeAstNode<AST::TryStatement> (driver->nodePool(), sym(2).Statement, sym(3).Catch);
   node->tryToken = loc(1);
   sym(1).Node = node;
 } break;
 
-case 272: {
+case 274: {
   AST::TryStatement *node = makeAstNode<AST::TryStatement> (driver->nodePool(), sym(2).Statement, sym(3).Finally);
   node->tryToken = loc(1);
   sym(1).Node = node;
 } break;
 
-case 273: {
+case 275: {
   AST::TryStatement *node = makeAstNode<AST::TryStatement> (driver->nodePool(), sym(2).Statement, sym(3).Catch, sym(4).Finally);
   node->tryToken = loc(1);
   sym(1).Node = node;
 } break;
 
-case 274: {
+case 276: {
   AST::Catch *node = makeAstNode<AST::Catch> (driver->nodePool(), sym(3).sval, sym(5).Block);
   node->catchToken = loc(1);
   node->lparenToken = loc(2);
@@ -1359,20 +1379,20 @@ case 274: {
   sym(1).Node = node;
 } break;
 
-case 275: {
+case 277: {
   AST::Finally *node = makeAstNode<AST::Finally> (driver->nodePool(), sym(2).Block);
   node->finallyToken = loc(1);
   sym(1).Node = node;
 } break;
 
-case 277: {
+case 279: {
   AST::DebuggerStatement *node = makeAstNode<AST::DebuggerStatement> (driver->nodePool());
   node->debuggerToken = loc(1);
   node->semicolonToken = loc(2);
   sym(1).Node = node;
 } break;
 
-case 278: {
+case 280: {
   AST::FunctionDeclaration *node = makeAstNode<AST::FunctionDeclaration> (driver->nodePool(), sym(2).sval, sym(4).FormalParameterList, sym(7).FunctionBody);
   node->functionToken = loc(1);
   node->identifierToken = loc(2);
@@ -1383,7 +1403,7 @@ case 278: {
   sym(1).Node = node;
 } break;
 
-case 279: {
+case 281: {
   AST::FunctionExpression *node = makeAstNode<AST::FunctionExpression> (driver->nodePool(), sym(2).sval, sym(4).FormalParameterList, sym(7).FunctionBody);
   node->functionToken = loc(1);
   if (sym(2).sval)
@@ -1395,56 +1415,56 @@ case 279: {
   sym(1).Node = node;
 } break;
 
-case 280: {
+case 282: {
   AST::FormalParameterList *node = makeAstNode<AST::FormalParameterList> (driver->nodePool(), sym(1).sval);
   node->identifierToken = loc(1);
   sym(1).Node = node;
 } break;
 
-case 281: {
+case 283: {
   AST::FormalParameterList *node = makeAstNode<AST::FormalParameterList> (driver->nodePool(), sym(1).FormalParameterList, sym(3).sval);
   node->commaToken = loc(2);
   node->identifierToken = loc(3);
   sym(1).Node = node;
 } break;
 
-case 282: {
+case 284: {
   sym(1).Node = 0;
 } break;
 
-case 283: {
+case 285: {
   sym(1).Node = sym(1).FormalParameterList->finish ();
 } break;
 
-case 284: {
+case 286: {
   sym(1).Node = 0;
 } break;
 
-case 286: {
+case 288: {
   sym(1).Node = makeAstNode<AST::FunctionBody> (driver->nodePool(), sym(1).SourceElements->finish ());
 } break;
 
-case 287: {
+case 289: {
   sym(1).Node = makeAstNode<AST::SourceElements> (driver->nodePool(), sym(1).SourceElement);
 } break;
 
-case 288: {
+case 290: {
   sym(1).Node = makeAstNode<AST::SourceElements> (driver->nodePool(), sym(1).SourceElements, sym(2).SourceElement);
 } break;
 
-case 289: {
+case 291: {
   sym(1).Node = makeAstNode<AST::StatementSourceElement> (driver->nodePool(), sym(1).Statement);
 } break;
 
-case 290: {
+case 292: {
   sym(1).Node = makeAstNode<AST::FunctionSourceElement> (driver->nodePool(), sym(1).FunctionDeclaration);
 } break;
 
-case 291: {
+case 293: {
   sym(1).sval = 0;
 } break;
 
-case 293: {
+case 295: {
   sym(1).Node = 0;
 } break;
 
diff --git a/src/declarative/qml/parser/javascriptparser_p.h b/src/declarative/qml/parser/javascriptparser_p.h
index c08a14a..226ad8b 100644
--- a/src/declarative/qml/parser/javascriptparser_p.h
+++ b/src/declarative/qml/parser/javascriptparser_p.h
@@ -204,9 +204,9 @@ protected:
 };
 
 
-#define J_SCRIPT_REGEXPLITERAL_RULE1 35
+#define J_SCRIPT_REGEXPLITERAL_RULE1 37
 
-#define J_SCRIPT_REGEXPLITERAL_RULE2 36
+#define J_SCRIPT_REGEXPLITERAL_RULE2 38
 
 QT_END_NAMESPACE
 
diff --git a/src/declarative/qml/qmlcompiler.cpp b/src/declarative/qml/qmlcompiler.cpp
index fae0f43..4cfe1e8 100644
--- a/src/declarative/qml/qmlcompiler.cpp
+++ b/src/declarative/qml/qmlcompiler.cpp
@@ -1351,7 +1351,7 @@ bool QmlCompiler::findDynamicProperties(QmlParser::Property *prop,
         definedProperties << propDef;
     }
 
-    obj->dynamicProperties = definedProperties;
+    obj->dynamicProperties << definedProperties;
     return true;
 }
 
@@ -1407,7 +1407,7 @@ bool QmlCompiler::findDynamicSignals(QmlParser::Property *sigs,
         definedSignals << sigDef;
     }
 
-    obj->dynamicSignals = definedSignals;
+    obj->dynamicSignals << definedSignals;
     return true;
 }
 
diff --git a/src/declarative/qml/qmlscriptparser.cpp b/src/declarative/qml/qmlscriptparser.cpp
index 317a3bf..adc30dd 100644
--- a/src/declarative/qml/qmlscriptparser.cpp
+++ b/src/declarative/qml/qmlscriptparser.cpp
@@ -326,6 +326,8 @@ bool ProcessAST::visit(AST::UiImport *node)
     return false;
 }
 
+// UiObjectMember: T_PUBLIC T_DEFAULT UiMemberType T_IDENTIFIER T_COLON Expression
+// UiObjectMember: T_PUBLIC T_DEFAULT UiMemberType T_IDENTIFIER
 // UiObjectMember: T_PUBLIC UiMemberType T_IDENTIFIER T_COLON Expression
 // UiObjectMember: T_PUBLIC UiMemberType T_IDENTIFIER
 //
@@ -335,6 +337,9 @@ bool ProcessAST::visit(AST::UiPublicMember *node)
     const QString memberType = node->memberType->asString();
     const QString name = node->name->asString();
 
+    if (node->isDefaultMember)
+        qWarning() << "default-ness not implemented";
+
     if (memberType == QLatin1String("property")) {
         _stateStack.pushProperty(QLatin1String("properties"), node->publicToken.startLine);
 
-- 
cgit v0.12


From 94a698046c2c00a4627607db1f7099880643e829 Mon Sep 17 00:00:00 2001
From: Yann Bodson <yann.bodson@nokia.com>
Date: Wed, 29 Apr 2009 15:22:28 +1000
Subject: Rename the 'src' attribute 'source'. Don't need to be HTML-like
 anymore.

---
 demos/declarative/calculator/CalcButton.qml        |   4 ++--
 demos/declarative/calculator/calculator.qml        |   2 +-
 .../mediabrowser/content/MediaButton.qml           |   4 ++--
 .../mediabrowser/content/MoviesPathView.qml        |  10 +++++-----
 demos/declarative/mediabrowser/content/Star.qml    |   2 +-
 demos/declarative/mediabrowser/mediabrowser.qml    |   4 ++--
 .../webbrowser/content/RectSoftShadow.qml          |   8 ++++----
 demos/declarative/webbrowser/webbrowser.qml        |  22 ++++++++++-----------
 examples/declarative/contacts/contacts.qml         |   2 +-
 examples/declarative/dial/DialLibrary/Dial.qml     |   8 ++++----
 .../declarative/listview/content/MediaButton.qml   |   4 ++--
 examples/declarative/listview/recipes.qml          |   6 +++---
 examples/declarative/minehunt/Explosion.qml        |   2 +-
 examples/declarative/minehunt/minehunt.qml         |  16 +++++++--------
 .../declarative/namespaces/lib/Chronos/Clock.qml   |   2 +-
 examples/declarative/scrollbar/display.qml         |   2 +-
 examples/declarative/slideswitch/Switch.qml        |   4 ++--
 .../1_Drawing_and_Animation/RemoveButton2.qml      |   2 +-
 .../1_Drawing_and_Animation/RemoveButton3.qml      |   4 ++--
 .../1_Drawing_and_Animation/RemoveButton4.qml      |   6 +++---
 .../1_Drawing_and_Animation/RemoveButton5.qml      |   6 +++---
 .../tutorials/contacts/2_Reuse/ContactField1.qml   |   2 +-
 .../tutorials/contacts/2_Reuse/ContactField2.qml   |   2 +-
 .../tutorials/contacts/2_Reuse/ContactField3.qml   |   2 +-
 .../tutorials/contacts/2_Reuse/ContactField4.qml   |   2 +-
 .../tutorials/contacts/2_Reuse/FieldText3.qml      |   4 ++--
 .../tutorials/contacts/2_Reuse/FieldText4.qml      |   4 ++--
 .../tutorials/contacts/2_Reuse/RemoveButton1.qml   |   6 +++---
 .../tutorials/contacts/2_Reuse/RemoveButton2.qml   |   6 +++---
 .../tutorials/contacts/2_Reuse/RemoveButton3.qml   |   6 +++---
 .../tutorials/contacts/2_Reuse/RemoveButton4.qml   |   6 +++---
 .../tutorials/contacts/3_Collections/Button.qml    |   2 +-
 .../contacts/3_Collections/ContactField.qml        |   2 +-
 .../tutorials/contacts/3_Collections/FieldText.qml |   4 ++--
 .../contacts/3_Collections/RemoveButton.qml        |   6 +++---
 .../tutorials/contacts/Final/Button.qml            |   2 +-
 .../tutorials/contacts/Final/ContactField.qml      |   2 +-
 .../tutorials/contacts/Final/FieldText.qml         |   4 ++--
 .../tutorials/contacts/Final/RemoveButton.qml      |   6 +++---
 .../tutorials/contacts/Final/SearchBar.qml         |   2 +-
 .../tutorials/contacts/shared/contacts.sqlite      | Bin 12288 -> 12288 bytes
 examples/declarative/velocity/Day.qml              |   6 +++---
 examples/declarative/xmldata/daringfireball.qml    |   2 +-
 examples/declarative/xmldata/yahoonews.qml         |   2 +-
 src/declarative/extra/qmlxmllistmodel.cpp          |   4 ++--
 src/declarative/extra/qmlxmllistmodel.h            |   6 +++---
 src/declarative/fx/qfxhighlightfilter.h            |   2 +-
 src/declarative/fx/qfximage.h                      |   2 +-
 src/declarative/fx/qfxparticles.cpp                |   4 ++--
 src/declarative/fx/qfxparticles.h                  |   6 +++---
 src/declarative/util/qmlscript.h                   |   2 +-
 51 files changed, 113 insertions(+), 113 deletions(-)

diff --git a/demos/declarative/calculator/CalcButton.qml b/demos/declarative/calculator/CalcButton.qml
index f240000..f4ccdae 100644
--- a/demos/declarative/calculator/CalcButton.qml
+++ b/demos/declarative/calculator/CalcButton.qml
@@ -25,13 +25,13 @@ Item {
 
     Image {
         id: Image
-        src: "pics/button.sci"
+        source: "pics/button.sci"
         width: Button.width; height: Button.height
     }
 
     Image {
         id: ImagePressed
-        src: "pics/button-pressed.sci"
+        source: "pics/button-pressed.sci"
         width: Button.width; height: Button.height
         opacity: 0
     }
diff --git a/demos/declarative/calculator/calculator.qml b/demos/declarative/calculator/calculator.qml
index 1e7c30a..145435b 100644
--- a/demos/declarative/calculator/calculator.qml
+++ b/demos/declarative/calculator/calculator.qml
@@ -2,7 +2,7 @@ Rect {
     id: MainWindow;
     width: 320; height: 270; color: "black"
 
-    Script { src: "calculator.js" }
+    Script { source: "calculator.js" }
 
     VerticalLayout {
         spacing: 2; margin: 2
diff --git a/demos/declarative/mediabrowser/content/MediaButton.qml b/demos/declarative/mediabrowser/content/MediaButton.qml
index c92305a..6c672ea 100644
--- a/demos/declarative/mediabrowser/content/MediaButton.qml
+++ b/demos/declarative/mediabrowser/content/MediaButton.qml
@@ -7,8 +7,8 @@
         <Property name="text"/>
     </properties>
 
-    <Image id="Image" src="pics/button.png"/>
-    <Image id="Pressed" src="pics/button-pressed.png" opacity="0"/>
+    <Image id="Image" source="pics/button.png"/>
+    <Image id="Pressed" source="pics/button-pressed.png" opacity="0"/>
     <MouseRegion id="MouseRegion" anchors.fill="{Image}" onClicked="Container.clicked.emit();"/>
     <Text font.bold="true" color="white" anchors.centeredIn="{Image}" text="{Container.text}"/>
     <width>{Image.width}</width>
diff --git a/demos/declarative/mediabrowser/content/MoviesPathView.qml b/demos/declarative/mediabrowser/content/MoviesPathView.qml
index a13437a..abc825b 100644
--- a/demos/declarative/mediabrowser/content/MoviesPathView.qml
+++ b/demos/declarative/mediabrowser/content/MoviesPathView.qml
@@ -30,11 +30,11 @@
                 </Script>
 
                 <Rect id="Dvd" anchors.fill="{parent}" color="white">
-                    <Image src="{thumb}" width="215" height="305" anchors.centeredIn="{parent}" opaque="true"/>
-                    <Image src="pics/reflection.png" anchors.centeredIn="{parent}"/>
-                    <Image src="pics/shadow-right.png" x="220"/>
-                    <Image src="pics/shadow-bottom.png" y="310"/>
-                    <Image src="pics/shadow-corner.png" x="220" y="310"/>
+                    <Image source="{thumb}" width="215" height="305" anchors.centeredIn="{parent}" opaque="true"/>
+                    <Image source="pics/reflection.png" anchors.centeredIn="{parent}"/>
+                    <Image source="pics/shadow-right.png" x="220"/>
+                    <Image source="pics/shadow-bottom.png" y="310"/>
+                    <Image source="pics/shadow-corner.png" x="220" y="310"/>
                 </Rect>
 
                 <MouseRegion anchors.fill="{Wrapper}" onClicked="movieClicked()"/>
diff --git a/demos/declarative/mediabrowser/content/Star.qml b/demos/declarative/mediabrowser/content/Star.qml
index 1db29e8..37d314b 100644
--- a/demos/declarative/mediabrowser/content/Star.qml
+++ b/demos/declarative/mediabrowser/content/Star.qml
@@ -8,7 +8,7 @@
         <Signal name="clicked"/>
     </signals>
 
-    <Image id="Image" src="pics/ghns_star.png" x="6" y="7" opacity="0.4" scale="0.5"/>
+    <Image id="Image" source="pics/ghns_star.png" x="6" y="7" opacity="0.4" scale="0.5"/>
     <MouseRegion anchors.fill="{Container}" onClicked="Container.clicked.emit()"/>
 
     <states>
diff --git a/demos/declarative/mediabrowser/mediabrowser.qml b/demos/declarative/mediabrowser/mediabrowser.qml
index df7baa9..3e22de4 100644
--- a/demos/declarative/mediabrowser/mediabrowser.qml
+++ b/demos/declarative/mediabrowser/mediabrowser.qml
@@ -5,11 +5,11 @@
     </properties>
 
     <Item id="Background">
-        <Image src="content/pics/background.png" opaque="true"/>
+        <Image source="content/pics/background.png" opaque="true"/>
 
         <Rect id="Menu" x="-150" width="150" height="480" color="#232323">
             <Text id="IconText" x="30" y="122" font.bold="true" font.size="9" text="Coming Soon" color="white" style="Raised" styleColor="black"/>
-            <Image src="content/pics/shadow-right-screen.png" x="150" height="480" tile="true"/>
+            <Image source="content/pics/shadow-right-screen.png" x="150" height="480" tile="true"/>
         </Rect>
 
         <MovieInfoContainer id="MovieInfoContainer" width="750" x="25" y="500" height="440"/>
diff --git a/demos/declarative/webbrowser/content/RectSoftShadow.qml b/demos/declarative/webbrowser/content/RectSoftShadow.qml
index 0235842..2b39422 100644
--- a/demos/declarative/webbrowser/content/RectSoftShadow.qml
+++ b/demos/declarative/webbrowser/content/RectSoftShadow.qml
@@ -1,10 +1,10 @@
 <Item>
-    <Image src="pics/softshadow-left.sci" x="-16" y="-16"
+    <Image source="pics/softshadow-left.sci" x="-16" y="-16"
         width="16" height="{parent.height+32}" />
-    <Image src="pics/softshadow-right.sci" x="{parent.width}" y="-16"
+    <Image source="pics/softshadow-right.sci" x="{parent.width}" y="-16"
         width="16" height="{parent.height+32}" />
-    <Image src="pics/softshadow-top.png" x="0" y="-16"
+    <Image source="pics/softshadow-top.png" x="0" y="-16"
         width="{parent.width}" height="16" />
-    <Image src="pics/softshadow-bottom.png" x="0" y="{parent.height}"
+    <Image source="pics/softshadow-bottom.png" x="0" y="{parent.height}"
         width="{webview.width*webview.scale}" height="16" />
 </Item>
diff --git a/demos/declarative/webbrowser/webbrowser.qml b/demos/declarative/webbrowser/webbrowser.qml
index 7618f4d..cf96b3f 100644
--- a/demos/declarative/webbrowser/webbrowser.qml
+++ b/demos/declarative/webbrowser/webbrowser.qml
@@ -18,8 +18,8 @@
 
     <Item id="WebPanel" anchors.fill="{parent}" clip="true">
         <Rect color="#555555" anchors.fill="{parent}"/>
-        <Image src="content/pics/softshadow-bottom.png" width="{WebPanel.width}" height="16" />
-        <Image src="content/pics/softshadow-top.png" width="{WebPanel.width}" anchors.bottom="{Footer.top}" height="16" />
+        <Image source="content/pics/softshadow-bottom.png" width="{WebPanel.width}" height="16" />
+        <Image source="content/pics/softshadow-top.png" width="{WebPanel.width}" anchors.bottom="{Footer.top}" height="16" />
         <RectSoftShadow x="{-Flick.xPosition}" y="{-Flick.yPosition}"
             width="{WebView.width*WebView.scale}" height="{Flick.y+WebView.height*WebView.scale}"/>
         <Item id="HeaderSpace" width="{parent.width}" height="60" z="1">
@@ -30,7 +30,7 @@
                                     ? -Flick.xPosition+Flick.viewportWidth-Flick.width
                                     : 0}"
                     y="{Flick.yPosition &lt; 0 ? -Flick.yPosition : progressOff*(Flick.yPosition>height?-height:-Flick.yPosition)}"
-                    height="64" src="content/pics/header.png">
+                    height="64" source="content/pics/header.png">
                 <Text id="HeaderText" text="{WebView.title!='' || WebView.progress == 1.0 ? WebView.title : 'Loading...'}"
                     color="white" styleColor="black" style="Raised"
                     font.family="Helvetica" font.size="10" font.bold="true" elide="ElideRight"
@@ -39,8 +39,8 @@
                     anchors.top="{Header.top}" anchors.topMargin="4" hAlign="AlignHCenter"/>
                 <Item anchors.top="{HeaderText.bottom}" anchors.topMargin="2" anchors.bottom="{parent.bottom}" width="{parent.width}">
                     <Item id="UrlBox" anchors.left="{parent.left}" anchors.leftMargin="12" anchors.right="{parent.right}" anchors.rightMargin="12" height="31" anchors.top="{parent.top}" clip="true">
-                        <Image src="content/pics/addressbar.sci" anchors.fill="{UrlBox}"/>
-                        <Image id="UrlBoxhl" src="content/pics/addressbar-filled.sci" opacity="{1-Header.progressOff}" clip="true" width="{parent.width*WebView.progress}" height="{parent.height}"/>
+                        <Image source="content/pics/addressbar.sci" anchors.fill="{UrlBox}"/>
+                        <Image id="UrlBoxhl" source="content/pics/addressbar-filled.sci" opacity="{1-Header.progressOff}" clip="true" width="{parent.width*WebView.progress}" height="{parent.height}"/>
                         <KeyProxy id="proxy" anchors.left="{UrlBox.left}" anchors.fill="{UrlBox}" focusable="true" targets="{[keyActions,EditUrl]}"/>
                         <KeyActions id="keyActions" return="WebBrowser.url = EditUrl.text; proxy.focus=false;"/>
                         <TextEdit id="EditUrl" color="#555555" text="{WebView.url == '' ? ' ' : WebView.url}"
@@ -104,11 +104,11 @@
             </Rect>
         </Flickable>
         <Image id="Footer" width="{parent.width}" anchors.bottom="{parent.bottom}"
-                height="43" src="content/pics/footer.sci">
+                height="43" source="content/pics/footer.sci">
             <Rect y="-1" width="{parent.width}" height="1" color="#555555"/>
             <Item id="backbutton" anchors.right="{reload.left}" anchors.rightMargin="10" anchors.verticalCenter="{parent.verticalCenter}" width="{back_e.width}" height="{back_e.height}">
-                <Image anchors.fill="{parent}" id="back_e" src="content/pics/back.png" />
-                <Image anchors.fill="{parent}" id="back_d" src="content/pics/back-disabled.png" />
+                <Image anchors.fill="{parent}" id="back_e" source="content/pics/back.png" />
+                <Image anchors.fill="{parent}" id="back_d" source="content/pics/back-disabled.png" />
                 <states>
                     <State name="Enabled" when="{WebView.back.enabled==true}">
                         <SetProperty target="{back_e}" property="opacity" value="1"/>
@@ -126,11 +126,11 @@
                 </transitions>
                 <MouseRegion anchors.fill="{back_e}" onClicked="if (WebView.back.enabled) WebView.back.trigger()"/>
             </Item>
-            <Image id="reload" src="content/pics/reload.png" anchors.horizontalCenter="{parent.horizontalCenter}" anchors.verticalCenter="{parent.verticalCenter}"/>
+            <Image id="reload" source="content/pics/reload.png" anchors.horizontalCenter="{parent.horizontalCenter}" anchors.verticalCenter="{parent.verticalCenter}"/>
             <MouseRegion anchors.fill="{reload}" onClicked="WebView.reload.trigger()"/>
             <Item id="forwardbutton" anchors.left="{reload.right}" anchors.leftMargin="10" anchors.verticalCenter="{parent.verticalCenter}" width="{forward_e.width}" height="{forward_e.height}">
-                <Image anchors.fill="{parent}" anchors.verticalCenter="{parent.verticalCenter}" id="forward_e" src="content/pics/forward.png" />
-                <Image anchors.fill="{parent}" id="forward_d" src="content/pics/forward-disabled.png" />
+                <Image anchors.fill="{parent}" anchors.verticalCenter="{parent.verticalCenter}" id="forward_e" source="content/pics/forward.png" />
+                <Image anchors.fill="{parent}" id="forward_d" source="content/pics/forward-disabled.png" />
                 <states>
                     <State name="Enabled" when="{WebView.forward.enabled==true}">
                         <SetProperty target="{forward_e}" property="opacity" value="1"/>
diff --git a/examples/declarative/contacts/contacts.qml b/examples/declarative/contacts/contacts.qml
index fa50010..f9901ed 100644
--- a/examples/declarative/contacts/contacts.qml
+++ b/examples/declarative/contacts/contacts.qml
@@ -24,7 +24,7 @@ Rect {
                 }
                 Image {
                     id: portraitPic
-                    src: portrait
+                    source: portrait
                     x: 10
                     y: 10
                 }
diff --git a/examples/declarative/dial/DialLibrary/Dial.qml b/examples/declarative/dial/DialLibrary/Dial.qml
index 8336a70..fe8528d 100644
--- a/examples/declarative/dial/DialLibrary/Dial.qml
+++ b/examples/declarative/dial/DialLibrary/Dial.qml
@@ -8,14 +8,14 @@ Item {
     }
     Image {
         id: Background
-        src: "background.svg"
+        source: "background.svg"
     }
     Item {
         x: 104
         y: 102
         rotation: Needle.rotation
         Image {
-            src: "needle_shadow.svg"
+            source: "needle_shadow.svg"
             x: -104
             y: -102
         }
@@ -31,12 +31,12 @@ Item {
             source: Math.min(Math.max(-130, value*2.2 - 130), 133)
         }
         Image {
-            src: "needle.svg"
+            source: "needle.svg"
             x: -102
             y: -98
         }
     }
     Image {
-        src: "overlay.svg"
+        source: "overlay.svg"
     }
 }
diff --git a/examples/declarative/listview/content/MediaButton.qml b/examples/declarative/listview/content/MediaButton.qml
index c92305a..6c672ea 100644
--- a/examples/declarative/listview/content/MediaButton.qml
+++ b/examples/declarative/listview/content/MediaButton.qml
@@ -7,8 +7,8 @@
         <Property name="text"/>
     </properties>
 
-    <Image id="Image" src="pics/button.png"/>
-    <Image id="Pressed" src="pics/button-pressed.png" opacity="0"/>
+    <Image id="Image" source="pics/button.png"/>
+    <Image id="Pressed" source="pics/button-pressed.png" opacity="0"/>
     <MouseRegion id="MouseRegion" anchors.fill="{Image}" onClicked="Container.clicked.emit();"/>
     <Text font.bold="true" color="white" anchors.centeredIn="{Image}" text="{Container.text}"/>
     <width>{Image.width}</width>
diff --git a/examples/declarative/listview/recipes.qml b/examples/declarative/listview/recipes.qml
index 0f6324f..db8604e 100644
--- a/examples/declarative/listview/recipes.qml
+++ b/examples/declarative/listview/recipes.qml
@@ -54,7 +54,7 @@ Rect {
                     width: parent.width
                     Image {
                         id: recipePic
-                        src: picture
+                        source: picture
                         width: 48
                         height: 48
                     }
@@ -115,13 +115,13 @@ Rect {
                     Image {
                         anchors.right: flick.right
                         anchors.top: flick.top
-                        src: "content/pics/moreUp.png"
+                        source: "content/pics/moreUp.png"
                         opacity: flick.atYBeginning ? 0 : 1
                     }
                     Image {
                         anchors.right: flick.right
                         anchors.bottom: flick.bottom
-                        src: "content/pics/moreDown.png"
+                        source: "content/pics/moreDown.png"
                         opacity: flick.atYEnd ? 0 : 1
                     }
                 }
diff --git a/examples/declarative/minehunt/Explosion.qml b/examples/declarative/minehunt/Explosion.qml
index 1e4f03d..8d868bc 100644
--- a/examples/declarative/minehunt/Explosion.qml
+++ b/examples/declarative/minehunt/Explosion.qml
@@ -9,7 +9,7 @@ Item {
         height: 21
         lifeSpan: 3600000
         lifeSpanDeviation: 0
-        src: "pics/star.png"
+        source: "pics/star.png"
         count: 200
         angle: 270
         angleDeviation: 360
diff --git a/examples/declarative/minehunt/minehunt.qml b/examples/declarative/minehunt/minehunt.qml
index 20c3874..0da29b4 100644
--- a/examples/declarative/minehunt/minehunt.qml
+++ b/examples/declarative/minehunt/minehunt.qml
@@ -10,10 +10,10 @@
                     <AxisRotation id="axis" axis.startX="20" axis.endX="20" axis.startY="20" axis.endY="0" />
                 </transform>
                 <front>
-                    <Image src="pics/front.png" width="40" height="40">
+                    <Image source="pics/front.png" width="40" height="40">
                         <Image anchors.horizontalCenter="{parent.horizontalCenter}"
                                anchors.verticalCenter="{parent.verticalCenter}"
-                                src="pics/flag.png" opacity="{modelData.hasFlag}">
+                                source="pics/flag.png" opacity="{modelData.hasFlag}">
                                 <opacity>
                                     <Behaviour>
                                         <NumericAnimation property="opacity" duration="250"/>
@@ -23,12 +23,12 @@
                     </Image>
                 </front>
                 <back>
-                    <Image src="pics/back.png" width="40" height="40">
+                    <Image source="pics/back.png" width="40" height="40">
                         <Text anchors.horizontalCenter="{parent.horizontalCenter}" anchors.verticalCenter="{parent.verticalCenter}" 
                               text="{modelData.hint}" color="white" font.bold="true" 
                               opacity="{modelData.hasMine == false &amp;&amp; modelData.hint > 0}"/>
                         <Image anchors.horizontalCenter="{parent.horizontalCenter}" anchors.verticalCenter="{parent.verticalCenter}" 
-                                src="pics/bomb.png" opacity="{modelData.hasMine}"/>
+                                source="pics/bomb.png" opacity="{modelData.hasMine}"/>
                         <Explosion anchors.horizontalCenter="{parent.horizontalCenter}" anchors.verticalCenter="{parent.verticalCenter}" explode="{modelData.hasMine==true &amp;&amp; modelData.flipped==true}"/>
                     </Image>
                 </back>
@@ -50,7 +50,7 @@
             </Flipable>
         </Component>
     </resources>
-    <Image src="pics/No-Ones-Laughing-3.jpg" tile="true"/>
+    <Image source="pics/No-Ones-Laughing-3.jpg" tile="true"/>
     <Description text="Use the 'minehunt' executable to run this demo!" width="300" opacity="{tiles?0:1}" anchors.horizontalCenter="{parent.horizontalCenter}" anchors.verticalCenter="{parent.verticalCenter}"/>
     <Repeater dataSource="{tiles}" x="1" y="1">
         <Component>
@@ -61,12 +61,12 @@
     </Repeater>
     <Item id="gamedata" width="370" height="100" y="380">
         <Text color="white" font.size="18" x="20" y="20">In play:</Text>
-        <Image x="100" y="20" src="pics/bomb-color.png"/>
+        <Image x="100" y="20" source="pics/bomb-color.png"/>
         <Text x="100" y="60" color="white" text="{numMines}"/>
-        <Image x="140" y="20" src="pics/flag-color.png"/>
+        <Image x="140" y="20" source="pics/flag-color.png"/>
         <Text x="140" y="60" color="white" text="{numFlags}"/>
 
-        <Image x="240" y="0" src="{if(isPlaying==true){'pics/smile.png'}else{if(hasWon==true){'pics/glee.png'}else{'pics/frown.png'}}}">
+        <Image x="240" y="0" source="{if(isPlaying==true){'pics/smile.png'}else{if(hasWon==true){'pics/glee.png'}else{'pics/frown.png'}}}">
             <MouseRegion anchors.fill="{parent}" onClicked="reset()"/>
         </Image>
     </Item>
diff --git a/examples/declarative/namespaces/lib/Chronos/Clock.qml b/examples/declarative/namespaces/lib/Chronos/Clock.qml
index 088a45c..959d193 100644
--- a/examples/declarative/namespaces/lib/Chronos/Clock.qml
+++ b/examples/declarative/namespaces/lib/Chronos/Clock.qml
@@ -1,6 +1,6 @@
 <?qtfx namespacepath:http://nokia.com/qml/Chronos=. ?>
 
-<Image id="clock" src="pics/clockface.png" xmlns:This="http://nokia.com/qml/Chronos">
+<Image id="clock" source="pics/clockface.png" xmlns:This="http://nokia.com/qml/Chronos">
     <properties>
         <Property name="hours" value="0"/>
         <Property name="minutes" value="0"/>
diff --git a/examples/declarative/scrollbar/display.qml b/examples/declarative/scrollbar/display.qml
index 4412d7f..42e8f25 100644
--- a/examples/declarative/scrollbar/display.qml
+++ b/examples/declarative/scrollbar/display.qml
@@ -7,7 +7,7 @@ Rect {
         anchors.fill: parent
         Image {
             id: Picture
-            src: "pics/niagara_falls.jpg"
+            source: "pics/niagara_falls.jpg"
         }
         viewportWidth: Picture.width
         viewportHeight: Picture.height
diff --git a/examples/declarative/slideswitch/Switch.qml b/examples/declarative/slideswitch/Switch.qml
index f62e4b6..a3f75e8 100644
--- a/examples/declarative/slideswitch/Switch.qml
+++ b/examples/declarative/slideswitch/Switch.qml
@@ -31,7 +31,7 @@ Item {
     }
     Image {
         id: Groove
-        src: "background.svg"
+        source: "background.svg"
     }
     MouseRegion {
         anchors.fill: Groove
@@ -39,7 +39,7 @@ Item {
     }
     Image {
         id: Knob
-        src: "knob.svg"
+        source: "knob.svg"
         x: 1
         y: 2
     }
diff --git a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/RemoveButton2.qml b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/RemoveButton2.qml
index 2ba488d..77ff616 100644
--- a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/RemoveButton2.qml
+++ b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/RemoveButton2.qml
@@ -6,5 +6,5 @@
         width="22" height="22"
         anchors.right="{parent.right}" anchors.rightMargin="4"
         anchors.verticalCenter="{parent.verticalCenter}"
-        src="../shared/pics/trash.png"/>
+        source="../shared/pics/trash.png"/>
 </Rect>
diff --git a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/RemoveButton3.qml b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/RemoveButton3.qml
index 9a364c5..0431f59 100644
--- a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/RemoveButton3.qml
+++ b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/RemoveButton3.qml
@@ -6,12 +6,12 @@
         width="22" height="22"
         anchors.right="{parent.right}" anchors.rightMargin="4"
         anchors.verticalCenter="{parent.verticalCenter}"
-        src="../shared/pics/cancel.png"/>
+        source="../shared/pics/cancel.png"/>
     <Image id="confirmIcon"
         width="22" height="22"
         anchors.left="{parent.left}" anchors.leftMargin="4"
         anchors.verticalCenter="{parent.verticalCenter}"
-        src="../shared/pics/ok.png"/>
+        source="../shared/pics/ok.png"/>
     <Text id="text"
         anchors.verticalCenter="{parent.verticalCenter}"
         anchors.left="{confirmIcon.right}" anchors.leftMargin="4"
diff --git a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/RemoveButton4.qml b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/RemoveButton4.qml
index 45ca19d..db894ae 100644
--- a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/RemoveButton4.qml
+++ b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/RemoveButton4.qml
@@ -18,7 +18,7 @@
         width="22" height="22"
         anchors.right="{parent.right}" anchors.rightMargin="4"
         anchors.verticalCenter="{parent.verticalCenter}"
-        src="../shared/pics/trash.png"
+        source="../shared/pics/trash.png"
         opacity="1">
         <MouseRegion
             anchors.fill="{parent}"
@@ -28,7 +28,7 @@
         width="22" height="22"
         anchors.right="{parent.right}" anchors.rightMargin="4"
         anchors.verticalCenter="{parent.verticalCenter}"
-        src="../shared/pics/cancel.png"
+        source="../shared/pics/cancel.png"
         opacity="0">
         <MouseRegion
             anchors.fill="{parent}"
@@ -38,7 +38,7 @@
         width="22" height="22"
         anchors.left="{parent.left}" anchors.leftMargin="4"
         anchors.verticalCenter="{parent.verticalCenter}"
-        src="../shared/pics/ok.png"
+        source="../shared/pics/ok.png"
         opacity="0">
         <MouseRegion
             anchors.fill="{parent}"
diff --git a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/RemoveButton5.qml b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/RemoveButton5.qml
index 68c1838..26fe2c9 100644
--- a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/RemoveButton5.qml
+++ b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/RemoveButton5.qml
@@ -18,7 +18,7 @@
         width="22" height="22"
         anchors.right="{parent.right}" anchors.rightMargin="4"
         anchors.verticalCenter="{parent.verticalCenter}"
-        src="../shared/pics/trash.png"
+        source="../shared/pics/trash.png"
         opacity="1">
         <MouseRegion
             anchors.fill="{parent}"
@@ -28,7 +28,7 @@
         width="22" height="22"
         anchors.right="{parent.right}" anchors.rightMargin="4"
         anchors.verticalCenter="{parent.verticalCenter}"
-        src="../shared/pics/cancel.png"
+        source="../shared/pics/cancel.png"
         opacity="0">
         <MouseRegion
             anchors.fill="{parent}"
@@ -38,7 +38,7 @@
         width="22" height="22"
         anchors.left="{parent.left}" anchors.leftMargin="4"
         anchors.verticalCenter="{parent.verticalCenter}"
-        src="../shared/pics/ok.png"
+        source="../shared/pics/ok.png"
         opacity="0">
         <MouseRegion
             anchors.fill="{parent}"
diff --git a/examples/declarative/tutorials/contacts/2_Reuse/ContactField1.qml b/examples/declarative/tutorials/contacts/2_Reuse/ContactField1.qml
index 7bfdd28..55eb799 100644
--- a/examples/declarative/tutorials/contacts/2_Reuse/ContactField1.qml
+++ b/examples/declarative/tutorials/contacts/2_Reuse/ContactField1.qml
@@ -12,7 +12,7 @@
         font.bold="true"
         color="black"
         text="123123"/>
-    <Image src="../shared/pics/phone.png"
+    <Image source="../shared/pics/phone.png"
         anchors.right="{fieldText.left}" anchors.rightMargin="10"
         anchors.verticalCenter="{parent.verticalCenter}"/>
 </Item>
diff --git a/examples/declarative/tutorials/contacts/2_Reuse/ContactField2.qml b/examples/declarative/tutorials/contacts/2_Reuse/ContactField2.qml
index 7ec3e4d..dd3e85c 100644
--- a/examples/declarative/tutorials/contacts/2_Reuse/ContactField2.qml
+++ b/examples/declarative/tutorials/contacts/2_Reuse/ContactField2.qml
@@ -14,7 +14,7 @@
         font.bold="true"
         color="black"
         text="123123"/>
-    <Image src="../shared/pics/phone.png"
+    <Image source="../shared/pics/phone.png"
         anchors.right="{fieldText.left}" anchors.rightMargin="10"
         anchors.verticalCenter="{parent.verticalCenter}"/>
 </Item>
diff --git a/examples/declarative/tutorials/contacts/2_Reuse/ContactField3.qml b/examples/declarative/tutorials/contacts/2_Reuse/ContactField3.qml
index cef25ce..c9be130 100644
--- a/examples/declarative/tutorials/contacts/2_Reuse/ContactField3.qml
+++ b/examples/declarative/tutorials/contacts/2_Reuse/ContactField3.qml
@@ -21,7 +21,7 @@
     <Image
         anchors.right="{fieldText.left}" anchors.rightMargin="5"
         anchors.verticalCenter="{parent.verticalCenter}"
-        src="{contactField.icon}"/>
+        source="{contactField.icon}"/>
     <states>
         <State name="editingText" when="{fieldText.state == 'editing'}">
             <SetProperty target="{removeButton.anchors}" property="rightMargin" value="-35"/>
diff --git a/examples/declarative/tutorials/contacts/2_Reuse/ContactField4.qml b/examples/declarative/tutorials/contacts/2_Reuse/ContactField4.qml
index 13ccbc0..b1c22cd 100644
--- a/examples/declarative/tutorials/contacts/2_Reuse/ContactField4.qml
+++ b/examples/declarative/tutorials/contacts/2_Reuse/ContactField4.qml
@@ -20,7 +20,7 @@
     <Image
         anchors.right="{fieldText.left}" anchors.rightMargin="5"
         anchors.verticalCenter="{parent.verticalCenter}"
-        src="{contactField.icon}"/>
+        source="{contactField.icon}"/>
     <states>
         <State name="editingText" when="{fieldText.state == 'editing'}">
             <SetProperty target="{removeButton.anchors}" property="rightMargin" value="-35"/>
diff --git a/examples/declarative/tutorials/contacts/2_Reuse/FieldText3.qml b/examples/declarative/tutorials/contacts/2_Reuse/FieldText3.qml
index 97c0772..1fa99b1 100644
--- a/examples/declarative/tutorials/contacts/2_Reuse/FieldText3.qml
+++ b/examples/declarative/tutorials/contacts/2_Reuse/FieldText3.qml
@@ -34,13 +34,13 @@
         width="22" height="22"
         anchors.right="{parent.right}" anchors.rightMargin="4"
         anchors.verticalCenter="{parent.verticalCenter}"
-        src="../shared/pics/cancel.png"
+        source="../shared/pics/cancel.png"
         opacity="0"/>
     <Image id="confirmIcon"
         width="22" height="22"
         anchors.left="{parent.left}" anchors.leftMargin="4"
         anchors.verticalCenter="{parent.verticalCenter}"
-        src="../shared/pics/ok.png"
+        source="../shared/pics/ok.png"
         opacity="0"/>
     <TextEdit id="textEdit"
         anchors.left="{parent.left}" anchors.leftMargin="5"
diff --git a/examples/declarative/tutorials/contacts/2_Reuse/FieldText4.qml b/examples/declarative/tutorials/contacts/2_Reuse/FieldText4.qml
index 45bb18d..9fd4646 100644
--- a/examples/declarative/tutorials/contacts/2_Reuse/FieldText4.qml
+++ b/examples/declarative/tutorials/contacts/2_Reuse/FieldText4.qml
@@ -39,13 +39,13 @@
         width="22" height="22"
         anchors.right="{parent.right}" anchors.rightMargin="4"
         anchors.verticalCenter="{parent.verticalCenter}"
-        src="../shared/pics/cancel.png"
+        source="../shared/pics/cancel.png"
         opacity="0"/>
     <Image id="confirmIcon"
         width="22" height="22"
         anchors.left="{parent.left}" anchors.leftMargin="4"
         anchors.verticalCenter="{parent.verticalCenter}"
-        src="../shared/pics/ok.png"
+        source="../shared/pics/ok.png"
         opacity="0"/>
     <TextEdit id="textEdit"
         anchors.left="{parent.left}" anchors.leftMargin="5"
diff --git a/examples/declarative/tutorials/contacts/2_Reuse/RemoveButton1.qml b/examples/declarative/tutorials/contacts/2_Reuse/RemoveButton1.qml
index 68c1838..26fe2c9 100644
--- a/examples/declarative/tutorials/contacts/2_Reuse/RemoveButton1.qml
+++ b/examples/declarative/tutorials/contacts/2_Reuse/RemoveButton1.qml
@@ -18,7 +18,7 @@
         width="22" height="22"
         anchors.right="{parent.right}" anchors.rightMargin="4"
         anchors.verticalCenter="{parent.verticalCenter}"
-        src="../shared/pics/trash.png"
+        source="../shared/pics/trash.png"
         opacity="1">
         <MouseRegion
             anchors.fill="{parent}"
@@ -28,7 +28,7 @@
         width="22" height="22"
         anchors.right="{parent.right}" anchors.rightMargin="4"
         anchors.verticalCenter="{parent.verticalCenter}"
-        src="../shared/pics/cancel.png"
+        source="../shared/pics/cancel.png"
         opacity="0">
         <MouseRegion
             anchors.fill="{parent}"
@@ -38,7 +38,7 @@
         width="22" height="22"
         anchors.left="{parent.left}" anchors.leftMargin="4"
         anchors.verticalCenter="{parent.verticalCenter}"
-        src="../shared/pics/ok.png"
+        source="../shared/pics/ok.png"
         opacity="0">
         <MouseRegion
             anchors.fill="{parent}"
diff --git a/examples/declarative/tutorials/contacts/2_Reuse/RemoveButton2.qml b/examples/declarative/tutorials/contacts/2_Reuse/RemoveButton2.qml
index d9ff4c5..65dace7 100644
--- a/examples/declarative/tutorials/contacts/2_Reuse/RemoveButton2.qml
+++ b/examples/declarative/tutorials/contacts/2_Reuse/RemoveButton2.qml
@@ -24,7 +24,7 @@
         width="22" height="22"
         anchors.right="{parent.right}" anchors.rightMargin="4"
         anchors.verticalCenter="{parent.verticalCenter}"
-        src="../shared/pics/trash.png"
+        source="../shared/pics/trash.png"
         opacity="1">
         <MouseRegion
             anchors.fill="{parent}"
@@ -34,7 +34,7 @@
         width="22" height="22"
         anchors.right="{parent.right}" anchors.rightMargin="4"
         anchors.verticalCenter="{parent.verticalCenter}"
-        src="../shared/pics/cancel.png"
+        source="../shared/pics/cancel.png"
         opacity="0">
         <MouseRegion
             anchors.fill="{parent}"
@@ -44,7 +44,7 @@
         width="22" height="22"
         anchors.left="{parent.left}" anchors.leftMargin="4"
         anchors.verticalCenter="{parent.verticalCenter}"
-        src="../shared/pics/ok.png"
+        source="../shared/pics/ok.png"
         opacity="0">
         <MouseRegion
             anchors.fill="{parent}"
diff --git a/examples/declarative/tutorials/contacts/2_Reuse/RemoveButton3.qml b/examples/declarative/tutorials/contacts/2_Reuse/RemoveButton3.qml
index d9ff4c5..65dace7 100644
--- a/examples/declarative/tutorials/contacts/2_Reuse/RemoveButton3.qml
+++ b/examples/declarative/tutorials/contacts/2_Reuse/RemoveButton3.qml
@@ -24,7 +24,7 @@
         width="22" height="22"
         anchors.right="{parent.right}" anchors.rightMargin="4"
         anchors.verticalCenter="{parent.verticalCenter}"
-        src="../shared/pics/trash.png"
+        source="../shared/pics/trash.png"
         opacity="1">
         <MouseRegion
             anchors.fill="{parent}"
@@ -34,7 +34,7 @@
         width="22" height="22"
         anchors.right="{parent.right}" anchors.rightMargin="4"
         anchors.verticalCenter="{parent.verticalCenter}"
-        src="../shared/pics/cancel.png"
+        source="../shared/pics/cancel.png"
         opacity="0">
         <MouseRegion
             anchors.fill="{parent}"
@@ -44,7 +44,7 @@
         width="22" height="22"
         anchors.left="{parent.left}" anchors.leftMargin="4"
         anchors.verticalCenter="{parent.verticalCenter}"
-        src="../shared/pics/ok.png"
+        source="../shared/pics/ok.png"
         opacity="0">
         <MouseRegion
             anchors.fill="{parent}"
diff --git a/examples/declarative/tutorials/contacts/2_Reuse/RemoveButton4.qml b/examples/declarative/tutorials/contacts/2_Reuse/RemoveButton4.qml
index a489e95..9759636 100644
--- a/examples/declarative/tutorials/contacts/2_Reuse/RemoveButton4.qml
+++ b/examples/declarative/tutorials/contacts/2_Reuse/RemoveButton4.qml
@@ -28,7 +28,7 @@
         width="22" height="22"
         anchors.right="{parent.right}" anchors.rightMargin="4"
         anchors.verticalCenter="{parent.verticalCenter}"
-        src="../shared/pics/trash.png"
+        source="../shared/pics/trash.png"
         opacity="1">
         <MouseRegion
             anchors.fill="{parent}"
@@ -38,7 +38,7 @@
         width="22" height="22"
         anchors.right="{parent.right}" anchors.rightMargin="4"
         anchors.verticalCenter="{parent.verticalCenter}"
-        src="../shared/pics/cancel.png"
+        source="../shared/pics/cancel.png"
         opacity="0">
         <MouseRegion
             anchors.fill="{parent}"
@@ -48,7 +48,7 @@
         width="22" height="22"
         anchors.left="{parent.left}" anchors.leftMargin="4"
         anchors.verticalCenter="{parent.verticalCenter}"
-        src="../shared/pics/ok.png"
+        source="../shared/pics/ok.png"
         opacity="0">
         <MouseRegion
             anchors.fill="{parent}"
diff --git a/examples/declarative/tutorials/contacts/3_Collections/Button.qml b/examples/declarative/tutorials/contacts/3_Collections/Button.qml
index 8290d35..14965b5 100644
--- a/examples/declarative/tutorials/contacts/3_Collections/Button.qml
+++ b/examples/declarative/tutorials/contacts/3_Collections/Button.qml
@@ -10,7 +10,7 @@
         color="lightgreen"
         radius="5">
         <Image id="iconImage"
-            src="{button.icon}"
+            source="{button.icon}"
             anchors.horizontalCenter="{buttonRect.horizontalCenter}"
             anchors.verticalCenter="{buttonRect.verticalCenter}"/>
         <MouseRegion id="buttonMouseRegion"
diff --git a/examples/declarative/tutorials/contacts/3_Collections/ContactField.qml b/examples/declarative/tutorials/contacts/3_Collections/ContactField.qml
index 819914c..616d328 100644
--- a/examples/declarative/tutorials/contacts/3_Collections/ContactField.qml
+++ b/examples/declarative/tutorials/contacts/3_Collections/ContactField.qml
@@ -20,7 +20,7 @@
     <Image
         anchors.right="{fieldText.left}" anchors.rightMargin="5"
         anchors.verticalCenter="{parent.verticalCenter}"
-        src="{contactField.icon}"/>
+        source="{contactField.icon}"/>
     <states>
         <State name="editingText" when="{fieldText.state == 'editing'}">
             <SetProperty target="{removeButton.anchors}" property="rightMargin" value="-35"/>
diff --git a/examples/declarative/tutorials/contacts/3_Collections/FieldText.qml b/examples/declarative/tutorials/contacts/3_Collections/FieldText.qml
index 583c73e..6573ce2 100644
--- a/examples/declarative/tutorials/contacts/3_Collections/FieldText.qml
+++ b/examples/declarative/tutorials/contacts/3_Collections/FieldText.qml
@@ -39,13 +39,13 @@
         width="22" height="22"
         anchors.right="{parent.right}" anchors.rightMargin="4"
         anchors.verticalCenter="{parent.verticalCenter}"
-        src="../shared/pics/cancel.png"
+        source="../shared/pics/cancel.png"
         opacity="0"/>
     <Image id="confirmIcon"
         width="22" height="22"
         anchors.left="{parent.left}" anchors.leftMargin="4"
         anchors.verticalCenter="{parent.verticalCenter}"
-        src="../shared/pics/ok.png"
+        source="../shared/pics/ok.png"
         opacity="0"/>
     <TextEdit id="textEdit"
         anchors.left="{parent.left}" anchors.leftMargin="5"
diff --git a/examples/declarative/tutorials/contacts/3_Collections/RemoveButton.qml b/examples/declarative/tutorials/contacts/3_Collections/RemoveButton.qml
index 493ab7a..b096bca 100644
--- a/examples/declarative/tutorials/contacts/3_Collections/RemoveButton.qml
+++ b/examples/declarative/tutorials/contacts/3_Collections/RemoveButton.qml
@@ -28,7 +28,7 @@
         width="22" height="22"
         anchors.right="{parent.right}" anchors.rightMargin="4"
         anchors.verticalCenter="{parent.verticalCenter}"
-        src="../shared/pics/trash.png"
+        source="../shared/pics/trash.png"
         opacity="1">
         <MouseRegion
             anchors.fill="{parent}"
@@ -38,7 +38,7 @@
         width="22" height="22"
         anchors.right="{parent.right}" anchors.rightMargin="4"
         anchors.verticalCenter="{parent.verticalCenter}"
-        src="../shared/pics/cancel.png"
+        source="../shared/pics/cancel.png"
         opacity="0">
         <MouseRegion
             anchors.fill="{parent}"
@@ -48,7 +48,7 @@
         width="22" height="22"
         anchors.left="{parent.left}" anchors.leftMargin="4"
         anchors.verticalCenter="{parent.verticalCenter}"
-        src="../shared/pics/ok.png"
+        source="../shared/pics/ok.png"
         opacity="0">
         <MouseRegion
             anchors.fill="{parent}"
diff --git a/examples/declarative/tutorials/contacts/Final/Button.qml b/examples/declarative/tutorials/contacts/Final/Button.qml
index 8290d35..14965b5 100644
--- a/examples/declarative/tutorials/contacts/Final/Button.qml
+++ b/examples/declarative/tutorials/contacts/Final/Button.qml
@@ -10,7 +10,7 @@
         color="lightgreen"
         radius="5">
         <Image id="iconImage"
-            src="{button.icon}"
+            source="{button.icon}"
             anchors.horizontalCenter="{buttonRect.horizontalCenter}"
             anchors.verticalCenter="{buttonRect.verticalCenter}"/>
         <MouseRegion id="buttonMouseRegion"
diff --git a/examples/declarative/tutorials/contacts/Final/ContactField.qml b/examples/declarative/tutorials/contacts/Final/ContactField.qml
index fe9329a..80ffd30 100644
--- a/examples/declarative/tutorials/contacts/Final/ContactField.qml
+++ b/examples/declarative/tutorials/contacts/Final/ContactField.qml
@@ -21,7 +21,7 @@
     <Image
         anchors.right="{fieldText.left}" anchors.rightMargin="5"
         anchors.verticalCenter="{parent.verticalCenter}"
-        src="{contactField.icon}"/>
+        source="{contactField.icon}"/>
     <states>
         <State name="editingText" when="{fieldText.state == 'editing'}">
             <SetProperty target="{removeButton.anchors}" property="rightMargin" value="-35"/>
diff --git a/examples/declarative/tutorials/contacts/Final/FieldText.qml b/examples/declarative/tutorials/contacts/Final/FieldText.qml
index a82cecd..38ad026 100644
--- a/examples/declarative/tutorials/contacts/Final/FieldText.qml
+++ b/examples/declarative/tutorials/contacts/Final/FieldText.qml
@@ -39,13 +39,13 @@
         width="22" height="22"
         anchors.right="{parent.right}" anchors.rightMargin="4"
         anchors.verticalCenter="{parent.verticalCenter}"
-        src="../shared/pics/cancel.png"
+        source="../shared/pics/cancel.png"
         opacity="0"/>
     <Image id="confirmIcon"
         width="22" height="22"
         anchors.left="{parent.left}" anchors.leftMargin="4"
         anchors.verticalCenter="{parent.verticalCenter}"
-        src="../shared/pics/ok.png"
+        source="../shared/pics/ok.png"
         opacity="0"/>
     <TextEdit id="textEdit"
         anchors.left="{parent.left}" anchors.leftMargin="0"
diff --git a/examples/declarative/tutorials/contacts/Final/RemoveButton.qml b/examples/declarative/tutorials/contacts/Final/RemoveButton.qml
index 493ab7a..b096bca 100644
--- a/examples/declarative/tutorials/contacts/Final/RemoveButton.qml
+++ b/examples/declarative/tutorials/contacts/Final/RemoveButton.qml
@@ -28,7 +28,7 @@
         width="22" height="22"
         anchors.right="{parent.right}" anchors.rightMargin="4"
         anchors.verticalCenter="{parent.verticalCenter}"
-        src="../shared/pics/trash.png"
+        source="../shared/pics/trash.png"
         opacity="1">
         <MouseRegion
             anchors.fill="{parent}"
@@ -38,7 +38,7 @@
         width="22" height="22"
         anchors.right="{parent.right}" anchors.rightMargin="4"
         anchors.verticalCenter="{parent.verticalCenter}"
-        src="../shared/pics/cancel.png"
+        source="../shared/pics/cancel.png"
         opacity="0">
         <MouseRegion
             anchors.fill="{parent}"
@@ -48,7 +48,7 @@
         width="22" height="22"
         anchors.left="{parent.left}" anchors.leftMargin="4"
         anchors.verticalCenter="{parent.verticalCenter}"
-        src="../shared/pics/ok.png"
+        source="../shared/pics/ok.png"
         opacity="0">
         <MouseRegion
             anchors.fill="{parent}"
diff --git a/examples/declarative/tutorials/contacts/Final/SearchBar.qml b/examples/declarative/tutorials/contacts/Final/SearchBar.qml
index aea5a5d..3965e39 100644
--- a/examples/declarative/tutorials/contacts/Final/SearchBar.qml
+++ b/examples/declarative/tutorials/contacts/Final/SearchBar.qml
@@ -6,7 +6,7 @@
     <Image id="searchIcon"
         anchors.left="{parent.left}" anchors.leftMargin="5"
         anchors.verticalCenter="{parent.verticalCenter}"
-        src="../shared/pics/search.png"/>
+        source="../shared/pics/search.png"/>
     <TextEdit id="searchEdit"
         anchors.left="{searchIcon.right}" anchors.right="{parent.right}"
         anchors.leftMargin="5" anchors.rightMargin="5"
diff --git a/examples/declarative/tutorials/contacts/shared/contacts.sqlite b/examples/declarative/tutorials/contacts/shared/contacts.sqlite
index 7347adc..6918878 100644
Binary files a/examples/declarative/tutorials/contacts/shared/contacts.sqlite and b/examples/declarative/tutorials/contacts/shared/contacts.sqlite differ
diff --git a/examples/declarative/velocity/Day.qml b/examples/declarative/velocity/Day.qml
index 3441648..b65f2bc 100644
--- a/examples/declarative/velocity/Day.qml
+++ b/examples/declarative/velocity/Day.qml
@@ -4,7 +4,7 @@
         <Property name="stickies" />
     </properties>
 
-    <Image x="10" y="10" src="cork.jpg" opaque="true"/>
+    <Image x="10" y="10" source="cork.jpg" opaque="true"/>
     <Text x="20" y="20" height="40" font.size="14" font.bold="true" width="370" text="{day}" style="Outline" styleColor="#dedede"/>
 
     <Repeater dataSource="{Page.stickies}">
@@ -13,13 +13,13 @@
                 <Follow source="{-Flick.xVelocity / 100}" spring="2.0" damping="0.1"/>
             </rotation>
             <Item id="Sticky" scale="0.5">
-                <Image id="StickyImage" src="sticky.png" smooth="true" y="-20" x="{8 + -width * 0.6 / 2}" scale="0.6" />
+                <Image id="StickyImage" source="sticky.png" smooth="true" y="-20" x="{8 + -width * 0.6 / 2}" scale="0.6" />
                 <TextEdit id="MyText" smooth="true" font.size="28" readOnly="false" x="-104" y="36" wrap="true" rotation="-8" text="{noteText}" width="195" height="172" />
                 <Item y="-20" x="{StickyImage.x}" width="{StickyImage.width * StickyImage.scale}" height="{StickyImage.height * StickyImage.scale}" >
                     <MouseRegion id="Mouse" onClicked="MyText.focus = true" anchors.fill="{parent}" drag.target="{StickyPage}" drag.axis="xy" drag.ymin="0" drag.ymax="500" drag.xmin="0" drag.xmax="400"/>
                 </Item>
             </Item>
-            <Image src="tack.png" x="{-width / 2}" y="{-height * 0.7 / 2}" scale="0.7" />
+            <Image source="tack.png" x="{-width / 2}" y="{-height * 0.7 / 2}" scale="0.7" />
 
             <states>
                 <State name="pressed" when="{Mouse.pressed}">
diff --git a/examples/declarative/xmldata/daringfireball.qml b/examples/declarative/xmldata/daringfireball.qml
index cfd0a98..5e98d1b 100644
--- a/examples/declarative/xmldata/daringfireball.qml
+++ b/examples/declarative/xmldata/daringfireball.qml
@@ -1,6 +1,6 @@
 <Rect color="white" width="600" height="600">
   <resources>
-        <XmlListModel id="feedModel" src="http://daringfireball.net/index.xml"
+        <XmlListModel id="feedModel" source="http://daringfireball.net/index.xml"
                                      query="doc($src)/feed/entry">
             <namespaceDeclarations>
                 declare default element namespace 'http://www.w3.org/2005/Atom';
diff --git a/examples/declarative/xmldata/yahoonews.qml b/examples/declarative/xmldata/yahoonews.qml
index 80ace18..32a706e 100644
--- a/examples/declarative/xmldata/yahoonews.qml
+++ b/examples/declarative/xmldata/yahoonews.qml
@@ -1,6 +1,6 @@
 <Rect color="black" gradientColor="#AAAAAA" width="600" height="600">
   <resources>
-        <XmlListModel id="feedModel" src="http://rss.news.yahoo.com/rss/oceania" query="doc($src)/rss/channel/item">
+        <XmlListModel id="feedModel" source="http://rss.news.yahoo.com/rss/oceania" query="doc($src)/rss/channel/item">
             <Role name="title" query="title/string()"/>
             <Role name="link" query="link/string()"/>
             <Role name="description" query="description/string()" isCData="true"/>
diff --git a/src/declarative/extra/qmlxmllistmodel.cpp b/src/declarative/extra/qmlxmllistmodel.cpp
index 562a1c8..91c8139 100644
--- a/src/declarative/extra/qmlxmllistmodel.cpp
+++ b/src/declarative/extra/qmlxmllistmodel.cpp
@@ -192,13 +192,13 @@ QString QmlXmlListModel::toString(int role) const
     return d->roleNames.at(index);
 }
 
-QString QmlXmlListModel::src() const
+QString QmlXmlListModel::source() const
 {
     Q_D(const QmlXmlListModel);
     return d->src;
 }
 
-void QmlXmlListModel::setSrc(const QString &src)
+void QmlXmlListModel::setSource(const QString &src)
 {
     Q_D(QmlXmlListModel);
     d->src = src;
diff --git a/src/declarative/extra/qmlxmllistmodel.h b/src/declarative/extra/qmlxmllistmodel.h
index a8f3087..d06cabf 100644
--- a/src/declarative/extra/qmlxmllistmodel.h
+++ b/src/declarative/extra/qmlxmllistmodel.h
@@ -90,7 +90,7 @@ class Q_DECLARATIVE_EXPORT QmlXmlListModel : public QListModelInterface, public
     Q_OBJECT
     Q_INTERFACES(QmlParserStatus)
 
-    Q_PROPERTY(QString src READ src WRITE setSrc)
+    Q_PROPERTY(QString source READ source WRITE setSource)
     Q_PROPERTY(QString query READ query WRITE setQuery)
     Q_PROPERTY(QString namespaceDeclarations READ namespaceDeclarations WRITE setNamespaceDeclarations)
     Q_PROPERTY(QmlList<XmlListModelRole *> *roles READ roleObjects)
@@ -106,8 +106,8 @@ public:
 
     QmlList<XmlListModelRole *> *roleObjects();
 
-    QString src() const;
-    void setSrc(const QString&);
+    QString source() const;
+    void setSource(const QString&);
 
     QString query() const;
     void setQuery(const QString&);
diff --git a/src/declarative/fx/qfxhighlightfilter.h b/src/declarative/fx/qfxhighlightfilter.h
index 6204242..218f4e1 100644
--- a/src/declarative/fx/qfxhighlightfilter.h
+++ b/src/declarative/fx/qfxhighlightfilter.h
@@ -56,7 +56,7 @@ class Q_DECLARATIVE_EXPORT QFxHighlightFilter : public QSimpleCanvasFilter
 {
     Q_OBJECT
 
-    Q_PROPERTY(QString src READ source WRITE setSource NOTIFY sourceChanged)
+    Q_PROPERTY(QString source READ source WRITE setSource NOTIFY sourceChanged)
     Q_PROPERTY(bool tiled READ tiled WRITE setTiled NOTIFY tiledChanged)
     Q_PROPERTY(int xOffset READ xOffset WRITE setXOffset NOTIFY offsetChanged)
     Q_PROPERTY(int yOffset READ yOffset WRITE setYOffset NOTIFY offsetChanged)
diff --git a/src/declarative/fx/qfximage.h b/src/declarative/fx/qfximage.h
index 4eed0ef..37fe5be 100644
--- a/src/declarative/fx/qfximage.h
+++ b/src/declarative/fx/qfximage.h
@@ -57,7 +57,7 @@ class Q_DECLARATIVE_EXPORT QFxImage : public QFxItem
     Q_ENUMS(Status)
 
     Q_PROPERTY(Status status READ status NOTIFY statusChanged)
-    Q_PROPERTY(QString src READ source WRITE setSource NOTIFY sourceChanged)
+    Q_PROPERTY(QString source READ source WRITE setSource NOTIFY sourceChanged)
 
     Q_PROPERTY(QFxScaleGrid *scaleGrid READ scaleGrid)
     Q_PROPERTY(bool tile READ isTiled WRITE setTiled)
diff --git a/src/declarative/fx/qfxparticles.cpp b/src/declarative/fx/qfxparticles.cpp
index 309ebe8..b6b4c85 100644
--- a/src/declarative/fx/qfxparticles.cpp
+++ b/src/declarative/fx/qfxparticles.cpp
@@ -576,7 +576,7 @@ QFxParticles::~QFxParticles()
     \property QFxParticles::src
     \brief the URL of the particle image.
 */
-QString QFxParticles::url() const
+QString QFxParticles::source() const
 {
     Q_D(const QFxParticles);
     return d->source;
@@ -593,7 +593,7 @@ void QFxParticles::imageLoaded()
     update();
 }
 
-void QFxParticles::setUrl(const QString &name)
+void QFxParticles::setSource(const QString &name)
 {
     Q_D(QFxParticles);
 
diff --git a/src/declarative/fx/qfxparticles.h b/src/declarative/fx/qfxparticles.h
index d9c810d..0696e60 100644
--- a/src/declarative/fx/qfxparticles.h
+++ b/src/declarative/fx/qfxparticles.h
@@ -153,7 +153,7 @@ class Q_DECLARATIVE_EXPORT QFxParticles : public QFxItem
 {
     Q_OBJECT
 
-    Q_PROPERTY(QString src READ url WRITE setUrl);
+    Q_PROPERTY(QString source READ source WRITE setSource);
     Q_PROPERTY(int count READ count WRITE setCount);
     Q_PROPERTY(int lifeSpan READ lifeSpan WRITE setLifeSpan);
     Q_PROPERTY(int lifeSpanDeviation READ lifeSpanDeviation WRITE setLifeSpanDeviation);
@@ -172,8 +172,8 @@ public:
     QFxParticles(QFxItem *parent=0);
     ~QFxParticles();
 
-    QString url() const;
-    void setUrl(const QString &);
+    QString source() const;
+    void setSource(const QString &);
 
     int count() const;
     void setCount(int cnt);
diff --git a/src/declarative/util/qmlscript.h b/src/declarative/util/qmlscript.h
index fc038b4..8047a88 100644
--- a/src/declarative/util/qmlscript.h
+++ b/src/declarative/util/qmlscript.h
@@ -58,7 +58,7 @@ class Q_DECLARATIVE_EXPORT QmlScript : public QObject
     Q_DECLARE_PRIVATE(QmlScript);
 
     Q_PROPERTY(QString script READ script WRITE setScript);
-    Q_PROPERTY(QString src READ source WRITE setSource);
+    Q_PROPERTY(QString source READ source WRITE setSource);
     Q_CLASSINFO("DefaultProperty", "script");
 
 public:
-- 
cgit v0.12


From 86aa54ba75101121a55d340620d2273b82e6143d Mon Sep 17 00:00:00 2001
From: Yann Bodson <yann.bodson@nokia.com>
Date: Wed, 29 Apr 2009 15:57:58 +1000
Subject: Forgot this src attribute.

---
 demos/declarative/mediabrowser/content/PhonesPathView.qml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/demos/declarative/mediabrowser/content/PhonesPathView.qml b/demos/declarative/mediabrowser/content/PhonesPathView.qml
index 3fbb3ed..df7e742 100644
--- a/demos/declarative/mediabrowser/content/PhonesPathView.qml
+++ b/demos/declarative/mediabrowser/content/PhonesPathView.qml
@@ -39,7 +39,7 @@
                     <!-- <Image source="pics/reflection.png" anchors.fill="{parent}"/> -->
                     <Image source="pics/shadow-right.png" x="{Dvd.width}" height="{Dvd.height}"/>
                     <Image source="pics/shadow-bottom.png" y="{Dvd.height}" width="{Dvd.width}"/>
-                    <Image id="Corner" src="pics/shadow-corner.png" x="{Dvd.width}" y="{Dvd.height}"/>
+                    <Image id="Corner" source="pics/shadow-corner.png" x="{Dvd.width}" y="{Dvd.height}"/>
                 </Rect>
 
                 <MouseRegion anchors.fill="{Wrapper}" onClicked="phoneClicked()"/>
-- 
cgit v0.12


From c01d432060dccca5bc22dc5fd86eae97e1df8231 Mon Sep 17 00:00:00 2001
From: Martin Smith <msmith@trolltech.com>
Date: Wed, 29 Apr 2009 09:01:34 +0200
Subject: qdoc: Corrected some qdoc warnings.

---
 doc/src/declarative/elements.qdoc | 2 +-
 src/declarative/util/qmlstate.cpp | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/doc/src/declarative/elements.qdoc b/doc/src/declarative/elements.qdoc
index 8fff472..8955587 100644
--- a/doc/src/declarative/elements.qdoc
+++ b/doc/src/declarative/elements.qdoc
@@ -16,7 +16,7 @@ The following table lists the Qml elements provided by the Qt Declarative module
 
 \o
 \list
-\o \l StateGroup
+\o \l State
 \o \l SetProperty
 \o \l SetProperties
 \o \l ParentChange
diff --git a/src/declarative/util/qmlstate.cpp b/src/declarative/util/qmlstate.cpp
index 9b1b695..6a9cc12 100644
--- a/src/declarative/util/qmlstate.cpp
+++ b/src/declarative/util/qmlstate.cpp
@@ -175,7 +175,6 @@ void QmlState::setWhen(QmlBindableValue *when)
 }
 
 /*!
-    \advanced
     \qmlproperty string State::extends
     This property holds the state that this state extends
 
-- 
cgit v0.12


From 9b7fa7d3ae7a2c2e53ed591dd1f25d9c5edfda6a Mon Sep 17 00:00:00 2001
From: Roberto Raggi <roberto.raggi@nokia.com>
Date: Wed, 29 Apr 2009 14:29:47 +0200
Subject: Added first/lastSourceLocations to AST::UiObjectMember and improved
 the generation of `fake' tokens. A `fake' token is a token generated while
 recovering from a syntax error.

---
 src/declarative/qml/parser/javascript.g          |   16 +-
 src/declarative/qml/parser/javascriptast_p.h     |  241 +++--
 src/declarative/qml/parser/javascriptgrammar.cpp | 1048 +++++++++++-----------
 src/declarative/qml/parser/javascriptgrammar_p.h |    6 +-
 src/declarative/qml/parser/javascriptparser.cpp  |    8 +-
 src/declarative/qml/parser/javascriptparser_p.h  |    4 +-
 6 files changed, 703 insertions(+), 620 deletions(-)

diff --git a/src/declarative/qml/parser/javascript.g b/src/declarative/qml/parser/javascript.g
index 961041e..52d076f 100644
--- a/src/declarative/qml/parser/javascript.g
+++ b/src/declarative/qml/parser/javascript.g
@@ -87,7 +87,7 @@
 %nonassoc T_IDENTIFIER T_COLON
 %nonassoc REDUCE_HERE
 
-%start Program
+%start UiProgram
 
 /.
 /****************************************************************************
@@ -286,7 +286,7 @@ public:
     bool parse(JavaScriptEnginePrivate *driver);
 
     JavaScript::AST::UiProgram *ast()
-    { return sym(1).UiProgram; }
+    { return program; }
 
     QList<DiagnosticMessage> diagnosticMessages() const
     { return diagnostic_messages; }
@@ -326,6 +326,8 @@ protected:
     int *state_stack;
     JavaScript::AST::SourceLocation *location_stack;
 
+    JavaScript::AST::UiProgram *program;
+
     // error recovery
     enum { TOKEN_BUFFER_SIZE = 3 };
 
@@ -422,6 +424,7 @@ bool JavaScriptParser::parse(JavaScriptEnginePrivate *driver)
     first_token = last_token = 0;
 
     tos = -1;
+    program = 0;
 
     do {
         if (++tos == stack_size)
@@ -466,11 +469,12 @@ bool JavaScriptParser::parse(JavaScriptEnginePrivate *driver)
 -- Declarative UI
 --------------------------------------------------------------------------------------------------------
 
-Program: UiImportListOpt UiObjectMemberList ;
+UiProgram: UiImportListOpt UiObjectMemberList ;
 /.
 case $rule_number: {
-    sym(1).Node = makeAstNode<AST::UiProgram> (driver->nodePool(), sym(1).UiImportList,
+  program = makeAstNode<AST::UiProgram> (driver->nodePool(), sym(1).UiImportList,
         sym(2).UiObjectMemberList->finish());
+  sym(1).UiProgram = program;    
 } break;
 ./
 
@@ -602,7 +606,7 @@ case $rule_number: {
         sym(4).UiObjectMemberList->finish());
     node->colonToken = loc(2);
     node->lbracketToken = loc(3);
-    node->rbraceToken = loc(5);
+    node->rbracketToken = loc(5);
     sym(1).Node = node;
 }   break;
 ./
@@ -2617,6 +2621,7 @@ PropertyNameAndValueListOpt: PropertyNameAndValueList ;
                 yytoken = *tk;
                 yylval = 0;
                 yylloc = token_buffer[0].loc;
+		yylloc.length = 0;
 
                 first_token = &token_buffer[0];
                 last_token = &token_buffer[2];
@@ -2639,6 +2644,7 @@ PropertyNameAndValueListOpt: PropertyNameAndValueList ;
                 yytoken = tk;
                 yylval = 0;
                 yylloc = token_buffer[0].loc;
+		yylloc.length = 0;
 
                 action = errorState;
                 goto _Lcheck_token;
diff --git a/src/declarative/qml/parser/javascriptast_p.h b/src/declarative/qml/parser/javascriptast_p.h
index 69958e5..8515998 100644
--- a/src/declarative/qml/parser/javascriptast_p.h
+++ b/src/declarative/qml/parser/javascriptast_p.h
@@ -128,6 +128,11 @@ public:
           startLine(0), startColumn(0)
     { }
 
+    bool isValid() const { return length != 0; }
+
+    quint32 begin() const { return offset; }
+    quint32 end() const { return offset + length; }
+
 // attributes
     // ### encode
     quint32 offset;
@@ -2175,6 +2180,40 @@ public:
     UiObjectMemberList *members;
 };
 
+class UiQualifiedId: public Node
+{
+public:
+    JAVASCRIPT_DECLARE_AST_NODE(UiQualifiedId)
+
+    UiQualifiedId(JavaScriptNameIdImpl *name)
+        : next(this), name(name)
+    { kind = K; }
+
+    UiQualifiedId(UiQualifiedId *previous, JavaScriptNameIdImpl *name)
+        : name(name)
+    {
+        kind = K;
+        next = previous->next;
+        previous->next = this;
+    }
+
+    virtual ~UiQualifiedId() {}
+
+    UiQualifiedId *finish()
+    {
+        UiQualifiedId *head = next;
+        next = 0;
+        return head;
+    }
+
+    virtual void accept0(Visitor *visitor);
+
+// attributes
+    UiQualifiedId *next;
+    JavaScriptNameIdImpl *name;
+    SourceLocation identifierToken;
+};
+
 class UiImport: public Node
 {
 public:
@@ -2227,6 +2266,57 @@ public:
 
 class UiObjectMember: public Node
 {
+public:
+    virtual SourceLocation firstSourceLocation() const = 0;
+    virtual SourceLocation lastSourceLocation() const = 0;
+};
+
+class UiObjectMemberList: public Node
+{
+public:
+    JAVASCRIPT_DECLARE_AST_NODE(UiObjectMemberList)
+
+    UiObjectMemberList(UiObjectMember *member)
+        : next(this), member(member)
+    { kind = K; }
+
+    UiObjectMemberList(UiObjectMemberList *previous, UiObjectMember *member)
+        : member(member)
+    {
+        kind = K;
+        next = previous->next;
+        previous->next = this;
+    }
+
+    virtual void accept0(Visitor *visitor);
+
+    UiObjectMemberList *finish()
+    {
+        UiObjectMemberList *head = next;
+        next = 0;
+        return head;
+    }
+
+// attributes
+    UiObjectMemberList *next;
+    UiObjectMember *member;
+};
+
+class UiObjectInitializer: public Node
+{
+public:
+    JAVASCRIPT_DECLARE_AST_NODE(UiObjectInitializer)
+
+    UiObjectInitializer(UiObjectMemberList *members)
+        : members(members)
+    { kind = K; }
+
+    virtual void accept0(Visitor *visitor);
+
+// attributes
+    SourceLocation lbraceToken;
+    UiObjectMemberList *members;
+    SourceLocation rbraceToken;
 };
 
 class UiPublicMember: public UiObjectMember
@@ -2245,6 +2335,22 @@ public:
         : memberType(memberType), name(name), expression(expression)
     { kind = K; }
 
+    virtual SourceLocation firstSourceLocation() const
+    { return publicToken; }
+
+    virtual SourceLocation lastSourceLocation() const
+    {
+      if (expression)
+	return expression->lastSourceLocation();
+      else if (colonToken.isValid())
+	return colonToken;
+      else if (identifierToken.isValid())
+	return identifierToken;
+      else if (attributeTypeToken.isValid())
+	return attributeTypeToken;
+      return publicToken;
+    }
+
     virtual void accept0(Visitor *visitor);
 
 // attributes
@@ -2267,29 +2373,23 @@ public:
         : name(name), initializer(initializer)
     { kind = K; }
 
-    virtual void accept0(Visitor *visitor);
-
-// attributes
-    JavaScriptNameIdImpl *name;
-    UiObjectInitializer *initializer;
-    SourceLocation identifierToken;
-};
+    virtual SourceLocation firstSourceLocation() const
+    { return identifierToken; }
 
-class UiObjectInitializer: public Node
-{
-public:
-    JAVASCRIPT_DECLARE_AST_NODE(UiObjectInitializer)
+    virtual SourceLocation lastSourceLocation() const
+    {
+      if (initializer)
+	return initializer->rbraceToken;
 
-    UiObjectInitializer(UiObjectMemberList *members)
-        : members(members)
-    { kind = K; }
+      return identifierToken;
+    }
 
     virtual void accept0(Visitor *visitor);
 
 // attributes
-    SourceLocation lbraceToken;
-    UiObjectMemberList *members;
-    SourceLocation rbraceToken;
+    JavaScriptNameIdImpl *name;
+    UiObjectInitializer *initializer;
+    SourceLocation identifierToken;
 };
 
 class UiSourceElement: public UiObjectMember
@@ -2301,6 +2401,27 @@ public:
         : sourceElement(sourceElement)
     { kind = K; }
 
+    virtual SourceLocation firstSourceLocation() const
+    {
+      if (FunctionDeclaration *funDecl = cast<FunctionDeclaration *>(sourceElement))
+	return funDecl->firstSourceLocation();
+      else if (VariableStatement *varStmt = cast<VariableStatement *>(sourceElement))
+	return varStmt->firstSourceLocation();
+
+      return SourceLocation();
+    }
+
+    virtual SourceLocation lastSourceLocation() const
+    {
+      if (FunctionDeclaration *funDecl = cast<FunctionDeclaration *>(sourceElement))
+	return funDecl->lastSourceLocation();
+      else if (VariableStatement *varStmt = cast<VariableStatement *>(sourceElement))
+	return varStmt->lastSourceLocation();
+
+      return SourceLocation();
+    }
+
+
     virtual void accept0(Visitor *visitor);
 
 // attributes
@@ -2320,6 +2441,12 @@ public:
           initializer(initializer)
     { kind = K; }
 
+    virtual SourceLocation firstSourceLocation() const
+    { return qualifiedId->identifierToken; }
+
+    virtual SourceLocation lastSourceLocation() const
+    { return initializer->rbraceToken; }
+
     virtual void accept0(Visitor *visitor);
 
 // attributes
@@ -2341,6 +2468,12 @@ public:
           statement(statement)
     { kind = K; }
 
+    virtual SourceLocation firstSourceLocation() const
+    { return qualifiedId->identifierToken; }
+
+    virtual SourceLocation lastSourceLocation() const
+    { return statement->lastSourceLocation(); }
+
     virtual void accept0(Visitor *visitor);
 
 // attributes
@@ -2360,6 +2493,12 @@ public:
           members(members)
     { kind = K; }
 
+    virtual SourceLocation firstSourceLocation() const
+    { return lbracketToken; }
+
+    virtual SourceLocation lastSourceLocation() const
+    { return rbracketToken; }
+
     virtual void accept0(Visitor *visitor);
 
 // attributes
@@ -2367,75 +2506,9 @@ public:
     UiObjectMemberList *members;
     SourceLocation colonToken;
     SourceLocation lbracketToken;
-    SourceLocation rbraceToken;
-};
-
-class UiObjectMemberList: public Node
-{
-public:
-    JAVASCRIPT_DECLARE_AST_NODE(UiObjectMemberList)
-
-    UiObjectMemberList(UiObjectMember *member)
-        : next(this), member(member)
-    { kind = K; }
-
-    UiObjectMemberList(UiObjectMemberList *previous, UiObjectMember *member)
-        : member(member)
-    {
-        kind = K;
-        next = previous->next;
-        previous->next = this;
-    }
-
-    virtual void accept0(Visitor *visitor);
-
-    UiObjectMemberList *finish()
-    {
-        UiObjectMemberList *head = next;
-        next = 0;
-        return head;
-    }
-
-// attributes
-    UiObjectMemberList *next;
-    UiObjectMember *member;
-};
-
-class UiQualifiedId: public Node
-{
-public:
-    JAVASCRIPT_DECLARE_AST_NODE(UiQualifiedId)
-
-    UiQualifiedId(JavaScriptNameIdImpl *name)
-        : next(this), name(name)
-    { kind = K; }
-
-    UiQualifiedId(UiQualifiedId *previous, JavaScriptNameIdImpl *name)
-        : name(name)
-    {
-        kind = K;
-        next = previous->next;
-        previous->next = this;
-    }
-
-    virtual ~UiQualifiedId() {}
-
-    UiQualifiedId *finish()
-    {
-        UiQualifiedId *head = next;
-        next = 0;
-        return head;
-    }
-
-    virtual void accept0(Visitor *visitor);
-
-// attributes
-    UiQualifiedId *next;
-    JavaScriptNameIdImpl *name;
-    SourceLocation identifierToken;
+    SourceLocation rbracketToken;
 };
 
-
 } } // namespace AST
 
 
diff --git a/src/declarative/qml/parser/javascriptgrammar.cpp b/src/declarative/qml/parser/javascriptgrammar.cpp
index b06fd32..b344366 100644
--- a/src/declarative/qml/parser/javascriptgrammar.cpp
+++ b/src/declarative/qml/parser/javascriptgrammar.cpp
@@ -118,458 +118,466 @@ const int JavaScriptGrammar:: rhs[] = {
   1, 0, 1, 0, 1, 2};
 
 const int JavaScriptGrammar::action_default [] = {
-  8, 2, 0, 0, 4, 3, 0, 296, 0, 6, 
-  7, 5, 25, 223, 0, 27, 0, 224, 9, 1, 
-  0, 0, 26, 0, 283, 284, 0, 281, 0, 282, 
-  0, 285, 126, 193, 157, 165, 161, 201, 208, 105, 
-  177, 207, 215, 203, 153, 0, 204, 286, 0, 291, 
-  90, 205, 206, 211, 106, 169, 173, 94, 123, 104, 
-  109, 89, 143, 209, 130, 288, 287, 290, 212, 0, 
-  0, 0, 0, 36, 37, 0, 33, 0, 292, 30, 
-  0, 294, 48, 0, 0, 0, 0, 0, 31, 34, 
-  0, 0, 195, 237, 35, 0, 29, 0, 0, 32, 
-  0, 0, 0, 0, 0, 213, 214, 119, 202, 210, 
-  0, 0, 106, 125, 292, 30, 294, 108, 107, 0, 
-  0, 0, 121, 122, 120, 0, 293, 283, 0, 0, 
-  285, 0, 280, 0, 295, 0, 55, 56, 57, 58, 
-  83, 59, 84, 60, 61, 62, 63, 64, 65, 66, 
-  67, 52, 68, 69, 70, 71, 72, 54, 85, 73, 
-  53, 74, 75, 76, 77, 78, 79, 80, 81, 82, 
-  86, 0, 50, 0, 0, 42, 0, 51, 41, 124, 
-  0, 154, 0, 0, 0, 0, 144, 0, 0, 0, 
-  0, 0, 0, 134, 0, 0, 0, 128, 129, 127, 
-  132, 136, 135, 133, 131, 146, 145, 147, 0, 162, 
-  0, 158, 0, 0, 100, 99, 88, 87, 0, 0, 
-  98, 194, 101, 0, 102, 0, 103, 97, 238, 239, 
-  279, 0, 190, 183, 181, 188, 189, 187, 186, 192, 
-  185, 184, 182, 191, 178, 0, 166, 0, 0, 170, 
-  0, 0, 174, 0, 0, 100, 92, 0, 91, 0, 
-  96, 289, 253, 0, 254, 255, 256, 249, 0, 250, 
-  251, 252, 277, 278, 110, 0, 0, 0, 0, 0, 
-  242, 243, 199, 197, 159, 167, 163, 179, 155, 200, 
-  0, 106, 171, 175, 148, 137, 0, 0, 156, 0, 
-  0, 0, 0, 149, 0, 0, 0, 0, 0, 141, 
-  139, 142, 140, 138, 151, 150, 152, 0, 164, 0, 
-  160, 0, 198, 106, 0, 180, 195, 196, 0, 195, 
-  0, 0, 245, 0, 0, 0, 247, 0, 168, 0, 
-  0, 172, 0, 0, 176, 235, 0, 227, 236, 230, 
-  0, 234, 0, 195, 228, 0, 195, 0, 0, 246, 
-  0, 0, 0, 248, 293, 0, 269, 0, 0, 0, 
-  241, 0, 240, 217, 220, 0, 56, 83, 59, 84, 
-  61, 62, 33, 66, 67, 30, 68, 71, 31, 34, 
-  195, 35, 74, 29, 76, 32, 78, 79, 80, 81, 
-  82, 86, 218, 216, 94, 95, 100, 0, 93, 0, 
-  257, 258, 0, 0, 0, 260, 265, 263, 266, 0, 
-  0, 264, 265, 0, 261, 0, 262, 219, 268, 0, 
-  219, 267, 0, 270, 271, 0, 219, 272, 273, 0, 
-  0, 274, 0, 0, 0, 275, 276, 112, 111, 0, 
-  0, 0, 244, 0, 0, 0, 259, 0, 49, 0, 
-  46, 48, 39, 0, 45, 40, 47, 44, 38, 0, 
-  43, 116, 114, 118, 115, 113, 117, 0, 18, 13, 
-  0, 14, 10, 0, 23, 0, 24, 0, 0, 22, 
-  30, 48, 16, 27, 0, 11, 0, 17, 0, 20, 
-  12, 0, 21, 30, 48, 15, 0, 19, 28, 232, 
-  225, 0, 233, 229, 0, 231, 221, 0, 222, 226};
+  8, 2, 0, 4, 3, 0, 0, 0, 6, 7, 
+  5, 25, 223, 0, 27, 0, 224, 9, 1, 0, 
+  0, 26, 0, 283, 284, 0, 281, 0, 282, 0, 
+  285, 126, 193, 157, 165, 161, 201, 208, 105, 177, 
+  207, 215, 203, 153, 0, 204, 286, 0, 291, 90, 
+  205, 206, 211, 106, 169, 173, 94, 123, 104, 109, 
+  89, 143, 209, 130, 288, 287, 290, 212, 0, 0, 
+  0, 0, 36, 37, 0, 33, 0, 292, 30, 0, 
+  294, 48, 0, 0, 0, 0, 0, 31, 34, 0, 
+  0, 195, 237, 35, 0, 29, 0, 0, 32, 0, 
+  0, 0, 0, 0, 213, 214, 119, 202, 210, 0, 
+  0, 106, 125, 292, 30, 294, 108, 107, 0, 0, 
+  0, 121, 122, 120, 0, 293, 283, 0, 0, 285, 
+  0, 280, 0, 295, 0, 55, 56, 57, 58, 83, 
+  59, 84, 60, 61, 62, 63, 64, 65, 66, 67, 
+  52, 68, 69, 70, 71, 72, 54, 85, 73, 53, 
+  74, 75, 76, 77, 78, 79, 80, 81, 82, 86, 
+  0, 50, 0, 0, 42, 0, 51, 41, 124, 0, 
+  154, 0, 0, 0, 0, 144, 0, 0, 0, 0, 
+  0, 0, 134, 0, 0, 0, 128, 129, 127, 132, 
+  136, 135, 133, 131, 146, 145, 147, 0, 162, 0, 
+  158, 0, 0, 100, 99, 88, 87, 0, 0, 98, 
+  194, 101, 0, 102, 0, 103, 97, 238, 239, 279, 
+  0, 190, 183, 181, 188, 189, 187, 186, 192, 185, 
+  184, 182, 191, 178, 0, 166, 0, 0, 170, 0, 
+  0, 174, 0, 0, 100, 92, 0, 91, 0, 96, 
+  289, 253, 0, 254, 255, 256, 249, 0, 250, 251, 
+  252, 277, 278, 110, 0, 0, 0, 0, 0, 242, 
+  243, 199, 197, 159, 167, 163, 179, 155, 200, 0, 
+  106, 171, 175, 148, 137, 0, 0, 156, 0, 0, 
+  0, 0, 149, 0, 0, 0, 0, 0, 141, 139, 
+  142, 140, 138, 151, 150, 152, 0, 164, 0, 160, 
+  0, 198, 106, 0, 180, 195, 196, 0, 195, 0, 
+  0, 245, 0, 0, 0, 247, 0, 168, 0, 0, 
+  172, 0, 0, 176, 235, 0, 227, 236, 230, 0, 
+  234, 0, 195, 228, 0, 195, 0, 0, 246, 0, 
+  0, 0, 248, 293, 0, 269, 0, 0, 0, 241, 
+  0, 240, 217, 220, 0, 56, 83, 59, 84, 61, 
+  62, 33, 66, 67, 30, 68, 71, 31, 34, 195, 
+  35, 74, 29, 76, 32, 78, 79, 80, 81, 82, 
+  86, 218, 216, 94, 95, 100, 0, 93, 0, 257, 
+  258, 0, 0, 0, 260, 265, 263, 266, 0, 0, 
+  264, 265, 0, 261, 0, 262, 219, 268, 0, 219, 
+  267, 0, 270, 271, 0, 219, 272, 273, 0, 0, 
+  274, 0, 0, 0, 275, 276, 112, 111, 0, 0, 
+  0, 244, 0, 0, 0, 259, 0, 49, 0, 46, 
+  48, 39, 0, 45, 40, 47, 44, 38, 0, 43, 
+  116, 114, 118, 115, 113, 117, 0, 18, 13, 0, 
+  14, 10, 0, 23, 0, 24, 0, 0, 22, 30, 
+  48, 16, 27, 0, 11, 0, 17, 0, 20, 12, 
+  0, 21, 30, 48, 15, 0, 19, 28, 232, 225, 
+  0, 233, 229, 0, 231, 221, 0, 222, 226, 296};
 
 const int JavaScriptGrammar::goto_default [] = {
-  2, 6, 19, 1, 5, 4, 18, 494, 495, 478, 
-  20, 373, 45, 12, 108, 61, 459, 457, 135, 134, 
-  33, 458, 133, 136, 215, 57, 50, 223, 59, 39, 
-  222, 54, 60, 107, 58, 32, 64, 62, 294, 44, 
-  288, 34, 284, 36, 286, 35, 285, 55, 292, 56, 
-  293, 40, 287, 283, 324, 409, 289, 290, 37, 43, 
-  46, 51, 52, 41, 38, 63, 109, 53, 68, 105, 
-  106, 42, 375, 374, 21, 511, 510, 346, 347, 513, 
-  349, 512, 348, 415, 419, 422, 418, 417, 437, 438, 
-  26, 48, 125, 25, 47, 66, 65, 0};
+  6, 5, 18, 1, 4, 3, 17, 493, 494, 477, 
+  19, 372, 44, 11, 107, 60, 458, 456, 134, 133, 
+  32, 457, 132, 135, 214, 56, 49, 222, 58, 38, 
+  221, 53, 59, 106, 57, 31, 63, 61, 293, 43, 
+  287, 33, 283, 35, 285, 34, 284, 54, 291, 55, 
+  292, 39, 286, 282, 323, 408, 288, 289, 36, 42, 
+  45, 50, 51, 40, 37, 62, 108, 52, 67, 104, 
+  105, 41, 374, 373, 20, 510, 509, 345, 346, 512, 
+  348, 511, 347, 414, 418, 421, 417, 416, 436, 437, 
+  25, 47, 124, 24, 46, 65, 64, 0};
 
 const int JavaScriptGrammar::action_index [] = {
-  -25, -88, 89, 70, -88, -15, 251, -88, 85, -88, 
-  -88, -88, -88, -88, 56, 48, 46, -88, -88, 262, 
-  127, 72, -88, -17, -9, 20, -29, -88, -3, -88, 
-  -6, 1289, 112, -88, 13, -44, -76, -88, -88, 212, 
-  -88, -88, -88, -88, 253, 228, -88, -88, -10, -88, 
-  -88, -88, -88, -88, 347, 53, 87, 154, 274, -88, 
-  -88, -88, 287, -88, 191, -88, 1289, -88, -88, 199, 
-  194, 115, 557, -88, -88, 1205, -88, 66, 71, 77, 
-  63, 1541, 79, 557, 557, 557, 480, 557, -88, -88, 
-  557, 557, 557, -88, -88, 60, -88, 557, 557, -88, 
-  41, 557, 557, 42, 44, -88, -88, -88, -88, -88, 
-  557, 557, 83, 177, -24, -88, 1037, -88, -88, 557, 
-  557, 557, -88, -88, -88, 25, -88, -18, -58, -8, 
-  1289, -26, -88, 58, 64, 67, -88, -88, -88, -88, 
+  -21, -88, 43, -88, -11, 246, 80, 75, -88, -88, 
+  -88, -88, -88, 56, 66, 50, -88, -88, 238, 173, 
+  71, -88, 51, 27, 9, -30, -88, -2, -88, -7, 
+  1298, 132, -88, 23, -34, -73, -88, -88, 205, -88, 
+  -88, -88, -88, 239, 203, -88, -88, -18, -88, -88, 
+  -88, -88, -88, 489, 133, 111, 197, 177, -88, -88, 
+  -88, 404, -88, 274, -88, 1298, -88, -88, 186, 181, 
+  89, 566, -88, -88, 1214, -88, 74, 68, 83, 69, 
+  1550, 87, 566, 566, 566, 379, 566, -88, -88, 566, 
+  566, 566, -88, -88, 52, -88, 566, 566, -88, 65, 
+  566, 566, 53, 58, -88, -88, -88, -88, -88, 566, 
+  566, 90, 172, 63, -88, 1046, -88, -88, 566, 566, 
+  566, -88, -88, -88, 40, -88, -17, -52, -28, 1298, 
+  -26, -88, 24, 88, -12, -88, -88, -88, -88, -88, 
   -88, -88, -88, -88, -88, -88, -88, -88, -88, -88, 
   -88, -88, -88, -88, -88, -88, -88, -88, -88, -88, 
   -88, -88, -88, -88, -88, -88, -88, -88, -88, -88, 
-  -88, 557, -88, 1121, 55, -88, 557, -88, -88, 175, 
-  557, 250, 557, 557, 557, 557, 404, 557, 557, 557, 
-  557, 557, 557, 158, 557, 557, 557, 80, 73, 81, 
-  197, 238, 220, 159, 167, 277, 404, 317, 557, 14, 
-  557, 90, 953, 557, 557, -88, -88, -88, 108, 557, 
-  -88, -88, 65, 49, -88, 557, -88, -88, -88, -88, 
-  -88, 557, -88, -88, -88, -88, -88, -88, -88, -88, 
-  -88, -88, -88, -88, -88, 557, 45, 557, 557, 75, 
-  69, 557, -88, 953, 557, 557, -88, 153, -88, 6, 
-  -88, -88, -88, 105, -88, -88, -88, -88, 111, -88, 
-  -88, -88, -88, -88, -88, 21, 62, 557, 122, 95, 
-  -88, -88, 634, -88, 39, -30, -59, -88, 259, 8, 
-  -46, 417, 19, 125, 339, 188, -7, 557, 248, 557, 
-  557, 557, 557, 339, 557, 557, 557, 557, 557, 187, 
-  166, 192, 206, 232, 339, 339, 339, 557, -59, 557, 
-  39, 557, -88, 380, 557, -88, 557, -5, -60, 557, 
-  -48, 1205, -88, 557, 142, 1205, -88, 557, -38, 557, 
-  557, 7, 0, 557, -88, 17, 84, 22, -88, -88, 
-  557, -88, 27, 557, -88, -13, 557, 52, 1205, -88, 
-  557, 102, 1205, -88, 28, 1205, -88, 557, 100, 1205, 
-  34, 1205, -88, -88, 1205, -19, 139, 9, 149, 82, 
-  557, 1205, 23, 1, 119, 36, 10, 480, 40, 120, 
-  869, 35, 5, 26, 557, 37, -1, 557, 29, 557, 
-  31, 33, -88, -88, 205, -88, 557, -11, -88, 78, 
-  -88, -88, 557, 98, 38, -88, 47, -88, 54, 198, 
-  557, -88, 30, 32, -88, -4, -88, 1205, -88, 107, 
-  1205, -88, 213, -88, -88, 113, 1205, 43, -88, 18, 
-  24, -88, -21, -54, -20, -88, -88, -88, -88, 557, 
-  143, 1205, -88, 557, 110, 1205, -88, 118, 16, 788, 
-  -88, 15, -88, 711, -88, -88, -88, -88, -88, 121, 
-  -88, -88, -88, -88, -88, -88, -88, 298, -88, -88, 
-  284, -88, -88, 59, 76, 557, 74, 1373, 57, -88, 
-  147, 130, -88, 61, 97, -88, 96, -88, 50, -88, 
-  -88, 1457, -88, 116, 99, -88, 109, -88, -88, 51, 
-  -88, 190, -88, -88, 557, -88, -88, 68, -88, -88, 
+  566, -88, 1130, 32, -88, 566, -88, -88, 187, 566, 
+  233, 566, 566, 566, 566, 312, 566, 566, 566, 566, 
+  566, 566, 274, 566, 566, 566, 118, 131, 128, 160, 
+  180, 168, 200, 165, 322, 302, 404, 566, -8, 566, 
+  72, 962, 566, 566, -88, -88, -88, 106, 566, -88, 
+  -88, 73, 59, -88, 566, -88, -88, -88, -88, -88, 
+  566, -88, -88, -88, -88, -88, -88, -88, -88, -88, 
+  -88, -88, -88, -88, 566, 13, 566, 566, 133, 60, 
+  566, -88, 962, 566, 566, -88, 117, -88, 17, -88, 
+  -88, -88, 92, -88, -88, -88, -88, 85, -88, -88, 
+  -88, -88, -88, -88, 67, 70, 566, 104, 115, -88, 
+  -88, 643, -88, 19, -29, -55, -88, 237, 8, -46, 
+  421, 20, 79, 339, 274, -4, 566, 227, 566, 566, 
+  566, 566, 257, 566, 566, 566, 566, 566, 274, 274, 
+  274, 274, 274, 263, 339, 339, 566, -75, 566, 3, 
+  566, -88, 489, 566, -88, 566, 47, -33, 566, -60, 
+  1214, -88, 566, 136, 1214, -88, 566, -35, 566, 566, 
+  7, 0, 566, -88, 1, 99, 2, -88, -88, 566, 
+  -88, 28, 566, -88, 4, 566, 12, 1214, -88, 566, 
+  114, 1214, -88, 34, 1214, -88, 566, 110, 1214, 22, 
+  1214, -88, -88, 1214, -20, 152, 5, 162, 77, 566, 
+  1214, 41, 14, 84, 42, 11, 353, 38, 35, 801, 
+  25, 10, 33, 566, 44, 21, 566, 31, 566, 26, 
+  39, -88, -88, 194, -88, 566, -1, -88, 105, -88, 
+  -88, 566, 95, 45, -88, 6, -88, 48, 211, 566, 
+  -88, 36, 37, -88, -19, -88, 1214, -88, 109, 1214, 
+  -88, 192, -88, -88, 120, 1214, 46, -88, 16, 30, 
+  -88, 29, -54, -23, -88, -88, -88, -88, 566, 137, 
+  1214, -88, 566, 126, 1214, -88, 119, -6, 720, -88, 
+  15, -88, 878, -88, -88, -88, -88, -88, 96, -88, 
+  -88, -88, -88, -88, -88, -88, 286, -88, -88, 248, 
+  -88, -88, 54, 64, 566, 61, 1382, 55, -88, 171, 
+  123, -88, 49, 103, -88, 94, -88, 57, -88, -88, 
+  1466, -88, 116, 113, -88, 107, -88, -88, 76, -88, 
+  140, -88, -88, 566, -88, -88, 62, -88, -88, -88, 
 
-  -98, -98, -98, -98, -98, 30, 13, -98, -98, -98, 
-  -98, -98, -98, -98, -98, -98, -98, -98, -98, 87, 
+  -98, -98, -98, -98, 13, 6, -98, -98, -98, -98, 
+  -98, -98, -98, -98, -98, -98, -98, -98, 60, -98, 
   -98, -98, -98, -98, -98, -98, -98, -98, -98, -98, 
-  -98, 83, -98, -98, -98, -98, -98, -98, -98, -98, 
+  62, -98, -98, -98, -98, -98, -98, -98, -98, -98, 
   -98, -98, -98, -98, -98, -98, -98, -98, -98, -98, 
-  -98, -98, -98, -98, -43, -98, -98, -98, -98, -98, 
-  -98, -98, -98, -98, -98, -98, 184, -98, -98, -98, 
-  -98, -98, 113, -98, -98, -9, -98, -98, -98, -98, 
-  -98, -98, -98, 42, 116, 112, 127, 146, -98, -98, 
-  151, 147, 40, -98, -98, -98, -98, 37, 89, -98, 
-  -10, 90, 86, -98, -98, -98, -98, -98, -98, -98, 
-  77, 94, -98, -98, -98, -98, -98, -98, -98, 106, 
-  103, 98, -98, -98, -98, -98, -98, -47, -98, -98, 
-  253, -98, -98, -98, -98, -98, -98, -98, -98, -98, 
+  -98, -98, -98, -32, -98, -98, -98, -98, -98, -98, 
+  -98, -98, -98, -98, -98, 174, -98, -98, -98, -98, 
+  -98, 63, -98, -98, -2, -98, -98, -98, -98, -98, 
+  -98, -98, 51, 80, 83, 56, 99, -98, -98, 87, 
+  59, 48, -98, -98, -98, -98, 40, 113, -98, -17, 
+  139, 123, -98, -98, -98, -98, -98, -98, -98, 130, 
+  131, -98, -98, -98, -98, -98, -98, -98, 120, 117, 
+  112, -98, -98, -98, -98, -98, -60, -98, -98, 175, 
   -98, -98, -98, -98, -98, -98, -98, -98, -98, -98, 
   -98, -98, -98, -98, -98, -98, -98, -98, -98, -98, 
   -98, -98, -98, -98, -98, -98, -98, -98, -98, -98, 
-  -98, -7, -98, 0, -98, -98, -3, -98, -98, -98, 
-  136, -98, 117, 119, 132, 134, -98, 130, 49, 36, 
-  35, 61, 64, -98, 47, 46, 38, -98, -98, -98, 
-  -98, -98, -98, -98, -98, -98, -98, -98, 59, -98, 
-  58, -98, 24, 32, 17, -98, -98, -98, -98, 21, 
-  -98, -98, -98, -98, -98, 8, -98, -98, -98, -98, 
-  -98, 4, -98, -98, -98, -98, -98, -98, -98, -98, 
-  -98, -98, -98, -98, -98, 60, -98, 57, -19, -98, 
-  -98, -17, -98, 118, 44, 133, -98, -98, -98, -98, 
   -98, -98, -98, -98, -98, -98, -98, -98, -98, -98, 
-  -98, -98, -98, -98, -98, -98, -98, 3, -98, -98, 
-  -98, -98, 67, -98, -98, -98, -98, -98, -98, -98, 
-  -98, -98, -98, -98, -98, -98, -98, 186, -98, 196, 
-  183, 177, 187, -98, 82, 76, 79, 96, 99, -98, 
-  -98, -98, -98, -98, -98, -98, -98, 168, -98, 158, 
-  -98, 156, -98, -98, 175, -98, 102, -98, -98, 104, 
-  -98, 25, -98, 27, -98, 29, -98, 155, -98, 154, 
-  157, -98, -98, 167, -98, -98, -98, -98, -98, -98, 
-  193, -98, -48, 126, -98, -98, 128, -98, 15, -98, 
-  19, -98, 22, -98, -98, 23, -98, 20, -98, 18, 
-  -98, 34, -98, -98, 53, -98, -98, -98, -98, -98, 
-  93, 52, -98, -98, -98, -98, -98, 81, -98, -98, 
-  45, -98, -98, -98, 43, -98, -35, 137, -98, 141, 
-  -98, -98, -98, -98, -98, -98, 131, -98, -98, -98, 
-  -98, -98, -8, -98, -98, -98, -98, -98, -77, -98, 
-  6, -98, -76, -98, -98, -98, -98, -52, -98, -98, 
-  -51, -98, -98, -98, -98, -98, -98, -75, -98, -98, 
-  -46, -98, -98, -98, -49, -98, -98, -98, -98, 7, 
-  -98, 5, -98, -12, -98, 75, -98, -98, -98, -14, 
-  -98, -11, -98, -13, -98, -98, -98, -98, -98, -98, 
-  -98, -98, -98, -98, -98, -98, -98, 73, -98, -98, 
-  56, -98, -98, -98, -98, 41, -98, 39, -98, -98, 
-  50, 48, -98, 51, -98, -98, -98, -98, 66, -98, 
-  -98, 31, -98, 16, 166, -98, -98, -98, -98, -98, 
-  -98, -98, -98, -98, 26, -98, -98, -38, -98, -98};
+  33, -98, 35, -98, -98, 39, -98, -98, -98, 54, 
+  -98, 64, 66, 67, 68, -98, 55, 52, 41, 71, 
+  93, 95, -98, 92, 86, 75, -98, -98, -98, -98, 
+  -98, -98, -98, -98, -98, -98, -98, 69, -98, 78, 
+  -98, 20, 32, 26, -98, -98, -98, -98, 8, -98, 
+  -98, -98, -98, -98, 15, -98, -98, -98, -98, -98, 
+  31, -98, -98, -98, -98, -98, -98, -98, -98, -98, 
+  -98, -98, -98, -98, 97, -98, 102, 34, -98, -98, 
+  38, -98, 47, 36, 42, -98, -98, -98, -98, -98, 
+  -98, -98, -98, -98, -98, -98, -98, -98, -98, -98, 
+  -98, -98, -98, -98, -98, -98, 30, -98, -98, -98, 
+  -98, 144, -98, -98, -98, -98, -98, -98, -98, -98, 
+  -98, -98, -98, -98, -98, -98, 187, -98, 173, 170, 
+  176, 162, -98, 140, 137, 127, 103, 121, -98, -98, 
+  -98, -98, -98, -98, -98, -98, 158, -98, 161, -98, 
+  185, -98, -98, 188, -98, 129, -98, -98, 135, -98, 
+  29, -98, 19, -98, 21, -98, 189, -98, 186, 179, 
+  -98, -98, 160, -98, -98, -98, -98, -98, -98, 146, 
+  -98, -52, 128, -98, -98, 124, -98, 22, -98, 24, 
+  -98, 27, -98, -98, 28, -98, 25, -98, 23, -98, 
+  18, -98, -98, 53, -98, -98, -98, -98, -98, 136, 
+  50, -98, -98, -98, -98, -98, 110, -98, -98, 44, 
+  -98, -98, -98, 43, -98, -11, 49, -98, 45, -98, 
+  -98, -98, -98, -98, -98, 88, -98, -98, -98, -98, 
+  -98, 37, -98, -98, -98, -98, -98, -84, -98, -6, 
+  -98, -83, -98, -98, -98, -98, -62, -98, -98, -47, 
+  -98, -98, -98, -98, -98, -98, -77, -98, -98, -42, 
+  -98, -98, -98, -37, -98, -98, -98, -98, -10, -98, 
+  -7, -98, 77, -98, 0, -98, -98, -98, 7, -98, 
+  1, -98, -1, -98, -98, -98, -98, -98, -98, -98, 
+  -98, -98, -98, -98, -98, -98, 240, -98, -98, 73, 
+  -98, -98, -98, -98, 12, -98, -3, -98, -98, -9, 
+  3, -98, 14, -98, -98, -98, -98, 57, -98, -98, 
+  4, -98, 5, 115, -98, -98, -98, -98, -98, -98, 
+  -98, -98, -98, -13, -98, -98, -71, -98, -98, -98};
 
 const int JavaScriptGrammar::action_info [] = {
-  210, 329, 129, 219, 208, 126, 444, 343, 443, 337, 
-  317, 27, 331, 436, 180, 326, 321, 319, 317, 24, 
-  27, 337, 345, 460, 466, 130, 29, 31, 28, 132, 
-  -64, 30, 436, -75, 350, 420, 403, 282, -223, 427, 
-  297, 412, -53, -52, -77, 230, 367, -72, 356, 408, 
-  371, 426, 420, 360, 442, 245, 345, 436, -224, 420, 
-  3, 127, 176, 440, 24, 171, 260, 449, 514, 453, 
-  3, 416, 173, 225, 436, 483, 251, 245, 449, 493, 
-  453, 477, 219, 485, 365, 23, 508, 460, 484, 7, 
-  210, 180, 352, 208, 477, 276, 412, 509, 277, 367, 
-  364, 509, 282, 501, 0, 498, 219, 460, 219, 227, 
-  219, 488, 358, 110, 430, 219, 219, 498, 219, 439, 
-  110, 110, 178, 365, 111, 117, 461, -54, 493, 219, 
-  219, 111, 111, 440, 487, 8, 118, 247, 460, 411, 
-  410, 248, 488, 273, 272, 353, 10, 9, 126, 477, 
-  219, 219, 110, 499, 365, -292, 281, 280, 414, 493, 
-  369, 219, 362, 111, 220, 507, 266, 265, 263, 253, 
-  455, 0, 271, 270, 462, 339, 273, 272, 268, 340, 
-  477, 470, 279, 194, 194, 195, 195, 119, 254, 119, 
-  255, 194, 194, 195, 195, 0, 196, 196, 517, 0, 
-  264, 262, 335, 451, 196, 196, 0, 0, 423, 258, 
-  269, 267, 194, 194, 195, 195, 194, 194, 195, 195, 
-  253, 219, 194, 268, 195, 196, 196, 212, 263, 196, 
-  196, 194, 120, 195, 120, 196, 219, 0, 121, 254, 
-  121, 406, 0, 0, 196, 194, 213, 195, 214, 0, 
-  0, 518, 516, 424, 0, 269, 267, 194, 196, 195, 
-  264, 262, 0, 194, 0, 195, 299, 300, 182, 183, 
-  196, 182, 183, 14, 434, 433, 196, 299, 300, 0, 
-  15, 0, 0, 0, 14, 0, 119, 0, 0, 229, 
-  228, 15, 0, 301, 302, 184, 185, 0, 184, 185, 
-  187, 188, 0, 0, 301, 302, 14, 0, 189, 190, 
-  187, 188, 191, 15, 192, 0, 0, 0, 189, 190, 
-  14, 0, 191, 17, 192, 0, 0, 15, 0, 0, 
-  0, 120, 13, 0, 17, 16, 0, 121, 0, 481, 
-  187, 188, 0, 13, 0, 0, 16, 0, 189, 190, 
-  232, 0, 191, 479, 192, 0, 17, 0, 0, 0, 
-  233, 0, 304, 305, 234, 13, 0, 0, 16, 0, 
-  17, 306, 0, 235, 307, 236, 308, 0, 0, 13, 
-  0, 0, 16, 232, 0, 0, 237, 0, 238, 117, 
-  0, 0, 0, 233, 0, 0, 239, 234, 0, 240, 
-  118, 0, 0, 0, 0, 241, 235, 0, 236, 0, 
-  0, 242, 0, 0, 0, 0, 0, 0, 0, 237, 
-  232, 238, 117, 0, 243, 0, 0, 187, 188, 239, 
-  233, 0, 240, 118, 234, 189, 190, 0, 241, 191, 
-  0, 192, 0, 235, 242, 236, 0, 0, 333, 0, 
-  0, 0, 0, 0, 0, 0, 237, 243, 238, 117, 
-  0, 0, 0, 0, 0, 0, 239, 0, 0, 240, 
-  118, 0, 0, 0, 0, 241, 0, 0, 0, 0, 
-  0, 242, 0, 0, 0, 0, 0, 0, 0, 0, 
-  0, 0, 73, 74, 243, 0, 0, 0, 0, 0, 
-  0, 0, 114, 0, 0, 0, 0, 0, 0, 115, 
-  0, 0, 0, 116, 82, 0, 83, 0, 0, 0, 
-  0, 0, 0, 86, 0, 0, 0, 89, 0, 0, 
-  0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 
-  0, 0, 0, 0, 0, 94, 0, 96, 0, 0, 
-  0, 0, 0, 0, 0, 0, 0, 0, 88, 99, 
-  76, 0, 0, 0, 0, 0, 0, 0, 72, 73, 
-  74, 0, 0, 0, 0, 0, 0, 0, 0, 114, 
-  0, 0, 0, 0, 0, 0, 115, 0, 0, 0, 
-  116, 82, 0, 83, 0, 0, 0, 84, 0, 85, 
-  86, 87, 0, 0, 89, 0, 0, 0, 90, 0, 
-  91, 0, 0, 0, 0, 0, 0, 0, 0, 0, 
-  0, 0, 94, 0, 96, 0, 98, 0, 101, 0, 
-  102, 0, 0, 0, 0, 88, 99, 76, 0, 0, 
-  0, 0, 0, 0, 0, 72, 73, 74, 0, 0, 
-  0, 0, 0, 0, 0, 0, 114, 0, 0, 0, 
-  0, 0, 0, 115, 0, 0, 0, 116, 82, 0, 
-  83, 0, 0, 0, 84, 0, 85, 86, 87, 0, 
-  0, 89, 0, 0, 0, 90, 0, 91, 0, 0, 
-  0, 0, 0, 0, 0, 0, 0, 0, 0, 94, 
-  0, 96, 0, 98, 0, 101, 296, 102, 0, 0, 
-  0, 0, 88, 99, 76, 0, 0, 0, 0, 0, 
-  0, 0, 72, 73, 74, 0, 0, 0, 0, 0, 
-  0, 0, 0, 114, 0, 0, 0, 0, 0, 0, 
-  115, 0, 0, 0, 116, 82, 0, 83, 0, 0, 
-  0, 84, 0, 85, 86, 87, 0, 0, 89, 0, 
-  0, 0, 90, 0, 91, 0, 0, 465, 0, 0, 
-  0, 0, 0, 0, 0, 0, 94, 0, 96, 0, 
-  98, 0, 101, 0, 102, 0, 0, 0, 0, 88, 
-  99, 76, 0, 0, 0, 0, 0, 0, 0, 72, 
-  73, 74, 0, 0, 0, 0, 0, 0, 0, 0, 
-  114, 0, 0, 0, 0, 0, 0, 115, 0, 0, 
-  0, 116, 82, 0, 83, 0, 0, 0, 84, 0, 
-  85, 86, 87, 0, 0, 89, 0, 0, 0, 90, 
-  0, 91, 0, 0, 468, 0, 0, 0, 0, 0, 
-  0, 0, 0, 94, 0, 96, 0, 98, 0, 101, 
-  0, 102, 0, 0, 0, 0, 88, 99, 76, 0, 
-  0, 0, 0, 0, 0, 0, -73, 0, 0, 0, 
-  72, 73, 74, 0, 0, 0, 0, 0, 0, 0, 
-  0, 114, 0, 0, 0, 0, 0, 0, 115, 0, 
-  0, 0, 116, 82, 0, 83, 0, 0, 0, 84, 
-  0, 85, 86, 87, 0, 0, 89, 0, 0, 0, 
-  90, 0, 91, 0, 0, 0, 0, 0, 0, 0, 
-  0, 0, 0, 0, 94, 0, 96, 0, 98, 0, 
-  101, 0, 102, 0, 0, 0, 0, 88, 99, 76, 
-  0, 0, 0, 0, 0, 0, 0, 137, 138, 139, 
-  0, 0, 141, 143, 144, 0, 0, 145, 0, 146, 
-  0, 0, 0, 148, 149, 150, 0, 0, 0, 0, 
-  0, 0, 217, 152, 153, 154, 0, 0, 0, 0, 
-  0, 0, 0, 0, 0, 0, 155, 0, 0, 0, 
+  330, 318, 465, 209, 296, 129, 443, 342, 128, 336, 
+  435, 419, 26, 316, 207, 325, 320, 27, 349, 316, 
+  296, 318, 336, 459, 179, 344, 30, 28, 328, 131, 
+  29, 170, -53, 359, -223, 402, 425, 229, 370, 175, 
+  -75, 419, -54, 177, 426, -72, 411, 366, -64, -52, 
+  281, -77, 441, 419, 435, 218, 26, 344, 442, 407, 
+  -224, 207, 448, 435, 2, 355, 439, 250, 209, 218, 
+  23, 484, 357, 179, 2, 452, 126, 259, 415, 482, 
+  519, 224, 476, 483, 507, 22, 492, 23, 411, 448, 
+  364, 508, 125, 513, 452, 459, 172, 363, 435, 476, 
+  508, 500, 0, 218, 218, 366, 276, 351, 7, 487, 
+  281, 497, 218, 125, 218, 497, 429, 218, 218, 226, 
+  -292, 459, 218, 364, 0, 218, 438, 460, 0, 338, 
+  0, 459, 116, 339, 218, 244, 9, 8, 272, 271, 
+  439, 275, 492, 117, 218, 218, 270, 269, 516, 476, 
+  272, 271, 492, 265, 264, 413, 469, 0, 109, 498, 
+  352, 246, 219, 506, 278, 247, 410, 409, 109, 110, 
+  368, 109, 109, 257, 361, 461, 280, 279, 364, 110, 
+  486, 262, 110, 110, 118, 193, 454, 194, 487, 118, 
+  193, 267, 194, 193, 0, 194, 334, 450, 195, 118, 
+  218, 517, 515, 195, 476, 193, 195, 194, 0, 252, 
+  267, 218, 252, 263, 261, 262, 0, 0, 195, 0, 
+  211, 422, 0, 268, 266, 193, 0, 194, 253, 119, 
+  405, 253, 0, 254, 119, 120, 0, 0, 195, 212, 
+  120, 213, 268, 266, 119, 298, 299, 263, 261, 0, 
+  120, 181, 182, 433, 432, 298, 299, 181, 182, 0, 
+  13, 0, 0, 0, 228, 227, 423, 14, 13, 0, 
+  13, 0, 300, 301, 0, 14, 0, 14, 183, 184, 
+  303, 304, 300, 301, 183, 184, 303, 304, 0, 305, 
+  0, 0, 306, 0, 307, 305, 0, 0, 306, 193, 
+  307, 194, 0, 480, 0, 0, 0, 0, 13, 0, 
+  16, 0, 195, 0, 0, 14, 0, 0, 16, 12, 
+  16, 0, 15, 0, 0, 186, 187, 12, 0, 12, 
+  15, 0, 15, 188, 189, 186, 187, 190, 0, 191, 
+  0, 478, 0, 188, 189, 186, 187, 190, 0, 191, 
+  0, 0, 0, 188, 189, 0, 0, 190, 16, 191, 
+  0, 0, 303, 304, 0, 72, 73, 12, 0, 0, 
+  15, 305, 0, 0, 306, 113, 307, 0, 0, 0, 
+  0, 0, 114, 0, 0, 0, 115, 81, 0, 82, 
+  0, 72, 73, 0, 0, 0, 85, 0, 0, 0, 
+  88, 113, 0, 0, 0, 0, 0, 0, 114, 0, 
+  0, 0, 115, 81, 0, 82, 0, 0, 93, 0, 
+  95, 0, 85, 0, 231, 0, 88, 186, 187, 0, 
+  0, 87, 98, 75, 232, 188, 189, 0, 233, 190, 
+  0, 191, 0, 0, 93, 0, 95, 234, 0, 235, 
+  0, 0, 332, 0, 0, 0, 0, 87, 98, 75, 
+  236, 0, 237, 116, 0, 0, 0, 0, 0, 0, 
+  238, 0, 0, 239, 117, 0, 0, 0, 0, 240, 
+  0, 0, 0, 0, 0, 241, 0, 0, 0, 0, 
+  0, 0, 231, 0, 0, 0, 0, 0, 242, 0, 
+  0, 0, 232, 0, 0, 0, 233, 0, 0, 0, 
+  0, 0, 0, 0, 0, 234, 0, 235, 0, 0, 
+  0, 0, 0, 0, 0, 0, 0, 0, 236, 0, 
+  237, 116, 0, 0, 0, 0, 0, 0, 238, 0, 
+  0, 239, 117, 0, 0, 0, 0, 240, 0, 0, 
+  0, 0, 0, 241, 0, 0, 0, 0, 0, 0, 
+  0, 0, 0, 0, 0, 0, 242, 0, 0, 0, 
+  0, 0, 0, 0, 0, 0, 0, 71, 72, 73, 
+  0, 0, 0, 0, 0, 0, 0, 0, 113, 0, 
+  0, 0, 0, 0, 0, 114, 0, 0, 0, 115, 
+  81, 0, 82, 0, 0, 0, 83, 0, 84, 85, 
+  86, 0, 0, 88, 0, 0, 0, 89, 0, 90, 
   0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 
-  0, 0, 159, 0, 0, 0, 0, 0, 0, 161, 
-  162, 163, 0, 165, 166, 167, 168, 169, 170, 0, 
-  0, 156, 164, 147, 140, 142, 158, 0, 0, 0, 
-  0, 137, 138, 139, 0, 0, 141, 143, 144, 0, 
-  0, 145, 0, 146, 0, 0, 0, 148, 149, 150, 
-  0, 0, 0, 0, 0, 0, 151, 152, 153, 154, 
+  0, 93, 0, 95, 0, 97, 0, 100, 0, 101, 
+  0, 0, 0, 0, 87, 98, 75, 0, 0, 0, 
+  0, 0, 0, 0, 71, 72, 73, 0, 0, 0, 
+  0, 0, 0, 0, 0, 113, 0, 0, 0, 0, 
+  0, 0, 114, 0, 0, 0, 115, 81, 0, 82, 
+  0, 0, 0, 83, 0, 84, 85, 86, 0, 0, 
+  88, 0, 0, 0, 89, 0, 90, 0, 0, 0, 
+  0, 0, 0, 0, 0, 0, 0, 0, 93, 0, 
+  95, 0, 97, 0, 100, 295, 101, 0, 0, 0, 
+  0, 87, 98, 75, 0, 0, 0, 0, 0, 0, 
+  0, 71, 72, 73, 0, 0, 0, 0, 0, 0, 
+  0, 0, 113, 0, 0, 0, 0, 0, 0, 114, 
+  0, 0, 0, 115, 81, 0, 82, 0, 0, 0, 
+  83, 0, 84, 85, 86, 0, 0, 88, 0, 0, 
+  0, 89, 0, 90, 0, 0, 467, 0, 0, 0, 
+  0, 0, 0, 0, 0, 93, 0, 95, 0, 97, 
+  0, 100, 0, 101, 0, 0, 0, 0, 87, 98, 
+  75, 0, 0, 0, 0, 0, 0, 0, -73, 0, 
+  0, 0, 71, 72, 73, 0, 0, 0, 0, 0, 
+  0, 0, 0, 113, 0, 0, 0, 0, 0, 0, 
+  114, 0, 0, 0, 115, 81, 0, 82, 0, 0, 
+  0, 83, 0, 84, 85, 86, 0, 0, 88, 0, 
+  0, 0, 89, 0, 90, 0, 0, 0, 0, 0, 
+  0, 0, 0, 0, 0, 0, 93, 0, 95, 0, 
+  97, 0, 100, 0, 101, 0, 0, 0, 0, 87, 
+  98, 75, 0, 0, 0, 0, 0, 0, 0, 71, 
+  72, 73, 0, 0, 0, 0, 0, 0, 0, 0, 
+  113, 0, 0, 0, 0, 0, 0, 114, 0, 0, 
+  0, 115, 81, 0, 82, 0, 0, 0, 83, 0, 
+  84, 85, 86, 0, 0, 88, 0, 0, 0, 89, 
+  0, 90, 0, 0, 464, 0, 0, 0, 0, 0, 
+  0, 0, 0, 93, 0, 95, 0, 97, 0, 100, 
+  0, 101, 0, 0, 0, 0, 87, 98, 75, 0, 
+  0, 0, 0, 0, 0, 0, 136, 137, 138, 0, 
+  0, 140, 142, 143, 0, 0, 144, 0, 145, 0, 
+  0, 0, 147, 148, 149, 0, 0, 0, 0, 0, 
+  0, 216, 151, 152, 153, 0, 0, 0, 0, 0, 
+  0, 0, 0, 0, 0, 154, 0, 0, 0, 0, 
   0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 
-  155, 0, 0, 0, 157, 0, 0, 0, 0, 0, 
-  0, 0, 0, 0, 0, 0, 159, 0, 0, 0, 
-  0, 0, 160, 161, 162, 163, 0, 165, 166, 167, 
-  168, 169, 170, 0, 0, 156, 164, 147, 140, 142, 
-  158, 0, 0, 0, 0, 137, 138, 139, 0, 0, 
-  141, 143, 144, 0, 0, 145, 0, 146, 0, 0, 
-  0, 148, 149, 150, 0, 0, 0, 0, 0, 0, 
-  151, 152, 153, 154, 0, 0, 0, 0, 0, 0, 
-  0, 0, 0, 0, 155, 0, 0, 0, 157, 0, 
-  0, 0, 0, 0, 0, 0, 175, 0, 0, 0, 
-  159, 0, 0, 0, 0, 0, 160, 161, 162, 163, 
-  0, 165, 166, 167, 168, 169, 170, 0, 0, 156, 
-  164, 147, 140, 142, 158, 0, 0, 0, 0, 69, 
-  0, 0, 0, 0, 70, 0, 72, 73, 74, 75, 
-  0, 0, 0, 0, 0, 0, 77, 114, 0, 0, 
-  0, 0, 0, 0, 79, 80, 0, 0, 81, 82, 
-  0, 83, 0, 0, 0, 84, 0, 85, 86, 87, 
-  0, 0, 89, 0, 0, 0, 90, 0, 91, 0, 
-  0, 0, 0, 0, 92, 0, 93, 0, 0, 0, 
-  94, 95, 96, 97, 98, 100, 101, 17, 102, 103, 
-  104, 0, 0, 88, 99, 76, 13, 71, 0, 0, 
-  0, 0, 0, 69, 0, 0, 0, 0, 70, 0, 
-  72, 73, 74, 75, 0, 0, 0, 0, 0, 0, 
-  77, 78, 0, 0, 0, 0, 0, 0, 79, 80, 
-  0, 0, 81, 82, 0, 83, 0, 0, 0, 84, 
-  0, 85, 86, 87, 0, 0, 89, 0, 0, 0, 
-  90, 0, 91, 0, 0, 0, 0, 0, 92, 0, 
-  93, 0, 0, 0, 94, 95, 96, 97, 98, 100, 
-  101, 17, 102, 103, 104, 0, 0, 88, 99, 76, 
-  13, 71, 0, 0, 0, 0, 0, 69, 0, 0, 
-  0, 0, 70, 0, 72, 73, 74, 75, 0, 0, 
-  0, 0, 0, 0, 77, 114, 0, 0, 0, 0, 
-  0, 0, 490, 80, 0, 0, 81, 491, 0, 83, 
-  0, 0, 0, 84, 0, 85, 86, 87, 0, 0, 
-  89, 0, 0, 0, 90, 0, 91, 0, 0, 0, 
-  0, 0, 92, 0, 93, 0, 0, 0, 94, 95, 
-  96, 97, 98, 100, 101, 17, 102, 103, 104, 0, 
-  0, 88, 99, 76, 13, 71, 0, 0, 0, 0, 
-  0, 69, 0, 0, 0, 0, 70, 0, 72, 73, 
-  74, 75, 0, 0, 0, 0, 0, 0, 77, 114, 
-  0, 0, 0, 0, 0, 0, 503, 80, 0, 0, 
-  81, 504, 0, 83, 0, 0, 0, 84, 0, 85, 
-  86, 87, 0, 0, 89, 0, 0, 0, 90, 0, 
-  91, 0, 0, 0, 0, 0, 92, 0, 93, 0, 
-  0, 0, 94, 95, 96, 97, 98, 100, 101, 17, 
-  102, 103, 104, 0, 0, 88, 99, 76, 13, 71, 
-  0, 0, 0, 0, 0, 376, 138, 139, 0, 0, 
-  378, 143, 380, 73, 74, 381, 0, 146, 0, 0, 
-  0, 148, 383, 384, 0, 0, 0, 0, 0, 0, 
-  385, 386, 153, 154, 81, 82, 0, 83, 0, 0, 
-  0, 84, 0, 85, 387, 87, 0, 0, 389, 0, 
-  0, 0, 90, 0, 91, 0, -219, 0, 0, 0, 
-  390, 0, 93, 0, 0, 0, 391, 392, 393, 394, 
-  98, 396, 397, 398, 399, 400, 401, 0, 0, 388, 
-  395, 382, 377, 379, 158, 0, 0, 0, 0, 
+  0, 158, 0, 0, 0, 0, 0, 0, 160, 161, 
+  162, 0, 164, 165, 166, 167, 168, 169, 0, 0, 
+  155, 163, 146, 139, 141, 157, 0, 0, 0, 0, 
+  136, 137, 138, 0, 0, 140, 142, 143, 0, 0, 
+  144, 0, 145, 0, 0, 0, 147, 148, 149, 0, 
+  0, 0, 0, 0, 0, 150, 151, 152, 153, 0, 
+  0, 0, 0, 0, 0, 0, 0, 0, 0, 154, 
+  0, 0, 0, 156, 0, 0, 0, 0, 0, 0, 
+  0, 0, 0, 0, 0, 158, 0, 0, 0, 0, 
+  0, 159, 160, 161, 162, 0, 164, 165, 166, 167, 
+  168, 169, 0, 0, 155, 163, 146, 139, 141, 157, 
+  0, 0, 0, 0, 136, 137, 138, 0, 0, 140, 
+  142, 143, 0, 0, 144, 0, 145, 0, 0, 0, 
+  147, 148, 149, 0, 0, 0, 0, 0, 0, 150, 
+  151, 152, 153, 0, 0, 0, 0, 0, 0, 0, 
+  0, 0, 0, 154, 0, 0, 0, 156, 0, 0, 
+  0, 0, 0, 0, 0, 174, 0, 0, 0, 158, 
+  0, 0, 0, 0, 0, 159, 160, 161, 162, 0, 
+  164, 165, 166, 167, 168, 169, 0, 0, 155, 163, 
+  146, 139, 141, 157, 0, 0, 0, 0, 68, 0, 
+  0, 0, 0, 69, 0, 71, 72, 73, 74, 0, 
+  0, 0, 0, 0, 0, 76, 113, 0, 0, 0, 
+  0, 0, 0, 78, 79, 0, 0, 80, 81, 0, 
+  82, 0, 0, 0, 83, 0, 84, 85, 86, 0, 
+  0, 88, 0, 0, 0, 89, 0, 90, 0, 0, 
+  0, 0, 0, 91, 0, 92, 0, 0, 0, 93, 
+  94, 95, 96, 97, 99, 100, 16, 101, 102, 103, 
+  0, 0, 87, 98, 75, 12, 70, 0, 0, 0, 
+  0, 0, 68, 0, 0, 0, 0, 69, 0, 71, 
+  72, 73, 74, 0, 0, 0, 0, 0, 0, 76, 
+  77, 0, 0, 0, 0, 0, 0, 78, 79, 0, 
+  0, 80, 81, 0, 82, 0, 0, 0, 83, 0, 
+  84, 85, 86, 0, 0, 88, 0, 0, 0, 89, 
+  0, 90, 0, 0, 0, 0, 0, 91, 0, 92, 
+  0, 0, 0, 93, 94, 95, 96, 97, 99, 100, 
+  16, 101, 102, 103, 0, 0, 87, 98, 75, 12, 
+  70, 0, 0, 0, 0, 0, 68, 0, 0, 0, 
+  0, 69, 0, 71, 72, 73, 74, 0, 0, 0, 
+  0, 0, 0, 76, 113, 0, 0, 0, 0, 0, 
+  0, 489, 79, 0, 0, 80, 490, 0, 82, 0, 
+  0, 0, 83, 0, 84, 85, 86, 0, 0, 88, 
+  0, 0, 0, 89, 0, 90, 0, 0, 0, 0, 
+  0, 91, 0, 92, 0, 0, 0, 93, 94, 95, 
+  96, 97, 99, 100, 16, 101, 102, 103, 0, 0, 
+  87, 98, 75, 12, 70, 0, 0, 0, 0, 0, 
+  68, 0, 0, 0, 0, 69, 0, 71, 72, 73, 
+  74, 0, 0, 0, 0, 0, 0, 76, 113, 0, 
+  0, 0, 0, 0, 0, 502, 79, 0, 0, 80, 
+  503, 0, 82, 0, 0, 0, 83, 0, 84, 85, 
+  86, 0, 0, 88, 0, 0, 0, 89, 0, 90, 
+  0, 0, 0, 0, 0, 91, 0, 92, 0, 0, 
+  0, 93, 94, 95, 96, 97, 99, 100, 16, 101, 
+  102, 103, 0, 0, 87, 98, 75, 12, 70, 0, 
+  0, 0, 0, 0, 375, 137, 138, 0, 0, 377, 
+  142, 379, 72, 73, 380, 0, 145, 0, 0, 0, 
+  147, 382, 383, 0, 0, 0, 0, 0, 0, 384, 
+  385, 152, 153, 80, 81, 0, 82, 0, 0, 0, 
+  83, 0, 84, 386, 86, 0, 0, 388, 0, 0, 
+  0, 89, 0, 90, 0, -219, 0, 0, 0, 389, 
+  0, 92, 0, 0, 0, 390, 391, 392, 393, 97, 
+  395, 396, 397, 398, 399, 400, 0, 0, 387, 394, 
+  381, 376, 378, 157, 0, 0, 0, 0, 
 
-  454, 250, 275, 252, 413, 463, 467, 464, 425, 445, 
-  421, 231, 446, 172, 441, 278, 452, 177, 429, 450, 
-  428, 431, 174, 435, 244, 505, 359, 22, 226, 370, 
-  354, 361, 368, 363, 366, 11, 332, 224, 519, 334, 
-  336, 221, 502, 128, 218, 372, 515, 216, 435, 432, 
-  489, 0, 327, 486, 469, 432, 257, 327, 496, 492, 
-  497, 0, 482, 275, 402, 0, 112, 112, 0, 112, 
-  22, 202, 201, 199, 500, 480, 496, 112, 112, 0, 
-  112, 198, 197, 0, 0, 200, 456, 22, 112, 112, 
-  112, 112, 112, 482, 67, 112, 49, 203, 291, 211, 
-  204, 22, 209, 295, 249, 246, 404, 112, 112, 405, 
-  112, 113, 310, 112, 327, 311, 327, 112, 309, 448, 
-  112, 112, 476, 447, 112, 112, 274, 112, 179, 112, 
-  112, 124, 312, 0, 112, 313, 123, 112, 327, 122, 
-  327, 216, 256, 112, 112, 472, 274, 112, 112, 471, 
-  112, 224, 404, 224, 186, 405, 205, 328, 407, 330, 
-  259, 112, 0, 112, 0, 112, 193, 112, 112, 206, 
-  447, 207, 112, 506, 448, 181, 496, 112, 112, 473, 
-  475, 355, 112, 357, 474, 112, 112, 323, 323, 112, 
-  295, 295, 295, 295, 295, 67, 0, 49, 323, 112, 
-  320, 338, 341, 295, 295, 0, 323, 0, 112, 322, 
-  342, 295, 318, 295, 112, 315, 0, 112, 112, 295, 
-  344, 314, 295, 295, 323, 316, 298, 112, 325, 295, 
-  0, 0, 295, 0, 303, 0, 0, 0, 0, 0, 
-  0, 0, 0, 0, 0, 0, 351, 0, 0, 0, 
-  0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 
-  0, 0, 0, 0, 67, 0, 49, 0, 0, 0, 
+  491, 424, 449, 420, 451, 518, 428, 514, 488, 274, 
+  427, 455, 440, 495, 504, 501, 445, 462, 10, 463, 
+  21, 444, 230, 496, 485, 430, 353, 466, 220, 371, 
+  127, 333, 335, 358, 369, 225, 360, 367, 362, 365, 
+  331, 434, 277, 215, 217, 0, 223, 434, 256, 412, 
+  0, 243, 431, 171, 249, 431, 326, 173, 251, 176, 
+  326, 274, 223, 468, 401, 499, 481, 495, 0, 258, 
+  215, 255, 111, 66, 21, 48, 111, 200, 447, 481, 
+  111, 403, 446, 111, 404, 111, 111, 21, 199, 453, 
+  111, 192, 474, 180, 111, 111, 273, 111, 111, 111, 
+  111, 185, 111, 204, 205, 206, 111, 201, 223, 111, 
+  198, 111, 208, 470, 111, 406, 471, 111, 111, 210, 
+  473, 197, 505, 111, 111, 495, 111, 196, 111, 202, 
+  111, 203, 472, 111, 111, 403, 326, 0, 404, 311, 
+  326, 326, 245, 111, 111, 123, 475, 326, 111, 248, 
+  122, 111, 111, 121, 111, 0, 447, 312, 111, 0, 
+  0, 111, 111, 310, 112, 178, 0, 111, 111, 273, 
+  111, 111, 446, 309, 0, 290, 308, 322, 0, 356, 
+  294, 0, 294, 354, 327, 66, 66, 48, 48, 111, 
+  329, 322, 111, 111, 294, 0, 294, 294, 294, 350, 
+  315, 111, 317, 319, 111, 0, 294, 111, 313, 294, 
+  322, 302, 294, 343, 314, 294, 322, 111, 111, 322, 
+  111, 294, 294, 294, 294, 294, 0, 297, 0, 0, 
+  0, 0, 341, 0, 340, 337, 0, 0, 321, 0, 
+  0, 324, 479, 0, 0, 0, 0, 0, 0, 0, 
+  0, 0, 0, 0, 21, 0, 0, 0, 0, 0, 
+  0, 0, 0, 0, 0, 0, 130, 0, 0, 0, 
+  260, 0, 0, 0, 0, 0, 0, 0, 0, 0, 
   0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 
-  261, 0, 0, 0, 0, 0, 0, 0, 0, 0, 
   0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 
   0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 
   0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 
   0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 
-  0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 
-  0, 0, 0, 0, 131, 0, 0, 0, 0, 0, 
-  0};
+  0, 0, 0, 0, 0, 0, 0, 0};
 
 const int JavaScriptGrammar::action_check [] = {
-  76, 61, 60, 8, 48, 29, 60, 7, 29, 2, 
-  48, 29, 60, 33, 1, 61, 8, 76, 48, 36, 
-  29, 2, 29, 8, 8, 33, 29, 33, 8, 55, 
-  7, 60, 33, 7, 17, 5, 55, 36, 29, 7, 
-  1, 36, 7, 7, 7, 55, 36, 7, 61, 60, 
-  16, 55, 5, 31, 36, 2, 29, 33, 29, 5, 
-  85, 36, 7, 20, 36, 7, 60, 36, 17, 36, 
-  85, 33, 8, 8, 33, 29, 7, 2, 36, 29, 
-  36, 33, 8, 7, 7, 29, 29, 8, 29, 0, 
-  76, 1, 8, 48, 33, 74, 36, 29, 36, 36, 
-  29, 29, 36, 7, -1, 8, 8, 8, 8, 60, 
-  8, 15, 60, 40, 7, 8, 8, 8, 8, 6, 
-  40, 40, 55, 7, 51, 42, 8, 7, 29, 8, 
-  8, 51, 51, 20, 7, 65, 53, 50, 8, 61, 
-  62, 54, 15, 61, 62, 61, 61, 62, 29, 33, 
-  8, 8, 40, 56, 7, 36, 61, 62, 60, 29, 
-  60, 8, 60, 51, 56, 56, 61, 62, 29, 15, 
-  60, -1, 61, 62, 56, 50, 61, 62, 29, 54, 
-  33, 60, 60, 25, 25, 27, 27, 12, 34, 12, 
-  36, 25, 25, 27, 27, -1, 38, 38, 8, -1, 
-  61, 62, 60, 60, 38, 38, -1, -1, 10, 56, 
-  61, 62, 25, 25, 27, 27, 25, 25, 27, 27, 
-  15, 8, 25, 29, 27, 38, 38, 15, 29, 38, 
-  38, 25, 57, 27, 57, 38, 8, -1, 63, 34, 
-  63, 36, -1, -1, 38, 25, 34, 27, 36, -1, 
-  -1, 61, 62, 55, -1, 61, 62, 25, 38, 27, 
-  61, 62, -1, 25, -1, 27, 18, 19, 18, 19, 
-  38, 18, 19, 22, 61, 62, 38, 18, 19, -1, 
-  29, -1, -1, -1, 22, -1, 12, -1, -1, 61, 
-  62, 29, -1, 45, 46, 45, 46, -1, 45, 46, 
-  23, 24, -1, -1, 45, 46, 22, -1, 31, 32, 
-  23, 24, 35, 29, 37, -1, -1, -1, 31, 32, 
-  22, -1, 35, 72, 37, -1, -1, 29, -1, -1, 
-  -1, 57, 81, -1, 72, 84, -1, 63, -1, 55, 
-  23, 24, -1, 81, -1, -1, 84, -1, 31, 32, 
-  3, -1, 35, 55, 37, -1, 72, -1, -1, -1, 
-  13, -1, 23, 24, 17, 81, -1, -1, 84, -1, 
-  72, 32, -1, 26, 35, 28, 37, -1, -1, 81, 
-  -1, -1, 84, 3, -1, -1, 39, -1, 41, 42, 
-  -1, -1, -1, 13, -1, -1, 49, 17, -1, 52, 
-  53, -1, -1, -1, -1, 58, 26, -1, 28, -1, 
-  -1, 64, -1, -1, -1, -1, -1, -1, -1, 39, 
-  3, 41, 42, -1, 77, -1, -1, 23, 24, 49, 
-  13, -1, 52, 53, 17, 31, 32, -1, 58, 35, 
-  -1, 37, -1, 26, 64, 28, -1, -1, 31, -1, 
-  -1, -1, -1, -1, -1, -1, 39, 77, 41, 42, 
-  -1, -1, -1, -1, -1, -1, 49, -1, -1, 52, 
-  53, -1, -1, -1, -1, 58, -1, -1, -1, -1, 
-  -1, 64, -1, -1, -1, -1, -1, -1, -1, -1, 
-  -1, -1, 12, 13, 77, -1, -1, -1, -1, -1, 
+  60, 76, 8, 76, 1, 33, 60, 7, 60, 2, 
+  33, 5, 29, 48, 48, 61, 8, 8, 17, 48, 
+  1, 76, 2, 8, 1, 29, 33, 29, 61, 55, 
+  60, 7, 7, 31, 29, 55, 55, 55, 16, 7, 
+  7, 5, 7, 55, 7, 7, 36, 36, 7, 7, 
+  36, 7, 36, 5, 33, 8, 29, 29, 29, 60, 
+  29, 48, 36, 33, 85, 61, 20, 7, 76, 8, 
+  36, 7, 60, 1, 85, 36, 36, 60, 33, 29, 
+  0, 8, 33, 29, 29, 29, 29, 36, 36, 36, 
+  7, 29, 29, 17, 36, 8, 8, 29, 33, 33, 
+  29, 7, -1, 8, 8, 36, 36, 8, 65, 15, 
+  36, 8, 8, 29, 8, 8, 7, 8, 8, 60, 
+  36, 8, 8, 7, -1, 8, 6, 8, -1, 50, 
+  -1, 8, 42, 54, 8, 2, 61, 62, 61, 62, 
+  20, 74, 29, 53, 8, 8, 61, 62, 8, 33, 
+  61, 62, 29, 61, 62, 60, 60, -1, 40, 56, 
+  61, 50, 56, 56, 60, 54, 61, 62, 40, 51, 
+  60, 40, 40, 56, 60, 56, 61, 62, 7, 51, 
+  7, 29, 51, 51, 12, 25, 60, 27, 15, 12, 
+  25, 29, 27, 25, -1, 27, 60, 60, 38, 12, 
+  8, 61, 62, 38, 33, 25, 38, 27, -1, 15, 
+  29, 8, 15, 61, 62, 29, -1, -1, 38, -1, 
+  15, 10, -1, 61, 62, 25, -1, 27, 34, 57, 
+  36, 34, -1, 36, 57, 63, -1, -1, 38, 34, 
+  63, 36, 61, 62, 57, 18, 19, 61, 62, -1, 
+  63, 18, 19, 61, 62, 18, 19, 18, 19, -1, 
+  22, -1, -1, -1, 61, 62, 55, 29, 22, -1, 
+  22, -1, 45, 46, -1, 29, -1, 29, 45, 46, 
+  23, 24, 45, 46, 45, 46, 23, 24, -1, 32, 
+  -1, -1, 35, -1, 37, 32, -1, -1, 35, 25, 
+  37, 27, -1, 55, -1, -1, -1, -1, 22, -1, 
+  72, -1, 38, -1, -1, 29, -1, -1, 72, 81, 
+  72, -1, 84, -1, -1, 23, 24, 81, -1, 81, 
+  84, -1, 84, 31, 32, 23, 24, 35, -1, 37, 
+  -1, 55, -1, 31, 32, 23, 24, 35, -1, 37, 
+  -1, -1, -1, 31, 32, -1, -1, 35, 72, 37, 
+  -1, -1, 23, 24, -1, 12, 13, 81, -1, -1, 
+  84, 32, -1, -1, 35, 22, 37, -1, -1, -1, 
+  -1, -1, 29, -1, -1, -1, 33, 34, -1, 36, 
+  -1, 12, 13, -1, -1, -1, 43, -1, -1, -1, 
+  47, 22, -1, -1, -1, -1, -1, -1, 29, -1, 
+  -1, -1, 33, 34, -1, 36, -1, -1, 65, -1, 
+  67, -1, 43, -1, 3, -1, 47, 23, 24, -1, 
+  -1, 78, 79, 80, 13, 31, 32, -1, 17, 35, 
+  -1, 37, -1, -1, 65, -1, 67, 26, -1, 28, 
+  -1, -1, 31, -1, -1, -1, -1, 78, 79, 80, 
+  39, -1, 41, 42, -1, -1, -1, -1, -1, -1, 
+  49, -1, -1, 52, 53, -1, -1, -1, -1, 58, 
+  -1, -1, -1, -1, -1, 64, -1, -1, -1, -1, 
+  -1, -1, 3, -1, -1, -1, -1, -1, 77, -1, 
+  -1, -1, 13, -1, -1, -1, 17, -1, -1, -1, 
+  -1, -1, -1, -1, -1, 26, -1, 28, -1, -1, 
+  -1, -1, -1, -1, -1, -1, -1, -1, 39, -1, 
+  41, 42, -1, -1, -1, -1, -1, -1, 49, -1, 
+  -1, 52, 53, -1, -1, -1, -1, 58, -1, -1, 
+  -1, -1, -1, 64, -1, -1, -1, -1, -1, -1, 
+  -1, -1, -1, -1, -1, -1, 77, -1, -1, -1, 
+  -1, -1, -1, -1, -1, -1, -1, 11, 12, 13, 
+  -1, -1, -1, -1, -1, -1, -1, -1, 22, -1, 
+  -1, -1, -1, -1, -1, 29, -1, -1, -1, 33, 
+  34, -1, 36, -1, -1, -1, 40, -1, 42, 43, 
+  44, -1, -1, 47, -1, -1, -1, 51, -1, 53, 
+  -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 
+  -1, 65, -1, 67, -1, 69, -1, 71, -1, 73, 
+  -1, -1, -1, -1, 78, 79, 80, -1, -1, -1, 
+  -1, -1, -1, -1, 11, 12, 13, -1, -1, -1, 
+  -1, -1, -1, -1, -1, 22, -1, -1, -1, -1, 
+  -1, -1, 29, -1, -1, -1, 33, 34, -1, 36, 
+  -1, -1, -1, 40, -1, 42, 43, 44, -1, -1, 
+  47, -1, -1, -1, 51, -1, 53, -1, -1, -1, 
+  -1, -1, -1, -1, -1, -1, -1, -1, 65, -1, 
+  67, -1, 69, -1, 71, 72, 73, -1, -1, -1, 
+  -1, 78, 79, 80, -1, -1, -1, -1, -1, -1, 
+  -1, 11, 12, 13, -1, -1, -1, -1, -1, -1, 
   -1, -1, 22, -1, -1, -1, -1, -1, -1, 29, 
   -1, -1, -1, 33, 34, -1, 36, -1, -1, -1, 
-  -1, -1, -1, 43, -1, -1, -1, 47, -1, -1, 
-  -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 
-  -1, -1, -1, -1, -1, 65, -1, 67, -1, -1, 
-  -1, -1, -1, -1, -1, -1, -1, -1, 78, 79, 
-  80, -1, -1, -1, -1, -1, -1, -1, 11, 12, 
-  13, -1, -1, -1, -1, -1, -1, -1, -1, 22, 
-  -1, -1, -1, -1, -1, -1, 29, -1, -1, -1, 
-  33, 34, -1, 36, -1, -1, -1, 40, -1, 42, 
-  43, 44, -1, -1, 47, -1, -1, -1, 51, -1, 
-  53, -1, -1, -1, -1, -1, -1, -1, -1, -1, 
-  -1, -1, 65, -1, 67, -1, 69, -1, 71, -1, 
-  73, -1, -1, -1, -1, 78, 79, 80, -1, -1, 
-  -1, -1, -1, -1, -1, 11, 12, 13, -1, -1, 
-  -1, -1, -1, -1, -1, -1, 22, -1, -1, -1, 
-  -1, -1, -1, 29, -1, -1, -1, 33, 34, -1, 
-  36, -1, -1, -1, 40, -1, 42, 43, 44, -1, 
-  -1, 47, -1, -1, -1, 51, -1, 53, -1, -1, 
-  -1, -1, -1, -1, -1, -1, -1, -1, -1, 65, 
-  -1, 67, -1, 69, -1, 71, 72, 73, -1, -1, 
-  -1, -1, 78, 79, 80, -1, -1, -1, -1, -1, 
+  40, -1, 42, 43, 44, -1, -1, 47, -1, -1, 
+  -1, 51, -1, 53, -1, -1, 56, -1, -1, -1, 
+  -1, -1, -1, -1, -1, 65, -1, 67, -1, 69, 
+  -1, 71, -1, 73, -1, -1, -1, -1, 78, 79, 
+  80, -1, -1, -1, -1, -1, -1, -1, 7, -1, 
   -1, -1, 11, 12, 13, -1, -1, -1, -1, -1, 
   -1, -1, -1, 22, -1, -1, -1, -1, -1, -1, 
   29, -1, -1, -1, 33, 34, -1, 36, -1, -1, 
   -1, 40, -1, 42, 43, 44, -1, -1, 47, -1, 
-  -1, -1, 51, -1, 53, -1, -1, 56, -1, -1, 
+  -1, -1, 51, -1, 53, -1, -1, -1, -1, -1, 
   -1, -1, -1, -1, -1, -1, 65, -1, 67, -1, 
   69, -1, 71, -1, 73, -1, -1, -1, -1, 78, 
   79, 80, -1, -1, -1, -1, -1, -1, -1, 11, 
@@ -580,117 +588,107 @@ const int JavaScriptGrammar::action_check [] = {
   -1, 53, -1, -1, 56, -1, -1, -1, -1, -1, 
   -1, -1, -1, 65, -1, 67, -1, 69, -1, 71, 
   -1, 73, -1, -1, -1, -1, 78, 79, 80, -1, 
-  -1, -1, -1, -1, -1, -1, 7, -1, -1, -1, 
-  11, 12, 13, -1, -1, -1, -1, -1, -1, -1, 
-  -1, 22, -1, -1, -1, -1, -1, -1, 29, -1, 
-  -1, -1, 33, 34, -1, 36, -1, -1, -1, 40, 
-  -1, 42, 43, 44, -1, -1, 47, -1, -1, -1, 
-  51, -1, 53, -1, -1, -1, -1, -1, -1, -1, 
-  -1, -1, -1, -1, 65, -1, 67, -1, 69, -1, 
-  71, -1, 73, -1, -1, -1, -1, 78, 79, 80, 
-  -1, -1, -1, -1, -1, -1, -1, 4, 5, 6, 
-  -1, -1, 9, 10, 11, -1, -1, 14, -1, 16, 
-  -1, -1, -1, 20, 21, 22, -1, -1, -1, -1, 
-  -1, -1, 29, 30, 31, 32, -1, -1, -1, -1, 
-  -1, -1, -1, -1, -1, -1, 43, -1, -1, -1, 
+  -1, -1, -1, -1, -1, -1, 4, 5, 6, -1, 
+  -1, 9, 10, 11, -1, -1, 14, -1, 16, -1, 
+  -1, -1, 20, 21, 22, -1, -1, -1, -1, -1, 
+  -1, 29, 30, 31, 32, -1, -1, -1, -1, -1, 
+  -1, -1, -1, -1, -1, 43, -1, -1, -1, -1, 
   -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 
-  -1, -1, 59, -1, -1, -1, -1, -1, -1, 66, 
-  67, 68, -1, 70, 71, 72, 73, 74, 75, -1, 
-  -1, 78, 79, 80, 81, 82, 83, -1, -1, -1, 
-  -1, 4, 5, 6, -1, -1, 9, 10, 11, -1, 
-  -1, 14, -1, 16, -1, -1, -1, 20, 21, 22, 
-  -1, -1, -1, -1, -1, -1, 29, 30, 31, 32, 
-  -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 
-  43, -1, -1, -1, 47, -1, -1, -1, -1, -1, 
-  -1, -1, -1, -1, -1, -1, 59, -1, -1, -1, 
-  -1, -1, 65, 66, 67, 68, -1, 70, 71, 72, 
-  73, 74, 75, -1, -1, 78, 79, 80, 81, 82, 
-  83, -1, -1, -1, -1, 4, 5, 6, -1, -1, 
-  9, 10, 11, -1, -1, 14, -1, 16, -1, -1, 
-  -1, 20, 21, 22, -1, -1, -1, -1, -1, -1, 
-  29, 30, 31, 32, -1, -1, -1, -1, -1, -1, 
-  -1, -1, -1, -1, 43, -1, -1, -1, 47, -1, 
-  -1, -1, -1, -1, -1, -1, 55, -1, -1, -1, 
-  59, -1, -1, -1, -1, -1, 65, 66, 67, 68, 
-  -1, 70, 71, 72, 73, 74, 75, -1, -1, 78, 
-  79, 80, 81, 82, 83, -1, -1, -1, -1, 4, 
-  -1, -1, -1, -1, 9, -1, 11, 12, 13, 14, 
-  -1, -1, -1, -1, -1, -1, 21, 22, -1, -1, 
-  -1, -1, -1, -1, 29, 30, -1, -1, 33, 34, 
-  -1, 36, -1, -1, -1, 40, -1, 42, 43, 44, 
-  -1, -1, 47, -1, -1, -1, 51, -1, 53, -1, 
-  -1, -1, -1, -1, 59, -1, 61, -1, -1, -1, 
-  65, 66, 67, 68, 69, 70, 71, 72, 73, 74, 
-  75, -1, -1, 78, 79, 80, 81, 82, -1, -1, 
-  -1, -1, -1, 4, -1, -1, -1, -1, 9, -1, 
-  11, 12, 13, 14, -1, -1, -1, -1, -1, -1, 
-  21, 22, -1, -1, -1, -1, -1, -1, 29, 30, 
-  -1, -1, 33, 34, -1, 36, -1, -1, -1, 40, 
-  -1, 42, 43, 44, -1, -1, 47, -1, -1, -1, 
-  51, -1, 53, -1, -1, -1, -1, -1, 59, -1, 
-  61, -1, -1, -1, 65, 66, 67, 68, 69, 70, 
-  71, 72, 73, 74, 75, -1, -1, 78, 79, 80, 
-  81, 82, -1, -1, -1, -1, -1, 4, -1, -1, 
-  -1, -1, 9, -1, 11, 12, 13, 14, -1, -1, 
-  -1, -1, -1, -1, 21, 22, -1, -1, -1, -1, 
-  -1, -1, 29, 30, -1, -1, 33, 34, -1, 36, 
-  -1, -1, -1, 40, -1, 42, 43, 44, -1, -1, 
-  47, -1, -1, -1, 51, -1, 53, -1, -1, -1, 
-  -1, -1, 59, -1, 61, -1, -1, -1, 65, 66, 
-  67, 68, 69, 70, 71, 72, 73, 74, 75, -1, 
-  -1, 78, 79, 80, 81, 82, -1, -1, -1, -1, 
-  -1, 4, -1, -1, -1, -1, 9, -1, 11, 12, 
-  13, 14, -1, -1, -1, -1, -1, -1, 21, 22, 
-  -1, -1, -1, -1, -1, -1, 29, 30, -1, -1, 
-  33, 34, -1, 36, -1, -1, -1, 40, -1, 42, 
-  43, 44, -1, -1, 47, -1, -1, -1, 51, -1, 
-  53, -1, -1, -1, -1, -1, 59, -1, 61, -1, 
-  -1, -1, 65, 66, 67, 68, 69, 70, 71, 72, 
-  73, 74, 75, -1, -1, 78, 79, 80, 81, 82, 
-  -1, -1, -1, -1, -1, 4, 5, 6, -1, -1, 
-  9, 10, 11, 12, 13, 14, -1, 16, -1, -1, 
-  -1, 20, 21, 22, -1, -1, -1, -1, -1, -1, 
-  29, 30, 31, 32, 33, 34, -1, 36, -1, -1, 
-  -1, 40, -1, 42, 43, 44, -1, -1, 47, -1, 
-  -1, -1, 51, -1, 53, -1, 55, -1, -1, -1, 
-  59, -1, 61, -1, -1, -1, 65, 66, 67, 68, 
-  69, 70, 71, 72, 73, 74, 75, -1, -1, 78, 
-  79, 80, 81, 82, 83, -1, -1, -1, -1, 
+  -1, 59, -1, -1, -1, -1, -1, -1, 66, 67, 
+  68, -1, 70, 71, 72, 73, 74, 75, -1, -1, 
+  78, 79, 80, 81, 82, 83, -1, -1, -1, -1, 
+  4, 5, 6, -1, -1, 9, 10, 11, -1, -1, 
+  14, -1, 16, -1, -1, -1, 20, 21, 22, -1, 
+  -1, -1, -1, -1, -1, 29, 30, 31, 32, -1, 
+  -1, -1, -1, -1, -1, -1, -1, -1, -1, 43, 
+  -1, -1, -1, 47, -1, -1, -1, -1, -1, -1, 
+  -1, -1, -1, -1, -1, 59, -1, -1, -1, -1, 
+  -1, 65, 66, 67, 68, -1, 70, 71, 72, 73, 
+  74, 75, -1, -1, 78, 79, 80, 81, 82, 83, 
+  -1, -1, -1, -1, 4, 5, 6, -1, -1, 9, 
+  10, 11, -1, -1, 14, -1, 16, -1, -1, -1, 
+  20, 21, 22, -1, -1, -1, -1, -1, -1, 29, 
+  30, 31, 32, -1, -1, -1, -1, -1, -1, -1, 
+  -1, -1, -1, 43, -1, -1, -1, 47, -1, -1, 
+  -1, -1, -1, -1, -1, 55, -1, -1, -1, 59, 
+  -1, -1, -1, -1, -1, 65, 66, 67, 68, -1, 
+  70, 71, 72, 73, 74, 75, -1, -1, 78, 79, 
+  80, 81, 82, 83, -1, -1, -1, -1, 4, -1, 
+  -1, -1, -1, 9, -1, 11, 12, 13, 14, -1, 
+  -1, -1, -1, -1, -1, 21, 22, -1, -1, -1, 
+  -1, -1, -1, 29, 30, -1, -1, 33, 34, -1, 
+  36, -1, -1, -1, 40, -1, 42, 43, 44, -1, 
+  -1, 47, -1, -1, -1, 51, -1, 53, -1, -1, 
+  -1, -1, -1, 59, -1, 61, -1, -1, -1, 65, 
+  66, 67, 68, 69, 70, 71, 72, 73, 74, 75, 
+  -1, -1, 78, 79, 80, 81, 82, -1, -1, -1, 
+  -1, -1, 4, -1, -1, -1, -1, 9, -1, 11, 
+  12, 13, 14, -1, -1, -1, -1, -1, -1, 21, 
+  22, -1, -1, -1, -1, -1, -1, 29, 30, -1, 
+  -1, 33, 34, -1, 36, -1, -1, -1, 40, -1, 
+  42, 43, 44, -1, -1, 47, -1, -1, -1, 51, 
+  -1, 53, -1, -1, -1, -1, -1, 59, -1, 61, 
+  -1, -1, -1, 65, 66, 67, 68, 69, 70, 71, 
+  72, 73, 74, 75, -1, -1, 78, 79, 80, 81, 
+  82, -1, -1, -1, -1, -1, 4, -1, -1, -1, 
+  -1, 9, -1, 11, 12, 13, 14, -1, -1, -1, 
+  -1, -1, -1, 21, 22, -1, -1, -1, -1, -1, 
+  -1, 29, 30, -1, -1, 33, 34, -1, 36, -1, 
+  -1, -1, 40, -1, 42, 43, 44, -1, -1, 47, 
+  -1, -1, -1, 51, -1, 53, -1, -1, -1, -1, 
+  -1, 59, -1, 61, -1, -1, -1, 65, 66, 67, 
+  68, 69, 70, 71, 72, 73, 74, 75, -1, -1, 
+  78, 79, 80, 81, 82, -1, -1, -1, -1, -1, 
+  4, -1, -1, -1, -1, 9, -1, 11, 12, 13, 
+  14, -1, -1, -1, -1, -1, -1, 21, 22, -1, 
+  -1, -1, -1, -1, -1, 29, 30, -1, -1, 33, 
+  34, -1, 36, -1, -1, -1, 40, -1, 42, 43, 
+  44, -1, -1, 47, -1, -1, -1, 51, -1, 53, 
+  -1, -1, -1, -1, -1, 59, -1, 61, -1, -1, 
+  -1, 65, 66, 67, 68, 69, 70, 71, 72, 73, 
+  74, 75, -1, -1, 78, 79, 80, 81, 82, -1, 
+  -1, -1, -1, -1, 4, 5, 6, -1, -1, 9, 
+  10, 11, 12, 13, 14, -1, 16, -1, -1, -1, 
+  20, 21, 22, -1, -1, -1, -1, -1, -1, 29, 
+  30, 31, 32, 33, 34, -1, 36, -1, -1, -1, 
+  40, -1, 42, 43, 44, -1, -1, 47, -1, -1, 
+  -1, 51, -1, 53, -1, 55, -1, -1, -1, 59, 
+  -1, 61, -1, -1, -1, 65, 66, 67, 68, 69, 
+  70, 71, 72, 73, 74, 75, -1, -1, 78, 79, 
+  80, 81, 82, 83, -1, -1, -1, -1, 
 
-  12, 20, 11, 20, 12, 16, 20, 20, 84, 58, 
-  87, 54, 58, 20, 89, 12, 11, 20, 12, 12, 
-  72, 72, 22, 58, 20, 9, 11, 14, 20, 11, 
-  78, 12, 12, 11, 11, 5, 11, 20, 76, 12, 
-  11, 20, 11, 90, 12, 11, 20, 23, 58, 12, 
-  11, -1, 12, 12, 12, 12, 12, 12, 10, 9, 
-  9, -1, 6, 11, 11, -1, 31, 31, -1, 31, 
-  14, 36, 36, 35, 8, 2, 10, 31, 31, -1, 
-  31, 35, 35, -1, -1, 36, 11, 14, 31, 31, 
-  31, 31, 31, 6, 11, 31, 13, 36, 31, 41, 
-  36, 14, 43, 36, 47, 45, 25, 31, 31, 28, 
-  31, 34, 36, 31, 12, 36, 12, 31, 36, 33, 
-  31, 31, 33, 33, 31, 31, 33, 31, 34, 31, 
-  31, 33, 36, -1, 31, 36, 33, 31, 12, 33, 
-  12, 23, 24, 31, 31, 33, 33, 31, 31, 33, 
-  31, 20, 25, 20, 37, 28, 37, 55, 27, 55, 
-  27, 31, -1, 31, -1, 31, 36, 31, 31, 37, 
-  33, 37, 31, 7, 33, 39, 10, 31, 31, 33, 
-  33, 55, 31, 55, 33, 31, 31, 31, 31, 31, 
-  36, 36, 36, 36, 36, 11, -1, 13, 31, 31, 
-  42, 46, 48, 36, 36, -1, 31, -1, 31, 53, 
-  53, 36, 44, 36, 31, 38, -1, 31, 31, 36, 
-  53, 38, 36, 36, 31, 38, 40, 31, 53, 36, 
-  -1, -1, 36, -1, 38, -1, -1, -1, -1, -1, 
-  -1, -1, -1, -1, -1, -1, 53, -1, -1, -1, 
-  -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 
-  -1, -1, -1, -1, 11, -1, 13, -1, -1, -1, 
-  -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 
+  9, 84, 12, 87, 11, 76, 12, 20, 11, 11, 
+  72, 11, 89, 10, 9, 11, 58, 16, 5, 20, 
+  14, 58, 54, 9, 12, 72, 78, 20, 20, 11, 
+  90, 12, 11, 11, 11, 20, 12, 12, 11, 11, 
+  11, 58, 12, 23, 12, -1, 20, 58, 12, 12, 
+  -1, 20, 12, 20, 20, 12, 12, 22, 20, 20, 
+  12, 11, 20, 12, 11, 8, 6, 10, -1, 27, 
+  23, 24, 31, 11, 14, 13, 31, 36, 33, 6, 
+  31, 25, 33, 31, 28, 31, 31, 14, 36, 12, 
+  31, 36, 33, 39, 31, 31, 33, 31, 31, 31, 
+  31, 37, 31, 37, 37, 37, 31, 36, 20, 31, 
+  35, 31, 43, 33, 31, 27, 33, 31, 31, 41, 
+  33, 35, 7, 31, 31, 10, 31, 35, 31, 36, 
+  31, 36, 33, 31, 31, 25, 12, -1, 28, 36, 
+  12, 12, 45, 31, 31, 33, 33, 12, 31, 47, 
+  33, 31, 31, 33, 31, -1, 33, 36, 31, -1, 
+  -1, 31, 31, 36, 34, 34, -1, 31, 31, 33, 
+  31, 31, 33, 36, -1, 31, 36, 31, -1, 55, 
+  36, -1, 36, 55, 55, 11, 11, 13, 13, 31, 
+  55, 31, 31, 31, 36, -1, 36, 36, 36, 53, 
+  38, 31, 44, 42, 31, -1, 36, 31, 38, 36, 
+  31, 38, 36, 53, 38, 36, 31, 31, 31, 31, 
+  31, 36, 36, 36, 36, 36, -1, 40, -1, -1, 
+  -1, -1, 53, -1, 48, 46, -1, -1, 53, -1, 
+  -1, 53, 2, -1, -1, -1, -1, -1, -1, -1, 
+  -1, -1, -1, -1, 14, -1, -1, -1, -1, -1, 
+  -1, -1, -1, -1, -1, -1, 91, -1, -1, -1, 
   96, -1, -1, -1, -1, -1, -1, -1, -1, -1, 
   -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 
   -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 
   -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 
   -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 
   -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 
-  -1, -1, -1, -1, 91, -1, -1, -1, -1, -1, 
-  -1};
+  -1, -1, -1, -1, -1, -1, -1, -1};
 
diff --git a/src/declarative/qml/parser/javascriptgrammar_p.h b/src/declarative/qml/parser/javascriptgrammar_p.h
index 490acb2..c35c56e 100644
--- a/src/declarative/qml/parser/javascriptgrammar_p.h
+++ b/src/declarative/qml/parser/javascriptgrammar_p.h
@@ -147,15 +147,15 @@ public:
     T_XOR = 76,
     T_XOR_EQ = 77,
 
-    ACCEPT_STATE = 7,
+    ACCEPT_STATE = 519,
     RULE_COUNT = 296,
     STATE_COUNT = 520,
     TERMINAL_COUNT = 88,
     NON_TERMINAL_COUNT = 98,
 
     GOTO_INDEX_OFFSET = 520,
-    GOTO_INFO_OFFSET = 1629,
-    GOTO_CHECK_OFFSET = 1629
+    GOTO_INFO_OFFSET = 1638,
+    GOTO_CHECK_OFFSET = 1638
   };
 
   static const char  *const spell [];
diff --git a/src/declarative/qml/parser/javascriptparser.cpp b/src/declarative/qml/parser/javascriptparser.cpp
index 6221386..03bbc13 100644
--- a/src/declarative/qml/parser/javascriptparser.cpp
+++ b/src/declarative/qml/parser/javascriptparser.cpp
@@ -123,6 +123,7 @@ bool JavaScriptParser::parse(JavaScriptEnginePrivate *driver)
     first_token = last_token = 0;
 
     tos = -1;
+    program = 0;
 
     do {
         if (++tos == stack_size)
@@ -163,8 +164,9 @@ bool JavaScriptParser::parse(JavaScriptEnginePrivate *driver)
           switch (r) {
 
 case 0: {
-    sym(1).Node = makeAstNode<AST::UiProgram> (driver->nodePool(), sym(1).UiImportList,
+  program = makeAstNode<AST::UiProgram> (driver->nodePool(), sym(1).UiImportList,
         sym(2).UiObjectMemberList->finish());
+  sym(1).UiProgram = program;    
 } break;
 
 case 2: {
@@ -246,7 +248,7 @@ case 19: {
         sym(4).UiObjectMemberList->finish());
     node->colonToken = loc(2);
     node->lbracketToken = loc(3);
-    node->rbraceToken = loc(5);
+    node->rbracketToken = loc(5);
     sym(1).Node = node;
 }   break;
  case 20: 
@@ -1530,6 +1532,7 @@ case 293: {
                 yytoken = *tk;
                 yylval = 0;
                 yylloc = token_buffer[0].loc;
+		yylloc.length = 0;
 
                 first_token = &token_buffer[0];
                 last_token = &token_buffer[2];
@@ -1552,6 +1555,7 @@ case 293: {
                 yytoken = tk;
                 yylval = 0;
                 yylloc = token_buffer[0].loc;
+		yylloc.length = 0;
 
                 action = errorState;
                 goto _Lcheck_token;
diff --git a/src/declarative/qml/parser/javascriptparser_p.h b/src/declarative/qml/parser/javascriptparser_p.h
index c08a14a..e97abeb 100644
--- a/src/declarative/qml/parser/javascriptparser_p.h
+++ b/src/declarative/qml/parser/javascriptparser_p.h
@@ -143,7 +143,7 @@ public:
     bool parse(JavaScriptEnginePrivate *driver);
 
     JavaScript::AST::UiProgram *ast()
-    { return sym(1).UiProgram; }
+    { return program; }
 
     QList<DiagnosticMessage> diagnosticMessages() const
     { return diagnostic_messages; }
@@ -183,6 +183,8 @@ protected:
     int *state_stack;
     JavaScript::AST::SourceLocation *location_stack;
 
+    JavaScript::AST::UiProgram *program;
+
     // error recovery
     enum { TOKEN_BUFFER_SIZE = 3 };
 
-- 
cgit v0.12


From 33f770b892b2bf46d59c4841e252c85b09b9c4bf Mon Sep 17 00:00:00 2001
From: Martin Smith <msmith@trolltech.com>
Date: Wed, 29 Apr 2009 15:33:26 +0200
Subject: qdoc: Corrected some qdoc warnings.

---
 src/declarative/fx/qfxcomponentinstance.cpp |  5 ++--
 src/declarative/fx/qfxhighlightfilter.cpp   |  2 +-
 src/declarative/fx/qfxparticles.cpp         |  2 +-
 src/declarative/qml/qmlinfo.cpp             | 24 +++++++++---------
 src/declarative/util/qfxview.cpp            | 38 ++++++++++++++++++++++++++---
 tools/qdoc3/test/qt-inc.qdocconf            |  3 ++-
 6 files changed, 54 insertions(+), 20 deletions(-)

diff --git a/src/declarative/fx/qfxcomponentinstance.cpp b/src/declarative/fx/qfxcomponentinstance.cpp
index 951c25d..5343f7d 100644
--- a/src/declarative/fx/qfxcomponentinstance.cpp
+++ b/src/declarative/fx/qfxcomponentinstance.cpp
@@ -51,15 +51,14 @@ QML_DEFINE_TYPE(QFxComponentInstance,ComponentInstance);
 
 /*!
     \internal
-    \class QFxComponentInstance
-    \qmlclass ComponentInstance
+    \class QFxComponentInstance ComponentInstance
 
     \brief The QFxComponentInstance class provides a way to instantiate an item from a component.
  */
 
 /*!
     \qmlclass ComponentInstance QFxComponentInstance
-    \brief The ComponentInstance element allows you to instantiate an arbitrary component.
+    \brief The ComponentInstance element allows you to instantiate a \l{qml-component.html} {Component}.
 
     \code
     <Item>
diff --git a/src/declarative/fx/qfxhighlightfilter.cpp b/src/declarative/fx/qfxhighlightfilter.cpp
index ab0512c..70b50cd 100644
--- a/src/declarative/fx/qfxhighlightfilter.cpp
+++ b/src/declarative/fx/qfxhighlightfilter.cpp
@@ -119,7 +119,7 @@ QFxHighlightFilter::~QFxHighlightFilter()
 */
 
 /*!
-    \property QFxHighlightFilter::src
+    \property QFxHighlightFilter::source
     \brief the URL of the image to be used as the highlight.
 */
 QString QFxHighlightFilter::source() const
diff --git a/src/declarative/fx/qfxparticles.cpp b/src/declarative/fx/qfxparticles.cpp
index b6b4c85..16b3570 100644
--- a/src/declarative/fx/qfxparticles.cpp
+++ b/src/declarative/fx/qfxparticles.cpp
@@ -573,7 +573,7 @@ QFxParticles::~QFxParticles()
 */
 
 /*!
-    \property QFxParticles::src
+    \property QFxParticles::source
     \brief the URL of the particle image.
 */
 QString QFxParticles::source() const
diff --git a/src/declarative/qml/qmlinfo.cpp b/src/declarative/qml/qmlinfo.cpp
index a2b304f..65a4298 100644
--- a/src/declarative/qml/qmlinfo.cpp
+++ b/src/declarative/qml/qmlinfo.cpp
@@ -47,12 +47,14 @@ QT_BEGIN_NAMESPACE
     \class QmlInfo
     \brief The QmlInfo class prints warnings messages that include the file and line number for QML types.
 
-    When QML types display warning messages, it improves tracibility if they include the
-    QML file and line number on which the particular instance was instantiated.  
+    When QML types display warning messages, it improves tracibility
+    if they include the QML file and line number on which the
+    particular instance was instantiated.
     
-    QmlInfo statements work just like regular Qt qDebug() statements.  To include the file
-    and line number, an object must be passed.  If the file and line number is not available
-    for that instance (either it was not instantiated by the QML engine or location 
+    QmlInfo statements work just like regular Qt qDebug() statements.
+    To include the file and line number, an object must be passed.  If
+    the file and line number is not available for that instance
+    (either it was not instantiated by the QML engine or location
     information is disabled), "unknown location" will be used instead.
 
     For example, 
@@ -69,7 +71,8 @@ QT_BEGIN_NAMESPACE
 */
 
 /*!
-    Construct a QmlInfo, using \a object for file and line number information.
+    Construct a QmlInfo, using \a object for file and line number
+    information.
 */
 QmlInfo::QmlInfo(QObject *object)
 : QDebug(QtWarningMsg)
@@ -81,17 +84,16 @@ QmlInfo::QmlInfo(QObject *object)
 }
 
 /*!
-    \internal
+  The destructor does nothing special.
 */
 QmlInfo::~QmlInfo()
 {
 }
 
 /*!
-    \fn QmlInfo qmlInfo(QObject *me)
-    \internal
-
-    XXX - how do we document these?
+  \relates QmlInfo
+  \fn QmlInfo qmlInfo(QObject *me)
+  Constructs an instance of QmlInfo from \a me and returns it.
 */
 
 QT_END_NAMESPACE
diff --git a/src/declarative/util/qfxview.cpp b/src/declarative/util/qfxview.cpp
index 1e9d5a4..e285890 100644
--- a/src/declarative/util/qfxview.cpp
+++ b/src/declarative/util/qfxview.cpp
@@ -107,10 +107,10 @@ public:
     \class QFxView
     \brief The QFxView class provides a widget for displaying a Qt Declarative user interface.
 
-    QFxView currently provides a minimal interface for displaying Qml files, and
-    connecting between QML and C++ Qt objects.
+    QFxView currently provides a minimal interface for displaying QML
+    files, and connecting between QML and C++ Qt objects.
 
-    Typcial usage looks something like this:
+    Typcial usage:
     \code
     ...
     QFxView *view = new QFxView(this);
@@ -129,12 +129,24 @@ public:
     \endcode
 */
 
+/*!
+  \fn QFxView::QFxView(QWidget *parent)
+  
+  Constructs a QFxView with the given \a parent.
+*/
 QFxView::QFxView(QWidget *parent)
 : QSimpleCanvas(parent), d(new QFxViewPrivate(this))
 {
     d->init();
 }
 
+/*!
+  \fn QFxView::QFxView(QSimpleCanvas::CanvasMode mode, QWidget *parent)
+  
+  Constructs a QFxView with the given \a parent. The canvas
+  \a mode can be QSimpleCanvas::GraphicsView or
+  QSimpleCanvas::SimpleCanvas.
+*/
 QFxView::QFxView(QSimpleCanvas::CanvasMode mode, QWidget *parent)
 : QSimpleCanvas(mode, parent), d(new QFxViewPrivate(this))
 {
@@ -157,29 +169,49 @@ void QFxViewPrivate::init()
     QFontDatabase database;
 }
 
+/*!
+  The destructor clears the instance and deletes the internal
+  representation.
+
+  \sa clearItems()
+ */
 QFxView::~QFxView()
 {
     clearItems();
     delete d; d = 0;
 }
 
+/*!
+  Sets the source to the \a url. The XML string is set to
+  empty.
+ */
 void QFxView::setUrl(const QUrl& url)
 {
     d->source = url;
     d->xml = QString();
 }
 
+/*!
+  Sets the source to the URL from the \a filename, and sets
+  the XML string to \a xml.
+ */
 void QFxView::setXml(const QString &xml, const QString &filename)
 {
     d->source = QUrl::fromLocalFile(filename);
     d->xml = xml;
 }
 
+/*!
+  Returns the XML string.
+ */
 QString QFxView::xml() const
 {
     return d->xml;
 }
 
+/*!
+  Returns a pointer to the QmlEngine.
+ */
 QmlEngine* QFxView::engine()
 {
     return &d->engine;
diff --git a/tools/qdoc3/test/qt-inc.qdocconf b/tools/qdoc3/test/qt-inc.qdocconf
index d6cb0e6..decdc15 100644
--- a/tools/qdoc3/test/qt-inc.qdocconf
+++ b/tools/qdoc3/test/qt-inc.qdocconf
@@ -99,7 +99,8 @@ Cpp.ignoretokens        = QAXFACTORY_EXPORT \
                           Q_TESTLIB_EXPORT \
                           Q_TYPENAME \
                           Q_XML_EXPORT \
-                          QDBUS_EXPORT
+                          QDBUS_EXPORT \
+                          Q_DECLARATIVE_EXPORT
 Cpp.ignoredirectives    = Q_DECLARE_HANDLE \
                           Q_DECLARE_INTERFACE \
                           Q_DECLARE_METATYPE \
-- 
cgit v0.12


From 7a60538c0c12245e8b542a477bcaabac0b9de345 Mon Sep 17 00:00:00 2001
From: Ian Walters <ian.walters@nokia.com>
Date: Thu, 30 Apr 2009 09:18:09 +1000
Subject: documentation snippets, some qmlconv cleanup

Added snippet comments for qdoc, also qmlconv leaves some
errors.  ',' where they are not supposed to be,
] and indenting in the wrong places, lack of " around
enum values.
---
 doc/src/tutorials/declarative.qdoc                 | 271 +++++++++------------
 .../1_Drawing_and_Animation/4/RemoveButton.qml     |   2 -
 .../1_Drawing_and_Animation/5/RemoveButton.qml     |   2 -
 .../tutorials/contacts/2_Reuse/1/ContactField.qml  |   2 +
 .../tutorials/contacts/2_Reuse/1/RemoveButton.qml  |   4 +-
 .../tutorials/contacts/2_Reuse/1a/ContactField.qml |   2 +
 .../tutorials/contacts/2_Reuse/1a/RemoveButton.qml |   4 +-
 .../tutorials/contacts/2_Reuse/2/ContactField.qml  |   4 +-
 .../tutorials/contacts/2_Reuse/2/RemoveButton.qml  |   6 +-
 .../tutorials/contacts/2_Reuse/2_Reuse.qml         |  11 +-
 .../tutorials/contacts/2_Reuse/3/ContactField.qml  |   4 +-
 .../tutorials/contacts/2_Reuse/3/FieldText.qml     |   6 +-
 .../tutorials/contacts/2_Reuse/3/RemoveButton.qml  |   4 +-
 .../tutorials/contacts/2_Reuse/4/Contact.qml       |   2 +
 .../tutorials/contacts/2_Reuse/4/ContactField.qml  |   2 +-
 .../tutorials/contacts/2_Reuse/4/FieldText.qml     |   2 +-
 .../tutorials/contacts/2_Reuse/4/RemoveButton.qml  |   6 +-
 .../contacts/3_Collections/1/ContactView.qml       |  28 ++-
 .../contacts/3_Collections/2/ContactView.qml       |  72 +++---
 .../contacts/3_Collections/3/ContactView.qml       |  66 ++---
 .../contacts/3_Collections/lib/ContactField.qml    |   2 +-
 .../contacts/3_Collections/lib/FieldText.qml       |   2 +-
 .../contacts/3_Collections/lib/RemoveButton.qml    |   4 +-
 23 files changed, 248 insertions(+), 260 deletions(-)

diff --git a/doc/src/tutorials/declarative.qdoc b/doc/src/tutorials/declarative.qdoc
index bbe2ebd..3724b10 100644
--- a/doc/src/tutorials/declarative.qdoc
+++ b/doc/src/tutorials/declarative.qdoc
@@ -371,21 +371,24 @@
     \section1 Loading QML Components
 
     Reusing the RemoveButton itself is very simple.  When parsing a QML file
-    if a Component is refered to that isn't already in the system, Qt
+    if a Component is referred to that isn't already in the system, Qt
     will try to load it from a file of the same name with the ".qml" extension.
 
-    \code
-    <Item id="contactField"
-        clip="true"
-        width="230"
-        height="30">
-        <RemoveButton id="removeButton"
-            anchors.right="{parent.right}"
-            anchors.top="{parent.top}" anchors.bottom="{parent.bottom}"/>
-    \endcode
+    \snippet declarative/tutorials/contacts/2_Reuse/1/ContactField.qml load
 
     The above QML code will attempt to load the RemoveButton component from
-    a file called "RemoveButton.qml".  All the properties of the button are
+    a file with the name "RemoveButton.qml" from the following search paths.
+
+    \list
+    \o Any imported directories. These are listed at the start of the file using
+        \c { import "path" }.
+    \o The run directory
+    \o The run directory + "/qml"
+    \o the directory of the QML code file
+    \o the directory of the QML code file + "/qml"
+    \endlist.
+
+    All the properties of the button are
     accessible and can be overridden from defaults.  The loaded component
     can also refer to elements further up in the tree, so that code within
     RemoveButton.qml could refer to the contactField component.  However only
@@ -396,44 +399,19 @@
 
     \section1 Properties and Signals
 
-    \code
-    <Rect id="removeButton"
-        width="30" height="30"
-        color="red"
-        radius="5">
-        <properties>
-            <Property name="expandedWidth" value="230"/>
-        </properties>
-        <signals>
-            <Signal name="confirmed"/>
-        </signals>
-    \endcode
-
-    \omit
-    Need reference for more information on declaring properties and signals.
-    \endomit
+    \snippet declarative/tutorials/contacts/2_Reuse/2/RemoveButton.qml define properties and signals
 
     These properties and signals are accessed from the contact field the same
     way standard system components are accessed.
 
-    \code
-    <Item id="contactField"
-        clip="true"
-        width="230"
-        height="30">
-        <RemoveButton id="removeButton"
-            anchors.right="{parent.right}"
-            anchors.top="{parent.top}" anchors.bottom="{parent.bottom}"
-            expandedWidth="{contactField.width}"
-            onConfirmed="print('Clear field text'); fieldText.text=''"/>
-    \endcode
+    \snippet declarative/tutorials/contacts/2_Reuse/2/RemoveButton.qml use properties and signals
 
     Now when the remove button is expanded, it will expand to the width of the
     contact field.  Also when the user confirms the remove action, the
     text section of the contact field will be cleared.  When creating a
     component that does have children out of its own
     bounds its important to consider whether the item should be clipped,
-    which is done above with \c{clip="true"}.
+    which is done above with \c{clip: true}.
 
     \section1 States
 
@@ -451,44 +429,7 @@
     contact field itself to move the remove button and the field icon out of
     view.
 
-    \code
-    <Item id="contactField"
-        clip="true"
-        width="230"
-        height="30">
-        <properties>
-            <Property name="label" value="Name"/>
-            <Property name="icon" value="../shared/pics/phone.png"/>
-            <Property name="value"/>
-        </properties>
-        <RemoveButton id="removeButton"
-            anchors.right="{parent.right}"
-            anchors.top="{parent.top}" anchors.bottom="{parent.bottom}"
-            expandedWidth="{contactField.width}"
-            onConfirmed="print('Clear field text'); fieldText.text=''"/>
-        <FieldText id="fieldText"
-            width="{contactField.width-70}"
-            anchors.right="{removeButton.left}" anchors.rightMargin="5"
-            anchors.verticalCenter="{parent.verticalCenter}"
-            label="{contactField.label}"
-            text="{contactField.value}"/>
-        <Image
-            anchors.right="{fieldText.left}" anchors.rightMargin="5"
-            anchors.verticalCenter="{parent.verticalCenter}"
-            src="{contactField.icon}"/>
-        <states>
-            <State name="editingText" when="{fieldText.state == 'editing'}">
-                <SetProperty target="{removeButton.anchors}" property="rightMargin" value="-35"/>
-                <SetProperty target="{fieldText}" property="width" value="{contactField.width}"/>
-            </State>
-        </states>
-        <transitions>
-            <Transition fromState='' toState="*" reversible="true">
-                <NumericAnimation properties="width,rightMargin" duration="200"/>
-            </Transition>
-        </transitions>
-    </Item> 
-    \endcode
+    \snippet declarative/tutorials/contacts/2_Reuse/3/RemoveButton.qml all
 
     Apart from accessing the fieldText.state, the above code also uses the when
     attribute of its own editingText state.  This is an alternative to using
@@ -497,22 +438,7 @@
     that state.  In the FieldText element a similar approach is used to fade
     out the label of the FieldText when the user enters some text of their own.
 
-    \code
-    <Text id="textLabel"
-        x="5" width="{parent.width-10}"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        hAlign="AlignHCenter"
-        color="#505050"
-        font.italic="true"
-        text="{fieldText.label}"
-        opacity="{textEdit.text == '' ? 1 : 0}">
-        <opacity>
-            <Behaviour>
-                <NumericAnimation property="opacity" duration="250"/>
-            </Behaviour>
-        </opacity>
-    </Text>
-   \endcode
+    \snippet declarative/tutorials/contacts/3_Reuse/2/FieldText.qml behavior
 
     fieldText is the enclosing component and textEdit is a TextEdit element
     provided by Qt.  In the QML code above, the opacity of the textLabel is
@@ -526,17 +452,7 @@
     The fieldText element also handles changes to the text using the
     onValueChanged attribute when specifying properties.
 
-    \code
-    <Rect id="fieldText"
-        height="30"
-        radius="5"
-        color="white">
-        <properties>
-            <Property
-                name="text"
-                value=""
-                onValueChanged="reset()"/>
-    \endcode
+    \snippet declarative/tutorials/contacts/2_Reuse/3/FieldText.qml value change
 
     Because the user needs to be able to edit text in the text edit, it
     shouldn't be simply bound to the text property of the FieldText component.
@@ -572,33 +488,11 @@
     In the tutorial we do this with a property of our top level component
     to handle whether we are in this state or not.
 
-    \code
-    <Item id="contactDetails"
-        width="230"
-        height="{layout.height}">
-        <properties>
-            <Property name="mouseGrabbed" value="false"/>
-        </properties>
-    \endcode
+    \snippet declarative/tutorials/contacts/2_Reuse/4/Contact.qml grab property
 
     And in the code where we want to check or avoid allowing mouse interaction.
 
-    \code
-    <Script>
-        function toggle() {
-            print('removeButton.toggle()');
-            if (removeButton.state == 'opened') {
-                removeButton.state = '';
-                contactDetails.mouseGrabbed=false;
-            } else {
-                if (!contactDetails.mouseGrabbed) {
-                    removeButton.state = 'opened';
-                    contactDetails.mouseGrabbed=true;
-                }
-            }
-        }
-    </Script>
-    \endcode
+    \snippet declarative/tutorials/contacts/2_Reuse/4/RemoveButton.qml grab
 
     Handling Key and Mouse focus in QML is quite likely to change before
     the Qt 4.6 release.
@@ -631,15 +525,7 @@
     data model.  This can be declared in the resources section of
     the parent item.
 
-    \code
-    <SqlConnection id="contactDatabase"
-        name="qmlConnection"
-        driver="QSQLITE" databaseName="../../shared/contacts.sqlite"/>
-    <SqlQuery id="contactList"
-        connection="{contactDatabase}">
-        <query>SELECT recid, label, email, phone FROM contacts ORDER BY label, recid</query>
-    </SqlQuery>
-    \endcode
+    \snippet declarative/tutorials/contacts/3_Collections/1/ContactView.qml model
 
     The SqlConnection component describes how to connect to the database in
     much the same ways as the QSqlDatabase::addDatabase() function is used.
@@ -653,18 +539,103 @@
     and orders the results by the label of the contact first, and then by 
     the recid for any contacts with equivalent labels.
 
-    To display the data retrieved from the table, a delegate is needed.  This
-    is also declared in the resources section of the parent item.
+    The ListView component is suitable for displaying models, and is declared
+    much like any other QML component.  However since it might have any number
+    of child items in the list, it has a property that defines how to construct
+    components for items when displayed.
 
-    \code
-    <Component id="contactDelegate">
-        <Text
-            x="45" y="12"
-            width="{contactListView.width-45}"
-            height="30"
-            color="black"
-            font.bold="true"
-            text="{model.label}"/>
-    </Component>
-    \endcode
+    \snippet declarative/tutorials/contacts/3_Collections/1/ContactView.qml delegate
+
+    Unlike a child element, this describes a template on how to build the component
+    for each element, much in the same way that components are loaded from
+    files such as RemoveButton.qml.
+
+    The entire view component will look like:
+
+    \snippet declarative/tutorials/contacts/3_Collections/1/ContactView.qml view
+
+    This gives us a list of contacts that the user can flick through.
+
+    .image.
+
+    \section1 Animating Delegates
+
+    The next step is to allow the user to click on a contact to edit the
+    contact.  We will take advantage of QML to open a Contact component
+    in the list rather than as a new dialog or view.  This is very
+    similar to how the contents of the FieldText and RemoveButton components
+    are swapped in and out.
+
+    \snippet declarative/tutorials/contacts/3_Collections/2/ContactView.qml components
+
+    The first step is to have two children of our delegate component that can
+    be swapped between.  The plain Text component and the Contact component built
+    in the previous chapters.  We also add a MouseRegion that can be clicked upon
+    to change the state of the delegate component.
+
+    \snippet declarative/tutorials/contacts/3_Collections/2/ContactView.qml states
+
+    This defines the open state of the delegate.  It changes the height of the delegate
+    component to that of the whole list view, pushing the other items off each end of
+    the list.  It sets the lists views scroll yPosition of the ListView to the
+    y value of the delegate so that the top of the delegate matches the top of the list view.
+    The next step is to lock the list view.  This prevents  the user being able to flick
+    the list view, meaning while in this state the delegate will continue to
+    fill the ListView's visible area.  The final to properties that are set should
+    be familiar from previous chapters, setting the opacity of the items such
+    that the new item is visible and the old item hidden.
+
+    We then add a transition so that this becomes animated:
+
+    \snippet declarative/tutorials/contacts/3_Collections/2/ContactView.qml transition
+
+    This allows the user to click on an item to enter the open state.
+
+    .image.
+
+    Elsewhere on our contact view we add a button so that the user can leave the
+    detailed view of the contact.
+    \snippet declarative/tutorials/contacts/3_Collections/2/ContactView.qml button
+
+    And connect it's clicked value to some script to set the state of the delegate
+    back to its default state.
+
+    \snippet declarative/tutorials/contacts/3_Collections/2/ContactView.qml connection
+
+    Something worth noting at this point is that every delegate created has this connection.
+    It is important to check whether the delegate is the one in the open state, and
+    taking some effort to ensure only one is, before acting on the signal from the button.
+    
+    \section1 Performance Considerations
+
+    We have now made a contact application that can view a list of contacts, open one,
+    and close it again.  Its now time to take a moment and consider the implications
+    of a list view delegate.  It is created for each and every item in the list,
+    and while the list cleans up after itself and only has delegate components constructed
+    for visible items and any single point of animation, the list can scroll very quickly.
+    This means potentially thousands of delegate components will be constructed and
+    destroyed when the user is flipping through the list.
+
+    Its important then to try and minimize the complexity of the delegate.  This
+    can be done by delaying the loading of the component.  By using the qml property
+    of the Item component, we can delay building the Contact.qml item until the user
+    attempts to open the list.
+
+    \snippet declarative/tutorials/contacts/3_Collections/3/ContactView.qml setting qml
+
+    Each item has a qml property that represents the filename for the contents of
+    a special qmlItem child of the Item.  By setting the qml property of the Details
+    component on clicking the mouse region, the more complex component isn't loaded
+    until needed.  The down side about this though is the properties of Contact
+    cannot be set until the item is loaded.  This requires using the Bind
+    properties of an item.
+
+    \snippet declarative/tutorials/contacts/3_Collections/3/ContactView.qml binding
+
+    The Bind properties bind a value to another component, however the target of
+    this binding can be changed, unlike when setting the properties of a component
+    directly.  This means that when the qml property is set, it will change the
+    qmlItem property of the Details component.  This in turn triggers the Bind
+    elements to set the required properties of the qmlItem, which is now
+    an instance of the Contact component.
 */
diff --git a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/4/RemoveButton.qml b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/4/RemoveButton.qml
index 632ade9..ec768da 100644
--- a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/4/RemoveButton.qml
+++ b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/4/RemoveButton.qml
@@ -7,9 +7,7 @@ Rect {
 //! [script]
     resources: [
         Script {
-
             function toggle() {
-                print('removeButton.toggle()');
                 if (removeButton.state == 'opened') {
                     removeButton.state = '';
                 } else {
diff --git a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/5/RemoveButton.qml b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/5/RemoveButton.qml
index a56193d..b2fa0ca 100644
--- a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/5/RemoveButton.qml
+++ b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/5/RemoveButton.qml
@@ -6,9 +6,7 @@ Rect {
     radius: 5
     resources: [
         Script {
-
             function toggle() {
-                print('removeButton.toggle()');
                 if (removeButton.state == 'opened') {
                     removeButton.state = '';
                 } else {
diff --git a/examples/declarative/tutorials/contacts/2_Reuse/1/ContactField.qml b/examples/declarative/tutorials/contacts/2_Reuse/1/ContactField.qml
index 1c50110..078f62e 100644
--- a/examples/declarative/tutorials/contacts/2_Reuse/1/ContactField.qml
+++ b/examples/declarative/tutorials/contacts/2_Reuse/1/ContactField.qml
@@ -1,3 +1,4 @@
+//! [load]
 Item {
     id: contactField
     clip: true
@@ -9,6 +10,7 @@ Item {
         anchors.top: parent.top
         anchors.bottom: parent.bottom
     }
+//! [load]
     Text {
         id: fieldText
         width: contactField.width-80
diff --git a/examples/declarative/tutorials/contacts/2_Reuse/1/RemoveButton.qml b/examples/declarative/tutorials/contacts/2_Reuse/1/RemoveButton.qml
index b3ac12d..12329ed 100644
--- a/examples/declarative/tutorials/contacts/2_Reuse/1/RemoveButton.qml
+++ b/examples/declarative/tutorials/contacts/2_Reuse/1/RemoveButton.qml
@@ -6,9 +6,7 @@ Rect {
     radius: 5
     resources: [
         Script {
-
             function toggle() {
-                print('removeButton.toggle()');
                 if (removeButton.state == 'opened') {
                     removeButton.state = '';
                 } else {
@@ -69,7 +67,7 @@ Rect {
         anchors.rightMargin: 4
         font.bold: true
         color: "white"
-        hAlign: AlignHCenter
+        hAlign: "AlignHCenter"
         text: "Remove"
         opacity: 0
     }
diff --git a/examples/declarative/tutorials/contacts/2_Reuse/1a/ContactField.qml b/examples/declarative/tutorials/contacts/2_Reuse/1a/ContactField.qml
index 07ab55c..55229de 100644
--- a/examples/declarative/tutorials/contacts/2_Reuse/1a/ContactField.qml
+++ b/examples/declarative/tutorials/contacts/2_Reuse/1a/ContactField.qml
@@ -1,3 +1,4 @@
+//! [load]
 Item {
     id: contactField
     clip: true
@@ -12,6 +13,7 @@ Item {
         anchors.top: parent.top
         anchors.bottom: parent.bottom
     }
+//! [load]
     Text {
         id: fieldText
         width: contactField.width-80
diff --git a/examples/declarative/tutorials/contacts/2_Reuse/1a/RemoveButton.qml b/examples/declarative/tutorials/contacts/2_Reuse/1a/RemoveButton.qml
index b3ac12d..12329ed 100644
--- a/examples/declarative/tutorials/contacts/2_Reuse/1a/RemoveButton.qml
+++ b/examples/declarative/tutorials/contacts/2_Reuse/1a/RemoveButton.qml
@@ -6,9 +6,7 @@ Rect {
     radius: 5
     resources: [
         Script {
-
             function toggle() {
-                print('removeButton.toggle()');
                 if (removeButton.state == 'opened') {
                     removeButton.state = '';
                 } else {
@@ -69,7 +67,7 @@ Rect {
         anchors.rightMargin: 4
         font.bold: true
         color: "white"
-        hAlign: AlignHCenter
+        hAlign: "AlignHCenter"
         text: "Remove"
         opacity: 0
     }
diff --git a/examples/declarative/tutorials/contacts/2_Reuse/2/ContactField.qml b/examples/declarative/tutorials/contacts/2_Reuse/2/ContactField.qml
index badf7a4..df4b46f 100644
--- a/examples/declarative/tutorials/contacts/2_Reuse/2/ContactField.qml
+++ b/examples/declarative/tutorials/contacts/2_Reuse/2/ContactField.qml
@@ -3,14 +3,16 @@ Item {
     clip: true
     width: 230
     height: 30
+//! [use properties and signals]
     RemoveButton {
         id: removeButton
         anchors.right: parent.right
         anchors.top: parent.top
         anchors.bottom: parent.bottom
         expandedWidth: contactField.width
-        onConfirmed: { print('Clear field text'); fieldText.text='' }
+        onConfirmed: { fieldText.text='' }
     }
+//! [use properties and signals]
     Text {
         id: fieldText
         width: contactField.width-80
diff --git a/examples/declarative/tutorials/contacts/2_Reuse/2/RemoveButton.qml b/examples/declarative/tutorials/contacts/2_Reuse/2/RemoveButton.qml
index e6c7c82..642a33b 100644
--- a/examples/declarative/tutorials/contacts/2_Reuse/2/RemoveButton.qml
+++ b/examples/declarative/tutorials/contacts/2_Reuse/2/RemoveButton.qml
@@ -1,3 +1,4 @@
+//! [define properties and signals]
 Rect {
     id: removeButton
     width: 30
@@ -11,11 +12,10 @@ Rect {
     signals: Signal {
         name: "confirmed"
     }
+//! [define properties and signals]
     resources: [
         Script {
-
             function toggle() {
-                print('removeButton.toggle()');
                 if (removeButton.state == 'opened') {
                     removeButton.state = '';
                 } else {
@@ -76,7 +76,7 @@ Rect {
         anchors.rightMargin: 4
         font.bold: true
         color: "white"
-        hAlign: AlignHCenter
+        hAlign: "AlignHCenter"
         text: "Remove"
         opacity: 0
     }
diff --git a/examples/declarative/tutorials/contacts/2_Reuse/2_Reuse.qml b/examples/declarative/tutorials/contacts/2_Reuse/2_Reuse.qml
index 540e900..4d95424 100644
--- a/examples/declarative/tutorials/contacts/2_Reuse/2_Reuse.qml
+++ b/examples/declarative/tutorials/contacts/2_Reuse/2_Reuse.qml
@@ -21,17 +21,20 @@ Rect {
             label: "Loading: added path"
         }
         GroupBox {
-            contents: "1c/ContactField.qml"
-            label: "Loading: added namespace"
-        }
-        GroupBox {
             contents: "2/ContactField.qml"
             label: "Using properties"
         }
         GroupBox {
+            id: prev
             contents: "3/ContactField.qml"
             label: "Defining signals"
         }
+        Rect {
+            color: "black"
+            opacity: 0.3
+            width: prev.width
+            height: prev.height
+        }
         GroupBox {
             contents: "3/Contact.qml"
             label: "Multiple Items"
diff --git a/examples/declarative/tutorials/contacts/2_Reuse/3/ContactField.qml b/examples/declarative/tutorials/contacts/2_Reuse/3/ContactField.qml
index 26bfca5..fa4f997 100644
--- a/examples/declarative/tutorials/contacts/2_Reuse/3/ContactField.qml
+++ b/examples/declarative/tutorials/contacts/2_Reuse/3/ContactField.qml
@@ -1,3 +1,4 @@
+//! [all]
 Item {
     id: contactField
     clip: true
@@ -20,7 +21,7 @@ Item {
         anchors.top: parent.top
         anchors.bottom: parent.bottom
         expandedWidth: contactField.width
-        onConfirmed: { print('Clear field text'); fieldText.text='' }
+        onConfirmed: { fieldText.text='' }
     }
     FieldText {
         id: fieldText
@@ -65,3 +66,4 @@ Item {
         }
     ]
 }
+//! [all]
diff --git a/examples/declarative/tutorials/contacts/2_Reuse/3/FieldText.qml b/examples/declarative/tutorials/contacts/2_Reuse/3/FieldText.qml
index 7da13e7..7e4a1ce 100644
--- a/examples/declarative/tutorials/contacts/2_Reuse/3/FieldText.qml
+++ b/examples/declarative/tutorials/contacts/2_Reuse/3/FieldText.qml
@@ -1,3 +1,4 @@
+//! [value change]
 Rect {
     id: fieldText
     height: 30
@@ -8,6 +9,7 @@ Rect {
         value: ""
         onValueChanged: { reset() }
     }
+//! [value change]
     properties: Property {
         name: "label"
         value: ""
@@ -65,12 +67,13 @@ Rect {
         readOnly: true
         wrap: false
     }
+//! [behavior]
     Text {
         id: textLabel
         x: 5
         width: parent.width-10
         anchors.verticalCenter: parent.verticalCenter
-        hAlign: AlignHCenter
+        hAlign: "AlignHCenter"
         color: "#505050"
         font.italic: true
         text: fieldText.label
@@ -82,6 +85,7 @@ Rect {
             }
         }
     }
+//! [behavior]
     MouseRegion {
         anchors.fill: cancelIcon
         onClicked: { reset() }
diff --git a/examples/declarative/tutorials/contacts/2_Reuse/3/RemoveButton.qml b/examples/declarative/tutorials/contacts/2_Reuse/3/RemoveButton.qml
index e6c7c82..a222734 100644
--- a/examples/declarative/tutorials/contacts/2_Reuse/3/RemoveButton.qml
+++ b/examples/declarative/tutorials/contacts/2_Reuse/3/RemoveButton.qml
@@ -13,9 +13,7 @@ Rect {
     }
     resources: [
         Script {
-
             function toggle() {
-                print('removeButton.toggle()');
                 if (removeButton.state == 'opened') {
                     removeButton.state = '';
                 } else {
@@ -76,7 +74,7 @@ Rect {
         anchors.rightMargin: 4
         font.bold: true
         color: "white"
-        hAlign: AlignHCenter
+        hAlign: "AlignHCenter"
         text: "Remove"
         opacity: 0
     }
diff --git a/examples/declarative/tutorials/contacts/2_Reuse/4/Contact.qml b/examples/declarative/tutorials/contacts/2_Reuse/4/Contact.qml
index 626f99d..0587a51 100644
--- a/examples/declarative/tutorials/contacts/2_Reuse/4/Contact.qml
+++ b/examples/declarative/tutorials/contacts/2_Reuse/4/Contact.qml
@@ -1,3 +1,4 @@
+//! [grab property]
 Item {
     id: contactDetails
     width: 230
@@ -6,6 +7,7 @@ Item {
         name: "mouseGrabbed"
         value: false
     }
+//! [grab property]
     properties: Property {
         name: "contactid"
         value: ""
diff --git a/examples/declarative/tutorials/contacts/2_Reuse/4/ContactField.qml b/examples/declarative/tutorials/contacts/2_Reuse/4/ContactField.qml
index acc40e2..61de59d 100644
--- a/examples/declarative/tutorials/contacts/2_Reuse/4/ContactField.qml
+++ b/examples/declarative/tutorials/contacts/2_Reuse/4/ContactField.qml
@@ -17,7 +17,7 @@ Item {
         anchors.top: parent.top
         anchors.bottom: parent.bottom
         expandedWidth: contactField.width
-        onConfirmed: { print('Clear field text'); fieldText.text='' }
+        onConfirmed: { fieldText.text='' }
     }
     FieldText {
         id: fieldText
diff --git a/examples/declarative/tutorials/contacts/2_Reuse/4/FieldText.qml b/examples/declarative/tutorials/contacts/2_Reuse/4/FieldText.qml
index 3d92827..da5e6b9 100644
--- a/examples/declarative/tutorials/contacts/2_Reuse/4/FieldText.qml
+++ b/examples/declarative/tutorials/contacts/2_Reuse/4/FieldText.qml
@@ -75,7 +75,7 @@ Rect {
         x: 5
         width: parent.width-10
         anchors.verticalCenter: parent.verticalCenter
-        hAlign: AlignHCenter
+        hAlign: "AlignHCenter"
         color: "#505050"
         font.italic: true
         text: fieldText.label
diff --git a/examples/declarative/tutorials/contacts/2_Reuse/4/RemoveButton.qml b/examples/declarative/tutorials/contacts/2_Reuse/4/RemoveButton.qml
index 1e3b5ad..bc30ee6 100644
--- a/examples/declarative/tutorials/contacts/2_Reuse/4/RemoveButton.qml
+++ b/examples/declarative/tutorials/contacts/2_Reuse/4/RemoveButton.qml
@@ -12,10 +12,9 @@ Rect {
         name: "confirmed"
     }
     resources: [
+//! [grab]
         Script {
-
             function toggle() {
-                print('removeButton.toggle()');
                 if (removeButton.state == 'opened') {
                     removeButton.state = '';
                     contactDetails.mouseGrabbed=false;
@@ -28,6 +27,7 @@ Rect {
             }
         
         }
+//! [grab]
     ]
     Image {
         id: trashIcon
@@ -80,7 +80,7 @@ Rect {
         anchors.rightMargin: 4
         font.bold: true
         color: "white"
-        hAlign: AlignHCenter
+        hAlign: "AlignHCenter"
         text: "Remove"
         opacity: 0
     }
diff --git a/examples/declarative/tutorials/contacts/3_Collections/1/ContactView.qml b/examples/declarative/tutorials/contacts/3_Collections/1/ContactView.qml
index 8c02b48..ce338e2 100644
--- a/examples/declarative/tutorials/contacts/3_Collections/1/ContactView.qml
+++ b/examples/declarative/tutorials/contacts/3_Collections/1/ContactView.qml
@@ -8,6 +8,7 @@ Item {
         value: false
     }
     resources: [
+//! [model]
         SqlConnection {
             id: contactDatabase
             name: "qmlConnection"
@@ -18,9 +19,18 @@ Item {
             id: contactList
             connection: contactDatabase
             query: "SELECT recid, label, email, phone FROM contacts ORDER BY label, recid"
-        },
-        Component {
-            id: contactDelegate
+        }
+//! [model]
+    ]
+//! [view]
+    ListView {
+        id: contactListView
+        anchors.fill: parent
+        clip: true
+        model: contactList
+        focus: true
+//! [delegate]
+        delegate: [
             Text {
                 x: 45
                 y: 12
@@ -30,14 +40,8 @@ Item {
                 font.bold: true
                 text: model.label
             }
-        }
-    ]
-    ListView {
-        id: contactListView
-        anchors.fill: parent
-        clip: true
-        model: contactList
-        delegate: contactDelegate
-        focus: true
+        ]
+//! [delegate]
     }
+//! [view]
 }
diff --git a/examples/declarative/tutorials/contacts/3_Collections/2/ContactView.qml b/examples/declarative/tutorials/contacts/3_Collections/2/ContactView.qml
index 88fc121..b6b3c31 100644
--- a/examples/declarative/tutorials/contacts/3_Collections/2/ContactView.qml
+++ b/examples/declarative/tutorials/contacts/3_Collections/2/ContactView.qml
@@ -17,10 +17,31 @@ Item {
         SqlQuery {
             id: contactList
             connection: contactDatabase
-            query: "SELECT recid AS contactid, label, email, phone FROM contacts ORDER BY label, recid"
-        },
-        Component {
-            id: contactDelegate
+            query: "SELECT recid, label, email, phone FROM contacts ORDER BY label, recid"
+        }
+    ]
+//! [button]
+    Button {
+        id: cancelEditButton
+        anchors.top: parent.top
+        anchors.topMargin: 5
+        anchors.right: parent.right
+        anchors.rightMargin: 5
+        icon: "../../shared/pics/cancel.png"
+        opacity: mouseGrabbed ? 0 : 1
+    }
+//! [button]
+    ListView {
+        id: contactListView
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.top: cancelEditButton.bottom
+        anchors.bottom: parent.bottom
+        clip: true
+        model: contactList
+        focus: true
+        delegate: [
+//! [components]
             Item {
                 id: wrapper
                 x: 0
@@ -31,9 +52,9 @@ Item {
                     x: 45
                     y: 12
                     width: parent.width-45
-                    text: model.label
                     color: "black"
                     font.bold: true
+                    text: model.label
                 }
                 MouseRegion {
                     anchors.fill: label
@@ -42,12 +63,14 @@ Item {
                 Contact {
                     id: details
                     anchors.fill: parent
-                    contactid: model.contactid
+                    contactid: model.recid
                     label: model.label
                     email: model.email
                     phone: model.phone
                     opacity: 0
                 }
+//! [components]
+//! [states]
                 states: [
                     State {
                         name: "opened"
@@ -78,6 +101,8 @@ Item {
                         }
                     }
                 ]
+//! [states]
+//! [transitions]
                 transitions: [
                     Transition {
                         NumericAnimation {
@@ -86,38 +111,19 @@ Item {
                         }
                     }
                 ]
+//! [transitions]
+//! [connections]
                 Connection {
                     sender: cancelEditButton
                     signal: "clicked()"
                     script: {
-                    
-                                        if (wrapper.state == 'opened') {
-                                            wrapper.state = '';
-                                        }
-                                    
+                        if (wrapper.state == 'opened') {
+                            wrapper.state = '';
+                        }
                     }
                 }
+//! [connections]
             }
-        },
-        Button {
-            id: cancelEditButton
-            anchors.top: parent.top
-            anchors.topMargin: 5
-            anchors.right: parent.right
-            anchors.rightMargin: 5
-            icon: "../../shared/pics/cancel.png"
-            opacity: mouseGrabbed ? 0 : 1
-        },
-        ListView {
-            id: contactListView
-            anchors.left: parent.left
-            anchors.right: parent.right
-            anchors.top: cancelEditButton.bottom
-            anchors.bottom: parent.bottom
-            clip: true
-            model: contactList
-            delegate: contactDelegate
-            focus: true
-        }
-    ]
+        ]
+    }
 }
diff --git a/examples/declarative/tutorials/contacts/3_Collections/3/ContactView.qml b/examples/declarative/tutorials/contacts/3_Collections/3/ContactView.qml
index 09aab71..f0b55db 100644
--- a/examples/declarative/tutorials/contacts/3_Collections/3/ContactView.qml
+++ b/examples/declarative/tutorials/contacts/3_Collections/3/ContactView.qml
@@ -18,9 +18,27 @@ Item {
             id: contactList
             connection: contactDatabase
             query: "SELECT recid AS contactid, label, email, phone FROM contacts ORDER BY label, recid"
-        },
-        Component {
-            id: contactDelegate
+        }
+    ]
+    Button {
+        id: cancelEditButton
+        anchors.top: parent.top
+        anchors.topMargin: 5
+        anchors.right: parent.right
+        anchors.rightMargin: 5
+        icon: "../../shared/pics/cancel.png"
+        opacity: mouseGrabbed ? 0 : 1
+    }
+    ListView {
+        id: contactListView
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.top: cancelEditButton.bottom
+        anchors.bottom: parent.bottom
+        clip: true
+        model: contactList
+        focus: true
+        delegate: [
             Item {
                 id: wrapper
                 x: 0
@@ -35,15 +53,20 @@ Item {
                     color: "black"
                     font.bold: true
                 }
+//! [setting qml]
                 MouseRegion {
                     anchors.fill: label
-                    onClicked: { Details.qml = 'Contact.qml';
-                        wrapper.state='opened'; }
+                    onClicked: {
+                        Details.qml = 'Contact.qml';
+                        wrapper.state='opened';
+                    }
                 }
                 Item {
                     id: Details
                     anchors.fill: wrapper
                     opacity: 0
+//! [setting qml]
+//! [binding]
                     Bind {
                         target: Details.qmlItem
                         property: "contactid"
@@ -64,6 +87,7 @@ Item {
                         property: "email"
                         value: model.email
                     }
+//! [binding]
                 }
                 states: [
                     State {
@@ -107,34 +131,12 @@ Item {
                     sender: cancelEditButton
                     signal: "clicked()"
                     script: {
-                    
-                                        if (wrapper.state == 'opened') {
-                                            wrapper.state = '';
-                                        }
-                                    
+                        if (wrapper.state == 'opened') {
+                            wrapper.state = '';
+                        }
                     }
                 }
             }
-        },
-        Button {
-            id: cancelEditButton
-            anchors.top: parent.top
-            anchors.topMargin: 5
-            anchors.right: parent.right
-            anchors.rightMargin: 5
-            icon: "../../shared/pics/cancel.png"
-            opacity: mouseGrabbed ? 0 : 1
-        },
-        ListView {
-            id: contactListView
-            anchors.left: parent.left
-            anchors.right: parent.right
-            anchors.top: cancelEditButton.bottom
-            anchors.bottom: parent.bottom
-            clip: true
-            model: contactList
-            delegate: contactDelegate
-            focus: true
-        }
-    ]
+        ]
+    }
 }
diff --git a/examples/declarative/tutorials/contacts/3_Collections/lib/ContactField.qml b/examples/declarative/tutorials/contacts/3_Collections/lib/ContactField.qml
index acc40e2..61de59d 100644
--- a/examples/declarative/tutorials/contacts/3_Collections/lib/ContactField.qml
+++ b/examples/declarative/tutorials/contacts/3_Collections/lib/ContactField.qml
@@ -17,7 +17,7 @@ Item {
         anchors.top: parent.top
         anchors.bottom: parent.bottom
         expandedWidth: contactField.width
-        onConfirmed: { print('Clear field text'); fieldText.text='' }
+        onConfirmed: { fieldText.text='' }
     }
     FieldText {
         id: fieldText
diff --git a/examples/declarative/tutorials/contacts/3_Collections/lib/FieldText.qml b/examples/declarative/tutorials/contacts/3_Collections/lib/FieldText.qml
index 1329db6..370ca00 100644
--- a/examples/declarative/tutorials/contacts/3_Collections/lib/FieldText.qml
+++ b/examples/declarative/tutorials/contacts/3_Collections/lib/FieldText.qml
@@ -75,7 +75,7 @@ Rect {
         x: 5
         width: parent.width-10
         anchors.verticalCenter: parent.verticalCenter
-        hAlign: AlignHCenter
+        hAlign: "AlignHCenter"
         color: "#505050"
         font.italic: true
         text: fieldText.label
diff --git a/examples/declarative/tutorials/contacts/3_Collections/lib/RemoveButton.qml b/examples/declarative/tutorials/contacts/3_Collections/lib/RemoveButton.qml
index d99b550..7e0a2f9 100644
--- a/examples/declarative/tutorials/contacts/3_Collections/lib/RemoveButton.qml
+++ b/examples/declarative/tutorials/contacts/3_Collections/lib/RemoveButton.qml
@@ -13,9 +13,7 @@ Rect {
     }
     resources: [
         Script {
-
             function toggle() {
-                print('removeButton.toggle()');
                 if (removeButton.state == 'opened') {
                     removeButton.state = '';
                     contacts.mouseGrabbed=false;
@@ -80,7 +78,7 @@ Rect {
         anchors.rightMargin: 4
         font.bold: true
         color: "white"
-        hAlign: AlignHCenter
+        hAlign: "AlignHCenter"
         text: "Remove"
         opacity: 0
     }
-- 
cgit v0.12


From ffef88ee5aa653ed0d15996057a7521f179d6f3b Mon Sep 17 00:00:00 2001
From: Yann Bodson <yann.bodson@nokia.com>
Date: Thu, 30 Apr 2009 10:31:36 +1000
Subject: Rename the mediabrowser demo to match the content.

---
 .../mediabrowser/content/LikeOMeter.qml            |  13 --
 .../mediabrowser/content/MediaButton.qml           |  21 ----
 .../mediabrowser/content/PhoneInfoContainer.qml    |  66 ----------
 .../mediabrowser/content/PhonesPathView.qml        |  79 ------------
 .../declarative/mediabrowser/content/ScrollBar.qml |  18 ---
 demos/declarative/mediabrowser/content/Star.qml    |  25 ----
 .../mediabrowser/content/pics/background.png       | Bin 60504 -> 0 bytes
 .../mediabrowser/content/pics/button-pressed.png   | Bin 571 -> 0 bytes
 .../mediabrowser/content/pics/button.png           | Bin 564 -> 0 bytes
 .../mediabrowser/content/pics/ghns_star.png        | Bin 891 -> 0 bytes
 .../mediabrowser/content/pics/reflection.png       | Bin 4839 -> 0 bytes
 .../mediabrowser/content/pics/shadow-bottom.png    | Bin 656 -> 0 bytes
 .../mediabrowser/content/pics/shadow-corner.png    | Bin 405 -> 0 bytes
 .../content/pics/shadow-right-screen.png           | Bin 227 -> 0 bytes
 .../mediabrowser/content/pics/shadow-right.png     | Bin 635 -> 0 bytes
 .../mediabrowser/dummydata/PhonesModel.qml         | 137 ---------------------
 demos/declarative/mediabrowser/mediabrowser.qml    |  36 ------
 .../phonebrowser/content/LikeOMeter.qml            |  13 ++
 .../phonebrowser/content/MediaButton.qml           |  21 ++++
 .../phonebrowser/content/PhoneInfoContainer.qml    |  66 ++++++++++
 .../phonebrowser/content/PhonesPathView.qml        |  79 ++++++++++++
 .../declarative/phonebrowser/content/ScrollBar.qml |  18 +++
 demos/declarative/phonebrowser/content/Star.qml    |  25 ++++
 .../phonebrowser/content/pics/background.png       | Bin 0 -> 60504 bytes
 .../phonebrowser/content/pics/button-pressed.png   | Bin 0 -> 571 bytes
 .../phonebrowser/content/pics/button.png           | Bin 0 -> 564 bytes
 .../phonebrowser/content/pics/ghns_star.png        | Bin 0 -> 891 bytes
 .../phonebrowser/content/pics/reflection.png       | Bin 0 -> 4839 bytes
 .../phonebrowser/content/pics/shadow-bottom.png    | Bin 0 -> 656 bytes
 .../phonebrowser/content/pics/shadow-corner.png    | Bin 0 -> 405 bytes
 .../content/pics/shadow-right-screen.png           | Bin 0 -> 227 bytes
 .../phonebrowser/content/pics/shadow-right.png     | Bin 0 -> 635 bytes
 .../phonebrowser/dummydata/PhonesModel.qml         | 137 +++++++++++++++++++++
 demos/declarative/phonebrowser/phonebrowser.qml    |  36 ++++++
 34 files changed, 395 insertions(+), 395 deletions(-)
 delete mode 100644 demos/declarative/mediabrowser/content/LikeOMeter.qml
 delete mode 100644 demos/declarative/mediabrowser/content/MediaButton.qml
 delete mode 100644 demos/declarative/mediabrowser/content/PhoneInfoContainer.qml
 delete mode 100644 demos/declarative/mediabrowser/content/PhonesPathView.qml
 delete mode 100644 demos/declarative/mediabrowser/content/ScrollBar.qml
 delete mode 100644 demos/declarative/mediabrowser/content/Star.qml
 delete mode 100644 demos/declarative/mediabrowser/content/pics/background.png
 delete mode 100644 demos/declarative/mediabrowser/content/pics/button-pressed.png
 delete mode 100644 demos/declarative/mediabrowser/content/pics/button.png
 delete mode 100644 demos/declarative/mediabrowser/content/pics/ghns_star.png
 delete mode 100644 demos/declarative/mediabrowser/content/pics/reflection.png
 delete mode 100644 demos/declarative/mediabrowser/content/pics/shadow-bottom.png
 delete mode 100644 demos/declarative/mediabrowser/content/pics/shadow-corner.png
 delete mode 100644 demos/declarative/mediabrowser/content/pics/shadow-right-screen.png
 delete mode 100644 demos/declarative/mediabrowser/content/pics/shadow-right.png
 delete mode 100644 demos/declarative/mediabrowser/dummydata/PhonesModel.qml
 delete mode 100644 demos/declarative/mediabrowser/mediabrowser.qml
 create mode 100644 demos/declarative/phonebrowser/content/LikeOMeter.qml
 create mode 100644 demos/declarative/phonebrowser/content/MediaButton.qml
 create mode 100644 demos/declarative/phonebrowser/content/PhoneInfoContainer.qml
 create mode 100644 demos/declarative/phonebrowser/content/PhonesPathView.qml
 create mode 100644 demos/declarative/phonebrowser/content/ScrollBar.qml
 create mode 100644 demos/declarative/phonebrowser/content/Star.qml
 create mode 100644 demos/declarative/phonebrowser/content/pics/background.png
 create mode 100644 demos/declarative/phonebrowser/content/pics/button-pressed.png
 create mode 100644 demos/declarative/phonebrowser/content/pics/button.png
 create mode 100644 demos/declarative/phonebrowser/content/pics/ghns_star.png
 create mode 100644 demos/declarative/phonebrowser/content/pics/reflection.png
 create mode 100644 demos/declarative/phonebrowser/content/pics/shadow-bottom.png
 create mode 100644 demos/declarative/phonebrowser/content/pics/shadow-corner.png
 create mode 100644 demos/declarative/phonebrowser/content/pics/shadow-right-screen.png
 create mode 100644 demos/declarative/phonebrowser/content/pics/shadow-right.png
 create mode 100644 demos/declarative/phonebrowser/dummydata/PhonesModel.qml
 create mode 100644 demos/declarative/phonebrowser/phonebrowser.qml

diff --git a/demos/declarative/mediabrowser/content/LikeOMeter.qml b/demos/declarative/mediabrowser/content/LikeOMeter.qml
deleted file mode 100644
index 68584a5..0000000
--- a/demos/declarative/mediabrowser/content/LikeOMeter.qml
+++ /dev/null
@@ -1,13 +0,0 @@
-<Item id="Container">
-    <properties>
-        <Property name="rating" value="2"/>
-    </properties>
-
-    <HorizontalLayout>
-        <Star rating="0" onClicked="Container.rating = rating" on="{Container.rating >= 0}"/>
-        <Star rating="1" onClicked="Container.rating = rating" on="{Container.rating >= 1}"/>
-        <Star rating="2" onClicked="Container.rating = rating" on="{Container.rating >= 2}"/>
-        <Star rating="3" onClicked="Container.rating = rating" on="{Container.rating >= 3}"/>
-        <Star rating="4" onClicked="Container.rating = rating" on="{Container.rating >= 4}"/>
-    </HorizontalLayout>
-</Item>
diff --git a/demos/declarative/mediabrowser/content/MediaButton.qml b/demos/declarative/mediabrowser/content/MediaButton.qml
deleted file mode 100644
index 6c672ea..0000000
--- a/demos/declarative/mediabrowser/content/MediaButton.qml
+++ /dev/null
@@ -1,21 +0,0 @@
-<Item id="Container">
-    <signals>
-        <Signal name="clicked"/>
-    </signals>
-
-    <properties>
-        <Property name="text"/>
-    </properties>
-
-    <Image id="Image" source="pics/button.png"/>
-    <Image id="Pressed" source="pics/button-pressed.png" opacity="0"/>
-    <MouseRegion id="MouseRegion" anchors.fill="{Image}" onClicked="Container.clicked.emit();"/>
-    <Text font.bold="true" color="white" anchors.centeredIn="{Image}" text="{Container.text}"/>
-    <width>{Image.width}</width>
-
-    <states>
-        <State name="Pressed" when="{MouseRegion.pressed == true}">
-            <SetProperties target="{Pressed}" opacity="1"/>
-        </State>
-    </states>
-</Item>
diff --git a/demos/declarative/mediabrowser/content/PhoneInfoContainer.qml b/demos/declarative/mediabrowser/content/PhoneInfoContainer.qml
deleted file mode 100644
index 34fd889..0000000
--- a/demos/declarative/mediabrowser/content/PhoneInfoContainer.qml
+++ /dev/null
@@ -1,66 +0,0 @@
-<Flipable id="Container">
-    <properties>
-        <Property name="frontContainer" value="{ContainerFront}"/>
-        <Property name="flickableArea" value="{Flickable}"/>
-        <Property name="phoneTitle" value="N/A"/>
-        <Property name="phoneDescription" value="..."/>
-        <Property name="phoneSpecifications" value=""/>
-        <Property name="phoneUrl" value=""/>
-        <Property name="rating" value="2"/>
-    </properties>
-
-    <signals>
-        <Signal name="closed"/>
-    </signals>
-
-    <axis>
-        <Axis startX="{Container.width / 2}" endX="{Container.width / 2}" endY="1" />
-    </axis>
-
-    <front>
-        <Item id="ContainerFront" anchors.fill="{Container}">
-            <Rect anchors.fill="{parent}" color="black" opacity="0.4" pen.color="white" pen.width="2"/>
-
-            <MediaButton id="BackButton" x="630" y="400" text="Back" onClicked="Container.closed.emit()"/>
-            <MediaButton id="MoreButton" x="530" y="400" text="More..." onClicked="Container.state='Back'"/>
-
-            <Text id="TitleText" style="Raised" styleColor="black" color="white" x="420" y="30" width="{parent.width}"
-                  text="{Container.phoneTitle}" font.size="22"/>
-
-            <LikeOMeter x="420" y="75" rating="{Container.rating}"/>
-
-            <Flickable id="Flickable" x="420" width="280" height="260" y="120" clip="true" viewportWidth="280"
-                       viewportHeight="{DescriptionText.height}">
-                <Text id="DescriptionText"  wrap="true" color="white" width="{parent.width}"
-                      text="{Container.phoneDescription}" font.size="12"/>
-            </Flickable>
-            <Text color="white" width="300" x="50" y="300" text="{Container.phoneSpecifications}"/>
-            <ScrollBar id="ScrollBar" x="720" y="{Flickable.y}" width="7" height="{Flickable.height}" opacity="0"
-                       flickableArea="{Flickable}" clip="true"/>
-        </Item>
-    </front>
-
-    <back>
-        <Item anchors.fill="{Container}">
-            <Rect anchors.fill="{parent}" color="black" opacity="0.4" pen.color="white" pen.width="2"/>
-            <Flickable x="10" width="{Container.width-20}" height="{Container.height-20}" y="10" clip="true"
-                    viewportWidth="{UrlView.width}" viewportHeight="{UrlView.height}">
-                <WebView id="UrlView" url="{Container.phoneUrl}" idealWidth="{parent.width}"/>
-            </Flickable>
-            <MediaButton id="BackButton2" x="630" y="400" text="Back" onClicked="Container.state=''"/>
-        </Item>
-    </back>
-
-    <states>
-        <State name="Back">
-            <SetProperty target="{Container}" property="rotation" value="180"/>
-        </State>
-    </states>
-
-    <transitions>
-        <Transition>
-            <NumericAnimation easing="easeInOutQuad" properties="rotation" duration="500"/>
-        </Transition>
-    </transitions>
-
-</Flipable>
diff --git a/demos/declarative/mediabrowser/content/PhonesPathView.qml b/demos/declarative/mediabrowser/content/PhonesPathView.qml
deleted file mode 100644
index df7e742..0000000
--- a/demos/declarative/mediabrowser/content/PhonesPathView.qml
+++ /dev/null
@@ -1,79 +0,0 @@
-<PathView id="Container" pathItemCount="6">
-
-    <path>
-        <Path startX="-50" startY="40">
-            <PathAttribute name="scale" value="0.2"/>
-            <PathCubic x="400" y="220" control1X="140" control1Y="40" control2X="210" control2Y="220"/>
-            <PathAttribute name="scale" value="1.2"/>
-            <PathAttribute name="z" value="1"/>
-            <PathCubic x="850" y="40" control2X="660" control2Y="40" control1X="590" control1Y="220"/>
-            <PathAttribute name="scale" value="0.2"/>
-        </Path>
-    </path>
-
-    <delegate>
-        <Component id="PhoneDelegate">
-            <Item id="Wrapper" width="320" height="200" scale="{Wrapper.PathView.scale}" z="{Wrapper.PathView.z}">
-                <Connection sender="{PhoneInfoContainer}" script="if (Wrapper.state == 'Details') Wrapper.state = ''" signal="closed()"/>
-
-                <Script>
-                    function phoneClicked() {
-                        if (MainWindow.minimized == true) {
-                            MainWindow.minimized = false;
-                        } else {
-                            PhoneInfoContainer.phoneTitle = title;
-                            PhoneInfoContainer.flickableArea.yPosition = 0;
-                            PhoneInfoContainer.phoneDescription = description;
-                            PhoneInfoContainer.phoneSpecifications = specifications;
-                            PhoneInfoContainer.phoneUrl = url;
-                            PhoneInfoContainer.rating = rating;
-                            Wrapper.state = "Details";
-                        }
-                    }
-                </Script>
-
-                <Rect id="Dvd" anchors.fill="{parent}" color="white">
-                    <Item x="{(parent.width-width)/2}" y="{(parent.height-height)/2}" width="{Thumb.width*Thumb.scale}" height="{Thumb.height*Thumb.scale}">
-                        <Image id="Thumb" source="{thumb}" scale="{0.95*Math.min(Dvd.height/height,Dvd.width/width)}"/>
-                    </Item>
-                    <!-- <Image source="pics/reflection.png" anchors.fill="{parent}"/> -->
-                    <Image source="pics/shadow-right.png" x="{Dvd.width}" height="{Dvd.height}"/>
-                    <Image source="pics/shadow-bottom.png" y="{Dvd.height}" width="{Dvd.width}"/>
-                    <Image id="Corner" source="pics/shadow-corner.png" x="{Dvd.width}" y="{Dvd.height}"/>
-                </Rect>
-
-                <MouseRegion anchors.fill="{Wrapper}" onClicked="phoneClicked()"/>
-
-                <states>
-                    <State name="Details">
-                        <ParentChange target="{Wrapper}" parent="{PhoneInfoContainer.frontContainer}"/>
-                        <SetProperties target="{Wrapper}" x="50" y="60" scale="1"/>
-                        <SetProperties target="{PhoneInfoContainer}" y="20"/>
-                        <SetProperties target="{Container}" y="-480"/>
-                        <SetProperties target="{CloseButton}" opacity="0"/>
-                        <SetProperties target="{CategoryText}" y="-50"/>
-                    </State>
-                    <State name="Stacked" when="{MainWindow.minimized == true}">
-                        <ParentChange target="{Wrapper}" parent="{Stack}"/>
-                        <SetProperties target="{Wrapper}" x="0" y="0" scale="0.2"/>
-                        <SetProperties target="{CloseButton}" opacity="0"/>
-                        <SetProperties target="{CategoryText}" y="-50"/>
-                    </State>
-                </states>
-
-                <transitions>
-                    <Transition fromState="" toState="Details,Stacked">
-                        <ParentChangeAction/>
-                        <NumericAnimation properties="x,y,scale,opacity" duration="500" easing="easeInOutQuad"/>
-                    </Transition>
-                    <Transition fromState="Details,Stacked" toState="">
-                        <ParentChangeAction/>
-                        <NumericAnimation properties="x,y,scale,opacity" duration="500" easing="easeInOutQuad"/>
-                    </Transition>
-                </transitions>
-
-            </Item>
-        </Component>
-    </delegate>
-
-</PathView>
diff --git a/demos/declarative/mediabrowser/content/ScrollBar.qml b/demos/declarative/mediabrowser/content/ScrollBar.qml
deleted file mode 100644
index 974f4d0..0000000
--- a/demos/declarative/mediabrowser/content/ScrollBar.qml
+++ /dev/null
@@ -1,18 +0,0 @@
-<Item id="Container">
-    <properties>
-        <Property name="flickableArea"/>
-    </properties>
-
-    <Rect radius="5" color="black" opacity="0.3" pen.color="white" pen.width="2" x="0" y="{flickableArea.pageYPosition * Container.height}"
-          width="{parent.width}" height="{flickableArea.pageHeight * Container.height}"/>
-    <states>
-        <State name="show" when="{flickableArea.moving}">
-            <SetProperties target="{Container}" opacity="1" />
-        </State>
-    </states>
-    <transitions>
-        <Transition fromState="*" toState="*">
-            <NumericAnimation target="{Container}" properties="opacity" duration="400"/>
-        </Transition>
-    </transitions>
-</Item>
diff --git a/demos/declarative/mediabrowser/content/Star.qml b/demos/declarative/mediabrowser/content/Star.qml
deleted file mode 100644
index 37d314b..0000000
--- a/demos/declarative/mediabrowser/content/Star.qml
+++ /dev/null
@@ -1,25 +0,0 @@
-<Item id="Container" width="24" height="24">
-    <properties>
-        <Property name="rating"/>
-        <Property name="on"/>
-    </properties>
-
-    <signals>
-        <Signal name="clicked"/>
-    </signals>
-
-    <Image id="Image" source="pics/ghns_star.png" x="6" y="7" opacity="0.4" scale="0.5"/>
-    <MouseRegion anchors.fill="{Container}" onClicked="Container.clicked.emit()"/>
-
-    <states>
-        <State name="on" when="{Container.on == true}">
-            <SetProperties target="{Image}" opacity="1" scale="1" x="1" y="0"/>
-        </State>
-    </states>
-    <transitions>
-        <Transition>
-            <NumericAnimation properties="opacity,scale,x,y" easing="easeOutBounce"/>
-        </Transition>
-    </transitions>
-
-</Item>
diff --git a/demos/declarative/mediabrowser/content/pics/background.png b/demos/declarative/mediabrowser/content/pics/background.png
deleted file mode 100644
index 5b37072..0000000
Binary files a/demos/declarative/mediabrowser/content/pics/background.png and /dev/null differ
diff --git a/demos/declarative/mediabrowser/content/pics/button-pressed.png b/demos/declarative/mediabrowser/content/pics/button-pressed.png
deleted file mode 100644
index e434d32..0000000
Binary files a/demos/declarative/mediabrowser/content/pics/button-pressed.png and /dev/null differ
diff --git a/demos/declarative/mediabrowser/content/pics/button.png b/demos/declarative/mediabrowser/content/pics/button.png
deleted file mode 100644
index 56a63ce..0000000
Binary files a/demos/declarative/mediabrowser/content/pics/button.png and /dev/null differ
diff --git a/demos/declarative/mediabrowser/content/pics/ghns_star.png b/demos/declarative/mediabrowser/content/pics/ghns_star.png
deleted file mode 100644
index 4ad43cc..0000000
Binary files a/demos/declarative/mediabrowser/content/pics/ghns_star.png and /dev/null differ
diff --git a/demos/declarative/mediabrowser/content/pics/reflection.png b/demos/declarative/mediabrowser/content/pics/reflection.png
deleted file mode 100644
index c143a48..0000000
Binary files a/demos/declarative/mediabrowser/content/pics/reflection.png and /dev/null differ
diff --git a/demos/declarative/mediabrowser/content/pics/shadow-bottom.png b/demos/declarative/mediabrowser/content/pics/shadow-bottom.png
deleted file mode 100644
index 523f6e7..0000000
Binary files a/demos/declarative/mediabrowser/content/pics/shadow-bottom.png and /dev/null differ
diff --git a/demos/declarative/mediabrowser/content/pics/shadow-corner.png b/demos/declarative/mediabrowser/content/pics/shadow-corner.png
deleted file mode 100644
index ef8c856..0000000
Binary files a/demos/declarative/mediabrowser/content/pics/shadow-corner.png and /dev/null differ
diff --git a/demos/declarative/mediabrowser/content/pics/shadow-right-screen.png b/demos/declarative/mediabrowser/content/pics/shadow-right-screen.png
deleted file mode 100644
index 9856c4f..0000000
Binary files a/demos/declarative/mediabrowser/content/pics/shadow-right-screen.png and /dev/null differ
diff --git a/demos/declarative/mediabrowser/content/pics/shadow-right.png b/demos/declarative/mediabrowser/content/pics/shadow-right.png
deleted file mode 100644
index f534a35..0000000
Binary files a/demos/declarative/mediabrowser/content/pics/shadow-right.png and /dev/null differ
diff --git a/demos/declarative/mediabrowser/dummydata/PhonesModel.qml b/demos/declarative/mediabrowser/dummydata/PhonesModel.qml
deleted file mode 100644
index d4f6269..0000000
--- a/demos/declarative/mediabrowser/dummydata/PhonesModel.qml
+++ /dev/null
@@ -1,137 +0,0 @@
-<ListModel id="PhonesModel">
-    <Phone>
-        <title>Nokia N97</title>
-        <thumb>http://www.forum.nokia.com/devices/pics/N97_main.jpg</thumb>
-        <description>
-        The Nokia N97 is a S60 5th Edition mobile computer with a large 3,5?, bright nHD (640 x 360 pixels and 16:9 aspect ratio) TFT color display with resistive touch screen and tactile feedback. The device provides excellent user experience for internet and entertainment by combining qwerty keyboard with touch UI and Home screen functionality. Use the N97 to connect to mobile broadband using WLAN or HSDPA (3.5G). Find directions and locations with the integrated A-GPS and included maps. Additional features include game titles with N-Gage, a 5 mega pixel camera with dual LED flash and automatic geotagging of images and videos.
-        </description>
-        <specifications>
-        <![CDATA[
-            <table width=300>
-            <tr><td width=50%>Resolution     <td width=50%>360 x 640   
-            <tr><td>Color Depth    <td>24 bit  
-            <tr><td>Device Size    <td>117.2 x 55.3 x 15.9 mm
-            <tr><td>Volume         <td>88 cc   
-            <tr><td>Weight         <td>150 g
-            </table>
-        ]]>
-        </specifications>
-        <url>http://www.forum.nokia.com/devices/N97</url>
-        <rating>5</rating>
-    </Phone>
-    <Phone>
-        <title>Nokia 5800 XpressMusic</title>
-        <thumb>http://www.forum.nokia.com/devices/pics/5800_main.jpg</thumb>
-        <description>
-        The Nokia 5800 XpressMusic is a S60 5th Edition device with a resistive touch screen and tactile feedback. The device has a large 3,2?, bright nHD (640 x 360 pixels and 16:9 aspect ratio) color display. The device has variety of input methods: stylus, plectrum and finger touch support for text input and UI control (alphanumeric keypad, full and mini qwerty keyboard, handwriting recognition). Use the Nokia 5800 XpressMusic to connect to mobile broadband using WLAN or HSDPA (3.5G). Find directions and locations with the integrated A-GPS and included maps. Additional features include a 3.2 megapixel camera with dual LED flash, Bluetooth 2.0 +EDR, and USB 2.0 High-Speed. Supported WCDMA frequencies depend on the region where the device is available. 
-        </description>
-        <specifications>
-        <![CDATA[
-            <table width=300>
-            <tr><td width=50%>Resolution     <td width=50%>360 x 640   
-            <tr><td>Color Depth    <td>24 bit  
-            <tr><td>Device Size    <td>111 x 51.7 x 15.5 mm
-            <tr><td>Volume         <td>83 cc   
-            <tr><td>Weight         <td>109 g
-            </table>
-        ]]>
-        </specifications>
-        <url>http://www.forum.nokia.com/devices/5800_XpressMusic</url>
-        <rating>5</rating>
-    </Phone>
-    <Phone>
-        <title>E75</title>
-        <thumb>http://www.forum.nokia.com/devices/pics/E75_main.jpg</thumb>
-        <description>The Nokia E75 is a GSM/WCDMA dual-mode business smartphone supporting WCDMA/HSDPA, EGSM, and WLAN. The device features a side slider qwerty keyboard for optimal email experience. Enjoy videos, music, and graphics on the 2.4? QVGA display and orientation sensor. Find directions and locations with the integrated A-GPS and included maps. Take photos with a 3.2-megapixel autofocus camera. Additional features include USB charging with simultaneous data transfer, Bluetooth 2.0 +EDR, and USB 2.0 High-Speed. Supported WCDMA frequencies depend on the region where the device is available.</description>
-        <specifications>
-        <![CDATA[
-            <table width=300>
-            <tr><td width=50%>Resolution     <td width=50%>240 x 320   
-            <tr><td>Color Depth    <td>24 bit  
-            <tr><td>Device Size    <td>111.8 x 501 x 14.4 mm   
-            <tr><td>Volume         <td>69 cc   
-            <tr><td>Weight         <td>139 g
-            </table>
-        ]]>
-        </specifications>
-        <url>http://www.forum.nokia.com/devices/E75</url>
-        <rating>5</rating>
-    </Phone>
-    <Phone>
-        <title>Nokia N810</title>
-        <thumb>http://www.forum.nokia.com/devices/pics/n810_main.jpg</thumb>
-        <description>
-        The Nokia N810 features include Voice-over-IP (VoIP) Internet and video calling, Instant Messaging, an integrated slide-out QWERTY keyboard and touch screen. The N810 lets you stay connected on the go with WLAN or Bluetooth 2.0 +EDR and a Bluetooth enabled mobile phone. The hi-resolution 4.13", 800 x 480 screen and the integrated web cam add to the internet experience. Use the Nokia N810 to play music and videos with the built-in stereo speakers or use the 3.5mm stereo plug with headphones. The Nokia N810 also has an integrated GPS receiver which allows you to pinpoint your position and find points-of-interests using pre-loaded maps. 
-        </description>
-        <specifications>
-        <![CDATA[
-            <table width=300>
-            <tr><td width=50%>Resolution     <td width=50%>800 x 480   
-            <tr><td>Color Depth    <td>16 bit  
-            <tr><td>Device Size    <td>128 x 72 x 14 mm
-            <tr><td>Weight         <td>225 g
-            </table>
-        ]]>
-        </specifications>
-        <url>http://www.forum.nokia.com/devices/N810</url>
-        <rating>5</rating>
-    </Phone>
-    <Phone>
-        <title>Nokia 6260 slide</title>
-        <thumb>http://www.forum.nokia.com/devices/pics/6260slide_main.jpg</thumb>
-        <description>
-        The Nokia 6260 slide is a Series 40 6th Edition phone, supporting quad-band GSM 850/900/1800/1900, triple-band WCDMA 900/1900/2100 and WLAN. Other key features include integrated A-GPS with included maps, a 5.0 megapixel camera with LED flash and Carl Zeiss optics, WebKit Open Source Browser, Flash Lite 3.0, Bluetooth 2.1 + EDR and MIDP Java 2.1 with additional Java APIs. Supported WCDMA frequencies depend on the region where the device is available. 
-        </description>
-        <specifications>
-        <![CDATA[
-            <table width=300>
-            <tr><td width=50%>Resolution     <td width=50%>320 x 480   
-            <tr><td>Color Depth    <td>24 bit  
-            <tr><td>Device Size    <td>99.4 x 46.5 x 15.4 mm
-            <tr><td>Volume         <td>64.5 cc   
-            <tr><td>Weight         <td>114 g
-            </table>
-        ]]>
-        </specifications>
-        <url>http://www.forum.nokia.com/devices/6260_slide</url>
-        <rating>5</rating>
-    </Phone>
-    <Phone>
-        <title>Nokia 2330 classic</title>
-        <thumb>http://www.forum.nokia.com/devices/pics/2330_main.jpg</thumb>
-        <description>
-        The Nokia 2330 classic is a Dual-band GPRS phone for EGSM 900/1800 or GSM 850/1900 (for some markets) that includes a VGA camera, Stereo FM radio with recording feature, Bluetooth 2.0, Mail on Ovi and MIDP 2.1 APIs for application creation. 
-        </description>
-        <specifications>
-        <![CDATA[
-            <table width=300>
-            <tr><td width=50%>Resolution     <td width=50%>128 x 160   
-            <tr><td>Color Depth    <td>16 bit  
-            <tr><td>Device Size    <td>107 x 46 x 13.8 mm
-            <tr><td>Weight         <td>80 g
-            </table>
-        ]]>
-        </specifications>
-        <url>http://www.forum.nokia.com/devices/2330_classic</url>
-        <rating>5</rating>
-    </Phone>
-    <Phone>
-        <title>Nokia 2355</title>
-        <thumb>http://www.forum.nokia.com/devices/pics/2355_main.jpg</thumb>
-        <description>
-        The Nokia 2355 CDMA phone features a 64K color display, FM radio, integrated flashlight, WAP 2.0 browsing, MMS, Java(tm) and Brew. It's stylishly polished fold design will keep you in the spotlight. 
-        </description>
-        <specifications>
-        <![CDATA[
-            <table width=300>
-            <tr><td width=50%>Resolution     <td width=50%>128 x 128   
-            <tr><td>Color Depth    <td>16 bit  
-            <tr><td>Device Size    <td>81 x 43 x 22 mm
-            <tr><td>Weight         <td>78 g
-            </table>
-        ]]>
-        </specifications>
-        <url>http://www.forum.nokia.com/devices/2355</url>
-        <rating>5</rating>
-    </Phone>
-</ListModel>
diff --git a/demos/declarative/mediabrowser/mediabrowser.qml b/demos/declarative/mediabrowser/mediabrowser.qml
deleted file mode 100644
index be87fa7..0000000
--- a/demos/declarative/mediabrowser/mediabrowser.qml
+++ /dev/null
@@ -1,36 +0,0 @@
-<?qtfx namespacepath:=content ?>
-<Item width="800" height="480" id="MainWindow">
-    <properties>
-        <Property name="minimized" value="false"/>
-    </properties>
-
-    <Item id="Background">
-        <Image source="content/pics/background.png" opaque="true"/>
-
-        <Rect id="Menu" x="-150" width="150" height="480" color="#232323">
-            <Text id="IconText" x="40" y="110" font.bold="true" font.size="9" text="Nokia Devices" color="white" style="Raised" styleColor="black"/>
-            <Image source="content/pics/shadow-right-screen.png" x="150" height="480" tile="true"/>
-        </Rect>
-
-        <PhonesPathView id="PhonesPathView" model="{PhonesModel}" y="60" width="800" height="360"/>
-        <PhoneInfoContainer id="PhoneInfoContainer" width="750" x="25" y="500" height="440"/>
-        <MediaButton id="CloseButton" x="680" y="440" text="Close" onClicked="MainWindow.minimized = true"/>
-
-        <states>
-            <State name="Minimized" when="{MainWindow.minimized == true}">
-                <SetProperties target="{Background}" x="75"/>
-                <SetProperties target="{Menu}" x="-75"/>
-            </State>
-        </states>
-        <transitions>
-            <Transition fromState="*" toState="*">
-                <NumericAnimation properties="x,y,size" duration="500" easing="easeInOutQuad"/>
-            </Transition>
-        </transitions>
-    </Item>
-
-    <Text id="CategoryText" x="300" y="15" text="Nokia Devices" font.size="22" color="white" style="Raised" styleColor="black"/>
-    <Item id="Stack" x="45" y="50"/>
-
-</Item>
-
diff --git a/demos/declarative/phonebrowser/content/LikeOMeter.qml b/demos/declarative/phonebrowser/content/LikeOMeter.qml
new file mode 100644
index 0000000..68584a5
--- /dev/null
+++ b/demos/declarative/phonebrowser/content/LikeOMeter.qml
@@ -0,0 +1,13 @@
+<Item id="Container">
+    <properties>
+        <Property name="rating" value="2"/>
+    </properties>
+
+    <HorizontalLayout>
+        <Star rating="0" onClicked="Container.rating = rating" on="{Container.rating >= 0}"/>
+        <Star rating="1" onClicked="Container.rating = rating" on="{Container.rating >= 1}"/>
+        <Star rating="2" onClicked="Container.rating = rating" on="{Container.rating >= 2}"/>
+        <Star rating="3" onClicked="Container.rating = rating" on="{Container.rating >= 3}"/>
+        <Star rating="4" onClicked="Container.rating = rating" on="{Container.rating >= 4}"/>
+    </HorizontalLayout>
+</Item>
diff --git a/demos/declarative/phonebrowser/content/MediaButton.qml b/demos/declarative/phonebrowser/content/MediaButton.qml
new file mode 100644
index 0000000..6c672ea
--- /dev/null
+++ b/demos/declarative/phonebrowser/content/MediaButton.qml
@@ -0,0 +1,21 @@
+<Item id="Container">
+    <signals>
+        <Signal name="clicked"/>
+    </signals>
+
+    <properties>
+        <Property name="text"/>
+    </properties>
+
+    <Image id="Image" source="pics/button.png"/>
+    <Image id="Pressed" source="pics/button-pressed.png" opacity="0"/>
+    <MouseRegion id="MouseRegion" anchors.fill="{Image}" onClicked="Container.clicked.emit();"/>
+    <Text font.bold="true" color="white" anchors.centeredIn="{Image}" text="{Container.text}"/>
+    <width>{Image.width}</width>
+
+    <states>
+        <State name="Pressed" when="{MouseRegion.pressed == true}">
+            <SetProperties target="{Pressed}" opacity="1"/>
+        </State>
+    </states>
+</Item>
diff --git a/demos/declarative/phonebrowser/content/PhoneInfoContainer.qml b/demos/declarative/phonebrowser/content/PhoneInfoContainer.qml
new file mode 100644
index 0000000..34fd889
--- /dev/null
+++ b/demos/declarative/phonebrowser/content/PhoneInfoContainer.qml
@@ -0,0 +1,66 @@
+<Flipable id="Container">
+    <properties>
+        <Property name="frontContainer" value="{ContainerFront}"/>
+        <Property name="flickableArea" value="{Flickable}"/>
+        <Property name="phoneTitle" value="N/A"/>
+        <Property name="phoneDescription" value="..."/>
+        <Property name="phoneSpecifications" value=""/>
+        <Property name="phoneUrl" value=""/>
+        <Property name="rating" value="2"/>
+    </properties>
+
+    <signals>
+        <Signal name="closed"/>
+    </signals>
+
+    <axis>
+        <Axis startX="{Container.width / 2}" endX="{Container.width / 2}" endY="1" />
+    </axis>
+
+    <front>
+        <Item id="ContainerFront" anchors.fill="{Container}">
+            <Rect anchors.fill="{parent}" color="black" opacity="0.4" pen.color="white" pen.width="2"/>
+
+            <MediaButton id="BackButton" x="630" y="400" text="Back" onClicked="Container.closed.emit()"/>
+            <MediaButton id="MoreButton" x="530" y="400" text="More..." onClicked="Container.state='Back'"/>
+
+            <Text id="TitleText" style="Raised" styleColor="black" color="white" x="420" y="30" width="{parent.width}"
+                  text="{Container.phoneTitle}" font.size="22"/>
+
+            <LikeOMeter x="420" y="75" rating="{Container.rating}"/>
+
+            <Flickable id="Flickable" x="420" width="280" height="260" y="120" clip="true" viewportWidth="280"
+                       viewportHeight="{DescriptionText.height}">
+                <Text id="DescriptionText"  wrap="true" color="white" width="{parent.width}"
+                      text="{Container.phoneDescription}" font.size="12"/>
+            </Flickable>
+            <Text color="white" width="300" x="50" y="300" text="{Container.phoneSpecifications}"/>
+            <ScrollBar id="ScrollBar" x="720" y="{Flickable.y}" width="7" height="{Flickable.height}" opacity="0"
+                       flickableArea="{Flickable}" clip="true"/>
+        </Item>
+    </front>
+
+    <back>
+        <Item anchors.fill="{Container}">
+            <Rect anchors.fill="{parent}" color="black" opacity="0.4" pen.color="white" pen.width="2"/>
+            <Flickable x="10" width="{Container.width-20}" height="{Container.height-20}" y="10" clip="true"
+                    viewportWidth="{UrlView.width}" viewportHeight="{UrlView.height}">
+                <WebView id="UrlView" url="{Container.phoneUrl}" idealWidth="{parent.width}"/>
+            </Flickable>
+            <MediaButton id="BackButton2" x="630" y="400" text="Back" onClicked="Container.state=''"/>
+        </Item>
+    </back>
+
+    <states>
+        <State name="Back">
+            <SetProperty target="{Container}" property="rotation" value="180"/>
+        </State>
+    </states>
+
+    <transitions>
+        <Transition>
+            <NumericAnimation easing="easeInOutQuad" properties="rotation" duration="500"/>
+        </Transition>
+    </transitions>
+
+</Flipable>
diff --git a/demos/declarative/phonebrowser/content/PhonesPathView.qml b/demos/declarative/phonebrowser/content/PhonesPathView.qml
new file mode 100644
index 0000000..df7e742
--- /dev/null
+++ b/demos/declarative/phonebrowser/content/PhonesPathView.qml
@@ -0,0 +1,79 @@
+<PathView id="Container" pathItemCount="6">
+
+    <path>
+        <Path startX="-50" startY="40">
+            <PathAttribute name="scale" value="0.2"/>
+            <PathCubic x="400" y="220" control1X="140" control1Y="40" control2X="210" control2Y="220"/>
+            <PathAttribute name="scale" value="1.2"/>
+            <PathAttribute name="z" value="1"/>
+            <PathCubic x="850" y="40" control2X="660" control2Y="40" control1X="590" control1Y="220"/>
+            <PathAttribute name="scale" value="0.2"/>
+        </Path>
+    </path>
+
+    <delegate>
+        <Component id="PhoneDelegate">
+            <Item id="Wrapper" width="320" height="200" scale="{Wrapper.PathView.scale}" z="{Wrapper.PathView.z}">
+                <Connection sender="{PhoneInfoContainer}" script="if (Wrapper.state == 'Details') Wrapper.state = ''" signal="closed()"/>
+
+                <Script>
+                    function phoneClicked() {
+                        if (MainWindow.minimized == true) {
+                            MainWindow.minimized = false;
+                        } else {
+                            PhoneInfoContainer.phoneTitle = title;
+                            PhoneInfoContainer.flickableArea.yPosition = 0;
+                            PhoneInfoContainer.phoneDescription = description;
+                            PhoneInfoContainer.phoneSpecifications = specifications;
+                            PhoneInfoContainer.phoneUrl = url;
+                            PhoneInfoContainer.rating = rating;
+                            Wrapper.state = "Details";
+                        }
+                    }
+                </Script>
+
+                <Rect id="Dvd" anchors.fill="{parent}" color="white">
+                    <Item x="{(parent.width-width)/2}" y="{(parent.height-height)/2}" width="{Thumb.width*Thumb.scale}" height="{Thumb.height*Thumb.scale}">
+                        <Image id="Thumb" source="{thumb}" scale="{0.95*Math.min(Dvd.height/height,Dvd.width/width)}"/>
+                    </Item>
+                    <!-- <Image source="pics/reflection.png" anchors.fill="{parent}"/> -->
+                    <Image source="pics/shadow-right.png" x="{Dvd.width}" height="{Dvd.height}"/>
+                    <Image source="pics/shadow-bottom.png" y="{Dvd.height}" width="{Dvd.width}"/>
+                    <Image id="Corner" source="pics/shadow-corner.png" x="{Dvd.width}" y="{Dvd.height}"/>
+                </Rect>
+
+                <MouseRegion anchors.fill="{Wrapper}" onClicked="phoneClicked()"/>
+
+                <states>
+                    <State name="Details">
+                        <ParentChange target="{Wrapper}" parent="{PhoneInfoContainer.frontContainer}"/>
+                        <SetProperties target="{Wrapper}" x="50" y="60" scale="1"/>
+                        <SetProperties target="{PhoneInfoContainer}" y="20"/>
+                        <SetProperties target="{Container}" y="-480"/>
+                        <SetProperties target="{CloseButton}" opacity="0"/>
+                        <SetProperties target="{CategoryText}" y="-50"/>
+                    </State>
+                    <State name="Stacked" when="{MainWindow.minimized == true}">
+                        <ParentChange target="{Wrapper}" parent="{Stack}"/>
+                        <SetProperties target="{Wrapper}" x="0" y="0" scale="0.2"/>
+                        <SetProperties target="{CloseButton}" opacity="0"/>
+                        <SetProperties target="{CategoryText}" y="-50"/>
+                    </State>
+                </states>
+
+                <transitions>
+                    <Transition fromState="" toState="Details,Stacked">
+                        <ParentChangeAction/>
+                        <NumericAnimation properties="x,y,scale,opacity" duration="500" easing="easeInOutQuad"/>
+                    </Transition>
+                    <Transition fromState="Details,Stacked" toState="">
+                        <ParentChangeAction/>
+                        <NumericAnimation properties="x,y,scale,opacity" duration="500" easing="easeInOutQuad"/>
+                    </Transition>
+                </transitions>
+
+            </Item>
+        </Component>
+    </delegate>
+
+</PathView>
diff --git a/demos/declarative/phonebrowser/content/ScrollBar.qml b/demos/declarative/phonebrowser/content/ScrollBar.qml
new file mode 100644
index 0000000..974f4d0
--- /dev/null
+++ b/demos/declarative/phonebrowser/content/ScrollBar.qml
@@ -0,0 +1,18 @@
+<Item id="Container">
+    <properties>
+        <Property name="flickableArea"/>
+    </properties>
+
+    <Rect radius="5" color="black" opacity="0.3" pen.color="white" pen.width="2" x="0" y="{flickableArea.pageYPosition * Container.height}"
+          width="{parent.width}" height="{flickableArea.pageHeight * Container.height}"/>
+    <states>
+        <State name="show" when="{flickableArea.moving}">
+            <SetProperties target="{Container}" opacity="1" />
+        </State>
+    </states>
+    <transitions>
+        <Transition fromState="*" toState="*">
+            <NumericAnimation target="{Container}" properties="opacity" duration="400"/>
+        </Transition>
+    </transitions>
+</Item>
diff --git a/demos/declarative/phonebrowser/content/Star.qml b/demos/declarative/phonebrowser/content/Star.qml
new file mode 100644
index 0000000..37d314b
--- /dev/null
+++ b/demos/declarative/phonebrowser/content/Star.qml
@@ -0,0 +1,25 @@
+<Item id="Container" width="24" height="24">
+    <properties>
+        <Property name="rating"/>
+        <Property name="on"/>
+    </properties>
+
+    <signals>
+        <Signal name="clicked"/>
+    </signals>
+
+    <Image id="Image" source="pics/ghns_star.png" x="6" y="7" opacity="0.4" scale="0.5"/>
+    <MouseRegion anchors.fill="{Container}" onClicked="Container.clicked.emit()"/>
+
+    <states>
+        <State name="on" when="{Container.on == true}">
+            <SetProperties target="{Image}" opacity="1" scale="1" x="1" y="0"/>
+        </State>
+    </states>
+    <transitions>
+        <Transition>
+            <NumericAnimation properties="opacity,scale,x,y" easing="easeOutBounce"/>
+        </Transition>
+    </transitions>
+
+</Item>
diff --git a/demos/declarative/phonebrowser/content/pics/background.png b/demos/declarative/phonebrowser/content/pics/background.png
new file mode 100644
index 0000000..5b37072
Binary files /dev/null and b/demos/declarative/phonebrowser/content/pics/background.png differ
diff --git a/demos/declarative/phonebrowser/content/pics/button-pressed.png b/demos/declarative/phonebrowser/content/pics/button-pressed.png
new file mode 100644
index 0000000..e434d32
Binary files /dev/null and b/demos/declarative/phonebrowser/content/pics/button-pressed.png differ
diff --git a/demos/declarative/phonebrowser/content/pics/button.png b/demos/declarative/phonebrowser/content/pics/button.png
new file mode 100644
index 0000000..56a63ce
Binary files /dev/null and b/demos/declarative/phonebrowser/content/pics/button.png differ
diff --git a/demos/declarative/phonebrowser/content/pics/ghns_star.png b/demos/declarative/phonebrowser/content/pics/ghns_star.png
new file mode 100644
index 0000000..4ad43cc
Binary files /dev/null and b/demos/declarative/phonebrowser/content/pics/ghns_star.png differ
diff --git a/demos/declarative/phonebrowser/content/pics/reflection.png b/demos/declarative/phonebrowser/content/pics/reflection.png
new file mode 100644
index 0000000..c143a48
Binary files /dev/null and b/demos/declarative/phonebrowser/content/pics/reflection.png differ
diff --git a/demos/declarative/phonebrowser/content/pics/shadow-bottom.png b/demos/declarative/phonebrowser/content/pics/shadow-bottom.png
new file mode 100644
index 0000000..523f6e7
Binary files /dev/null and b/demos/declarative/phonebrowser/content/pics/shadow-bottom.png differ
diff --git a/demos/declarative/phonebrowser/content/pics/shadow-corner.png b/demos/declarative/phonebrowser/content/pics/shadow-corner.png
new file mode 100644
index 0000000..ef8c856
Binary files /dev/null and b/demos/declarative/phonebrowser/content/pics/shadow-corner.png differ
diff --git a/demos/declarative/phonebrowser/content/pics/shadow-right-screen.png b/demos/declarative/phonebrowser/content/pics/shadow-right-screen.png
new file mode 100644
index 0000000..9856c4f
Binary files /dev/null and b/demos/declarative/phonebrowser/content/pics/shadow-right-screen.png differ
diff --git a/demos/declarative/phonebrowser/content/pics/shadow-right.png b/demos/declarative/phonebrowser/content/pics/shadow-right.png
new file mode 100644
index 0000000..f534a35
Binary files /dev/null and b/demos/declarative/phonebrowser/content/pics/shadow-right.png differ
diff --git a/demos/declarative/phonebrowser/dummydata/PhonesModel.qml b/demos/declarative/phonebrowser/dummydata/PhonesModel.qml
new file mode 100644
index 0000000..d4f6269
--- /dev/null
+++ b/demos/declarative/phonebrowser/dummydata/PhonesModel.qml
@@ -0,0 +1,137 @@
+<ListModel id="PhonesModel">
+    <Phone>
+        <title>Nokia N97</title>
+        <thumb>http://www.forum.nokia.com/devices/pics/N97_main.jpg</thumb>
+        <description>
+        The Nokia N97 is a S60 5th Edition mobile computer with a large 3,5?, bright nHD (640 x 360 pixels and 16:9 aspect ratio) TFT color display with resistive touch screen and tactile feedback. The device provides excellent user experience for internet and entertainment by combining qwerty keyboard with touch UI and Home screen functionality. Use the N97 to connect to mobile broadband using WLAN or HSDPA (3.5G). Find directions and locations with the integrated A-GPS and included maps. Additional features include game titles with N-Gage, a 5 mega pixel camera with dual LED flash and automatic geotagging of images and videos.
+        </description>
+        <specifications>
+        <![CDATA[
+            <table width=300>
+            <tr><td width=50%>Resolution     <td width=50%>360 x 640   
+            <tr><td>Color Depth    <td>24 bit  
+            <tr><td>Device Size    <td>117.2 x 55.3 x 15.9 mm
+            <tr><td>Volume         <td>88 cc   
+            <tr><td>Weight         <td>150 g
+            </table>
+        ]]>
+        </specifications>
+        <url>http://www.forum.nokia.com/devices/N97</url>
+        <rating>5</rating>
+    </Phone>
+    <Phone>
+        <title>Nokia 5800 XpressMusic</title>
+        <thumb>http://www.forum.nokia.com/devices/pics/5800_main.jpg</thumb>
+        <description>
+        The Nokia 5800 XpressMusic is a S60 5th Edition device with a resistive touch screen and tactile feedback. The device has a large 3,2?, bright nHD (640 x 360 pixels and 16:9 aspect ratio) color display. The device has variety of input methods: stylus, plectrum and finger touch support for text input and UI control (alphanumeric keypad, full and mini qwerty keyboard, handwriting recognition). Use the Nokia 5800 XpressMusic to connect to mobile broadband using WLAN or HSDPA (3.5G). Find directions and locations with the integrated A-GPS and included maps. Additional features include a 3.2 megapixel camera with dual LED flash, Bluetooth 2.0 +EDR, and USB 2.0 High-Speed. Supported WCDMA frequencies depend on the region where the device is available. 
+        </description>
+        <specifications>
+        <![CDATA[
+            <table width=300>
+            <tr><td width=50%>Resolution     <td width=50%>360 x 640   
+            <tr><td>Color Depth    <td>24 bit  
+            <tr><td>Device Size    <td>111 x 51.7 x 15.5 mm
+            <tr><td>Volume         <td>83 cc   
+            <tr><td>Weight         <td>109 g
+            </table>
+        ]]>
+        </specifications>
+        <url>http://www.forum.nokia.com/devices/5800_XpressMusic</url>
+        <rating>5</rating>
+    </Phone>
+    <Phone>
+        <title>E75</title>
+        <thumb>http://www.forum.nokia.com/devices/pics/E75_main.jpg</thumb>
+        <description>The Nokia E75 is a GSM/WCDMA dual-mode business smartphone supporting WCDMA/HSDPA, EGSM, and WLAN. The device features a side slider qwerty keyboard for optimal email experience. Enjoy videos, music, and graphics on the 2.4? QVGA display and orientation sensor. Find directions and locations with the integrated A-GPS and included maps. Take photos with a 3.2-megapixel autofocus camera. Additional features include USB charging with simultaneous data transfer, Bluetooth 2.0 +EDR, and USB 2.0 High-Speed. Supported WCDMA frequencies depend on the region where the device is available.</description>
+        <specifications>
+        <![CDATA[
+            <table width=300>
+            <tr><td width=50%>Resolution     <td width=50%>240 x 320   
+            <tr><td>Color Depth    <td>24 bit  
+            <tr><td>Device Size    <td>111.8 x 501 x 14.4 mm   
+            <tr><td>Volume         <td>69 cc   
+            <tr><td>Weight         <td>139 g
+            </table>
+        ]]>
+        </specifications>
+        <url>http://www.forum.nokia.com/devices/E75</url>
+        <rating>5</rating>
+    </Phone>
+    <Phone>
+        <title>Nokia N810</title>
+        <thumb>http://www.forum.nokia.com/devices/pics/n810_main.jpg</thumb>
+        <description>
+        The Nokia N810 features include Voice-over-IP (VoIP) Internet and video calling, Instant Messaging, an integrated slide-out QWERTY keyboard and touch screen. The N810 lets you stay connected on the go with WLAN or Bluetooth 2.0 +EDR and a Bluetooth enabled mobile phone. The hi-resolution 4.13", 800 x 480 screen and the integrated web cam add to the internet experience. Use the Nokia N810 to play music and videos with the built-in stereo speakers or use the 3.5mm stereo plug with headphones. The Nokia N810 also has an integrated GPS receiver which allows you to pinpoint your position and find points-of-interests using pre-loaded maps. 
+        </description>
+        <specifications>
+        <![CDATA[
+            <table width=300>
+            <tr><td width=50%>Resolution     <td width=50%>800 x 480   
+            <tr><td>Color Depth    <td>16 bit  
+            <tr><td>Device Size    <td>128 x 72 x 14 mm
+            <tr><td>Weight         <td>225 g
+            </table>
+        ]]>
+        </specifications>
+        <url>http://www.forum.nokia.com/devices/N810</url>
+        <rating>5</rating>
+    </Phone>
+    <Phone>
+        <title>Nokia 6260 slide</title>
+        <thumb>http://www.forum.nokia.com/devices/pics/6260slide_main.jpg</thumb>
+        <description>
+        The Nokia 6260 slide is a Series 40 6th Edition phone, supporting quad-band GSM 850/900/1800/1900, triple-band WCDMA 900/1900/2100 and WLAN. Other key features include integrated A-GPS with included maps, a 5.0 megapixel camera with LED flash and Carl Zeiss optics, WebKit Open Source Browser, Flash Lite 3.0, Bluetooth 2.1 + EDR and MIDP Java 2.1 with additional Java APIs. Supported WCDMA frequencies depend on the region where the device is available. 
+        </description>
+        <specifications>
+        <![CDATA[
+            <table width=300>
+            <tr><td width=50%>Resolution     <td width=50%>320 x 480   
+            <tr><td>Color Depth    <td>24 bit  
+            <tr><td>Device Size    <td>99.4 x 46.5 x 15.4 mm
+            <tr><td>Volume         <td>64.5 cc   
+            <tr><td>Weight         <td>114 g
+            </table>
+        ]]>
+        </specifications>
+        <url>http://www.forum.nokia.com/devices/6260_slide</url>
+        <rating>5</rating>
+    </Phone>
+    <Phone>
+        <title>Nokia 2330 classic</title>
+        <thumb>http://www.forum.nokia.com/devices/pics/2330_main.jpg</thumb>
+        <description>
+        The Nokia 2330 classic is a Dual-band GPRS phone for EGSM 900/1800 or GSM 850/1900 (for some markets) that includes a VGA camera, Stereo FM radio with recording feature, Bluetooth 2.0, Mail on Ovi and MIDP 2.1 APIs for application creation. 
+        </description>
+        <specifications>
+        <![CDATA[
+            <table width=300>
+            <tr><td width=50%>Resolution     <td width=50%>128 x 160   
+            <tr><td>Color Depth    <td>16 bit  
+            <tr><td>Device Size    <td>107 x 46 x 13.8 mm
+            <tr><td>Weight         <td>80 g
+            </table>
+        ]]>
+        </specifications>
+        <url>http://www.forum.nokia.com/devices/2330_classic</url>
+        <rating>5</rating>
+    </Phone>
+    <Phone>
+        <title>Nokia 2355</title>
+        <thumb>http://www.forum.nokia.com/devices/pics/2355_main.jpg</thumb>
+        <description>
+        The Nokia 2355 CDMA phone features a 64K color display, FM radio, integrated flashlight, WAP 2.0 browsing, MMS, Java(tm) and Brew. It's stylishly polished fold design will keep you in the spotlight. 
+        </description>
+        <specifications>
+        <![CDATA[
+            <table width=300>
+            <tr><td width=50%>Resolution     <td width=50%>128 x 128   
+            <tr><td>Color Depth    <td>16 bit  
+            <tr><td>Device Size    <td>81 x 43 x 22 mm
+            <tr><td>Weight         <td>78 g
+            </table>
+        ]]>
+        </specifications>
+        <url>http://www.forum.nokia.com/devices/2355</url>
+        <rating>5</rating>
+    </Phone>
+</ListModel>
diff --git a/demos/declarative/phonebrowser/phonebrowser.qml b/demos/declarative/phonebrowser/phonebrowser.qml
new file mode 100644
index 0000000..be87fa7
--- /dev/null
+++ b/demos/declarative/phonebrowser/phonebrowser.qml
@@ -0,0 +1,36 @@
+<?qtfx namespacepath:=content ?>
+<Item width="800" height="480" id="MainWindow">
+    <properties>
+        <Property name="minimized" value="false"/>
+    </properties>
+
+    <Item id="Background">
+        <Image source="content/pics/background.png" opaque="true"/>
+
+        <Rect id="Menu" x="-150" width="150" height="480" color="#232323">
+            <Text id="IconText" x="40" y="110" font.bold="true" font.size="9" text="Nokia Devices" color="white" style="Raised" styleColor="black"/>
+            <Image source="content/pics/shadow-right-screen.png" x="150" height="480" tile="true"/>
+        </Rect>
+
+        <PhonesPathView id="PhonesPathView" model="{PhonesModel}" y="60" width="800" height="360"/>
+        <PhoneInfoContainer id="PhoneInfoContainer" width="750" x="25" y="500" height="440"/>
+        <MediaButton id="CloseButton" x="680" y="440" text="Close" onClicked="MainWindow.minimized = true"/>
+
+        <states>
+            <State name="Minimized" when="{MainWindow.minimized == true}">
+                <SetProperties target="{Background}" x="75"/>
+                <SetProperties target="{Menu}" x="-75"/>
+            </State>
+        </states>
+        <transitions>
+            <Transition fromState="*" toState="*">
+                <NumericAnimation properties="x,y,size" duration="500" easing="easeInOutQuad"/>
+            </Transition>
+        </transitions>
+    </Item>
+
+    <Text id="CategoryText" x="300" y="15" text="Nokia Devices" font.size="22" color="white" style="Raised" styleColor="black"/>
+    <Item id="Stack" x="45" y="50"/>
+
+</Item>
+
-- 
cgit v0.12


From dc8e57918e0ea3cd4d8f2dafc79ebf999953bf98 Mon Sep 17 00:00:00 2001
From: Yann Bodson <yann.bodson@nokia.com>
Date: Thu, 30 Apr 2009 11:31:48 +1000
Subject: Convert phonebrowser.

---
 .../phonebrowser/content/LikeOMeter.qml            |  47 +++--
 .../phonebrowser/content/MediaButton.qml           |  61 ++++---
 .../phonebrowser/content/PhoneInfoContainer.qml    | 179 ++++++++++++-------
 .../phonebrowser/content/PhonesPathView.qml        | 197 +++++++++++++--------
 .../declarative/phonebrowser/content/ScrollBar.qml |  56 ++++--
 demos/declarative/phonebrowser/content/Star.qml    |  68 ++++---
 demos/declarative/phonebrowser/phonebrowser.qml    |  93 ++++++----
 7 files changed, 447 insertions(+), 254 deletions(-)

diff --git a/demos/declarative/phonebrowser/content/LikeOMeter.qml b/demos/declarative/phonebrowser/content/LikeOMeter.qml
index 68584a5..31b8195 100644
--- a/demos/declarative/phonebrowser/content/LikeOMeter.qml
+++ b/demos/declarative/phonebrowser/content/LikeOMeter.qml
@@ -1,13 +1,34 @@
-<Item id="Container">
-    <properties>
-        <Property name="rating" value="2"/>
-    </properties>
-
-    <HorizontalLayout>
-        <Star rating="0" onClicked="Container.rating = rating" on="{Container.rating >= 0}"/>
-        <Star rating="1" onClicked="Container.rating = rating" on="{Container.rating >= 1}"/>
-        <Star rating="2" onClicked="Container.rating = rating" on="{Container.rating >= 2}"/>
-        <Star rating="3" onClicked="Container.rating = rating" on="{Container.rating >= 3}"/>
-        <Star rating="4" onClicked="Container.rating = rating" on="{Container.rating >= 4}"/>
-    </HorizontalLayout>
-</Item>
+Item {
+    id: Container
+    properties: Property {
+        name: "rating"
+        value: 2
+    }
+    HorizontalLayout {
+        Star {
+            rating: 0
+            onClicked: { Container.rating = rating }
+            on: Container.rating >= 0
+        }
+        Star {
+            rating: 1
+            onClicked: { Container.rating = rating }
+            on: Container.rating >= 1
+        }
+        Star {
+            rating: 2
+            onClicked: { Container.rating = rating }
+            on: Container.rating >= 2
+        }
+        Star {
+            rating: 3
+            onClicked: { Container.rating = rating }
+            on: Container.rating >= 3
+        }
+        Star {
+            rating: 4
+            onClicked: { Container.rating = rating }
+            on: Container.rating >= 4
+        }
+    }
+}
diff --git a/demos/declarative/phonebrowser/content/MediaButton.qml b/demos/declarative/phonebrowser/content/MediaButton.qml
index 6c672ea..bb2510a 100644
--- a/demos/declarative/phonebrowser/content/MediaButton.qml
+++ b/demos/declarative/phonebrowser/content/MediaButton.qml
@@ -1,21 +1,40 @@
-<Item id="Container">
-    <signals>
-        <Signal name="clicked"/>
-    </signals>
-
-    <properties>
-        <Property name="text"/>
-    </properties>
-
-    <Image id="Image" source="pics/button.png"/>
-    <Image id="Pressed" source="pics/button-pressed.png" opacity="0"/>
-    <MouseRegion id="MouseRegion" anchors.fill="{Image}" onClicked="Container.clicked.emit();"/>
-    <Text font.bold="true" color="white" anchors.centeredIn="{Image}" text="{Container.text}"/>
-    <width>{Image.width}</width>
-
-    <states>
-        <State name="Pressed" when="{MouseRegion.pressed == true}">
-            <SetProperties target="{Pressed}" opacity="1"/>
-        </State>
-    </states>
-</Item>
+Item {
+    id: Container
+    signals: Signal {
+        name: "clicked"
+    }
+    properties: Property {
+        name: "text"
+    }
+    Image {
+        id: Image
+        source: "pics/button.png"
+    }
+    Image {
+        id: Pressed
+        source: "pics/button-pressed.png"
+        opacity: 0
+    }
+    MouseRegion {
+        id: MouseRegion
+        anchors.fill: Image
+        onClicked: { Container.clicked.emit(); }
+    }
+    Text {
+        font.bold: true
+        color: "white"
+        anchors.centeredIn: Image
+        text: Container.text
+    }
+    width: Image.width
+    states: [
+        State {
+            name: "Pressed"
+            when: MouseRegion.pressed == true
+            SetProperties {
+                target: Pressed
+                opacity: 1
+            }
+        }
+    ]
+}
diff --git a/demos/declarative/phonebrowser/content/PhoneInfoContainer.qml b/demos/declarative/phonebrowser/content/PhoneInfoContainer.qml
index 34fd889..da475b1 100644
--- a/demos/declarative/phonebrowser/content/PhoneInfoContainer.qml
+++ b/demos/declarative/phonebrowser/content/PhoneInfoContainer.qml
@@ -1,66 +1,113 @@
-<Flipable id="Container">
-    <properties>
-        <Property name="frontContainer" value="{ContainerFront}"/>
-        <Property name="flickableArea" value="{Flickable}"/>
-        <Property name="phoneTitle" value="N/A"/>
-        <Property name="phoneDescription" value="..."/>
-        <Property name="phoneSpecifications" value=""/>
-        <Property name="phoneUrl" value=""/>
-        <Property name="rating" value="2"/>
-    </properties>
-
-    <signals>
-        <Signal name="closed"/>
-    </signals>
-
-    <axis>
-        <Axis startX="{Container.width / 2}" endX="{Container.width / 2}" endY="1" />
-    </axis>
-
-    <front>
-        <Item id="ContainerFront" anchors.fill="{Container}">
-            <Rect anchors.fill="{parent}" color="black" opacity="0.4" pen.color="white" pen.width="2"/>
-
-            <MediaButton id="BackButton" x="630" y="400" text="Back" onClicked="Container.closed.emit()"/>
-            <MediaButton id="MoreButton" x="530" y="400" text="More..." onClicked="Container.state='Back'"/>
-
-            <Text id="TitleText" style="Raised" styleColor="black" color="white" x="420" y="30" width="{parent.width}"
-                  text="{Container.phoneTitle}" font.size="22"/>
-
-            <LikeOMeter x="420" y="75" rating="{Container.rating}"/>
-
-            <Flickable id="Flickable" x="420" width="280" height="260" y="120" clip="true" viewportWidth="280"
-                       viewportHeight="{DescriptionText.height}">
-                <Text id="DescriptionText"  wrap="true" color="white" width="{parent.width}"
-                      text="{Container.phoneDescription}" font.size="12"/>
-            </Flickable>
-            <Text color="white" width="300" x="50" y="300" text="{Container.phoneSpecifications}"/>
-            <ScrollBar id="ScrollBar" x="720" y="{Flickable.y}" width="7" height="{Flickable.height}" opacity="0"
-                       flickableArea="{Flickable}" clip="true"/>
-        </Item>
-    </front>
-
-    <back>
-        <Item anchors.fill="{Container}">
-            <Rect anchors.fill="{parent}" color="black" opacity="0.4" pen.color="white" pen.width="2"/>
-            <Flickable x="10" width="{Container.width-20}" height="{Container.height-20}" y="10" clip="true"
-                    viewportWidth="{UrlView.width}" viewportHeight="{UrlView.height}">
-                <WebView id="UrlView" url="{Container.phoneUrl}" idealWidth="{parent.width}"/>
-            </Flickable>
-            <MediaButton id="BackButton2" x="630" y="400" text="Back" onClicked="Container.state=''"/>
-        </Item>
-    </back>
-
-    <states>
-        <State name="Back">
-            <SetProperty target="{Container}" property="rotation" value="180"/>
-        </State>
-    </states>
-
-    <transitions>
-        <Transition>
-            <NumericAnimation easing="easeInOutQuad" properties="rotation" duration="500"/>
-        </Transition>
-    </transitions>
-
-</Flipable>
+Flipable {
+    id: Container
+
+    properties: [
+        Property { name: "frontContainer"; value: ContainerFront },
+        Property { name: "flickableArea"; value: Flickable },
+        Property { name: "phoneTitle"; value: "N/A" },
+        Property { name: "phoneDescription"; value: "..." },
+        Property { name: "phoneSpecifications"; value: "" },
+        Property { name: "phoneUrl"; value: "" },
+        Property { name: "rating"; value: 2 }
+    ]
+
+    signals: Signal { name: "closed" }
+
+    axis: Axis { startX: Container.width / 2; endX: Container.width / 2; endY: 1 }
+
+    front: Item {
+        id: ContainerFront; anchors.fill: Container
+
+        Rect {
+            anchors.fill: parent
+            color: "black"; opacity: 0.4
+            pen.color: "white"; pen.width: 2
+        }
+
+        MediaButton {
+            id: BackButton; x: 630; y: 400; text: "Back"
+            onClicked: { Container.closed.emit() }
+        }
+
+        MediaButton {
+            id: MoreButton; x: 530; y: 400; text: "More..."
+            onClicked: { Container.state='Back' }
+        }
+
+        Text {
+            id: TitleText
+            style: Raised; styleColor: "black"
+            color: "white"
+            x: 420; y: 30; width: parent.width
+            text: Container.phoneTitle; font.size: 22
+        }
+
+        LikeOMeter { x: 420; y: 75; rating: Container.rating }
+
+        Flickable {
+            id: Flickable
+            x: 420; width: 280; height: 260; y: 120; clip: true
+            viewportWidth: 280; viewportHeight: DescriptionText.height
+
+            Text {
+                id: DescriptionText
+                wrap: true
+                color: "white"
+                width: parent.width
+                text: Container.phoneDescription
+                font.size: 12
+            }
+        }
+
+        Text {
+            color: "white"; width: 300; x: 50; y: 300
+            text: Container.phoneSpecifications
+        }
+
+        ScrollBar {
+            id: ScrollBar
+            x: 720; y: Flickable.y; width: 7
+            height: Flickable.height; opacity: 0
+            flickableArea: Flickable; clip: true
+        }
+    }
+
+    back: Item {
+        anchors.fill: Container
+
+        Rect {
+            anchors.fill: parent
+            color: "black"
+            opacity: 0.4
+            pen.color: "white"
+            pen.width: 2
+        }
+
+        Flickable {
+            width: Container.width-20
+            height: Container.height-20
+            x: 10; y: 10; clip: true
+            viewportWidth: UrlView.width
+            viewportHeight: UrlView.height
+
+            WebView { id: UrlView; url: Container.phoneUrl; idealWidth: parent.width }
+        }
+
+        MediaButton {
+            id: BackButton2; x: 630; y: 400; text: "Back"; onClicked: { Container.state='' }
+        }
+    }
+
+    states: [
+        State {
+            name: "Back"
+            SetProperty { target: Container; property: "rotation"; value: 180 }
+        }
+    ]
+
+    transitions: [
+        Transition {
+            NumericAnimation { easing: "easeInOutQuad"; properties: "rotation"; duration: 500 }
+        }
+    ]
+}
diff --git a/demos/declarative/phonebrowser/content/PhonesPathView.qml b/demos/declarative/phonebrowser/content/PhonesPathView.qml
index df7e742..acef6c3 100644
--- a/demos/declarative/phonebrowser/content/PhonesPathView.qml
+++ b/demos/declarative/phonebrowser/content/PhonesPathView.qml
@@ -1,79 +1,120 @@
-<PathView id="Container" pathItemCount="6">
-
-    <path>
-        <Path startX="-50" startY="40">
-            <PathAttribute name="scale" value="0.2"/>
-            <PathCubic x="400" y="220" control1X="140" control1Y="40" control2X="210" control2Y="220"/>
-            <PathAttribute name="scale" value="1.2"/>
-            <PathAttribute name="z" value="1"/>
-            <PathCubic x="850" y="40" control2X="660" control2Y="40" control1X="590" control1Y="220"/>
-            <PathAttribute name="scale" value="0.2"/>
-        </Path>
-    </path>
-
-    <delegate>
-        <Component id="PhoneDelegate">
-            <Item id="Wrapper" width="320" height="200" scale="{Wrapper.PathView.scale}" z="{Wrapper.PathView.z}">
-                <Connection sender="{PhoneInfoContainer}" script="if (Wrapper.state == 'Details') Wrapper.state = ''" signal="closed()"/>
-
-                <Script>
-                    function phoneClicked() {
-                        if (MainWindow.minimized == true) {
-                            MainWindow.minimized = false;
-                        } else {
-                            PhoneInfoContainer.phoneTitle = title;
-                            PhoneInfoContainer.flickableArea.yPosition = 0;
-                            PhoneInfoContainer.phoneDescription = description;
-                            PhoneInfoContainer.phoneSpecifications = specifications;
-                            PhoneInfoContainer.phoneUrl = url;
-                            PhoneInfoContainer.rating = rating;
-                            Wrapper.state = "Details";
-                        }
+PathView {
+    id: Container; pathItemCount: 6
+
+    path: Path {
+        startX: -50; startY: 40;
+
+        PathAttribute { name: "scale"; value: 0.2 }
+
+        PathCubic {
+            x: 400; y: 220
+            control1X: 140; control1Y: 40
+            control2X: 210; control2Y: 220
+        }
+
+        PathAttribute { name: "scale"; value: 1.2  }
+        PathAttribute { name: "z"; value: 1 }
+
+        PathCubic {
+            x: 850; y: 40
+            control2X: 660; control2Y: 40
+            control1X: 590; control1Y: 220
+        }
+
+        PathAttribute { name: "scale"; value: 0.2 }
+    }
+
+    delegate: Component {
+        id: PhoneDelegate
+
+        Item {
+            id: Wrapper; width: 320; height: 200
+            scale: Wrapper.PathView.scale; z: Wrapper.PathView.z
+
+            Connection {
+                sender: PhoneInfoContainer; signal: "closed()"
+                script: { if (Wrapper.state == 'Details') Wrapper.state = '' }
+            }
+
+            Script {
+               function phoneClicked() {
+                  if (MainWindow.minimized == true) {
+                     MainWindow.minimized = false;
+                  } else {
+                     PhoneInfoContainer.phoneTitle = title;
+                     PhoneInfoContainer.flickableArea.yPosition = 0;
+                     PhoneInfoContainer.phoneDescription = description;
+                     PhoneInfoContainer.phoneSpecifications = specifications;
+                     PhoneInfoContainer.phoneUrl = url;
+                     PhoneInfoContainer.rating = rating;
+                     Wrapper.state = "Details";
+                  }
+               }
+            }
+
+            Rect {
+                id: Dvd; anchors.fill: parent; color: "white"
+
+                Item {
+                    x: (parent.width-width)/2
+                    y: (parent.height-height)/2
+                    width: Thumb.width*Thumb.scale
+                    height: Thumb.height*Thumb.scale
+
+                    Image {
+                        id: Thumb; source: thumb
+                        scale: 0.95*Math.min(Dvd.height/height,Dvd.width/width)
                     }
-                </Script>
-
-                <Rect id="Dvd" anchors.fill="{parent}" color="white">
-                    <Item x="{(parent.width-width)/2}" y="{(parent.height-height)/2}" width="{Thumb.width*Thumb.scale}" height="{Thumb.height*Thumb.scale}">
-                        <Image id="Thumb" source="{thumb}" scale="{0.95*Math.min(Dvd.height/height,Dvd.width/width)}"/>
-                    </Item>
-                    <!-- <Image source="pics/reflection.png" anchors.fill="{parent}"/> -->
-                    <Image source="pics/shadow-right.png" x="{Dvd.width}" height="{Dvd.height}"/>
-                    <Image source="pics/shadow-bottom.png" y="{Dvd.height}" width="{Dvd.width}"/>
-                    <Image id="Corner" source="pics/shadow-corner.png" x="{Dvd.width}" y="{Dvd.height}"/>
-                </Rect>
-
-                <MouseRegion anchors.fill="{Wrapper}" onClicked="phoneClicked()"/>
-
-                <states>
-                    <State name="Details">
-                        <ParentChange target="{Wrapper}" parent="{PhoneInfoContainer.frontContainer}"/>
-                        <SetProperties target="{Wrapper}" x="50" y="60" scale="1"/>
-                        <SetProperties target="{PhoneInfoContainer}" y="20"/>
-                        <SetProperties target="{Container}" y="-480"/>
-                        <SetProperties target="{CloseButton}" opacity="0"/>
-                        <SetProperties target="{CategoryText}" y="-50"/>
-                    </State>
-                    <State name="Stacked" when="{MainWindow.minimized == true}">
-                        <ParentChange target="{Wrapper}" parent="{Stack}"/>
-                        <SetProperties target="{Wrapper}" x="0" y="0" scale="0.2"/>
-                        <SetProperties target="{CloseButton}" opacity="0"/>
-                        <SetProperties target="{CategoryText}" y="-50"/>
-                    </State>
-                </states>
-
-                <transitions>
-                    <Transition fromState="" toState="Details,Stacked">
-                        <ParentChangeAction/>
-                        <NumericAnimation properties="x,y,scale,opacity" duration="500" easing="easeInOutQuad"/>
-                    </Transition>
-                    <Transition fromState="Details,Stacked" toState="">
-                        <ParentChangeAction/>
-                        <NumericAnimation properties="x,y,scale,opacity" duration="500" easing="easeInOutQuad"/>
-                    </Transition>
-                </transitions>
-
-            </Item>
-        </Component>
-    </delegate>
-
-</PathView>
+                }
+
+                Image { source: "pics/shadow-right.png"; x: Dvd.width; height: Dvd.height }
+                Image { source: "pics/shadow-bottom.png"; y: Dvd.height; width: Dvd.width }
+
+                Image {
+                    id: Corner
+                    source: "pics/shadow-corner.png"
+                    x: Dvd.width; y: Dvd.height
+                }
+            }
+
+            MouseRegion { anchors.fill: Wrapper; onClicked: { phoneClicked() } }
+
+            states: [
+                State {
+                    name: "Details"
+                    ParentChange { target: Wrapper; parent: PhoneInfoContainer.frontContainer }
+                    SetProperties { target: Wrapper; x: 50; y: 60; scale: 1 }
+                    SetProperties { target: PhoneInfoContainer; y: 20 }
+                    SetProperties { target: Container; y: "-480" }
+                    SetProperties { target: CloseButton; opacity: 0 }
+                    SetProperties { target: CategoryText; y: "-50" }
+                },
+
+                State {
+                    name: "Stacked"
+                    when: MainWindow.minimized == true
+                    ParentChange { target: Wrapper; parent: Stack }
+                    SetProperties {target: Wrapper; x: 0; y: 0; scale: 0.2 }
+                    SetProperties { target: CloseButton; opacity: 0 }
+                    SetProperties { target: CategoryText; y: "-50" }
+                }
+            ]
+
+            transitions: [
+                Transition {
+                    fromState: ""; toState: "Details,Stacked"
+                    ParentChangeAction { }
+                    NumericAnimation { properties: "x,y,scale,opacity"; duration: 500; easing: "easeInOutQuad" }
+                },
+
+                Transition {
+                    fromState: "Details,Stacked"
+                    toState: ""
+                    ParentChangeAction { }
+                    NumericAnimation { properties: "x,y,scale,opacity"; duration: 500; easing: "easeInOutQuad" }
+                }
+            ]
+
+        }
+    }
+}
diff --git a/demos/declarative/phonebrowser/content/ScrollBar.qml b/demos/declarative/phonebrowser/content/ScrollBar.qml
index 974f4d0..a0f2925 100644
--- a/demos/declarative/phonebrowser/content/ScrollBar.qml
+++ b/demos/declarative/phonebrowser/content/ScrollBar.qml
@@ -1,18 +1,38 @@
-<Item id="Container">
-    <properties>
-        <Property name="flickableArea"/>
-    </properties>
-
-    <Rect radius="5" color="black" opacity="0.3" pen.color="white" pen.width="2" x="0" y="{flickableArea.pageYPosition * Container.height}"
-          width="{parent.width}" height="{flickableArea.pageHeight * Container.height}"/>
-    <states>
-        <State name="show" when="{flickableArea.moving}">
-            <SetProperties target="{Container}" opacity="1" />
-        </State>
-    </states>
-    <transitions>
-        <Transition fromState="*" toState="*">
-            <NumericAnimation target="{Container}" properties="opacity" duration="400"/>
-        </Transition>
-    </transitions>
-</Item>
+Item {
+    id: Container
+    properties: Property {
+        name: "flickableArea"
+    }
+    Rect {
+        radius: 5
+        color: "black"
+        opacity: 0.3
+        pen.color: "white"
+        pen.width: 2
+        x: 0
+        y: flickableArea.pageYPosition * Container.height
+        width: parent.width
+        height: flickableArea.pageHeight * Container.height
+    }
+    states: [
+        State {
+            name: "show"
+            when: flickableArea.moving
+            SetProperties {
+                target: Container
+                opacity: 1
+            }
+        }
+    ]
+    transitions: [
+        Transition {
+            fromState: "*"
+            toState: "*"
+            NumericAnimation {
+                target: Container
+                properties: "opacity"
+                duration: 400
+            }
+        }
+    ]
+}
diff --git a/demos/declarative/phonebrowser/content/Star.qml b/demos/declarative/phonebrowser/content/Star.qml
index 37d314b..ebcd78b 100644
--- a/demos/declarative/phonebrowser/content/Star.qml
+++ b/demos/declarative/phonebrowser/content/Star.qml
@@ -1,25 +1,47 @@
-<Item id="Container" width="24" height="24">
-    <properties>
-        <Property name="rating"/>
-        <Property name="on"/>
-    </properties>
+Item {
+    id: Container
+    width: 24
+    height: 24
 
-    <signals>
-        <Signal name="clicked"/>
-    </signals>
+    properties: [
+        Property { name: "rating" },
+        Property { name: "on" }
+    ]
 
-    <Image id="Image" source="pics/ghns_star.png" x="6" y="7" opacity="0.4" scale="0.5"/>
-    <MouseRegion anchors.fill="{Container}" onClicked="Container.clicked.emit()"/>
-
-    <states>
-        <State name="on" when="{Container.on == true}">
-            <SetProperties target="{Image}" opacity="1" scale="1" x="1" y="0"/>
-        </State>
-    </states>
-    <transitions>
-        <Transition>
-            <NumericAnimation properties="opacity,scale,x,y" easing="easeOutBounce"/>
-        </Transition>
-    </transitions>
-
-</Item>
+    signals: Signal {
+        name: "clicked"
+    }
+    Image {
+        id: Image
+        source: "pics/ghns_star.png"
+        x: 6
+        y: 7
+        opacity: 0.4
+        scale: 0.5
+    }
+    MouseRegion {
+        anchors.fill: Container
+        onClicked: { Container.clicked.emit() }
+    }
+    states: [
+        State {
+            name: "on"
+            when: Container.on == true
+            SetProperties {
+                target: Image
+                opacity: 1
+                scale: 1
+                x: 1
+                y: 0
+            }
+        }
+    ]
+    transitions: [
+        Transition {
+            NumericAnimation {
+                properties: "opacity,scale,x,y"
+                easing: "easeOutBounce"
+            }
+        }
+    ]
+}
diff --git a/demos/declarative/phonebrowser/phonebrowser.qml b/demos/declarative/phonebrowser/phonebrowser.qml
index be87fa7..85d352d 100644
--- a/demos/declarative/phonebrowser/phonebrowser.qml
+++ b/demos/declarative/phonebrowser/phonebrowser.qml
@@ -1,36 +1,59 @@
-<?qtfx namespacepath:=content ?>
-<Item width="800" height="480" id="MainWindow">
-    <properties>
-        <Property name="minimized" value="false"/>
-    </properties>
-
-    <Item id="Background">
-        <Image source="content/pics/background.png" opaque="true"/>
-
-        <Rect id="Menu" x="-150" width="150" height="480" color="#232323">
-            <Text id="IconText" x="40" y="110" font.bold="true" font.size="9" text="Nokia Devices" color="white" style="Raised" styleColor="black"/>
-            <Image source="content/pics/shadow-right-screen.png" x="150" height="480" tile="true"/>
-        </Rect>
-
-        <PhonesPathView id="PhonesPathView" model="{PhonesModel}" y="60" width="800" height="360"/>
-        <PhoneInfoContainer id="PhoneInfoContainer" width="750" x="25" y="500" height="440"/>
-        <MediaButton id="CloseButton" x="680" y="440" text="Close" onClicked="MainWindow.minimized = true"/>
-
-        <states>
-            <State name="Minimized" when="{MainWindow.minimized == true}">
-                <SetProperties target="{Background}" x="75"/>
-                <SetProperties target="{Menu}" x="-75"/>
-            </State>
-        </states>
-        <transitions>
-            <Transition fromState="*" toState="*">
-                <NumericAnimation properties="x,y,size" duration="500" easing="easeInOutQuad"/>
-            </Transition>
-        </transitions>
-    </Item>
-
-    <Text id="CategoryText" x="300" y="15" text="Nokia Devices" font.size="22" color="white" style="Raised" styleColor="black"/>
-    <Item id="Stack" x="45" y="50"/>
-
-</Item>
+import "content"
 
+Item {
+    id: MainWindow; width: 800; height: 480
+
+    properties: Property { name: "minimized"; value: false }
+
+    Item {
+        id: Background
+
+        Image { source: "content/pics/background.png"; opaque: true }
+
+        Rect {
+            id: Menu; x: -150; width: 150; height: 480; color: "#232323"
+
+            Text {
+                id: IconText; x: 40; y: 110
+                font.bold: true; font.size: 9; text: "Nokia Devices"
+                color: "white"; style: Raised; styleColor: "black"
+            }
+
+            Image {
+                source: "content/pics/shadow-right-screen.png"
+                x: 150; height: 480; tile: true
+            }
+        }
+
+        PhonesPathView { id: PhonesPathView; model: PhonesModel; y: 60; width: 800; height: 360 }
+        PhoneInfoContainer { id: PhoneInfoContainer; width: 750; x: 25; y: 500; height: 440 }
+
+        MediaButton {
+            id: CloseButton; x: 680; y: 440; text: "Close"
+            onClicked: { MainWindow.minimized = true }
+        }
+
+        states: [
+            State {
+                name: "Minimized"
+                when: MainWindow.minimized == true
+                SetProperties { target: Background; x: 75 }
+                SetProperties { target: Menu; x: -75 }
+            }
+        ]
+
+        transitions: [
+            Transition {
+                fromState: "*"; toState: "*"
+                NumericAnimation { properties: "x,y,size"; duration: 500; easing: "easeInOutQuad" }
+            }
+        ]
+    }
+
+    Text {
+        id: CategoryText; x: 300; y: 15; text: "Nokia Devices"
+        font.size: 22; color: "white"; style: Raised; styleColor: "black"
+    }
+
+    Item { id: Stack; x: 45; y: 50 }
+}
-- 
cgit v0.12


From bab72866f444443632528fadd240eea6f79d66e2 Mon Sep 17 00:00:00 2001
From: Warwick Allison <warwick.allison@nokia.com>
Date: Thu, 30 Apr 2009 12:46:45 +1000
Subject: Compress sizeChanged signal to give width and height.

---
 src/declarative/util/qfxview.cpp | 16 ++++++++++++++--
 src/declarative/util/qfxview.h   |  1 +
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/declarative/util/qfxview.cpp b/src/declarative/util/qfxview.cpp
index e285890..42047b6 100644
--- a/src/declarative/util/qfxview.cpp
+++ b/src/declarative/util/qfxview.cpp
@@ -49,6 +49,7 @@
 #include "qicon.h"
 #include "qurl.h"
 #include "qboxlayout.h"
+#include "qbasictimer.h"
 
 #include "qmlbindablevalue.h"
 #include "qml.h"
@@ -100,6 +101,8 @@ public:
 
     QmlEngine engine;
     QmlComponent *component;
+    QBasicTimer resizetimer;
+
     void init();
 };
 
@@ -282,8 +285,17 @@ void QFxView::continueExecute()
 
 void QFxView::sizeChanged()
 {
-    if (d->root)
-        emit sceneResized(QSize(d->root->width(),d->root->height()));
+    // delay, so we catch both width and height changing.
+    d->resizetimer.start(0,this);
+}
+
+void QFxView::timerEvent(QTimerEvent* e)
+{
+    if (e->timerId() == d->resizetimer.timerId()) {
+        if (d->root)
+            emit sceneResized(QSize(d->root->width(),d->root->height()));
+        d->resizetimer.stop();
+    }
 }
 
 QFxItem* QFxView::addItem(const QString &xml, QFxItem* parent)
diff --git a/src/declarative/util/qfxview.h b/src/declarative/util/qfxview.h
index 3c4be20..c658f07 100644
--- a/src/declarative/util/qfxview.h
+++ b/src/declarative/util/qfxview.h
@@ -95,6 +95,7 @@ protected:
     virtual void resizeEvent(QResizeEvent *);
     void focusInEvent(QFocusEvent *);
     void focusOutEvent(QFocusEvent *);
+    void timerEvent(QTimerEvent*);
 
 private:
     friend class QFxViewPrivate;
-- 
cgit v0.12


From d7fe5cb94577c56a9fb656f6e61ec0b13f6f0a8f Mon Sep 17 00:00:00 2001
From: Warwick Allison <warwick.allison@nokia.com>
Date: Thu, 30 Apr 2009 12:48:07 +1000
Subject: Resizable. Resizing is not propagated to canvas view and root item.
 Examples may or may not resize meaningfully. Skins are device-oriented and so
 do not resize.

---
 tools/duiviewer/qfxviewer.cpp | 12 +++++++++---
 tools/duiviewer/qfxviewer.h   |  1 +
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/tools/duiviewer/qfxviewer.cpp b/tools/duiviewer/qfxviewer.cpp
index 7b39f53..b15a8bf 100644
--- a/tools/duiviewer/qfxviewer.cpp
+++ b/tools/duiviewer/qfxviewer.cpp
@@ -55,7 +55,7 @@ QFxViewer::QFxViewer(QFxTestEngine::TestMode testMode, const QString &testDir, Q
 
     QObject::connect(canvas, SIGNAL(sceneResized(QSize)), this, SLOT(sceneResized(QSize)));
     canvas->setFixedSize(width, height);
-    setFixedSize(width, height);
+    resize(width, height);
 }
 
 void QFxViewer::reload()
@@ -217,15 +217,21 @@ void QFxViewer::setRecordPeriod(int ms)
 
 void QFxViewer::sceneResized(QSize size)
 {
-    if(size.width() > 0 && size.height() > 0) {
+    if (size.width() > 0 && size.height() > 0) {
         canvas->setFixedSize(size.width(), size.height());
         if (skin)
             skin->setScreenSize(size);
         else
-            setFixedSize(size);
+            resize(size);
     }
 }
 
+void QFxViewer::resizeEvent(QResizeEvent *)
+{
+    if (!skin)
+        canvas->setFixedSize(width(),height());
+}
+
 void QFxViewer::keyPressEvent(QKeyEvent *event)
 {
     if (event->key() == Qt::Key_0 && devicemode)
diff --git a/tools/duiviewer/qfxviewer.h b/tools/duiviewer/qfxviewer.h
index 5733591..7a190c5 100644
--- a/tools/duiviewer/qfxviewer.h
+++ b/tools/duiviewer/qfxviewer.h
@@ -49,6 +49,7 @@ public slots:
 protected:
     virtual void keyPressEvent(QKeyEvent *);
     virtual void timerEvent(QTimerEvent *);
+    virtual void resizeEvent(QResizeEvent *);
 
 private:
     QString currentFileName;
-- 
cgit v0.12


From e3c91e87a06b73a06c86f93c69951768874bbaf6 Mon Sep 17 00:00:00 2001
From: Warwick Allison <warwick.allison@nokia.com>
Date: Thu, 30 Apr 2009 12:51:44 +1000
Subject: Fix crash Continues d62bc81491b4b3ef76d626fd56f736427ee1e20c

---
 src/declarative/fx/qfxwebview.cpp | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/declarative/fx/qfxwebview.cpp b/src/declarative/fx/qfxwebview.cpp
index b2ad06c..7c05088 100644
--- a/src/declarative/fx/qfxwebview.cpp
+++ b/src/declarative/fx/qfxwebview.cpp
@@ -1018,11 +1018,11 @@ QString QFxWebView::html() const
 void QFxWebView::setHtml(const QString &html, const QUrl &baseUrl)
 {
     Q_D(QFxWebView);
-    d->page->setViewportSize(QSize(
+    page()->setViewportSize(QSize(
         d->idealwidth>0 ? d->idealwidth : width(),
         d->idealheight>0 ? d->idealheight : height()));
     if (isComponentComplete())
-        d->page->mainFrame()->setHtml(html, baseUrl);
+        page()->mainFrame()->setHtml(html, baseUrl);
     else {
         d->pending = d->PendingHtml;
         d->pending_url = baseUrl;
@@ -1033,12 +1033,12 @@ void QFxWebView::setHtml(const QString &html, const QUrl &baseUrl)
 void QFxWebView::setContent(const QByteArray &data, const QString &mimeType, const QUrl &baseUrl)
 {
     Q_D(QFxWebView);
-    d->page->setViewportSize(QSize(
+    page()->setViewportSize(QSize(
         d->idealwidth>0 ? d->idealwidth : width(),
         d->idealheight>0 ? d->idealheight : height()));
 
     if (isComponentComplete())
-        d->page->mainFrame()->setContent(data,mimeType,baseUrl);
+        page()->mainFrame()->setContent(data,mimeType,baseUrl);
     else {
         d->pending = d->PendingContent;
         d->pending_url = baseUrl;
-- 
cgit v0.12


From d85c0c07b72476d801db3f1cb622cb32ab50dcc4 Mon Sep 17 00:00:00 2001
From: Aaron Kennedy <aaron.kennedy@nokia.com>
Date: Thu, 30 Apr 2009 13:01:04 +1000
Subject: Prototype custom parsers for non-xml qml language

ListModel has been ported (under the name ListModel2) to demonstrate.  ListModel2 behaves the same as ListModel, except that list "objects" must be called "ListElement" instead of a freeform name.
---
 .../mediabrowser/dummydata/PhonesModel.qml         | 236 ++++++-------
 src/declarative/qml/qml.pri                        |   1 +
 src/declarative/qml/qmlcompiler.cpp                | 128 ++++---
 src/declarative/qml/qmlcompiler_p.h                |   1 +
 src/declarative/qml/qmlcustomparser.cpp            | 129 ++++++-
 src/declarative/qml/qmlcustomparser.h              |  46 +++
 src/declarative/qml/qmlcustomparser_p.h            |  79 +++++
 src/declarative/qml/qmlinstruction_p.h             |   1 +
 src/declarative/qml/qmlmetatype.cpp                |  17 +-
 src/declarative/qml/qmlmetatype.h                  |  32 +-
 src/declarative/qml/qmlvme.cpp                     |   5 +
 src/declarative/util/qmllistmodel.cpp              | 387 ++++++++++-----------
 src/declarative/util/qmllistmodel.h                |  34 +-
 13 files changed, 658 insertions(+), 438 deletions(-)
 create mode 100644 src/declarative/qml/qmlcustomparser_p.h

diff --git a/demos/declarative/mediabrowser/dummydata/PhonesModel.qml b/demos/declarative/mediabrowser/dummydata/PhonesModel.qml
index d4f6269..eb68fdb 100644
--- a/demos/declarative/mediabrowser/dummydata/PhonesModel.qml
+++ b/demos/declarative/mediabrowser/dummydata/PhonesModel.qml
@@ -1,137 +1,99 @@
-<ListModel id="PhonesModel">
-    <Phone>
-        <title>Nokia N97</title>
-        <thumb>http://www.forum.nokia.com/devices/pics/N97_main.jpg</thumb>
-        <description>
-        The Nokia N97 is a S60 5th Edition mobile computer with a large 3,5?, bright nHD (640 x 360 pixels and 16:9 aspect ratio) TFT color display with resistive touch screen and tactile feedback. The device provides excellent user experience for internet and entertainment by combining qwerty keyboard with touch UI and Home screen functionality. Use the N97 to connect to mobile broadband using WLAN or HSDPA (3.5G). Find directions and locations with the integrated A-GPS and included maps. Additional features include game titles with N-Gage, a 5 mega pixel camera with dual LED flash and automatic geotagging of images and videos.
-        </description>
-        <specifications>
-        <![CDATA[
-            <table width=300>
-            <tr><td width=50%>Resolution     <td width=50%>360 x 640   
-            <tr><td>Color Depth    <td>24 bit  
-            <tr><td>Device Size    <td>117.2 x 55.3 x 15.9 mm
-            <tr><td>Volume         <td>88 cc   
-            <tr><td>Weight         <td>150 g
-            </table>
-        ]]>
-        </specifications>
-        <url>http://www.forum.nokia.com/devices/N97</url>
-        <rating>5</rating>
-    </Phone>
-    <Phone>
-        <title>Nokia 5800 XpressMusic</title>
-        <thumb>http://www.forum.nokia.com/devices/pics/5800_main.jpg</thumb>
-        <description>
-        The Nokia 5800 XpressMusic is a S60 5th Edition device with a resistive touch screen and tactile feedback. The device has a large 3,2?, bright nHD (640 x 360 pixels and 16:9 aspect ratio) color display. The device has variety of input methods: stylus, plectrum and finger touch support for text input and UI control (alphanumeric keypad, full and mini qwerty keyboard, handwriting recognition). Use the Nokia 5800 XpressMusic to connect to mobile broadband using WLAN or HSDPA (3.5G). Find directions and locations with the integrated A-GPS and included maps. Additional features include a 3.2 megapixel camera with dual LED flash, Bluetooth 2.0 +EDR, and USB 2.0 High-Speed. Supported WCDMA frequencies depend on the region where the device is available. 
-        </description>
-        <specifications>
-        <![CDATA[
-            <table width=300>
-            <tr><td width=50%>Resolution     <td width=50%>360 x 640   
-            <tr><td>Color Depth    <td>24 bit  
-            <tr><td>Device Size    <td>111 x 51.7 x 15.5 mm
-            <tr><td>Volume         <td>83 cc   
-            <tr><td>Weight         <td>109 g
-            </table>
-        ]]>
-        </specifications>
-        <url>http://www.forum.nokia.com/devices/5800_XpressMusic</url>
-        <rating>5</rating>
-    </Phone>
-    <Phone>
-        <title>E75</title>
-        <thumb>http://www.forum.nokia.com/devices/pics/E75_main.jpg</thumb>
-        <description>The Nokia E75 is a GSM/WCDMA dual-mode business smartphone supporting WCDMA/HSDPA, EGSM, and WLAN. The device features a side slider qwerty keyboard for optimal email experience. Enjoy videos, music, and graphics on the 2.4? QVGA display and orientation sensor. Find directions and locations with the integrated A-GPS and included maps. Take photos with a 3.2-megapixel autofocus camera. Additional features include USB charging with simultaneous data transfer, Bluetooth 2.0 +EDR, and USB 2.0 High-Speed. Supported WCDMA frequencies depend on the region where the device is available.</description>
-        <specifications>
-        <![CDATA[
-            <table width=300>
-            <tr><td width=50%>Resolution     <td width=50%>240 x 320   
-            <tr><td>Color Depth    <td>24 bit  
-            <tr><td>Device Size    <td>111.8 x 501 x 14.4 mm   
-            <tr><td>Volume         <td>69 cc   
-            <tr><td>Weight         <td>139 g
-            </table>
-        ]]>
-        </specifications>
-        <url>http://www.forum.nokia.com/devices/E75</url>
-        <rating>5</rating>
-    </Phone>
-    <Phone>
-        <title>Nokia N810</title>
-        <thumb>http://www.forum.nokia.com/devices/pics/n810_main.jpg</thumb>
-        <description>
-        The Nokia N810 features include Voice-over-IP (VoIP) Internet and video calling, Instant Messaging, an integrated slide-out QWERTY keyboard and touch screen. The N810 lets you stay connected on the go with WLAN or Bluetooth 2.0 +EDR and a Bluetooth enabled mobile phone. The hi-resolution 4.13", 800 x 480 screen and the integrated web cam add to the internet experience. Use the Nokia N810 to play music and videos with the built-in stereo speakers or use the 3.5mm stereo plug with headphones. The Nokia N810 also has an integrated GPS receiver which allows you to pinpoint your position and find points-of-interests using pre-loaded maps. 
-        </description>
-        <specifications>
-        <![CDATA[
-            <table width=300>
-            <tr><td width=50%>Resolution     <td width=50%>800 x 480   
-            <tr><td>Color Depth    <td>16 bit  
-            <tr><td>Device Size    <td>128 x 72 x 14 mm
-            <tr><td>Weight         <td>225 g
-            </table>
-        ]]>
-        </specifications>
-        <url>http://www.forum.nokia.com/devices/N810</url>
-        <rating>5</rating>
-    </Phone>
-    <Phone>
-        <title>Nokia 6260 slide</title>
-        <thumb>http://www.forum.nokia.com/devices/pics/6260slide_main.jpg</thumb>
-        <description>
-        The Nokia 6260 slide is a Series 40 6th Edition phone, supporting quad-band GSM 850/900/1800/1900, triple-band WCDMA 900/1900/2100 and WLAN. Other key features include integrated A-GPS with included maps, a 5.0 megapixel camera with LED flash and Carl Zeiss optics, WebKit Open Source Browser, Flash Lite 3.0, Bluetooth 2.1 + EDR and MIDP Java 2.1 with additional Java APIs. Supported WCDMA frequencies depend on the region where the device is available. 
-        </description>
-        <specifications>
-        <![CDATA[
-            <table width=300>
-            <tr><td width=50%>Resolution     <td width=50%>320 x 480   
-            <tr><td>Color Depth    <td>24 bit  
-            <tr><td>Device Size    <td>99.4 x 46.5 x 15.4 mm
-            <tr><td>Volume         <td>64.5 cc   
-            <tr><td>Weight         <td>114 g
-            </table>
-        ]]>
-        </specifications>
-        <url>http://www.forum.nokia.com/devices/6260_slide</url>
-        <rating>5</rating>
-    </Phone>
-    <Phone>
-        <title>Nokia 2330 classic</title>
-        <thumb>http://www.forum.nokia.com/devices/pics/2330_main.jpg</thumb>
-        <description>
-        The Nokia 2330 classic is a Dual-band GPRS phone for EGSM 900/1800 or GSM 850/1900 (for some markets) that includes a VGA camera, Stereo FM radio with recording feature, Bluetooth 2.0, Mail on Ovi and MIDP 2.1 APIs for application creation. 
-        </description>
-        <specifications>
-        <![CDATA[
-            <table width=300>
-            <tr><td width=50%>Resolution     <td width=50%>128 x 160   
-            <tr><td>Color Depth    <td>16 bit  
-            <tr><td>Device Size    <td>107 x 46 x 13.8 mm
-            <tr><td>Weight         <td>80 g
-            </table>
-        ]]>
-        </specifications>
-        <url>http://www.forum.nokia.com/devices/2330_classic</url>
-        <rating>5</rating>
-    </Phone>
-    <Phone>
-        <title>Nokia 2355</title>
-        <thumb>http://www.forum.nokia.com/devices/pics/2355_main.jpg</thumb>
-        <description>
-        The Nokia 2355 CDMA phone features a 64K color display, FM radio, integrated flashlight, WAP 2.0 browsing, MMS, Java(tm) and Brew. It's stylishly polished fold design will keep you in the spotlight. 
-        </description>
-        <specifications>
-        <![CDATA[
-            <table width=300>
-            <tr><td width=50%>Resolution     <td width=50%>128 x 128   
-            <tr><td>Color Depth    <td>16 bit  
-            <tr><td>Device Size    <td>81 x 43 x 22 mm
-            <tr><td>Weight         <td>78 g
-            </table>
-        ]]>
-        </specifications>
-        <url>http://www.forum.nokia.com/devices/2355</url>
-        <rating>5</rating>
-    </Phone>
-</ListModel>
+ListModel2 {
+    id: "PhonesModel"
+
+    ListElement {
+        title: "Nokia N97"
+        thumb: "http://www.forum.nokia.com/devices/pics/N97_main.jpg"
+        description: "The Nokia N97 is a S60 5th Edition mobile computer with a large 3,5?, bright nHD (640 x 360 pixels and 16:9 aspect ratio) TFT color display with resistive touch screen and tactile feedback. The device provides excellent user experience for internet and entertainment by combining qwerty keyboard with touch UI and Home screen functionality. Use the N97 to connect to mobile broadband using WLAN or HSDPA (3.5G). Find directions and locations with the integrated A-GPS and included maps. Additional features include game titles with N-Gage, a 5 mega pixel camera with dual LED flash and automatic geotagging of images and videos."
+        specifications: "<table width=300>\
+            <tr><td width=50%>Resolution     <td width=50%>360 x 640   \
+            <tr><td>Color Depth    <td>24 bit  \
+            <tr><td>Device Size    <td>117.2 x 55.3 x 15.9 mm \
+            <tr><td>Volume         <td>88 cc   \
+            <tr><td>Weight         <td>150 g \
+            </table>"
+        url: "http://www.forum.nokia.com/devices/N97"
+        rating: 5
+    }
+    ListElement {
+        title: "Nokia 5800 XpressMusic"
+        thumb: "http://www.forum.nokia.com/devices/pics/5800_main.jpg"
+        description: "The Nokia 5800 XpressMusic is a S60 5th Edition device with a resistive touch screen and tactile feedback. The device has a large 3,2?, bright nHD (640 x 360 pixels and 16:9 aspect ratio) color display. The device has variety of input methods: stylus, plectrum and finger touch support for text input and UI control (alphanumeric keypad, full and mini qwerty keyboard, handwriting recognition). Use the Nokia 5800 XpressMusic to connect to mobile broadband using WLAN or HSDPA (3.5G). Find directions and locations with the integrated A-GPS and included maps. Additional features include a 3.2 megapixel camera with dual LED flash, Bluetooth 2.0 +EDR, and USB 2.0 High-Speed. Supported WCDMA frequencies depend on the region where the device is available."
+        specifications: " <table width=300> \
+            <tr><td width=50%>Resolution     <td width=50%>360 x 640    \
+            <tr><td>Color Depth    <td>24 bit   \
+            <tr><td>Device Size    <td>111 x 51.7 x 15.5 mm \
+            <tr><td>Volume         <td>83 cc    \
+            <tr><td>Weight         <td>109 g \
+            </table>"
+        url: "http://www.forum.nokia.com/devices/5800_XpressMusic"
+        rating: 5
+    }
+    ListElement {
+        title: "E75"
+        thumb: "http://www.forum.nokia.com/devices/pics/E75_main.jpg"
+        description: "The Nokia E75 is a GSM/WCDMA dual-mode business smartphone supporting WCDMA/HSDPA, EGSM, and WLAN. The device features a side slider qwerty keyboard for optimal email experience. Enjoy videos, music, and graphics on the 2.4? QVGA display and orientation sensor. Find directions and locations with the integrated A-GPS and included maps. Take photos with a 3.2-megapixel autofocus camera. Additional features include USB charging with simultaneous data transfer, Bluetooth 2.0 +EDR, and USB 2.0 High-Speed. Supported WCDMA frequencies depend on the region where the device is available."
+        specifications: "<table width=300> \
+            <tr><td width=50%>Resolution     <td width=50%>240 x 320    \
+            <tr><td>Color Depth    <td>24 bit   \
+            <tr><td>Device Size    <td>111.8 x 501 x 14.4 mm    \
+            <tr><td>Volume         <td>69 cc    \
+            <tr><td>Weight         <td>139 g \
+            </table>"
+        url: "http://www.forum.nokia.com/devices/E75"
+        rating: 5
+    }
+    ListElement {
+        title: "Nokia N810"
+        thumb: "http://www.forum.nokia.com/devices/pics/n810_main.jpg"
+        description: "The Nokia N810 features include Voice-over-IP (VoIP) Internet and video calling, Instant Messaging, an integrated slide-out QWERTY keyboard and touch screen. The N810 lets you stay connected on the go with WLAN or Bluetooth 2.0 +EDR and a Bluetooth enabled mobile phone. The hi-resolution 4.13\", 800 x 480 screen and the integrated web cam add to the internet experience. Use the Nokia N810 to play music and videos with the built-in stereo speakers or use the 3.5mm stereo plug with headphones. The Nokia N810 also has an integrated GPS receiver which allows you to pinpoint your position and find points-of-interests using pre-loaded maps."
+        specifications: "<table width=300> \
+            <tr><td width=50%>Resolution     <td width=50%>800 x 480    \
+            <tr><td>Color Depth    <td>16 bit   \
+            <tr><td>Device Size    <td>128 x 72 x 14 mm \
+            <tr><td>Weight         <td>225 g \
+            </table>"
+        url: "http://www.forum.nokia.com/devices/N810"
+        rating: 5
+    }
+    ListElement {
+        title: "Nokia 6260 slide"
+        thumb: "http://www.forum.nokia.com/devices/pics/6260slide_main.jpg"
+        description: "The Nokia 6260 slide is a Series 40 6th Edition phone, supporting quad-band GSM 850/900/1800/1900, triple-band WCDMA 900/1900/2100 and WLAN. Other key features include integrated A-GPS with included maps, a 5.0 megapixel camera with LED flash and Carl Zeiss optics, WebKit Open Source Browser, Flash Lite 3.0, Bluetooth 2.1 + EDR and MIDP Java 2.1 with additional Java APIs. Supported WCDMA frequencies depend on the region where the device is available."
+        specifications: "<table width=300>\
+            <tr><td width=50%>Resolution     <td width=50%>320 x 480    \
+            <tr><td>Color Depth    <td>24 bit  \
+            <tr><td>Device Size    <td>99.4 x 46.5 x 15.4 mm \
+            <tr><td>Volume         <td>64.5 cc    \
+            <tr><td>Weight         <td>114 g \
+            </table>"
+        url: "http://www.forum.nokia.com/devices/6260_slide"
+        rating: 5
+    }
+    ListElement {
+        title: "Nokia 2330 classic"
+        thumb: "http://www.forum.nokia.com/devices/pics/2330_main.jpg"
+        description: "The Nokia 2330 classic is a Dual-band GPRS phone for EGSM 900/1800 or GSM 850/1900 (for some markets) that includes a VGA camera, Stereo FM radio with recording feature, Bluetooth 2.0, Mail on Ovi and MIDP 2.1 APIs for application creation." 
+        specifications: "<table width=300>\
+            <tr><td width=50%>Resolution     <td width=50%>128 x 160    \
+            <tr><td>Color Depth    <td>16 bit   \
+            <tr><td>Device Size    <td>107 x 46 x 13.8 mm\
+            <tr><td>Weight         <td>80 g\
+            </table>"
+        url: "http://www.forum.nokia.com/devices/2330_classic"
+        rating: 5
+    }
+    ListElement {
+        title: "Nokia 2355"
+        thumb: "http://www.forum.nokia.com/devices/pics/2355_main.jpg"
+        description: "The Nokia 2355 CDMA phone features a 64K color display, FM radio, integrated flashlight, WAP 2.0 browsing, MMS, Java(tm) and Brew. It's stylishly polished fold design will keep you in the spotlight." 
+        specifications: "<table width=300> \
+            <tr><td width=50%>Resolution     <td width=50%>128 x 128    \
+            <tr><td>Color Depth    <td>16 bit   \
+            <tr><td>Device Size    <td>81 x 43 x 22 mm \
+            <tr><td>Weight         <td>78 g \
+            </table>"
+        url: "http://www.forum.nokia.com/devices/2355"
+        rating: 5
+    }
+}
diff --git a/src/declarative/qml/qml.pri b/src/declarative/qml/qml.pri
index 00e3ccb..40b854f 100644
--- a/src/declarative/qml/qml.pri
+++ b/src/declarative/qml/qml.pri
@@ -33,6 +33,7 @@ HEADERS += qml/qmlparser_p.h \
     qml/qmlcomponent.h \
     qml/qmlcomponent_p.h \
     qml/qmlcustomparser.h \
+    qml/qmlcustomparser_p.h \
     qml/qmlpropertyvaluesource.h \
     qml/qmlboundsignal_p.h \
     qml/qmlxmlparser_p.h \
diff --git a/src/declarative/qml/qmlcompiler.cpp b/src/declarative/qml/qmlcompiler.cpp
index 4cfe1e8..4433286 100644
--- a/src/declarative/qml/qmlcompiler.cpp
+++ b/src/declarative/qml/qmlcompiler.cpp
@@ -59,6 +59,7 @@
 #include <qmlcontext.h>
 #include <qmlmetatype.h>
 #include <QtCore/qdebug.h>
+#include "private/qmlcustomparser_p.h"
 
 #include "qmlscriptparser_p.h"
 
@@ -552,6 +553,7 @@ bool QmlCompiler::compileObject(Object *obj, int ctxt)
         obj->properties.remove(SIGNALS_NAME);
     }
 
+    int createInstrIdx = output->bytecode.count();
     if (obj->type != -1 && output->types.at(obj->type).parser) {
         QByteArray data = obj->custom;
         int ref = output->indexForByteArray(data);
@@ -567,6 +569,7 @@ bool QmlCompiler::compileObject(Object *obj, int ctxt)
         QmlInstruction create;
         create.type = QmlInstruction::CreateObject;
         create.line = obj->line;
+        create.create.data = -1;
         create.create.type = obj->type;
         output->bytecode << create;
     }
@@ -591,19 +594,48 @@ bool QmlCompiler::compileObject(Object *obj, int ctxt)
         }
     } 
 
+    bool isCustomParser = output->types.at(obj->type).type &&  
+                          output->types.at(obj->type).type->customParser() != 0;
+    QList<QmlCustomParserProperty> customProps;
+
     foreach(Property *prop, obj->properties) {
         if (!ignoreProperties && prop->name == PROPERTIES_NAME) {
         } else if (!ignoreSignals && prop->name == SIGNALS_NAME) {
         } else if (prop->name.length() >= 3 && prop->name.startsWith("on") && 
            ('A' <= prop->name.at(2) && 'Z' >= prop->name.at(2))) {
-            COMPILE_CHECK(compileSignal(prop, obj));
+            if (!isCustomParser) {
+                COMPILE_CHECK(compileSignal(prop, obj));
+            } else {
+                customProps << QmlCustomParserNodePrivate::fromProperty(prop);
+            }
         } else {
-            COMPILE_CHECK(compileProperty(prop, obj, ctxt));
+            if (!isCustomParser || (isCustomParser && testProperty(prop, obj))) {
+                COMPILE_CHECK(compileProperty(prop, obj, ctxt));
+            } else {
+                customProps << QmlCustomParserNodePrivate::fromProperty(prop);
+            }
         }
     }
 
-    if (obj->defaultProperty) 
-        COMPILE_CHECK(compileProperty(obj->defaultProperty, obj, ctxt));
+    if (obj->defaultProperty)  {
+        if(!isCustomParser || (isCustomParser && testProperty(obj->defaultProperty, obj))) {
+            COMPILE_CHECK(compileProperty(obj->defaultProperty, obj, ctxt));
+        } else {
+            customProps << QmlCustomParserNodePrivate::fromProperty(obj->defaultProperty);
+        }
+    }
+
+    if (isCustomParser && !customProps.isEmpty()) {
+        // ### Check for failure
+        bool ok = false;
+        QmlCustomParser *cp = output->types.at(obj->type).type->customParser();
+        QByteArray customData = cp->compile(customProps, &ok);
+        if(!ok)
+            COMPILE_EXCEPTION("Failure compiling custom type");
+        if(!customData.isEmpty())
+            output->bytecode[createInstrIdx].create.data = 
+                output->indexForByteArray(customData);
+    }
 
     if (obj->type != -1) {
         if (output->types.at(obj->type).component) {
@@ -764,65 +796,61 @@ bool QmlCompiler::compileSignal(Property *prop, Object *obj)
     return true;
 }
 
+// Returns true if prop exists on obj, false otherwise
+bool QmlCompiler::testProperty(QmlParser::Property *prop, 
+                               QmlParser::Object *obj)
+{
+    if(isAttachedProperty(prop->name) || prop->name == "id")
+        return true;
+
+    const QMetaObject *mo = obj->metaObject();
+    if (mo) {
+        if (prop->isDefault) {
+            QMetaProperty p = QmlMetaType::defaultProperty(mo);
+            return p.name() != 0;
+        } else {
+            int idx = mo->indexOfProperty(prop->name.constData());
+            return idx != -1;
+        }
+    }
+    
+    return false;
+}
+
 bool QmlCompiler::compileProperty(Property *prop, Object *obj, int ctxt)
 {
     if (prop->values.isEmpty() && !prop->value) 
         return true;
 
     // First we're going to need a reference to this property
-    if (obj->type != -1) {
+    const QMetaObject *mo = obj->metaObject();
+    if (mo && !isAttachedProperty(prop->name)) {
+        if (prop->isDefault) {
+            QMetaProperty p = QmlMetaType::defaultProperty(mo);
+            // XXX
+            // Currently we don't handle enums in the static analysis
+            // so we let them drop through to generateStoreInstruction()
+            if (p.name() && !p.isEnumType()) {
+                prop->index = mo->indexOfProperty(p.name());
+                prop->name = p.name();
 
-        const QMetaObject *mo = obj->metaObject();
-        if (mo) {
-            if (prop->isDefault) {
-                QMetaProperty p = QmlMetaType::defaultProperty(mo);
-                // XXX
-                // Currently we don't handle enums in the static analysis
-                // so we let them drop through to generateStoreInstruction()
-                if (p.name() && !p.isEnumType()) {
-                    prop->index = mo->indexOfProperty(p.name());
-                    prop->name = p.name();
-
-                    int t = p.type();
-                    if (t == QVariant::UserType)
-                        t = p.userType();
-
-                    prop->type = t;
-                }
-            } else {
-                prop->index = mo->indexOfProperty(prop->name.constData());
-                QMetaProperty p = mo->property(prop->index);
-                // XXX
-                // Currently we don't handle enums in the static analysis
-                // so we let them drop through to generateStoreInstruction()
-                if (p.name() && !p.isEnumType()) {
-                    int t = p.type();
-                    if (t == QVariant::UserType)
-                        t = p.userType();
-
-                    prop->type = t;
-                }
-            }
-        }
-    } else {
-        const QMetaObject *mo = obj->metaObject();
-        if (mo) {
-            if (prop->isDefault) {
-                QMetaProperty p = QmlMetaType::defaultProperty(mo);
-                if (p.name()) {
-                    prop->index = mo->indexOfProperty(p.name());
-                    prop->name = p.name();
-                } 
                 int t = p.type();
                 if (t == QVariant::UserType)
                     t = p.userType();
+
                 prop->type = t;
-            } else {
-                prop->index = mo->indexOfProperty(prop->name.constData());
-                QMetaProperty p = mo->property(prop->index);
+            }
+        } else {
+            prop->index = mo->indexOfProperty(prop->name.constData());
+            QMetaProperty p = mo->property(prop->index);
+            // XXX
+            // Currently we don't handle enums in the static analysis
+            // so we let them drop through to generateStoreInstruction()
+            if (p.name() && !p.isEnumType()) {
                 int t = p.type();
                 if (t == QVariant::UserType)
                     t = p.userType();
+
                 prop->type = t;
             }
         }
@@ -841,7 +869,7 @@ bool QmlCompiler::compileProperty(Property *prop, Object *obj, int ctxt)
         COMPILE_CHECK(compileNestedProperty(prop, ctxt));
 
     } else if (QmlMetaType::isQmlList(prop->type) || 
-              QmlMetaType::isList(prop->type)) {
+               QmlMetaType::isList(prop->type)) {
 
         COMPILE_CHECK(compileListProperty(prop, obj, ctxt));
 
diff --git a/src/declarative/qml/qmlcompiler_p.h b/src/declarative/qml/qmlcompiler_p.h
index 2a06f73..9a0ce1c 100644
--- a/src/declarative/qml/qmlcompiler_p.h
+++ b/src/declarative/qml/qmlcompiler_p.h
@@ -139,6 +139,7 @@ private:
     bool compileComponentFromRoot(QmlParser::Object *obj, int);
     bool compileFetchedObject(QmlParser::Object *obj, int);
     bool compileSignal(QmlParser::Property *prop, QmlParser::Object *obj);
+    bool testProperty(QmlParser::Property *prop, QmlParser::Object *obj);
     bool compileProperty(QmlParser::Property *prop, QmlParser::Object *obj, int);
     bool compileIdProperty(QmlParser::Property *prop, 
                            QmlParser::Object *obj);
diff --git a/src/declarative/qml/qmlcustomparser.cpp b/src/declarative/qml/qmlcustomparser.cpp
index a342ca8..fe0c3a8 100644
--- a/src/declarative/qml/qmlcustomparser.cpp
+++ b/src/declarative/qml/qmlcustomparser.cpp
@@ -40,10 +40,13 @@
 ****************************************************************************/
 
 #include "qmlcustomparser.h"
-
+#include "qmlcustomparser_p.h"
+#include "qmlparser_p.h"
 
 QT_BEGIN_NAMESPACE
 
+using namespace QmlParser;
+
 /*!
     \class QmlCustomParser
     \brief The QmlCustomParser class allows you to add new arbitrary types to QML.
@@ -92,5 +95,129 @@ QT_BEGIN_NAMESPACE
     the same-named type as this custom parser is defined for).
 */
 
+QmlCustomParserNode 
+QmlCustomParserNodePrivate::fromObject(QmlParser::Object *root)
+{
+    QmlCustomParserNode rootNode;
+    rootNode.d->name = root->typeName;
+
+    for(QHash<QByteArray, Property *>::Iterator iter = root->properties.begin();
+        iter != root->properties.end();
+        ++iter) {
+
+        Property *p = *iter;
+
+        rootNode.d->properties << fromProperty(p);
+    }
+
+    return rootNode;
+}
+
+QmlCustomParserProperty 
+QmlCustomParserNodePrivate::fromProperty(QmlParser::Property *p)
+{
+    QmlCustomParserProperty prop;
+    prop.d->name = p->name;
+    prop.d->isList = (p->values.count() > 1);
+
+    for(int ii = 0; ii < p->values.count(); ++ii) {
+        Value *v = p->values.at(ii);
+
+        // We skip fetched properties for now
+        if(v->object && v->object->type == -1)
+            continue;
+
+        if(v->object) {
+            QmlCustomParserNode node = fromObject(v->object);
+            prop.d->values << QVariant::fromValue(node);
+        } else {
+            prop.d->values << QVariant::fromValue(v->primitive);
+        }
+
+    }
+
+    return prop;
+}
+
+QmlCustomParserNode::QmlCustomParserNode()
+: d(new QmlCustomParserNodePrivate)
+{
+}
+
+QmlCustomParserNode::QmlCustomParserNode(const QmlCustomParserNode &other)
+: d(new QmlCustomParserNodePrivate)
+{
+    *this = other;
+}
+
+QmlCustomParserNode &QmlCustomParserNode::operator=(const QmlCustomParserNode &other)
+{
+    d->name = other.d->name;
+    d->properties = other.d->properties;
+    return *this;
+}
+
+QmlCustomParserNode::~QmlCustomParserNode()
+{
+    delete d; d = 0;
+}
+
+QByteArray QmlCustomParserNode::name() const
+{
+    return d->name;
+}
+
+QList<QmlCustomParserProperty> QmlCustomParserNode::properties() const
+{
+    return d->properties;
+}
+
+QmlCustomParserProperty::QmlCustomParserProperty()
+: d(new QmlCustomParserPropertyPrivate)
+{
+}
+
+QmlCustomParserProperty::QmlCustomParserProperty(const QmlCustomParserProperty &other)
+: d(new QmlCustomParserPropertyPrivate)
+{
+    *this = other;
+}
+
+QmlCustomParserProperty &QmlCustomParserProperty::operator=(const QmlCustomParserProperty &other)
+{
+    d->name = other.d->name;
+    d->isList = other.d->isList;
+    d->values = other.d->values;
+    return *this;
+}
+
+QmlCustomParserProperty::~QmlCustomParserProperty()
+{
+    delete d; d = 0;
+}
+
+QByteArray QmlCustomParserProperty::name() const
+{
+    return d->name;
+}
+
+bool QmlCustomParserProperty::isList() const
+{
+    return d->isList;
+}
+
+QList<QVariant> QmlCustomParserProperty::assignedValues() const
+{
+    return d->values;
+}
+
+QByteArray QmlCustomParser::compile(const QList<QmlCustomParserProperty> &, bool *ok)
+{
+    return QByteArray();
+}
+
+void QmlCustomParser::setCustomData(QObject *, const QByteArray &)
+{
+}
 
 QT_END_NAMESPACE
diff --git a/src/declarative/qml/qmlcustomparser.h b/src/declarative/qml/qmlcustomparser.h
index 9de1be4..0e6a619 100644
--- a/src/declarative/qml/qmlcustomparser.h
+++ b/src/declarative/qml/qmlcustomparser.h
@@ -53,13 +53,55 @@ QT_BEGIN_NAMESPACE
 
 QT_MODULE(Declarative)
 
+class QmlCustomParserPropertyPrivate;
+class Q_DECLARATIVE_EXPORT QmlCustomParserProperty
+{
+public:
+    QmlCustomParserProperty();
+    QmlCustomParserProperty(const QmlCustomParserProperty &);
+    QmlCustomParserProperty &operator=(const QmlCustomParserProperty &);
+    ~QmlCustomParserProperty();
+
+    QByteArray name() const;
+
+    bool isList() const;
+    QList<QVariant> assignedValues() const;
+
+private:
+    friend class QmlCustomParserNodePrivate;
+    friend class QmlCustomParserPropertyPrivate;
+    QmlCustomParserPropertyPrivate *d;
+};
+Q_DECLARE_METATYPE(QmlCustomParserProperty);
+
+class QmlCustomParserNodePrivate;
+class Q_DECLARATIVE_EXPORT QmlCustomParserNode
+{
+public:
+    QmlCustomParserNode();
+    QmlCustomParserNode(const QmlCustomParserNode &);
+    QmlCustomParserNode &operator=(const QmlCustomParserNode &);
+    ~QmlCustomParserNode();
+
+    QByteArray name() const;
+
+    QList<QmlCustomParserProperty> properties() const;
+
+private:
+    friend class QmlCustomParserNodePrivate;
+    QmlCustomParserNodePrivate *d;
+};
+Q_DECLARE_METATYPE(QmlCustomParserNode);
+
 class Q_DECLARATIVE_EXPORT QmlCustomParser
 {
 public:
     virtual ~QmlCustomParser() {}
 
     virtual QByteArray compile(QXmlStreamReader&, bool *ok)=0;
+    virtual QByteArray compile(const QList<QmlCustomParserProperty> &, bool *ok);
     virtual QVariant create(const QByteArray &)=0;
+    virtual void setCustomData(QObject *, const QByteArray &);
 
     struct Register {
         Register(const char *name, QmlCustomParser *parser) {
@@ -76,7 +118,11 @@ public:
 #define QML_DEFINE_CUSTOM_PARSER_NS(namespacestring, name, parserClass) \
     template<> QmlCustomParser::Register QmlCustomParser::Define<parserClass>::instance(namespacestring "/" # name, new parserClass);
 
+#define QML_DEFINE_CUSTOM_TYPE(TYPE, NAME, CUSTOMTYPE) \
+    template<> QmlPrivate::InstanceType QmlPrivate::Define<TYPE *>::instance(qmlRegisterCustomType<TYPE>(#NAME, #TYPE, new CUSTOMTYPE));
+
 QT_END_NAMESPACE
 
 QT_END_HEADER
+
 #endif
diff --git a/src/declarative/qml/qmlcustomparser_p.h b/src/declarative/qml/qmlcustomparser_p.h
new file mode 100644
index 0000000..63d148c
--- /dev/null
+++ b/src/declarative/qml/qmlcustomparser_p.h
@@ -0,0 +1,79 @@
+/****************************************************************************
+**
+** Copyright (C) 2009 Nokia Corporation and/or its subsidiary(-ies).
+** Contact: Qt Software Information (qt-info@nokia.com)
+**
+** This file is part of the QtDeclarative module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL$
+** No Commercial Usage
+** This file contains pre-release code and may not be distributed.
+** You may use this file in accordance with the terms and conditions
+** contained in the either Technology Preview License Agreement or the
+** Beta Release License Agreement.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 2.1 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPL included in the
+** packaging of this file.  Please review the following information to
+** ensure the GNU Lesser General Public License version 2.1 requirements
+** will be met: http://www.gnu.org/licenses/old-licenses/lgpl-2.1.html.
+**
+** In addition, as a special exception, Nokia gives you certain
+** additional rights. These rights are described in the Nokia Qt LGPL
+** Exception version 1.0, included in the file LGPL_EXCEPTION.txt in this
+** package.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3.0 as published by the Free Software
+** Foundation and appearing in the file LICENSE.GPL included in the
+** packaging of this file.  Please review the following information to
+** ensure the GNU General Public License version 3.0 requirements will be
+** met: http://www.gnu.org/copyleft/gpl.html.
+**
+** If you are unsure which license is appropriate for your use, please
+** contact the sales department at qt-sales@nokia.com.
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+#ifndef QMLCUSTOMPARSER_P_H
+#define QMLCUSTOMPARSER_P_H
+
+#include <QtCore/qglobal.h>
+#include "qmlcustomparser.h"
+
+QT_BEGIN_NAMESPACE
+
+namespace QmlParser
+{
+    class Object;
+    class Property;
+};
+
+class QmlCustomParserNodePrivate
+{
+public:
+    QByteArray name;
+    QList<QmlCustomParserProperty> properties;
+
+    static QmlCustomParserNode fromObject(QmlParser::Object *);
+    static QmlCustomParserProperty fromProperty(QmlParser::Property *);
+};
+
+class QmlCustomParserPropertyPrivate
+{
+public:
+    QmlCustomParserPropertyPrivate()
+        : isList(false) {}
+
+    QByteArray name;
+    bool isList;
+    QList<QVariant> values;
+};
+
+QT_END_NAMESPACE
+
+#endif // QMLCUSTOMPARSER_P_H
diff --git a/src/declarative/qml/qmlinstruction_p.h b/src/declarative/qml/qmlinstruction_p.h
index 440b54a..922fc61 100644
--- a/src/declarative/qml/qmlinstruction_p.h
+++ b/src/declarative/qml/qmlinstruction_p.h
@@ -174,6 +174,7 @@ public:
         } init;
         struct {
             int type;
+            int data;
         } create;
         struct {
             int data;
diff --git a/src/declarative/qml/qmlmetatype.cpp b/src/declarative/qml/qmlmetatype.cpp
index 9b99917..fbfeca0 100644
--- a/src/declarative/qml/qmlmetatype.cpp
+++ b/src/declarative/qml/qmlmetatype.cpp
@@ -118,6 +118,7 @@ public:
     QmlPrivate::CreateFunc m_extFunc;
     const QMetaObject *m_extMetaObject;
     int m_index;
+    QmlCustomParser *m_customParser;
     mutable volatile bool m_isSetup:1;
     mutable QList<QmlProxyMetaObject::ProxyData> m_metaObjects;
     mutable QByteArray m_hash;
@@ -126,7 +127,8 @@ public:
 QmlTypePrivate::QmlTypePrivate()
 : m_isInterface(false), m_iid(0), m_typeId(0), m_listId(0), m_qmlListId(0),
   m_opFunc(0), m_baseMetaObject(0), m_attachedPropertiesFunc(0),
-  m_parserStatusCast(-1), m_extFunc(0), m_extMetaObject(0), m_index(-1), m_isSetup(false)
+  m_parserStatusCast(-1), m_extFunc(0), m_extMetaObject(0), m_index(-1), 
+  m_customParser(0), m_isSetup(false)
 {
 }
 
@@ -150,7 +152,8 @@ QmlType::QmlType(int type, int listType, int qmlListType,
                  const QMetaObject *metaObject, 
                  QmlAttachedPropertiesFunc attachedPropertiesFunc, 
                  int parserStatusCast, QmlPrivate::CreateFunc extFunc, 
-                 const QMetaObject *extMetaObject, int index)
+                 const QMetaObject *extMetaObject, int index,
+                 QmlCustomParser *customParser)
 : d(new QmlTypePrivate)
 {
     d->m_name = qmlName;
@@ -163,6 +166,7 @@ QmlType::QmlType(int type, int listType, int qmlListType,
     d->m_parserStatusCast = parserStatusCast;
     d->m_extFunc = extFunc;
     d->m_index = index;
+    d->m_customParser = customParser;
 
     if (extMetaObject)
         d->m_extMetaObject = extMetaObject;
@@ -272,6 +276,11 @@ QObject *QmlType::create() const
     return rv;
 }
 
+QmlCustomParser *QmlType::customParser() const
+{
+    return d->m_customParser;
+}
+
 bool QmlType::isInterface() const
 {
     return d->m_isInterface;
@@ -396,7 +405,7 @@ int QmlMetaType::registerInterface(const QmlPrivate::MetaTypeIds &id,
     return index;
 }
 
-int QmlMetaType::registerType(const QmlPrivate::MetaTypeIds &id, QmlPrivate::Func func, const char *cname, const QMetaObject *mo, QmlAttachedPropertiesFunc attach, int pStatus, int object, QmlPrivate::CreateFunc extFunc, const QMetaObject *extmo)
+int QmlMetaType::registerType(const QmlPrivate::MetaTypeIds &id, QmlPrivate::Func func, const char *cname, const QMetaObject *mo, QmlAttachedPropertiesFunc attach, int pStatus, int object, QmlPrivate::CreateFunc extFunc, const QMetaObject *extmo, QmlCustomParser *parser)
 {
     Q_UNUSED(object);
     QWriteLocker lock(metaTypeDataLock());
@@ -414,7 +423,7 @@ int QmlMetaType::registerType(const QmlPrivate::MetaTypeIds &id, QmlPrivate::Fun
 
     QmlType *type = new QmlType(id.typeId, id.listId, id.qmlListId,
                                 func, cname, mo, attach, pStatus, extFunc,
-                                extmo, index);
+                                extmo, index, parser);
 
     data->types.append(type);
     data->idToType.insert(type->typeId(), type);
diff --git a/src/declarative/qml/qmlmetatype.h b/src/declarative/qml/qmlmetatype.h
index 83fb60b..99f8e93 100644
--- a/src/declarative/qml/qmlmetatype.h
+++ b/src/declarative/qml/qmlmetatype.h
@@ -59,7 +59,7 @@ class QmlCustomParser;
 class Q_DECLARATIVE_EXPORT QmlMetaType
 {
 public:
-    static int registerType(const QmlPrivate::MetaTypeIds &, QmlPrivate::Func, const char *, const QMetaObject *, QmlAttachedPropertiesFunc, int pStatus, int object, QmlPrivate::CreateFunc extFunc, const QMetaObject *extmo);
+    static int registerType(const QmlPrivate::MetaTypeIds &, QmlPrivate::Func, const char *, const QMetaObject *, QmlAttachedPropertiesFunc, int pStatus, int object, QmlPrivate::CreateFunc extFunc, const QMetaObject *extmo, QmlCustomParser *);
     static int registerInterface(const QmlPrivate::MetaTypeIds &, QmlPrivate::Func, const char *);
     static void registerCustomParser(const char *, QmlCustomParser *);
 
@@ -121,6 +121,8 @@ public:
 
     QObject *create() const;
 
+    QmlCustomParser *customParser() const;
+
     bool isInterface() const;
     int typeId() const;
     int qListTypeId() const;
@@ -145,7 +147,7 @@ private:
     friend class QmlMetaType;
     friend class QmlTypePrivate;
     QmlType(int, int, int, QmlPrivate::Func, const char *, int);
-    QmlType(int, int, int, QmlPrivate::Func, const char *, const QMetaObject *, QmlAttachedPropertiesFunc, int, QmlPrivate::CreateFunc, const QMetaObject *, int);
+    QmlType(int, int, int, QmlPrivate::Func, const char *, const QMetaObject *, QmlAttachedPropertiesFunc, int, QmlPrivate::CreateFunc, const QMetaObject *, int, QmlCustomParser *);
     ~QmlType();
 
     QmlTypePrivate *d;
@@ -166,7 +168,7 @@ int qmlRegisterType(const char *typeName)
             QmlPrivate::attachedPropertiesFunc<T>(),
             QmlPrivate::StaticCastSelector<T,QmlParserStatus>::cast(), 
             QmlPrivate::StaticCastSelector<T,QObject>::cast(), 
-            0, 0);
+            0, 0, 0);
 }
 
 template<typename T>
@@ -184,7 +186,7 @@ int qmlRegisterType(const char *qmlName, const char *typeName)
             QmlPrivate::attachedPropertiesFunc<T>(),
             QmlPrivate::StaticCastSelector<T,QmlParserStatus>::cast(), 
             QmlPrivate::StaticCastSelector<T,QObject>::cast(), 
-            0, 0);
+            0, 0, 0);
 }
 
 template<typename T, typename E>
@@ -206,7 +208,7 @@ int qmlRegisterExtendedType(const char *typeName)
             &T::staticMetaObject, attached,
             QmlPrivate::StaticCastSelector<T,QmlParserStatus>::cast(), 
             QmlPrivate::StaticCastSelector<T,QObject>::cast(), 
-            &QmlPrivate::CreateParent<E>::create, &E::staticMetaObject);
+            &QmlPrivate::CreateParent<E>::create, &E::staticMetaObject, 0);
 }
 
 template<typename T, typename E>
@@ -231,7 +233,7 @@ int qmlRegisterExtendedType(const char *qmlName, const char *typeName)
             QmlPrivate::StaticCastSelector<T,QmlParserStatus>::cast(), 
             QmlPrivate::StaticCastSelector<T,QObject>::cast(), 
             &QmlPrivate::CreateParent<E>::create, 
-            &E::staticMetaObject);
+            &E::staticMetaObject, 0);
 }
 
 template<typename T>
@@ -249,6 +251,24 @@ int qmlRegisterInterface(const char *typeName)
             qobject_interface_iid<T *>());
 }
 
+template<typename T>
+int qmlRegisterCustomType(const char *qmlName, const char *typeName, QmlCustomParser *parser)
+{
+    QByteArray name(typeName);
+    QmlPrivate::MetaTypeIds ids = {
+        qRegisterMetaType<T *>(QByteArray(name + "*").constData()),
+        qRegisterMetaType<T *>(QByteArray("QList<" + name + "*>*").constData()),
+        qRegisterMetaType<T *>(QByteArray("QmlList<" + name + "*>*").constData())
+    };
+
+    return QmlMetaType::registerType(ids, QmlPrivate::list_op<T>, qmlName, 
+            &T::staticMetaObject,
+            QmlPrivate::attachedPropertiesFunc<T>(),
+            QmlPrivate::StaticCastSelector<T,QmlParserStatus>::cast(), 
+            QmlPrivate::StaticCastSelector<T,QObject>::cast(), 
+            0, 0, parser);
+}
+
 void qmlRegisterCustomParser(const char *qmlName, QmlCustomParser *);
 
 QT_END_NAMESPACE
diff --git a/src/declarative/qml/qmlvme.cpp b/src/declarative/qml/qmlvme.cpp
index 253e9a7..7b3291e 100644
--- a/src/declarative/qml/qmlvme.cpp
+++ b/src/declarative/qml/qmlvme.cpp
@@ -257,6 +257,11 @@ QObject *QmlVME::run(QmlContext *ctxt, QmlCompiledComponent *comp, int start, in
                 if (!o)
                     VME_EXCEPTION("Unable to create object of type" << types.at(instr.create.type).className);
 
+                if (instr.create.data != -1) {
+                    QmlCustomParser *customParser =
+                        types.at(instr.create.type).type->customParser();
+                    customParser->setCustomData(o, datas.at(instr.create.data));
+                }
                 if (!stack.isEmpty()) {
                     QObject *parent = stack.top();
                     o->setParent(parent);
diff --git a/src/declarative/util/qmllistmodel.cpp b/src/declarative/util/qmllistmodel.cpp
index 54aea2c..968e17b 100644
--- a/src/declarative/util/qmllistmodel.cpp
+++ b/src/declarative/util/qmllistmodel.cpp
@@ -53,55 +53,23 @@ QT_BEGIN_NAMESPACE
 #define DATA_ROLE_ID 1
 #define DATA_ROLE_NAME "data"
 
-Q_DECLARE_METATYPE(QListModelInterface *);
-class QmlListModelPrivate
+struct ListInstruction
 {
-public:
-    QmlListModelPrivate(QmlListModel *m)
-        : q(m),
-          type(QmlListModel::Invalid),
-          listModelInterface(0),
-          singleObject(0),
-          roleCacheValid(false)
-    {
-    }
-
-    void clear()
-    {
-        type = QmlListModel::Invalid;
-        model = QVariant();
-        if (listModelInterface) 
-            listModelInterface->disconnect(q);
-        listModelInterface = 0;
-        singleObject = 0;
-        roleCacheValid = false;
-        roleCache.clear();
-    }
-
-    void updateRoleCache()
-    {
-        if (roleCacheValid)
-            return;
-
-        roleCacheValid = true;
-        if (type == QmlListModel::SingleObject) 
-            roleCache = QmlMetaProperty::properties(singleObject);
-    }
-
-    QmlListModel *q;
-    
-    QmlListModel::ModelType type;
-
-    QVariant model;
-    QListModelInterface *listModelInterface;
-    QObject *singleObject;
+    enum { Push, Pop, Value, Set } type;
+    int dataIdx;
+};
 
-    bool roleCacheValid;
-    QStringList roleCache;
+struct ListModelData
+{
+    int dataOffset;
+    int instrCount;
+    ListInstruction *instructions() const { return (ListInstruction *)((char *)this + sizeof(ListModelData)); }
 };
 
+Q_DECLARE_METATYPE(QListModelInterface *);
+
 /*!
-    \qmlclass ListModel QmlListModel
+    \qmlclass ListModel 
     \brief The ListModel element defines a free-form list data source.
 
     The ListModel is a simple XML heirarchy of items containing data roles.
@@ -140,157 +108,6 @@ public:
     <ListView model="{FruitModel}" delegate="{FruitDelegate}" anchors.fill="{parent}"/>
     \endcode
 */
-/*!
-    \internal
-    \class QmlListModel
-*/
-QmlListModel::QmlListModel(QObject *parent)
-: QListModelInterface(parent), d(new QmlListModelPrivate(this))
-{
-}
-
-QmlListModel::~QmlListModel()
-{
-    delete d; d = 0;
-}
-
-QmlListModel::ModelType QmlListModel::modelType() const
-{
-    return d->type;
-}
-
-bool QmlListModel::setModel(const QVariant &model)
-{
-    d->clear();
-
-    QListModelInterface *iface = qvariant_cast<QListModelInterface *>(model);
-    if (iface) {
-        QObject::connect(iface, SIGNAL(itemsInserted(int,int)), 
-                         this, SIGNAL(itemsInserted(int,int)));
-        QObject::connect(iface, SIGNAL(itemsRemoved(int,int)), 
-                         this, SIGNAL(itemsRemoved(int,int)));
-        QObject::connect(iface, SIGNAL(itemsMoved(int,int,int)), 
-                         this, SIGNAL(itemsMoved(int,int,int)));
-        QObject::connect(iface, SIGNAL(itemsChanged(int,int,QList<int>)), 
-                         this, SIGNAL(itemsChanged(int,int,QList<int>)));
-        d->listModelInterface = iface;
-        d->type = ListInterface;
-        d->model = model;
-        return true;
-    } 
-
-    QObject *object = qvariant_cast<QObject *>(model);
-    if (object) {
-        d->singleObject = object;
-        d->type = SingleObject;
-        d->model = model;
-        return true;
-    }
-
-    if (QmlMetaType::isList(model)) {
-        d->type = SimpleList;
-        d->model = model;
-        return true;
-    }
-
-    return false;
-}
-
-QVariant QmlListModel::model() const
-{
-    return d->model;
-}
-
-QList<int> QmlListModel::roles() const
-{
-    d->updateRoleCache();
-    switch(modelType()) {
-    case Invalid:
-        return QList<int>();
-    case SimpleList:
-        return QList<int>() << DATA_ROLE_ID;
-    case ListInterface:
-        return d->listModelInterface->roles();
-    case SingleObject:
-        {
-            QList<int> rv;
-            for (int ii = 0; ii < d->roleCache.count(); ++ii)
-                rv << ii;
-            return rv;
-        }
-        break;
-    };
-    return QList<int>();
-}
-
-QString QmlListModel::toString(int role) const
-{
-    d->updateRoleCache();
-    switch(modelType()) {
-    case Invalid:
-        return QString();
-    case SimpleList:
-        if (role == DATA_ROLE_ID)
-            return QLatin1String(DATA_ROLE_NAME);
-        else
-            return QString();
-    case ListInterface:
-        return d->listModelInterface->toString(role);
-    case SingleObject:
-        if (role >= d->roleCache.count())
-            return QString();
-        else
-            return d->roleCache.at(role);
-    };
-    return QString();
-}
-
-/*!
-    \qmlproperty int ListModel::count
-    This property holds the number of items in the list.
-*/
-int QmlListModel::count() const
-{
-    switch(modelType()) {
-    case Invalid:
-        return 0;
-    case SimpleList:
-        return QmlMetaType::listCount(model());
-    case ListInterface:
-        return d->listModelInterface->count();
-    case SingleObject:
-        return 1;
-    }
-    return 0;
-}
-
-QHash<int,QVariant> QmlListModel::data(int index, const QList<int> &roles) const
-{
-    d->updateRoleCache();
-    QHash<int, QVariant> rv;
-    switch(modelType()) {
-    case Invalid:
-        break;
-    case SimpleList:
-        if (roles.contains(DATA_ROLE_ID))
-            rv.insert(DATA_ROLE_ID, QmlMetaType::listAt(d->model, index));
-        break;
-    case ListInterface:
-        return d->listModelInterface->data(index, roles);
-    case SingleObject: 
-        {
-            for (int ii = 0; ii < roles.count(); ++ii) {
-                QmlMetaProperty prop(d->singleObject, toString(roles.at(ii)));
-                rv.insert(roles.at(ii), prop.read());
-            }
-        }
-        break;
-    };
-
-    return rv;
-}
-
-
 
 struct ModelNode;
 class ListModel : public QListModelInterface
@@ -484,20 +301,181 @@ int ListModel::count() const
     return _root->values.count();
 }
 
-struct ListInstruction
-{
-    enum { Push, Pop, Value, Set } type;
-    int dataIdx;
-};
-
 class ListModelParser : public QmlCustomParser
 {
 public:
     virtual QByteArray compile(QXmlStreamReader& reader, bool *);
+    QByteArray compile(const QList<QmlCustomParserProperty> &, bool *ok);
     virtual QVariant create(const QByteArray &);
+
+    bool compileProperty(const QmlCustomParserProperty &prop, QList<ListInstruction> &instr, QByteArray &data);
+    void setCustomData(QObject *, const QByteArray &);
 };
 QML_DEFINE_CUSTOM_PARSER(ListModel, ListModelParser);
 
+bool ListModelParser::compileProperty(const QmlCustomParserProperty &prop, QList<ListInstruction> &instr, QByteArray &data)
+{
+    QList<QVariant> values = prop.assignedValues();
+    for(int ii = 0; ii < values.count(); ++ii) {
+        const QVariant &value = values.at(ii);
+
+        if(value.userType() == qMetaTypeId<QmlCustomParserNode>()) {
+            QmlCustomParserNode node = 
+                qvariant_cast<QmlCustomParserNode>(value);
+
+            {
+            ListInstruction li;
+            li.type = ListInstruction::Push;
+            li.dataIdx = -1;
+            instr << li;
+            }
+
+            QList<QmlCustomParserProperty> props = node.properties();
+            for(int jj = 0; jj < props.count(); ++jj) {
+                const QmlCustomParserProperty &nodeProp = props.at(jj);
+                if(nodeProp.name() == "")
+                    return false;
+
+                ListInstruction li;
+                int ref = data.count();
+                data.append(nodeProp.name());
+                data.append('\0');
+                li.type = ListInstruction::Set;
+                li.dataIdx = ref;
+                instr << li;
+
+                if(!compileProperty(nodeProp, instr, data))
+                    return false;
+
+                li.type = ListInstruction::Pop;
+                li.dataIdx = -1;
+                instr << li;
+            }
+
+            {
+            ListInstruction li;
+            li.type = ListInstruction::Pop;
+            li.dataIdx = -1;
+            instr << li;
+            }
+
+        } else {
+
+            int ref = data.count();
+            QByteArray d = value.toString().toLatin1();
+            d.append('\0');
+            data.append(d);
+
+            ListInstruction li;
+            li.type = ListInstruction::Value;
+            li.dataIdx = ref;
+            instr << li;
+
+        }
+    }
+
+    return true;
+}
+
+QByteArray ListModelParser::compile(const QList<QmlCustomParserProperty> &customProps, bool *ok)
+{
+    *ok = true;
+    QList<ListInstruction> instr;
+    QByteArray data;
+
+    for(int ii = 0; ii < customProps.count(); ++ii) {
+        const QmlCustomParserProperty &prop = customProps.at(ii);
+        if(prop.name() != "") { // isn't default property
+            *ok = false;
+            return QByteArray();
+        }
+
+        if(!compileProperty(prop, instr, data)) {
+            *ok = false;
+            return QByteArray();
+        }
+    }
+
+    int size = sizeof(ListModelData) + 
+               instr.count() * sizeof(ListInstruction) + 
+               data.count();
+
+    QByteArray rv;
+    rv.resize(size);
+
+    ListModelData *lmd = (ListModelData *)rv.data();
+    lmd->dataOffset = sizeof(ListModelData) + 
+                     instr.count() * sizeof(ListInstruction);
+    lmd->instrCount = instr.count();
+    for (int ii = 0; ii < instr.count(); ++ii)
+        lmd->instructions()[ii] = instr.at(ii);
+    ::memcpy(rv.data() + lmd->dataOffset, data.constData(), data.count());
+
+    return rv;
+}
+
+void ListModelParser::setCustomData(QObject *obj, const QByteArray &d)
+{
+    ListModel *rv = static_cast<ListModel *>(obj);
+
+    ModelNode *root = new ModelNode;
+    rv->_root = root;
+    QStack<ModelNode *> nodes;
+    nodes << root;
+
+    const ListModelData *lmd = (const ListModelData *)d.constData();
+    const char *data = ((const char *)lmd) + lmd->dataOffset;
+
+    for (int ii = 0; ii < lmd->instrCount; ++ii) {
+        const ListInstruction &instr = lmd->instructions()[ii];
+
+        switch(instr.type) {
+        case ListInstruction::Push:
+            {
+                ModelNode *n = nodes.top();
+                ModelNode *n2 = new ModelNode;
+                n->values << qVariantFromValue(n2);
+                nodes.push(n2);
+            }
+            break;
+
+        case ListInstruction::Pop:
+            nodes.pop();
+            break;
+
+        case ListInstruction::Value:
+            {
+                ModelNode *n = nodes.top();
+                n->values.append(QByteArray(data + instr.dataIdx));
+            }
+            break;
+
+        case ListInstruction::Set:
+            {
+                ModelNode *n = nodes.top();
+                ModelNode *n2 = new ModelNode;
+                n->properties.insert(QLatin1String(data + instr.dataIdx), n2);
+                nodes.push(n2);
+            }
+            break;
+        }
+    }
+}
+
+class ListModel2 : public ListModel
+{
+Q_OBJECT
+};
+QML_DECLARE_TYPE(ListModel2);
+QML_DEFINE_CUSTOM_TYPE(ListModel2, ListModel2, ListModelParser);
+
+class ListElement : public QObject
+{
+Q_OBJECT
+};
+QML_DECLARE_TYPE(ListElement);
+QML_DEFINE_TYPE(ListElement,ListElement);
+
 static void dump(ModelNode *node, int ind)
 {
     QByteArray indentBa(ind * 4, ' ');
@@ -534,13 +512,6 @@ ModelNode::~ModelNode()
     if (modelCache) { delete modelCache; modelCache = 0; }
 }
 
-struct ListModelData
-{
-    int dataOffset;
-    int instrCount;
-    ListInstruction *instructions() const { return (ListInstruction *)((char *)this + sizeof(ListModelData)); }
-};
-
 QByteArray ListModelParser::compile(QXmlStreamReader& reader, bool *ok)
 {
     *ok = true;
diff --git a/src/declarative/util/qmllistmodel.h b/src/declarative/util/qmllistmodel.h
index 3dcac4f..36aa009 100644
--- a/src/declarative/util/qmllistmodel.h
+++ b/src/declarative/util/qmllistmodel.h
@@ -57,40 +57,10 @@ QT_BEGIN_HEADER
 QT_BEGIN_NAMESPACE
 
 QT_MODULE(Declarative)
-class QmlListModelPrivate;
-class Q_DECLARATIVE_EXPORT QmlListModel : public QListModelInterface
-{
-Q_OBJECT
-public:
-    QmlListModel(QObject *parent = 0);
-    virtual ~QmlListModel();
-
-    enum ModelType { 
-        Invalid,
-        SimpleList,
-        ListInterface,
-        SingleObject
-    };
-
-    ModelType modelType() const;
-    bool setModel(const QVariant &);
-    QVariant model() const;
-
-    virtual QList<int> roles() const;
-    virtual QString toString(int role) const;
-
-    Q_PROPERTY(int count READ count);
-    virtual int count() const;
-    virtual QHash<int,QVariant> 
-        data(int index, const QList<int> &roles = (QList<int>())) const;
-private:
-    QmlListModelPrivate *d;
-};
-QML_DECLARE_TYPE(QmlListModel);
-
-#endif // QMLLISTMODEL_H
 
 
 QT_END_NAMESPACE
 
 QT_END_HEADER
+
+#endif // QMLLISTMODEL_H
-- 
cgit v0.12


From cc73c1e80b480e378a54ad976933f477ee7a5b9c Mon Sep 17 00:00:00 2001
From: Warwick Allison <warwick.allison@nokia.com>
Date: Thu, 30 Apr 2009 13:08:22 +1000
Subject: Fix smooth scaling

---
 src/declarative/fx/qfxwebview.cpp | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/declarative/fx/qfxwebview.cpp b/src/declarative/fx/qfxwebview.cpp
index 7c05088..05730f9 100644
--- a/src/declarative/fx/qfxwebview.cpp
+++ b/src/declarative/fx/qfxwebview.cpp
@@ -589,7 +589,8 @@ void QFxWebView::paintGLContents(GLPainter &p)
 
 #if defined(QFX_RENDER_QPAINTER)
     bool wasAA = p.testRenderHint(QPainter::Antialiasing);
-    p.setRenderHints(QPainter::Antialiasing, d->smooth);
+    bool wasSM = p.testRenderHint(QPainter::SmoothPixmapTransform);
+    p.setRenderHints(QPainter::Antialiasing | QPainter::SmoothPixmapTransform, d->smooth);
     QRectF clipf = p.clipRegion().boundingRect();
     const QRect clip = p.clipRegion().isEmpty() ? content : clipf.toRect();
 #elif defined(QFX_RENDER_OPENGL)
@@ -656,6 +657,7 @@ void QFxWebView::paintGLContents(GLPainter &p)
     }
 #if defined(QFX_RENDER_QPAINTER)
     p.setRenderHints(QPainter::Antialiasing, wasAA);
+    p.setRenderHints(QPainter::SmoothPixmapTransform, wasSM);
 #endif
 }
 
-- 
cgit v0.12


From 0a4b78de06b60a5fc0a9182687ded099968c4055 Mon Sep 17 00:00:00 2001
From: Martin Jones <martin.jones@nokia.com>
Date: Thu, 30 Apr 2009 13:19:10 +1000
Subject: Documentation for ListView Convert to new format, use \snippet.

---
 doc/src/declarative/pics/ListViewHorizontal.png    | Bin 2519 -> 5802 bytes
 doc/src/declarative/pics/ListViewSections.png      | Bin 0 -> 7596 bytes
 doc/src/declarative/pics/trivialListView.png       | Bin 2387 -> 6160 bytes
 .../listview/dummydata/ContactModel.qml            |  18 +++
 .../snippets/declarative/listview/highlight.qml    |  59 +++++++++
 doc/src/snippets/declarative/listview/listview.qml |  55 ++++++++
 .../declarative/listview/dummydata/MyPetsModel.qml |  47 ++++---
 examples/declarative/listview/sections.qml         |  69 ++++++++++
 src/declarative/fx/qfxlistview.cpp                 | 143 +++++++--------------
 src/declarative/util/qmlstateoperations.cpp        |   1 +
 10 files changed, 275 insertions(+), 117 deletions(-)
 create mode 100644 doc/src/declarative/pics/ListViewSections.png
 create mode 100644 doc/src/snippets/declarative/listview/dummydata/ContactModel.qml
 create mode 100644 doc/src/snippets/declarative/listview/highlight.qml
 create mode 100644 doc/src/snippets/declarative/listview/listview.qml
 create mode 100644 examples/declarative/listview/sections.qml

diff --git a/doc/src/declarative/pics/ListViewHorizontal.png b/doc/src/declarative/pics/ListViewHorizontal.png
index 63c7c86..4633a0e 100644
Binary files a/doc/src/declarative/pics/ListViewHorizontal.png and b/doc/src/declarative/pics/ListViewHorizontal.png differ
diff --git a/doc/src/declarative/pics/ListViewSections.png b/doc/src/declarative/pics/ListViewSections.png
new file mode 100644
index 0000000..9270126
Binary files /dev/null and b/doc/src/declarative/pics/ListViewSections.png differ
diff --git a/doc/src/declarative/pics/trivialListView.png b/doc/src/declarative/pics/trivialListView.png
index 175e455..3782570 100644
Binary files a/doc/src/declarative/pics/trivialListView.png and b/doc/src/declarative/pics/trivialListView.png differ
diff --git a/doc/src/snippets/declarative/listview/dummydata/ContactModel.qml b/doc/src/snippets/declarative/listview/dummydata/ContactModel.qml
new file mode 100644
index 0000000..302dfd2
--- /dev/null
+++ b/doc/src/snippets/declarative/listview/dummydata/ContactModel.qml
@@ -0,0 +1,18 @@
+<!--
+ListModel allows free form list models to be defined and populated.
+Be sure to name the file the same as the id.
+-->
+<ListModel id="ContactModel">
+    <Contact>
+        <name>Bill Smith</name>
+        <number>555 3264</number>
+    </Contact>
+    <Contact>
+        <name>John Brown</name>
+        <number>555 8426</number>
+    </Contact>
+    <Contact>
+        <name>Sam Wise</name>
+        <number>555 0473</number>
+    </Contact>
+</ListModel>
diff --git a/doc/src/snippets/declarative/listview/highlight.qml b/doc/src/snippets/declarative/listview/highlight.qml
new file mode 100644
index 0000000..d8bbb22
--- /dev/null
+++ b/doc/src/snippets/declarative/listview/highlight.qml
@@ -0,0 +1,59 @@
+Rect {
+    width: 180
+    height: 200
+    color: "white"
+    // ContactModel model is defined in dummydata/ContactModel.qml
+    // The viewer automatically loads files in dummydata/* to assist
+    // development without a real data source.
+
+    // Define a delegate component.  A component will be
+    // instantiated for each visible item in the list.
+//! [0]
+    Component {
+        id: Delegate
+        Item {
+            id: Wrapper
+            width: 180
+            height: 40
+            VerticalLayout {
+                x: 5; y: 5
+                Text {
+                    text: '<b>Name:</b> ' + name
+                }
+                Text {
+                    text: '<b>Number:</b> ' + number
+                }
+            }
+        }
+    }
+//! [0]
+    // Specify a highlight with custom movement.  Note that autoHighlight
+    // is set to false in the ListView so that we can control how the
+    // highlight moves to the current item.
+//! [1]
+    Component {
+        id: Highlight
+        Rect {
+            width: 180
+            height: 40
+            color: "lightsteelblue"
+            radius: 5
+            y: Follow {
+                source: List.current.y
+                spring: 3
+                damping: 0.1
+            }
+        }
+    }
+    ListView {
+        id: List
+        width: 180
+        height: parent.height
+        model: ContactModel
+        delegate: Delegate
+        highlight: Highlight
+        autoHighlight: false
+        focus: true
+    }
+//! [1]
+}
diff --git a/doc/src/snippets/declarative/listview/listview.qml b/doc/src/snippets/declarative/listview/listview.qml
new file mode 100644
index 0000000..5b99bbd
--- /dev/null
+++ b/doc/src/snippets/declarative/listview/listview.qml
@@ -0,0 +1,55 @@
+//! [3]
+Rect {
+    width: 480
+    height: 40
+    color: "white"
+    // ContactModel model is defined in dummydata/ContactModel.qml
+    // The viewer automatically loads files in dummydata/* to assist
+    // development without a real data source.
+
+    // Define a delegate component.  A component will be
+    // instantiated for each visible item in the list.
+//! [0]
+    Component {
+        id: Delegate
+        Item {
+            id: Wrapper
+            width: 180
+            height: 40
+            VerticalLayout {
+                x: 5; y: 5
+                Text {
+                    text: '<b>Name:</b> ' + name
+                }
+                Text {
+                    text: '<b>Number:</b> ' + number
+                }
+            }
+        }
+    }
+//! [0]
+    // Define a highlight component.  Just one of these will be instantiated
+    // by each ListView and placed behind the current item.
+//! [1]
+    Component {
+        id: Highlight
+        Rect {
+            color: "lightsteelblue"
+            radius: 5
+        }
+    }
+//! [1]
+    // The actual list
+//! [2]
+    ListView {
+        width: 480
+        height: parent.height
+        model: ContactModel
+        delegate: Delegate
+        highlight: Highlight
+        focus: true
+        orientation: 'Horizontal'
+    }
+//! [2]
+}
+//! [3]
diff --git a/examples/declarative/listview/dummydata/MyPetsModel.qml b/examples/declarative/listview/dummydata/MyPetsModel.qml
index 5af7fbf..e1617a3 100644
--- a/examples/declarative/listview/dummydata/MyPetsModel.qml
+++ b/examples/declarative/listview/dummydata/MyPetsModel.qml
@@ -4,48 +4,57 @@ Be sure to name the file the same as the id.
 -->
 <ListModel id="MyPetsModel">
     <Pet>
-        <name>Rover</name>
-        <type>Dog</type>
-        <age>5</age>
+        <name>Polly</name>
+        <type>Parrot</type>
+        <age>12</age>
+        <size>Small</size>
     </Pet>
     <Pet>
-        <name>Whiskers</name>
-        <type>Cat</type>
-        <age>2</age>
+        <name>Penny</name>
+        <type>Turtle</type>
+        <age>4</age>
+        <size>Small</size>
     </Pet>
     <Pet>
         <name>Warren</name>
         <type>Rabbit</type>
         <age>2</age>
-    </Pet>
-    <Pet>
-        <name>Polly</name>
-        <type>Parrot</type>
-        <age>12</age>
+        <size>Small</size>
     </Pet>
     <Pet>
         <name>Spot</name>
         <type>Dog</type>
         <age>9</age>
+        <size>Medium</size>
     </Pet>
     <Pet>
-        <name>Tiny</name>
-        <type>Elephant</type>
-        <age>15</age>
-    </Pet>
-    <Pet>
-        <name>Penny</name>
-        <type>Turtle</type>
-        <age>4</age>
+        <name>Whiskers</name>
+        <type>Cat</type>
+        <age>2</age>
+        <size>Medium</size>
     </Pet>
     <Pet>
         <name>Joey</name>
         <type>Kangaroo</type>
         <age>1</age>
+        <size>Medium</size>
     </Pet>
     <Pet>
         <name>Kimba</name>
         <type>Bunny</type>
         <age>65</age>
+        <size>Large</size>
+    </Pet>
+    <Pet>
+        <name>Rover</name>
+        <type>Dog</type>
+        <age>5</age>
+        <size>Large</size>
+    </Pet>
+    <Pet>
+        <name>Tiny</name>
+        <type>Elephant</type>
+        <age>15</age>
+        <size>Large</size>
     </Pet>
 </ListModel>
diff --git a/examples/declarative/listview/sections.qml b/examples/declarative/listview/sections.qml
new file mode 100644
index 0000000..60acd62
--- /dev/null
+++ b/examples/declarative/listview/sections.qml
@@ -0,0 +1,69 @@
+//! [0]
+Rect {
+    width: 200
+    height: 240
+    color: "white"
+    // MyPets model is defined in dummydata/MyPetsModel.qml
+    // The viewer automatically loads files in dummydata/* to assist
+    // development without a real data source.
+    // This one contains my pets.
+
+    // Define a delegate component that includes a separator for sections.
+    Component {
+        id: PetDelegate
+        Item {
+            id: Wrapper
+            width: 200
+            // My height is the combined height of the description and the section separator
+            height: Separator.height + Desc.height
+            Rect {
+                id: Separator
+                color: "lightsteelblue"
+                width: parent.width
+                // Only show the section separator when we are the beginning of a new section
+                // Note that for this to work nicely, the list must be ordered by section.
+                height: Wrapper.ListView.prevSection != Wrapper.ListView.section ? 20 : 0
+                opacity: Wrapper.ListView.prevSection != Wrapper.ListView.section ? 1 : 0
+                Text {
+                    text: Wrapper.ListView.section; font.bold: true
+                    x: 2; height: parent.height; vAlign: 'AlignVCenter'
+                }
+            }
+            Item {
+                id: Desc
+                x: 5
+                height: Layout.height + 4
+                anchors.top: Separator.bottom
+                VerticalLayout {
+                    id: Layout
+                    y: 2
+                    Text { text: 'Name: ' + name }
+                    Text { text: 'Type: ' + type }
+                    Text { text: 'Age: ' + age }
+                }
+            }
+        }
+    }
+    // Define a highlight component.  Just one of these will be instantiated
+    // by each ListView and placed behind the current item.
+    Component {
+        id: PetHighlight
+        Rect {
+            color: "#FFFF88"
+        }
+    }
+    // The list
+    ListView {
+        id: List
+        width: 200
+        height: parent.height
+        model: MyPetsModel
+        delegate: PetDelegate
+        highlight: PetHighlight
+        // The sectionExpression is simply the size of the pet.
+        // We use this to determine which section we are in above.
+        sectionExpression: "size"
+        focus: true
+    }
+}
+//! [0]
diff --git a/src/declarative/fx/qfxlistview.cpp b/src/declarative/fx/qfxlistview.cpp
index 0724e3a..13e5b21 100644
--- a/src/declarative/fx/qfxlistview.cpp
+++ b/src/declarative/fx/qfxlistview.cpp
@@ -798,37 +798,23 @@ void QFxListViewPrivate::fixupX()
     \brief The ListView element provides a list view of items provided by a model.
 
     The model is typically provided by a QAbstractListModel "C++ model object", but can also be created directly in XML.
-
     The items are laid out vertically or horizontally and may be flicked to scroll.
 
     The below example creates a very simple vertical list, using an XML model.
     \image trivialListView.png
-    \code
-    <resources>
-        <ListModel id="contactModel">
-            <Contact>
-                <firstName>John</firstName>
-                <lastName>Smith</lastName>
-            </Contact>
-            <Contact>
-                <firstName>Bill</firstName>
-                <lastName>Jones</lastName>
-            </Contact>
-            <Contact>
-                <firstName>Jane</firstName>
-                <lastName>Doe</lastName>
-            </Contact>
-            </ListModel>
-            <Component id="contactDelegate">
-                <Rect pen.color="blue" z="-1" height="20" width="80" color="white" radius="2">
-                    <Text id="name" text="{firstName + ' ' + lastName}" font.size="11"/>
-                </Rect>
-        </Component>
-    </resources>
-
-    <ListView id="list" width="320" height="240" clip="true"
-                model="{contactModel}" delegate="{contactDelegate}"/>
-    \endcode
+
+    The user interface defines a delegate to display an item, a highlight,
+    and the ListView which uses the above.
+
+    \snippet doc/src/snippets/declarative/listview/listview.qml 3
+
+    The model is defined as a ListModel using XML:
+    \quotefromfile doc/src/snippets/declarative/listview/dummydata/ContactModel.qml
+    \skipto <ListModel
+    \printuntil </ListModel
+
+    In this case ListModel is a handy way for us to test our UI.  In practice
+    the model would be implemented in C++, or perhaps via a SQL data source.
 */
 
 QFxListView::QFxListView(QFxItem *parent)
@@ -854,25 +840,7 @@ QFxListView::~QFxListView()
     The C++ model object must be a \l QListModelInterface subclass, a \l VisualModel,
     or a simple list.
 
-    Models can also be created directly in XML, using the \l ListModel element. For example:
-    \code
-    <ListModel id="contactModel">
-        <Contact>
-            <firstName>John</firstName>
-            <lastName>Smith</lastName>
-        </Contact>
-        <Contact>
-            <firstName>Bill</firstName>
-            <lastName>Jones</lastName>
-        </Contact>
-        <Contact>
-            <firstName>Jane</firstName>
-            <lastName>Doe</lastName>
-        </Contact>
-    </ListModel>
-
-    <ListView model="{contactModel}" .../>
-    \endcode
+    Models can also be created directly in XML, using the \l ListModel element.
 */
 QVariant QFxListView::model() const
 {
@@ -922,17 +890,7 @@ void QFxListView::setModel(const QVariant &model)
     The delegate provides a template describing what each item in the view should look and act like.
 
     Here is an example delegate:
-    \code
-    <Component id="contactDelegate">
-        <Item id="wrapper">
-            <Image id="pic" width="100" height="100" file="{portrait}"/>
-            <Text id="name" text="{firstName + ' ' + lastName}"
-                    anchors.left="{pic.right}" anchors.leftMargin="5"/>
-        </Item>
-    </Component>
-    ...
-    <ListView delegate="{contactDelegate}" .../>
-    \endcode
+    \snippet doc/src/snippets/declarative/listview/listview.qml 0
 */
 QmlComponent *QFxListView::delegate() const
 {
@@ -1012,13 +970,9 @@ int QFxListView::count() const
 
     The below example demonstrates how to make a simple highlight
     for a vertical list.
-    \code
-    <Component id="ListHighlight">
-        <Rect color="lightsteelblue" radius="4"/>
-    </Component>
-    <ListView highlight="{ListHighlight}">
-    \endcode
-    \image ListViewHighlight.png
+
+    \snippet doc/src/snippets/declarative/listview/listview.qml 1
+    \image trivialListView.png
 
     \sa autoHighlight
 */
@@ -1043,17 +997,12 @@ void QFxListView::setHighlight(QmlComponent *highlight)
     If autoHighlight is true, the highlight will be moved smoothly
     to follow the current item.  If autoHighlight is false, the
     highlight will not be moved by the view, and must be implemented
-    by the highlight, for example:
-
-    \code
-    <Component id="Highlight">
-        <Rect id="Wrapper" color="#242424" radius="4" width="320" height="60" >
-            <y>
-                <Follow source="{Wrapper.ListView.view.current.y}" spring="3" damping="0.2"/>
-            </y>
-        </Rect>
-    </Component>
-    \endcode
+    by the highlight.  The following example creates a highlight with
+    its motion defined by the spring \l {Follow}:
+
+    \snippet doc/src/snippets/declarative/listview/highlight.qml 1
+
+    \sa highlight
 */
 bool QFxListView::autoHighlight() const
 {
@@ -1079,11 +1028,18 @@ void QFxListView::setAutoHighlight(bool autoHighlight)
     The modes supported are:
     \list
     \i Free - For Mouse, the current item may be positioned anywhere,
-    whether within the visible area, or outside.  during Keyboard interaction,
+    whether within the visible area, or outside.  During Keyboard interaction,
     the current item can move within the visible area, and the view will
     scroll to keep the highlight visible.
-    \i Snap -
-    \i SnapAuto -
+    \i Snap - For mouse, the current item may be positioned anywhere,
+    whether within the visible area, or outside.  During keyboard interaction,
+    the current item will be kept in the visible area and will prefer to be
+    positioned at the \l snapPosition, however the view will never scroll
+    beyond the beginning or end of the view.
+    \i SnapAuto - For both mouse and keyboard, the current item will be
+    kept at the \l {snapPosition}. Additionally, if the view is dragged or
+    flicked, the current item will be automatically updated to be the item
+    currently at the snapPosition.
     \endlist
 */
 QFxListView::CurrentItemPositioning QFxListView::currentItemPositioning() const
@@ -1121,10 +1077,10 @@ void QFxListView::setSnapPosition(int pos)
     \qmlproperty enumeration ListView::orientation
     This property holds the orientation of the list.
 
-    Possible values are \c Qt::Vertical (default) and \c Qt::Horizontal.
+    Possible values are \c Vertical (default) and \c Horizontal.
 
     Vertical Example:
-    \image ListViewVertical.png
+    \image trivialListView.png
     Horizontal Example:
     \image ListViewHorizontal.png
 */
@@ -1205,24 +1161,15 @@ void QFxListView::setCacheBuffer(int b)
     \qmlproperty string ListView::sectionExpression
     This property holds the expression to be evaluated for the section attached property.
 
-    Each item in the list has attached properties named \c section and
-    \c prevSection.  These may be used to place a section header for
-    related items.  The example below assumes that the model is alphabetically
-    sorted.  The section expression is the first character of the \c description
-    property.  If \c section and \c prevSection differ, the item will
-    display a section header.
-
-    \code
-    <Component id="Delegate">
-        <Item id="wrapper" x="0" width="240" height="{Separator.height + Desc.height}">
-            <Item id="Separator" height="{wrapper.ListView.prevSection != wrapper.ListView.section ? 10 : 0}" width="240">
-                <Text text="{wrapper.ListView.section}" anchors.fill="{parent}"/>
-            </Item>
-            <Text id="Desc" text="{description} width="{parent.width}" height="30"/>
-        </Item>
-    </Component>
-    <ListView anchors.fill="{parent}" sectionExpression="{String(description).charAt(0)}" delegate="{Delegate}" model="{Model}"/>
-    \endcode
+    Each item in the list has attached properties named \c ListView.section and
+    \c ListView.prevSection.  These may be used to place a section header for
+    related items.  The example below assumes that the model is sorted by size of
+    pet.  The section expression is the size property.  If \c ListView.section and
+    \c ListView.prevSection differ, the item will display a section header.
+
+    \snippet examples/declarative/listview/sections.qml 0
+
+    \image ListViewSections.png
 */
 QString QFxListView::sectionExpression() const
 {
diff --git a/src/declarative/util/qmlstateoperations.cpp b/src/declarative/util/qmlstateoperations.cpp
index 8a10ca3..755befe 100644
--- a/src/declarative/util/qmlstateoperations.cpp
+++ b/src/declarative/util/qmlstateoperations.cpp
@@ -59,6 +59,7 @@ public:
 };
 
 /*!
+    \preliminary
     \qmlclass ParentChange
     \brief The ParentChange element allows you to reparent an object in a state.
 */
-- 
cgit v0.12


From 63fd040014fa21a9e59466781b835d4188965559 Mon Sep 17 00:00:00 2001
From: Warwick Allison <warwick.allison@nokia.com>
Date: Thu, 30 Apr 2009 13:42:33 +1000
Subject: Don't delay initial resize (otherwise "default" widget size happens
 first)

---
 src/declarative/util/qfxview.cpp | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/declarative/util/qfxview.cpp b/src/declarative/util/qfxview.cpp
index 42047b6..5611bca 100644
--- a/src/declarative/util/qfxview.cpp
+++ b/src/declarative/util/qfxview.cpp
@@ -265,7 +265,7 @@ void QFxView::continueExecute()
             d->root = item;
             connect(item, SIGNAL(widthChanged()), this, SLOT(sizeChanged()));
             connect(item, SIGNAL(heightChanged()), this, SLOT(sizeChanged()));
-            sizeChanged();
+            emit sceneResized(QSize(d->root->width(),d->root->height()));
         } else if (QWidget *wid = qobject_cast<QWidget *>(obj)) {
             window()->setAttribute(Qt::WA_OpaquePaintEvent, false);
             window()->setAttribute(Qt::WA_NoSystemBackground, false);
-- 
cgit v0.12


From 4e01e6107c4228912fba90ba682a7c0620d92dcb Mon Sep 17 00:00:00 2001
From: Warwick Allison <warwick.allison@nokia.com>
Date: Thu, 30 Apr 2009 13:47:01 +1000
Subject: fix

---
 examples/declarative/slideswitch/Switch.qml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/examples/declarative/slideswitch/Switch.qml b/examples/declarative/slideswitch/Switch.qml
index a3f75e8..5862646 100644
--- a/examples/declarative/slideswitch/Switch.qml
+++ b/examples/declarative/slideswitch/Switch.qml
@@ -46,7 +46,7 @@ Item {
     MouseRegion {
         anchors.fill: Knob
         onClicked: { toggle() }
-        onReleased: { if (!isClick) dorelease() }
+        onReleased: { dorelease() }
         drag.target: Knob
         drag.axis: "x"
         drag.xmin: 1
-- 
cgit v0.12


From 26a6905e8feed42c0886b9ceef96456f2375deee Mon Sep 17 00:00:00 2001
From: Warwick Allison <warwick.allison@nokia.com>
Date: Thu, 30 Apr 2009 13:47:41 +1000
Subject: Change syntax

---
 examples/declarative/webview/autosize.qml     | 101 +++++++++++++++-----------
 examples/declarative/webview/inline-html.qml  |  25 +++----
 examples/declarative/webview/inline-xhtml.qml |  14 ----
 examples/declarative/webview/qml-in-html.qml  |  50 ++++++++-----
 examples/declarative/webview/transparent.qml  |  17 +++--
 5 files changed, 112 insertions(+), 95 deletions(-)
 delete mode 100644 examples/declarative/webview/inline-xhtml.qml

diff --git a/examples/declarative/webview/autosize.qml b/examples/declarative/webview/autosize.qml
index fedd497..c32b752 100644
--- a/examples/declarative/webview/autosize.qml
+++ b/examples/declarative/webview/autosize.qml
@@ -1,42 +1,59 @@
-<!-- The WebView size is determined by the width, height,
-     idealWidth, and idealHeight properties. -->
-<Rect id="Rect" color="white" width="200" height="{Layout.height}">
-    <VerticalLayout id="Layout" spacing="2">
-        <WebView>
-            <html><![CDATA[
-                No width defined.
-            ]]></html>
-            <Rect color="#10000000" anchors.fill="{parent}"/>
-        </WebView>
-        <WebView width="{Rect.width}">
-            <html><![CDATA[
-                The width is full.
-            ]]></html>
-            <Rect color="#10000000" anchors.fill="{parent}"/>
-        </WebView>
-        <WebView width="{Rect.width/2}">
-            <html><![CDATA[
-                The width is half.
-            ]]></html>
-            <Rect color="#10000000" anchors.fill="{parent}"/>
-        </WebView>
-        <WebView idealWidth="{Rect.width/2}">
-            <html><![CDATA[
-                The idealWidth is half.
-            ]]></html>
-            <Rect color="#10000000" anchors.fill="{parent}"/>
-        </WebView>
-        <WebView idealWidth="{Rect.width/2}">
-            <html><![CDATA[
-                The_idealWidth_is_half.
-            ]]></html>
-            <Rect color="#10000000" anchors.fill="{parent}"/>
-        </WebView>
-        <WebView width="{Rect.width/2}">
-            <html><![CDATA[
-                The_width_is_half.
-            ]]></html>
-            <Rect color="#10000000" anchors.fill="{parent}"/>
-        </WebView>
-    </VerticalLayout>
-</Rect>
+// The WebView size is determined by the width, height,
+// idealWidth, and idealHeight properties.
+Rect {
+    id: Rect
+    color: "white"
+    width: 200
+    height: Layout.height
+    VerticalLayout {
+        id: Layout
+        spacing: 2
+        WebView {
+            html: "No width defined."
+            Rect {
+                color: "#10000000"
+                anchors.fill: parent
+            }
+        }
+        WebView {
+            width: Rect.width
+            html: "The width is full."
+            Rect {
+                color: "#10000000"
+                anchors.fill: parent
+            }
+        }
+        WebView {
+            width: Rect.width/2
+            html: "The width is half."
+            Rect {
+                color: "#10000000"
+                anchors.fill: parent
+            }
+        }
+        WebView {
+            idealWidth: Rect.width/2
+            html: "The idealWidth is half."
+            Rect {
+                color: "#10000000"
+                anchors.fill: parent
+            }
+        }
+        WebView {
+            idealWidth: Rect.width/2
+            html: "The_idealWidth_is_half."
+            Rect {
+                color: "#10000000"
+                anchors.fill: parent
+            }
+        }
+        WebView {
+            width: Rect.width/2
+            html: "The_width_is_half."
+            Rect {
+                color: "#10000000"
+                anchors.fill: parent
+            }
+        }
+    }
+}
diff --git a/examples/declarative/webview/inline-html.qml b/examples/declarative/webview/inline-html.qml
index 701db41..5f6d410 100644
--- a/examples/declarative/webview/inline-html.qml
+++ b/examples/declarative/webview/inline-html.qml
@@ -1,13 +1,12 @@
-<!-- Inline HTML with loose formatting can be
-     set on the html property by using CDATA. -->
-<WebView>
-    <html><![CDATA[
-        <body bgcolor="white">
-        <table border=1>
-            <tr><th><th>One<th>Two<th>Three
-            <tr><th>1<td>X<td>1<td>X
-            <tr><th>2<td>0<td>X<td>0
-            <tr><th>3<td>X<td>1<td>X
-        </table>
-    ]]></html>
-</WebView>
+// Inline HTML with loose formatting can be
+// set on the html property.
+WebView {
+    html:"\
+        <body bgcolor=white>\
+        <table border=1>\
+            <tr><th><th>One<th>Two<th>Three\
+            <tr><th>1<td>X<td>1<td>X\
+            <tr><th>2<td>0<td>X<td>0\
+            <tr><th>3<td>X<td>1<td>X\
+        </table>"
+}
diff --git a/examples/declarative/webview/inline-xhtml.qml b/examples/declarative/webview/inline-xhtml.qml
deleted file mode 100644
index 4acb417..0000000
--- a/examples/declarative/webview/inline-xhtml.qml
+++ /dev/null
@@ -1,14 +0,0 @@
-<!-- Inline xHTML (with strict XML formatting) can be
-     set on the html property by giving it the appropriate namespace. -->
-<WebView>
-    <html xmlns="http://www.w3.org/1999/xhtml">
-        <body bgcolor="white">
-        <table border="1">
-            <tr><th></th><th>One</th><th>Two</th><th>Three</th></tr>
-            <tr><th>1</th><td>X</td><td>1</td><td>X</td></tr>
-            <tr><th>2</th><td>0</td><td>X</td><td>0</td></tr>
-            <tr><th>3</th><td>X</td><td>1</td><td>X</td></tr>
-        </table>
-        </body>
-    </html>
-</WebView>
diff --git a/examples/declarative/webview/qml-in-html.qml b/examples/declarative/webview/qml-in-html.qml
index 8c1c06f..29dded5 100644
--- a/examples/declarative/webview/qml-in-html.qml
+++ b/examples/declarative/webview/qml-in-html.qml
@@ -1,20 +1,30 @@
-<!-- The WebView supports QML data through the HTML OBJECT tag --> 
-<Flickable width="{250*.75}" height="240"
-    viewportWidth="{Web.width*Web.scale}" viewportHeight="{Web.height*Web.scale}">
-<WebView id="Web" width="250" height="420" scale="0.75" settings.pluginsEnabled="true">
-    <html><![CDATA[
-        <html>
-        <body bgcolor=white>
-        These are QML plugins, shown in a QML WebView via HTML OBJECT tags, all scaled to 75%
-        and placed in a Flickable area...
-        <table border=1>
-        <tr><th>Duration <th>Color <th>Plugin
-        <tr><td>500      <td>red   <td><OBJECT data=content/SpinSquare.qml TYPE=application/x-qt-plugin width=100 height=100 period=500 color=red />
-        <tr><td>2000     <td>blue  <td><OBJECT data=content/SpinSquare.qml TYPE=application/x-qt-plugin width=100 height=100 period=2000 color=blue />
-        <tr><td>1000     <td>green <td><OBJECT data=content/SpinSquare.qml TYPE=application/x-qt-plugin width=100 height=100 period=1000 color=green />
-        </table>
-        </body>
-        </html>
-    ]]></html>
-</WebView>
-</Flickable>
+// The WebView supports QML data through the HTML OBJECT tag
+Rect {
+    color:"blue"
+    Flickable {
+        width: parent.width
+        height: parent.height/2
+        viewportWidth: Web.width*Web.scale
+        viewportHeight: Web.height*Web.scale
+        WebView {
+            id: Web
+            width: 250
+            height: 420
+            scale: 0.75
+            smooth: true
+            settings.pluginsEnabled: true
+            html: "<html>\
+                <body bgcolor=white>\
+                    These are QML plugins, shown in a QML WebView via HTML OBJECT tags, all scaled to 75%\
+                    and placed in a Flickable area...\
+                    <table border=1>\
+                        <tr><th>Duration <th>Color <th>Plugin\
+                        <tr><td>500      <td>red   <td><OBJECT data=content/SpinSquare.qml TYPE=application/x-qt-plugin width=100 height=100 period=500 color=red />\
+                        <tr><td>2000     <td>blue  <td><OBJECT data=content/SpinSquare.qml TYPE=application/x-qt-plugin width=100 height=100 period=2000 color=blue />\
+                        <tr><td>1000     <td>green <td><OBJECT data=content/SpinSquare.qml TYPE=application/x-qt-plugin width=100 height=100 period=1000 color=green />\
+                    </table>\
+                </body>\
+                </html>"
+        }
+    }
+}
diff --git a/examples/declarative/webview/transparent.qml b/examples/declarative/webview/transparent.qml
index 71e1621..8614822 100644
--- a/examples/declarative/webview/transparent.qml
+++ b/examples/declarative/webview/transparent.qml
@@ -1,6 +1,11 @@
-<!-- The WebView background is transparent
-     if the HTML does not specify a background -->
-
-<Rect color="green" width="{Web.width}" height="{Web.height}">
-    <WebView id="Web" html="Hello &lt;b&gt;World!&lt;/b&gt;"/>
-</Rect>
+// The WebView background is transparent
+// if the HTML does not specify a background
+Rect {
+    color: "green"
+    width: Web.width
+    height: Web.height
+    WebView {
+        id: Web
+        html: "Hello <b>World!</b>"
+    }
+}
-- 
cgit v0.12


From 7ab8748f4b95c257dc5aebeb9f83a568aeca9910 Mon Sep 17 00:00:00 2001
From: Warwick Allison <warwick.allison@nokia.com>
Date: Thu, 30 Apr 2009 13:52:14 +1000
Subject: Port syntax

---
 examples/declarative/follow/pong.qml | 180 +++++++++++++++++++++++++----------
 1 file changed, 128 insertions(+), 52 deletions(-)

diff --git a/examples/declarative/follow/pong.qml b/examples/declarative/follow/pong.qml
index 4fbf323..b6695bd 100644
--- a/examples/declarative/follow/pong.qml
+++ b/examples/declarative/follow/pong.qml
@@ -1,55 +1,131 @@
-<Rect id="Page" width="640" height="480" color="#000000">
-    <!-- Make a ball to bounce -->
-    <Rect id="Ball" x="20" width="20" height="20" color="#00ee00" z="1">
-        <properties>
-            <!-- Add a property for the target y coordinate -->
-            <Property name="targetY" value="{Page.height-10}"/>
-            <Property name="direction" value="right"/>
-        </properties>
-        <x>
-            <!-- Move the ball to the right and back to the left repeatedly -->
-            <SequentialAnimation running="true" repeat="true">
-                <NumericAnimation to="{Page.width-40}" duration="2000"/>
-                <SetPropertyAction target="{Ball}" property="direction" value="left"/>
-                <NumericAnimation to="20" duration="2000"/>
-                <SetPropertyAction target="{Ball}" property="direction" value="right"/>
-            </SequentialAnimation>
-        </x>
-        <y>
-            <!-- Make y follow the target y coordinate, with a velocity of 200 -->
-            <Follow source="{Ball.targetY}" velocity="200"/>
-        </y>
-        <onTopChanged>
-            <!-- Detect the ball hitting the top or bottom of the view and bounce it -->
-            if (y &lt;= 0)
+Rect {
+    id: Page
+    width: 640
+    height: 480
+    color: "#000000"
+
+    // Make a ball to bounce
+    Rect {
+        id: Ball
+        x: 20
+        width: 20
+        height: 20
+        color: "#00ee00"
+        z: 1
+
+        // Add a property for the target y coordinate
+        properties: Property {
+            name: "targetY"
+            value: Page.height-10
+        }
+        properties: Property {
+            name: "direction"
+            value: "right"
+        }
+
+        // Move the ball to the right and back to the left repeatedly
+        x: SequentialAnimation {
+            running: true
+            repeat: true
+            NumericAnimation {
+                to: Page.width-40
+                duration: 2000
+            }
+            SetPropertyAction {
+                target: Ball
+                property: "direction"
+                value: "left"
+            }
+            NumericAnimation {
+                to: 20
+                duration: 2000
+            }
+            SetPropertyAction {
+                target: Ball
+                property: "direction"
+                value: "right"
+            }
+        }
+
+        // Make y follow the target y coordinate, with a velocity of 200
+        y: Follow {
+            source: Ball.targetY
+            velocity: 200
+        }
+
+        // Detect the ball hitting the top or bottom of the view and bounce it
+        onTopChanged: {
+            if (y <= 0)
                 targetY = Page.height-20;
-            else if (y &gt;= Page.height-20)
+            else if (y >= Page.height-20)
                 targetY = 0;
-        </onTopChanged>
-    </Rect>
-    <!--
-    Place bats to the left and right of the view, following the y
-    coordinates of the ball.
-    -->
-    <Rect id="LeftBat" color="#00ee00" x="2" width="20" height="90">
-        <y>
-            <Follow source="{Ball.y-45}" velocity="300" enabled="{Ball.direction == 'left'}"/>
-        </y>
-    </Rect>
-    <Rect id="RightBat" x="{Page.width-22}" color="#00ee00" width="20" height="90">
-        <y>
-            <Follow source="{Ball.y-45}" velocity="300" enabled="{Ball.direction == 'right'}"/>
-        </y>
-    </Rect>
+        }
+    }
+
+    // Place bats to the left and right of the view, following the y
+    // coordinates of the ball.
+    Rect {
+        id: LeftBat
+        color: "#00ee00"
+        x: 2
+        width: 20
+        height: 90
+        y: Follow {
+            source: Ball.y-45
+            velocity: 300
+            enabled: Ball.direction == 'left'
+        }
+    }
+    Rect {
+        id: RightBat
+        x: Page.width-22
+        color: "#00ee00"
+        width: 20
+        height: 90
+        y: Follow {
+            source: Ball.y-45
+            velocity: 300
+            enabled: Ball.direction == 'right'
+        }
+    }
 
-    <!--
-    The rest, to make it look realistic, if neither ever scores...
-    -->
-    <Rect color="#00ee00" width="40" height="60" x="{320-80}"/>
-    <Rect color="#000000" width="20" height="40"  x="{320-70}" y="10"/>
-    <Rect color="#00ee00" width="40" height="60" x="{320+40}"/>
-    <Rect color="#000000" width="20" height="40"  x="{320+50}" y="10"/>
-    <Repeater dataSource="{24}">
-        <Rect color="#00ee00" width="10" height="10" x="{320-5}" y="{index*20}"/>
-    </Repeater>
-</Rect>
+    // The rest, to make it look realistic, if neither ever scores...
+    Rect {
+        color: "#00ee00"
+        x: 320-80
+        y: 0
+        width: 40
+        height: 60
+    }
+    Rect {
+        color: "#000000"
+        x: 320-70
+        y: 10
+        width: 20
+        height: 40
+    }
+    Rect {
+        color: "#00ee00"
+        x: 320+40
+        y: 0
+        width: 40
+        height: 60
+    }
+    Rect {
+        color: "#000000"
+        x: 320+50
+        y: 10
+        width: 20
+        height: 40
+    }
+    Repeater {
+        dataSource: 24
+        Rect {
+            color: "#00ee00"
+            x: 320-5
+            y: index*20
+            width: 10
+            height: 10
+        }
+    }
+}
-- 
cgit v0.12


From 5ddb12ac5babbdabe9375fa79f80655e987f459d Mon Sep 17 00:00:00 2001
From: Warwick Allison <warwick.allison@nokia.com>
Date: Thu, 30 Apr 2009 13:57:02 +1000
Subject: Port syntax

---
 .../declarative/webview/content/SpinSquare.qml     | 41 +++++++++++++++-------
 1 file changed, 29 insertions(+), 12 deletions(-)

diff --git a/examples/declarative/webview/content/SpinSquare.qml b/examples/declarative/webview/content/SpinSquare.qml
index ced45d5..5c14506 100644
--- a/examples/declarative/webview/content/SpinSquare.qml
+++ b/examples/declarative/webview/content/SpinSquare.qml
@@ -1,12 +1,29 @@
-<Item id="Root">
-    <properties>
-        <Property name="period" value="250"/>
-        <Property name="color" value="black"/>
-    </properties>
-    <Item x="{Root.width/2}" y="{Root.height/2}">
-        <Rect color="{Root.color}" width="{Root.width}" height="{width}" x="{-width/2}" y="{-height/2}"/>
-        <rotation>
-            <NumericAnimation from="0" to="360" repeat="true" running="true" duration="{Root.period}"/>
-        </rotation>
-    </Item>
-</Item>
+Item {
+    id: Root
+    properties: Property {
+        name: "period"
+        value: 250
+    }
+    properties: Property {
+        name: "color"
+        value: "black"
+    }
+    Item {
+        x: Root.width/2
+        y: Root.height/2
+        Rect {
+            color: Root.color
+            x: -width/2
+            y: -height/2
+            width: Root.width
+            height: width
+        }
+        rotation: NumericAnimation {
+            from: 0
+            to: 360
+            repeat: true
+            running: true
+            duration: Root.period
+        }
+    }
+}
-- 
cgit v0.12


From 9b08198a1bac0347767a426ddc53d5ebe903b1a7 Mon Sep 17 00:00:00 2001
From: Warwick Allison <warwick.allison@nokia.com>
Date: Thu, 30 Apr 2009 13:57:20 +1000
Subject: Namespaces not needed in new syntax.

---
 examples/declarative/namespaces/BlueStuff/Rect.qml    |   1 -
 examples/declarative/namespaces/Local.qml             |   1 -
 examples/declarative/namespaces/components.qml        |  17 -----------------
 examples/declarative/namespaces/lib/Chronos/Clock.qml |  15 ---------------
 examples/declarative/namespaces/lib/Chronos/Hand.qml  |   9 ---------
 .../namespaces/lib/Chronos/pics/clockface.png         | Bin 46895 -> 0 bytes
 .../declarative/namespaces/lib/Path/PathLabel.qml     |   1 -
 examples/declarative/namespaces/lib/RedStuff/Rect.qml |   1 -
 examples/declarative/namespaces/lib/Wrong/Wrong.qml   |   3 ---
 examples/declarative/namespaces/library.qml           |  12 ------------
 examples/declarative/namespaces/path.qml              |  18 ------------------
 examples/declarative/namespaces/simple.qml            |   5 -----
 examples/declarative/namespaces/wrong1.qml            |   4 ----
 13 files changed, 87 deletions(-)
 delete mode 100644 examples/declarative/namespaces/BlueStuff/Rect.qml
 delete mode 100644 examples/declarative/namespaces/Local.qml
 delete mode 100644 examples/declarative/namespaces/components.qml
 delete mode 100644 examples/declarative/namespaces/lib/Chronos/Clock.qml
 delete mode 100644 examples/declarative/namespaces/lib/Chronos/Hand.qml
 delete mode 100644 examples/declarative/namespaces/lib/Chronos/pics/clockface.png
 delete mode 100644 examples/declarative/namespaces/lib/Path/PathLabel.qml
 delete mode 100644 examples/declarative/namespaces/lib/RedStuff/Rect.qml
 delete mode 100644 examples/declarative/namespaces/lib/Wrong/Wrong.qml
 delete mode 100644 examples/declarative/namespaces/library.qml
 delete mode 100644 examples/declarative/namespaces/path.qml
 delete mode 100644 examples/declarative/namespaces/simple.qml
 delete mode 100644 examples/declarative/namespaces/wrong1.qml

diff --git a/examples/declarative/namespaces/BlueStuff/Rect.qml b/examples/declarative/namespaces/BlueStuff/Rect.qml
deleted file mode 100644
index 94e066c..0000000
--- a/examples/declarative/namespaces/BlueStuff/Rect.qml
+++ /dev/null
@@ -1 +0,0 @@
-<Rect color="blue"/>
diff --git a/examples/declarative/namespaces/Local.qml b/examples/declarative/namespaces/Local.qml
deleted file mode 100644
index 5fb2aef..0000000
--- a/examples/declarative/namespaces/Local.qml
+++ /dev/null
@@ -1 +0,0 @@
-<Text>This is a local component</Text>
diff --git a/examples/declarative/namespaces/components.qml b/examples/declarative/namespaces/components.qml
deleted file mode 100644
index ea5e2d9..0000000
--- a/examples/declarative/namespaces/components.qml
+++ /dev/null
@@ -1,17 +0,0 @@
-<Item id="Root">
-    <properties>
-        <Property name="period" value="1000"/>
-        <Property name="color" value="green"/>
-    </properties>
-
-    <Component id="SpinSquare">
-        <Item>
-            <Rect color="{Root.color}" width="{Root.width}" height="{width}" x="{-width/2}" y="{-height/2}"/>
-            <rotation>
-                <NumericAnimation from="0" to="360" repeat="true" running="true" duration="{Root.period}"/>
-            </rotation>
-        </Item>
-    </Component>
-
-    <ComponentInstance component="{SpinSquare}" x="{Root.width/2}" y="{Root.height/2}"/>
-</Item>
diff --git a/examples/declarative/namespaces/lib/Chronos/Clock.qml b/examples/declarative/namespaces/lib/Chronos/Clock.qml
deleted file mode 100644
index 959d193..0000000
--- a/examples/declarative/namespaces/lib/Chronos/Clock.qml
+++ /dev/null
@@ -1,15 +0,0 @@
-<?qtfx namespacepath:http://nokia.com/qml/Chronos=. ?>
-
-<Image id="clock" source="pics/clockface.png" xmlns:This="http://nokia.com/qml/Chronos">
-    <properties>
-        <Property name="hours" value="0"/>
-        <Property name="minutes" value="0"/>
-        <Property name="seconds" value="0"/>
-    </properties>
-    <DateTimeFormatter id="format" time="{clock.time}"/>
-    <Item x="{clock.width/2}" y="{clock.height/2}">
-        <This:Hand id="hour" length="{clock.height/4}" rotation="{clock.hours*30+clock.minutes/2+clock.seconds/120}"/>
-        <This:Hand id="minute" length="{clock.height/3}" thickness="3" rotation="{clock.minutes*6+clock.seconds/10}"/>
-        <This:Hand id="second" length="{clock.height/2.5}" thickness="1" rotation="{clock.seconds*6}"/>
-    </Item>
-</Image>
diff --git a/examples/declarative/namespaces/lib/Chronos/Hand.qml b/examples/declarative/namespaces/lib/Chronos/Hand.qml
deleted file mode 100644
index 3662e74..0000000
--- a/examples/declarative/namespaces/lib/Chronos/Hand.qml
+++ /dev/null
@@ -1,9 +0,0 @@
-<Item id="Hand">
-    <properties>
-        <Property name="length" value="100"/>
-        <Property name="thickness" value="0"/>
-    </properties>
-    <Item rotation="-90">
-        <Rect width="{length}" height="{thickness==0 ? length/8 : thickness}" y="{-height/2}"/>
-    </Item>
-</Item>
diff --git a/examples/declarative/namespaces/lib/Chronos/pics/clockface.png b/examples/declarative/namespaces/lib/Chronos/pics/clockface.png
deleted file mode 100644
index a885950..0000000
Binary files a/examples/declarative/namespaces/lib/Chronos/pics/clockface.png and /dev/null differ
diff --git a/examples/declarative/namespaces/lib/Path/PathLabel.qml b/examples/declarative/namespaces/lib/Path/PathLabel.qml
deleted file mode 100644
index c4b08b0..0000000
--- a/examples/declarative/namespaces/lib/Path/PathLabel.qml
+++ /dev/null
@@ -1 +0,0 @@
-<Text color="green"/>
diff --git a/examples/declarative/namespaces/lib/RedStuff/Rect.qml b/examples/declarative/namespaces/lib/RedStuff/Rect.qml
deleted file mode 100644
index 3429b09..0000000
--- a/examples/declarative/namespaces/lib/RedStuff/Rect.qml
+++ /dev/null
@@ -1 +0,0 @@
-<Rect color="red"/>
diff --git a/examples/declarative/namespaces/lib/Wrong/Wrong.qml b/examples/declarative/namespaces/lib/Wrong/Wrong.qml
deleted file mode 100644
index 3af55f6..0000000
--- a/examples/declarative/namespaces/lib/Wrong/Wrong.qml
+++ /dev/null
@@ -1,3 +0,0 @@
-<Rect>
-    <Local/> <!-- not allowed - not in this component! -->
-</Rect>
diff --git a/examples/declarative/namespaces/library.qml b/examples/declarative/namespaces/library.qml
deleted file mode 100644
index ae10ed8..0000000
--- a/examples/declarative/namespaces/library.qml
+++ /dev/null
@@ -1,12 +0,0 @@
-<?qtfx namespacepath:http://nokia.com/qml=lib ?>
-
-<Rect id="obj" width="200" height="200" xmlns:Chronos="http://nokia.com/qml/Chronos">
- <properties>
-     <Property name="time_sec"/>
- </properties>
- <time_sec> <!-- simple animation, not bound to the real time -->
-    <NumericAnimation from="0" to="43200" duration="43200000" running="true" repeat="true"/>
- </time_sec>
- <Chronos:Clock x="10" y="10" width="{parent.width-20}" height="{parent.height-20}"
-    hours="{Math.floor(time_sec/3600)}" minutes="{Math.floor(time_sec/60)%60}" seconds="{time_sec%60}"/>
-</Rect>
diff --git a/examples/declarative/namespaces/path.qml b/examples/declarative/namespaces/path.qml
deleted file mode 100644
index 795447b..0000000
--- a/examples/declarative/namespaces/path.qml
+++ /dev/null
@@ -1,18 +0,0 @@
-<!-- Empty Namespaces paths allow unqualified Types to be found
-     in other locations. For file URLs, multiple paths can be
-     given, forming a file search path. -->
-
-<?qtfx namespacepath:=lib/Chronos ?> <!-- Clock will be found here -->
-<?qtfx namespacepath:=lib/Path ?> <!-- PathLabel will be found here -->
-
-<Rect id="obj" width="200" height="200">
- <properties>
-     <Property name="time_sec"/>
- </properties>
- <time_sec> <!-- simple animation, not bound to the real time -->
-    <NumericAnimation from="0" to="43200" duration="43200000" running="true" repeat="true"/>
- </time_sec>
- <Clock x="10" y="10" width="{parent.width-20}" height="{parent.height-20}"
-    hours="{Math.floor(time_sec/3600)}" minutes="{Math.floor(time_sec/60)%60}" seconds="{time_sec%60}"/>
- <PathLabel text="This is a clock"/>
-</Rect>
diff --git a/examples/declarative/namespaces/simple.qml b/examples/declarative/namespaces/simple.qml
deleted file mode 100644
index 16d9815..0000000
--- a/examples/declarative/namespaces/simple.qml
+++ /dev/null
@@ -1,5 +0,0 @@
-<?qtfx namespacepath:http://nokia.com/qml=lib ?>
-<Rect id="obj" width="100" height="100" xmlns:bs="BlueStuff" xmlns:rs="http://nokia.com/qml/RedStuff">
- <bs:Rect x="20" y="20" width="50" height="50"/>
- <rs:Rect x="30" y="30" width="50" height="50"/>
-</Rect>
diff --git a/examples/declarative/namespaces/wrong1.qml b/examples/declarative/namespaces/wrong1.qml
deleted file mode 100644
index 721c45a..0000000
--- a/examples/declarative/namespaces/wrong1.qml
+++ /dev/null
@@ -1,4 +0,0 @@
-<?qtfx namespacepath:http://nokia.com/qml=lib ?>
-<Rect id="obj" width="100" height="100" xmlns:w="http://nokia.com/qml/Wrong" color="white">
- <w:Wrong/>
-</Rect>
-- 
cgit v0.12