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

Conflicts:
	doc/src/declarative/tutorial1.qdoc
	doc/src/declarative/tutorial2.qdoc
	doc/src/declarative/tutorial3.qdoc

15 files changed, 414 insertions, 561 deletions

diff --git a/doc/src/declarative/anchor-layout.qdoc b/doc/src/declarative/anchor-layout.qdoc
index f3c0f4a..e723d5c 100644
--- a/doc/src/declarative/anchor-layout.qdoc
+++ b/doc/src/declarative/anchor-layout.qdoc
@@ -10,11 +10,11 @@ In addition to the more traditional \l Grid, \l Row, and \l Column, QML also pro
 The QML anchoring system allows you to define relationships between the anchor lines of different items. For example, you can write:
 
 \code
-Rectangle { id: Rect1; ... }
-Rectangle { id: Rect2; anchors.left: Rect1.right; ... }
+Rectangle { id: rect1; ... }
+Rectangle { id: rect2; anchors.left: rect1.right; ... }
 \endcode
 
-In this case, the left edge of \e Rect2 is bound to the right edge of Rect1, producing the following:
+In this case, the left edge of \e rect2 is bound to the right edge of rect1, producing the following:
 
 \image edge1.png
 
@@ -25,19 +25,19 @@ The anchoring system also allows you to specify margins and offsets. Margins spe
 The following example specifies a left margin:
 
 \code
-Rectangle { id: Rect1; ... }
-Rectangle { id: Rect2; anchors.left: Rect1.right; anchors.leftMargin: 5; ... }
+Rectangle { id: rect1; ... }
+Rectangle { id: rect2; anchors.left: rect1.right; anchors.leftMargin: 5; ... }
 \endcode
 
-In this case, a margin of 5 pixels is reserved to the left of \e Rect2, producing the following:
+In this case, a margin of 5 pixels is reserved to the left of \e rect2, producing the following:
 
 \image edge2.png
 
 You can specify multiple anchors. For example:
 
 \code
-Rectangle { id: Rect1; ... }
-Rectangle { id: Rect2; anchors.left: Rect1.right; anchors.top: Rect1.bottom; ... }
+Rectangle { id: rect1; ... }
+Rectangle { id: rect2; anchors.left: rect1.right; anchors.top: rect1.bottom; ... }
 \endcode
 
 \image edge3.png
