Merge branch '4.7' of scm.dev.nokia.troll.no:qt/jpasions-qt-doc-team-qtquick into 4.7

Conflicts:
	doc/src/declarative/extending.qdoc
	doc/src/external-resources.qdoc
	doc/src/overviews.qdoc
	src/declarative/util/qdeclarativeview.cpp

77 files changed, 1711 insertions, 3286 deletions

diff --git a/doc/src/declarative/anchor-layout.qdoc b/doc/src/declarative/anchor-layout.qdoc
index 7fc16d8..4dd5eb9 100644
--- a/doc/src/declarative/anchor-layout.qdoc
+++ b/doc/src/declarative/anchor-layout.qdoc
@@ -33,8 +33,6 @@
 \nextpage {QML Mouse Events}{Mouse Events}
 \title Anchor-based Layout in QML
 
-\section1 Overview
-
 In addition to the more traditional \l Grid, \l Row, and \l Column,
 QML also provides a way to layout items using the concept of \e anchors.
 Each item can be thought of as having a set of 7 invisible "anchor lines":
diff --git a/doc/src/declarative/animation.qdoc b/doc/src/declarative/animation.qdoc
index 26545ad..7247e73 100644
--- a/doc/src/declarative/animation.qdoc
+++ b/doc/src/declarative/animation.qdoc
@@ -33,227 +33,185 @@
 \nextpage {QML Data Models}{Structuring Data with Models}
 \title QML Animation and Transitions
 
-
-In QML, animations are created by applying animation objects to object property
-values to gradually change them over time. Animation objects are created from
-the built-in set of animation elements, which can be used to animate various
-types of property values. In addition, animation objects can be applied in
-different ways depending on the context in which they are required.
-
-To create an animation, use an appropriate animation element for the type of
-the property that is to be animated, and apply the animation depending on the
-type of behavior that is required. This page describes the \l {Types of
-Animations} that can be created and the \l {Animation Elements} that are used
-to create these animations.
-
-
-\section1 Types of Animations
-
-An animation is created in different ways depending on the context in which it
-is required. Suppose a \l Rectangle's movement - that is, changes in its \c x
-or \c y property values - should be animated. The semantics of the animation
-differ depending on whether you want to create:
-
+\keyword qml-animation-elements
+\section1 Animation and Transitions Elements
 \list
-\o An animation that moves the \l Rectangle as soon as it is created, to a
-known position
-\o An animation that only triggers when the \l Rectangle is moved by external
-sources - for example, when the mouse is clicked, animate the movement to the
-mouse position
-\o An animation that triggers when a particular signal is received
-\o A standalone animation that is not bound to the \l Rectangle's movement, but
-instead can be started and stopped from script as required
-\o An animation that only triggers during \l{QML States}{state changes}
+\o \l {Transition} - Animates transitions during state changes
+\o \l {SequentialAnimation} - Runs animations sequentially
+\o \l {ParallelAnimation} - Runs animations in parallel
+\o \l {Behavior} - Specifies a default animation for property changes
+\o \l {PropertyAction} - Sets immediate property changes during animation
+\o \l {PauseAnimation} - Introduces a pause in an animation
+\o \l {SmoothedAnimation} - Allows a property to smoothly track a value
+\o \l {SpringAnimation} - Allows a property to track a value in a spring-like motion
+\o \l {ScriptAction} - Runs scripts during an animation
 \endlist
 
-To support these different types of animation methods, QML provides several
-methods for defining an animation. These are:
-
+\keyword qml-property-animation-elements
+Elements that animate properties based on data types
 \list
-\o Creating an \l{Animations as Property Value Sources}{animation using
-property value sources}, to immediately animate a specific property
-\o Using \l{Behavioral Animations}{behavioral animations}, which are triggered
-when a property changes value
-\o \l{Animations in a Signal Handler}{Within a signal handler}, to be triggered
-when a signal is received
-\o As a \l{Standalone Animation}{standalone animation}, that can be
-started/stopped from script and can be rebound to different objects
-\o Using \l{Transitions}{transitions}, to provide animations between \l{QML
-States}{state changes}
+\o \l {PropertyAnimation} - Animates property changes
+\o \l {NumberAnimation} - Animates properties of type qreal
+\o \l {Vector3dAnimation} - Animates properties of type QVector3d
+\o \l {ColorAnimation} - Animates color changes
+\o \l {RotationAnimation} - Animates rotations
+\o \l {ParentAnimation} - Animates parent changes
+\o \l {AnchorAnimation} - Animates anchor changes
 \endlist
 
-These methods are demonstrated below. Notice these examples use
-PropertyAnimation, which is one of several QML elements that can be used to
-create an animation. See the \l {Animation Elements} section further below for
-details.
-
-
+In QML, animations are created by applying animation elements to property
+values. Animation elements will interpolate property values to create smooth
+transitions. As well, state transitions may assign animations to state changes.
 
-\section2 Animations as Property Value Sources
-
-An animation is applied as a \l{QDeclarativePropertyValueSource}{property value
-source} using the \e Animation \bold on \e Property syntax. Here is a \l
-Rectangle whose movement is animated using this method:
-
-\snippet doc/src/snippets/declarative/animation-propertyvaluesource.qml 0
-
-This applies a PropertyAnimation to the \l Rectangle's \c x and \c y properties
-to animate from their current values (i.e. zero) to 50, over 1000 milliseconds.
-The animation starts as soon as the \l Rectangle is loaded. To animate from
-specific values rather than the current \c x and \c y values, set the
-PropertyAnimation's \l {PropertyAnimation::}{from} property.
-
-Specifying an animation as a property value source is useful for animating a
-property to a particular value as soon as the object is loaded.
+To create an animation, use an appropriate animation element for the type of
+the property that is to be animated, and apply the animation depending on the
+type of behavior that is required.
 
+\keyword qml-triggering-animations
+\section1 Triggering Animations
 
-\section2 Behavioral Animations
+There are several ways of setting animation to an object.
 
-Often an animation should be applied whenever a particular property value
-changes. In these cases, a \l Behavior can be used to specify a default
-animation for a property change. Here is an example:
+\keyword qml-direct-animation
+\section2 Direct Property Animation
 
-\snippet doc/src/snippets/declarative/animation-behavioral.qml 0
+To create an immediate movement or animated movement, set the property value
+directly. This may be done in signal handlers or attached properties.
 
-This \l Rectangle has \l Behavior objects applied to its \c x and \c y
-properties. Whenever these properties change (in this case, when the mouse is
-clicked within the parent \l Item), the PropertyAnimation objects defined
-within the behaviors will be applied to these properties, thus animating the \l
-Rectangle's movement to its new position. Unlike the method of \l {Animations
-as Property Value Sources}{defining an animation as a property value source},
-which creates a one-time animation that animates a property to a known value, a
-behavioral animation is an animation that is triggered \e {in response to} a
-value change.
+\snippet doc/src/snippets/declarative/animation.qml direct property change
 
-Any changes to these properties will trigger their animations. If \c x or \c y
-were bound to other properties, and those properties changed, the animation
-would be triggered. The \l{Behavior::}{enabled} property can be used to force a
-\l Behavior to only apply under certain circumstances.
+However, to create more control, \e {property animations} apply smooth movements
+by interpolating values between property value changes. Property animations
+provide timing controls and allows different interpolations through
+\l{qml-easing-animation}{easing curves}.
 
-Notice that unlike for property value source animations, the
-PropertyAnimation's \l {PropertyAnimation::}{from} and \l
-{PropertyAnimation::}{to} properties do not need to be defined because these
-values are already provided, respectively, by the \l Rectangle's current values
-and the new values set in the \c onClicked handler. If these properties were
-defined anyway, they would override the default values.
+\snippet doc/src/snippets/declarative/animation.qml property animation
 
-See the \l {declarative/animation/behaviors}{Behaviors example} for a
-demonstration of behavioral animations.
+Specialized \l{qml-property-animation-elements}{property animation elements}
+have more efficient implementations than the \l{PropertyAnimation} element. They
+are for setting animations to different QML types such as \c int, \c color, and
+rotations. Similarly, the \l{ParentAnimation} can animate parent changes.
 
+See the \l {qml-controlling-animations}{Controlling Animations} section for more
+information about the different animation properties.
 
-\section2 Animations in a Signal Handler
+\keyword qml-transition-animations
+\section2 Transitions during State Changes
 
-An animation can be created within a signal handler to be triggered when the
-signal is received. For example:
+\l{QML States}{States} are property configurations where a property may have different values to reflect different states. State changes introduce
+abrupt property changes; animations smooth transitions to produce visually
+appealing state changes.
 
-\snippet doc/src/snippets/declarative/animation-signalhandler.qml 0
+The \l{Transition} element can contain
+\l{qml-animation-elements}{animation elements} to interpolate property changes
+caused by state changes. To assign the transition to an object, bind it to the
+\c transitions property.
 
-The PropertyAnimation is triggered when the MouseArea is clicked, animating the
-\c x and \c y properties to a value of 50 over 1000 milliseconds. Since the
-animation is not bound to a particular object or property, it must define the
-\l {PropertyAnimation::}{target} and \l {PropertyAnimation::}{property} (or \l
-{PropertyAnimation::}{targets} and \l{PropertyAnimation::}{properties}) values.
-The \l {PropertyAnimation::}{to} property is also required to specify the new
-\c x and \c y values.
+A button might have two states, the \c pressed state when the user clicks on the
+button and a \c released state when the user releases the button. We can assign
+different property configurations for each state. A transition would animate the
+change from the \c pressed state to the \c released state. Likewise, there would
+be an animation during the change from the \c released state to the \c pressed
+state.
 
+\snippet doc/src/snippets/declarative/animation.qml transition animation
 
-\section2 Standalone Animations
+Binding the \c to and \c from properties to the state's name will assign that
+particular transition to the state change. For simple or symmetric transitions,
+setting the to \c to property to the wild card symbol, "\c{*}", denotes
+that the transition applies to any state change.
 
-Animations can also be created as ordinary QML objects that are not bound to
-any particular objects and properties. Here is an example, using a
-PropertyAnimation object. The animation is explicitly started when the
-\l Rectangle is clicked:
+\snippet doc/src/snippets/declarative/animation.qml wildcard animation
 
-\snippet doc/src/snippets/declarative/animation-standalone.qml 0
+\section2 Default Animation as Behaviors
 
-A standalone animation object is not running by default and must be started explicitly
-using the \l {Animation::}{running} property or \l {Animation::}{start()} and
-\l {Animation::}{stop()} methods. Since the animation is not bound to a
-particular object or property, it must define the \l
-{PropertyAnimation::}{target} and \l {PropertyAnimation::}{property} (or \l
-{PropertyAnimation::}{targets} and \l{PropertyAnimation::}{properties}) values.
-The \l {PropertyAnimation::}{to} property is also required to specify the new
-\c x and \c y values. (The \l {PropertyAnimation::}{from} value can optionally
-be provided.)
+Default property animations are set using \e {behavior animations}. Animations
+declared in \l {Behavior} elements apply to the property and animates any
+property value changes. However, Behavior elements have an
+\c enabled property to purposely enable or disable the behavior animations.
 
-Standalone animations are useful when an animation is not targeted towards a
-single object property and the animation should be explicitly started and
-stopped.
+A ball component might have a behavior animation assigned to its \c x, \c y, and
+\c color properties. The behavior animation could be set up to simulate an
+elastic effect. In effect, this behavior animation would apply the elastic
+effect to the properties whenever the ball moves.
 
+\snippet doc/src/snippets/declarative/animation.qml behavior animation
 
-\section2 Transitions
+There are several methods of assigning behavior animations to properties. The
+\c{Behavior on <property>} declaration is a convenient way of assigning a
+behavior animation onto a property.
 
-Transitions are used to describe the animations to be applied when a \l {QML
-States}{state change} occurs. To create a transition, define a \l Transition
-object and add it to an item's \l {Item::}{transitions} property. An example:
+See the \l {declarative/animation/behaviors}{Behaviors example} for a
+demonstration of behavioral animations.
 
-\snippet doc/src/snippets/declarative/animation-transitions.qml 0
+\section1 Playing Animations in Parallel or in Sequence
 
-The PropertyChanges object in the \e moved state defines that when the
-\l Rectangle is in this state, its position should be changed
-to (50, 50). When the \l Rectangle changes to the \e moved state, the
-\l Transition will be triggered, and the transition's \l PropertyAnimation will
-animate the changes in the \c x and \c y properties to their new values.
-The animation will not be applied at any time other than during the state
-change.
+Animations can run \e {in parallel} or \e {in sequence}. Parallel animations
+will play a group of animations at the same time while sequential animations
+play a group of animations in order: one after the other. Grouping animations in
+\l{SequentialAnimation} and \l{ParallelAnimation} will play the animations in
+sequence or in parallel.
 
-Notice the example does not set any \l {PropertyAnimation::}{from} and \l
-{PropertyAnimation::}{to} values for the PropertyAnimation. As a convenience,
-these properties are automatically set to the values of \c x and \c y before
-and after the state change, respectively. However, they can be explicitly set
-if these values should be overrided.
+A banner component may have several icons or slogans to display, one after the
+other. The \c opacity property could transform to \c 1.0 denoting an opaque
+object. Using the \l{SequentialAnimation} element, the opacity animations will
+play after the preceding animation finishes. The \l{ParallelAnimation} element
+will play the animations at the same time.
 
-Also notice the PropertyAnimation does not need to specify a \l
-{PropertyAnimation::}{target} object; any \c x or \c y value of any object that
-has changed during the state change will be animated. However, the target can
-be set if the animation should be restricted to certain objects.
+\snippet doc/src/snippets/declarative/animation.qml sequential animation
 
-The top-level animations in a \l Transition are run in parallel. To run them
-one after the other, use a SequentialAnimation, as shown below in \l {Grouping
-Animations}.
+Once individual animations are placed into a SequentialAnimation or
+ParallelAnimation, they can no longer be started and stopped independently. The
+sequential or parallel animation must be started and stopped as a group.
 
-See the \l Transition documentation for more information.
+The \l SequentialAnimation element is also useful for playing
+\l{qml-transition-animations}{transition animations} because animations are
+played in parallel inside transitions.
 
+See the \l {declarative/animation/basics}{Animation basics example} for a
+demonstration of creating and combining multiple animations in QML.
 
-\section1 Animation Elements
+\keyword qml-controlling-animations
+\section1 Controlling Animations
 
-To create an animation, choose from one of the built-in QML animation elements.
-While the above examples are demonstrated using PropertyAnimation, they could
-have used other elements depending on the type of the property to be animated
-and whether a single or multiple animations are required.
+There are different methods to control animations.
 
-All animation elements inherit from the \l Animation element. It is not
+\section2 Animation Playback
+All \l{qml-animation-elements}{animation elements} inherit from the \l Animation element. It is not
 possible to create \l Animation objects; instead, this element provides the
-essential properties and methods for animation elements. For example, it allows
-animations to be started and stopped through the \l {Animation::}{running}
-property and the \l{Animation::}{start()} and \l{Animation::}{stop()} methods.
-It can also define the number of \l {Animation::}{loops} for an animation.
-
+essential properties and methods for animation elements. Animation elements have
+\c{start()}, \c{stop()}, \c{resume()}, \c{pause()}, \c {restart()}, and
+\c{complete()} -- all of these methods control the execution of animations.
 
-\section2 Property Animation Elements
+\keyword qml-easing-animation
+\section2 Easing
 
-PropertyAnimation is the most basic animation element for animating a property.
-It can be used to animate \c real, \c int, \c color, \c rect, \c point, \c size, and
-\c vector3d properties. It is inherited by NumberAnimation, ColorAnimation,
-RotationAnimation and Vector3dAnimation: NumberAnimation provides a more
-efficient implementation for animating \c real and \c int properties, and
-Vector3dAnimation does the same for \c vector3d properties.  ColorAnimation
-and RotationAnimation provide more specific attributes for animating color
-and rotation changes.
+Easing curves define how the animation will interpolate between the start value
+and the end value. Different easing curves might go beyond the defined range of
+interpolation. The easing curves simplify the creation of animation effects such
+as bounce effects, acceleration, deceleration, and cyclical animations.
 
-A ColorAnimation allows color values for the \l {ColorAnimation::}{from}
-and \l {ColorAnimation::}{to} properties. The
-following animates the rectangle's \l {Rectangle::}{color} property:
+A QML object may have different easing curve for each property animation. There
+are also different parameters to control the curve, some of which are exclusive
+to a particular curve. For more information about the easing curves, visit the
+\l {PropertyAnimation::easing.type}{easing} documentation.
 
-\snippet doc/src/snippets/declarative/animation-elements.qml color
+The \l{declarative/animation/easing}{easing example} visually demonstrates each
+of the different easing types.
 
-RotationAnimation allows a rotation's direction to be specified. The following
-animates the rectangle's \l {Item::rotation} property:
+\section2 Other Animation Elements
 
-\snippet doc/src/snippets/declarative/animation-elements.qml rotation
+In addition, QML provides several other elements useful for animation:
 
-In addition, the following specialized animation elements are available:
+\list
+\o PauseAnimation: enables pauses during animations
+\o ScriptAction: allows JavaScript to be executed during an animation, and can
+be used together with StateChangeScript to reused existing scripts
+\o PropertyAction: changes a property \e immediately during an animation,
+without animating the property change
+\endlist
 
+These are specialized animation elements that animate different property types
 \list
 \o SmoothedAnimation: a specialized NumberAnimation that provides smooth
 changes in animation when the target value changes
@@ -264,75 +222,19 @@ attributes such as \l {SpringAnimation::}{mass},
 \o AnchorAnimation: used for animating an anchor change (see AnchorChanges)
 \endlist
 
-See their respective documentation pages for more details.
-
-
-\section3 Easing
-
-Any PropertyAnimation-based animations can specify \l
-{PropertyAnimation::easing.type}{easing attributes} to control the
-easing curve applied when a property value is animated. These control the
-effect of the animation on the property value, to provide visual effects like
-bounce, acceleration and deceleration.
-
-For example, this modified version of an \l {Animations as Property Value
-Sources}{earlier example} uses \c Easing.OutBounce to create a bouncing effect
-when the animation reaches its target value:
-
-\snippet doc/src/snippets/declarative/animation-easing.qml 0
-
-The \l{declarative/animation/easing}{easing example} visually demonstrates each
-of the different easing types.
+*/
 
-\section2 Grouping Animations
 
-Multiple animations can be combined into a single animation using one of the
-animation group elements: ParallelAnimation or SequentialAnimation. As their
-names suggest, animations in a ParallelAnimation are run at the same time,
-while animations in a SequentialAnimation are run one after the other.
 
-To run multiple animations, define the animations within an animation group.
-The following example creates a SequentialAnimation that runs three animations
-one after the other: a NumberAnimation, a PauseAnimation and another
-NumberAnimation. The SequentialAnimation is applied as a \l{Animations as
-Property Value Sources}{property value source animation} on the image's \c y
-property, so that the animation starts as soon as the image is loaded, moving
-the image up and down:
+\snippet doc/src/snippets/declarative/animation-elements.qml color
+\snippet doc/src/snippets/declarative/animation-propertyvaluesource.qml 0
+\snippet doc/src/snippets/declarative/animation-signalhandler.qml 0
+\snippet doc/src/snippets/declarative/animation-standalone.qml 0
 
+\snippet doc/src/snippets/declarative/animation-transitions.qml 0
 \snippet doc/src/snippets/declarative/animation-groups.qml 0
-\image propanim.gif
-
-Since the SequentialAnimation is applied to the \c y property, the individual
-animations within the group are automatically applied to the \c y property as
-well; it is not required to set their \l{PropertyAnimation::}{properties}
-values to a particular property.
-
-Animation groups can be nested. Here is a rather complex animation making use
-of both sequential and parallel animations:
 
 \snippet doc/src/snippets/declarative/animation-groups.qml 1
+\snippet doc/src/snippets/declarative/animation-groups.qml 0
+\image propanim.gif
 
-Once individual animations are placed into a SequentialAnimation or
-ParallelAnimation, they can no longer be started and stopped independently. The
-sequential or parallel animation must be started and stopped as a group.
-
-See the \l {declarative/animation/basics}{Animation basics example} for a
-demonstration of creating and combining multiple animations in QML.
-
-
-
-\section2 Other Animation Elements
-
-In addition, QML provides several other elements useful for animation:
-
-\list
-\o PauseAnimation: enables pauses during animations
-\o ScriptAction: allows JavaScript to be executed during an animation, and can
-be used together with StateChangeScript to reused existing scripts
-\o PropertyAction: changes a property \e immediately during an animation,
-without animating the property change
-\endlist
-
-See their respective documentation pages for more details.
-
-*/
diff --git a/doc/src/declarative/basicelements.qdoc b/doc/src/declarative/basicelements.qdoc
index 4253e4c..c0df307 100644
--- a/doc/src/declarative/basicelements.qdoc
+++ b/doc/src/declarative/basicelements.qdoc
@@ -29,7 +29,7 @@
 \page qmlbasicelements.html
 \ingroup qml-features
 \contentspage QML Features
-\previouspage QML Syntax
+\previouspage QML Features
 \nextpage {QML Basic Types}{Data Types}
 
 \title QML Basic Elements
@@ -91,6 +91,7 @@ The \l Text and \l TextEdit elements display formatted text onto the screen.
 \c TextEdit features multi-line editing while the \l TextInput element is for
 single line text input.
 
+\keyword qml-top-level-component
 \section1 Using Elements as the Top-Level Component
 
 For creating components (or displaying a simple scene), there are different
@@ -108,15 +109,6 @@ the component will retain the top-level component's properties. If a non-visual
 component is the top-level component, the visual properties should be aliased to
 the top-level to display the component properly.
 
-A component implemented using a \c Rectangle as the top-level component:
-\snippet doc/src/snippets/declarative/focus/mywidget.qml document
-
-A component that uses a \c FocusScope as the top-level component:
-\snippet doc/src/snippets/declarative/focus/myfocusscopewidget.qml document
-Note that the visual properties need to be passed to the parent. The
-\l {Keyboard Focus in QML}{focus} article provides more details about the
-\c FocusScope element.
-
 For more information on how to build upon QML elements, see the
 \l{Importing Reusable Components} document.
 */
diff --git a/doc/src/declarative/basictypes.qdoc b/doc/src/declarative/basictypes.qdoc
index 948bdef..453af08 100644
--- a/doc/src/declarative/basictypes.qdoc
+++ b/doc/src/declarative/basictypes.qdoc
@@ -29,18 +29,17 @@
     \page qdeclarativebasictypes.html
     \ingroup qml-features
     \contentspage QML Features
-    \previouspage {Property Binding}
-    \nextpage {QML Basic Elements}{Basic Elements}
+    \previouspage {QML Basic Elements}
+    \nextpage Property Binding
     \title QML Basic Types
 
     QML has a set of primitive types, as listed below, that are used throughout
     the \l {QML Elements}.
 
-    Some of these types can also be used for defining
-    \c property values in QML. See \l{Importing Reusable Components} for the
-    list of types that can be used for \c property values.
-
     \annotatedlist qmlbasictypes
+
+    To create additional types, such as data types created in C++, read the
+    \l{Extending QML Functionalities using C++} article.
 */
 
 /*!
diff --git a/doc/src/declarative/declarativeui.qdoc b/doc/src/declarative/declarativeui.qdoc
index ae11559..ff38ac6 100644
--- a/doc/src/declarative/declarativeui.qdoc
+++ b/doc/src/declarative/declarativeui.qdoc
@@ -33,8 +33,6 @@
 \brief Qt Quick provides a declarative framework for building highly
 dynamic user interfaces.
 
-\section1 Introduction
-
 Qt Quick is a collection of technologies that are designed to help
 developers create the kind of intuitive, modern, fluid user
 interfaces that are increasingly used on mobile phones, media players,
@@ -45,22 +43,6 @@ language for describing user interfaces and a language runtime. A collection
 of C++ APIs is used to integrate these high level features with classic
 Qt applications.
 
-\section2 QML
-
-User interfaces and their behavior are described using QML, an extension to
-\l{About JavaScript}{JavaScript} that lets developers and designers
-use a declarative syntax to specify each user interface in terms of
-\l{QML Elements}{QML elements}. These elements are a sophisticated set of
-graphical and behavioral building blocks that can be combined together in
-\l{QML Documents}{QML documents} to build components ranging in complexity
-from simple buttons and sliders, to complete Internet-enabled applications.
-
-\section2 Qt Declarative Module
-
-The Qt Declarative module provides a C++ API that is for interacting with QML files from within Qt applications. The module allows the programmer to build applications' backend logic using Qt.
-
-QML and the Qt Declarative Module separate the frontend UI logic from the backend logic.
-
 \section1 Getting Started
 
 \list
@@ -75,15 +57,15 @@ QML and the Qt Declarative Module separate the frontend UI logic from the backen
 \section1 QML Features
 
 \list
-\o \l{QML Syntax}
-\o \l{Property Binding}
-\o \l{QML Basic Types}{Data Types}
 \o \l{QML Basic Elements}{Basic Elements}
+\o \l{QML Basic Types}{Data Types}
+\o \l{Property Binding}
 \o \l{Using QML Positioner and Repeater Items}{Component Layouts}
 \o \l{Anchor-based Layout in QML}{Layouts using Anchors}
-\o \l{Mouse Events}
+\o \l{QML Mouse Events}{Mouse Events}
 \o \l{QML Text Handling and Validators}{Text Handling and Validators}
 \o \l{Keyboard Focus in QML}{Keyboard Focus}
+\o \l{QML Signal and Handler Event System}{Signal and Handler Event System}
 \o \l{Importing Reusable Components}
 \o \l{QML States}{States}
 \o \l{QML Animation and Transitions}{Animation and Transitions}
@@ -92,11 +74,9 @@ QML and the Qt Declarative Module separate the frontend UI logic from the backen
 \o \l{Extending QML Functionalities using C++}
 \o \l{Using QML Bindings in C++ Applications}
 \o \l{Integrating QML Code with Existing Qt UI Code}
-\o \l{QML Signal and Handler Event System}{Signal and Handler Event System}
 \o \l{Dynamic Object Management in QML}{Dynamic Object Management}
 \o \l{Network Transparency}{Loading Resources in QML}
 \o \l{QML Internationalization}{Internationalization}
-\o \l{QML Graphical Effects}{Graphical Effects}
 \endlist
 
 \section1 QML Add-Ons
@@ -157,11 +137,7 @@ examples for porting}
 \section1 Best Practices
 
 \list
-\o \l{QML Best Practices: Data Types}{Using Data Types in QML}
 \o \l{QML Best Practices: Coding Conventions}{Coding Tips}
 \o \l{QML Performance}{Performance Tips}
-\omit
-\o \l{Geir's screen size document}
-\endomit
 \endlist
 */
diff --git a/doc/src/declarative/dynamicobjects.qdoc b/doc/src/declarative/dynamicobjects.qdoc
index 055f437..a8339e0 100644
--- a/doc/src/declarative/dynamicobjects.qdoc
+++ b/doc/src/declarative/dynamicobjects.qdoc
@@ -29,7 +29,7 @@
 \page qdeclarativedynamicobjects.html
 \ingroup qml-features
 \contentspage {QML Features}
