Merge branch '4.7' of scm.dev.nokia.troll.no:qt/qt-qml into 4.7

6 files changed, 247 insertions, 541 deletions

diff --git a/doc/src/declarative/animation.qdoc b/doc/src/declarative/animation.qdoc
index 7416341..53a0c55 100644
--- a/doc/src/declarative/animation.qdoc
+++ b/doc/src/declarative/animation.qdoc
@@ -156,11 +156,13 @@ The \l {PropertyAnimation::}{to} property is also required to specify the new
 \section2 Standalone Animations
 
 Animations can also be created as ordinary QML objects that are not bound to
-any particular objects and properties. An example:
+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-standalone.qml 0
 
-A standalone animation is not running by default and must be started explicitly
+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
@@ -183,10 +185,13 @@ object and add it to an item's \l {Item::}{transitions} property. An example:
 
 \snippet doc/src/snippets/declarative/animation-transitions.qml 0
 
-When the \l Rectangle changes to the \e moved state, its \c x and \c y property
-values are changed by the PropertyChanges object, and the PropertyAnimation
-defined within the \l Transition is triggered on these properties. The
-animation will not be applied at any time other than during the state change.
+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.
 
 Notice the example does not set any \l {PropertyAnimation::}{from} and \l
 {PropertyAnimation::}{to} values for the PropertyAnimation. As a convenience,
@@ -234,7 +239,7 @@ and rotation changes.
 
 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:
+following animates the rectangle's \l {Rectangle::}{color} property:
 
 \snippet doc/src/snippets/declarative/animation-elements.qml color
 
diff --git a/doc/src/declarative/declarativeui.qdoc b/doc/src/declarative/declarativeui.qdoc
index ce35f26..ed8b734 100644
--- a/doc/src/declarative/declarativeui.qdoc
+++ b/doc/src/declarative/declarativeui.qdoc
@@ -33,7 +33,7 @@
 dynamic, custom user interfaces.
 
 Qt Quick provides a declarative framework for building highly dynamic,
-custom user interfaces from a rich set of \l {QML Elements}{QML elements}.
+custom user interfaces from a rich set of \l{QML Elements}{QML elements}.
 Qt Quick helps programmers and designers collaborate to
 build the fluid user interfaces that are becoming common in portable
 consumer devices, such as mobile phones, media players, set-top boxes
@@ -41,72 +41,74 @@ and netbooks. Qt Quick consists of the QtDeclarative C++ module, QML, and
 the integration of both of these into the Qt Creator IDE. Using the QtDeclarative
 C++ module, you can load and interact with QML files from your Qt application.
 