@@ -45,8 +45,8 @@ Rectangle { id: Rect2; anchors.left: Rect1.right; anchors.top: Rect1.bottom; ...
 By specifying multiple horizontal or vertical anchors you can control the size of an item. For example:
 
 \code
-Rectangle { id: Rect1; x: 0; ... }
-Rectangle { id: Rect2; anchors.left: Rect1.right; anchors.right: Rect3.left; ... }
+Rectangle { id: rect1; x: 0; ... }
+Rectangle { id: rect2; anchors.left: rect1.right; anchors.right: Rect3.left; ... }
 Rectangle { id: Rect3; x: 150; ... }
 \endcode
 
@@ -59,11 +59,11 @@ For performance reasons, you can only anchor an item to its siblings and direct
 \badcode
 Item {
     id: Group1
-    Rectangle { id: Rect1; ... }
+    Rectangle { id: rect1; ... }
 }
 Item {
     id: Group2
-    Rectangle { id: Rect2; anchors.left: Rect1.right; ... }    // invalid anchor!
+    Rectangle { id: rect2; anchors.left: rect1.right; ... }    // invalid anchor!
 }
 \endcode
 
diff --git a/doc/src/declarative/animation.qdoc b/doc/src/declarative/animation.qdoc
index 9554ad5..21263c1 100644
--- a/doc/src/declarative/animation.qdoc
+++ b/doc/src/declarative/animation.qdoc
@@ -1,10 +1,10 @@
-/*! 
+/*!
 \page qmlanimation.html
 \target qmlanimation
 \title QML Animation
 
-QML supports three different forms of animation - basic property animation, 
-states and transitions and property behaviors.  
+QML supports three different forms of animation - basic property animation,
+states and transitions and property behaviors.
 
 \section1 Property Animation
 
@@ -122,7 +122,7 @@ QML transitions can use selectors to determine which state changes a transition
 \code
 Transition {
     from: "*"
-    to: "Details"
+    to: "details"
     ...
 }
 \endcode
diff --git a/doc/src/declarative/basictypes.qdoc b/doc/src/declarative/basictypes.qdoc
index ae942fc..6feb91b 100644
--- a/doc/src/declarative/basictypes.qdoc
+++ b/doc/src/declarative/basictypes.qdoc
@@ -184,9 +184,9 @@
     \qml
     Item {
         children: [
-            Item { id: Child1 },
-            Rectangle { id: Child2 },
-            Text { id: Child3 }
+            Item { id: child1 },
+            Rectangle { id: child2 },
+            Text { id: child3 }
         ]
     }
     \endqml
diff --git a/doc/src/declarative/binding.qdoc b/doc/src/declarative/binding.qdoc
index e6835ee..99f2853 100644
--- a/doc/src/declarative/binding.qdoc
+++ b/doc/src/declarative/binding.qdoc
@@ -5,17 +5,17 @@
 
 Data binding provides a declarative way of specifying the data associated with objects, as well as the relationship between data of different objects. For example, you could bind the text of a label to the value of a slider: as the value of the slider changed, the label would be automatically updated with the new value.
 
-Bindings are created in QML when an expression is assigned to a property. For example, the following produces two rectangles of equal size (\c Rect2 is bound to the size of \c Rect1):
+Bindings are created in QML when an expression is assigned to a property. For example, the following produces two rectangles of equal size (\c rect2 is bound to the size of \c rect1):
 \code
-Rectangle { id: Rect1; width: 100; height: 100 }
-Rectangle { id: Rect2; width: Rect1.width; height: Rect1.height }
+Rectangle { id: rect1; width: 100; height: 100 }
+Rectangle { id: rect2; width: rect1.width; height: rect1.height }
 \endcode
 
 There is also a special \l Binding element, which is typically used to bind from the UI to the underlying UI model (see \l {Passing Data Between C++ and QML} for an example of this). The bindings above could be expressed using the \l Binding element as:
 
 \code
-Binding { target: Rect2; property: "width";  value: Rect1.width }
-Binding { target: Rect2; property: "height"; value: Rect1.height }
+Binding { target: rect2; property: "width";  value: rect1.width }
+Binding { target: rect2; property: "height"; value: rect1.height }
 \endcode
 
 In addition to binding directly to a property, you can also bind to the results of expressions involving properties. For example:
diff --git a/doc/src/declarative/extending.qdoc b/doc/src/declarative/extending.qdoc
index 2d0dc34..649eab1 100644
--- a/doc/src/declarative/extending.qdoc
+++ b/doc/src/declarative/extending.qdoc
@@ -43,8 +43,8 @@
 \page qml-extending.html
 \title Extending QML
 
-The QML syntax declaratively describes how to construct an in memory object 
-tree.  In Qt, QML is mainly used to describe a visual scene graph, but it is 
+The QML syntax declaratively describes how to construct an in memory object
+tree.  In Qt, QML is mainly used to describe a visual scene graph, but it is
 not conceptually limited to this: the QML format is an abstract description of
 any object tree.  All the QML element types included in Qt are implemented using
 the C++ extension mechanisms describe on this page.  Programmers can use these
@@ -57,14 +57,14 @@ QML for their own independent use.
 
 \snippet examples/declarative/extending/adding/example.qml 0
 
-The QML snippet shown above instantiates one \c Person instance and sets 
+The QML snippet shown above instantiates one \c Person instance and sets
 the name and shoeSize properties on it.  Everything in QML ultimately comes down
-to either instantiating an object instance, or assigning a property a value.  
+to either instantiating an object instance, or assigning a property a value.
 QML relies heavily on Qt's meta object system and can only instantiate classes
 that derive from QObject.
 
-The QML engine has no intrinsic knowledge of any class types.  Instead the 
-programmer must define the C++ types, and their corresponding QML name.  
+The QML engine has no intrinsic knowledge of any class types.  Instead the
+programmer must define the C++ types, and their corresponding QML name.
 
 Custom C++ types are made available to QML using these two macros:
 
@@ -79,11 +79,11 @@ under the name \a QmlName in library URI version VMAJ.VFROM to VMAJ.VTO.
 \a T and \a QmlName may be the same.
 
 Generally the QML_DECLARE_TYPE() macro should be included immediately following
-the type declaration (usually in its header file), and the QML_DEFINE_TYPE() 
+the type declaration (usually in its header file), and the QML_DEFINE_TYPE()
 macro in the implementation file.  QML_DEFINE_TYPE() must not be present in
 a header file.
 
-Type \a T must be a concrete type that inherits QObject and has a default 
+Type \a T must be a concrete type that inherits QObject and has a default
 constructor.
 \endquotation
 
@@ -106,7 +106,7 @@ of these types:
 \endlist
 
 QML is typesafe.  Attempting to assign an invalid value to a property will
-generate an error.  For example, assuming the name property of the \c Person 
+generate an error.  For example, assuming the name property of the \c Person
 element had a type of QString, this would cause an error:
 
 \code
@@ -127,13 +127,13 @@ The QML snippet shown above assigns a \c Person object to the \c BirthdayParty's
 celebrant property, and assigns three \c Person objects to the guests property.
 
 QML can set properties of types that are more complex than basic intrinsics like
-integers and strings.  Properties can also be object pointers, Qt interface 
-pointers,  lists of object points, and lists of Qt interface pointers.  As QML 
-is typesafe it ensures that only valid types are assigned to these properties, 
+integers and strings.  Properties can also be object pointers, Qt interface
+pointers,  lists of object points, and lists of Qt interface pointers.  As QML
+is typesafe it ensures that only valid types are assigned to these properties,
 just like it does for primitive types.
 
 Properties that are pointers to objects or Qt interfaces are declared with the
-Q_PROPERTY() macro, just like other properties.  The celebrant property 
+Q_PROPERTY() macro, just like other properties.  The celebrant property
 declaration looks like this:
 
 \snippet examples/declarative/extending/properties/birthdayparty.h 1
@@ -143,7 +143,7 @@ property can be assigned.
 
 QML also supports assigning Qt interfaces.  To assign to a property whose type
 is a Qt interface pointer, the interface must also be registered with QML.  As
-they cannot be instantiated directly, registering a Qt interface is different 
+they cannot be instantiated directly, registering a Qt interface is different
 from registering a new QML type.  The following macros are used instead:
 
 \quotation
@@ -154,8 +154,8 @@ from registering a new QML type.  The following macros are used instead:
 
 Register the C++ interface \a T with the QML system.
 
-Generally the QML_DECLARE_INTERFACE() macro should be included immediately 
-following the interface declaration (usually in its header file), and the 
+Generally the QML_DECLARE_INTERFACE() macro should be included immediately
+following the interface declaration (usually in its header file), and the
 QML_DEFINE_INTERFACE() macro in an implementation file.  QML_DEFINE_INTERFACE()
 must not be present in a header file.
 
@@ -163,7 +163,7 @@ Following registration, QML can coerce objects that implement this interface
 for assignment to appropriately typed properties.
 \endquotation
 
-The guests property is a list of \c Person objects.  Properties that are lists 
+The guests property is a list of \c Person objects.  Properties that are lists
 of objects or Qt interfaces are also declared with the Q_PROPERTY() macro, just
 like other properties.  List properties must have the type \c {QmlList<T *>*}.
 As with object properties, the type \a T must be registered with QML.
@@ -172,7 +172,7 @@ The guest property declaration looks like this:
 
 \snippet examples/declarative/extending/properties/birthdayparty.h 2
 
-\l {Extending QML - Object and List Property Types Example} shows the complete 
+\l {Extending QML - Object and List Property Types Example} shows the complete
 code used to create the \c BirthdayParty type.
 
 \section1 Inheritance and Coercion
@@ -182,17 +182,17 @@ code used to create the \c BirthdayParty type.
 The QML snippet shown above assigns a \c Boy object to the \c BirthdayParty's
 celebrant property, and assigns three other objects to the guests property.
 
-QML supports C++ inheritance heirarchies and can freely coerce between known, 
+QML supports C++ inheritance heirarchies and can freely coerce between known,
 valid object types.  This enables the creation of common base classes that allow
 the assignment of specialized classes to object or list properties.  In the
 snippet shown, both the celebrant and the guests properties retain the Person
-type used in the previous section, but the assignment is valid as both the Boy 
+type used in the previous section, but the assignment is valid as both the Boy
 and Girl objects inherit from Person.
 
 To assign to a property, the property's type must have been registered with QML.
 Both the QML_DEFINE_TYPE() and QML_DEFINE_INTERFACE() macros already shown can
 be used to register a type with QML.  Additionally, if a type that acts purely
-as a base class that cannot be instantiated from QML needs to be 
+as a base class that cannot be instantiated from QML needs to be
 registered these macros can be used:
 
 \quotation
@@ -201,14 +201,14 @@ registered these macros can be used:
     #define QML_DEFINE_NOCREATE_TYPE(T)
 \endcode
 
-Register the C++ type \a T with the QML system. QML_DEFINE_NOCREATE_TYPE() 
+Register the C++ type \a T with the QML system. QML_DEFINE_NOCREATE_TYPE()
 differs from QML_DEFINE_TYPE() in that it does not define a mapping between the
 C++ class and a QML element name, so the type is not instantiable from QML, but
 it is available for type coercion.
 
 Generally the QML_DECLARE_TYPE() macro should be included immediately following
-the type declaration (usually in its header file), and the 
-QML_DEFINE_NOCREATE_TYPE() macro in the implementation file.  
+the type declaration (usually in its header file), and the
+QML_DEFINE_NOCREATE_TYPE() macro in the implementation file.
 QML_DEFINE_NOCREATE_TYPE() must not be present in a header file.
 
 Type \a T must inherit QObject, but there are no restrictions on whether it is
@@ -216,25 +216,25 @@ concrete or the signature of its constructor.
 \endquotation
 
 QML will automatically coerce C++ types when assigning to either an object
-property, or to a list property.  Only if coercion fails does an assignment 
+property, or to a list property.  Only if coercion fails does an assignment
 error occur.
 
-\l {Extending QML - Inheritance and Coercion Example} shows the complete 
+\l {Extending QML - Inheritance and Coercion Example} shows the complete
 code used to create the \c Boy and \c Girl types.
 
 \section1 Default Property
 
 \snippet examples/declarative/extending/default/example.qml 0
 
-The QML snippet shown above assigns a collection of objects to the 
+The QML snippet shown above assigns a collection of objects to the
 \c BirthdayParty's default property.
 
 The default property is a syntactic convenience that allows a type designer to
-specify a single property as the type's default.  The default property is 
+specify a single property as the type's default.  The default property is
 assigned to whenever no explicit property is specified.  As a convenience, it is
 behaviorally identical to assigning the default property explicitly by name.
 
-From C++, type designers mark the default property using a Q_CLASSINFO() 
+From C++, type designers mark the default property using a Q_CLASSINFO()
 annotation:
 
 \quotation
@@ -245,7 +245,7 @@ Q_CLASSINFO("DefaultProperty", "property")
 Mark \a property as the class's default property.  \a property must be either
 an object property, or a list property.
 
-A default property is optional.  A derived class inherits its base class's 
+A default property is optional.  A derived class inherits its base class's
 default property, but may override it in its own declaration.  \a property can
 refer to a property declared in the class itself, or a property inherited from a
 base class.
@@ -261,9 +261,9 @@ specify a default property.
 The QML snippet shown above assigns a number properties to the \c Boy object,
 including four properties using the grouped property syntax.
 
-Grouped properties collect similar properties together into a single named 
+Grouped properties collect similar properties together into a single named
 block.  Grouped properties can be used to present a nicer API to developers, and
-may also simplify the implementation of common property collections across 
+may also simplify the implementation of common property collections across
 different types through implementation reuse.
 
 A grouped property block is implemented as a read-only object property.  The
@@ -271,35 +271,35 @@ shoe property shown is declared like this:
 
 \snippet examples/declarative/extending/grouped/person.h 1
 
-The ShoeDescription type declares the properties available to the grouped 
+The ShoeDescription type declares the properties available to the grouped
 property block - in this case the size, color, brand and price properties.
 
-Grouped property blocks may declared and accessed be recusively. 
+Grouped property blocks may declared and accessed be recusively.
 
-\l {Extending QML - Grouped Properties Example} shows the complete code used to 
+\l {Extending QML - Grouped Properties Example} shows the complete code used to
 implement the \c shoe property grouping.
 
 \section1 Attached Properties
 
 \snippet examples/declarative/extending/attached/example.qml 1
 
-The QML snippet shown above assigns the rsvp property using the attached 
+The QML snippet shown above assigns the rsvp property using the attached
 property syntax.
 
 Attached properties allow unrelated types to annotate other types with some
-additional properties, generally for their own use.  Attached properties are 
-identified through the use of the attacher type name, in the case shown 
-\c BirthdayParty, as a suffix to the property name.  
+additional properties, generally for their own use.  Attached properties are
+identified through the use of the attacher type name, in the case shown
+\c BirthdayParty, as a suffix to the property name.
 
 In the example shown, \c BirthdayParty is called the attaching type, and the
-Box instance the attachee object instance.  
+Box instance the attachee object instance.
 
 For the attaching type, an attached property block is implemented as a new
 QObject derived type, called the attachment object.  The properties on the
-attachment object are those that become available for use as the attached 
+attachment object are those that become available for use as the attached
 property block.
 
-Any QML type can become an attaching type by declaring the 
+Any QML type can become an attaching type by declaring the
 \c qmlAttachedProperties() public function:
 
 \quotation
@@ -310,21 +310,21 @@ Return an attachment object, of type \a AttachedPropertiesType, for the
 attachee \a object instance.  It is customary, though not strictly required, for
 the attachment object to be parented to \a object to prevent memory leaks.
 
-\a AttachedPropertiesType must be a QObject derived type.  The properties on 
+\a AttachedPropertiesType must be a QObject derived type.  The properties on
 this type will be accessible through the attached properties syntax.
 
 This method will be called at most once for each attachee object instance.  The
-QML engine will cache the returned instance pointer for subsequent attached 
+QML engine will cache the returned instance pointer for subsequent attached
 property accesses.  Consequently the attachment object may not be deleted until
 \a object is destroyed.
 \endquotation
 
-Conceptually, attached properties are a \e type exporting a set of additional 
+Conceptually, attached properties are a \e type exporting a set of additional
 properties that can be set on \e any other object instance.  Attached properties
 cannot be limited to only attaching to a sub-set of object instances, although
 their effect may be so limited.
 
-For example, a common usage scenario is for a type to enhance the properties 
+For example, a common usage scenario is for a type to enhance the properties
 available to its children in order to gather instance specific data.  Here we
 add a rsvp field to all the guests coming to a birthday party:
 \code
@@ -332,7 +332,7 @@ BirthdayParty {
     Boy { BirthdayParty.rsvp: "2009-06-01" }
 }
 \endcode
-However, as a type cannot limit the instances to which the attachment object 
+However, as a type cannot limit the instances to which the attachment object
 must attach, the following is also allowed, even though adding a birthday party
 rsvp in this context will have no effect.
 \code
@@ -349,10 +349,10 @@ an instance can be accessed using the following method:
 template<typename T>
 QObject *qmlAttachedPropertiesObject<T>(QObject *attachee, bool create = true);
 \endcode
-Returns the attachment object attached to \a attachee by the attaching type 
+Returns the attachment object attached to \a attachee by the attaching type
 \a T.  If type \a T is not a valid attaching type, this method always returns 0.
 
-If \a create is true, a valid attachment object will always be returned, 
+If \a create is true, a valid attachment object will always be returned,
 creating it if it does not already exist.  If \a create is false, the attachment
 object will only be returned if it has previously been created.
 \endquotation
@@ -368,8 +368,8 @@ implement the rsvp attached property.
 The QML snippet shown above associates the evaluation of a ECMAScript expression
 with the emission of a Qt signal.
 
-All Qt signals on a registered class become available as special "signal 
-properties" within QML to which the user can assign a single ECMAScript 
+All Qt signals on a registered class become available as special "signal
+properties" within QML to which the user can assign a single ECMAScript
 expression.  The signal property's name is a transformed version of the Qt
 signal name: "on" is prepended, and the first letter of the signal name upper
 cased.  For example, the signal used in the example above has the following
@@ -378,14 +378,14 @@ C++ signature:
 \snippet examples/declarative/extending/signal/birthdayparty.h 0
 
 In classes with multiple signals with the same name, only the final signal
-is accessible as a signal property.  Although QML provides an element, 
+is accessible as a signal property.  Although QML provides an element,
 \l Connection, for accessing the other signals it is less elegant.  For the best
 QML API, class developers should avoid overloading signal names.
 
 Signal parameters become accessible by name to the assigned script.  An
 unnamed parameter cannot be accessed, so care should be taken to name all the
 signal parameters in the C++ class declaration.  The intrinsic types
-listed in \l {Adding Types}, as well registered object types are permitted as 
+listed in \l {Adding Types}, as well registered object types are permitted as
 signal parameter types.  Using other types is not an error, but the parameter
 value will not be accessible from script.
 
@@ -400,14 +400,14 @@ implement the onPartyStarted signal property.
 The QML snippet shown above assigns a property value to the speaker property.
 A property value source generates a value for a property that changes over time.
 
-Property value sources are most commonly used to do animation.  Rather than 
+Property value sources are most commonly used to do animation.  Rather than
 constructing an animation object and manually setting the animation's "target"
 property, a property value source can be assigned directly to a property of any
 type and automatically set up this association.
 
-The example shown here is rather contrived: the speaker property of the 
+The example shown here is rather contrived: the speaker property of the
 BirthdayParty object is a string that is printed every time it is assigned and
-the HappyBirthday value source generates the lyrics of the song 
+the HappyBirthday value source generates the lyrics of the song
 "Happy Birthday".
 
 \snippet examples/declarative/extending/valuesource/birthdayparty.h 0
@@ -417,9 +417,9 @@ the case of a property value source, rather than assigning the object instance
 itself, the QML engine sets up an association between the value source and
 the property.
 
-Property value sources are special types that derive from the 
+Property value sources are special types that derive from the
 QmlPropertyValueSource base class.  This base class contains a single method,
-QmlPropertyValueSource::setTarget(), that the QML engine invokes when 
+QmlPropertyValueSource::setTarget(), that the QML engine invokes when
 associating the property value source with a property.  The relevant part of
 the HappyBirthday type declaration looks like this:
 
@@ -429,10 +429,10 @@ the HappyBirthday type declaration looks like this:
 
 In all other respects, property value sources are regular QML types.  They must
 be registered with the QML engine using the same macros as other types, and can
-contain properties, signals and methods just like other types.  
+contain properties, signals and methods just like other types.
 
 When a property value source object is assigned to a property, QML first tries
-to assign it normally, as though it were a regular QML type.  Only if this 
+to assign it normally, as though it were a regular QML type.  Only if this
 assignment fails does the engine call the setTarget() method.  This allows
 the type to also be used in contexts other than just as a value source.
 
@@ -444,20 +444,20 @@ implement the HappyBirthday property value source.
 \snippet examples/declarative/extending/binding/example.qml 0
 \snippet examples/declarative/extending/binding/example.qml 1
 
-The QML snippet shown above uses a property binding to ensure the 
+The QML snippet shown above uses a property binding to ensure the
 HappyBirthday's name property remains up to date with the celebrant.
 
 Property binding is a core feature of QML.  In addition to assigning literal
-values, property bindings allow the developer to assign an arbitrarily complex 
+values, property bindings allow the developer to assign an arbitrarily complex
 ECMAScript expression that may include dependencies on other property values.
-Whenever the expression's result changes - through a change in one of its 
+Whenever the expression's result changes - through a change in one of its
 constituent values - the expression is automatically reevaluated and
 the new result assigned to the property.
 
 All properties on custom types automatically support property binding.  However,
-for binding to work correctly, QML must be able to reliably determine when a 
+for binding to work correctly, QML must be able to reliably determine when a
 property has changed so that it knows to reevaluate any bindings that depend on
-the property's value.  QML relies on the presence of a 
+the property's value.  QML relies on the presence of a
 \c {Qt's Property System}{NOTIFY signal} for this determination.
 
 Here is the celebrant property declaration:
@@ -468,7 +468,7 @@ The NOTIFY attribute is followed by a signal name.  It is the responsibility of
 the class implementer to ensure that whenever the property's value changes, the
 NOTIFY signal is emitted.  The signature of the NOTIFY signal is not important to QML.
 
-To prevent loops or excessive evaluation, developers should ensure that the 
+To prevent loops or excessive evaluation, developers should ensure that the
 signal is only emitted whenever the property's value is actually changed.  If
 a property, or group of properties, is infrequently used it is permitted to use
 the same NOTIFY signal for several properties.  This should be done with care to
@@ -476,10 +476,10 @@ ensure that performance doesn't suffer.
 
 To keep QML reliable, if a property does not have a NOTIFY signal, it cannot be
 used in a binding expression.  However, the property can still be assigned
-a binding as QML does not need to monitor the property for change in that 
+a binding as QML does not need to monitor the property for change in that
 scenario.
 
-Consider a custom type, \c TestElement, that has two properties, "a" and "b".  
+Consider a custom type, \c TestElement, that has two properties, "a" and "b".
 Property "a" does not have a NOTIFY signal, and property "b" does have a NOTIFY
 signal.
 
@@ -495,7 +495,7 @@ TestElement {
 \endcode
 
 The presence of a NOTIFY signal does incur a small overhead.  There are cases
-where a property's value is set at object construction time, and does not 
+where a property's value is set at object construction time, and does not
 subsequently change.  The most common case of this is when a type uses
 \l {Grouped Properties}, and the grouped property object is allocated once, and
 only freed when the object is deleted.  In these cases, the CONSTANT attribute
@@ -520,9 +520,9 @@ modifying its source code.
 
 When integrating existing classes and technology into QML, their APIs will often
 need to be tweaked to fit better into the declarative environment.  Although
-the best results are usually obtained by modifying the original classes 
-directly, if this is either not possible or is complicated by some other 
-concerns extension objects allow limited extension possibilities without 
+the best results are usually obtained by modifying the original classes
+directly, if this is either not possible or is complicated by some other
+concerns extension objects allow limited extension possibilities without
 direct modifications.
 
 Extension objects can only add properties.
@@ -536,29 +536,29 @@ Extension objects can only add properties.
 \page qml-extending-types.html
 \title Extending types from QML
 
-Many of the elements available for use in QML are implemented in 
-\l {QML for C++ Programmers}{C++}.  These types are know as "core types".  QML 
-allows programmers to build new, fully functional elements without using C++.  
-Existing core types can be extended, and new types defined entirely in the QML 
+Many of the elements available for use in QML are implemented in
+\l {QML for C++ Programmers}{C++}.  These types are know as "core types".  QML
+allows programmers to build new, fully functional elements without using C++.
+Existing core types can be extended, and new types defined entirely in the QML
 language.
 
 \tableofcontents
 
 \section1 Adding new properties
 
-New properties can be added to an existing type.  These new properties are 
+New properties can be added to an existing type.  These new properties are
 available for use within QML, and also appear as regular Qt properties on the
 C++ object, accessible through the regular property access mechanisms.
 
-Like all properties in QML, custom properties are typed.  The type is used to 
+Like all properties in QML, custom properties are typed.  The type is used to
 define the property's behavior, and also determines the C++ type of the created
-Qt property.  The following table shows the list of types available when 
+Qt property.  The following table shows the list of types available when
 declaring a new property, and the corresponding C++ type.
 
 \table
-\header \o QML Type Name \o C++ Type Name 
-\row \o int \o int 
-\row \o bool \o bool 
+\header \o QML Type Name \o C++ Type Name
+\row \o int \o int
+\row \o bool \o bool
 \row \o double \o double
 \row \o real \o double
 \row \o string \o QString
@@ -589,7 +589,7 @@ in the same type block is an error.  However, a new property may reuse the name
 of an existing property on the type.  This should be done with caution, as the
 existing property will be hidden, and become inaccessible.
 
-The <type> must be one of the QML type names shown in the above table.  
+The <type> must be one of the QML type names shown in the above table.
 Additionally, an optional default value of the property can be provided.  The
 default value is a convenient shortcut, but is behaviorally identical to doing
 it in two steps, like this:
@@ -627,10 +627,10 @@ controls the color of the inner rectangle.
 \section2 Property aliases
 
 Property aliases are a more advanced form of property declaration.  Unlike a
-property definition, that allocates a new, unique storage space for the 
-property, a property alias connects the newly declared property (called the 
-aliasing property) to an existing property (the aliased property).  Read 
-operations on the aliasing property act as read operations on the aliased 
+property definition, that allocates a new, unique storage space for the
+property, a property alias connects the newly declared property (called the
+aliasing property) to an existing property (the aliased property).  Read
+operations on the aliasing property act as read operations on the aliased
 property, and write operations on the aliasing property as write operations on
 the aliased property.
 
@@ -641,7 +641,7 @@ A property alias declaration looks a lot like a property definition:
 
 As the aliasing property has the same type as the aliased property, an explicit
 type is omitted, and the special "alias" keyword is used.  Instead of a default
-value, a property alias includes a compulsary alias reference.  The alias 
+value, a property alias includes a compulsary alias reference.  The alias
 reference is used to locate the aliased property.  While similar to a property
 binding, the alias reference syntax is highly restricted.
 
@@ -656,11 +656,11 @@ alias reference syntax may become more flexibly in future releases.
 Here is the property definition example rewritten to use property aliases.
 \code
 Rectangle {
-    property alias innerColor: InnerRect.color
+    property alias innerColor: innerRect.color
 
     color: "red"; width: 100; height: 100
     Rectangle {
-        id: InnerRect
+        id: innerRect
         anchors.centerIn: parent
         width: parent.width - 10
         height: parent.height - 10
@@ -678,24 +678,24 @@ use the aliased property directly.  For example, this will not work:
 
 \code
     // Does NOT work
-    property alias innerColor: InnerRect.color
+    property alias innerColor: innerRect.color
     innerColor: "black"
 \endcode
 
-This behavior is required to allow type developers to redefine the behavior 
+This behavior is required to allow type developers to redefine the behavior
 of existing property names while continuing to use the existing behavior within
-the type they are building, something that is not possible with property 
+the type they are building, something that is not possible with property
 definitions.  In the example used so far, this could allows the developer to fix
-the external rectangle's color as "red" and redefine the "color" property to 
+the external rectangle's color as "red" and redefine the "color" property to
 refer to the inner rectangle, like this:
 
 \code
 Rectangle {
-    property alias color: InnerRect.color
+    property alias color: innerRect.color
 
     color: "red"; width: 100; height: 100
     Rectangle {
-        id: InnerRect
+        id: innerRect
         anchors.centerIn: parent
         width: parent.width - 10
         height: parent.height - 10
@@ -705,18 +705,18 @@ Rectangle {
 \endcode
 
 Users of this type would not be able to affect the color of the red rectangle,
-but would find using the "color" property, rather than the strange new 
+but would find using the "color" property, rather than the strange new
 "innerColor" property, much more familiar.
 
-A second, much less significant, consequence of the delayed activation of 
+A second, much less significant, consequence of the delayed activation of
 aliases is that an alias reference cannot refer to another aliasing property
 declared within the same component.  This will not work:
 
 \code
     // Does NOT work
-    id: Root
-    property alias innerColor: InnerRect.color
-    property alias innerColor2: Root.innerColor
+    id: root
+    property alias innerColor: innerRect.color
+    property alias innerColor2: root.innerColor
 \endcode
 
 From outside the component, aliasing properties appear as regular Qt properties
@@ -724,7 +724,7 @@ and consequently can be used in alias references.
 
 \section1 Adding new signals
 
-New signals can be added to an existing type.  These new signals are available 
+New signals can be added to an existing type.  These new signals are available
 for use within QML, and also appear as regular Qt signals on the C++ object that
 can be used in Qt signal/slot connections.
 
@@ -734,9 +734,9 @@ signal <name>[([<type> <parameter name>[, ...]])]
 \endcode
 
 This declaration may appear anywhere within a type body, but it is customary to
-include it at the top.  Attempting to declare two signals or methods with the 
-same name in the same type block is an error.  However, a new signal may reuse 
-the name of an existing signal on the type.  This should be done with caution, 
+include it at the top.  Attempting to declare two signals or methods with the
+same name in the same type block is an error.  However, a new signal may reuse
+the name of an existing signal on the type.  This should be done with caution,
 as the existing signal may be hidden and become inaccessible.
 
 The options for parameter types are the same as for property types (see
@@ -754,7 +754,7 @@ Here are three examples of signal declarations:
 
 \section1 Adding new methods
 
-New methods can be added to an existing type.  These new methods are available 
+New methods can be added to an existing type.  These new methods are available
 for use within QML, and also appear as regular Qt slots on the C++ object that
 can be used in Qt signal/slot connections.
 
@@ -763,9 +763,9 @@ function <name>([<parameter name>[, ...]]) { <body> }
 \endcode
 
 This declaration may appear anywhere within a type body, but it is customary to
-include it at the top.  Attempting to declare two methods or signals with the 
+include it at the top.  Attempting to declare two methods or signals with the
 same name in the same type block is an error.  However, a new method may reuse
-the name of an existing method on the type.  This should be done with caution, 
+the name of an existing method on the type.  This should be done with caution,
 as the existing method may be hidden and become inaccessible.
 
 Methods parameters are not typed.  In C++ these parameters are of type QVariant.
@@ -783,24 +783,24 @@ Item {
 
 \section1 Defining new Components
 
-A component is a reusable type with a well-defined interface built entirely in 
+A component is a reusable type with a well-defined interface built entirely in
 QML.  Components appear as regular QML elements, and can be used interchangably
 with core types.  Components allow developers to create new types to be reused
-in other projects without the use of C++.  Components can also help to reduce 
-duplication inside one project by limiting the need for large numbers of 
+in other projects without the use of C++.  Components can also help to reduce
+duplication inside one project by limiting the need for large numbers of
 copy-and-pasted blocks.
 
-Any snippet of QML code can become a component, just by placing it in the file 
+Any snippet of QML code can become a component, just by placing it in the file
 "<Name>.qml" where <Name> is the new element name, and begins with an uppercase
 letter.  These QML files automatically become available as new QML element types
 to other QML components and applications in the same directory.
 
-For example, here we show how a component named "Box" is defined and used 
+For example, here we show how a component named "Box" is defined and used
 multiple times by an application.
 
 \table
 \row
-\o application.qml 
+\o application.qml
 \code
 Rectangle {
     width: 100; height: 400;
@@ -812,19 +812,19 @@ Rectangle {
 \o Box.qml
 \code
 Rectangle {
-    width: 100; height: 100; 
+    width: 100; height: 100;
     color: "blue"
 }
 \endcode
 \endtable
 
-Components may be collected into \l {Modules} that gives the 
+Components may be collected into \l {Modules} that gives the
 developer more freedom than just putting files in the same directory.
 
 \section2 Building reusable components
 
-A component type built to be reused by others must have a well defined 
-interface.  In QML, an interface consists of a defined collection of 
+A component type built to be reused by others must have a well defined
+interface.  In QML, an interface consists of a defined collection of
 properties, signals and methods.  Users of a component have access to all the
 properties, signals and methods defined on the root element of the component.
 
@@ -846,7 +846,7 @@ available externally.  Here we add a "text" property:
 
 \table
 \row
-\o application.qml 
+\o application.qml
 \code
 Rectangle {
     width: 100; height: 400;
@@ -858,25 +858,25 @@ Rectangle {
 \o Box.qml
 \code
 Rectangle {
-    property alias text: MyText.text
-    width: 100; height: 100; 
+    property alias text: myText.text
+    width: 100; height: 100;
     color: "blue"
     Text {
-        id: MyText
+        id: myText
         anchors.centerIn: parent
-    }        
+    }
 }
 \endcode
 \endtable
 
 Methods and signals may be added in the same way.
 
-As all external methods, signals and properties are accessible to external 
-users, developers should ensure that setting these properties does not have 
+As all external methods, signals and properties are accessible to external
+users, developers should ensure that setting these properties does not have
 any undesirable side-effects.  For most resiliance, root level properties should
 only be used for literal default values.  When a root level property must be
 used inside the component - such as the children property - property aliases
 can be used to redirect this property to a "safe" location for external users.
-Try to think of the root level properties as being "owned" by the components 
+Try to think of the root level properties as being "owned" by the components
 user, rather than the component itself.
 */
diff --git a/doc/src/declarative/focus.qdoc b/doc/src/declarative/focus.qdoc
index 028b5f0..1e00bd9 100644
--- a/doc/src/declarative/focus.qdoc
+++ b/doc/src/declarative/focus.qdoc
@@ -58,12 +58,12 @@ the \c {KeyActions} element has \e {active focus} and pressing the
 \o \code
     Rectangle {
         color: "lightsteelblue"; width: 240; height: 25
-        Text { id: MyText }
+        Text { id: myText }
         KeyActions {
             focus: true
-            keyA: "MyText.text = 'Key A was pressed'"
-            keyB: "MyText.text = 'Key B was pressed'"
-            keyC: "MyText.text = 'Key C was pressed'"
+            keyA: "myText.text = 'Key A was pressed'"
+            keyB: "myText.text = 'Key B was pressed'"
+            keyC: "myText.text = 'Key C was pressed'"
         }
     }
 \endcode
@@ -92,23 +92,23 @@ Rectangle {
     color: "red"; width: 240; height: 55
     Rectangle {
         color: "lightsteelblue"; width: 240; height: 25
-        Text { id: MyText }
+        Text { id: myText }
         KeyActions {
             focus: true
-            keyA: "MyText.text = 'Key A was pressed'"
-            keyB: "MyText.text = 'Key B was pressed'"
-            keyC: "MyText.text = 'Key C was pressed'"
+            keyA: "myText.text = 'Key A was pressed'"
+            keyB: "myText.text = 'Key B was pressed'"
+            keyC: "myText.text = 'Key C was pressed'"
         }
     }
     Rectangle {
         y: 30; focus: true
         color: "lightsteelblue"; width: 240; height: 25
-        Text { id: MyText }
+        Text { id: myText }
         KeyActions {
             focus: true
-            keyA: "MyText.text = 'Key A was pressed'"
-            keyB: "MyText.text = 'Key B was pressed'"
-            keyC: "MyText.text = 'Key C was pressed'"
+            keyA: "myText.text = 'Key A was pressed'"
+            keyB: "myText.text = 'Key B was pressed'"
+            keyC: "myText.text = 'Key C was pressed'"
         }
     }
 }
@@ -149,12 +149,12 @@ FocusScope {
     width: 240; height: 25
     Rectangle {
         color: "lightsteelblue"; width: 240; height: 25
-        Text { id: MyText }
+        Text { id: myText }
         KeyActions {
             focus: true
-            keyA: "MyText.text = 'Key A was pressed'"
-            keyB: "MyText.text = 'Key B was pressed'"
-            keyC: "MyText.text = 'Key C was pressed'"
+            keyA: "myText.text = 'Key A was pressed'"
+            keyB: "myText.text = 'Key B was pressed'"
+            keyC: "myText.text = 'Key C was pressed'"
         }
     }
 }
@@ -186,9 +186,9 @@ Rectangle {
 \endcode
 \o \code
 FocusScope {
-    id: Page; width: 240; height: 25
+    id: page; width: 240; height: 25
     MyWidget { focus: true }
-    MouseRegion { anchors.fill: parent; onClicked: { Page.focus = true } }
+    MouseRegion { anchors.fill: parent; onClicked: { page.focus = true } }
 }
 \endcode
 \endtable
@@ -221,7 +221,7 @@ Rectangle {
     color: "lightsteelblue"; width: 240; height: 320
 
     ListView {
-        id: MyView; anchors.fill: parent; focus: true
+        id: myView; anchors.fill: parent; focus: true
         model: ListModel {
             ListElement { name: "Bob" }
             ListElement { name: "John" }
diff --git a/doc/src/declarative/pics/declarative-adv-tutorial4.gif b/doc/src/declarative/pics/declarative-adv-tutorial4.gif
index a67666d..827458d 100644
--- a/doc/src/declarative/pics/declarative-adv-tutorial4.gif
+++ b/doc/src/declarative/pics/declarative-adv-tutorial4.gif
diff --git a/doc/src/declarative/qmlforcpp.qdoc b/doc/src/declarative/qmlforcpp.qdoc
index ab456e5..697ea59 100644
--- a/doc/src/declarative/qmlforcpp.qdoc
+++ b/doc/src/declarative/qmlforcpp.qdoc
@@ -6,13 +6,13 @@
     This page describes the QML format and how to use and extend it from C++.
 
     The QML syntax declaratively describes how to construct an in memory
-    object tree.  QML is usually used to describe a visual scene graph 
-    but it is not conceptually limited to this: the QML format is an abstract 
-    description of \bold any object tree.  
+    object tree.  QML is usually used to describe a visual scene graph
+    but it is not conceptually limited to this: the QML format is an abstract
+    description of \bold any object tree.
 
-    QML also includes property bindings.  Bindings are ECMAScript expressions 
-    of a properties value.  Whenever the value of the expression changes - 
-    either for the first time at startup or subsequently thereafter - the 
+    QML also includes property bindings.  Bindings are ECMAScript expressions
+    of a properties value.  Whenever the value of the expression changes -
+    either for the first time at startup or subsequently thereafter - the
     property is automatically updated with the new value.
 
     \tableofcontents
@@ -21,10 +21,10 @@
 
     QmlComponent is used to load a QML file and to create object instances.
 
-    In QML a component is the unit of instantiation, and the most basic unit 
-    of scope.  A component is like a template for how to construct an object 
-    tree.  One component can create multiple instances of this tree, but the 
-    template remains constant.  
+    In QML a component is the unit of instantiation, and the most basic unit
+    of scope.  A component is like a template for how to construct an object
+    tree.  One component can create multiple instances of this tree, but the
+    template remains constant.
 
     The following code uses the C++ interface to create 100 red rectangles
     based on a simple declarative component description.
@@ -37,10 +37,10 @@
         // ... do something with the rectangle ...
     }
     \endcode
-    
+
     Each independent file describes a QML component, but it is also possible to
     create sub-components within a QML file as will be shown later.
-    
+
     \section1 QML Format 101
 
     This is some sample QML code.
@@ -64,8 +64,8 @@
     }
     \endcode
 
-    The QML snippet shown above instantiates one \c Image instance and one 
-    \c Text instance and sets properties on both.  \bold Everything in QML 
+    The QML snippet shown above instantiates one \c Image instance and one
+    \c Text instance and sets properties on both.  \bold Everything in QML
     ultimately comes down to either instantiating an object instance, or
     assigning a property a value.  QML relies heavily on Qt's meta object system
     and can only instantiate classes that derive from QObject.
@@ -83,26 +83,26 @@
     }
     \endcode
 
-    QML can set properties that are more complex than just simple types like 
-    integers and strings.  Properties can be object pointers or Qt interface 
+    QML can set properties that are more complex than just simple types like
+    integers and strings.  Properties can be object pointers or Qt interface
     pointers or even lists of object or Qt interface pointers!  QML is typesafe,
     and will ensure that only the valid types are assigned to properties.
 
     Assigning an object to a property is as simple as assigning a basic
-    integer.  Attempting to assign an object to a property when type coercian 
+    integer.  Attempting to assign an object to a property when type coercian
     fails will produce an error.  The following shows an example of valid and of
     invalid QML and the corresponding C++ classes.
 
     \table
     \row \o
-    \code 
+    \code
     class Image : public QObject
     {
-        ... 
+        ...
         Q_PROPERTY(ImageFilter *filter READ filter WRITE setFilter)
-    }; 
+    };
 
-    class ImageFilter : public QObject 
+    class ImageFilter : public QObject
     {
         ...
     };
@@ -121,11 +121,11 @@
     \endtable
 
     Classes can also define an optional default property.  The default property
-    is used for assignment if no explicit property has been specified.  
+    is used for assignment if no explicit property has been specified.
     Any object property can be the default, even complex properties like lists
-    of objects.  The default property of the \c Rect class is the \c children 
-    property, a list of \c Item's.  In the following example, as both \c Image 
-    and \c Text inherit from \c Item the \c Image and \c Text instances are 
+    of objects.  The default property of the \c Rect class is the \c children
+    property, a list of \c Item's.  In the following example, as both \c Image
+    and \c Text inherit from \c Item the \c Image and \c Text instances are
     added to the parent's \c children property.
 
     \code
@@ -135,10 +135,10 @@
         }
     \endcode
 