-\previouspage {QML Signal and Handler Event System}{Signal and Handler Event System}
+\previouspage {Integrating QML Code with Existing Qt UI Code}
 \nextpage {Network Transparency}{Loading Resources in QML}
 \title Dynamic Object Management in QML
 
@@ -66,14 +66,14 @@ To dynamically load a component defined in a QML file, call the
 This function takes the URL of the QML file as its only argument and creates
 a \l Component object from this URL.
 
-Once you have a \l Component, you can call its \l {Component::createObject()}{createObject()} method to create an instance of 
+Once you have a \l Component, you can call its \l {Component::createObject()}{createObject()} method to create an instance of
 the component. This function can take one or two arguments:
 \list
-\o The first is the parent for the new item. Since graphical items will not appear on the scene without a parent, it is 
-  recommended that you set the parent this way. However, if you wish to set the parent later you can safely pass \c null to 
-  this function. 
-\o The second is optional and is a script which assigns values to the item's properties during creation. This avoids warnings 
-  when certain properties have been bound to before they have been set by the code. Additionally, there are small performance 
+\o The first is the parent for the new item. Since graphical items will not appear on the scene without a parent, it is
+  recommended that you set the parent this way. However, if you wish to set the parent later you can safely pass \c null to
+  this function.
+\o The second is optional and is a script which assigns values to the item's properties during creation. This avoids warnings
+  when certain properties have been bound to before they have been set by the code. Additionally, there are small performance
   benefits when instantiating objects in this way.
 \endlist
 
diff --git a/doc/src/declarative/elements.qdoc b/doc/src/declarative/elements.qdoc
index 466b940..c087f17 100644
--- a/doc/src/declarative/elements.qdoc
+++ b/doc/src/declarative/elements.qdoc
@@ -31,7 +31,8 @@
   \title QML Elements
   \brief A listing of standard QML elements.
 
-These are the functionally grouped lists of QML elements.
+These are the functionally grouped lists of QML elements as part of
+\l{Qt Quick}.
 
 Elements are declared with the their name and two curly braces. Elements may
 be nested in elements, thereby creating a parent-child relationship between the
@@ -44,7 +45,7 @@ To see the QML elements listed by functional area, see the
 \list
 \o \l {Item} - Basic item element inherited by QML elements
 \o \l {Component} - Encapsulates QML elements during importing
-\o \l {QML:QtObject} {QtObject} - Basic element containing only the objectName property
+\o \l {QML:QtObject} {QtObject} - Basic element containing only the \c {objectName} property
 \endlist
 
 \section1 Graphics
diff --git a/doc/src/declarative/example-slideswitch.qdoc b/doc/src/declarative/example-slideswitch.qdoc
index 9f84ee6..54ee2c7 100644
--- a/doc/src/declarative/example-slideswitch.qdoc
+++ b/doc/src/declarative/example-slideswitch.qdoc
@@ -33,8 +33,6 @@ This example shows how to create a reusable switch component in QML.
 
 The code for this example can be found in the \c $QTDIR/examples/declarative/ui-components/slideswitch directory.
 
-\section1 Overview
-
 The elements that composed the switch are:
 
 \list
diff --git a/doc/src/declarative/extending.qdoc b/doc/src/declarative/extending.qdoc
index a3ba315..95f54ff 100644
--- a/doc/src/declarative/extending.qdoc
+++ b/doc/src/declarative/extending.qdoc
@@ -705,4 +705,3 @@ public:
     }
 };
 \endcode
-*/
diff --git a/doc/src/declarative/focus.qdoc b/doc/src/declarative/focus.qdoc
index 9a11491..940f864 100644
--- a/doc/src/declarative/focus.qdoc
+++ b/doc/src/declarative/focus.qdoc
@@ -31,7 +31,7 @@
 \ingroup qml-features
 \contentspage QML Features
 \previouspage {QML Text Handling and Validators}{Text Handling and Validators}
-\nextpage {Importing Reusable Components}
+\nextpage {QML Signal and Handler Event System}{Signal and Handler Event System}
 
 \title Keyboard Focus in QML
 
diff --git a/doc/src/declarative/graphicaleffects.qdoc b/doc/src/declarative/graphicaleffects.qdoc
deleted file mode 100644
index b5ef601..0000000
--- a/doc/src/declarative/graphicaleffects.qdoc
+++ /dev/null
@@ -1,36 +0,0 @@
-/****************************************************************************
-**
-** Copyright (C) 2010 Nokia Corporation and/or its subsidiary(-ies).
-** All rights reserved.
-** Contact: Nokia Corporation (qt-info@nokia.com)
-**
-** This file is part of the documentation of the Qt Toolkit.
-**
-** $QT_BEGIN_LICENSE:FDL$
-** No Commercial Usage
-** This file contains pre-release code and may not be distributed.
-** You may use this file in accordance with the terms and conditions
-** contained in the Technology Preview License Agreement accompanying
-** this package.
-**
-** GNU Free Documentation License
-** Alternatively, this file may be used under the terms of the GNU Free
-** Documentation License version 1.3 as published by the Free Software
-** Foundation and appearing in the file included in the packaging of this
-** file.
-**
-** If you have questions regarding the use of this file, please contact
-** Nokia at qt-info@nokia.com.
-** $QT_END_LICENSE$
-**
-****************************************************************************/
-
-/*!
-\page qmlgraphicaleffects.html
-\ingroup qml-features
-\contentspage QML Features
-\previouspage {QML Internationalization}{Internationalization}
-\nextpage {QML Features}
-\title QML Graphical Effects
-
-*/
diff --git a/doc/src/declarative/integrating.qdoc b/doc/src/declarative/integrating.qdoc
index 649088d..c2f55f5 100644
--- a/doc/src/declarative/integrating.qdoc
+++ b/doc/src/declarative/integrating.qdoc
@@ -29,7 +29,7 @@
 \page qml-integration.html
 \ingroup qml-features
 \previouspage {Using QML Bindings in C++ Applications}
-\nextpage {QML Signal and Handler Event System}
+\nextpage {Dynamic Object Management in QML}{Dynamic Object Management}
 \contentspage QML Features
 \title Integrating QML Code with Existing Qt UI Code
 
diff --git a/doc/src/declarative/mouseevents.qdoc b/doc/src/declarative/mouseevents.qdoc
index f6512a7..533f64b 100644
--- a/doc/src/declarative/mouseevents.qdoc
+++ b/doc/src/declarative/mouseevents.qdoc
@@ -35,9 +35,7 @@
 
 \tableofcontents
 
-\section1 Introduction
-
-\section1 Mouse Events
+\section1 Mouse Elements
 
 \list
 \o \l{MouseArea} Element
@@ -45,7 +43,78 @@
 \endlist
 
 \section1 Mouse Event Handling
-go over the slots and signals feature (without the C++)
+
+QML uses \l{QML Signal and Handler Event System}{signals and handlers} to
+deliver mouse interactions. Specifically, the \l MouseArea and \l MouseEvent
+elements provide QML components with signal handlers to accept mouse events
+within a defined area.
+
+\section1 Defining a Mouse Area
+
+The \l MouseArea element receives events within a defined area. One quick way
+to define this area is to anchor the \c MouseArea to its parent's area using the
+\c anchors.fill property. If the parent is a \l Rectangle (or any \l Item
+component), then the MouseArea will fill the area defined by the parent's
+dimensions. Alternatively, an area smaller or larger than the parent is
+definable.
+\snippet doc/src/snippets/declarative/mousearea/mousearea-snippet.qml anchor fill
+
+\section1 Receiving Events
+
+The MouseArea element provides
+\l{QML Signal and Handler Event System}{signals and handlers} to detect different
+mouse events. The \l MouseArea element documentation describes these
+gestures in greater detail.
+
+\list Mouse Gestures
+\o canceled
+\o clicked
+\o doubleClicked
+\o entered
+\o exited
+\o positionChanged
+\o pressAndHold
+\o pressed
+\o released
+\endlist
+
+These signals have signal handlers that are invoked when the signals are emitted.
+\snippet doc/src/snippets/declarative/mousearea/mousearea-snippet.qml mouse handlers
+
+\section1 Enabling Gestures
+Some mouse gestures and button clicks need to be enabled before they send or
+receive events. Certain \l MouseArea and \l MouseEvent properties enable these
+gestures.
+
+To listen to (or explicitly ignore) a certain mouse button, set the appropriate
+mouse button to the \l {MouseArea::acceptedButtons}{acceptedButtons} property.
+
+Naturally, the mouse events, such as button presses and mouse positions, are
+sent during a mouse click. For example, the \c containsMouse property will only
+retrieve its correct value during a mouse press. The
+\l {MouseArea::hoverEnabled}{hoverEnabled} will enable mouse events and
+positioning even when there are no mouse button presses. Setting the
+\c hoverEnabled property to \c true, in turn will enable the \c entered,
+\c exited, and \c positionChanged signal and their respective signal handlers.
+
+\snippet doc/src/snippets/declarative/mousearea/mousearea-snippet.qml enable handlers
+Additionally, to disable the whole mouse area, set the \c MouseArea
+element's \c enabled property to \c false.
+
+\section1 MouseEvent Object
+
+Signals and their handlers receive a \l MouseEvent object as a parameter. The
+\c mouse object contain information about the mouse event. For example, the
+mouse button that started the event is queried through the
+\l {MouseEvent::button}{mouse.button} property.
+
+The \c MouseEvent object can also ignore a mouse event using its \c accepted
+property.
+
+\section2 Accepting Further Signals
+Many of the signals are sent multiple times to reflect various mouse events
+such as double clicking. To facilitate the classification of mouse clicks, the
+MouseEvent object has an \c accepted property to disable the event propagation.
 
 To learn more about QML's event system, please read the \l {QML Signal and Handler Event System} document.
 
diff --git a/doc/src/declarative/positioners.qdoc b/doc/src/declarative/positioners.qdoc
index 66d2973..0ac6a2b 100644
--- a/doc/src/declarative/positioners.qdoc
+++ b/doc/src/declarative/positioners.qdoc
@@ -34,8 +34,6 @@
 \title Using QML Positioner and Repeater Items
 
 
-\section1 Introduction
-
 Positioner items are container items that manage the positions and sizes of
 items in a declarative user interface. Positioners behave in a similar way to
 the \l{Widgets and Layouts}{layout managers} used with standard Qt widgets,
@@ -102,7 +100,7 @@ in a 2-by-2 grid. As with the other positioners, the spacing between items
 can be specified using the \l{Grid::spacing}{spacing} property.
 
 \clearfloat
-\snippet doc/src/snippets/declarative/grid/grid-spacing.qml document
+\snippet doc/src/snippets/declarative/grid-spacing.qml document
 
 There is no difference between horizontal and vertical spacing inserted
 between items, so any additional space must be added within the items
diff --git a/doc/src/declarative/propertybinding.qdoc b/doc/src/declarative/propertybinding.qdoc
index a93c830..22d14a8 100644
--- a/doc/src/declarative/propertybinding.qdoc
+++ b/doc/src/declarative/propertybinding.qdoc
@@ -35,9 +35,14 @@
 
 \section1 Properties
 
-A property is a value of a QML component that can be read and modified by other objects.
-In QML, properties serve many purpose. Their main function is to bind to values.
-Values may be a \l{QML Basic Types}{basic type}, or other QML elements.
+QML components have \e properties that can be read and modified by other objects.
+In QML, properties serve many purposes but their main function is to bind to
+values. Values may be a \l{QML Basic Types}{basic type}, or other QML elements.
+
+The syntax for properties is:
+\qml
+ [default] property <type> <name>[: defaultValue]
+\endqml
 
 Elements already possess useful properties but, to create custom properties,
 precede the property name with the keyword \c property.
@@ -48,7 +53,7 @@ precede the property name with the keyword \c property.
 \snippet doc/src/snippets/declarative/properties.qml parent end
 
 QML property rules coincide with many of JavaScript's property rules, for example,
-properti names must begin with a lowercase letter.
+property names must begin with a lowercase letter.
 \l {JavaScript Reserved Words}{JavaScript reserved words} are not valid property
 names.
 
@@ -107,6 +112,7 @@ will get an error.
 
 Certain properties bind to more complex types such as other elements and objects.
 
+\keyword qml-basic-property-types
 \section2 Basic Property Types
 
 Basic types such as \l int, \l real, and other Qt structures may be bound to
@@ -198,8 +204,8 @@ The snippet code simply prints the name of the first state, \c FETCH.
  See the \l{list}{list type} documentation
 for more details about list properties and their available operations.
 
+\keyword qml-grouped-properties
 \section2 Grouped Properties
-\target dot properties
 
 In some cases properties form a logical group and use either the \e dot notation
 or \e group notation.
diff --git a/doc/src/declarative/qdeclarativedocument.qdoc b/doc/src/declarative/qdeclarativedocument.qdoc
index b94e32e..423d77c 100644
--- a/doc/src/declarative/qdeclarativedocument.qdoc
+++ b/doc/src/declarative/qdeclarativedocument.qdoc
@@ -30,8 +30,6 @@
 \title QML Documents
 \brief A description of QML documents and the kind of content they contain.
 
-\section1 Introduction
-
 A QML document is a block of QML source code.  QML documents generally correspond to files
 stored on a disk or at a location on a network, but they can also be constructed directly
 from text data.
@@ -42,17 +40,17 @@ Here is a simple QML document:
 
 QML documents are always encoded in UTF-8 format.
 
-A QML document always begins with one or more import statements.  To prevent elements 
-introduced in later versions from affecting existing QML programs, the element types 
-available within a document are controlled by the imported QML \l {Modules}.  That is, 
+A QML document always begins with one or more import statements.  To prevent elements
+introduced in later versions from affecting existing QML programs, the element types
+available within a document are controlled by the imported QML \l {Modules}.  That is,
 QML is a \e versioned language.
 
-Syntactically a QML document is self contained; QML does \e not have a preprocessor that 
-modifies the document prior to presentation to the QML runtime. \c import statements 
-do not "include" code in the document, but instead instruct the QML runtime on how to 
-resolve type references found in the document.  Any type reference present in a QML 
-document - such as \c Rectangle and \c ListView - including those made within an 
-\l {Inline JavaScript}{JavaScript block} or \l {Property Binding}s, are \e resolved based exclusively on the 
+Syntactically a QML document is self contained; QML does \e not have a preprocessor that
+modifies the document prior to presentation to the QML runtime. \c import statements
+do not "include" code in the document, but instead instruct the QML runtime on how to
+resolve type references found in the document.  Any type reference present in a QML
+document - such as \c Rectangle and \c ListView - including those made within an
+\l {Inline JavaScript}{JavaScript block} or \l {Property Binding}s, are \e resolved based exclusively on the
 import statements.  QML does not import any modules by default, so at least one \c import
 statement must be present or no elements will be available!
 
@@ -63,12 +61,12 @@ resolved according to the document scope.
 
 \section1 Documents as Component Definitions
 
-A QML document defines a single, top-level \l {QDeclarativeComponent}{QML component}.  A QML component 
-is a template that is interpreted by the QML runtime to create an object with some predefined 
-behaviour.  As it is a template, a single QML component can be "run" multiple times to 
-produce several objects, each of which are said to be \e instances of the component.  
+A QML document defines a single, top-level \l {QDeclarativeComponent}{QML component}.  A QML component
+is a template that is interpreted by the QML runtime to create an object with some predefined
+behaviour.  As it is a template, a single QML component can be "run" multiple times to
+produce several objects, each of which are said to be \e instances of the component.
 
-Once created, instances are not dependent on the component that created them, so they can 
+Once created, instances are not dependent on the component that created them, so they can
 operate on independent data.  Here is an example of a simple "Button" component (defined
 in a \c Button.qml file) that is instantiated four times by \c application.qml.
 Each instance is created with a different value for its \c text property:
@@ -80,7 +78,7 @@ Each instance is created with a different value for its \c text property:
 
 \row
 \o \snippet doc/src/snippets/declarative/qml-documents/qmldocuments.qml document
-\o 
+\o
 \qml
 import QtQuick 1.0
 
@@ -112,23 +110,23 @@ to other QML components and applications in the same directory.
 \section1 Inline Components
 
 In addition to the top-level component that all QML documents define, and any reusable
-components placed in separate files, documents may also 
-include \e inline components.  Inline components are declared using the 
-\l Component element, as can be seen in the first example above.  Inline components share 
+components placed in separate files, documents may also
+include \e inline components.  Inline components are declared using the
+\l Component element, as can be seen in the first example above.  Inline components share
 all the characteristics of regular top-level components and use the same \c import list as their
-containing QML document.  Components are one of the most basic building blocks in QML, and are 
+containing QML document.  Components are one of the most basic building blocks in QML, and are
 frequently used as "factories" by other elements.  For example, the \l ListView element uses the
 \c delegate component as the template for instantiating list items - each list item is just a
 new instance of the component with the item specific data set appropriately.
 
-Like other \l {QML Elements}, the \l Component element is an object and must be assigned to a 
+Like other \l {QML Elements}, the \l Component element is an object and must be assigned to a
 property.   \l Component objects may also have an object id.  In the first example on this page,