-QML provides mechanisms to declaratively build an object tree using
-\l {QML Elements}{QML elements}. QML improves the integration between 
-\l {http://www.ecma-international.org/publications/standards/Ecma-262.htm}{JavaScript}
-and Qt's existing QObject based type
-system, adds support for automatic \l {Property Binding}{property
-bindings} and provides \l {Network Transparency}{network transparency}
-at the language level.
+QML is an extension to \l{About JavaScript}{JavaScript}, that provides
+a mechanism to declaratively build an object tree of
+\l{QML Elements}{QML elements}.  QML improves the integration between
+JavaScript and Qt's existing QObject-based type system, adds support for
+automatic \l{Property Binding}{property bindings} and provides
+\l{Network Transparency}{network transparency} at the language level.
 
-The \l {QML Elements}{QML elements} are a sophisticated set of
+The \l{QML Elements}{QML elements} are a sophisticated set of
 graphical and behavioral building blocks.  These different elements
-are combined together in \l {QML Documents}{QML documents} to build
+are combined together in \l{QML Documents}{QML documents} to build
 components ranging in complexity from simple buttons and sliders, to
-complete internet-enabled applications like a \l
-{http://www.flickr.com}{Flickr} photo browser.
+complete Internet-enabled applications like a photo browser for the
+popular \l{http://www.flickr.com}{Flickr} photo-sharing site.
 
-Qt Quick builds on \l {QML for Qt programmers}{Qt's existing
-strengths}.  QML can be be used to incrementally extend an existing
-application or to build completely new applications.  QML is fully \l
-{Extending QML in C++}{extensible from C++} through the QtDeclarative Module.
+Qt Quick builds on \l{QML for Qt programmers}{Qt's existing strengths}.
+QML can be be used to incrementally extend an existing application or
+to build completely new applications.  QML is fully
+\l{Extending QML in C++}{extensible from C++} through the QtDeclarative
+Module.
 
 \section1 Getting Started
 
 \list
-\o \l {Introduction to the QML language}
-\o \l {QML Tutorial}{Tutorial: 'Hello World'}
-\o \l {QML Advanced Tutorial}{Tutorial: 'Same Game'}
-\o \l {QML Examples and Demos}
-\o \l {QML for Qt programmers}
+\o \l{Introduction to the QML language}
+\o \l{QML Tutorial}{Tutorial: 'Hello World'}
+\o \l{QML Advanced Tutorial}{Tutorial: 'Same Game'}
+\o \l{QML Examples and Demos}
+\o \l{QML for Qt Programmers}
+\o \l{Getting Started Programming with QML}
+\o \l{Beginning Qt Quick}
 \endlist
 
 \section1 Core QML Features
 \list
-\o \l {QML Documents}
-\o \l {Property Binding}
-\o \l {Network Transparency}
-\o \l {QML Scope}
-\o \l {Integrating JavaScript}
-\o \l {Data Models}
-\o \l {anchor-layout.html}{Anchor-based Layout}
-\o \l {qdeclarativestates.html}{States}
-\o \l {qdeclarativeanimation.html}{Animation}
-\o \l {qdeclarativefocus.html}{Keyboard Focus}
-\o \l {qdeclarativemodules.html}{Modules}
-\o \l {Extending types from QML}
-\o \l {qdeclarativedynamicobjects.html}{Dynamic Object Creation}
+\o \l{QML Documents}
+\o \l{Property Binding}
+\o \l{Network Transparency}
+\o \l{QML Scope}
+\o \l{Integrating JavaScript}
+\o \l{Data Models}
+\o \l{Anchor-based Layout in QML}
+\o \l{QML States}
+\o \l{QML Animation}
+\o \l{Keyboard Focus in QML}
+\o \l{QML Modules}
+\o \l{Extending types from QML}
+\o \l{Dynamic Object Management in QML}
+\o \l{Qt Declarative UI Runtime}
 \endlist
 
 \section1 Using QML with C++
 \list
-\o \l {qmlruntime.html}{The Qt Declarative Runtime}
-\o \l {Using QML in C++ Applications}
-\o \l {Integrating QML with existing Qt UI code}
-\o \l {Tutorial: Writing QML extensions with C++}
-\o \l {Extending QML in C++}
+\o \l{Using QML in C++ Applications}
+\o \l{Integrating QML with existing Qt UI code}
+\o \l{Tutorial: Writing QML extensions with C++}
+\o \l{Extending QML in C++}
 \endlist
 
 \section1 Reference
 \list
-\o \l {QML Elements}
-\o \l {QML Global Object}
-\o \l {QML Internationalization}
-\o \l {QML Security}
-\o \l {QtDeclarative Module}
-\o \l {Debugging QML}
-\o \l {QML Viewer}
-\o \l {QML Performance}
-\o \l {QML Coding Conventions}
+\o \l{QML Elements}
+\o \l{QML Global Object}
+\o \l{QML Internationalization}
+\o \l{QML Security}
+\o \l{QtDeclarative Module}
+\o \l{Debugging QML}
+\o \l{QML Viewer}
+\o \l{QML Performance}
+\o \l{QML Coding Conventions}
 \endlist
 */
diff --git a/doc/src/declarative/dynamicobjects.qdoc b/doc/src/declarative/dynamicobjects.qdoc
index 997f601..e735bce 100644
--- a/doc/src/declarative/dynamicobjects.qdoc
+++ b/doc/src/declarative/dynamicobjects.qdoc
@@ -27,7 +27,7 @@
 
 /*!
 \page qdeclarativedynamicobjects.html
-\title Dynamic Object Management
+\title Dynamic Object Management in QML
 
 QML provides a number of ways to dynamically create and manage QML objects. 
 The \l{Loader}, \l{Repeater}, \l{ListView}, \l{GridView} and \l{PathView} elements
diff --git a/doc/src/declarative/elements.qdoc b/doc/src/declarative/elements.qdoc
index c008404..94abe10 100644
--- a/doc/src/declarative/elements.qdoc
+++ b/doc/src/declarative/elements.qdoc
@@ -26,113 +26,151 @@
 ****************************************************************************/
 
 /*!
-\page qdeclarativeelements.html
-\target elements
-\title QML Elements
-
-The following table lists the QML elements provided by the \l {QtDeclarative}{Qt Declarative} module.
-
-\table 
-\header \o {2,1} \bold {Basic Visual Items}
-\row \o \l {Item} \o Basic item element inherited by all visual items in QML
-\row \o \l {Rectangle} \o Basic visual rectangle element
-\row \o \l {Gradient} \o Defines a gradient between two or more colors
-\row \o \l {GradientStop} \o Defines a color used in a \l {Gradient}
-\row \o \l {Image} \o Allows the use of bitmaps to a scene
-\row \o \l {BorderImage} (Item-specific) \o Defines an image as a border
-\row \o \l {AnimatedImage} \o For playing animations stored as a series of frames
-\row \o \l {Text} \o Allows the use of formatted text in a scene
-\row \o \l {TextInput} \o Displays an editable line of text
-\row \o \l {IntValidator} \o Validator for integer values
-\row \o \l {DoubleValidator} \o Validator for non-integer values
-\row \o \l {RegExpValidator} \o Validator for string regular expressions
-\row \o \l {TextEdit} \o Displays multiple lines of editable formatted text
-
-\header \o {2,1} \bold {Basic Interaction Items}
-\row \o \l {MouseArea} \o Handles mouse interactions
-\row \o \l {FocusScope} \o For keyboard focus handling 
-\row \o \l {Flickable} \o Provides a surface that can be "flicked"  
-\row \o \l {Flipable} \o Provides a surface that produces flipping effects
-\row \o \l {GestureArea} (experimental) \o Enables simple gesture handling
- 
-\header \o {2,1} \bold {States}
-\row \o \l {State} \o Defines sets of configurations of objects and properties
-\row \o \l {PropertyChanges} \o Describes property changes within a state
-\row \o \l {StateGroup} \o Contains a set of states and state transitions
-\row \o \l {StateChangeScript} \o Allows script binding in a state
-\row \o \l {ParentChange} (Item-specific) \o Re-parent an Item in a state change
-\row \o \l {AnchorChanges} \o Change the anchors of an item in a state
-
-\header \o {2,1} \bold {Animation and Transitions}
-\row \o \l {Behavior} \o Specifies a default animation for property changes
-\row \o \l {SequentialAnimation} \o Runs animations sequentially
-\row \o \l {ParallelAnimation} \o Runs animations in parallel
-\row \o \l {PropertyAnimation} \o Animates property changes
-\row \o \l {NumberAnimation} \o Animates properties of type qreal
-\row \o \l {Vector3dAnimation} \o Animates properties of type QVector3d
-\row \o \l {ColorAnimation} \o Animates color changes
-\row \o \l {RotationAnimation} \o Animates rotations
-\row \o \l {ParentAnimation} \o Animates parent changes
-\row \o \l {AnchorAnimation} \o Animates anchor changes
-\row \o \l {PauseAnimation} \o Pauses an animation 
-\row \o \l {SmoothedAnimation} \o Allows a property to smoothly track a value
-\row \o \l {SpringAnimation} \o Allows a property to track a value in a spring-like motion
-\row \o \l {PropertyAction} \o Sets immediate property changes during animation
-\row \o \l {ScriptAction} \o Runs scripts during an animation
-\row \o \l {Transition} \o Animates transitions during state changes
-
-\header \o {2,1} \bold {Working with Data}
-\row \o \l {Binding} \o Binds any value to any property
-\row \o \l {ListModel} \o Defines a list of data
-\row \o \l {ListElement} \o Defines a data item in a \l {ListModel}
-\row \o \l {VisualItemModel} \o Contains items that already defines its own visual delegate
-\row \o \l {VisualDataModel} \o Encapsulates a model and a delegate
-\row \o \l {Package} \o Collection that enables sharing of items within different views
-\row \o \l {XmlListModel} \o Specifies a model using XPath expressions 
-\row \o \l {XmlRole}  \o Specifies a role for an \l {XmlListModel}
-
-\header \o {2,1} \bold {Views}
-\row \o \l {ListView} \o Provides a list visualization of a model
-\row \o \l {GridView} \o Provides a grid visualization of a model
-\row \o \l {PathView} \o Visualizes a model's contents along a path
-\row \o \l {Path} \o Defines a path used by \l {PathView}
-\row \o \l {PathLine}  \o Defines a line in \l {Path}
-\row \o \l {PathQuad}  \o Defines a quadratic Bezier curve in a \l {Path}
-\row \o \l {PathCubic}  \o Defines a cubic Bezier curve in a \l {Path}
-\row \o \l {PathAttribute}  \o Allows the setting of attributes along a \l {Path}
-\row \o \l {PathPercent}  \o Modifies the item distribution along a \l {Path}
-\row \o \l {WebView} \o Allows the addition of web content to a canvas
-
-\header \o {2,1} \bold {Positioners}
-\row \o \l {Column} \o Arranges its children vertically
-\row \o \l {Row} \o Arranges its children horizontally
-\row \o \l {Grid} \o Positions its children in a grid
-\row \o \l {Flow} \o Positions its children with wrapping support
-
-\header \o {2,1} \bold {Utility}
-\row \o \l {Connections} \o Explicitly connects signals and signal handlers
-\row \o \l {Component} \o Encapsulate QML items as a component
-\row \o \l {Timer} \o Provides timed triggers 
-\row \o \l {QML:QtObject} {QtObject} \o Basic element containing only the objectName property
-\row \o \l {QML:Qt} {Qt} \o The QML global Qt object provides useful enums and functions from Qt.
-\row \o \l {WorkerScript} \o Enables the use of threads in QML
-\row \o \l {Loader} \o Controls the loading of items or components
-\row \o \l {Repeater} \o Uses a model to create multiples of components
-\row \o \l {SystemPalette} \o Provides access to the Qt palettes
-\row \o \l {FontLoader} \o Loads fonts by name or URL
-\row \o \l {LayoutItem} \o Allows declarative UI elements inside Qt's Graphics View layouts 
-
-\header \o {2,1} \bold {Transforms}
-\row \o \l {Scale} \o Assigns item scaling behaviors
-\row \o \l {Rotation} \o Assigns item rotation behaviors
-\row \o \l {Translate} \o Assigns item translation behaviors
-
-\header \o {2,1} \bold {Effects}
-\row \o \l {Particles} (experimental) \o Generates and animates particles
-\row \o \l {ParticleMotionLinear} \o Adds linear motion behavior to \l {Particles}
-\row \o \l {ParticleMotionGravity} \o Adds gravitational motion to \l {Particles}
-\row \o \l {ParticleMotionWander} \o Adds varied motions to \l {Particles}
-\endtable
+  \page qdeclarativeelements.html
+  \target elements
+  \title QML Elements
 
+  This is a dictionary of all the QML elements available in the \l
+  {QtDeclarative} {Qt Declarative} module. 
+
+  To see the QML elements listed by
+  functional area, \l{Groups Of Related QML Elements} {look here}.
+
+  \generatelist qmlclasses
+
+*/
+
+
+/*!
+    \group qml-groups
+    \title Groups Of Related QML Elements
+
+    \brief If you know what kind of QML element you want (Basic Visual, 
+    Interaction, Animation, etc), look here.
+
+    This is a list of functional groups of QML elements.
+
+    \generatelist{related}
+
+*/
+
+/*!
+    \group qml-basic-visual-elements
+    \title Basic QML Visual Elements
+    \ingroup qml-groups
+
+    \brief Elements for constructing basic visual items.
+
+    \generatelist{related}
+
+*/
+
+/*!
+    \group qml-basic-interaction-elements
+    \title Basic QML Interaction Elements
+    \ingroup qml-groups
+
+    \brief Elements for handling basic interactions.
+
+    \generatelist{related}
+
+*/
+
+/*!
+    \group qml-state-elements
+    \title QML State Elements
+    \ingroup qml-groups
+
+    \brief Elements for handling state changes.
+
+    \generatelist{related}
+
+*/
+
+/*!
+    \group qml-event-elements
+    \title QML Event Elements
+    \ingroup qml-groups
+
+    \brief Elements for handling events.
+
+    \generatelist{related}
+
+*/
+
+/*!
+    \group qml-animation-transition
+    \title QML Animation and Transition Elements
+    \ingroup qml-groups
+
+    \brief Elements for handling animations and transitions.
+
+    \generatelist{related}
+
+*/
+
+/*!
+    \group qml-working-with-data
+    \title Working With Data in QML
+    \ingroup qml-groups
+
+    \brief Elements for working with data.
+
+    \generatelist{related}
+
+*/
+
+/*!
+    \group qml-view-elements
+    \title QML View Elements
+    \ingroup qml-groups
+
+    \brief Elements for handling views.
+
+    \generatelist{related}
+
+*/
+
+/*!
+    \group qml-positioning-elements
+    \title QML Positioning Elements
+    \ingroup qml-groups
+
+    \brief Elements for positioning items.
+
+    \generatelist{related}
+
+*/
+
+/*!
+    \group qml-utility-elements
+    \title QML Utility Elements
+    \ingroup qml-groups
+
+    \brief Elements for handling misc operations.
+
+    \generatelist{related}
+
+*/
+
+/*!
+    \group qml-transform-elements
+    \title QML Transform Elements
+    \ingroup qml-groups
+
+    \brief Elements for handling transformations.
+
+    \generatelist{related}
+
+*/
+
+/*!
+    \group qml-particle-elements
+    \title QML Particle Elements
+    \ingroup qml-groups
+
+    \brief Elements for handling particle effects.
+
+    \generatelist{related}
 
 */
diff --git a/doc/src/declarative/qml-intro.qdoc b/doc/src/declarative/qml-intro.qdoc
index fbab001..69dd500 100644
--- a/doc/src/declarative/qml-intro.qdoc
+++ b/doc/src/declarative/qml-intro.qdoc
@@ -28,14 +28,11 @@
 
 
 /*!
-
-\page  qml-intro.html
+\page qml-intro.html
 \title Beginning 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
@@ -61,12 +58,7 @@ would be a property.
 
 The basic syntax of an \l {QML Elements}{element} is
 
-    \code
-    SomeElement {
-        id: myObject
-        ... some other things here ...
-    }
-    \endcode
+\snippet doc/src/snippets/declarative/qml-intro/basic-syntax.qml basic syntax
 
 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 
@@ -90,61 +82,38 @@ want a rectangle that is 500 pixels by 400 pixels in the x and y directions
 
 We can implement this \l Rectangle with these properties this way
 
-    \code
-    import Qt 4.7
-
-    // This is a comment. And below myRectangle is defined.
-    Rectangle {
-        id: myRectangle
-        width: 500
-        height: 400
-    }
-    \endcode
+\quotefile doc/src/snippets/declarative/qml-intro/rectangle.qml
 
 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 command
+myexample.qml, and on the command line run the following command:
 
-    \code
-    qmlviewer myexample.qml
-    \endcode
+\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
-    
+\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
+\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}{text}
-property to "Hello World!". So to set the text to 'Hello world' and the
+\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,
 
-    \code
-    import Qt 4.7
-    
-    Rectangle {
-        id: myRectangle
-        width: 500
-        height: 400
-
-        Text { text: "Hello World!" }
-
-        color: "lightgray"
-    }
-    \endcode
+\quotefile doc/src/snippets/declarative/qml-intro/hello-world1.qml
 
 
 \section1 Hello World Again
@@ -158,12 +127,7 @@ 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
 
-    \code
-    Text {
-        text: "<h2>Hello World</h2>"; color: "darkgreen"
-        x: 100; y:100
-    }
-    \endcode
+\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
@@ -174,13 +138,7 @@ 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,
 
-    \code
-    Text {
-        text: "<h1>Hello world again</h1>"
-        color: "#002288"
-        x: 100; y: 100
-    }
-    \endcode
+\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.
@@ -198,11 +156,7 @@ 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"}.
 
-    \code
-    Image {
-        source: "images/qt-logo.png"
-    }
-    \endcode
+\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
@@ -213,44 +167,12 @@ 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,
 
-    \code
-    Image {
-        source: "images/qt-logo.png"
-        x: 100; y: 150
-        width: 150; height: 150
-    }
-    \endcode
+\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.
 
-    \code
-    import Qt 4.7
-
-    Rectangle {
-        id: myRectangle
-        width: 500
-        height: 400
-        
-        // A light gray background
-        color: "lightgray"
-
-        // Position and color some text
-        Text {
-            text: "<h1>Hello world again</h1>"
-            color: "darkgreen"
-            x: 100; y: 100
-        }
-
-        // Using the opportunity to resize the image.
-        Image {
-            source: "images/qt-logo.png"
-            x: 100; y: 150
-            width: 150; height: 150
-        }
-
-    }
-    \endcode
+\quotefile doc/src/snippets/declarative/qml-intro/hello-world5.qml
 
 The result is still quite simple
 
@@ -281,22 +203,7 @@ 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
 
-    \code
-    import Qt 4.7
-
-    Rectangle {
-        id: myWin
-        width: 500
-        height: 400
-
-        Image {
-            id: image1
-            source: "images/qt-logo.png"
-            width: 150; height: 150
-            anchors.bottom: myWin.bottom
-        }
-    }
-    \endcode
+\quotefile doc/src/snippets/declarative/qml-intro/anchors1.qml
 
 This places the logo at the bottom left of the window.
 
@@ -315,25 +222,7 @@ the bottomMargin property is used. So the new actions for the script are
 
 Encoded into QML the script becomes
 
-    \code
-    import Qt 4.7
-
-    Rectangle {
-        id: myWin
-        width: 500
-        height: 400
-
-        Image {
-            id: image1
-            source: "images/qt-logo.png"
-            width: 150; height: 150
-            anchors.bottom: myWin.bottom
-            anchors.horizontalCenter: myWin.horizontalCenter
-            anchors.bottomMargin: 10
-        }
-    }
-    \endcode
-
+\quotefile doc/src/snippets/declarative/qml-intro/anchors2.qml
 
 Run this and resize the window. You will see that now the position of the
 image adjusts during the resize.
@@ -344,14 +233,7 @@ 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
 
-    \code
-    Text {
-        text: "<h2>The Qt Logo</h2>"
-        anchors.bottom: image1.top
-        anchors.horizontalCenter: myWin.horizontalCenter
-        anchors.bottomMargin: 15
-    }
-    \endcode
+\snippet doc/src/snippets/declarative/qml-intro/anchors3.qml adding some text
 
 \image qml-intro-anchors3.png
 
@@ -359,17 +241,15 @@ above the image
 referencing these properties from another object we use the property
 directly, instead of saying:
 
-    \code
-    myRectangle.anchors.top  // Wrong
-    \endcode
+\qml
+myRectangle.anchors.top  // Wrong
+\endqml
 
 we use
 
-    \code
-    myRectangle.top         // Correct
-    \endcode
-
-
+\qml
+myRectangle.top         // Correct
+\endqml
 
 
 \section1 Transformations
@@ -391,9 +271,9 @@ 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
 
-    \code
-    myList: [ listElement1, listElement2, ... } ]
-    \endcode
+\qml
+myList: [ listElement1, listElement2, ... } ]
+\endqml
 
 we can produce a list of transformations.
 
@@ -402,46 +282,7 @@ vertically by a factor of 1.5 and by 1.2 horizontally.
 
 Using the example above as the basis for this we have,
 
-    \code
-    import Qt 4.7
-
-    Rectangle {
-        id: myWin
-        width: 500
-        height: 400
-
-        Image {
-            id: image1
-            source: "images/qt-logo.png"
-            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
-            }
-
-        }
-        
-        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 } ,
-            
-                Rotation {
-                    origin.x: 75; origin.y: 75
-                    axis{ x: 0; y: 0; z:1 }  angle: -45
-                }
-            ]
-        }
-    }
-    \endcode
+\quotefile doc/src/snippets/declarative/qml-intro/transformations1.qml
 
 The code block in \c image1 starting with \c transform specifies that the
 \l {Item::transform}{transform} property will be a Rotation through -90
@@ -479,30 +320,7 @@ 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.
 
-    \code
-    import Qt 4.7
-
-    Rectangle {
-        id: mainRec
-        width:  600
-        height: 400
-
-        Image {
-            id: image1
-            source: "images/qt-logo.png"
-            x: 200; y: 100
-            width: 100; height: 100
-            
-            // Animate a rotation
-            transformOrigin: Item.Center
-            NumberAnimation on rotation {
-                from: 0; to: 360
-                duration: 2000
-                loops: Animation.Infinite
-            }
-        }
-    }
-    \endcode
+\quotefile doc/src/snippets/declarative/number-animation1.qml
 
 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
@@ -515,32 +333,7 @@ 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.
 
-    \code
-    import Qt 4.7
-
-    Rectangle {
-        id: mainRec
-        width:  600
-        height: 400
-
-        Image {
-            id: image1
-            source: "images/qt-logo.png"
-            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
-                }
-            }
-        }
-    }
-    \endcode
+\quotefile doc/src/snippets/declarative/number-animation2.qml
 
 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
@@ -569,31 +362,7 @@ will be animating the position and the size of the image.
 
 First create two images
 
-    \code
-    import Qt 4.7
-
-    Rectangle {
-        id: mainRec
-        width:  600
-        height: 400
-        z: 0
-
-        Image {
-            id: image1
-            source: "images/qt-logo.png"
-            x: 20; y: 20 ; z: 1
-            width: 100; height: 100
-        }
-
-        Image {
-            id: image2
-            source: "images/qt-logo.png"
-            width: 100; height: 100
-            x: (mainRec.width - 100)/2; y: (mainRec.height - 100)/2
-            z: 2
-        }
-    }
-    \endcode
+\quotefile doc/src/snippets/declarative/sequential-animation1.qml
 
 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
@@ -606,14 +375,7 @@ 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.
 
-    \code
-    SequentialAnimation on x {
-        loops: Animation.Infinite
-        NumberAnimation { from: 20; to: 450; easing.type: "InOutQuad";
-duration: 2000 }
-        PauseAnimation { duration: 500 }
-    }
-    \endcode
+\snippet doc/src/snippets/declarative/sequential-animation2.qml adding a sequential animation
 
 A similar block of code is written for the animation of the 'y' value of
 the position.
@@ -628,54 +390,7 @@ 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
 
-    \code
-    Rectangle {
-        id: mainRec
-        width:  600
-        height: 400
-        z: 0
-
-        Image {
-            id: image2
-            source: "images/qt-logo.png"
-            width: 100; height: 100
-            x: (mainRec.width - 100)/2; y: (mainRec.height - 100)/2
-            z: 2
-        }
-
-        Image {
-            id: image1
-            source: "images/qt-logo.png"
-            x: 20; y: 20 ; z: 1
-            width: 100; height: 100
-
-            SequentialAnimation on x {
-                loops: Animation.Infinite
-                NumberAnimation {
-                    from: 20; to: 450
-                    easing.type: "InOutQuad"; duration: 2000
-                }
-                PauseAnimation { duration: 500 }
-            }
-            
-            SequentialAnimation on y {
-                loops: Animation.Infinite
-                NumberAnimation {
-                    from: 20; to: 250
-                    easing.type: "InOutQuad"; duration: 2000
-                }
-                PauseAnimation { duration: 500 }
-            }
-
-            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 }
-            }
-        }
-    }
-    \endcode
+\quotefile doc/src/snippets/declarative/sequential-animation3.qml
 
 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
@@ -756,60 +471,7 @@ 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
 
-    \code
-    import Qt 4.7
-
-    Rectangle {
-        id: mainRectangle
-        width:  600
-        height: 400
-        color: "black"
-
-        Rectangle {
-            id: sky
-            width: 600
-            height: 200
-            y: 0
-            color: "lightblue"
-        }
-
-        Rectangle {
-            id: ground
-            width: 600; height: 200
-            y: 200
-            color: "green"
-        }
-
-        MouseArea {
-            id: mousearea
-            anchors.fill: mainRectangle
-        }
-
-        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" }
-            }
-        ]
-
-        transitions: [ Transition {
-                from: "daylight"; to: "night"
-                ColorAnimation { duration: 1000 }
-            },
-            Transition {
-                from: "night"; to: "daylight"
-                ColorAnimation { duration: 500 }
-            }
-        ]
-    }
-    \endcode
+\quotefile doc/src/snippets/declarative/states1.qml
 
 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
diff --git a/doc/src/declarative/qtprogrammers.qdoc b/doc/src/declarative/qtprogrammers.qdoc
index 68d56bf..c0639db 100644
--- a/doc/src/declarative/qtprogrammers.qdoc
+++ b/doc/src/declarative/qtprogrammers.qdoc
@@ -26,10 +26,9 @@
 ****************************************************************************/
 
 /*!
-
 \page qtprogrammers.html
 \target qtprogrammers
-\title QML for Qt programmers
+\title QML for Qt Programmers
 
 \section1 Overview