-    Properties that return read-only object pointers can be used recursively.  
-    This can be used, for example, to group properties together.  The 
+    Properties that return read-only object pointers can be used recursively.
+    This can be used, for example, to group properties together.  The
     \c Text element has a \c font property that returns an object with a number
-    of sub-properties such as \c family, \c bold, \c italic and \c size.  
+    of sub-properties such as \c family, \c bold, \c italic and \c size.
     QML makes it easy to interact with these grouped properties, as the
     following shows - everything you would expect to work, just does.
 
@@ -150,7 +150,7 @@
         ...
         Q_PROPERTY(Font *font READ font);
     };
-    class Font : public QObject 
+    class Font : public QObject
     {
         ...
         Q_PROPERTY(QString family READ family WRITE setFamily);
@@ -177,36 +177,36 @@
     The QML engine has no intrinsic knowledge of any class types.  Instead
     the programmer must define the C++ types, their corresponding QML
     name, library namespace, and version availability.
-    
+
     \code
     #define QML_DECLARE_TYPE(T)
     #define QML_DEFINE_TYPE(URI,VMAJ,VFROM,VTO,QmlName,T)
     \endcode
 
-    Adding these macros to your library or executable automatically makes the 
+    Adding these macros to your library or executable automatically makes the
     C++ type \a T available from the declarative markup language under the
     name \a QmlName.  Of course there's nothing stopping you using the same
     name for both the C++ and the QML name!
-    Any type can be added to the QML engine using these macros.  The only 
+    Any type can be added to the QML engine using these macros.  The only
     requirements are that \a T inherits QObject, is not abstract,
     and that it has a default constructor.
 
-    \section1 Property Binding 
+    \section1 Property Binding
 
     Assigning constant values and trees to properties will only get you so
-    far.  Property binding allows a property's value to be dependant on the 
+    far.  Property binding allows a property's value to be dependant on the
     value of other properties and data.  Whenever these dependencies change,
-    the property's value is automatically updated.  
+    the property's value is automatically updated.
 
-    Property bindings are ECMAScript expressions and can be applied to any 
-    object property.  C++ classes don't have to do anything special to get 
+    Property bindings are ECMAScript expressions and can be applied to any
+    object property.  C++ classes don't have to do anything special to get
     binding support other than define appropriate properties.  When a non-literal
-    property assignment appears in a QML file, it is automatically treated as a 
+    property assignment appears in a QML file, it is automatically treated as a
     property binding.
 
-    Here's a simple example that stacks a red, blue and green rectangle.  
+    Here's a simple example that stacks a red, blue and green rectangle.
     Bindings are used to ensure that the height of each is kept equal to it's
-    parent's.  Were the root rectangle's height property to change, the child 
+    parent's.  Were the root rectangle's height property to change, the child
     rectangles height would be updated automatically.
 
     \code
@@ -230,25 +230,25 @@
     defines how the expression resolves property and variable names.   Although
     the two expressions in the last example are the same, the value of \c parent
     resolves differently because each executes in a different context.  Although
-    QML generally takes care of everything for the programmer, a thorough 
+    QML generally takes care of everything for the programmer, a thorough
     understanding of bind contexts is important in some of the more complex QML
     structures.
 
-    Every expression is executed in a bind context, encapsulated by the 
-    QmlContext C++ class.  As covered in the class documentation, a 
-    bind context contains a map of names to values, and a list of default 
+    Every expression is executed in a bind context, encapsulated by the
+    QmlContext C++ class.  As covered in the class documentation, a
+    bind context contains a map of names to values, and a list of default
     objects.  When resolving a name, the name to value map is searched first.
-    If the name cannot be found, the default object's are iterated in turn and 
+    If the name cannot be found, the default object's are iterated in turn and
     the context attempts to resolve the name as a property of one of the default
     objects.
 
     There are generally two contexts involved in the execution of a binding.
-    The first is the "object context" - a bind context associated with the 
-    closest instantiated object and containing just one default object, and 
+    The first is the "object context" - a bind context associated with the
+    closest instantiated object and containing just one default object, and
     that's instantiated object itself.  The effect of the object
-    context is pretty simple - names in the binding expression resolve to 
-    properties on the object first.  It is important to note - particularly in 
-    the case of grouped properties - the object context is that of the 
+    context is pretty simple - names in the binding expression resolve to
+    properties on the object first.  It is important to note - particularly in
+    the case of grouped properties - the object context is that of the
     instantiated object,  the consequences of which are shown below.
 
     \code
@@ -260,7 +260,7 @@
     }                                      }
     \endcode
 