-the inline component is added to the \l Rectangle's \c resources list, and then 
-\l {Property Binding} is used to assign the \l Component to the \l ListView's \c delegate 
+the inline component is added to the \l Rectangle's \c resources list, and then
+\l {Property Binding} is used to assign the \l Component to the \l ListView's \c delegate
 property.  While using property binding allows the \l Component object to be shared (for example,
-if the QML document contained multiple \l ListView's with the same delegate), in this case the 
-\l Component could have been assigned directly to the \l ListView's \c delegate.  The QML 
-language even contains a syntactic optimization when assigning directly to a component property 
+if the QML document contained multiple \l ListView's with the same delegate), in this case the
+\l Component could have been assigned directly to the \l ListView's \c delegate.  The QML
+language even contains a syntactic optimization when assigning directly to a component property
 for this case where it will automatically insert the \l Component tag.
 
 These final two examples are behaviorally identical to the original document.
diff --git a/doc/src/declarative/qdeclarativei18n.qdoc b/doc/src/declarative/qdeclarativei18n.qdoc
index 756ef4b..bbee37c 100644
--- a/doc/src/declarative/qdeclarativei18n.qdoc
+++ b/doc/src/declarative/qdeclarativei18n.qdoc
@@ -30,10 +30,9 @@
 \ingroup qml-features
 \contentspage QML Features
 \previouspage {Network Transparency}{Loading Resources in QML}
-\nextpage {QML Graphical Effects}{Graphical Effects}
+\nextpage {QML Features}
 \title QML Internationalization
 
-\section1 Overview
 
 Strings in QML can be marked for translation using the qsTr(), qsTranslate(),
 QT_TR_NOOP(), and QT_TRANSLATE_NOOP() functions.
diff --git a/doc/src/declarative/qdeclarativemodels.qdoc b/doc/src/declarative/qdeclarativemodels.qdoc
index 749e14e..23dd390 100644
--- a/doc/src/declarative/qdeclarativemodels.qdoc
+++ b/doc/src/declarative/qdeclarativemodels.qdoc
@@ -78,6 +78,7 @@ The use of positioner items to arrange items from a model is covered in
 \l{Using QML Positioner and Repeater Items}.
 
 
+\keyword qml-data-models
 \section1 QML Data Models
 
 \section2 ListModel
@@ -142,7 +143,7 @@ Note that in the above example there is no delegate required.
 The items of the model itself provide the visual elements that
 will be positioned by the view.
 
-
+\keyword qml-c++-models
 \section1 C++ Data Models
 
 Models can be defined in C++ and then made available to QML. This is useful
diff --git a/doc/src/declarative/qdeclarativestates.qdoc b/doc/src/declarative/qdeclarativestates.qdoc
index 4089609..b1a97d7 100644
--- a/doc/src/declarative/qdeclarativestates.qdoc
+++ b/doc/src/declarative/qdeclarativestates.qdoc
@@ -34,194 +34,103 @@
 \target qmlstates
 \title QML States
 
-\section1 Overview
-
-User interfaces are designed to present different interface configurations in
-different scenarios, or to modify their appearances in response to user
-interaction. Often, there are a set of changes that are made concurrently, such
-that the interface could be seen to be internally changing from one \e state to
-another.
-
-This applies generally to interface elements regardless of their complexity.
-A photo viewer may initially present images in a grid, and when an image is
-clicked, change to a "detailed" state where the individual image is expanded
-and the interface is changed to present new options for image editing. On the
-other end of the scale, when a simple button is pressed, it may change to a
-"pressed" state in which its color and position is modified to give a pressed
-appearance.
-
-In QML, any object can change between different \e states to apply sets of
-changes that modify the properties of relevant items. Each \e state could
-present a different configuration that could, for example:
+\section1 States Elements
+\list
+\o \l State
+\o \l PropertyChanges
+\o \l StateGroup
+\o \l StateChangeScript
+\o \l ParentChange
+\o \l AnchorChanges
+\endlist
+
+Many user interface designs are \e state driven; interfaces have configurations
+that differ depending on the current state. For example, a traffic signal will
+configure its flags or lights depending on its state. While in the signal's
+\c stop state, a red light will turn on while the yellow and the green lights
+will turn off. In the \c caution state, the yellow light is on while the other
+lights are turned off.
+
+In QML, \e states are a set of property configurations defined in a \l State
+element. Different configurations could, for example:
 
 \list
 \o Show some UI elements and hide others
 \o Present different available actions to the user
-\o Start, stop or pause animations
+\o Start, stop, or pause animations
 \o Execute some script required in the new state
 \o Change a property value for a particular item
-\o Show a different view or "screen"
+\o Show a different view or screen
 \endlist
 
-Changes between states can be animated using \l {Transitions}{transitions}, as
-discussed further below.
-
-All \l {Item}-based objects have a \e {default state}, and can specify additional
-states by adding new \l State objects to the item's \l {Item::}{states}
-property. Each state has a \e name that is unique for all states within that
-item; the default state's name is an empty string. To change the current state
+All \l {Item}-based objects have a \c state property, and can specify additional
+states by adding new \c State objects to the item's \l {Item::}{states}
+property. Each state within a component has a unique \c name, an empty string
+being the default. To change the current state
 of an item, set the \l {Item::}{state} property to the name of the state.
 
-Non-Item objects can use states through the StateGroup element.
-
+Non-Item objects may use states through the \l StateGroup element.
 
 \section1 Creating States
 
 To create a state, add a \l State object to the item's \l {Item::}{states} property,
 which holds a list of states for that item.
 
-Following is an example. Here, the \l Rectangle is initially placed in the
-default (0, 0) position. It has defined an additional state named "moved", in
-which a PropertyChanges object repositions the rectangle to (50, 50). Clicking
-within the MouseArea changes the state to the "moved" state, thus moving the \l
-Rectangle.
-
-\snippet doc/src/snippets/declarative/states.qml 0
-
-The \l State item defines all the changes to be made in the new state. It
-could specify additional properties to be changed, or create additional
-PropertyChanges for other objects. It can also modify the properties of other
-objects, not just the object that owns the state. For example:
-
-\qml
-Rectangle {
-    // ...
-    states: [
-        State {
-            name: "moved"
-            PropertyChanges { target: myRect; x: 50; y: 50; color: "blue" }
-            PropertyChanges { target: someOtherItem; width: 1000 }
-        }
-    ]
-}
-\endqml
-
-As a convenience, if an item only has one state, its \l {Item::}{states}
-property can be defined as a single \l State, without the square-brace list
-syntax:
-
-\snippet doc/src/snippets/declarative/propertyanimation.qml single state
-
-A \l State is not limited to performing modifications on property values. It
-can also:
-
+A warning \c signal component may have two states, the \c NORMAL and the
+\c CRITICAL state. Suppose that in the \c NORMAL state, the \c color of the
+signal should be \c green and the warning \c flag is down. Meanwhile, in the
+\c CRITICAL state, the \c color should be \c red and the flag is \c up. We may
+model the states using the \c State element and the color and flag
+configurations with the \c PropertyChanges element.
+\snippet doc/src/snippets/declarative/states.qml signal states
+The \l PropertyChanges element will change the values of object properties.
+Objects are referenced through their \l {qml-id-property}{id}. Objects outside
+the component are also referenced using the \c id property, exemplified by the
+property change to the external \c flag object.
+
+Further, the state may change by assigning the \c state property with the
+appropriate signal state. A state switch could be in a \l MouseArea element,
+assigning a different state whenever the signal receives a mouse click.
+\snippet doc/src/snippets/declarative/states.qml switch states
+
+The State element is not limited to performing modifications on property values.
+It can also:
 \list
-\o Run some script using StateChangeScript
-\o Override an existing signal handler for an object using PropertyChanges
-\o Re-parent an \l Item using ParentChanges
-\o Modify anchor values using AnchorChanges
+\o Run some script using \l StateChangeScript
+\o Override an existing signal handler for an object using \l PropertyChanges
+\o Re-parent an \l Item using \l ParentChange
+\o Modify anchor values using \l AnchorChanges
 \endlist
 
-The \l {declarative/animation/states}{States and Transitions example}
-demonstrates how to declare a basic set of states and apply animated
-transitions between them.
-
-
 \section1 The Default State
 
-Of course, the \l Rectangle in the example above could have simply been moved
-by setting its position to (50, 50) in the mouse area's \c onClicked handler.
-However, aside from enabling batched property changes, one of the features of
-QML states is the ability of an item to revert to its \e {default state}.
-The default state contains all of an item's initial property values before
-they were modified in a state change.
-
-For example, suppose the \l Rectangle should move to (50,50) when the mouse is
-pressed, and then move back to its original position when the mouse is
-released. This can be achieved by using the \l {State::}{when} property,
-like this:
-
-\qml
-Rectangle {
-    // ...
-
-    MouseArea {
-        id: mouseArea
-        anchors.fill: parent
-    }
-
-    states: State {
-        name: "moved"
-        when: mouseArea.pressed
-        // ...
-    }
-}
-\endqml
-
-The \l {State::}{when} property is set to an expression that evaluates to
-\c true when the item should be set to that state. When the mouse is pressed,
-the state is changed to \e moved. When it is released, the item reverts to its
-\e default state, which defines all of the item's original property values.
-
-Alternatively, an item can be explicitly set to its default state by setting its
-\l {Item::}{state} property to an empty string (""). For example, instead of
-using the \l {State::}{when} property, the above code could be changed to:
-
-\qml
-Rectangle {
-    // ...
-
-    MouseArea {
-        anchors.fill: parent
-        onPressed: myRect.state = 'moved';
-        onReleased: myRect.state = '';
-    }
-
-    states: State {
-        name: "moved"
-        // ...
-    }
-}
-\endqml
-
-Obviously it makes sense to use the \l {State::}{when} property when possible
-as it provides a simpler (and a better, more declarative) solution than
-assigning the state from signal handlers.
-
-
-\section1 Animating State Changes
-
+Every \l Item based component has a \c state property and a \e{default state}.
+The default state is the empty string (\c{""}) and contains all of an item's
+initial property values. The default state is useful for managing property
+values before state changes. Setting the \c state property to an empty string
+will load the default state.
 
-State changes can be easily animated through \l {Transitions}{transitions}. A
-\l Transition defines the animations that should be applied when an item
-changes from one state to another.
+\section1 The \c when Property
 
-If the above example was modified to include the following \l Transition, the
-movement of the \l Rectangle would be animated:
+For convenience, the \l State element has a \c when property that can bind to
+expressions to change the state whenever the bound expression evaluates to
+\c true. The \c when property will revert the state back to the
+\l {The Default State}{default state} when the expression evaluates to false.
 
-\qml
-Rectangle {
-    // ...
+\snippet doc/src/snippets/declarative/states.qml when property
+The \c bell component will change to the \c RINGING state whenever the
+\c signal.state is \c CRITICAL.
 
-    MouseArea {
-        // Handle mouse events...
-    }
-
-    states: [
-       // States are defined here...
-    ]
+\section1 Animating State Changes
 
-    transitions: [
-        Transition {
-            NumberAnimation { properties: "x,y"; duration: 500 }
-        }
-    ]
- }
-\endqml
+State changes induce abrupt value changes. The \l Transitions element allow
+smoother changes during state changes. In transitions, animations and
+interpolation behaviors are definable. The
+\l {QML Animation and Transitions}{Animation and Transitions} article has more
+information about creating state animations.
 
-This \l Transition defines that if any \c x or \c y properties have changed
-during a state change within this item, their values should be animated over 500
-milliseconds.
+The \l {declarative/animation/states}{States and Transitions example}
+demonstrates how to declare a basic set of states and apply animated
+transitions between them.
 
-See the \l Transitions documentation for more information.
 */
diff --git a/doc/src/declarative/qml-intro.qdoc b/doc/src/declarative/qml-intro.qdoc
deleted file mode 100644
index 3f3e0e4..0000000
--- a/doc/src/declarative/qml-intro.qdoc
+++ /dev/null
@@ -1,616 +0,0 @@
-/****************************************************************************
-**
-** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies).
-** All rights reserved.
-** Contact: Nokia Corporation (qt-info@nokia.com)
-**
-** This file is part of the documentation of the Qt Toolkit.
-**
-** $QT_BEGIN_LICENSE:FDL$
-** No Commercial Usage
-** This file contains pre-release code and may not be distributed.
-** You may use this file in accordance with the terms and conditions
-** contained in the Technology Preview License Agreement accompanying
-** this package.
-**
-** GNU Free Documentation License
-** Alternatively, this file may be used under the terms of the GNU Free
-** Documentation License version 1.3 as published by the Free Software
-** Foundation and appearing in the file included in the packaging of this
-** file.
-**
-** If you have questions regarding the use of this file, please contact
-** Nokia at qt-info@nokia.com.
-** $QT_END_LICENSE$
-**
-****************************************************************************/
-
-
-
-/*!
-\page qml-intro.html
-\title Intro to Qt Quick
-
-\section1 Overview
-
-QML is a high level, scripted language. Its commands, more correctly \e elements,
-leverage the power and efficiency of the Qt libraries to make easy to use
-commands that perform intuitive functions. Draw a rectangle, display an image at
-a position and so on. Behind these elements are complex C++ libraries that
-efficiently perform the action. As with any graphical application, always
-consider that this ability to easily build graphically rich applications means
-that some care may be needed to prevent performance problems.
-
-The language also allows more flexibility of these commands by using
-Javascript rather than C++ to add new layers of logic to your application.
-Javascript is easier to learn than C++ and can be embedded into the QML
-files or imported from a separate file.
-
-\bold{In QML the types of various 'objects' are referred to as \l {QML
-Elements}{elements}}.
-
-An element usually has various \e properties that help define the element. For
-example, if we created an element called Circle then the radius of the circle
-would be a property.
-
-
-\section1 A First Look
-
-The basic syntax of an \l{QML Elements}{element} is
-
-\qml
-SomeElement {
-    id: myObject
-    // ... some other things here ...
-}
-\endqml
-
-Here we are defining a new object. We specify its 'type' first as SomeElement.
-Then within matching braces { ... } we specify the various parts of our 
-element.
-
-The \c id is a unique identifier for the element, it must start with a lower
-case letter and only contain letters, numbers and underscores. It is this
-particular object's name. If this SomeElement \l {QML Elements}{element} was
-a Rectangle instead and it was one of many then the \e optional unique id
-would allow us to manipulate each element individually.
-
-Each visual element is ultimately based on, or inherits from, an element
-called \l Item. \l Item has certain properties and actions that may be
-useful. The properties have default values so you need only specify the
-ones you will need.
-
-Take a simple element such as a \l Rectangle. It has an \c id, we will call
-it \e myRectangle, it has a \c width and a \c height. Imagine that we
-want a rectangle that is 500 pixels by 400 pixels in the x and y directions
-(horizontal by vertical).
-
-We can implement this \l Rectangle with these properties this way
-
-\snippet doc/src/snippets/declarative/qml-intro/rectangle.qml document
-
-This is a valid QML script. To run it, copy it and save it to a file, say
-myexample.qml, and on the command line run the following command:
-
-\code
-qmlviewer myexample.qml
-\endcode
-
-On Mac OS X, open the "QMLViewer" application instead and open the
-\c myexample.qml file, or run it from the command line:
-
-\code
-QMLViewer.app/Contents/MacOS/QMLViewer myexample.qml
-\endcode
-
-It will create a very boring rectangle in its own window.
-
-
-\section1 Hello World!
-
-We can now add some color and text to make a Hello World QML program.
-
-\l Rectangle has the property \l{Rectangle::color}{color} to produce a
-background color.
-
-Text is handled by a different element called \l Text. We need to create a
-\l Text object inside the \l Rectangle and set its \l{Text::}{text}
-property to "Hello World!". So to set the text to "Hello world" and the
-background colour to light gray,
-
-\snippet doc/src/snippets/declarative/qml-intro/hello-world1.qml document
-
-
-\section1 Hello World Again
-
-From now on we will not always show the import statement for Qt but it
-should still be there when you create your QML scripts.
-
-To make our Hello World example a little nicer set the position of the text
-to be at pixel position x = 100, y = 100 within the displayed window. This
-position belongs to the \l Text element so we set the position inside its
-definition. Note that we separate different QML statements on the same line
-with a semi-colon, or we could have simply put each statement on a new line
-
-\snippet doc/src/snippets/declarative/qml-intro/hello-world2.qml updated text
-
-Not only did we reposition the text, but the text was altered by adding
-HTML tags to change the font size. The text color was also changed from the
-default black to dark green by using a standard string for the color's SVG
-name.
-
-We could also have used a hexadecimal string for the RGB (red-green-blue, as
-#rrggbb) values of the color similar to the method used in HTML. For
-example, mostly blue with a green tint,
-
-\snippet doc/src/snippets/declarative/qml-intro/hello-world3.qml updated text
-
-All of these changes occurred within the \l Text object which is the scope
-of these property changes.
-
-Other objects may use the information but it belongs to the element where
-the property has been defined.
-
-
-\section1 Images
-
-To add an image to our little application we use the \l Image element. An
-\l Image uses a path to an image file, and has properties to control
-the aspect ratio, the image size, to tile the area amongst others. The
-source of the image, the path to the file, is a URL. Therefore the file can
-be local: \e {mydir/myimage1.png}. Or it can be remote:
-\e {"http://www.example.com/images/myimage1.png"}.
-
-\snippet doc/src/snippets/declarative/qml-intro/hello-world4.qml added an image
-
-This displays the image, as we would expect, at the top left of the window.
-The position of the default x = 0, y = 0 coordinate. The example here uses
-a PNG file, but it could have been one of various supported formats,
-including JPG and GIF.
-
-Let us reposition the image and enlarge it. Place it at the same 'x' offset
-as the "Hello world again" text, but put it another 50 pixels below the
-text, also make it 150 by 150 pixels in size,
-
-\snippet doc/src/snippets/declarative/qml-intro/hello-world5.qml positioning the image
-
-Adding the Hello World example, with the text and the image example we can
-write a simple piece of QML that starts to look a bit better.
-
-\snippet doc/src/snippets/declarative/qml-intro/hello-world5.qml document
-
-The result is still quite simple
-
-\image qml-intro-helloa.png
-
-
-\section1 Anchors: Aligning Elements
-
-Using absolute positioning, such as saying x = 100 and y = 150, works well
-until the user or developer stretches or increases the size of the window.
-Then the positions need to be recalculated. What would be nice would be a
-relative means of positioning of objects in a window or rectangle. For
-example, we want to place an image at the bottom of a rectangle, we would
-like to specify the image's location as the 'bottom of the window', not a
-specific coordinate. We can do this with the anchors property, which
-objects inherit from Item.
-
-The anchors property is really a property group. It is a collection of
-related properties. It has properties within it which can be used by means
-of the dot notation.
-
-The dot notation uses object \c{id}s and property names to use a particular
-object or property. Say I have a rectangle r1, which contains a rectangle
-r2, which contains an Item item1, which has an 'x' property I want to
-change. I just use the dot notation to identify it: r1.r2.item1.x
-
-If we want to position an image at the bottom of the rectangle it is
-inside. I have to specify that the bottom of the image is also at the
-bottom of the rectangle
-
-\snippet doc/src/snippets/declarative/qml-intro/anchors1.qml document
-
-This places the logo at the bottom left of the window.
-
-\image qml-intro-anchors1.png  "A simple anchor"
-
-We would like it centered and not touching the bottom of the window, for
-aesthetic reasons. For the centering we use the horizontalCenter property,
-and to prevent the touching of the image to the bottom of the rectangle,
-the bottomMargin property is used. So the new actions for the script are
-
-    \list
-    \o set the bottom of the image (anchors.bottom) to be the bottom of the window
-    \o move the image to be in the horizontal center of the window
-    \o set a margin of 10 pixels so that the image does not touch the bottom window border
-    \endlist
-
-Encoded into QML the script becomes
-
-\snippet doc/src/snippets/declarative/qml-intro/anchors2.qml document
-
-Run this and resize the window. You will see that now the position of the
-image adjusts during the resize.
-
-\image qml-intro-anchors2.png  "Image Centered at the Bottom"
-
-You can also add another object say a block of descriptive text and place
-it above or below the image or to the side. This code places some text just
-above the image
-
-\snippet doc/src/snippets/declarative/qml-intro/anchors3.qml adding some text
-
-\image qml-intro-anchors3.png
-
-\note \e anchors is a property group, to be used within the object. When
-referencing these properties from another object we use the property
-directly, instead of saying:
-
-\qml
-Item {
-    anchors.bottom: myRectangle.anchors.top  // Wrong
-}
-\endqml
-
-we use
-
-\qml
-Item {
-    anchors.bottom: myRectangle.top         // Correct
-}
-\endqml
-
-
-\section1 Transformations
-
-We can transform a graphical object to get additional effects. Rotate a
-piece of text by 180 degrees to display upside-down text. Rotate an image
-by 90 degrees to lay it on its side. These transformations require
-additional information.
-
-For rotation, the additional information includes: the origin relative to
-the object being rotated, the axis of rotation, and the angle in degrees to
-rotate the image through in a clockwise direction. The axis does not have
-to be the z-axis, the line between your eyes and the image, it could be
-along the vertical y-axis or the horizontal x-axis. We have three
-dimensions to play with. For simplicity in this example we will rotate
-about the z-axis by 90 degrees in a negative direction, anti-clockwise.
-
-Rotation of text was also suggested. It could also be useful to scale the
-text. We can do both. The \l {Item::transform}{transform} property is a
-\e list of \l Transform elements, so using the list syntax
-\c{myList: [ listElement1, listElement2, ... } ]}
-we can produce a list of transformations.
-
-The text will be rotated by 45 degrees anti-clockwise and scaled 
-vertically by a factor of 1.5 and by 1.2 horizontally.
-
-Using the example above as the basis for this we have,
-
-\snippet doc/src/snippets/declarative/qml-intro/transformations1.qml document
-
-The code block in \c image1 starting with \c transform specifies that the
-\l {Item::transform}{transform} property will be a Rotation through -90
-degrees, which is anti-clockwise, about the z-axis running through the
-center of the image at (75,75), since the image is 150 x 150 pixels.
-
-The other transformation available is \l Translate. This produces a change
-in position of the item.
-
-\note In a list of transformations the order of the transformations is
-important. In the above example try swapping around the Scale transform with
-the Rotation transform, remember to remove or add the comma. The results are
-acceptable for our little test but not the same.
-
-
-\section1 Animations
-
-Animation in QML is done by animating properties of objects. Properties
-that are numbers, colors, Rectangles, points and directions. In QML these
-are \l {QML Basic Types} named as real, int, color, rect, point, size, and
-vector3d. There are a number of different ways to do animation. Here we
-will look at a few of them.
-
-\section2 Number Animation
-
-Previously we have used a rotation transformation to change the orientation
-of an image. We could easily animate this rotation so that instead of a
-straight rotation counter-clockwise of 90 degrees we could rotate the image
-through a full 360 degrees in an animation. The axis of rotation wont
-change, the position of the center of the image will not change, only the
-angle will change. Therefore, a NumberAnimation of a rotation's angle should
-be enough for the task. If we wish for a simple rotation about the center
-of the image then we can use the \c rotation property that is inherited
-from \l Item. The rotation property is a real number that specifies the
-angle in a clockwise direction for the rotation of the object. Here is the
-code for our animated rotating image.
-
-\snippet doc/src/snippets/declarative/qml-intro/number-animation1.qml document
-
-The \c {transformOrigin: Item.Center} is redundant since this is the default
-axis of rotation anyway. But if you change \c Center to \c BottomRight you
-will see an interesting variation.
-
-Also if instead the \l Rotation transformation had been used then we would have
-more control over the various parameters. We could vary the axis, to be not
-just a different offset from the z-axis but along the y-axis, x-axis or
-combination. For example, if the task had been to animate the rotation
-about the y-axis passing through the center of the image then the following
-code would do it.
-
-\snippet doc/src/snippets/declarative/qml-intro/number-animation2.qml document
-
-Here there is a rectangle 600 by 400 pixels. Placed within that rectangle
-is an image 100 by 100 pixels. It is rotated about the center of the image
-about the y-axis so that it looks as if it is rotating about an invisible
-vertical string holding it up. The time it takes to complete the rotation is 3
-seconds (3,000 milliseconds). The NumberAnimation is applied to the angle
-taking it from 0 (no change) to 360 degrees, back where it started.
-Strictly speaking it isn't necessary to go from 0 to 360 since the same
-location is duplicated, but it makes it easier to read in this example and
-it has no visible effect on the animation. The number of loops that the
-animation will execute is set to \c {Animation.Infinite} which means that the
-animation is in an endless loop.
-
-To see an interesting variation. Change the axis to \c {axis { x:1; y:1; z:1
-}}. This is a line coming from the center of the image downwards to the
-right and out of the screen. Although the change is simple the rotation
-seems complex.
-
-\section2 Sequential Animation
-
-For a more complex animation we will need two images. The first image will
-be placed at the center of a window (Rectangle) and the second image will
-be at the upper left of the window. The animation will move the second
-image from the top left of the window to the bottom right. In doing so we
-will be animating the position and the size of the image.
-
-First create two images
-
-\snippet doc/src/snippets/declarative/qml-intro/sequential-animation1.qml document
-
-We will add to 'image1' a SequentialAnimation from x = 20 to the target of
-x = 450. The 'from' values will be used because we will be repeating the
-animation, so the object needs to know where the original position is, both
-x and y. The SequentialAnimation of x will set it to repeat by indicating
-that the number of animation loops is infinite, meaning that the 'loop'
-counter will be set to a value Animation.Infinite that indicates an endless
-cycle. Also there will be a NumberAnimation to vary the numeric property
-between the x values and over a given duration. After the NumberAnimation
-there will be a PauseAnimation that will pause the animation for 500
-milliseconds (half a second) simply for the visual effect.
-
-\snippet doc/src/snippets/declarative/qml-intro/sequential-animation2.qml adding a sequential animation
-
-A similar block of code is written for the animation of the 'y' value of
-the position.
-
-We will also animate the scale of the object, so as it goes from top left
-to bottom right of the window it will become smaller until about midway,
-and then become larger. To complete the animation we will set the 'z'
-values of the images. 'z' is the stacking order, the z-axis effectively
-points out from the screen to your eyes with the default value of 'z' being
-0. So if we set the Rectangle to have z with value zero, just to be sure,
-and image1 to 1 and image2 to 2 then image2 will be in the foreground and
-image1 in the background. When image1 passes image2 it will pass behind it.
-The completed code looks like
-
-\snippet doc/src/snippets/declarative/qml-intro/sequential-animation3.qml document
-
-The \c {easing.type} has many options, expressed as a string. It specifies the
-kind of equation that describes the acceleration of the property value, not
-necessarily position, over time.
-
-For example, \e InOutQuad means that at the start and the end of the animation the
-'velocity' is low but the acceleration or deceleration is high. Much like a car
-accelerating from stop, and decelerating to stop at the end of a journey,
-with the maximum speed being in the middle. Examine the \l {PropertyAnimation::easing.type}
-{easing} documentation and the various graphs that show the effect. The horizontal
-axis, 'progress', can be thought of as time. The vertical axis is the value
-of the particular property.
-
-In discussing animation we need to describe three objects: State, MouseArea
-and Signals. Although independent of the animation elements, animation
-delivers some of the best examples that illustrate these new elements.
-
-
-
-\section2 Animation Summary
-
-\table
-    \header
-        \o Name
-        \o Description
-    \row
-        \o PropertyAnimation
-        \o a property value on a target object is varied to a specified value over a given time.
-
-    \row
-        \o NumberAnimation
-        \o animate a numeric property from one value to another over a given time.
-
-    \row
-        \o PauseAnimation
-        \o results in the task waiting for the specified duration, in milliseconds.
-
-    \row
-        \o SequentialAnimation
-        \o allows us to list in order the animation events we want to occur, first A then B then C and so on.
-
-    \row
-        \o ParallelAnimation
-        \o enables us to run different animations at the same time instead of sequentially.
-
-\endtable
-
-
-\section1 Using States
-
-A state is a defined set of values in the configuration of an object and
-often depends on the previous state. For example, a glass could be in a
-state we call 'HalfFull' if it is being filled with a liquid and has
-reached half of its total capacity. We could also have a state called
-HalfEmpty which is the state that occurs when the amount of liquid drops to
-half of the glass's capacity. Both states represent the same amount of
-liquid, but we consider them different. Likewise, states in a program
-represent not just values but may include how the current values were
-reached.
-
-When a state changes a \e transition occurs. This is an opportunity to make
-changes or take actions that depend on the movement to the new state. For
-example, if we had a scene in the country where the state variable has two
-states "daylight" and "night". Then when the state changes to "night" at
-this transition the sky would be made dark, stars would be shown, the
-countryside would be darkened. And when the state changes to "daylight" the
-opposite changes would be made: the sky is now blue, the scenery is green,
-there is a sun in the sky.
-
-Here is a simple QML program that shows the change of state in the above
-example. We have two rectangles, the top one is the 'sky' and the bottom
-one is the 'ground'. We will animate the change from daylight to night.
-There will be two states, but we only need to define one since 'daylight'
-will be the default state. We will just go to 'night' by clicking and
-holding the left mouse button down, releasing the mouse button will reverse
-the process
-
-\snippet doc/src/snippets/declarative/qml-intro/states1.qml document
-
-Several new things appear in this sample. Firstly, we use a \l MouseArea
-element to detect mouse clicks in the \e mainRectangle. Secondly, we use
-the list notation [ thing1 , thing2, ... ] to build a list of states and a
-list of transitions.
-
-\l MouseArea defines a region that will respond to mouse clicks. In this case
-we are only concerned with when the mouse is pressed or not pressed, not
-the particular button or other details. The area of the MouseArea is the
-entire main window, mainRectangle, so that clicking anywhere in this region
-will start the animation. Since we are using the 'pressed' mouse state,
-then the animation will move from 'daylight' to 'night' only while the mouse
-button remains pressed.
-
-When the button is released the 'daylight' state is entered and the
-transition from 'night' to 'daylight' is triggered causing the animation to
-run. The transition specifies the duration in milliseconds of the
-ColorAnimation, while the state specifies the color of the new state.
-
-The PropertyChanges command is the way that we nominate which properties
-will change in a change of state, and what new value the property will
-take. Since, for example, we want the 'sky' region to turn to dark blue and
-the 'ground' region to turn to black for the 'night' state, then the
-rectangles for those regions are the 'target' and the property in the target
-is 'color'.
-
-
-\section1 Signals
-
-Signals are simply events that can be hooked up to actions we want performed.
-In QML they are usually preceded by the word 'on', for example in the animation
-using a MouseArea the signal was \l {MouseArea::onPressed}{onPressed}. If
-you look at the C++ documentation you will see a lot of talk about
-\l {Signals & Slots}{Signals and Slots}. Signals are connected to Slots. The
-signal represents an event and the Slot is the function that does something
-based on that event. You can also have Signals connected to other Signals, so
-that one Signal (event) triggers another Signal (event), and so forth. It is
-nice to know this is what happens beneath the QML layer but not essential for
-using QML.
-
-Most elements do not have Signals associated with them. However, a few like
-the \l Audio element have many signals. Some of the \l Audio signals are
-used to represent events such as when the audio is stopped, play is pressed,
-paused, and reaching the end of the media. They allow the developer to connect,
- for example, the press of a user interface button (perhaps a MouseArea) to
- some QML that will handle this event.
-
-
-\section1 Analyzing An Example: Dial Control
-
-In the Qt \e {examples/declarative/ui-components} folder you will find a folder
-\e {dialcontrol} which contains the \e dialcontrol example.
-
-\image qml-dial.png  "QML Dial example with Slider"
-
-In essence this small application has a sliding bar that you can slide using
-a mouse, and a graphical dial that responds to the position of the slider.
-
-The code for the example is in two parts: Dial.qml and dialcontrol.qml.
-
-\e {Dial.qml} can be found in the \e content sub-directory. It defines a \c Dial
-component similar to an odometer. Eventually, the example will hook up a slider
-component so that moving the slider will change the position of a needle on the
-dial.
-
-The code for the \c Dial, identified by the name of the file, contains four images
-in overlapping order: the background (numbers and divisions), the shadow of the
-needle, the needle itself, and finally the 'glass' overlay (containing
-transparent layers).
-
-The \c needle_shadow.png image has a \l Rotation assigned to the \e transform
-attribute of the \l Image. The rotation is set to match the angle of the needle
-image angle value \e {needleRotation.angle}. Both the needle and the
-needle_shadow have the same default \e x and \e y values but the rotation origin
-for the needle is slightly different so that a shadow will be evident as the
-needle moves.
-
-\snippet examples/declarative/ui-components/dialcontrol/content/Dial.qml  needle_shadow
-
-And the needle
-
-\snippet examples/declarative/ui-components/dialcontrol/content/Dial.qml  needle
-
-The final image is the overlay which simply has a position defined.
-
-\snippet examples/declarative/ui-components/dialcontrol/content/Dial.qml  overlay
-
-\e {dialcontrol.qml} in the \e {examples/declarative/ui-components/dialcontrol} directory is the
-main file of the example. It defines the visual environment that the Dial
-will fit into. Because the \e Dial component and the images live in the \e
-content sub-directory we will have to import this into \e dialcontrol.qml. So the
-start of the file looks like
-
-\snippet examples/declarative/ui-components/dialcontrol/dialcontrol.qml  imports
-
-The visual space is bound by a 300 by 300 pixel \l Rectangle which is given
-a gray color. Inside this rectangle is our component \e Dial and a \l Rectangle.
-Inside the rectangle called 'container' is another rectangle with the
-interesting name 'slider'.
-
-\snippet examples/declarative/ui-components/dialcontrol/dialcontrol.qml  0
-
-The Dial component, named 'dial, is \e anchored to the center of the main
-rectangle. The \c value attribute of 'dial' is set to a value based on the
-'slider' horizontal position and the 'container' width. So changes to the
-'slider' position will change the Dial \c value which is used in Dial to compute
-the rotation of the needle image. Notice this piece of code in Dial where
-the change in \c value modifies the position of the needle.
-
-\snippet examples/declarative/ui-components/dialcontrol/content/Dial.qml  needle angle
-
-This is part of the \c needleRotation that rotates the needle and causes the
-rotation of its shadow. \l SpringAnimation is an element that modifies the value
-of that rotation \e angle and mimics the oscillatory behavior of a spring,
-with the appropriate \e spring constant to control the acceleration and the \e
-damping to control how quickly the effect dies away.
-
-The 'container' is light gray with a color gradient defined using
-\l GradientStop. The gradient is applied vertically. If you need a horizontal
-gradient then you could apply the vertical gradient and then rotate the item
-by 90 degrees.
-
-The 'slider' is dark gray and also has a vertical color gradient. The most
-important thing about the 'slider' is that it has a MouseArea defined, which
-specifies a \c {drag.target} on itself along the X-axis. With minimum
-and maximum values on the X-axis defined. So we can click on the 'slider' and
-drag it left and right within the confines of the 'container'. The motion of
-the 'slider' will then change the \c value attribute in \e Dial as discussed
-already.
-
-Also notice the use of a \c radius value for a rectangle. This produces rounded
-corners. That is how the 'container' and 'slider' are displayed with a
-pleasant rounded look.
-
-
-
-*/
-
-
-
diff --git a/doc/src/declarative/qmlevents.qdoc b/doc/src/declarative/qmlevents.qdoc
index 3c1c8df..7dfb1f9 100644
--- a/doc/src/declarative/qmlevents.qdoc
+++ b/doc/src/declarative/qmlevents.qdoc
@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2010 Nokia Corporation and/or its subsidiary(-ies).
+** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies).
 ** All rights reserved.
 ** Contact: Nokia Corporation (qt-info@nokia.com)
 **