-    The second context is the "component context".  Each QML component (and 
+    The second context is the "component context".  Each QML component (and
     consequently each QML file) is created in its own unique binding context.
     Like the object context, the component context contains just one default
     object - but in this case it is the component's root object.  An example
@@ -288,7 +288,7 @@
     Rectangle {
         color: "red"
         width: 100
-        Rectangle { 
+        Rectangle {
             color: "blue"
             width: 50
             height: parent.height
@@ -301,13 +301,13 @@
     }
     \endcode
 
-    Clearly this sort of fragile relationship is undesirable and unmanageable - 
-    moving the green rectangle to be a sibling of the blue or introducing a 
+    Clearly this sort of fragile relationship is undesirable and unmanageable -
+    moving the green rectangle to be a sibling of the blue or introducing a
     further rectangle between the two would break the example.
 
     To address this problem, QML includes a way to directly reference any object
-    within a component (or parent component for that matter), called "ids".  
-    Developers assign an object an id, and can then reference it directly by 
+    within a component (or parent component for that matter), called "ids".
+    Developers assign an object an id, and can then reference it directly by
     name.  Developers assign an object an id by setting the special \c id
     property.  Every object automatically has this magical property (if the
     object also has an actual property called \c id, that gets set too).  As
@@ -316,18 +316,18 @@
 
     \code
     Rectangle {
-        id: Root
+        id: root
         color: "red"
-        width: GreenRect.width + 75
-        height: Root.height
+        width: greenRect.width + 75
+        height: root.height
         Rectangle {
             color: "blue"
-            width: GreenRect.width + 25
+            width: greenRect.width + 25
             Rectangle {
-                id: GreenRect
+                id: greenRect
                 color: "green"
                 width: 25
-                height: Root.height
+                height: root.height
             }
         }
     }
@@ -336,11 +336,11 @@
     To relate id's back to QmlContext, id's exist as properties on the
     component context.
 
-    Bind expressions can reference any object property.  The QML bind engine 
-    relies on the presence of the NOTIFY signal in the Q_PROPERTY declaration 
-    on a class to alert it that a property's value has changed.  If this is 
+    Bind expressions can reference any object property.  The QML bind engine
+    relies on the presence of the NOTIFY signal in the Q_PROPERTY declaration
+    on a class to alert it that a property's value has changed.  If this is
     omitted, the bind expression can still access the property's value, but
-    the expression will not be updated if the value changes.  The following is 
+    the expression will not be updated if the value changes.  The following is
     an example of a QML friendly property declaration.
 
     \code
@@ -356,20 +356,20 @@
     };
     \endcode
 
-    While generally no changes are needed to a C++ class to use property 
+    While generally no changes are needed to a C++ class to use property
     binding, sometimes more advanced interaction between the binding engine and
     an object is desirable.  To facilitate this, there is a special exception
     in the bind engine for allowing an object to access the binding directly.
 
-    If a binding is assigned to a property with a type of QmlBindableValue 
+    If a binding is assigned to a property with a type of QmlBindableValue
     pointer (ie. QmlBindableValue *), each time the binding value changes,
-    a QmlBindableValue instance is assigned to that property.  The 
+    a QmlBindableValue instance is assigned to that property.  The
     QmlBindableValue instance allows the object to read the binding and to
     evaluate the binding's current value.
 
     \section1 Signal Properties
 
-    In addition to reading and writing regular properties, QML allows you to 
+    In addition to reading and writing regular properties, QML allows you to
     easily associate ECMAScript with signals.  Consider the following example,
     in which Button is a made-up type with a clicked() signal.
 
@@ -385,7 +385,7 @@
 
     Like properties, signals automatically become available in QML without
     any additional work.  As illustrated signals are mapped into QML as special
-    "signal properties", using the name "on<Signal Name>" where the first 
+    "signal properties", using the name "on<Signal Name>" where the first
     character of the signal's name is uppercased.  If more than one signal of
     the same name is exist on a class, only the first is available (see the
     \l Connection element for more general signal connections).
@@ -393,11 +393,11 @@
     An important observation to make here is the lack of braces.  While both
     property bindings and signal properties involve executing ECMAScript code,
     property bindings dynamically update the property value (hence the braces),
-    whereas with signal properties the constant script "value" is actually 
-    assigned to the signal property.  Trying to bind a value to a signal 
+    whereas with signal properties the constant script "value" is actually
+    assigned to the signal property.  Trying to bind a value to a signal
     property will not work!
 
-    Signal parameters are also available to the executing script, as shown 
+    Signal parameters are also available to the executing script, as shown
     below, as long as you remember to name the parameters of your signal
     in C++ (see QMetaMethod::parameterNames()).
 
@@ -405,7 +405,7 @@
     \row \o
     \code
     Example {
-        onDoSomething: for(var ii = 0; ii &lt; count; ++ii) 
+        onDoSomething: for(var ii = 0; ii &lt; count; ++ii)
                            print(message)
     }
     \endcode
@@ -419,10 +419,10 @@
     };
     \endcode
     \endtable
-    
+
     Just like property bindings, signal scripts are executed in a context.  The
     signal script context is identical in scope to the "object context" under
-    property binding, with the exception that it has the signal parameters 
+    property binding, with the exception that it has the signal parameters
     bound in.
 
     In addition to scripts, it is possible to assign objects to signal properties.
@@ -439,9 +439,9 @@
 
     \code
     Button {
-        id: MyButton
+        id: myButton
         onClicked: NumberAnimation {
-            target: MyButton
+            target: myButton
             property: "x"
             to: 100
         }
@@ -449,14 +449,14 @@
     \endcode
 
     If the class itself actually defines a property called "on<Name>", this will
-    be assigned the string value and the signal handling behaviour will be 
+    be assigned the string value and the signal handling behaviour will be
     disabled.
 
     \section1 Attached Properties
 
     Attached properties allow unrelated types to annotate another type with some
     additional properties.  Some APIs or operations are inherintly imperative,
-    and attached properties help out when translating these APIs into the 
+    and attached properties help out when translating these APIs into the
     declarative QML language.
 
     Qt's QGridLayout is one such example.
@@ -484,7 +484,7 @@
         }
     }
     \endcode