@@ -26,12 +26,103 @@
 ****************************************************************************/
 
 /*!
-    \page qmlevents.html
-    \ingroup qml-features
-    \contentspage QML Features
-    \previouspage {Integrating QML Code with Existing Qt UI Code}
-    \nextpage {Dynamic Object Management in QML}{Dynamic Object Management}
+\page qmlevents.html
+\ingroup qml-features
+\contentspage QML Features
+\previouspage {Keyboard Focus in QML}{Keyboard Focus}
+\nextpage Importing Reusable Components
+
+\title QML Signal and Handler Event System
+
+QML utilizes Qt's \l{The Meta-Object System}{meta-object} and
+\l{Signals & Slots}{signals} systems. Signals and slots created using Qt in C++
+are inheritely valid in QML.
+
+\keyword qml-signals-and-handlers
+\section1 Signals and Handlers
+
+Signals provide a way to notify other objects when an event has occurred. For
+example, the MouseArea \c clicked signal notifies other objects that the mouse
+has been clicked within the area.
+
+The syntax for defining a new signal is:
+
+\qml
+signal <name>[([<type> <parameter name>[, ...]])]
+\endqml
+
+Attempting to declare two signals or methods with the same name in the same type
+block generates 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.)
+
+Here are various examples of signal declarations:
+\snippet doc/src/snippets/declarative/events.qml parent begin
+\snippet doc/src/snippets/declarative/events.qml signal declaration
+\snippet doc/src/snippets/declarative/events.qml parent end
+
+If the signal has no parameters, the "\c{()}" brackets are optional. If
+parameters are used, the parameter types must be declared, as for the \c string
+and \c variant arguments of the \c perform signal.
+
+Adding a signal to an item automatically adds a \e{signal handler} as well. The
+signal hander is named \c on<SignalName>, with the first letter of the signal in
+uppercase.  The previous signals have the following signal handlers:
+\snippet doc/src/snippets/declarative/events.qml signal handler declaration
+
+Further, each QML properties have a \c{<property_name>Changed} signal and its
+corresponding \c{on<property_name>Changed} signal handler. As a result, property
+changes may notify other components for any changes.
+\snippet doc/src/snippets/declarative/events.qml automatic signals
+
+To emit a signal, invoke it as a method. The signal handler binding is similar
+to a property binding and it is invoked when the signal is emitted. Use the
+defined argument names to access the respective arguments.
+\snippet doc/src/snippets/declarative/events.qml signal emit
+Note that the \c Component.onCompleted is an
+\l{attached-signalhandlers}{attached signal handler}; it is invoked when the
+\l Component initialization is complete.
+
+\keyword qml-connect-signals-to-method
+\section2 Connecting Signals to Methods and Signals
+
+Signal objects have a \c connect() method to a connect a signal either to a
+method or another signal. When a signal is connected to a method, the method is
+automatically invoked whenever the signal is emitted. (In Qt terminology, the
+method is a \e slot that is connected to the \e signal; all methods defined in
+QML are created as \l{Signals & Slots}{Qt slots}.) This enables a signal
+to be received by a method instead of a \l {Signal Handlers}{signal handler}.
+
+\snippet doc/src/snippets/declarative/events.qml connect method
+The \c {connect()} method is appropriate when connecting a JavaScript method to
+a signal.
+
+There is a corresponding \c disconnect() method for removing connected
+signals.
+
+\section3 Signal to Signal Connect
+
+By connecting signals to other signals, the \c connect() method can form different
+signal chains.
+\snippet doc/src/snippets/declarative/events.qml forward signal
+
+
+Whenever the \l MouseArea \c clicked signal is emitted, the \c send
+signal will automatically be emitted as well.
+
+\code
+output:
+    MouseArea clicked
+    Send clicked
+\endcode
+
+\section1 C++ Additions
+
+Because QML uses Qt, a signal defined in C++ also works as a QML signal. The
+signal may be emitted in QML code or called as a method. In addition, the QML
+runtime automatically creates signal handlers for the C++ signals. For more
+signal control, the \c connect() method and the \l Connect element may connect a
+C++ to another signal or method.
+
+For complete information on how to call C++ functions in QML, read the \l {Extending QML - Signal Support Example}.
 
-    \title QML Signal and Handler Event System
 
 */
diff --git a/doc/src/declarative/qmlreusablecomponents.qdoc b/doc/src/declarative/qmlreusablecomponents.qdoc
index 78865a1..e6c3ec9 100644
--- a/doc/src/declarative/qmlreusablecomponents.qdoc
+++ b/doc/src/declarative/qmlreusablecomponents.qdoc
@@ -28,470 +28,116 @@
 /*!
 \page qmlreusablecomponents.html
 \ingroup qml-features
-\previouspage {Keyboard Focus in QML}{Keyboard Focus}
+\previouspage {QML Signal and Handler Event System}{Signal and Handler Event System}
 \nextpage {QML States}{States}
 \contentspage QML Features
 
 \title Importing Reusable Components
 
-One of the key concepts in QML is the ability to define your own QML components that suit
-the purposes of your application. The standard \l {QML Elements} provide the essential components
-for creating a QML application; beyond these, you can write your own custom components that can
-be created and reused, without the use of C++.
-
-Components are the building blocks of a QML project. When writing a QML application, whether
-large or small, it is best to separate QML code into smaller components that perform specific
-sets of operations, instead of creating mammoth QML files with large, combined functionality
-that is more difficult to manage and may contain duplicated code.
+A \e component is an instantiable QML definition, typically contained in a
+\c .qml file. For instance, a Button \e component may be defined in
+\c Button.qml. The QML runtime may instantiate this Button component to create
+Button \e objects. Alternatively, a component may be defined inside a
+\l Component element.
 
+Moreover, the Button definition may also contain other components. A Button
+component could use a Text element for its label and other components to
+implement its functions. Compounding components to form new components
+(and effectively new interfaces) is the emphasis in QML.
 
+\keyword qml-define-components
 \section1 Defining New Components
 
-A component is a reusable type with a well-defined interface, built entirely in QML.
-Any snippet of QML code can become a component, by placing the code in a file "<Name>.qml" where
-<Name> is the new component name, beginning 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, one of the simplest and most common components you can build in QML is a
-button-type component. Below, we implement this component as a \l Rectangle with a clickable
-\l MouseArea, in a file named \c Button.qml:
-
-\snippet doc/src/snippets/declarative/qml-extending-types/components/Button.qml 0
-
-Now this component can be reused by another file within the same directory. Since the file is
-named \c Button.qml, the component is referred to as \c Button:
-
-\table
-\row
-\o \snippet doc/src/snippets/declarative/qml-extending-types/components/application.qml 0
-\o \image qml-extending-types.png
-\endtable
-
-The root object in \c Button.qml defines the attributes that are available to users of the
-\c Button component. In this case, the root object is a \l Rectangle, so any properties, methods
-and signals of \l Rectangle are made available, allowing \c application.qml to
-customize the \c width, \c height, \c radius and \c color properties of \c Button objects.
-
-
-If \c Button.qml was not in the same directory, \c application.qml would need to load it as a
-\l {Modules}{module} from a specific filesystem path or \l{QDeclarativeExtensionPlugin}{plugin}.
-Also, note the letter case of the component file name is significant on some (notably UNIX)
-filesystems. It is recommended the file name case matches the case of the QML component name
-exactly - for example, \c Box.qml and not \c BoX.qml - regardless of the platform to which the
-QML component will be deployed.
-
-To write a useful component, it is generally necessary to provide it with custom attributes that store and
-communicate specific data. This is achieved by adding the following attributes to your components:
-
-\list
-\o \bold Properties that can be accessed externally to modify an object (for example, \l Item has
-   \l {Item::}{width} and \l {Item::}{height} properties) and used in \l {Property Binding}
-\o \bold Methods of JavaScript code can be invoked internally or externally (for example,
-   \l Animation has a \l {Animation::}{start()} method)
-\o \bold Signals to notify other objects when an event has occurred (for example, MouseArea has a
-   \c clicked signal)
-\endlist
-
-The following sections show how these attributes can be added to QML components.
-
-
-\section1 Adding Properties
-
-A property is a value of a QML component that can be read and modified by other objects. For
-example, a \l Rectangle component has \l {Item::}{width}, \l {Item::}{height} and \l
-{Rectangle::}{color} properties. Significantly, properties be used with \l {Property Binding}, where
-a property value is automatically updated using the value of another property.
-
-The syntax for defining a new property is:
-
-\code
-[default] property <type> <name>[: defaultValue]
-\endcode
-
-A \c property declaration can appear anywhere within a QML component definition, but it is customary
-to place it at the top. A component cannot declare more than one property with the same name. (It is
-possible to have a property name that is the same as an existing property in a type, but this is not
-recommended as the existing property becomes hidden and inaccessible.)
-
-Below is an example. The \c ImageViewer component has defined a \c string type property named
-\c currentImage, and its initial value is "default-image.png". This property is used to set the image
-displayed in the child \l Image object. Another file, \c application.qml, can create
-an \c ImageViewer object and read or modify the \c currentImage value:
-
-\table
-\row
-\o \snippet doc/src/snippets/declarative/qml-extending-types/properties/ImageViewer.qml 0
-\o \snippet doc/src/snippets/declarative/qml-extending-types/properties/application.qml 0
-\endtable
-
-It is optional for a property to have a default value. The default value is a convenient shortcut, and is
-behaviorally identical to doing it in two steps, like this:
-
-\qml
-// Use default value
-property int myProperty: 10
-
-// Longer, but behaviorally identical
-property int myProperty
-myProperty: 10
-\endqml
-
-
-\section2 Supported property types
-
-All QML properties are typed. The examples above show properties with \c int and \c string types;
-notice that the type of the property must be declared. The type is used to determine the property
-behavior, and how the property is defined in C++.
-
-A number of property types are supported by default. These are listed in the table below,
-with their default values and the corresponding C++ type:
-
-\table
-\header \o QML Type Name \o Default value \o C++ Type Name
-\row \o int \o 0 \o int
-\row \o bool \o \c false \o bool
-\row \o double \o 0.0 \o double
-\row \o real \o 0.0 \o double
-\row \o string \o "" (empty string) \o QString
-\row \o url \o "" (empty url) \o QUrl
-\row \o color \o #000000 (black) \o QColor
-\row \o date \o \c undefined \o QDateTime
-\row \o variant \o \c undefined \o QVariant
-\endtable
-
-QML object types can also be used as property types. This includes
-\l {Defining new QML elements}{custom QML types} implemented in C++. Such properties are
-defined like this:
-
-\qml
-property Item itemProperty
-property QtObject objectProperty
-property MyCustomType customProperty
-\endqml
-
-Such object-type properties default to an \c undefined value.
-
-\l{list}{List properties} are created with the \c list<Type> syntax, and default to an empty
-list:
-
-\qml
-property list<Item> listOfItems
-\endqml
-
-Note that list properties cannot be modified like ordinary JavaScript
-arrays. See the \l {list}{list type documentation} for details.
-
-For details about accessing and manipulating QML properties from C++, see \l {Using QML Bindings in C++ Applications}.
-
-
-\section2 Property change signals
-
-Adding a \c property to an item automatically adds a \e {value changed}
-signal handler to the item. To connect to this signal, use a \l {Signal Handlers}{signal handler}
-named with the \c on<Property>Changed syntax, using upper case for the first letter of the
-property name.
-
-For example, the following \c onMyNumberChanged signal handler is automatically called whenever the
-\c myNumber property changes:
-
-\snippet doc/src/snippets/declarative/qml-extending-types/properties/property-signals.qml 0
-
-
-\section2 Default properties
-
-The optional \c default attribute for a property marks it as the \e {default property}
-for a type. This allows other items to specify the default property's value
-as child elements. For example, the \l Item element's default property is its
-\l{Item::children}{children} property. This allows the children of an \l Item
-to be set like this:
-
-\qml
-Item {
-    Rectangle {}
-    Rectangle {}
-}
-\endqml
-
-If the \l{Item::children}{children} property was not the default property for
-\l Item, its value would have to be set like this instead:
-
-\qml
-Item {
-    children: [
-        Rectangle {}
-        Rectangle {}
-    ]
-}
-\endqml
-
-See the \l{declarative/ui-components/tabwidget}{TabWidget} example for a
-demonstration of using default properties.
-
-Specifying a default property overrides any existing default property (for
-example, any default property inherited from a parent item). Using the
-\c default attribute twice in the same type block is an error.
-
-
-\section2 Property aliases
-
-Property aliases are a more advanced form of property declaration.  Unlike a
-property definition, which allocates a new, unique storage space for the
-property, a property alias connects the newly declared property (called the
-aliasing property) as a direct reference 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.
-
-A property alias declaration looks a lot like an ordinary property definition:
-\code
-    [default] property alias <name>: <alias reference>
-\endcode
-
-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 compulsory 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.
-
-An alias reference takes one of the following forms:
-\code
-    <id>.<property>
-    <id>
-\endcode
-
-where <id> must refer to an object id within the same component as the type
-declaring the alias, and, optionally, <property> refers to a property on that object.
-
-For example, below is a \c Button.qml component with a \c buttonText aliased property which is
-connected to the child Text object's \c text property:
-
-\snippet doc/src/snippets/declarative/qml-extending-types/properties/alias.qml 0
-
-The following code would create a \c Button with a defined text string for the
-child \l Text object:
-
-\qml
-Button { buttonText: "This is a button" }
-\endqml
-
-Here, modifying \c buttonText directly modifies the \c textItem.text value; it does not
-change some other value that then updates \c textItem.text.
-
-In this case, the use of aliased properties is essential. If \c buttonText was not an alias,
-changing its value would not actually change the displayed text at all, as
-\l {Property Binding}{property bindings} are not bi-directional: the \c buttonText value would
-change when \c textItem.text changes, but not the other way around.
-
-Aliased properties are also useful for allowing external objects to directly modify and
-access child objects in a component. For example, here is a modified version of the \c ImageViewer
-component shown \l {Adding Properties}{earlier} on this page. The \c currentImage property has
-been changed to an alias to the child \l Image object:
-
-\table
-\row
-\o \snippet doc/src/snippets/declarative/qml-extending-types/properties/alias/ImageViewer.qml 0
-\o \snippet doc/src/snippets/declarative/qml-extending-types/properties/alias/application.qml 0
-\endtable
-
-Instead of being limited to setting the \l Image source, \c application.qml can now directly
-access and modify the child \l Image object and its properties.
-
-Obviously, exposing child objects in this manner should be done with care, as it allows external
-objects to modify them freely. However, this use of aliased properties can be quite useful in
-particular situations, such as for the \l {declarative/ui-components/tabwidget}{TabWidget}
-example, where new tab items are actually parented to a child object that displays the current tab.
-
-
-\section3 Considerations for property aliases
-
-Aliases are only activated once the component specifying them is completed.  The
-most obvious consequence of this is that the component itself cannot generally
-use the aliased property directly during creation.  For example, this will not work:
-
-\code
-    // Does NOT work
-    property alias buttonText: textItem.text
-    buttonText: "Some text" // buttonText is not yet defined when this value is set
-\endcode
-
-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 buttonText: textItem.text
-    property alias buttonText2: root.buttonText
-\endcode
-
-At the time the component is created, the \c buttonText value has not yet been assigned,
-so \c root.buttonText would refer to an undefined value. (From outside the component,
-however, aliasing properties appear as regular Qt properties and consequently can be
-used in alias references.)
-
-It is possible for an aliased property to have the same name as an existing property. For example,
-the following component has a \c color alias property, named the same as the built-in
-\l {Rectangle::color} property:
-
-\snippet doc/src/snippets/declarative/qml-extending-types/properties/alias-override.qml 0
-
-Any objects that use this component and refer to its \c color property will be
-referring to the alias rather than the ordinary \l {Rectangle::color} property. Internally,
-however, the rectangle can correctly set this property to "red" and refer to the actual defined
-property rather than the alias.
-
-
-\section1 Adding Methods
-
-A QML component can define methods of JavaScript code. These methods can be invoked
-either internally or by other objects.
-
-The syntax for defining a method is:
-
-\code
-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
-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,
-as the existing method may be hidden and become inaccessible.)
-
-Unlike \l{Adding Signals}{signals}, method parameter types do not have to be declared as they
-default to the \c variant type. The body of the method is written in JavaScript and may access
-the parameters by name.
-
-Here is an example of a component with a \c say() method that accepts a single \c text argument:
-
-\snippet doc/src/snippets/declarative/qml-extending-types/methods/app.qml 0
-
-A method can be connected to a signal so that it is automatically invoked whenever the signal
-is emitted. See \l {Connecting signals to methods and other signals} below.
-
-Also see \l {Integrating JavaScript} for more information on using JavaScript with QML.
-
-
-\section1 Adding Signals
-
-Signals provide a way to notify other objects when an event has occurred. For example, the MouseArea
-\c clicked signal notifies other objects that the mouse has been clicked within the area.
-
-The syntax for defining a new signal is:
-
-\code
-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,
-as the existing signal may be hidden and become inaccessible.)
-
-Here are three examples of signal declarations:
-
-\code
-Item {
-    signal clicked
-    signal hovered()
-    signal performAction(string action, variant actionArgument)
-}
-\endcode
-
-If the signal has no parameters, the "()" brackets are optional. If parameters are used, the
-parameter types must be declared, as for the \c string and \c variant arguments for the \c
-performAction signal above; the allowed parameter types are the same as those listed in the \l
-{Adding Properties} section on this page.
-
-Adding a signal to an item automatically adds a \l {Signal Handlers}{signal handler} as well.
-The signal hander is named \c on<SignalName>, with the first letter of the signal being upper
-cased. The above example item would now have the following signal handlers:
-
-\list
-\o onClicked
-\o onHovered
-\o onPerformAction
-\endlist
-
-To emit a signal, simply invoke it in the same way as a method. Below left, when the \l MouseArea is
-clicked, it emits the parent \c buttonClicked signal by invoking \c rect.buttonClicked(). The
-signal is received by \c application.qml through an \c onButtonClicked signal handler:
-
-\table
-\row
-\o \snippet doc/src/snippets/declarative/qml-extending-types/signals/basic.qml 0
-\o \snippet doc/src/snippets/declarative/qml-extending-types/signals/no-parameters.qml 0
-\endtable
-
-If the signal has parameters, they are accessible by parameter name in the signal handler.
-In the example below, \c buttonClicked is emitted with \c xPos and \c yPos parameters instead:
-
-\table
-\row
-\o \snippet doc/src/snippets/declarative/qml-extending-types/signals/Button.qml 0
-\o \snippet doc/src/snippets/declarative/qml-extending-types/signals/parameters.qml 0
-\endtable
-
-
-\section2 Connecting signals to methods and other signals
-
-Signal objects have a \c connect() method that can be used to a connect a signal to a method or
-another signal. When a signal is connected to a method, the method is automatically invoked
-whenever the signal is emitted. (In Qt terminology, the method is a \e slot that is connected
-to the \e signal; all methods defined in QML are created as Qt slots.) This enables a signal
-to be received by a method instead of a \l {Signal Handlers}{signal handler}.
-
-For example, the \c application.qml above could be rewritten as:
-
-\snippet doc/src/snippets/declarative/qml-extending-types/signals/connectslots.qml 0
-
-The \c myMethod() method will be called whenever the \c buttonClicked signal is received.
-
-In many cases it is sufficient to receive signals through signal handlers rather than using
-the \c connect() function; the above example does not provide any improvements over using a
-simple \c onButtonClicked handler. However, if you are \l{Dynamic Object Management in QML}{creating objects dynamically},
-or \l {Integrating JavaScript}{integrating JavaScript code}, then you will find the
-\c connect() method useful. For example, the component below creates three \c Button
-objects dynamically, and connects the \c buttonClicked signal of each object to the
-\c myMethod() function:
-
-\snippet doc/src/snippets/declarative/qml-extending-types/signals/connectdynamic.qml 0
-
-In the same way, you could connect a signal to methods defined in a dynamically
-created object, or \l {Receiving QML Signals in JavaScript}{connect a signal to a JavaScript method}.
-
-There is also a corresponding \c disconnect() method for removing connected signals. The following
-code removes the connection created in \c application.qml above:
-
-\qml
-// application.qml
-Item {
-    ...
-
-    function removeSignal() {
-        button.clicked.disconnect(item.myMethod)
-    }
-}
-\endqml
-
-
-\section3 Forwarding signals
-
-The \c connect() method can also connect a signal to other signals. This has the effect
-of "forwarding" a signal: it is automatically emitted whenever the relevant signal is emitted. For
-example, the MouseArea \c onClicked handler in \c Button.qml above could have been replaced with
-a call to \c connect():
-
-\qml
-MouseArea {
-    anchors.fill: parent
-    Component.onCompleted: clicked.connect(item.buttonClicked)
-}
-\endqml
-
-Whenever the \l MouseArea \c clicked signal is emitted, the \c rect.buttonClicked signal will
-automatically be emitted as well.
-
+Any snippet of QML code may become a component, by placing the code in a QML
+file (extension is \c .qml). A complete Button component that responds to user
+input may be in a Button.qml file.
+\snippet doc/src/snippets/declarative/reusablecomponents/Button.qml document
+
+Alternatively, a \l Component element may encapsulate a QML object to form a
+component.
+\snippet doc/src/snippets/declarative/reusablecomponents/component.qml parent begin
+\snippet doc/src/snippets/declarative/reusablecomponents/component.qml define inline component
+\snippet doc/src/snippets/declarative/reusablecomponents/component.qml parent end
+
+\keyword qml-loading-components
+\section1 Loading a Component
+
+The initialization of inline components is different from loading a component
+from a \c .qml file.
+
+\section2 Importing a Component
+
+A component defined in a \c .qml file is directly usable by declaring the name
+of the component. For example, a button defined in \c Button.qml is created by
+declaring a \c Button. The button is defined in the
+\l {qml-define-components}{Defining New Components} section.
+\snippet doc/src/snippets/declarative/reusablecomponents/application.qml document
+
+Note that the component name, \c Button, matches the QML filename, \c Button.qml.
+Also, the first character is in upper case. Matching the names allow
+components in the same directory to be in the direct import path of the
+application.
+
+For flexibility, a \c qmldir file is for dictating which additional components,
+plugins, or directories should be imported. By using a \c qmldir file,
+component names do not need to match the filenames. The \c qmldir file should,
+however, be in an imported path.
+\snippet doc/src/snippets/declarative/reusablecomponents/qmldir document
+
+\section2 Loading an Inline Component
+
+A consequence of inline components is that initialization may be deferred or
+delayed. A component may be created during a MouseArea event or by using a
+\l Loader element. The component can create an object, which is addressable in a
+similar way as an \l {qml-id-propert}{id property}. Thus, the created object may
+have its bindings set and read like a normal QML object.
+\snippet doc/src/snippets/declarative/reusablecomponents/component.qml define inline component
+\snippet doc/src/snippets/declarative/reusablecomponents/component.qml create inline component
+
+\keyword qml-component-properties
+\section1 Component Properties
+
+Initializing a component, either from a .qml file or initializing an inline
+component, have several properties to facilitate component execution.
+Specifically, there are \l{attached-properties}{attached properties} and
+\l{attached-signalhandlers}{attached signal handlers} for setting properties
+during the lifetime of a component.
+
+The \c{Component.onCompleted} attached signal handler is called when the
+component completes initialization. It is useful for executing any commands
+after component initialization. Similarly, the \c{Component.onDestruction}
+signal handler executes when the component finishes destruction.
+
+\keyword qml-top-level
+\section1 Top-Level Component
+
+Choosing the \e{top-level} or the \e{root} object of components is an important
+design aspect because the top-level object dictates which properties are
+accessible outside the component. Some elements are not visual elements and
+will not have visual properties exposed outside the component. Likewise, some
+elements add functionality that are not available to visual elements.
+
+Consider the Button component from the
+\l{qml-define-components}{Defining New Components} section; it's top-level
+object is a \l Rectangle. When imported, the Button component will possess the
+Rectangle's properties, methods, signals, and any custom properties.
+
+\snippet doc/src/snippets/declarative/reusablecomponents/Button.qml parent begin
+\snippet doc/src/snippets/declarative/reusablecomponents/Button.qml ellipses
+\snippet doc/src/snippets/declarative/reusablecomponents/Button.qml properties
+\snippet doc/src/snippets/declarative/reusablecomponents/Button.qml ellipses
+\snippet doc/src/snippets/declarative/reusablecomponents/Button.qml parent end
+
+The Button's \c text alias is accessible from outside the component as well as
+the Rectangle's visual properties and signals such as \c x, \c y, \c anchors,
+and \c states.
+
+Alternatively, we may choose a \l {Keyboard Focus in QML}{FocusScope} as our
+top-level object. The \l FocusScope element manage keyboard focus for its
+children which is beneficial for certain types of interfaces. However, since
+\c FocusScopes are not visual elements, the visual properties of its child need
+to be exposed.
+
+\snippet doc/src/snippets/declarative/reusablecomponents/focusbutton.qml document
 */
+
diff --git a/doc/src/declarative/qmlsyntax.qdoc b/doc/src/declarative/qmlsyntax.qdoc
index 908b924..fc25bce 100644
--- a/doc/src/declarative/qmlsyntax.qdoc
+++ b/doc/src/declarative/qmlsyntax.qdoc
@@ -28,10 +28,8 @@
 /*!
 \page qmlsyntax.html
 \title QML Syntax
-\ingroup QML Features
-\previouspage QML Features
-\nextpage Property Binding
-\contentspage QML Features
+\ingroup QML Reference
+\contentspage QML Reference
 
 \tableofcontents
 
@@ -67,7 +65,7 @@ types always begin with a capital letter. In the above example, there are
 two objects, a \l Rectangle, and an \l Image. Between the braces, we can specify
 information about the object, such as its properties.
 
-Properties are specified as \c {property: value}. In the above example, we
+Properties are specified as \c {propertyname: value}. In the above example, we
 can see the Image has a property named \c source, which has been assigned the
 value \c "pics/logo.png". The property and its value are separated by a colon.
 
diff --git a/doc/src/declarative/qmltexthandling.qdoc b/doc/src/declarative/qmltexthandling.qdoc
index c5a6bc9..7906193 100644
--- a/doc/src/declarative/qmltexthandling.qdoc
+++ b/doc/src/declarative/qmltexthandling.qdoc
@@ -35,8 +35,6 @@
 
 \tableofcontents
 
-\section1 Introduction
-
 \section1 Text Elements
 
 \list
@@ -52,4 +50,27 @@
 \o \l{RegExpValidator}
 \endlist
 
+\section1 Displaying Text in QML
+QML provides several elements to display text onto the screen. The \l Text
+element will display formatted text onto the screen, the \l TextEdit element
+will place a multiline line edit onto the screen, and the \l TextInput will
+place a single editable line field onto the screen.
+
+To learn more about their specific features and properties, visit their
+respective element documentation.
+
+\section1 Validating Input Text
+The \l {Validators}{validator} elements enforce the type and format of
+\l TextInput objects.
+
+\snippet doc/src/snippets/declarative/texthandling.qml int validator
+The validator elements bind to \c {TextInput}'s \c validator property.
+
+\snippet doc/src/snippets/declarative/texthandling.qml regexp validator
+The regular expression in the snippet will only allow the inputted text to be
+\c {fruit basket}.
+
+Note that QML parses JavaScript regular expressions, while Qt's
+\l {QRegExp} class' regular expressions are based on Perl regular expressions.
+
 */
diff --git a/doc/src/declarative/qmlviews.qdoc b/doc/src/declarative/qmlviews.qdoc
index 3f74214..8b2ca96 100644
--- a/doc/src/declarative/qmlviews.qdoc
+++ b/doc/src/declarative/qmlviews.qdoc
@@ -33,79 +33,82 @@
 \nextpage {Extending QML Functionalities using C++}
 \title Presenting Data with Views
 