-    
+
     Attached properties are identified by the use of a type name, in the
     case shown \c QGridLayout, as a grouped property specifier.  To prevent
     ambiguity with actual class instantiations, attached properties must
@@ -508,17 +508,17 @@
     };
     \endcode
     \endtable
-    
+
     When an attached property is accessed, the QML engine will call this method
     to create an attachment object, passing in the object instance that the
     attached property applies to.  The attachment object should define all
     the attached properties, and is generally parented to the provided object
     instance to avoid memory leaks.  The QML engine does not saves this object,
-    so it is not necessary for the attached property function to ensure that 
+    so it is not necessary for the attached property function to ensure that
     multiple calls for the same instance object return the same attached object.
 
     While conceptually simple, implementing an attachment object is not quite
-    so easy.  The \c qmlAttachedProperties function is static - attachment 
+    so easy.  The \c qmlAttachedProperties function is static - attachment
     objects are not associated with any particular instance.  How the values
     of the attached properties apply to the behaviour they are controlling is
     entirely implementation dependent.  An additional consequence of this is
@@ -537,13 +537,13 @@
 
     The property has no effect because the (made-up) FancyGridLayout type defines the meaning
     of the \c row attached property only to apply to its direct children.  It
-    is possible that other types may have attached properties that affect 
+    is possible that other types may have attached properties that affect
     objects that aren't their direct children.
 
-    Attached properties are an advanced feature that should be used with 
+    Attached properties are an advanced feature that should be used with
     caution.
 
-    \note We may implement a convenience wrapper that makes using attached 
+    \note We may implement a convenience wrapper that makes using attached
     properties easier for the common "attach to children" case.
 
     \section1 Property Value Sources
@@ -562,11 +562,11 @@
     \endcode
 
     Here the \c x property of the rectangle will be animated from 0 to 100.
-    To support this, the NumberAnimation class inherits the 
+    To support this, the NumberAnimation class inherits the
     QmlPropertyValueSource class.  If a type inherits this class and is assigned
     to a property for which type assignment would otherwise fail (ie. the
     property itself doesn't have a type of QmlPropertyValueSource *), the QML
-    engine will automatically set the property as the target of the value 
+    engine will automatically set the property as the target of the value
     source.
 
     \section1 Parser Status
@@ -575,13 +575,13 @@
     the appropriate properties, signals and slots and off you go.  The QML
     engine takes care of instantiating your classes and setting the properties
     and everything works fine.
-    
+
     However, sometimes it is helpful to know a little more about the status of
-    the QML parser.  For example, it might be beneficial from a performance 
-    standpoint to delay initializing some data structures until all the 
+    the QML parser.  For example, it might be beneficial from a performance
+    standpoint to delay initializing some data structures until all the
     properties have been set.
 
-    To assist with this, the QML engine defines an interface class called 
+    To assist with this, the QML engine defines an interface class called
     QmlParserStatus.  The interface defines a number of virtual methods that are
     invoked at various stages of the component instantiation.  To receive
     these notifications, all a class has to do is to inherit the interface, and
@@ -602,32 +602,32 @@
 
     \section1 Extended Type Definitions
 
-    QML requires that types have the appropriate properties and signals to 
+    QML requires that types have the appropriate properties and signals to
     work well within the declarative environment.  In the case of existing
-    types, it is sometimes necessary to add signals, properties or slots to a 
-    target class to make it more QML friendly but the original type cannot be 
-    modified.  For these cases, the QML engine supports extended type 
+    types, it is sometimes necessary to add signals, properties or slots to a
+    target class to make it more QML friendly but the original type cannot be
+    modified.  For these cases, the QML engine supports extended type
     definitions.
 
     An extended type definition allows the programmer to supply an additional
     type - known as the extension type - when registering the target class
-    whose properties, signals and slots are transparently merged with the 
+    whose properties, signals and slots are transparently merged with the
     original target class when used from within QML.
 
     An extension class is a regular QObject, with a constructor that takes a
-    QObject pointer.  When needed (extension classes are delay created 
+    QObject pointer.  When needed (extension classes are delay created
     until the first extension attribute is accessed) the extension
     class is created and the target object is passed in as the parent.  When
     an extension attribute on the original is accessed, the appropriate signal,
     property or slots on the extension object is used instead.
 
-    When an extended type is installed, the 
+    When an extended type is installed, the
     \code
         #define QML_DEFINE_EXTENDED_TYPE(T,QmlName,ExtendedTypeName)
     \endcode
     macro should be used instead of the regular \c QML_DEFINE_TYPE.
 
-    This example shows the addition of a read-only \c textLength property to 
+    This example shows the addition of a read-only \c textLength property to
     QLabel being implemented as an extension.
 
     \table
@@ -640,20 +640,20 @@
         Q_PROPERTY(int textLength READ textLength)
     public:
         QWidgetExtension(QObject *parent) : QObject(parent) {}
-        int textLength() const { 
-            return static_cast<QLabel *>(parent())->text().count(); 
+        int textLength() const {
+            return static_cast<QLabel *>(parent())->text().count();
         }
     };
     QML_DEFINE_EXTENDED_TYPE(QLabel,QLabel,QLabelExtension);
     \endcode
-    \o 
+    \o
     \code
-    QLabel { 
-        id: Label1
+    QLabel {
+        id: label1
         text: "Hello World!"
     }
-    QLabel { 
-        text: "Label1 text length: " + Label1.textLength
+    QLabel {
+        text: "label1 text length: " + label1.textLength
     }
     \endcode
     \endtable
diff --git a/doc/src/declarative/qmlformat.qdoc b/doc/src/declarative/qmlformat.qdoc
index f16adca..43eff05 100644
--- a/doc/src/declarative/qmlformat.qdoc
+++ b/doc/src/declarative/qmlformat.qdoc
@@ -7,20 +7,20 @@
 \section1 Overview
 
 QML is an extension to \l {http://www.ecma-international.org/publications/standards/Ecma-262.htm}
-{ECMAScript}.  QML adds a mechanism for declaratively building a tree of objects, improved 
-integration between ECMAScript and Qt's existing QObject based type system, and support for 
-transparently maintained property value bindings between ECMAScript expressions and QObject 
+{ECMAScript}.  QML adds a mechanism for declaratively building a tree of objects, improved
+integration between ECMAScript and Qt's existing QObject based type system, and support for
+transparently maintained property value bindings between ECMAScript expressions and QObject
 properties.
 
 Much of a QML file consists of valid ECMAScript \e {Statement}s.  Except where constraints imposed
 by ECMAScript, C++ or QObject prevented it, the syntactic extensions introduced by QML are designed
-to look similar and fit well with existing ECMAScript syntax and concepts.  
+to look similar and fit well with existing ECMAScript syntax and concepts.
 
 \section1 QML engine
 
-The \l {QmlEngine}{QML engine} executes a \l {QmlComponent}{QML document} in a 
-\l {QmlContext}{QML context} to produce a \l {QObject}{QML object}.  A single QML 
-document may be executed in one or many contexts to produce many QML objects.  A single 
+The \l {QmlEngine}{QML engine} executes a \l {QmlComponent}{QML document} in a
+\l {QmlContext}{QML context} to produce a \l {QObject}{QML object}.  A single QML
+document may be executed in one or many contexts to produce many QML objects.  A single
 QML document may be executed many times in the same context to produce many QML objects.
 
 The QML engine provides the environment in which QML documents, contexts and objects
@@ -34,10 +34,10 @@ and existing context properties cannot be modified.
 \i \e {QML object} will no longer evaluate bindings or scripts.
 \endlist
 
-A QML document is a block of QML source code.  QML documents generally correspond to files stored 
+A QML document is a block of QML source code.  QML documents generally correspond to files stored
 on a disk or network resource, but can be constructed directly from text data.  Syntactically a QML
-document is self contained; QML does \bold {not} have a preprocessor that modifies the document 
-before presentation to the compiler.  Type references within a QML document are resolved based 
+document is self contained; QML does \bold {not} have a preprocessor that modifies the document
+before presentation to the compiler.  Type references within a QML document are resolved based
 exclusively on the import statements present in the document.
 
 A simple QML document looks like this:
@@ -49,7 +49,7 @@ A simple QML document looks like this:
 import Qt 4.6
 
 Rectangle {
-    id: MyRect
+    id: myRect
     width: 100; height: 100
     color: background
 }
@@ -57,40 +57,40 @@ Rectangle {
 \endtable
 
 To instantiate a QML object, a QML document is executed in a QML context.  QML contexts are used by
-programmers to pass data to a QML document.  QML documents may include property bindings or 
-ECMAScript blocks that can contain variable references that need to be resolved.  Each property 
+programmers to pass data to a QML document.  QML documents may include property bindings or
+ECMAScript blocks that can contain variable references that need to be resolved.  Each property
 binding and ECMAScript block has an associated QML context that is used to resolve these references
 that is determined by the QML context in which the document is executed.  The example document above
-contains one variable reference, \c background.  
+contains one variable reference, \c background.
 
 Each QML context defines a scope for variable resolution and each may define local, named context
-properties.  A QML context may also have a \l {QmlContext::addDefaultObject()}{default object}, 
-which is an object whose properties are searched \e after the context properties when resolving a 
-variable name.  QML contexts form a tree, starting from a root context that is provided by the QML 
+properties.  A QML context may also have a \l {QmlContext::addDefaultObject()}{default object},
+which is an object whose properties are searched \e after the context properties when resolving a
+variable name.  QML contexts form a tree, starting from a root context that is provided by the QML
 engine.  When resolving variable references, the QML contexts are searched starting from the
 QML objects containing context upwards towards the root context.
 
-Consider the following QML context tree.  If the example QML document is executed in \c Context1, 
-the \c background variable will resolve to \c Context1's context property.  If the document is 
-executed in \c Context2, the \c background variable will resolve to the root context's context 
+Consider the following QML context tree.  If the example QML document is executed in \c Context1,
+the \c background variable will resolve to \c Context1's context property.  If the document is
+executed in \c Context2, the \c background variable will resolve to the root context's context
 property.
 
 \image qml-context-tree.png
 
 While QML contexts can be created explicitly by the programmer to pass data into QML objects,
 the QML engine also creates a new implicit QML context for every object it instantiates.
-Property bindings and ECMAScript blocks in the document are associated with this QML engine 
-created context.  Object ids that are defined in the document are added as context properties, and 
+Property bindings and ECMAScript blocks in the document are associated with this QML engine
+created context.  Object ids that are defined in the document are added as context properties, and
 their value is set to reference the appropriate object, and the instantiated QML object is set as
-the context's default object.  The following diagram shows the result of executing a simple QML 
+the context's default object.  The following diagram shows the result of executing a simple QML
 document.
 
 \image qml-context-object.png
 
-The blue rectangle in the diagram represents a property binding.  Associated with each property 
+The blue rectangle in the diagram represents a property binding.  Associated with each property
 binding is the QML context to which it belongs, the object property to which it is bound and a
-\e {scope object}.  The scope object is usually, but not always, the object to which the bound 
-property belongs.  The context properties, context default objects and the scope object are all 
+\e {scope object}.  The scope object is usually, but not always, the object to which the bound
+property belongs.  The context properties, context default objects and the scope object are all
 involved when resolving a variable name in a binding.  The following pseudo code describes the
 algorithm used:
 
@@ -112,14 +112,14 @@ foreach (context in contextChain) {
 \endtable
 
 QML supports two categories of types: \e builtin types and \e composite types.  Builtin types are
-those written in C++ and registered with the QML engine.  Builtin types form the most basic 
-building blocks of QML.  Composite types are constructed by composing other builtin or composite 
-types, property bindings and ECMAScript blocks together into a brand new type using the QML 
+those written in C++ and registered with the QML engine.  Builtin types form the most basic
+building blocks of QML.  Composite types are constructed by composing other builtin or composite
+types, property bindings and ECMAScript blocks together into a brand new type using the QML
 language.  Using a composite type is identical to using a builtin type.
 
-For example, Qt 4.6 includes a builtin type called \c Image that shows a bitmap image.  The 
+For example, Qt 4.6 includes a builtin type called \c Image that shows a bitmap image.  The
 \c Image type has \c width and \c height properties that control the size of the displayed image.
-A simple composite type, that will be called \c SquareImage can be built that adds a \c size 
+A simple composite type, that will be called \c SquareImage can be built that adds a \c size
 property that sets both the width and the height.
 
 \table
@@ -129,22 +129,22 @@ property that sets both the width and the height.
 import Qt 4.6
 Image {
     property int size
-    width: size 
-    height: size 
+    width: size
+    height: size
 }
 \endcode
 \endtable
 
 To the QML engine, a composite type is just another QML document.  When a composite type is
 used the engine instantiates it just as it would any other document - by creating a new implicit
-QML context and the object tree described by the document.  The diagram below shows the 
+QML context and the object tree described by the document.  The diagram below shows the
 \c SquareImage composite type used from within another QML document.  When instantiated, the
 \c SquareImage object is created in its own QML context.  Any property bindings specified in the
 \c SquareImage composite type document are associated with this context.  Property bindings created
 in the outer document, however, are associated with its context, even those that are applied to the
 created \c SquareImage object.  That is, the \c size, \c source, \c width and \c height property
 bindings all share a common \e {scope object}, but are owned by two different QML contexts.  The
-difference in containing context results in the \c Root variable resolving differently in the 
+difference in containing context results in the \c Root variable resolving differently in the
 different property bindings.
 
 \image qml-context.png
@@ -173,7 +173,7 @@ The commenting rules in QML are the same as for ECMAScript.  Both \e {MultiLineC
 \e {QMLImportStatement} \bold {:}
 
 \quotation
-\bold {import} \e {StringLiteral} 
+\bold {import} \e {StringLiteral}
 
 \bold {import} \e {StringLiteral} \e {QMLVersionNumber}
 
@@ -198,8 +198,8 @@ The commenting rules in QML are the same as for ECMAScript.  Both \e {MultiLineC
 
 \section3 Semantics
 
-The \e {QMLImportList} is used to statically resolve type references used within the enclosing 
-QML document.  
+The \e {QMLImportList} is used to statically resolve type references used within the enclosing
+QML document.
 
 An import statement is used to bring a set of types into scope for a QML document.
 
diff --git a/doc/src/declarative/qmlintro.qdoc b/doc/src/declarative/qmlintro.qdoc
index e87b7a8..cfefdb9 100644
--- a/doc/src/declarative/qmlintro.qdoc
+++ b/doc/src/declarative/qmlintro.qdoc
@@ -80,11 +80,11 @@ expression has been assigned to is automatically updated to that value.
 \code
 Item {
     Text {
-        id: Text1
+        id: text1
         text: "Hello World"
     }
     Text {
-        id: Text2
+        id: text2
         text: Text1.text
     }
 }
@@ -138,7 +138,7 @@ real, bool, string, color, and lists.
 Item {
     x: 10.5             // a 'real' property
     ...
-    state: "Details"    // a 'string' property
+    state: "details"    // a 'string' property
     focus: true         // a 'bool' property
 }
 \endcode
@@ -153,7 +153,7 @@ Item {
 }
 \endcode
 
-\section3 The 'id' property
+\section3 The \c id property
 
 The \c id property is a special property of type \e id. Assigning an id to an object allows you
 to refer to it elsewhere.
@@ -161,16 +161,16 @@ to refer to it elsewhere.
 \code
 Item {
     Text {
-        id: MyName
+        id: myName
         text: "..."
     }
     Text {
-        text: MyName.text
+        text: myName.text
     }
 }
 \endcode
 
-\c ids must begin with a letter. We recommend that you start your ids with a capital letter.
+\c Ids must begin with a lowercase letter.
 
 \section2 List properties
 
diff --git a/doc/src/declarative/qmlreference.qdoc b/doc/src/declarative/qmlreference.qdoc
index bb0d61a..b26fc64 100644
--- a/doc/src/declarative/qmlreference.qdoc
+++ b/doc/src/declarative/qmlreference.qdoc
@@ -18,7 +18,7 @@
     Getting Started:
     \list
     \o \l {Introduction to the QML language} (in progress)
-    \o \l {tutorial}{Tutorial: 'Hello World'}
+    \o \l {tutorial}{Tutorial: 'Hello world!'}
     \o \l {tutorials-declarative-contacts.html}{Tutorial: 'Introduction to QML'}
     \o \l {qmlexamples}{Examples}
     \endlist
diff --git a/doc/src/declarative/tutorial.qdoc b/doc/src/declarative/tutorial.qdoc
index a2a34b9..b59384c 100644
--- a/doc/src/declarative/tutorial.qdoc
+++ b/doc/src/declarative/tutorial.qdoc
@@ -2,7 +2,11 @@
 \page tutorial.html
 \title Tutorial
 
-This tutorial gives an introduction to QML. It doesn't cover everything; the emphasis is on teaching the key principles, and features are introduced as needed.
+This tutorial gives an introduction to QML. It doesn't cover everything; the emphasis is on teaching the key principles,
+and features are introduced as needed.
+
+Through the different steps of this tutorial we will learn about QML basic types, we will create our own QML component
+with properties and signals, and we will create a simple animation with the help of states and transitions.
 
 Chapter one starts with a minimal "Hello world" program and the following chapters introduce new concepts.
 
@@ -11,9 +15,9 @@ The tutorial's source code is located in the $QTDIR/examples/declarative/tutoria
 Tutorial chapters:
 
 \list
-\o \l {tutorial1}{Tutorial 1}
-\o \l {tutorial2}{Tutorial 2}
-\o \l {tutorial3}{Tutorial 3}
+\o \l {tutorial1}{Tutorial 1 - Basic Types}
+\o \l {tutorial2}{Tutorial 2 - QML Component}
+\o \l {tutorial3}{Tutorial 3 - States and Transitions}
 \endlist
 
 */
diff --git a/doc/src/declarative/tutorial1.qdoc b/doc/src/declarative/tutorial1.qdoc
index e6232af..ad454f2 100644
--- a/doc/src/declarative/tutorial1.qdoc
+++ b/doc/src/declarative/tutorial1.qdoc
@@ -1,78 +1,57 @@
 /*!
 \page tutorial1.html
 \target tutorial1
-\title Tutorial 1 - Hello World!
+\title Tutorial 1 - Basic Types
 
-This first program is a simple "Hello world" example. The picture below is a screenshot of this program.
+This first program is a very simple "Hello world" example that introduces some basic QML concepts.
+The picture below is a screenshot of this program.
 
 \image declarative-tutorial1.png
 
 Here is the QML code for the application:
 
-\code
-Rectangle {
-    id: Page
-    width: 480
-    height: 200
-    color: "LightGrey"
-    Text {
-        id: HelloText
-        text: "Hello world!"
-        font.pointSize: 24
-        font.bold: true
-        y: 30
-        anchors.horizontalCenter: Page.horizontalCenter
-    }
-}
-\endcode
+\snippet examples/declarative/tutorials/helloworld/tutorial1.qml 0
 
 \section1 Walkthrough
 
+\section2 Import
+
+First, we need to import the types that we need for this example. Most QML files will import the built-in QML
+types (like \l{Rectangle}, \l{Image}, ...) that come with Qt with:
+
+\snippet examples/declarative/tutorials/helloworld/tutorial1.qml 3
+
 \section2 Rectangle element
 
-\code
-Rectangle {
-    id: Page
-    width: 480
-    height: 200
-    color: "LightGrey"
-}
-\endcode
+\snippet examples/declarative/tutorials/helloworld/tutorial1.qml 1
 
-First, we declare a root element of type \l Rectangle. It is one of the basic building blocks you can use to create an application in QML.
-We give it an id to be able to refer to it later. In this case, we call it \e Page. We also set the \c width, \c height and \c color properties.
-The \l Rectangle element contains many other properties (such as \c x and \c y), but these are left at their default values.
+We declare a root element of type \l{Rectangle}. It is one of the basic building blocks you can use to create an application in QML.
+We give it an \c{id} to be able to refer to it later. In this case, we call it \e page.
+We also set the \c width, \c height and \c color properties.
+The \l{Rectangle} element contains many other properties (such as \c x and \c y), but these are left at their default values.
 
 \section2 Text element
 
-\code
-Text {
-    id: HelloText
-    text: "Hello world!"
-    font.pointSize: 24
-    font.bold: true
-    y: 30
-    anchors.horizontalCenter: Page.horizontalCenter
-}
-\endcode
+\snippet examples/declarative/tutorials/helloworld/tutorial1.qml 2
 
-We add a text element as a child of our root element to display the text 'Hello world!'.
+We add a \l Text element as a child of our root element that will display the text 'Hello world!'.
 
 The \c y property is used to position the text vertically at 30 pixels from the top of its parent.
 
-The \c font.pointSize and \c font.bold properties are related to fonts and use the \e 'dot' notation.
+The \c font.pointSize and \c font.bold properties are related to fonts and use the \l{Dot Properties}{dot notation}.
 
-The \c anchors.horizontalCenter property refers to the horizontal center of an element. In this case, we specify that our text element should be horizontally centered in the \e Page element.
+The \c anchors.horizontalCenter property refers to the horizontal center of an element.
+In this case, we specify that our text element should be horizontally centered in the \e page element (see \l{anchor-layout}{Anchor-based Layout}).
 
 \section2 Viewing the example
 
-To view what you have created, run the qmlviewer (located in the \c bin directory) with your filename as the first argument. For example, to run the provided completed Tutorial 1 example from the install location, you would type:
+To view what you have created, run the qmlviewer (located in the \c bin directory) with your filename as the first argument.
+For example, to run the provided completed Tutorial 1 example from the install location, you would type:
 
 \code
-bin/qmlviewer $QTDIR/examples/declarative/tutorials/helloworld/t1/tutorial1.qml
+bin/qmlviewer $QTDIR/examples/declarative/tutorials/helloworld/tutorial1.qml
 \endcode
 
 [\l tutorial] [Next: \l tutorial2]
 
 */
-
diff --git a/doc/src/declarative/tutorial2.qdoc b/doc/src/declarative/tutorial2.qdoc
index c97fddf..a3154de 100644
--- a/doc/src/declarative/tutorial2.qdoc
+++ b/doc/src/declarative/tutorial2.qdoc
@@ -1,130 +1,69 @@
 /*!
 \page tutorial2.html
 \target tutorial2
-\title Tutorial 2 - Some colors
+\title Tutorial 2 - QML Component
 
 This chapter adds a color picker to change the color of the text.
 
 \image declarative-tutorial2.png
 
-Our color picker is made of many cells with different colors. To avoid writing the same code many times, we first create a new \c Cell component with a color property (see \l components).
+Our color picker is made of six cells with different colors.
+To avoid writing the same code multiple times, we first create a new \c Cell component.
+A component provides a way of defining a new type that we can re-use in other QML files.
+A QML component is like a black-box and interacts with the outside world through properties, signals and slots and is generally
+defined in its own QML file (for more details, see \l components).
 
 Here is the QML code for \c Cell.qml:
 
-\code
-Item {
-    property var color
-
-    id: CellContainer
-    width: 40
-    height: 25
-
-    Rectangle {
-        anchors.fill: parent
-        color: CellContainer.color
-    }
-    MouseRegion {
-        anchors.fill: parent
-        onClicked: { HelloText.color = CellContainer.color }
-    }
-}
-\endcode
-
-Then, we use our \c Cell component to create the color picker in the QML code for the application:
-
-\code
-Rectangle {
-    id: Page
-    width: 480
-    height: 200
-    color: "LightGrey"
-    Text {
-        id: HelloText
-        text: "Hello world!"
-        font.pointSize: 24
-        font.bold: true
-        y: 30
-        anchors.horizontalCenter: Page.horizontalCenter
-    }
-    Grid {
-        id: ColorPicker
-        x: 0
-        anchors.bottom: Page.bottom
-        width: 120; height: 50
-        rows: 2; columns: 3
-        Cell { color: "#ff0000" }
-        Cell { color: "#00ff00" }
-        Cell { color: "#0000ff" }
-        Cell { color: "#ffff00" }
-        Cell { color: "#00ffff" }
-        Cell { color: "#ff00ff" }
-    }
-}
-\endcode
+\snippet examples/declarative/tutorials/helloworld/Cell.qml 0
 
 \section1 Walkthrough
 
 \section2 The Cell Component
 
-\code
-Item {
-    id: CellContainer
-    width: 40
-    height: 25
-}
-\endcode
+\snippet examples/declarative/tutorials/helloworld/Cell.qml 1
 
-The root element of our component is an \c Item. It is the most basic element in QML and is often used as a container for other elements.
+The root element of our component is an \l Item with the \c id \e container.
+An \l Item is the most basic visual element in QML and is often used as a container for other elements.
 
-\code
-property var color
-\endcode
+\snippet examples/declarative/tutorials/helloworld/Cell.qml 4
 
-We declare a \c color property. This property is accessible from  \e outside our component, this allows us to instantiate the cells with different colors.
+We declare a \c color property. This property is accessible from  \e outside our component, this allows us
+to instantiate the cells with different colors.
+This property is just an alias to an existing property - the color of the rectangle that compose the cell (see \l{Properties}).
 
-\code
-Rectangle {
-    anchors.fill: parent
-    color: CellContainer.color
-}
-\endcode
+\snippet examples/declarative/tutorials/helloworld/Cell.qml 5
 
-Our cell component is basically a colored rectangle.
+We want our component to also have a signal that we call \e clicked with a \e color parameter.
+We will use this signal to change the color of the text in the main QML file later.
 
-The \c anchors.fill property is a convenient way to set the size of an element. In this case the \c Rectangle will have the same size as its parent.
+\snippet examples/declarative/tutorials/helloworld/Cell.qml 2
 
-We bind the \c color property of this \c Rectangle to the color property of our component.
+Our cell component is basically a colored rectangle with the \c id \e rectangle.
 
-\code
-MouseRegion {
-    anchors.fill: parent
-    onClicked: { HelloText.color = CellContainer.color }
-}
-\endcode
+The \c anchors.fill property is a convenient way to set the size of an element.
+In this case the rectangle will have the same size as its parent (see \l{anchor-layout}{Anchor-based Layout}).
 
-In order to change the color of the text when clicking on a cell, we create a \c MouseRegion element with the same size as its parent.
+\snippet examples/declarative/tutorials/helloworld/Cell.qml 3
 
-The \c onClicked property sets the \c color property of the element named \e HelloText to our cell color.
+In order to change the color of the text when clicking on a cell, we create a \l MouseRegion element with
+the same size as its parent.
+
+A \l MouseRegion defines a signal called \e clicked.
+When this signal is triggered we want to emit our own \e clicked signal with the color as parameter.
 
 \section2 The main QML file
 
-\code
-Grid {
-    id: ColorPicker
-    x: 0
-    anchors.bottom: Page.bottom
-    width: 120; height: 50
-    rows: 2; columns: 3
-    Cell { color: "#ff0000" }
-    Cell { color: "#00ff00" }
-    Cell { color: "#0000ff" }
-    Cell { color: "#ffff00" }
-    Cell { color: "#00ffff" }
-    Cell { color: "#ff00ff" }
-}
-\endcode
-
-In the main QML file, the only thing we have to do is to create a color picker by putting 6 cells with different colors in a grid.
+In our main QML file, we use our \c Cell component to create the color picker:
+
+\snippet examples/declarative/tutorials/helloworld/tutorial2.qml 0
+
+We create the color picker by putting 6 cells with different colors in a grid.
+
+\snippet examples/declarative/tutorials/helloworld/tutorial2.qml 1
+
+When the \e clicked signal of our cell is triggered, we want to set the color of the text to the color passed as a parameter.
+We can react to any signal of our component through a property of the name \e 'onSignalName' (see \l{Signal Handlers}).
 
 [Previous: \l tutorial1] [Next: \l tutorial3]
 
diff --git a/doc/src/declarative/tutorial3.qdoc b/doc/src/declarative/tutorial3.qdoc
index bce7e92..8ef32d4 100644
--- a/doc/src/declarative/tutorial3.qdoc
+++ b/doc/src/declarative/tutorial3.qdoc
@@ -1,115 +1,46 @@
-/*! 
+/*!
 \page tutorial3.html
 \target tutorial3
-\title Tutorial 3 - States
+\title Tutorial 3 - States and Transitions
 
-In this chapter, we make this example a little bit more dynamic by introducing states.
+In this chapter, we make this example a little bit more dynamic by introducing states and transitions.
 
-We want our text to jump at the bottom of the screen and become red when clicked.
+We want our text to move to the bottom of the screen, rotate and become red when clicked.
 
 \image declarative-tutorial3_animation.gif
 
 Here is the QML code:
 
-\code
-Rectangle {
-    id: Page
-    width: 480
-    height: 200
-    color: "LightGrey"
-    Text {
-        id: HelloText
-        text: "Hello world!"
-        font.pointSize: 24
-        font.bold: true
-        y: 30
-        anchors.horizontalCenter: Page.horizontalCenter
-        states: [
-            State {
-                name: "down"
-                when: MouseRegion.pressed == true
-                PropertyChanges { target: HelloText; y: 160; color: "red" }
-            }
-        ]
-        transitions: [
-            Transition {
-                from: "*"
-                to: "down"
-                reversible: true
-                ParallelAnimation {
-                    NumberAnimation {
-                        properties: "y"
-                        duration: 500
-                        easing: "easeOutBounce"
-                    }
-                    ColorAnimation { property: "color"; duration: 500 }
-                }
-            }
-        ]
-    }
-    MouseRegion { id: MouseRegion; anchors.fill: HelloText }
-    Grid {
-        id: ColorPicker
-        x: 0
-        anchors.bottom: Page.bottom
-        width: 120; height: 50
-        rows: 2; columns: 3
-        Cell { color: "#ff0000" }
-        Cell { color: "#00ff00" }
-        Cell { color: "#0000ff" }
-        Cell { color: "#ffff00" }
-        Cell { color: "#00ffff" }
-        Cell { color: "#ff00ff" }
-    }
-}
-\endcode
+\snippet examples/declarative/tutorials/helloworld/tutorial3.qml 0
 
 \section1 Walkthrough
 
-\code
-states: [
-    State {
-        name: "down"
-        when: MouseRegion.pressed == true
-        PropertyChanges { target: HelloText; y: 160; color: "red" }
-    }
-]
-\endcode
+\snippet examples/declarative/tutorials/helloworld/tutorial3.qml 2
 
-First, we create a new state \e down for our text element. This state will be activated when MouseRegion is pressed, and deactivated when it is released.
+First, we create a new \e down state for our text element.
+This state will be activated when the \l MouseRegion is pressed, and deactivated when it is released.
 
-The \e down state includes a set of property changes from our implicit \e {default state} (the items as they were initially defined in the QML). Specifically, we set the \c y property of the text to 160 and the \c color to red.
+The \e down state includes a set of property changes from our implicit \e {default state}
+(the items as they were initially defined in the QML).
+Specifically, we set the \c y property of the text to \c 160, the rotation to \c 180 and the \c color to red.
 
-\code
-Transition {
-    from: "*"
-    to: "down"
-    reversible: true
-}
-\endcode
+\snippet examples/declarative/tutorials/helloworld/tutorial3.qml 3
 
-Because we don't want the text to appear at the bottom instantly but rather move smoothly, we add a transition between our two states.
+Because we don't want the text to appear at the bottom instantly but rather move smoothly,
+we add a transition between our two states.
 
-\c from and \c to define the states between which the transition will run. In this case, we want a transition from any state to our \e down state.
+\c from and \c to define the states between which the transition will run.
+In this case, we want a transition from the default state to our \e down state.
 
-Because we want the same transition to be run in reverse when changing back from the \e down state to the default state, we set \c reversible to \c true. This is equivalent to writing the two transitions separately.
+Because we want the same transition to be run in reverse when changing back from the \e down state to the default state,
+we set \c reversible to \c true.
+This is equivalent to writing the two transitions separately.
 
-\code
-ParallelAnimation {
-    NumberAnimation {
-        properties: "y"
-        duration: 500
-        easing: "easeOutBounce"
-    }
-    ColorAnimation { property: "color"; duration: 500 }
-}
-\endcode
-
-The \c ParallelAnimation element makes sure that the two animations (color and position) will start at the same time. We could also run them one after the other by using \c SequentialAnimation instead.
+The \l ParallelAnimation element makes sure that the two types of animations (number and color) start at the same time.
+We could also run them one after the other by using \l SequentialAnimation instead.
 
 For more details on states and transitions, see \l {states-transitions}{States and Transitions}.
 
 [Previous: \l tutorial2] [\l tutorial]
 
 */
-