-\section1 Introduction
-
-Qt Quick contains a set of standard items that can be used to present data in a
-number of different ways. For simple user interfaces,
-\l{Using QML Positioner and Repeater Items#Repeaters}{Repeaters} can be used
-in combination with
-\l{Using QML Positioner and Repeater Items#Positioners}{Positioners}
-to obtain pieces of data and arrange them in a user interface. However, when
-large quantities of data are involved, it is often better to use models with
-the standard views since these contain many built-in display and navigation
-features.
-
-\section1 Views
-
-Views are scrolling containers for collections of items. They are feature-rich,
-supporting many of the use cases found in typical applications, and can be
-customized to meet requirements on style and behavior.
+Views are containers for collections of items. They are feature-rich and can be
+customizable to meet style or behavior requirements.
 
+\keyword qml-view-elements
 A set of standard views are provided in the basic set of Qt Quick
 graphical elements:
 
 \list
-\o \l{#ListView}{ListView} arranges items in a horizontal or vertical list
-\o \l{#GridView}{GridView} arranges items in a grid within the available space
-\o \l{#PathView}{PathView} arranges items on a path
+\o \l{ListView} arranges items in a horizontal or vertical list
+\o \l{GridView} arranges items in a grid within the available space
+\o \l{PathView} arranges items on a path
+\o \l{WebView}{WebView} - available from the \l {QtWebKit QML Module}.
 \endlist
-
-Unlike these items, \l WebView is not a fully-featured view item, and needs
+Unlike other views, \l WebView is not a fully-featured view item, and needs
 to be combined with a \l Flickable item to create a view that performs like
 a Web browser.
 
-\section2 ListView
-
-\l ListView shows a classic list of items with horizontal or vertical placing
-of items.
-
-\beginfloatright
-\inlineimage qml-listview-snippet.png
-\endfloat
+These elements have properties and behaviors exclusive to each element. Visit
+their respective documentation for more information.
 
-The following example shows a minimal ListView displaying a sequence of
-numbers (using an \l{QML Data Models#An Integer}{integer as a model}).
-A simple delegate is used to define an items for each piece of data in the
-model.
+\section1 Models
 
-\clearfloat
-\snippet doc/src/snippets/declarative/listview/listview-snippet.qml document
+Views display \l{qml-data-models}{models} onto the screen. A model could be a simple list of \l{QML Data Models#An Integer}{integer} or a \l{qml-c++-models}{C++ model}.
 
+To assign a model to a view, bind the view's \c model property to a model.
+\snippet doc/src/snippets/declarative/listview.qml model
+\snippet doc/src/snippets/declarative/listview.qml model
 
+For more information, consult the \l {QML Data Models} article.
 
-\section2 GridView
+\keyword qml-view-delegate
+\section1 View Delegates
 
-\l GridView displays items in a grid like an file manager's icon view.
-
-\section2 PathView
-
-\l PathView displays items on a path, where the selection remains in
-the same place and the items move around it.
+Views need a \e delegate to visually represent an item in a list. A view will
+visual each item list according to the template defined by the delegate.
+Properties of the model are accessible as well as an \c index property.
+\snippet doc/src/snippets/declarative/listview.qml delegate
+\image listview-setup.png
 
 \section1 Decorating Views
 
-\section2 Headers and Footers
-
-\section2 Sections
-
-\section2 Navigation
-
-In traditional user interfaces, views can be scrolled using standard
-controls, such as scroll bars and arrow buttons. In some situations, it
-is also possible to drag the view directly by pressing and holding a
-mouse button while moving the cursor. In touch-based user interfaces,
-this dragging action is often complemented with a flicking action, where
-scrolling continues after the user has stopped touching the view.
+Views allow visual customization through \e decoration properties such as the \c header, \c footer, and \c section properties. By binding an object, usually
+another visual object, to these properties, the views are decoratable. A footer
+may include a \l Rectangle element showcasing borders or a header that displays
+a logo on top of the list.
+
+Suppose that a specific club wants to decorate its members list with its brand
+colors. A member list is in a \c model and the \c delegate will display the
+model's content.
+\snippet doc/src/snippets/declarative/listview-decorations.qml model
+\snippet doc/src/snippets/declarative/listview-decorations.qml delegate
+
+The club may decorate the members list by binding visual objects to the
+\c header and \c footer properties. The visual object may be defined inline, in another file, or in a
+\l {Component} element.
+\snippet doc/src/snippets/declarative/listview-decorations.qml decorations
+\image listview-decorations.png
+
+\section1 ListView Sections
+
+\l {ListView} contents may be grouped into \e sections, where related list items
+are labelled according to their sections. Further, the sections may be decorated
+with \l{qml-view-delegate}{delegates}.
+
+A list may contain a list indicating people's names and the team on which team
+the person belongs.
+\snippet doc/src/snippets/declarative/listview-sections.qml model
+\snippet doc/src/snippets/declarative/listview-sections.qml delegate
+
+The ListView element has the \c section
+\l{qml-attached-properties}{attached property} that can combine adjacent
+and related elements into a section. The section's \c property property is for
+selecting which list element property to use as sections. The \c criteria
+can dictate how the section names are displayed and the \c delegate is similar
+to the views' \l {qml-view-delegate}{delegate} property.
+\snippet doc/src/snippets/declarative/listview-sections.qml section
+\image listview-section.png
 
-\section1 Further Reading
 */
diff --git a/doc/src/declarative/qmlwebkit.qdoc b/doc/src/declarative/qmlwebkit.qdoc
index 0f4e86b..354e60a 100644
--- a/doc/src/declarative/qmlwebkit.qdoc
+++ b/doc/src/declarative/qmlwebkit.qdoc
@@ -26,22 +26,30 @@
 ****************************************************************************/
 
 /*!
-    \page qmlwebkit.html
+\page qmlwebkit.html
 
-    \title QtWebKit QML Module
+\title QtWebKit QML Module
 
-    Qt WebKit QML
+Qt WebKit QML
 
-    \section1 WebKit QML Elements
-    \list
-    \o \l WebView
-    \o \l FlickableWebView
-    \endlist
+\section1 WebKit QML Elements
+\list
+\o \l WebView
+\endlist
 
-    \section1 Content
+\section1 QtWebKit Module
+The QtWebKit Module has a QML element, \l{WebView} for displaying web content
+from a \c URL.
 
-    \section1 Usage Ideas
+Import the QtWebKit module before declaring a \c WebView element:
+\qml
+import QtWebKit 1.0
+\endqml
 
-    \section1 Other Suggestions
+\section1 Simple Usage
+\snippet doc/src/snippets/declarative/webview/webview.qml document
+\image webview.png
+
+\sa {Models and Views: WebView Example}{WebView Example}, {QML Web Browser}
 
 */
diff --git a/doc/src/declarative/qtprogrammers.qdoc b/doc/src/declarative/qtprogrammers.qdoc
index 97caf80..e48dc9a 100644
--- a/doc/src/declarative/qtprogrammers.qdoc
+++ b/doc/src/declarative/qtprogrammers.qdoc
@@ -30,8 +30,6 @@
 \target qtprogrammers
 \title QML for Qt Programmers
 
-\section1 Overview
-
 While QML does not require Qt knowledge to use, if you \e are already familiar with Qt,
 much of your knowledge is directly relevant to learning and using QML. Of course,
 an application with a UI defined in QML also uses Qt for all the non-UI logic.
diff --git a/doc/src/declarative/qtquick-intro.qdoc b/doc/src/declarative/qtquick-intro.qdoc
new file mode 100644
index 0000000..1bbae8f
--- /dev/null
+++ b/doc/src/declarative/qtquick-intro.qdoc
@@ -0,0 +1,119 @@
+/****************************************************************************
+**
+** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies).
+** All rights reserved.
+** Contact: Nokia Corporation (qt-info@nokia.com)
+**
+** This file is part of the documentation of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:FDL$
+** No Commercial Usage
+** This file contains pre-release code and may not be distributed.
+** You may use this file in accordance with the terms and conditions
+** contained in the Technology Preview License Agreement accompanying
+** this package.
+**
+** GNU Free Documentation License
+** Alternatively, this file may be used under the terms of the GNU Free
+** Documentation License version 1.3 as published by the Free Software
+** Foundation and appearing in the file included in the packaging of this
+** file.
+**
+** If you have questions regarding the use of this file, please contact
+** Nokia at qt-info@nokia.com.
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+/*!
+\page qml-intro.html
+\title Intro to Qt Quick
+
+Qt Quick is a collection of technologies that are designed to help developers
+create the kind of intuitive, modern, and fluid user interfaces that are
+increasingly used on mobile phones, media players, set-top boxes, and other
+portable devices. Qt Quick consists of a rich set of user interface
+\l{QML Elements}{elements}, a \l{QML Syntax}{declarative} language for
+describing user interfaces, and a language \l{QtDeclarative Module}{runtime}. A
+collection of C++ APIs is used to integrate these high level features with
+classic Qt applications. Version 2.1 of the Qt Creator integrated development
+environment (IDE) introduces tools for developing Qt Quick applications.
+
+\image qml-clocks-example.png
+
+\section1 The QML Language
+
+QML is a high level, scripted language. Its commands, more correctly
+\e elements, leverage the power and efficiency of the Qt libraries to make easy
+to use commands that perform intuitive functions. Drawing a rectangle,
+displaying an image, and application events -- all are possible with declarative
+programming.
+
+The language also allows more flexibility of these commands by using
+\l{About JavaScript}{JavaScript} to implement the high level user interface
+logic.
+
+A QML element usually has various \e properties that help define the element.
+For example, if we created an element called Circle then the radius of the
+circle would be a property. Building user interfaces by importing these elements
+is one of the great feature of QML and Qt Quick.
+\image qml-texteditor5_newfile.png
+
+\section1 QtDeclarative Module
+
+To make Qt Quick possible, Qt introduces the \l {QtDeclarative} module. The
+module creates a JavaScript runtime that QML runs under with a Qt based backend.
+Because QtDeclarative and QML are built upon Qt, they inherit many of Qt's
+technology, namely the \l{Signals and Slots}{signals and slots} mechanism and
+the \l{The Meta-Object System}{meta-object} system. Data created using C++ are
+directly accessible from QML and QML objects are also accessible from C++ code.
+
+In conjunction with the QML language, the QtDeclarative module separates the
+interface logic in QML from the application logic in C++.
+
+\section1 Creator Tools
+
+Qt Creator is a complete integrated development environment (IDE) for creating
+applications with Qt Quick and the Qt application framework.
+
+\image qmldesigner-visual-editor.png
+
+The main goal for Qt Creator is meeting the development needs of Qt Quick
+developers who are looking for simplicity, usability, productivity,
+extendibility and openness, while aiming to lower the barrier of entry for
+newcomers to Qt Quick and Qt. The key features of Qt Creator allow UI designers
+and developers to accomplish the following tasks:
+\list
+\o Get started with Qt Quick application development quickly and easily with
+examples, tutorials, and project wizards.
+\o Design application user interface with the integrated editor, Qt Quick
+Designer, or use graphics software to design the user interface and use scripts
+to export the design to Qt Quick Designer.
+\o Develop applications with the advanced code editor that provides new powerful
+features for completing code snippets, refactoring code, and viewing the element
+hierarchy of QML files.
+\o Build and deploy Qt Quick applications that target multiple desktop and
+mobile platforms, such as Microsoft Windows, Mac OS X, Linux, Symbian, and
+Maemo.
+\o Debug JavaScript functions and execute JavaScript expressions in the current
+context, and inspect QML at runtime to explore the object structure, debug
+animations, and inspect colors.
+\o Deploy applications to mobile devices and create application installation
+packages for Symbian and Maemo devices that can be published in the Ovi Store
+and other channels.
+\o Easily access information with the integrated context-sensitive Qt Help
+system.
+\endlist
+
+\image qtcreator-target-selector.png
+
+\section1 Where to Go from Here
+
+The \l {Qt Quick} page has links to various Qt Quick topics such as QML
+features, addons, and tools.
+
+The \l {QML Examples and Demos} page has a gallery of QML applications.
+*/
+
+
+
diff --git a/doc/src/declarative/scope.qdoc b/doc/src/declarative/scope.qdoc
index 3317037..9a9934a 100644
--- a/doc/src/declarative/scope.qdoc
+++ b/doc/src/declarative/scope.qdoc
@@ -24,41 +24,17 @@
 ** $QT_END_LICENSE$
 **
 ****************************************************************************/
-
-/*
-
-
-
-and requires extension to 
-fit naturally with QML.
-
-
-JavaScript has only b
-JavaScript has a very simple built in scope is very simple
-
-script, and the precede d
-
-and \l {Integrating JavaScript}{JavaScript} are executed in a scope chain 
-automatically established by QML when a component instance is constructed.  QML is a \e {dynamically scoped} 
-language.  Different object instances instantiated from the same component can exist in 
-different scope chains.
-
-\image qml-scope.png
-
-
-*/
-
 /*!
 \page qdeclarativescope.html
 \title QML Scope
 
 \tableofcontents
 
-QML property bindings, inline functions and imported JavaScript files all 
-run in a JavaScript scope.  Scope controls which variables an expression can 
+QML property bindings, inline functions and imported JavaScript files all
+run in a JavaScript scope.  Scope controls which variables an expression can
 access, and which variable takes precedence when two or more names conflict.
 
-As JavaScript's built-in scope mechanism is very simple, QML enhances it to fit 
+As JavaScript's built-in scope mechanism is very simple, QML enhances it to fit
 more naturally with the QML language extensions.
 
 \section1 JavaScript Scope
@@ -67,8 +43,8 @@ QML's scope extensions do not interfere with JavaScript's natural scoping.
 JavaScript programmers can reuse their existing knowledge when programming
 functions, property bindings or imported JavaScript files in QML.
 
-In the following example, the \c {addConstant()} method will add 13 to the 
-parameter passed just as the programmer would expect irrespective of the 
+In the following example, the \c {addConstant()} method will add 13 to the
+parameter passed just as the programmer would expect irrespective of the
 value of the QML object's \c a and \c b properties.
 
 \code
@@ -83,8 +59,8 @@ QtObject {
 }
 \endcode
 
-That QML respects JavaScript's normal scoping rules even applies in bindings.  
-This totally evil, abomination of a binding will assign 12 to the QML object's 
+That QML respects JavaScript's normal scoping rules even applies in bindings.
+This totally evil, abomination of a binding will assign 12 to the QML object's
 \c a property.
 
 \code
@@ -101,13 +77,13 @@ with local variables declared in another.
 
 \section1 Element Names and Imported JavaScript Files
 
-\l {QML Document}s include import statements that define the element names 
-and JavaScript files visible to the document.  In addition to their use in the 
-QML declaration itself, element names are used by JavaScript code when accessing 
-\l {Attached Properties} and enumeration values.  
+\l {QML Document}s include import statements that define the element names
+and JavaScript files visible to the document.  In addition to their use in the
+QML declaration itself, element names are used by JavaScript code when accessing
+\l {Attached Properties} and enumeration values.
 
-The effect of an import applies to every property binding, and JavaScript 
-function in the QML document, even those in nested inline components.  The 
+The effect of an import applies to every property binding, and JavaScript
+function in the QML document, even those in nested inline components.  The
 following example shows a simple QML file that accesses some enumeration
 values and calls an imported JavaScript function.
 
@@ -130,10 +106,10 @@ ListView {
 
 \section1 Binding Scope Object
 
-Property bindings are the most common use of JavaScript in QML.  Property 
+Property bindings are the most common use of JavaScript in QML.  Property
 bindings associate the result of a JavaScript expression with a property of an
-object.  The object to which the bound property belongs is known as the binding's 
-scope object.  In this QML simple declaration the \l Item object is the 
+object.  The object to which the bound property belongs is known as the binding's
+scope object.  In this QML simple declaration the \l Item object is the
 binding's scope object.
 
 \code
@@ -144,21 +120,21 @@ Item {
 
 Bindings have access to the scope object's properties without qualification.
 In the previous example, the binding accesses the \l Item's \c parent property
-directly, without needing any form of object prefix.  QML introduces a more 
-structured, object-oriented approach to JavaScript, and consequently does not 
+directly, without needing any form of object prefix.  QML introduces a more
+structured, object-oriented approach to JavaScript, and consequently does not
 require the use of the JavaScript \c this property.
 
 Care must be used when accessing \l {Attached Properties} from bindings due
 to their interaction with the scope object.  Conceptually attached properties
 exist on \e all objects, even if they only have an effect on a subset of those.
-Consequently unqualified attached property reads will always resolve to an 
-attached property on the scope object, which is not always what the programmer 
+Consequently unqualified attached property reads will always resolve to an
+attached property on the scope object, which is not always what the programmer
 intended.
 
-For example, the \l PathView element attaches interpolated value properties to 
+For example, the \l PathView element attaches interpolated value properties to
 its delegates depending on their position in the path.  As PathView only
-meaningfully attaches these properties to the root element in the delegate, any 
-sub-element that accesses them must explicitly qualify the root object, as shown 
+meaningfully attaches these properties to the root element in the delegate, any
+sub-element that accesses them must explicitly qualify the root object, as shown
 below.
 
 \code
@@ -181,7 +157,7 @@ the unset \c {PathView.scale} attached property on itself.
 
 Each QML component in a QML document defines a logical scope.  Each document
 has at least one root component, but can also have other inline sub-components.
-The component scope is the union of the object ids within the component and the 
+The component scope is the union of the object ids within the component and the
 component's root element's properties.
 
 \code
@@ -195,7 +171,7 @@ Item {
         anchors.top: parent.top
     }
 
-    Text { 
+    Text {
         text: titleElement.text
         font.pixelSize: 18
         anchors.bottom: parent.bottom
@@ -203,7 +179,7 @@ Item {
 }
 \endcode
 
-The example above shows a simple QML component that displays a rich text title 
+The example above shows a simple QML component that displays a rich text title
 string at the top, and a smaller copy of the same text at the bottom.  The first
 \c Text element directly accesses the component's \c title property when
 forming the text to display.  That the root element's properties are directly
@@ -211,18 +187,18 @@ accessible makes it trivial to distribute data throughout the component.
 
 The second \c Text element uses an id to access the first's text directly.  IDs
 are specified explicitly by the QML programmer so they always take precedence
-over other property names (except for those in the \l {JavaScript Scope}).  For 
-example, in the unlikely event that the binding's \l {Binding Scope Object}{scope 
-object}  had a \c titleElement property in the previous example, the \c titleElement 
+over other property names (except for those in the \l {JavaScript Scope}).  For
+example, in the unlikely event that the binding's \l {Binding Scope Object}{scope
+object}  had a \c titleElement property in the previous example, the \c titleElement
 id would still take precedence.
 
 \section1 Component Instance Hierarchy
 
-In QML, component instances connect their component scopes together to form a 
-scope hierarchy.  Component instances can directly access the component scopes of 
+In QML, component instances connect their component scopes together to form a
+scope hierarchy.  Component instances can directly access the component scopes of
 their ancestors.
 
-The easiest way to demonstrate this is with inline sub-components whose component 
+The easiest way to demonstrate this is with inline sub-components whose component
 scopes are implicitly scoped as children of the outer component.
 
 \code
@@ -239,16 +215,16 @@ Item {
 }
 \endcode
 
-The component instance hierarchy allows instances of the delegate component 
+The component instance hierarchy allows instances of the delegate component
 to access the \c defaultColor property of the \c Item element.  Of course,
-had the delegate component had a property called \c defaultColor that would 
-have taken precedence.  
+had the delegate component had a property called \c defaultColor that would
+have taken precedence.
 
 The component instance scope hierarchy extends to out-of-line components, too.
-In the following example, the \c TitlePage.qml component creates two 
-\c TitleText instances.  Even though the \c TitleText element is in a separate 
-file, it still has access to the \c title property when it is used from within 
-the \c TitlePage.  QML is a dynamically scoped language - depending on where it 
+In the following example, the \c TitlePage.qml component creates two
+\c TitleText instances.  Even though the \c TitleText element is in a separate
+file, it still has access to the \c title property when it is used from within
+the \c TitlePage.  QML is a dynamically scoped language - depending on where it
 is used, the \c title property may resolve differently.
 
 \code
@@ -256,13 +232,13 @@ is used, the \c title property may resolve differently.
 import QtQuick 1.0
 Item {
     property string title
-    
-    TitleText { 
+
+    TitleText {
         size: 22
         anchors.top: parent.top
     }
 
-    TitleText { 
+    TitleText {
         size: 18
         anchors.bottom: parent.bottom
     }
@@ -277,10 +253,10 @@ Text {
 }
 \endcode
 
-Dynamic scoping is very powerful, but it must be used cautiously to prevent 
+Dynamic scoping is very powerful, but it must be used cautiously to prevent
 the behavior of QML code from becoming difficult to predict.  In general it
-should only be used in cases where the two components are already tightly 
-coupled in another way.  When building reusable components, it is preferable 
+should only be used in cases where the two components are already tightly
+coupled in another way.  When building reusable components, it is preferable
 to use property interfaces, like this:
 
 \code
@@ -289,14 +265,14 @@ import QtQuick 1.0
 Item {
     id: root
     property string title
-    
-    TitleText { 
+
+    TitleText {
         title: root.title
         size: 22
         anchors.top: parent.top
     }
 
-    TitleText { 
+    TitleText {
         title: root.title
         size: 18
         anchors.bottom: parent.bottom
@@ -322,7 +298,7 @@ QML specific tasks a little easier.  These extensions are described in the
 \l {QML Global Object} documentation.
 
 QML disallows element, id and property names that conflict with the properties
-on the global object to prevent any confusion.  Programmers can be confident 
+on the global object to prevent any confusion.  Programmers can be confident
 that \c Math.min(10, 9) will always work as expected!
 
 */
diff --git a/doc/src/howtos/qmlbestpractices/qmlbestpractices-coding.qdoc b/doc/src/howtos/qmlbestpractices/qmlbestpractices-coding.qdoc
index 6c83c80..e33ee13 100644
--- a/doc/src/howtos/qmlbestpractices/qmlbestpractices-coding.qdoc
+++ b/doc/src/howtos/qmlbestpractices/qmlbestpractices-coding.qdoc
@@ -26,69 +26,78 @@
 ****************************************************************************/
 
 /*!
-    \page qml-best-practices-coding.html
-    \ingroup qml-best-practices
-    \contentspage QML Best Practices Guides
-    \previouspage QML Best Practices Guides
-    \startpage QML Best Practices Guides
-    \title QML Best Practices: Coding Conventions
+\page qml-best-practices-coding.html
+\ingroup qml-best-practices
+\contentspage QML Best Practices Guides
+\previouspage QML Best Practices Guides
+\startpage QML Best Practices Guides
+\title QML Best Practices: Coding Conventions
 
-    \brief QML Coding Conventions and Importing Files
+\brief QML Coding Conventions and Importing Files
 
-    There are many different ways to code using QML. These are a set of
-    guidelines to help your code look better and consistent.
+There are many different ways to code using QML. These are a set of
+guidelines to help your code look better and consistent.
 
-    \section1 Coding Conventions
+\section1 Coding Conventions
 
-    The official QML Coding Conventions may be found at
-    \l {QML Coding Conventions}. This is the recommended convention that will be
-    used throughout the QML documentation.
+The official QML Coding Conventions may be found at
+\l {QML Coding Conventions}. This is the recommended convention that will be
+used throughout the QML documentation.
 
-    In addition, Qt's official code style may be found at the \l {Qt Coding Style}.
+In addition, Qt's official code style may be found at the \l {Qt Coding Style}.
 
-    \section1 Importing Files into QML
+\section1 Importing Files into QML
 
-    To import items such as directories, use the "import" keyword, similar to
-    the way the \c {import QtQuick 1.0} statement is used.
+To import items such as directories, use the "import" keyword, similar to
+the way the \c {import QtQuick 1.0} statement is used.
 
-    \qml
-    import QtQuick 1.0
-    import QtWebKit 1.0
-    import "subdirectory"
-    import "script.js"
-    \endqml
+\qml
+import QtQuick 1.0
+import QtWebKit 1.0
+import "subdirectory"
+import "script.js"
+\endqml
 
-    To facilitate the importation of QML components, it is best to begin the QML
-    file with an uppercase character. This way, the user can simply declare the
-    component using the file name as the component name. For example, if a QML
-    component is in a file named \c Button.qml, then the user may import the
-    component by declaring a \c {Button {}}. Note that this method only works if
-    the QML files are in the same directory.
+To facilitate the importation of QML components, it is best to begin the QML
+file with an uppercase character. This way, the user can simply declare the
+component using the file name as the component name. For example, if a QML
+component is in a file named \c Button.qml, then the user may import the
+component by declaring a \c {Button {}}. Note that this method only works if
+the QML files are in the same directory.
 
-    \qml
-    import QtQuick 1.0
+It is also possible to import QML files which have file names that begin in
+lower case or files in a different directory by using a \c qmldir file.
 
-    Rectangle {
-        width: 50; height: 50
+A \c qmldir file tells your QML application which QML components, plugins,
+or directories to import. The \c qmldir file must reside in an imported
+directory. By using the \c qmldir file, users may import any QML file and assign any
+valid QML component name to the component.
 
-        Button {}   //Button is defined in Button.qml in the same directory
-    }
-    \endqml
+For more information, read the section on
+\l{qml-loading-components}{Loading a Component}.
 
-    It is also possible to import QML files which have file names that begin in
-    lower case or files in a different directory by using a \c qmldir file.
+\section1 Commenting Code
 
-    A \c qmldir file tells your QML application which QML components, plugins,
-    or directories to import. The \c qmldir file must reside in an imported
-    directory.
+Commenting code allows others to read the source code better. As well, comments
+allow the programmer to think about his or her code; a confusing comment may
+mean the code is confusing.
 
-    \code
-    //A very simple qmldir file
+Similar to JavaScript or C++, there are two ways of commenting QML code:
+\list
+\o Single line comments start with \c{//} and finish at the end of the line
+\o Multiline comments start with \c{/*} and finish with *\/
+\endlist
 
-    Button ./custom.qml         //a QML component called Button in the file custom.qml
-    plugin FilePlugin ./plugins //a plugin called FileDialog in the plugins directory
-    \endcode
+\section1 Group Properties
+
+Many QML properties are \l{attached-properties}{attached} or
+\l {qml-grouped-properties}{group} properties. For convenience, you may treat
+them as another element when dealing with multiple properties belonging to the
+same group.
+
+\snippet doc/src/snippets/declarative/bestpractices/group.qml not grouped
+Treating groups of properties as a block can ease confusion and help relate the
+properties with other properties.
+\snippet doc/src/snippets/declarative/bestpractices/group.qml grouped
 
-    By using the \c qmldir file, users may import any QML file and assign any
-    valid QML component name to the component.
 */
diff --git a/doc/src/images/listview-decorations.png b/doc/src/images/listview-decorations.png
new file mode 100644
index 0000000..445c648
--- /dev/null
+++ b/doc/src/images/listview-decorations.png
diff --git a/doc/src/images/listview-section.png b/doc/src/images/listview-section.png
new file mode 100644
index 0000000..a3664fc
--- /dev/null
+++ b/doc/src/images/listview-section.png
diff --git a/doc/src/images/listview-setup.png b/doc/src/images/listview-setup.png
new file mode 100644
index 0000000..5293d05
--- /dev/null
+++ b/doc/src/images/listview-setup.png
diff --git a/doc/src/images/qml-dial.png b/doc/src/images/qml-dial.png
deleted file mode 100644
index da5c031..0000000
--- a/doc/src/images/qml-dial.png
+++ /dev/null
diff --git a/doc/src/images/qml-intro-anchors1.png b/doc/src/images/qml-intro-anchors1.png
deleted file mode 100644
index fdb301e..0000000
--- a/doc/src/images/qml-intro-anchors1.png
+++ /dev/null
diff --git a/doc/src/images/qml-intro-anchors2.png b/doc/src/images/qml-intro-anchors2.png
deleted file mode 100644
index 84f43bd..0000000
--- a/doc/src/images/qml-intro-anchors2.png
+++ /dev/null
diff --git a/doc/src/images/qml-intro-anchors3.png b/doc/src/images/qml-intro-anchors3.png
deleted file mode 100644
index 21ae97b..0000000
--- a/doc/src/images/qml-intro-anchors3.png
+++ /dev/null
diff --git a/doc/src/images/qml-intro-helloa.png b/doc/src/images/qml-intro-helloa.png
deleted file mode 100644
index 00b34b0..0000000
--- a/doc/src/images/qml-intro-helloa.png
+++ /dev/null
diff --git a/doc/src/images/qml-listview-snippet.png b/doc/src/images/qml-listview-snippet.png
deleted file mode 100644
index 0ee0ffc..0000000
--- a/doc/src/images/qml-listview-snippet.png
+++ /dev/null
diff --git a/doc/src/images/qmldesigner-visual-editor.png b/doc/src/images/qmldesigner-visual-editor.png
new file mode 100644
index 0000000..9cd4b8b
--- /dev/null
+++ b/doc/src/images/qmldesigner-visual-editor.png
diff --git a/doc/src/images/qtcreator-target-selector.png b/doc/src/images/qtcreator-target-selector.png
new file mode 100644
index 0000000..1f26138
--- /dev/null
+++ b/doc/src/images/qtcreator-target-selector.png
diff --git a/doc/src/overviews.qdoc b/doc/src/overviews.qdoc
index 2e49a7f..73900c4 100644
--- a/doc/src/overviews.qdoc
+++ b/doc/src/overviews.qdoc
@@ -164,32 +164,30 @@
 
     \brief Features of the QML Language
 
-    These are overviews of the many features of the QML language.
-
-    \list
-    \o \l{QML Syntax}
-    \o \l{Property Binding}
-    \o \l{QML Basic Types}{Data Types}
-    \o \l{QML Basic Elements}{Basic Elements}
-    \o \l{Using QML Positioner and Repeater Items}{Component Layouts}
-    \o \l{Anchor-based Layout in QML}{Layouts using Anchors}
-    \o \l{Mouse Events}
-    \o \l{QML Text Handling and Validators}{Text Handling and Validators}
-    \o \l{Keyboard Focus in QML}{Keyboard Focus}
-    \o \l{Importing Reusable Components}
-    \o \l{QML States}{States}
-    \o \l{QML Animation and Transitions}{Animation and Transitions}
-    \o \l{QML Data Models}{Structuring Data with Models}
-    \o \l{Presenting Data with Views}
-    \o \l{Extending QML Functionalities using C++}
-    \o \l{Using QML Bindings in C++ Applications}
-    \o \l{Integrating QML Code with Existing Qt UI Code}
-    \o \l{QML Signal and Handler Event System}{Signal and Handler Event System}
-    \o \l{Dynamic Object Management in QML}{Dynamic Object Management}
-    \o \l{Network Transparency}{Loading Resources in QML}
-    \o \l{QML Internationalization}{Internationalization}
-    \o \l{QML Graphical Effects}{Graphical Effects}
-    \endlist
+These are overviews of the many features of the QML language and \l{Qt Quick}.
+
+\list
+\o \l{QML Basic Elements}{Basic Elements}
+\o \l{QML Basic Types}{Data Types}
+\o \l{Property Binding}
+\o \l{Using QML Positioner and Repeater Items}{Component Layouts}
+\o \l{Anchor-based Layout in QML}{Layouts using Anchors}
+\o \l{QML Mouse Events}{Mouse Events}
+\o \l{QML Text Handling and Validators}{Text Handling and Validators}
+\o \l{Keyboard Focus in QML}{Keyboard Focus}
+\o \l{QML Signal and Handler Event System}{Signal and Handler Event System}
+\o \l{Importing Reusable Components}
+\o \l{QML States}{States}
+\o \l{QML Animation and Transitions}{Animation and Transitions}
+\o \l{QML Data Models}{Structuring Data with Models}
+\o \l{Presenting Data with Views}
+\o \l{Extending QML Functionalities using C++}
+\o \l{Using QML Bindings in C++ Applications}
+\o \l{Integrating QML Code with Existing Qt UI Code}
+\o \l{Dynamic Object Management in QML}{Dynamic Object Management}
+\o \l{Network Transparency}{Loading Resources in QML}
+\o \l{QML Internationalization}{Internationalization}
+\endlist
 */
 /*!
     \group qml-architecture
diff --git a/doc/src/snippets/declarative/animation-easing.qml b/doc/src/snippets/declarative/animation-easing.qml
deleted file mode 100644
index 64ba44c..0000000
--- a/doc/src/snippets/declarative/animation-easing.qml
+++ /dev/null
@@ -1,51 +0,0 @@
-/****************************************************************************
-**
-** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies).
-** All rights reserved.
-** Contact: Nokia Corporation (qt-info@nokia.com)
-**
-** This file is part of the documentation of the Qt Toolkit.
-**
-** $QT_BEGIN_LICENSE:BSD$
-** You may use this file under the terms of the BSD license as follows:
-**
-** "Redistribution and use in source and binary forms, with or without
-** modification, are permitted provided that the following conditions are
-** met:
-**   * Redistributions of source code must retain the above copyright
-**     notice, this list of conditions and the following disclaimer.
-**   * Redistributions in binary form must reproduce the above copyright
-**     notice, this list of conditions and the following disclaimer in
-**     the documentation and/or other materials provided with the
-**     distribution.
-**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
-**     the names of its contributors may be used to endorse or promote
-**     products derived from this software without specific prior written
-**     permission.
-**
-** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
-** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
-** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
-** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
-** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
-** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
-** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
-** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
-** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
-** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
-** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
-** $QT_END_LICENSE$
-**
-****************************************************************************/
-//![0]
-import QtQuick 1.0
-
-Rectangle {
-    width: 100; height: 100
-    color: "red"
-    
-    PropertyAnimation on x { to: 50; duration: 1000; easing.type: Easing.OutBounce }
-    PropertyAnimation on y { to: 50; duration: 1000; easing.type: Easing.OutBounce }
-}
-//![0]
-
diff --git a/doc/src/snippets/declarative/animation-elements.qml b/doc/src/snippets/declarative/animation-elements.qml
deleted file mode 100644
index d9bfc28..0000000
--- a/doc/src/snippets/declarative/animation-elements.qml
+++ /dev/null
@@ -1,66 +0,0 @@
-/****************************************************************************
-**
-** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies).
-** All rights reserved.
-** Contact: Nokia Corporation (qt-info@nokia.com)
-**
-** This file is part of the documentation of the Qt Toolkit.
-**
-** $QT_BEGIN_LICENSE:BSD$
-** You may use this file under the terms of the BSD license as follows:
-**
-** "Redistribution and use in source and binary forms, with or without
-** modification, are permitted provided that the following conditions are
-** met:
-**   * Redistributions of source code must retain the above copyright
-**     notice, this list of conditions and the following disclaimer.
-**   * Redistributions in binary form must reproduce the above copyright
-**     notice, this list of conditions and the following disclaimer in
-**     the documentation and/or other materials provided with the
-**     distribution.
-**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
-**     the names of its contributors may be used to endorse or promote
-**     products derived from this software without specific prior written
-**     permission.
-**
-** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
-** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
-** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
-** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
-** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
-** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
-** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
-** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
-** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
-** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
-** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
-** $QT_END_LICENSE$
-**
-****************************************************************************/
-//![0]
-import QtQuick 1.0
-
-Row {
-
-//![color]
-Rectangle {
-    width: 100; height: 100
-
-    ColorAnimation on color { from: "red"; to: "yellow"; duration: 1000 }
-}
-//![color]
-
-//![rotation]
-Item {
-    width: 300; height: 300
-    
-    Rectangle {
-        width: 100; height: 100; anchors.centerIn: parent
-        color: "red"
-        
-        RotationAnimation on rotation { to: 90; direction: RotationAnimation.Clockwise }
-    }
-}
-//![rotation]
-
-}
diff --git a/doc/src/snippets/declarative/animation-groups.qml b/doc/src/snippets/declarative/animation-groups.qml
deleted file mode 100644
index f29ea48..0000000
--- a/doc/src/snippets/declarative/animation-groups.qml
+++ /dev/null
@@ -1,104 +0,0 @@
-/****************************************************************************
-**
-** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies).
-** All rights reserved.
-** Contact: Nokia Corporation (qt-info@nokia.com)
-**
-** This file is part of the documentation of the Qt Toolkit.
-**
-** $QT_BEGIN_LICENSE:BSD$
-** You may use this file under the terms of the BSD license as follows:
-**
-** "Redistribution and use in source and binary forms, with or without
-** modification, are permitted provided that the following conditions are
-** met:
-**   * Redistributions of source code must retain the above copyright
-**     notice, this list of conditions and the following disclaimer.
-**   * Redistributions in binary form must reproduce the above copyright
-**     notice, this list of conditions and the following disclaimer in
-**     the documentation and/or other materials provided with the
-**     distribution.
-**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
-**     the names of its contributors may be used to endorse or promote
-**     products derived from this software without specific prior written
-**     permission.
-**
-** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
-** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
-** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
-** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
-** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
-** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
-** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
-** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
-** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
-** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
-** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
-** $QT_END_LICENSE$
-**
-****************************************************************************/
-import QtQuick 1.0
-
-Row {
-
-//![0]
-Rectangle {
-    id: rect
-    width: 120; height: 200
-
-    Image {
-        id: img
-        source: "pics/qt.png"
-        anchors.horizontalCenter: parent.horizontalCenter
-        y: 0
-
-        SequentialAnimation on y {
-            loops: Animation.Infinite
-            NumberAnimation { to: rect.height - img.height; easing.type: Easing.OutBounce; duration: 2000 }
-            PauseAnimation { duration: 1000 }
-            NumberAnimation { to: 0; easing.type: Easing.OutQuad; duration: 1000 }
-        }
-    }
-}
-//![0]
-
-//![1]
-Rectangle {
-    id: redRect
-    width: 100; height: 100
-    color: "red"
-
-    MouseArea { id: mouseArea; anchors.fill: parent }
-
-    states: State {
-        name: "pressed"; when: mouseArea.pressed
-        PropertyChanges { target: redRect; color: "blue"; y: mouseArea.mouseY; width: mouseArea.mouseX }
-    }
-
-    transitions: Transition {
-
-        SequentialAnimation {
-            ColorAnimation { duration: 200 }
-            PauseAnimation { duration: 100 }
-
-            ParallelAnimation {
-                NumberAnimation {
-                    duration: 500
-                    easing.type: Easing.OutBounce
-                    targets: redRect
-                    properties: "y"
-                }
-
-                NumberAnimation {
-                    duration: 800
-                    easing.type: Easing.InOutQuad
-                    targets: redRect
-                    properties: "width"
-                }
-            }
-        }
-    }
-}
-//![1]
-
-}
diff --git a/doc/src/snippets/declarative/animation-propertyvaluesource.qml b/doc/src/snippets/declarative/animation-propertyvaluesource.qml
deleted file mode 100644
index 6f93967..0000000
--- a/doc/src/snippets/declarative/animation-propertyvaluesource.qml
+++ /dev/null
@@ -1,51 +0,0 @@
-/****************************************************************************
-**
-** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies).
-** All rights reserved.
-** Contact: Nokia Corporation (qt-info@nokia.com)
-**
-** This file is part of the documentation of the Qt Toolkit.
-**
-** $QT_BEGIN_LICENSE:BSD$
-** You may use this file under the terms of the BSD license as follows:
-**
-** "Redistribution and use in source and binary forms, with or without
-** modification, are permitted provided that the following conditions are
-** met:
-**   * Redistributions of source code must retain the above copyright
-**     notice, this list of conditions and the following disclaimer.
-**   * Redistributions in binary form must reproduce the above copyright
-**     notice, this list of conditions and the following disclaimer in
-**     the documentation and/or other materials provided with the
-**     distribution.
-**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
-**     the names of its contributors may be used to endorse or promote
-**     products derived from this software without specific prior written
-**     permission.
-**
-** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
-** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
-** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
-** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
-** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
-** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
-** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
-** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
-** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
-** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
-** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
-** $QT_END_LICENSE$
-**
-****************************************************************************/
-//![0]
-import QtQuick 1.0
-
-Rectangle {
-    width: 100; height: 100
-    color: "red"
-    
-    PropertyAnimation on x { to: 50; duration: 1000; loops: Animation.Infinite }
-    PropertyAnimation on y { to: 50; duration: 1000; loops: Animation.Infinite }
-}
-//![0]
-
diff --git a/doc/src/snippets/declarative/animation.qml b/doc/src/snippets/declarative/animation.qml
new file mode 100644
index 0000000..739d009
--- /dev/null
+++ b/doc/src/snippets/declarative/animation.qml
@@ -0,0 +1,227 @@
+/****************************************************************************
+**
+** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies).
+** All rights reserved.
+** Contact: Nokia Corporation (qt-info@nokia.com)
+**
+** This file is part of the documentation of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+**     the names of its contributors may be used to endorse or promote
+**     products derived from this software without specific prior written
+**     permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+//! [document]
+import QtQuick 1.0
+
+
+//! [parent begin]
+Rectangle {
+//! [parent begin]
+    width: 200; height: 600
+    id: screen
+
+Column {
+    spacing: 12
+//! [direct property change]
+Rectangle {
+    id: blob
+    width: 75; height: 75
+    color: "blue"
+
+    MouseArea {
+        anchors.fill: parent
+        onClicked: blob.color = "green"
+    }
+}
+//! [direct property change]
+
+//! [property animation]
+Rectangle {
+    id: flashingblob
+    width: 75; height: 75
+    color: "blue"
+    opacity: 1.0
+
+    MouseArea {
+        anchors.fill: parent
+        onClicked: {
+            animateColor.start()
+            animateOpacity.start()
+        }
+    }
+
+    PropertyAnimation {id: animateColor; target: flashingblob; properties: "color"; to: "green"; duration: 100}
+
+    NumberAnimation {
+        id: animateOpacity
+        target: flashingblob
+        properties: "opacity"
+        from: 0.99
+        to: 1.0
+        loops: Animation.Infinite
+        easing {type: Easing.OutBack; overshoot: 500}
+   }
+}
+//! [property animation]
+
+//! [transition animation]
+Rectangle {
+    width: 75; height: 75
+    id: button
+    state: "RELEASED"
+
+    MouseArea {
+        anchors.fill: parent
+        onPressed: button.state = "PRESSED"
+        onReleased: button.state = "RELEASED"
+    }
+
+    states: [
+        State {
+            name: "PRESSED"
+            PropertyChanges { target: button; color: "lightblue"}
+        },
+        State {
+            name: "RELEASED"
+            PropertyChanges { target: button; color: "lightsteelblue"}
+        }
+    ]
+
+    transitions: [
+        Transition {
+            from: "PRESSED"
+            to: "RELEASED"
+            ColorAnimation { target: button; duration: 100}
+        },
+        Transition {
+            from: "RELEASED"
+            to: "PRESSED"
+            ColorAnimation { target: button; duration: 100}
+        }
+    ]
+}
+//! [transition animation]
+
+Rectangle {
+    width: 75; height: 75
+    id: wildcard
+    color: "green"
+//! [wildcard animation]
+    transitions:
+        Transition {
+            to: "*"
+            ColorAnimation { target: button; duration: 100}
+        }
+//! [wildcard animation]
+
+    MouseArea {
+        anchors.fill: parent
+        onPressed: {
+            ball.x = 10
+            ball.color = "red"
+        }
+        onReleased: {
+            ball.x = screen.width / 2
+            ball.color = "salmon"
+        }
+    }
+}
+
+//! [behavior animation]
+Rectangle {
+    width: 75; height: 75; radius: width
+    id: ball
+    color: "salmon"
+
+    Behavior on x {
+        NumberAnimation {
+            id: bouncebehavior
+            easing {
+                type: Easing.OutElastic
+                amplitude: 1.0
+                period: 0.5
+            }
+        }
+    }
+    Behavior on y {
+        animation: bouncebehavior
+    }
+    Behavior {
+        ColorAnimation { target: ball; duration: 100 }
+    }
+}
+//! [behavior animation]
+
+//! [sequential animation]
+Rectangle {
+    id: banner
+    width: 150; height: 100; border.color: "black"
+
+    Column {
+        anchors.centerIn: parent
+        Text {
+            id: code
+            text: "Code less."
+            opacity: 0.01
+        }
+        Text {
+            id: create
+            text: "Create more."
+            opacity: 0.01
+        }
+        Text {
+            id: deploy
+            text: "Deploy everywhere."
+            opacity: 0.01
+        }
+    }
+
+    MouseArea {
+        anchors.fill: parent
+        onPressed: playbanner.start()
+    }
+
+    SequentialAnimation {
+        id: playbanner
+        running: false
+        NumberAnimation { target: code; property: "opacity"; to: 1.0; duration: 200}
+        NumberAnimation { target: create; property: "opacity"; to: 1.0; duration: 200}
+        NumberAnimation { target: deploy; property: "opacity"; to: 1.0; duration: 200}
+    }
+}
+//! [sequential animation]
+
+}//end of col
+//! [parent end]
+}
+//! [parent end]
+
+//! [document]
+
diff --git a/doc/src/snippets/declarative/animation-signalhandler.qml b/doc/src/snippets/declarative/bestpractices/group.qml
index 416417f..07243dc 100644
--- a/doc/src/snippets/declarative/animation-signalhandler.qml
+++ b/doc/src/snippets/declarative/bestpractices/group.qml
@@ -13,15 +13,15 @@
 ** modification, are permitted provided that the following conditions are
 ** met:
 **   * Redistributions of source code must retain the above copyright
-**     notice, this list of conditions and the following disclaimer.
+** notice, this list of conditions and the following disclaimer.
 **   * Redistributions in binary form must reproduce the above copyright
-**     notice, this list of conditions and the following disclaimer in
-**     the documentation and/or other materials provided with the
-**     distribution.
+** notice, this list of conditions and the following disclaimer in
+** the documentation and/or other materials provided with the
+** distribution.
 **   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
-**     the names of its contributors may be used to endorse or promote
-**     products derived from this software without specific prior written
-**     permission.
+** the names of its contributors may be used to endorse or promote
+** products derived from this software without specific prior written
+** permission.
 **
 ** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
 ** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
@@ -37,19 +37,39 @@
 ** $QT_END_LICENSE$
 **
 ****************************************************************************/
-//![0]
+
+//! [document]
 import QtQuick 1.0
 
+//! [parent begin]
 Rectangle {
-    id: rect
-    width: 100; height: 100
-    color: "red"
+//! [parent begin]
+    width: 175; height: 175; color: "white"
 
-    MouseArea {
-        anchors.fill: parent
-        onClicked: PropertyAnimation { target: rect; properties: "x,y"; to: 50; duration: 1000 }
-    }
+Rectangle{
+width: 170; height: 170
+//! [not grouped]
+border.width: 1
+border.color: "red"
+anchors.bottom: parent.bottom
+anchors.left: parent.left
+//! [not grouped]
 }
+Rectangle {
+    width: 100; height: 100
 
-//![0]
-
+//! [grouped]
+border {
+    width: 1;
+    color: "red"
+}
+anchors {
+    bottom: parent.bottom;
+    left: parent.left
+}
+//! [grouped]
+}
+//! [parent end]
+}
+//! [parent end]
+//! [document]
diff --git a/doc/src/snippets/declarative/animation-behavioral.qml b/doc/src/snippets/declarative/events.qml
index 93cf2fa..52fc2bc 100644
--- a/doc/src/snippets/declarative/animation-behavioral.qml
+++ b/doc/src/snippets/declarative/events.qml
@@ -37,25 +37,105 @@
 ** $QT_END_LICENSE$
 **
 ****************************************************************************/
-//![0]
+//![document]
 import QtQuick 1.0
 
-Item {
-    width: 100; height: 100
+//![parent begin]
+Rectangle {
+//![parent begin]
+
+    id: screen
+    width: 400; height: 500
+
+//! [signal declaration]
+    signal trigger
+    signal send (string notice)
+    signal perform (string task, variant object)
+//! [signal declaration]
+
+//! [signal handler declaration]
+onTrigger: console.log("trigger signal emitted")
+
+onSend: {
+    console.log("send signal emitted with notice: " + notice)
+}
+
+onPerform: console.log("perform signal emitted")
+//! [signal handler declaration]
+
+//! [automatic signals]
+Rectangle {
+    id: sprite
+    width: 25; height: 25
+    x: 50; y: 15
 
-    Rectangle {
-        id: rect
-        width: 100; height: 100
-        color: "red"
-        
-        Behavior on x { PropertyAnimation { duration: 500 } }
-        Behavior on y { PropertyAnimation { duration: 500 } }
+    onXChanged: console.log("x property changed, emitted xChanged signal")
+    onYChanged: console.log("y property changed, emitted yChanged signal")
+}
+//! [automatic signals]
+
+//! [signal emit]
+Rectangle {
+    id: messenger
+
+    signal send( string person, string notice)
+
+    onSend: {
+        console.log("For " + person + ", the notice is: " + notice)
     }
 
+    Component.onCompleted: messenger.send("Tom", "the door is ajar.")
+}
+//! [signal emit]
+
+//! [connect method]
+Rectangle {
+    id: relay
+
+    signal send( string person, string notice)
+    onSend: console.log("Send signal to: " + person + ", " + notice)
+
+    Component.onCompleted: {
+        relay.send.connect(sendToPost)
+        relay.send.connect(sendToTelegraph)
+        relay.send.connect(sendToEmail)
+        relay.send("Tom", "Happy Birthday")
+    }
+
+    function sendToPost(person, notice) {
+        console.log("Sending to post: " + person + ", " + notice)
+    }
+    function sendToTelegraph(person, notice) {
+        console.log("Sending to telegraph: " + person + ", " + notice)
+    }
+    function sendToEmail(person, notice) {
+        console.log("Sending to email: " + person + ", " + notice)
+    }
+}
+//! [connect method]
+
+//! [forward signal]
+Rectangle {
+    id: forwarder
+    width: 100; height: 100
+
+    signal send()
+    onSend: console.log("Send clicked")
+
     MouseArea {
+        id: mousearea
         anchors.fill: parent
-        onClicked: { rect.x = mouse.x; rect.y = mouse.y }
+        onClicked: console.log("MouseArea clicked")
     }
+    Component.onCompleted: {
+        mousearea.clicked.connect(send)
+    }
+}
+//! [forward signal]
+
+//! [connect method]
+//![parent end]
 }
-//![0]
+//![parent end]
 
+//![document]
diff --git a/doc/src/snippets/declarative/grid/grid-spacing.qml b/doc/src/snippets/declarative/grid-spacing.qml
index 8914ce3..8914ce3 100644
--- a/doc/src/snippets/declarative/grid/grid-spacing.qml
+++ b/doc/src/snippets/declarative/grid-spacing.qml
diff --git a/doc/src/snippets/declarative/grid/grid-items.qml b/doc/src/snippets/declarative/grid/grid-items.qml
deleted file mode 100644
index 3c60d12..0000000
--- a/doc/src/snippets/declarative/grid/grid-items.qml
+++ /dev/null
@@ -1,58 +0,0 @@
-/****************************************************************************
-**
-** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies).
-** All rights reserved.
-** Contact: Nokia Corporation (qt-info@nokia.com)
-**
-** This file is part of the documentation of the Qt Toolkit.
-**
-** $QT_BEGIN_LICENSE:BSD$
-** You may use this file under the terms of the BSD license as follows:
-**
-** "Redistribution and use in source and binary forms, with or without
-** modification, are permitted provided that the following conditions are
-** met:
-**   * Redistributions of source code must retain the above copyright
-**     notice, this list of conditions and the following disclaimer.
-**   * Redistributions in binary form must reproduce the above copyright
-**     notice, this list of conditions and the following disclaimer in
-**     the documentation and/or other materials provided with the
-**     distribution.
-**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
-**     the names of its contributors may be used to endorse or promote
-**     products derived from this software without specific prior written
-**     permission.
-**
-** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
-** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
-** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
-** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
-** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
-** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
-** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
-** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
-** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
-** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
-** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
-** $QT_END_LICENSE$
-**
-****************************************************************************/
-
-import QtQuick 1.0
-
-Rectangle {
-    width: 112; height: 112
-    color: "#303030"
-
-    Grid {
-        anchors.horizontalCenter: parent.horizontalCenter
-        anchors.verticalCenter: parent.verticalCenter
-        columns: 2
-        spacing: 6
-
-        Rectangle { color: "#aa6666"; width: 50; height: 50 }
-        Rectangle { color: "#aaaa66"; width: 50; height: 50 }
-        Rectangle { color: "#9999aa"; width: 50; height: 50 }
-        Rectangle { color: "#6666aa"; width: 50; height: 50 }
-    }
-}
diff --git a/doc/src/snippets/declarative/grid/grid-no-spacing.qml b/doc/src/snippets/declarative/grid/grid-no-spacing.qml
deleted file mode 100644
index 7c8b0f8..0000000
--- a/doc/src/snippets/declarative/grid/grid-no-spacing.qml
+++ /dev/null
@@ -1,57 +0,0 @@
-/****************************************************************************
-**
-** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies).
-** All rights reserved.
-** Contact: Nokia Corporation (qt-info@nokia.com)
-**
-** This file is part of the documentation of the Qt Toolkit.
-**
-** $QT_BEGIN_LICENSE:BSD$
-** You may use this file under the terms of the BSD license as follows:
-**
-** "Redistribution and use in source and binary forms, with or without
-** modification, are permitted provided that the following conditions are
-** met:
-**   * Redistributions of source code must retain the above copyright
-**     notice, this list of conditions and the following disclaimer.
-**   * Redistributions in binary form must reproduce the above copyright
-**     notice, this list of conditions and the following disclaimer in
-**     the documentation and/or other materials provided with the
-**     distribution.
-**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
-**     the names of its contributors may be used to endorse or promote
-**     products derived from this software without specific prior written
-**     permission.
-**
-** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
-** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
-** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
-** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
-** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
-** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
-** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
-** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
-** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
-** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
-** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
-** $QT_END_LICENSE$
-**
-****************************************************************************/
-
-import QtQuick 1.0
-
-Rectangle {
-    width: 112; height: 112
-    color: "#303030"
-
-    Grid {
-        anchors.horizontalCenter: parent.horizontalCenter
-        anchors.verticalCenter: parent.verticalCenter
-        columns: 2
-
-        Rectangle { color: "#aa6666"; width: 50; height: 50 }
-        Rectangle { color: "#aaaa66"; width: 50; height: 50 }
-        Rectangle { color: "#9999aa"; width: 50; height: 50 }
-        Rectangle { color: "#6666aa"; width: 50; height: 50 }
-    }
-}
diff --git a/doc/src/snippets/declarative/grid/grid.qml b/doc/src/snippets/declarative/grid/grid.qml
deleted file mode 100644
index 758edde..0000000
--- a/doc/src/snippets/declarative/grid/grid.qml
+++ /dev/null
@@ -1,53 +0,0 @@
-/****************************************************************************
-**
-** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies).
-** All rights reserved.
-** Contact: Nokia Corporation (qt-info@nokia.com)
-**
-** This file is part of the documentation of the Qt Toolkit.
-**
-** $QT_BEGIN_LICENSE:BSD$
-** You may use this file under the terms of the BSD license as follows:
-**
-** "Redistribution and use in source and binary forms, with or without
-** modification, are permitted provided that the following conditions are
-** met:
-**   * Redistributions of source code must retain the above copyright
-**     notice, this list of conditions and the following disclaimer.
-**   * Redistributions in binary form must reproduce the above copyright
-**     notice, this list of conditions and the following disclaimer in
-**     the documentation and/or other materials provided with the
-**     distribution.
-**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
-**     the names of its contributors may be used to endorse or promote
-**     products derived from this software without specific prior written
-**     permission.
-**
-** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
-** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
-** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
-** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
-** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
-** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
-** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
-** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
-** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
-** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
-** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
-** $QT_END_LICENSE$
-**
-****************************************************************************/
-
-//! [document]
-import QtQuick 1.0
-
-Grid {
-    columns: 3
-    spacing: 2
-    Rectangle { color: "red"; width: 50; height: 50 }
-    Rectangle { color: "green"; width: 20; height: 50 }
-    Rectangle { color: "blue"; width: 50; height: 20 }
-    Rectangle { color: "cyan"; width: 50; height: 50 }
-    Rectangle { color: "magenta"; width: 10; height: 10 }
-}
-//! [document]
diff --git a/doc/src/snippets/declarative/qml-intro/sequential-animation3.qml b/doc/src/snippets/declarative/listview-decorations.qml
index d840575..6b6d950 100644
--- a/doc/src/snippets/declarative/qml-intro/sequential-animation3.qml
+++ b/doc/src/snippets/declarative/listview-decorations.qml
@@ -13,15 +13,15 @@
 ** modification, are permitted provided that the following conditions are
 ** met:
 **   * Redistributions of source code must retain the above copyright
-**     notice, this list of conditions and the following disclaimer.
+** notice, this list of conditions and the following disclaimer.
 **   * Redistributions in binary form must reproduce the above copyright
-**     notice, this list of conditions and the following disclaimer in
-**     the documentation and/or other materials provided with the
-**     distribution.
+** notice, this list of conditions and the following disclaimer in
+** the documentation and/or other materials provided with the
+** distribution.
 **   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
-**     the names of its contributors may be used to endorse or promote
-**     products derived from this software without specific prior written
-**     permission.
+** the names of its contributors may be used to endorse or promote
+** products derived from this software without specific prior written
+** permission.
 **
 ** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
 ** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
@@ -38,55 +38,74 @@
 **
 ****************************************************************************/
 
-import QtQuick 1.0
-
 //! [document]
 import QtQuick 1.0
 
+//! [parent begin]
 Rectangle {
-    id: mainRec
-    width:  600
-    height: 400
-    z: 0
-
-    Image {
-        id: image2
-        source: "images/qt-logo.svg"
-        width: 100; height: 100
-        x: (mainRec.width - 100)/2; y: (mainRec.height - 100)/2
-        z: 2
-    }
+//! [parent begin]
+    width: 550; height: 220; color: "white"
 
-    Image {
-        id: image1
-        source: "images/qt-logo.svg"
-        x: 20; y: 20 ; z: 1
-        width: 100; height: 100
+//! [model]
+ListModel {
+    id: nameModel
+    ListElement { name: "Alice" }
+    ListElement { name: "Bob" }
+    ListElement { name: "Jane" }
+    ListElement { name: "Harry" }
+    ListElement { name: "Wendy" }
+}
+//! [model]
 
-        SequentialAnimation on x {
-            loops: Animation.Infinite
-            NumberAnimation {
-                from: 20; to: 450
-                easing.type: "InOutQuad"; duration: 2000
-            }
-            PauseAnimation { duration: 500 }
-        }
+//! [delegate]
+Component {
+    id: nameDelegate
+    Text {
+        text: name;
+        font.pixelSize: 24
+    }
+}
+//! [delegate]
 
-        SequentialAnimation on y {
-            loops: Animation.Infinite
-            NumberAnimation {
-                from: 20; to: 250
-                easing.type: "InOutQuad"; duration: 2000
-            }
-            PauseAnimation { duration: 500 }
-        }
+//! [decorations]
+ListView {
+    anchors.fill: parent
+    clip: true
+    model: nameModel
+    delegate: nameDelegate
+    header: bannercomponent
+    footer: Rectangle {
+        width: parent.width; height: 30;
+        gradient: clubcolors
+    }
+    highlight: Rectangle {
+        width: parent.width
+        color: "lightgray"
+    }
+}
 
-        SequentialAnimation on scale {
-            loops: Animation.Infinite
-            NumberAnimation { from: 1; to: 0.5; duration: 1000 }
-            NumberAnimation { from: 0.5; to: 1; duration: 1000 }
-            PauseAnimation { duration: 500 }
+Component {     //instantiated when header is processed
+    id: bannercomponent
+    Rectangle {
+        id: banner
+        width: parent.width; height: 50
+        gradient: clubcolors
+        border {color: "#9EDDF2"; width: 2}
+        Text {
+            anchors.centerIn: parent
+            text: "Club Members"
+            font.pixelSize: 32
         }
     }
 }
+Gradient {
+    id: clubcolors
+    GradientStop { position: 0.0; color: "#8EE2FE"}
+    GradientStop { position: 0.66; color: "#7ED2EE"}
+}
+//! [decorations]
+
+//! [parent end]
+}
+//! [parent end]
 //! [document]
diff --git a/doc/src/snippets/declarative/qml-intro/transformations1.qml b/doc/src/snippets/declarative/listview-sections.qml
index 7be79c8..a573059 100644
--- a/doc/src/snippets/declarative/qml-intro/transformations1.qml
+++ b/doc/src/snippets/declarative/listview-sections.qml
@@ -13,15 +13,15 @@
 ** modification, are permitted provided that the following conditions are
 ** met:
 **   * Redistributions of source code must retain the above copyright
-**     notice, this list of conditions and the following disclaimer.
+** notice, this list of conditions and the following disclaimer.
 **   * Redistributions in binary form must reproduce the above copyright
-**     notice, this list of conditions and the following disclaimer in
-**     the documentation and/or other materials provided with the
-**     distribution.
+** notice, this list of conditions and the following disclaimer in
+** the documentation and/or other materials provided with the
+** distribution.
 **   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
-**     the names of its contributors may be used to endorse or promote
-**     products derived from this software without specific prior written
-**     permission.
+** the names of its contributors may be used to endorse or promote
+** products derived from this software without specific prior written
+** permission.
 **
 ** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
 ** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
@@ -37,44 +37,65 @@
 ** $QT_END_LICENSE$
 **
 ****************************************************************************/
-
 //! [document]
 import QtQuick 1.0
 
+//! [parent begin]
 Rectangle {
-    id: myWin
-    width: 500
-    height: 400
-
-    Image {
-        id: image1
-        source: "images/qt-logo.svg"
-        width: 150; height: 150
-        anchors.bottom: myWin.bottom
-        anchors.horizontalCenter: myWin.horizontalCenter
-        anchors.bottomMargin: 10
-
-        transform: Rotation {
-            origin.x: 75; origin.y: 75
-            axis{ x: 0; y: 0; z:1 }  angle: -90
-        }
+//! [parent begin]
+    width: 150; height: 300; color: "white"
 
-    }
+//! [model]
+ListModel {
+    id: nameModel
+    ListElement { name: "Alice"; team: "Crypto" }
+    ListElement { name: "Bob"; team: "Crypto" }
+    ListElement { name: "Jane"; team: "QA" }
+    ListElement { name: "Victor"; team: "QA" }
+    ListElement { name: "Wendy"; team: "Graphics" }
+}
+//! [model]
 
+//! [delegate]
+Component {
+    id: nameDelegate
     Text {
-        text: "<h2>The Qt Logo -- taking it easy</h2>"
-        anchors.bottom: image1.top
-        anchors.horizontalCenter: myWin.horizontalCenter
-        anchors.bottomMargin: 15
-
-        transform: [
-            Scale { xScale: 1.5; yScale: 1.2 } ,
+        text: name;
+        font.pixelSize: 24
+        anchors.left: parent.left
+        anchors.leftMargin: 2
+    }
+}
+//! [delegate]
 
-            Rotation {
-                origin.x: 75; origin.y: 75
-                axis{ x: 0; y: 0; z:1 }  angle: -45
+//! [section]
+ListView {
+    anchors.fill: parent
+    model: nameModel
+    delegate: nameDelegate
+    focus: true
+    highlight: Rectangle {
+        color: "lightblue"
+        width: parent.width
+    }
+    section {
+        property: "team"
+        criteria: ViewSection.FullString
+        delegate: Rectangle {
+            color: "#b0dfb0"
+            width: parent.width
+            height: childrenRect.height + 4
+            Text { anchors.horizontalCenter: parent.horizontalCenter
+                font.pixelSize: 16
+                font.bold: true
+                text: section
             }
-        ]
+        }
     }
 }
+//! [section]
+
+//! [parent end]
+}
+//! [parent end]
 //! [document]
diff --git a/doc/src/snippets/declarative/qml-intro/number-animation1.qml b/doc/src/snippets/declarative/listview.qml
index ccf2d36..4bb48bc 100644
--- a/doc/src/snippets/declarative/qml-intro/number-animation1.qml
+++ b/doc/src/snippets/declarative/listview.qml
@@ -13,15 +13,15 @@
 ** modification, are permitted provided that the following conditions are
 ** met:
 **   * Redistributions of source code must retain the above copyright
-**     notice, this list of conditions and the following disclaimer.
+** notice, this list of conditions and the following disclaimer.
 **   * Redistributions in binary form must reproduce the above copyright
-**     notice, this list of conditions and the following disclaimer in
-**     the documentation and/or other materials provided with the
-**     distribution.
+** notice, this list of conditions and the following disclaimer in
+** the documentation and/or other materials provided with the
+** distribution.
 **   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
-**     the names of its contributors may be used to endorse or promote
-**     products derived from this software without specific prior written
-**     permission.
+** the names of its contributors may be used to endorse or promote
+** products derived from this software without specific prior written
+** permission.
 **
 ** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
 ** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
@@ -41,24 +41,47 @@
 //! [document]
 import QtQuick 1.0
 
+//! [parent begin]
 Rectangle {
-    id: mainRec
-    width:  600
-    height: 400
+//! [parent begin]
+    width: 175; height: 175; color: "white"
 
-    Image {
-        id: image1
-        source: "images/qt-logo.svg"
-        x: 200; y: 100
-        width: 100; height: 100
+//! [model]
+ListModel {
+    id: petlist
+    ListElement { type: "Cat" }
+    ListElement { type: "Dog" }
+    ListElement { type: "Mouse" }
+    ListElement { type: "Rabbit" }
+    ListElement { type: "Horse" }
+}
+//! [model]
 
-        // Animate a rotation
-        transformOrigin: Item.Center
-        NumberAnimation on rotation {
-            from: 0; to: 360
-            duration: 2000
-            loops: Animation.Infinite
-        }
+//! [delegate]
+Component {
+    id: petdelegate
+    Text {
+        id: label
+        font.pixelSize: 24
+        text: if (index == 0)
+            label.text = type + " (default)"
+        else
+            text: type
     }
 }
+//! [delegate]
+
+//! [view]
+ListView {
+    id: view
+    anchors.fill: parent
+
+    model: petlist
+    delegate: petdelegate
+}
+//! [view]
+
+//! [parent end]
+}
+//! [parent end]
 //! [document]
diff --git a/doc/src/snippets/declarative/listview/listview-snippet.qml b/doc/src/snippets/declarative/listview/listview-snippet.qml
deleted file mode 100644
index f73dec9..0000000
--- a/doc/src/snippets/declarative/listview/listview-snippet.qml
+++ /dev/null
@@ -1,52 +0,0 @@
-/****************************************************************************
-**
-** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies).
-** All rights reserved.
-** Contact: Nokia Corporation (qt-info@nokia.com)
-**
-** This file is part of the documentation of the Qt Toolkit.
-**
-** $QT_BEGIN_LICENSE:BSD$
-** You may use this file under the terms of the BSD license as follows:
-**
-** "Redistribution and use in source and binary forms, with or without
-** modification, are permitted provided that the following conditions are
-** met:
-**   * Redistributions of source code must retain the above copyright
-**     notice, this list of conditions and the following disclaimer.
-**   * Redistributions in binary form must reproduce the above copyright
-**     notice, this list of conditions and the following disclaimer in
-**     the documentation and/or other materials provided with the
-**     distribution.
-**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
-**     the names of its contributors may be used to endorse or promote
-**     products derived from this software without specific prior written
-**     permission.
-**
-** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
-** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
-** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
-** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
-** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
-** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
-** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
-** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
-** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
-** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
-** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
-** $QT_END_LICENSE$
-**
-****************************************************************************/
-
-//! [document]
-import QtQuick 1.0
-
-ListView {
-    width: 50; height: 200
-    model: 4
-    delegate: Text {
-        text: index;
-        font.pixelSize: 40
-    }
-}
-//! [document]
diff --git a/doc/src/snippets/declarative/mousearea/mousearea-snippet.qml b/doc/src/snippets/declarative/mousearea/mousearea-snippet.qml
index 3c2e143..99cdc8b 100644
--- a/doc/src/snippets/declarative/mousearea/mousearea-snippet.qml
+++ b/doc/src/snippets/declarative/mousearea/mousearea-snippet.qml
@@ -41,13 +41,60 @@
 //! [document]
 import QtQuick 1.0
 
-Rectangle { 
-    width: 100; height: 100
+//! [parent begin]
+Rectangle {
+//! [parent begin]
+    width: 500; height: 500
     color: "green"
 
-    MouseArea { 
+Column {
+//! [anchor fill]
+Rectangle {
+    id: button
+    width: 100; height: 100
+
+    MouseArea {
         anchors.fill: parent
-        onClicked: { parent.color = 'red' }
+        onClicked: console.log("button clicked")
+    }
+    MouseArea {
+        width:150; height: 75
+        onClicked: console.log("irregular area clicked")
+    }
+}
+//! [anchor fill]
+
+Rectangle {
+    id: button
+    width: 100; height: 100
+
+//! [enable handlers]
+    MouseArea {
+        hoverEnabled: true
+        acceptedButtons: Qt.LeftButton | Qt.RightButton
+        onEntered: console.log("mouse entered the area")
+        onExited: console.log("mouse left the area")
     }
+//! [enable handlers]
+}
+
+Rectangle {
+    id: button
+    width: 100; height: 100
+
+//! [mouse handlers]
+    MouseArea {
+        anchors.fill: parent
+        onClicked: console.log("area clicked")
+        onDoubleClicked: console.log("area double clicked")
+        onEntered: console.log("mouse entered the area")
+        onExited: console.log("mouse left the area")
+    }
+//! [mouse handlers]
+}
+
+} //end of column
+//! [parent end]
 }
+//! [parent end]
 //! [document]
diff --git a/doc/src/snippets/declarative/pics/qt.png b/doc/src/snippets/declarative/pics/qt.png
index cbed1a9..4f68e16 100644
--- a/doc/src/snippets/declarative/pics/qt.png
+++ b/doc/src/snippets/declarative/pics/qt.png
diff --git a/doc/src/snippets/declarative/qml-intro/anchors2.qml b/doc/src/snippets/declarative/qml-intro/anchors2.qml
deleted file mode 100644
index 2c4ce11..0000000
--- a/doc/src/snippets/declarative/qml-intro/anchors2.qml
+++ /dev/null
@@ -1,58 +0,0 @@
-/****************************************************************************
-**
-** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies).
-** All rights reserved.
-** Contact: Nokia Corporation (qt-info@nokia.com)
-**
-** This file is part of the documentation of the Qt Toolkit.
-**
-** $QT_BEGIN_LICENSE:BSD$
-** You may use this file under the terms of the BSD license as follows:
-**
-** "Redistribution and use in source and binary forms, with or without
-** modification, are permitted provided that the following conditions are
-** met:
-**   * Redistributions of source code must retain the above copyright
-**     notice, this list of conditions and the following disclaimer.
-**   * Redistributions in binary form must reproduce the above copyright
-**     notice, this list of conditions and the following disclaimer in
-**     the documentation and/or other materials provided with the
-**     distribution.
-**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
-**     the names of its contributors may be used to endorse or promote
-**     products derived from this software without specific prior written
-**     permission.
-**
-** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
-** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
-** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
-** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
-** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
-** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
-** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
-** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
-** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
-** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
-** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
-** $QT_END_LICENSE$
-**
-****************************************************************************/
-
-//! [document]
-import QtQuick 1.0
-
-Rectangle {
-    id: myWin
-    width: 500
-    height: 400
-
-    Image {
-        id: image1
-        source: "images/qt-logo.svg"
-        width: 150; height: 150
-        anchors.bottom: myWin.bottom
-        anchors.horizontalCenter: myWin.horizontalCenter
-        anchors.bottomMargin: 10
-    }
-}
-//! [document]
diff --git a/doc/src/snippets/declarative/qml-intro/anchors3.qml b/doc/src/snippets/declarative/qml-intro/anchors3.qml
deleted file mode 100644
index 24851af..0000000
--- a/doc/src/snippets/declarative/qml-intro/anchors3.qml
+++ /dev/null
@@ -1,65 +0,0 @@
-/****************************************************************************
-**
-** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies).
-** All rights reserved.
-** Contact: Nokia Corporation (qt-info@nokia.com)
-**
-** This file is part of the documentation of the Qt Toolkit.
-**
-** $QT_BEGIN_LICENSE:BSD$
-** You may use this file under the terms of the BSD license as follows:
-**
-** "Redistribution and use in source and binary forms, with or without
-** modification, are permitted provided that the following conditions are
-** met:
-**   * Redistributions of source code must retain the above copyright
-**     notice, this list of conditions and the following disclaimer.
-**   * Redistributions in binary form must reproduce the above copyright
-**     notice, this list of conditions and the following disclaimer in
-**     the documentation and/or other materials provided with the
-**     distribution.
-**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
-**     the names of its contributors may be used to endorse or promote
-**     products derived from this software without specific prior written
-**     permission.
-**
-** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
-** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
-** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
-** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
-** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
-** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
-** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
-** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
-** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
-** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
-** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
-** $QT_END_LICENSE$
-**
-****************************************************************************/
-
-import QtQuick 1.0
-
-Rectangle {
-    id: myWin
-    width: 500
-    height: 400
-
-    Image {
-        id: image1
-        source: "images/qt-logo.svg"
-        width: 150; height: 150
-        anchors.bottom: myWin.bottom
-        anchors.horizontalCenter: myWin.horizontalCenter
-        anchors.bottomMargin: 10
-    }
-
-//! [adding some text]
-    Text {
-        text: "<h2>The Qt Logo</h2>"
-        anchors.bottom: image1.top
-        anchors.horizontalCenter: myWin.horizontalCenter
-        anchors.bottomMargin: 15
-    }
-//! [adding some text]
-}
diff --git a/doc/src/snippets/declarative/qml-intro/hello-world1.qml b/doc/src/snippets/declarative/qml-intro/hello-world1.qml
deleted file mode 100644
index 81ad333..0000000
--- a/doc/src/snippets/declarative/qml-intro/hello-world1.qml
+++ /dev/null
@@ -1,53 +0,0 @@
-/****************************************************************************
-**
-** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies).
-** All rights reserved.
-** Contact: Nokia Corporation (qt-info@nokia.com)
-**
-** This file is part of the documentation of the Qt Toolkit.
-**
-** $QT_BEGIN_LICENSE:BSD$
-** You may use this file under the terms of the BSD license as follows:
-**
-** "Redistribution and use in source and binary forms, with or without
-** modification, are permitted provided that the following conditions are
-** met:
-**   * Redistributions of source code must retain the above copyright
-**     notice, this list of conditions and the following disclaimer.
-**   * Redistributions in binary form must reproduce the above copyright
-**     notice, this list of conditions and the following disclaimer in
-**     the documentation and/or other materials provided with the
-**     distribution.
-**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
-**     the names of its contributors may be used to endorse or promote
-**     products derived from this software without specific prior written
-**     permission.
-**
-** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
-** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
-** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
-** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
-** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
-** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
-** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
-** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
-** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
-** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
-** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
-** $QT_END_LICENSE$
-**
-****************************************************************************/
-
-//! [document]
-import QtQuick 1.0
-
-Rectangle {
-    id: myRectangle
-    width: 500
-    height: 400
-
-    Text { text: "Hello World!" }
-
-    color: "lightgray"
-}
-//! [document]
diff --git a/doc/src/snippets/declarative/qml-intro/hello-world2.qml b/doc/src/snippets/declarative/qml-intro/hello-world2.qml
deleted file mode 100644
index 2564e25..0000000
--- a/doc/src/snippets/declarative/qml-intro/hello-world2.qml
+++ /dev/null
@@ -1,56 +0,0 @@
-/****************************************************************************
-**
-** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies).
-** All rights reserved.
-** Contact: Nokia Corporation (qt-info@nokia.com)
-**
-** This file is part of the documentation of the Qt Toolkit.
-**
-** $QT_BEGIN_LICENSE:BSD$
-** You may use this file under the terms of the BSD license as follows:
-**
-** "Redistribution and use in source and binary forms, with or without
-** modification, are permitted provided that the following conditions are
-** met:
-**   * Redistributions of source code must retain the above copyright
-**     notice, this list of conditions and the following disclaimer.
-**   * Redistributions in binary form must reproduce the above copyright
-**     notice, this list of conditions and the following disclaimer in
-**     the documentation and/or other materials provided with the
-**     distribution.
-**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
-**     the names of its contributors may be used to endorse or promote
-**     products derived from this software without specific prior written
-**     permission.
-**
-** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
-** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
-** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
-** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
-** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
-** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
-** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
-** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
-** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
-** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
-** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
-** $QT_END_LICENSE$
-**
-****************************************************************************/
-
-import QtQuick 1.0
-
-Rectangle {
-    id: myRectangle
-    width: 500
-    height: 400
-
-//! [updated text]
-    Text {
-        text: "<h2>Hello World</h2>"; color: "darkgreen"
-        x: 100; y:100
-    }
-//! [updated text]
-
-    color: "lightgray"
-}
diff --git a/doc/src/snippets/declarative/qml-intro/hello-world3.qml b/doc/src/snippets/declarative/qml-intro/hello-world3.qml
deleted file mode 100644
index 03358d0..0000000
--- a/doc/src/snippets/declarative/qml-intro/hello-world3.qml
+++ /dev/null
@@ -1,57 +0,0 @@
-/****************************************************************************
-**
-** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies).
-** All rights reserved.
-** Contact: Nokia Corporation (qt-info@nokia.com)
-**
-** This file is part of the documentation of the Qt Toolkit.
-**
-** $QT_BEGIN_LICENSE:BSD$
-** You may use this file under the terms of the BSD license as follows:
-**
-** "Redistribution and use in source and binary forms, with or without
-** modification, are permitted provided that the following conditions are
-** met:
-**   * Redistributions of source code must retain the above copyright
-**     notice, this list of conditions and the following disclaimer.
-**   * Redistributions in binary form must reproduce the above copyright
-**     notice, this list of conditions and the following disclaimer in
-**     the documentation and/or other materials provided with the
-**     distribution.
-**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
-**     the names of its contributors may be used to endorse or promote
-**     products derived from this software without specific prior written
-**     permission.
-**
-** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
-** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
-** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
-** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
-** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
-** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
-** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
-** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
-** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
-** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
-** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
-** $QT_END_LICENSE$
-**
-****************************************************************************/
-
-import QtQuick 1.0
-
-Rectangle {
-    id: myRectangle
-    width: 500
-    height: 400
-
-//! [updated text]
-    Text {
-        text: "<h1>Hello world again</h1>"
-        color: "#002288"
-        x: 100; y: 100
-    }
-//! [updated text]
-
-    color: "lightgray"
-}
diff --git a/doc/src/snippets/declarative/qml-intro/hello-world4.qml b/doc/src/snippets/declarative/qml-intro/hello-world4.qml
deleted file mode 100644
index 832e37d..0000000
--- a/doc/src/snippets/declarative/qml-intro/hello-world4.qml
+++ /dev/null
@@ -1,61 +0,0 @@
-/****************************************************************************
-**
-** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies).
-** All rights reserved.
-** Contact: Nokia Corporation (qt-info@nokia.com)
-**
-** This file is part of the documentation of the Qt Toolkit.
-**
-** $QT_BEGIN_LICENSE:BSD$
-** You may use this file under the terms of the BSD license as follows:
-**
-** "Redistribution and use in source and binary forms, with or without
-** modification, are permitted provided that the following conditions are
-** met:
-**   * Redistributions of source code must retain the above copyright
-**     notice, this list of conditions and the following disclaimer.
-**   * Redistributions in binary form must reproduce the above copyright
-**     notice, this list of conditions and the following disclaimer in
-**     the documentation and/or other materials provided with the
-**     distribution.
-**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
-**     the names of its contributors may be used to endorse or promote
-**     products derived from this software without specific prior written
-**     permission.
-**
-** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
-** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
-** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
-** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
-** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
-** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
-** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
-** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
-** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
-** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
-** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
-** $QT_END_LICENSE$
-**
-****************************************************************************/
-
-import QtQuick 1.0
-
-Rectangle {
-    id: myRectangle
-    width: 500
-    height: 400
-
-    Text {
-        text: "<h1>Hello world again</h1>"
-        color: "#002288"
-        x: 100; y: 100
-    }
-
-//! [added an image]
-    Image {
-        source: "images/qt-logo.svg"
-    }
-//! [added an image]
-
-    color: "lightgray"
-}
diff --git a/doc/src/snippets/declarative/qml-intro/images/qt-logo.svg b/doc/src/snippets/declarative/qml-intro/images/qt-logo.svg
deleted file mode 100644
index 8c018be..0000000
--- a/doc/src/snippets/declarative/qml-intro/images/qt-logo.svg
+++ /dev/null
@@ -1,104 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   clip-rule="evenodd"
-   stroke-miterlimit="10"
-   viewBox="0 0 174.35 209.78"
-   id="svg2"
-   sodipodi:version="0.32"
-   inkscape:version="0.46"
-   width="744.09186"
-   height="895.29858"
-   sodipodi:docname="qt-logo.svg"
-   inkscape:output_extension="org.inkscape.output.svg.inkscape"
-   version="1.0"
-   style="stroke-miterlimit:10">
-  <metadata
-     id="metadata29">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <sodipodi:namedview
-     inkscape:window-height="668"
-     inkscape:window-width="722"
-     inkscape:pageshadow="2"
-     inkscape:pageopacity="0.0"
-     guidetolerance="10.0"
-     gridtolerance="10.0"
-     objecttolerance="10.0"
-     borderopacity="1.0"
-     bordercolor="#666666"
-     pagecolor="#ffffff"
-     id="base"
-     showgrid="false"
-     inkscape:zoom="0.12195802"
-     inkscape:cx="525.6108"
-     inkscape:cy="-287.87189"
-     inkscape:window-x="476"
-     inkscape:window-y="228"
-     inkscape:current-layer="svg2" />
-  <desc
-     id="desc4">SVG generated by Lineform</desc>
-  <defs
-     id="defs6">
-    <inkscape:perspective
-       sodipodi:type="inkscape:persp3d"
-       inkscape:vp_x="0 : 526.18109 : 1"
-       inkscape:vp_y="0 : 1000 : 0"
-       inkscape:vp_z="744.09448 : 526.18109 : 1"
-       inkscape:persp3d-origin="372.04724 : 350.78739 : 1"
-       id="perspective31" />
-  </defs>
-  <g
-     id="g8"
-     transform="translate(-1.5304326e-4,-3.775985e-4)">
-    <path
-       d="M 43.08,0.36 C 40.94,0 38.84,-0.08 36.81,0.08 L 36.8,0.08 C 36.8,0.08 22.92,1.02 22.29,1.07 C 9.62,2.08 0,12.5 0,26.89 L 0,196.55 L 14.19,209.78 L 156.79,185.81 C 166.6,184.11 174.35,172.54 174.35,160.04 L 174.35,21.88 L 43.08,0.36"
-       id="path10"
-       style="fill:#0c481e" />
-    <path
-       d="M 174.35,160.04 C 174.35,172.54 166.6,184.11 156.79,185.82 L 14.19,209.78 L 14.19,25.99 C 14.19,9.27 27.53,-2.21 43.08,0.36 L 174.35,21.88 L 174.35,160.04"
-       id="path12"
-       style="fill:#66b036" />
-    <path
-       d="M 130.42,45.91 L 141.94,47.15 L 141.94,67.36 L 154.9,68.28 L 154.9,80.96 L 141.94,80.36 L 141.94,126.69 C 141.94,130.72 142.38,133.31 143.28,134.48 C 144.08,135.55 145.32,136.07 146.99,136.07 C 147.15,136.07 147.32,136.07 147.48,136.06 C 150.03,135.91 152.81,135.13 155.83,133.75 L 155.83,145.4 C 150.69,147.65 145.65,149 140.7,149.42 C 139.99,149.47 139.29,149.5 138.62,149.5 C 134.14,149.5 130.72,148.2 128.38,145.57 C 125.65,142.52 124.29,137.62 124.29,130.9 L 124.29,79.54 L 118.06,79.26 L 118.06,65.67 L 125.65,66.22 L 130.42,45.91"
-       id="path14"
-       style="fill:#ffffff" />
-    <path
-       d="M 154.9,80.96 L 141.94,80.36 L 141.94,80.64 L 148.88,80.96 L 154.9,80.96"
-       id="path16"
-       style="fill:#0c481e" />
-    <path
-       d="M 144.64,135.6 C 145.3,135.92 146.07,136.07 146.99,136.07 C 147.15,136.07 147.32,136.07 147.48,136.06 C 150.03,135.91 152.81,135.13 155.83,133.75 L 149.81,133.75 C 147.99,134.58 146.28,135.21 144.64,135.6"
-       id="path18"
-       style="fill:#0c481e" />
-    <path
-       d="M 128.38,145.57 C 125.65,142.52 124.29,137.62 124.29,130.9 L 124.29,79.54 L 118.06,79.26 L 118.06,65.67 L 112.05,65.67 L 112.05,68.71 C 112.92,71.98 113.6,75.53 114.11,79.35 L 118.28,79.54 L 118.28,130.9 C 118.28,137.62 119.64,142.52 122.37,145.57 C 124.71,148.2 128.13,149.5 132.61,149.5 L 138.62,149.5 C 134.14,149.5 130.72,148.2 128.38,145.57 z M 130.42,45.91 L 124.41,45.91 L 119.74,65.79 L 125.65,66.22 L 130.42,45.91"
-       id="path20"
-       style="fill:#0c481e" />
-    <path
-       d="M 91.15,132.4 C 93.5,126.36 94.66,114.49 94.66,96.79 C 94.66,80.9 93.51,69.97 91.18,63.98 C 88.84,57.95 85.35,54.69 80.66,54.28 C 80.3,54.25 79.95,54.23 79.6,54.23 C 75.26,54.23 71.92,56.77 69.59,61.86 C 67.07,67.4 65.8,78.9 65.8,96.3 C 65.8,113.11 67.04,125.05 69.54,132.05 C 71.89,138.72 75.41,142.03 80.04,142.03 C 80.25,142.03 80.45,142.02 80.66,142.01 C 85.29,141.71 88.78,138.51 91.15,132.4 M 109.13,136.15 C 105.01,145.86 98.73,152.21 90.14,155.15 C 91.01,159.6 92.32,162.6 94.06,164.17 C 95.41,165.39 97.49,165.99 100.28,165.99 C 101.09,165.99 101.96,165.94 102.87,165.84 L 102.87,178.96 L 96.91,179.75 C 95.16,179.97 93.49,180.09 91.91,180.09 C 86.69,180.09 82.47,178.82 79.29,176.26 C 75.08,172.89 71.98,166.37 69.99,156.73 C 60.86,154.78 53.73,148.97 48.8,139.23 C 43.8,129.32 41.25,114.83 41.25,95.89 C 41.25,75.46 44.74,60.38 51.6,50.81 C 57.38,42.75 65.46,38.78 75.62,38.78 C 77.24,38.78 78.93,38.88 80.66,39.08 C 92.61,40.46 101.28,46.1 106.92,55.87 C 112.46,65.43 115.17,79.14 115.17,97.13 C 115.17,113.62 113.17,126.58 109.13,136.15"
-       id="path22"
-       style="fill:#ffffff" />
-    <path
-       d="M 100.28,165.99 C 101.09,165.99 101.95,165.94 102.87,165.84 L 98.04,165.84 C 98.71,165.94 99.49,165.99 100.28,165.99"
-       id="path24"
-       style="fill:#0c481e" />
-    <path
-       d="M 84.85,63.98 C 87.19,69.97 88.34,80.9 88.34,96.79 C 88.34,114.49 87.18,126.36 84.82,132.4 C 82.93,137.28 80.3,140.31 76.96,141.48 C 77.93,141.84 78.96,142.03 80.04,142.03 C 80.25,142.03 80.45,142.02 80.66,142.01 C 85.29,141.71 88.78,138.51 91.15,132.4 C 93.5,126.36 94.66,114.49 94.66,96.79 C 94.66,80.9 93.51,69.97 91.18,63.98 C 88.84,57.95 85.35,54.69 80.66,54.28 C 80.3,54.25 79.95,54.23 79.6,54.23 C 78.51,54.23 77.48,54.39 76.52,54.72 L 76.52,54.72 C 80.12,55.83 82.89,58.93 84.85,63.98 z M 82.51,178.25 C 82.4,178.2 82.28,178.15 82.17,178.09 C 82.16,178.09 82.15,178.08 82.14,178.08 C 82.03,178.03 81.93,177.97 81.83,177.92 C 81.81,177.91 81.79,177.9 81.77,177.89 C 81.68,177.84 81.59,177.79 81.49,177.74 C 81.46,177.72 81.44,177.71 81.41,177.69 C 81.33,177.65 81.24,177.6 81.16,177.55 C 81.12,177.53 81.09,177.51 81.05,177.48 C 80.98,177.44 80.91,177.4 80.84,177.36 C 80.79,177.33 80.74,177.3 80.7,177.27 C 80.64,177.23 80.58,177.19 80.52,177.15 C 80.46,177.12 80.41,177.08 80.35,177.04 C 80.3,177.01 80.25,176.98 80.2,176.94 C 80.14,176.9 80.07,176.85 80.01,176.81 C 79.97,176.78 79.93,176.75 79.89,176.72 C 79.82,176.67 79.74,176.61 79.67,176.55 C 79.64,176.54 79.61,176.52 79.59,176.5 C 79.49,176.42 79.39,176.34 79.29,176.26 C 75.08,172.89 71.98,166.37 69.99,156.73 C 60.86,154.78 53.73,148.97 48.8,139.23 C 43.8,129.32 41.25,114.83 41.25,95.89 C 41.25,75.46 44.74,60.38 51.6,50.81 C 57.38,42.75 65.46,38.78 75.62,38.78 C 75.65,38.78 69.27,38.77 69.27,38.77 L 69.27,38.78 C 59.12,38.78 51.05,42.75 45.27,50.81 C 38.41,60.38 34.92,75.46 34.92,95.89 C 34.92,114.83 37.47,129.32 42.47,139.23 C 47.41,148.97 54.53,154.78 63.67,156.73 C 65.65,166.37 68.76,172.89 72.96,176.26 C 76.14,178.82 80.36,180.09 85.58,180.09 C 85.68,180.09 85.78,180.09 85.88,180.09 L 91.42,180.09 C 88.01,180.03 85.04,179.43 82.52,178.26 C 82.51,178.26 82.51,178.26 82.51,178.25"
-       id="path26"
-       style="fill:#0c481e" />
-  </g>
-</svg>
diff --git a/doc/src/snippets/declarative/qml-intro/number-animation2.qml b/doc/src/snippets/declarative/qml-intro/number-animation2.qml
deleted file mode 100644
index 7be22b5..0000000
--- a/doc/src/snippets/declarative/qml-intro/number-animation2.qml
+++ /dev/null
@@ -1,66 +0,0 @@
-/****************************************************************************
-**
-** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies).
-** All rights reserved.
-** Contact: Nokia Corporation (qt-info@nokia.com)
-**
-** This file is part of the documentation of the Qt Toolkit.
-**
-** $QT_BEGIN_LICENSE:BSD$
-** You may use this file under the terms of the BSD license as follows:
-**
-** "Redistribution and use in source and binary forms, with or without
-** modification, are permitted provided that the following conditions are
-** met:
-**   * Redistributions of source code must retain the above copyright
-**     notice, this list of conditions and the following disclaimer.
-**   * Redistributions in binary form must reproduce the above copyright
-**     notice, this list of conditions and the following disclaimer in
-**     the documentation and/or other materials provided with the
-**     distribution.
-**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
-**     the names of its contributors may be used to endorse or promote
-**     products derived from this software without specific prior written
-**     permission.
-**
-** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
-** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
-** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
-** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
-** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
-** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
-** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
-** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
-** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
-** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
-** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
-** $QT_END_LICENSE$
-**
-****************************************************************************/
-
-//! [document]
-import QtQuick 1.0
-
-Rectangle {
-    id: mainRec
-    width:  600
-    height: 400
-
-    Image {
-        id: image1
-        source: "images/qt-logo.svg"
-        x: 200; y: 100
-        width: 100; height: 100
-
-        // Animate a rotation
-        transform: Rotation {
-            origin.x: 50; origin.y: 50; axis {x:0; y:1; z:0} angle:0
-            NumberAnimation on angle  {
-                from: 0; to: 360;
-                duration: 3000;
-                loops: Animation.Infinite
-            }
-        }
-    }
-}
-//! [document]
diff --git a/doc/src/snippets/declarative/qml-intro/rectangle.qml b/doc/src/snippets/declarative/qml-intro/rectangle.qml
deleted file mode 100644
index b25accc..0000000
--- a/doc/src/snippets/declarative/qml-intro/rectangle.qml
+++ /dev/null
@@ -1,50 +0,0 @@
-/****************************************************************************
-**
-** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies).
-** All rights reserved.
-** Contact: Nokia Corporation (qt-info@nokia.com)
-**
-** This file is part of the documentation of the Qt Toolkit.
-**
-** $QT_BEGIN_LICENSE:BSD$
-** You may use this file under the terms of the BSD license as follows:
-**
-** "Redistribution and use in source and binary forms, with or without
-** modification, are permitted provided that the following conditions are
-** met:
-**   * Redistributions of source code must retain the above copyright
-**     notice, this list of conditions and the following disclaimer.
-**   * Redistributions in binary form must reproduce the above copyright
-**     notice, this list of conditions and the following disclaimer in
-**     the documentation and/or other materials provided with the
-**     distribution.
-**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
-**     the names of its contributors may be used to endorse or promote
-**     products derived from this software without specific prior written
-**     permission.
-**
-** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
-** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
-** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
-** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
-** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
-** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
-** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
-** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
-** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
-** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
-** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
-** $QT_END_LICENSE$
-**
-****************************************************************************/
-
-//! [document]
-import QtQuick 1.0
-
-// This is a comment. And below myRectangle is defined.
-Rectangle {
-    id: myRectangle
-    width: 500
-    height: 400
-}
-//! [document]
diff --git a/doc/src/snippets/declarative/qml-intro/sequential-animation1.qml b/doc/src/snippets/declarative/qml-intro/sequential-animation1.qml
deleted file mode 100644
index c789bbe..0000000
--- a/doc/src/snippets/declarative/qml-intro/sequential-animation1.qml
+++ /dev/null
@@ -1,65 +0,0 @@
-/****************************************************************************
-**
-** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies).
-** All rights reserved.
-** Contact: Nokia Corporation (qt-info@nokia.com)
-**
-** This file is part of the documentation of the Qt Toolkit.
-**
-** $QT_BEGIN_LICENSE:BSD$
-** You may use this file under the terms of the BSD license as follows:
-**
-** "Redistribution and use in source and binary forms, with or without
-** modification, are permitted provided that the following conditions are
-** met:
-**   * Redistributions of source code must retain the above copyright
-**     notice, this list of conditions and the following disclaimer.
-**   * Redistributions in binary form must reproduce the above copyright
-**     notice, this list of conditions and the following disclaimer in
-**     the documentation and/or other materials provided with the
-**     distribution.
-**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
-**     the names of its contributors may be used to endorse or promote
-**     products derived from this software without specific prior written
-**     permission.
-**
-** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
-** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
-** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
-** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
-** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
-** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
-** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
-** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
-** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
-** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
-** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
-** $QT_END_LICENSE$
-**
-****************************************************************************/
-
-//! [document]
-import QtQuick 1.0
-
-Rectangle {
-    id: mainRec
-    width:  600
-    height: 400
-    z: 0
-
-    Image {
-        id: image1
-        source: "images/qt-logo.svg"
-        x: 20; y: 20 ; z: 1
-        width: 100; height: 100
-    }
-
-    Image {
-        id: image2
-        source: "images/qt-logo.svg"
-        width: 100; height: 100
-        x: (mainRec.width - 100)/2; y: (mainRec.height - 100)/2
-        z: 2
-    }
-}
-//! [document]
diff --git a/doc/src/snippets/declarative/qml-intro/sequential-animation2.qml b/doc/src/snippets/declarative/qml-intro/sequential-animation2.qml
deleted file mode 100644
index b2b1a57..0000000
--- a/doc/src/snippets/declarative/qml-intro/sequential-animation2.qml
+++ /dev/null
@@ -1,73 +0,0 @@
-/****************************************************************************
-**
-** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies).
-** All rights reserved.
-** Contact: Nokia Corporation (qt-info@nokia.com)
-**
-** This file is part of the documentation of the Qt Toolkit.
-**
-** $QT_BEGIN_LICENSE:BSD$
-** You may use this file under the terms of the BSD license as follows:
-**
-** "Redistribution and use in source and binary forms, with or without
-** modification, are permitted provided that the following conditions are
-** met:
-**   * Redistributions of source code must retain the above copyright
-**     notice, this list of conditions and the following disclaimer.
-**   * Redistributions in binary form must reproduce the above copyright
-**     notice, this list of conditions and the following disclaimer in
-**     the documentation and/or other materials provided with the
-**     distribution.
-**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
-**     the names of its contributors may be used to endorse or promote
-**     products derived from this software without specific prior written
-**     permission.
-**
-** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
-** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
-** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
-** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
-** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
-** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
-** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
-** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
-** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
-** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
-** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
-** $QT_END_LICENSE$
-**
-****************************************************************************/
-
-import QtQuick 1.0
-
-Rectangle {
-    id: mainRec
-    width:  600
-    height: 400
-    z: 0
-
-//! [adding a sequential animation]
-    Image {
-        id: image1
-        source: "images/qt-logo.svg"
-        width: 100; height: 100
-
-        SequentialAnimation on x {
-            loops: Animation.Infinite
-            NumberAnimation {
-                from: 20; to: 450; easing.type: "InOutQuad";
-                duration: 2000
-            }
-            PauseAnimation { duration: 500 }
-        }
-    }
-//! [adding a sequential animation]
-
-    Image {
-        id: image2
-        source: "images/qt-logo.svg"
-        width: 100; height: 100
-        x: (mainRec.width - 100)/2; y: (mainRec.height - 100)/2
-        z: 2
-    }
-}
diff --git a/doc/src/snippets/declarative/animation-transitions.qml b/doc/src/snippets/declarative/reusablecomponents/Button.qml
index 62bef23..3b97e00 100644
--- a/doc/src/snippets/declarative/animation-transitions.qml
+++ b/doc/src/snippets/declarative/reusablecomponents/Button.qml
@@ -37,26 +37,48 @@
 ** $QT_END_LICENSE$
 **
 ****************************************************************************/
-//![0]
+//! [document]
+//contents of Button.qml
 import QtQuick 1.0
 
+//! [parent begin]
 Rectangle {
-    id: rect
-    width: 100; height: 100
-    color: "red"
-    
-    MouseArea {
-        anchors.fill: parent
-        onClicked: rect.state = "moved"
+//! [parent begin]
+    id: button
+//! [properties]
+    width: 145; height: 60
+    color: "blue"
+    smooth: true; radius: 9
+    property alias text: label.text
+//! [properties]
+    border {color: "#B9C5D0"; width: 1}
+
+    gradient: Gradient {
+        GradientStop {color: "#CFF7FF"; position: 0.0}
+        GradientStop {color: "#99C0E5"; position: 0.57}
+        GradientStop {color: "#719FCB"; position: 0.9}
     }
-    
-    states: State {
-        name: "moved"
-        PropertyChanges { target: rect; x: 50; y: 50 }
+
+    Text {
+        id: label
+        anchors.centerIn: parent
+        text: "Click Me!"
+        font.pointSize: 12
+        color: "blue"
     }
-    
-    transitions: Transition {
-        PropertyAnimation { properties: "x,y"; duration: 1000 }
+
+    MouseArea {
+        anchors.fill: parent
+        onClicked: console.log(text + " clicked")
     }
+//! [parent end]
 }
-//![0]
+//! [parent end]
+
+//! [document]
+
+//! [ellipses]
+    //...
+//! [ellipses]
+
+
diff --git a/doc/src/snippets/declarative/qml-intro/anchors1.qml b/doc/src/snippets/declarative/reusablecomponents/application.qml
index b958138..a09b276 100644
--- a/doc/src/snippets/declarative/qml-intro/anchors1.qml
+++ b/doc/src/snippets/declarative/reusablecomponents/application.qml
@@ -37,20 +37,19 @@
 ** $QT_END_LICENSE$
 **
 ****************************************************************************/
-
 //! [document]
 import QtQuick 1.0
 
 Rectangle {
-    id: myWin
-    width: 500
-    height: 400
+    width: 175; height: 350
+    color: "lightgrey"
 
-    Image {
-        id: image1
-        source: "images/qt-logo.svg"
-        width: 150; height: 150
-        anchors.bottom: myWin.bottom
+    Column {
+        anchors.centerIn: parent
+        spacing: 15
+        Button {}
+        Button {text: "Me Too!"}
+        Button {text: "Me Three!"}
     }
 }
 //! [document]
diff --git a/doc/src/snippets/declarative/animation-standalone.qml b/doc/src/snippets/declarative/reusablecomponents/component.qml
index 0bf3020..8660c50 100644
--- a/doc/src/snippets/declarative/animation-standalone.qml
+++ b/doc/src/snippets/declarative/reusablecomponents/component.qml
@@ -37,27 +37,41 @@
 ** $QT_END_LICENSE$
 **
 ****************************************************************************/
-//![0]
+//! [document]
 import QtQuick 1.0
 
+//! [parent begin]
 Rectangle {
-    id: rect
-    width: 100; height: 100
-    color: "red"
-    
-    PropertyAnimation { 
-        id: animation
-        target: rect
-        properties: "x,y"
-        duration: 1000
+//! [parent begin]
+    id: screen
+    width: 175; height: 175
+    color: "lightgrey"
+
+//! [define inline component]
+    Component {
+        id: inlinecomponent
+        Rectangle {
+            id: display
+            width: 50; height: 50
+            color: "blue"
+        }
     }
-    
+//! [define inline component]
+//! [create inline component]
     MouseArea {
         anchors.fill: parent
         onClicked: {
-            animation.to = 50;
-            animation.running = true;
+            inlinecomponent.createObject(parent)
+
+            var second = inlinecomponent.createObject(parent)
+
+            var third = inlinecomponent.createObject(parent)
+            third.x = second.width + 10
+            third.color = "red"
         }
-    }		
+    }
+//! [create inline component]
+//! [parent end]
 }
-//![0]
+//! [parent end]
+//! [document]
diff --git a/doc/src/snippets/declarative/qml-intro/states1.qml b/doc/src/snippets/declarative/reusablecomponents/focusbutton.qml
index 270d6c3..2522a98 100644
--- a/doc/src/snippets/declarative/qml-intro/states1.qml
+++ b/doc/src/snippets/declarative/reusablecomponents/focusbutton.qml
@@ -37,58 +37,62 @@
 ** $QT_END_LICENSE$
 **
 ****************************************************************************/
-
 //! [document]
+//contents of focusbutton.qml
 import QtQuick 1.0
 
-Rectangle {
-    id: mainRectangle
-    width:  600
-    height: 400
-    color: "black"
+//! [parent begin]
+FocusScope {
+//! [parent begin]
 
-    Rectangle {
-        id: sky
-        width: 600
-        height: 200
-        y: 0
-        color: "lightblue"
-    }
+    //! [expose visuals]
+    //FocusScope needs to bind to visual properties of the children
+    property alias color: button.color
+    x: button.x; y: button.y
+    width: button.width; height: button.height
+    //! [expose visuals]
 
+    //! [rectangle begin]
     Rectangle {
-        id: ground
-        width: 600; height: 200
-        y: 200
-        color: "green"
-    }
+    //! [rectangle begin]
+        id: button
+    //! [properties]
+        width: 145; height: 60
+        color: "blue"
+        smooth: true; radius: 9
+        property alias text: label.text
+    //! [properties]
+        border {color: "#B9C5D0"; width: 1}
 
-    MouseArea {
-        id: mousearea
-        anchors.fill: mainRectangle
-    }
+        gradient: Gradient {
+            GradientStop {color: "#CFF7FF"; position: 0.0}
+            GradientStop {color: "#99C0E5"; position: 0.57}
+            GradientStop {color: "#719FCB"; position: 0.9}
+        }
 
-    states: [ State {
-            name: "night"
-            when: mousearea.pressed == true
-            PropertyChanges { target: sky; color: "darkblue" }
-            PropertyChanges { target: ground; color: "black" }
-        },
-        State {
-            name: "daylight"
-            when: mousearea.pressed == false
-            PropertyChanges { target: sky; color: "lightblue" }
-            PropertyChanges { target: ground; color: "green" }
+        Text {
+            id: label
+            anchors.centerIn: parent
+            text: "Click Me!"
+            font.pointSize: 12
+            color: "blue"
         }
-    ]
 
-    transitions: [ Transition {
-            from: "daylight"; to: "night"
-            ColorAnimation { duration: 1000 }
-        },
-        Transition {
-            from: "night"; to: "daylight"
-            ColorAnimation { duration: 500 }
+        MouseArea {
+            anchors.fill: parent
+            onClicked: console.log(text + " clicked")
         }
-    ]
+    //! [rectangle end]
+    }
+    //! [rectangle end]
+//! [parent end]
 }
+//! [parent end]
+
 //! [document]
+
+//! [ellipses]
+    //...
+//! [ellipses]
+
+
diff --git a/doc/src/snippets/declarative/reusablecomponents/qmldir b/doc/src/snippets/declarative/reusablecomponents/qmldir
new file mode 100644
index 0000000..253732d
--- /dev/null
+++ b/doc/src/snippets/declarative/reusablecomponents/qmldir
@@ -0,0 +1,4 @@
+//! [document]
+Button ./Button.qml
+FocusButton ./focusbutton.qml
+//! [document]
diff --git a/doc/src/snippets/declarative/states.qml b/doc/src/snippets/declarative/states.qml
index c3b7197..ab6b8d0 100644
--- a/doc/src/snippets/declarative/states.qml
+++ b/doc/src/snippets/declarative/states.qml
@@ -37,24 +37,85 @@
 ** $QT_END_LICENSE$
 **
 ****************************************************************************/
-//![0]
+//![document]
 import QtQuick 1.0
- 
+
+//![parent begin]
 Rectangle {
-    id: myRect
-    width: 200; height: 200
-    color: "red"
+//![parent begin]
+
+    id: screen
+    width: 400; height: 500
 
-    MouseArea {
-        anchors.fill: parent
-        onClicked: myRect.state = 'moved'
-    }
+
+Rectangle {
+    id: flag
+}
+Column {
+    spacing: 15
+//![signal states]
+Rectangle {
+    id: signal
+    width: 200; height: 200
+    state: "NORMAL"
 
     states: [
         State {
-            name: "moved"
-            PropertyChanges { target: myRect; x: 50; y: 50 }
+            name: "NORMAL"
+            PropertyChanges { target: signal; color: "green"}
+            PropertyChanges { target: flag; state: "FLAG_DOWN"}
+        },
+        State {
+            name: "CRITICAL"
+            PropertyChanges { target: signal; color: "red"}
+            PropertyChanges { target: flag; state: "FLAG_UP"}
         }
     ]
 }
-//![0]
+//![signal states]
+
+//![switch states]
+Rectangle {
+    id: signalswitch
+    width: 75; height: 75
+    color: "blue"
+
+    MouseArea {
+        anchors.fill: parent
+        onClicked: {
+            if (signal.state == "NORMAL")
+                signal.state = "CRITICAL"
+            else
+                signal.state = "NORMAL"
+        }
+    }
+}
+//![switch states]
+
+//![when property]
+Rectangle {
+    id: bell
+    width: 75; height: 75
+    color: "yellow"
+
+    states: State {
+                name: "RINGING"
+                when: (signal.state == "CRITICAL")
+                PropertyChanges {target: speaker; play: "RING!"}
+            }
+}
+//![when property]
+
+Text {
+    id: speaker
+    property alias play: speaker.text
+    text: "NORMAL"
+}
+
+} // end of row
+
+//![parent end]
+}
+//![parent end]
+
+//![document]
diff --git a/doc/src/snippets/declarative/qml-intro/hello-world5.qml b/doc/src/snippets/declarative/texthandling.qml
index 7357282..377bb8b 100644
--- a/doc/src/snippets/declarative/qml-intro/hello-world5.qml
+++ b/doc/src/snippets/declarative/texthandling.qml
@@ -37,29 +37,53 @@
 ** $QT_END_LICENSE$
 **
 ****************************************************************************/
-
 //! [document]
 import QtQuick 1.0
 
+
+//! [parent begin]
 Rectangle {
-    id: myRectangle
-    width: 500
-    height: 400
+//! [parent begin]
+    width: 300; height: 300
+    id: screen
+
+Column {
+    anchors.centerIn:parent
+
+//! [int validator]
+Column {
+    spacing: 10
 
     Text {
-        text: "<h1>Hello world again</h1>"
-        color: "#002288"
-        x: 100; y: 100
+        text: "Enter a value from 0 to 2000"
     }
+    TextInput {
+        focus: true
+        validator: IntValidator { bottom:0; top: 2000}
+    }
+}
+//! [int validator]
+
+//! [regexp validator]
+Column {
+    spacing: 10
 
-//! [positioning the image]
-    Image {
-        source: "images/qt-logo.svg"
-        x: 100; y: 150
-        width: 150; height: 150
+    Text {
+        text: "Which basket?"
+    }
+    TextInput {
+        focus: true
+        validator: RegExpValidator { regExp: /fruit basket/ }
     }
-//! [positioning the image]
+}
+//! [regexp validator]
 
-    color: "lightgray"
+//end of column
 }
+
+//! [parent end]
+}
+//! [parent end]
+
 //! [document]
+