Doc work.

8 files changed, 341 insertions, 137 deletions

diff --git a/doc/src/declarative/animation.qdoc b/doc/src/declarative/animation.qdoc
index a143d4c..cd7d1b9 100644
--- a/doc/src/declarative/animation.qdoc
+++ b/doc/src/declarative/animation.qdoc
@@ -1,6 +1,6 @@
 /*! 
-\page animation.html
-\target animation
+\page qmlanimation.html
+\target qmlanimation
 \title QML Animation
 
 QML supports three different forms of animation - basic property animation, 
diff --git a/doc/src/declarative/effects.qdoc b/doc/src/declarative/effects.qdoc
index e3c68bd..6181e20 100644
--- a/doc/src/declarative/effects.qdoc
+++ b/doc/src/declarative/effects.qdoc
@@ -1,17 +1,15 @@
 /*! 
 \page effects.html
-\target effects
+\target qmleffects
 \title Visual Effects
 
-
 \section1 Basic Effects
 
-These effects are currently supported by all canvas backends.
-
 \list
 \o Scaling (\l Item \bold scale property)
 \o Opacity (\l Item \bold opacity property)
-\o Z-Axis Rotation (\l Item \bold rotation property)
+\o Rotation (\l Item \bold rotation property, and Rotation3D)
+\o Affine Transforms (\l Squish)
 \endlist
 
 \section1 Advanced Effects
@@ -20,7 +18,7 @@ These effects are currently only supported by the OpenGL canvas backend. Support
 backends may be added if the performance can be made acceptable.
 
 \list
-\o X/Y-Axis Rotation (see \l Transform)
+\o Perspective Transforms (\l Perspective, Translation3D)
 \o \l Shadow
 \o \l Blur
 \o \l Reflection
diff --git a/doc/src/declarative/index.qdoc b/doc/src/declarative/index.qdoc
index b5e9001..fe1b46e 100644
--- a/doc/src/declarative/index.qdoc
+++ b/doc/src/declarative/index.qdoc
@@ -1,51 +1,51 @@
-/*! 
-\page qml.html
-\title 'Qt Declarative' Documentation
-
-\target qtdeclarativemainpage
-
-The Qt Declarative module provides a user interface framework for building 
-highly dynamic and fluid applications.  It is targetted at the sorts of user 
-interface and the sorts of hardware in embedded devices such as phones, media 
-players, and set-top boxes. It is also appropriate for highly custom desktop 
-user-interfaces, or special elements in more traditional desktop 
-user-interfaces.
-
-Building fluid applications is done declaratively, rather than procedurally.
-That is, you specify \e what the UI should look like and how it should behave 
-in an declarative format called QML instead of specifying step-by-step \e how to
-build it in a language like C++ or JavaScript.  Specifying a UI declaratively 
-does not just include the layout of the interface items, but also the way each
-individual item looks and behaves and the overall flow of the application.
-
-Getting Started:
-\list
-\o \l {qmlexamples}{Examples}
-\o \l {tutorial}{Tutorial}
-\o \l {qmlforcpp}{Qt Declarative Markup Language For C++ Programmers}
-\endlist
-
-Core Features:
-\list
-\o \l {binding}{Data Binding}
-\o \l {anchor-layout}{Layout Anchors}
-\o \l {animation}{Animation}
-\o \l {effects}{Visual Effects}
-\o \l {components}{Components}
-\o \l {qmlmodules}{Modules}
-\o \l {qmlfocus}{Keyboard Focus}
-\endlist
-
-QML Reference:
-\list
-\o \l {elements}{Qml Elements}
-\endlist
-
-C++ Reference:
-\list
-\o \l {qtprogrammers}{QML for Qt programmers}
-\o \l {qtbinding}{C++ Data Binding}
-\o \l {cppitem}{C++ Components}
-\endlist
-
+/*!
+    \page qml.html
+    \title 'Qt Declarative' Documentation
+
+    \target qtdeclarativemainpage
+
+    The Qt Declarative module provides a declarative framework for building
+    highly dynamic and fluid applications. It is targetted at the sorts of user
+    interface (and the sorts of hardware) in embedded devices such as phones, media
+    players, and set-top boxes. It is also appropriate for highly custom desktop
+    user-interfaces, or special elements in more traditional desktop
+    user-interfaces.
+
+    Building fluid applications is done declaratively, rather than procedurally.
+    That is, you specify \e what the UI should look like and how it should behave
+    in an declarative format called QML, rather than specifying step-by-step \e how to
+    build it in a language like C++ or JavaScript.  Specifying a UI declaratively
+    does not just include the layout of the interface items, but also the way each
+    individual item looks and behaves and the overall flow of the application.
+
+    Getting Started:
+    \list
+    \o \l {qmlexamples}{Examples}
+    \o \l {tutorial}{Tutorial: 'Hello World'}
+    \o \l {tutorials-declarative-contacts.html}{Tutorial: 'Introduction to QML'}
+    \o \l {qmlforcpp}{Qt Declarative Markup Language For C++ Programmers}
+    \endlist
+
+    Core Features:
+    \list
+    \o \l {binding}{Data Binding}
+    \o \l {anchor-layout}{Layout Anchors}
+    \o \l {qmlanimation}{Animation}
+    \o \l {qmleffects}{Visual Effects}
+    \o \l {components}{Components}
+    \o \l {qmlmodules}{Modules}
+    \o \l {qmlfocus}{Keyboard Focus}
+    \endlist
+
+    QML Reference:
+    \list
+    \o \l {elements}{Qml Elements}
+    \endlist
+
+    C++ Reference:
+    \list
+    \o \l {qtprogrammers}{QML for Qt programmers}
+    \o \l {qtbinding}{C++ Data Binding}
+    \o \l {cppitem}{C++ Components}
+    \endlist
 */
diff --git a/doc/src/declarative/qtdeclarative.qdoc b/doc/src/declarative/qtdeclarative.qdoc
new file mode 100644
index 0000000..666c8ae
--- /dev/null
+++ b/doc/src/declarative/qtdeclarative.qdoc
@@ -0,0 +1,93 @@
+/****************************************************************************
+**
+** Copyright (C) 2009 Nokia Corporation and/or its subsidiary(-ies).
+** Contact: Qt Software Information (qt-info@nokia.com)
+**
+** This file is part of the documentation of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL$
+** No Commercial Usage
+** This file contains pre-release code and may not be distributed.
+** You may use this file in accordance with the terms and conditions
+** contained in the either Technology Preview License Agreement or the
+** Beta Release License Agreement.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 2.1 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPL included in the
+** packaging of this file.  Please review the following information to
+** ensure the GNU Lesser General Public License version 2.1 requirements
+** will be met: http://www.gnu.org/licenses/old-licenses/lgpl-2.1.html.
+**
+** In addition, as a special exception, Nokia gives you certain
+** additional rights. These rights are described in the Nokia Qt LGPL
+** Exception version 1.0, included in the file LGPL_EXCEPTION.txt in this
+** package.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3.0 as published by the Free Software
+** Foundation and appearing in the file LICENSE.GPL included in the
+** packaging of this file.  Please review the following information to
+** ensure the GNU General Public License version 3.0 requirements will be
+** met: http://www.gnu.org/copyleft/gpl.html.
+**
+** If you are unsure which license is appropriate for your use, please
+** contact the sales department at qt-sales@nokia.com.
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+/*!
+    \module QtDeclarative
+    \title QtDeclarative Module
+    \ingroup modules
+
+    \brief The Qt Declarative module provides a declarative framework for building
+    highly dynamic and fluid applications.
+
+    Qt Declarative is targetted at the sorts of user
+    interface (and the sorts of hardware) in embedded devices such as phones, media
+    players, and set-top boxes. It is also appropriate for highly custom desktop
+    user-interfaces, or special elements in more traditional desktop
+    user-interfaces.
+
+    Building fluid applications is done declaratively, rather than procedurally.
+    That is, you specify \e what the UI should look like and how it should behave
+    in an declarative format called QML, rather than specifying step-by-step \e how to
+    build it in a language like C++ or JavaScript.  Specifying a UI declaratively
+    does not just include the layout of the interface items, but also the way each
+    individual item looks and behaves and the overall flow of the application.
+
+    Getting Started:
+    \list
+    \o \l {qmlexamples}{Examples}
+    \o \l {tutorial}{Tutorial: 'Hello World'}
+    \o \l {tutorials-declarative-contacts.html}{Tutorial: 'Introduction to QML'}
+    \o \l {qmlforcpp}{Qt Declarative Markup Language For C++ Programmers}
+    \endlist
+
+    Core Features:
+    \list
+    \o \l {binding}{Data Binding}
+    \o \l {anchor-layout}{Layout Anchors}
+    \o \l {qmlanimation}{Animation}
+    \o \l {qmleffects}{Visual Effects}
+    \o \l {components}{Components}
+    \o \l {qmlmodules}{Modules}
+    \o \l {qmlfocus}{Keyboard Focus}
+    \endlist
+
+    QML Reference:
+    \list
+    \o \l {elements}{Qml Elements}
+    \endlist
+
+    C++ Reference:
+    \list
+    \o \l {qtprogrammers}{QML for Qt programmers}
+    \o \l {qtbinding}{C++ Data Binding}
+    \o \l {cppitem}{C++ Components}
+    \endlist
+*/
diff --git a/doc/src/declarative/tutorial.qdoc b/doc/src/declarative/tutorial.qdoc
index 6fe3929..5c855ec 100644
--- a/doc/src/declarative/tutorial.qdoc
+++ b/doc/src/declarative/tutorial.qdoc
@@ -6,7 +6,7 @@ This tutorial gives an introduction to QML and the Fluid UI atoms. It doesn't co
 
 Chapter one starts with a minimal "Hello world" program and the following chapters introduce new concepts.
 
-The tutorial's source code is located in the $QTDIR/examples/declarative/tutorials directory.
+The tutorial's source code is located in the $QTDIR/examples/declarative/tutorials/helloworld directory.
 
 Tutorial chapters:
 
diff --git a/doc/src/declarative/tutorial1.qdoc b/doc/src/declarative/tutorial1.qdoc
index aa94c06..c2e3e22 100644
--- a/doc/src/declarative/tutorial1.qdoc
+++ b/doc/src/declarative/tutorial1.qdoc
@@ -10,9 +10,20 @@ This first program is a simple "Hello world" example. The picture below is a scr
 Here is the QML code for the application:
 
 \code
-<Rect id="Page" width="480" height="200" color="white">
-    <Text id="HelloText" text="Hello world!" font.size="24" font.bold="true" y="30" anchors.horizontalCenter="{Page.horizontalCenter}"/>
-</Rect>
+Rect {
+    id: Page
+    width: 480
+    height: 200
+    color: "white"
+    Text {
+        id: HelloText
+        text: "Hello world!"
+        font.size: 24
+        font.bold: true
+        y: 30
+        anchors.horizontalCenter: Page.horizontalCenter
+    }
+}
 \endcode
 
 \section1 Walkthrough
@@ -20,7 +31,12 @@ Here is the QML code for the application:
 \section2 Rect element
 
 \code
-<Rect id="Page" width="480" height="200" color="white">
+Rect {
+    id: Page
+    width: 480
+    height: 200
+    color: "white"
+}
 \endcode
 
 First, we declare a root element of type \l Rect. It is one of the basic building blocks you can use to create an application in QML.
@@ -30,7 +46,14 @@ The \l Rect element contains many other properties (such as \c x and \c y), but
 \section2 Text element
 
 \code
-<Text id="HelloText" text="Hello world!" y="30" font.size="24" font.bold="true" anchors.horizontalCenter="{Page.horizontalCenter}"/>
+Text {
+    id: HelloText
+    text: "Hello world!"
+    font.size: 24
+    font.bold: true
+    y: 30
+    anchors.horizontalCenter: Page.horizontalCenter
+}
 \endcode
 
 We add a text element as a child of our root element to display the text 'Hello world!'.
@@ -39,14 +62,14 @@ The \c y property is used to position the text vertically at 30 pixels from the
 
 The \c font.size and \c font.bold properties are related to fonts and use the 'dot' notation (see \l {declarative}{Declarative UI} ).
 
-The \c anchors.horizontalCenter property refers to the horizontal center of an element. In this case, we bind the center of our text element to the center of the \e Page element. We use braces to indicate that \c Page.horizontalCenter is a bound ECMAScript expression that needs to be evaluated. It also means that if the center of \e Page changes (for example if it is resized) our text will be re-centered automatically (see \l binding).
+The \c anchors.horizontalCenter property refers to the horizontal center of an element. In this case, we specify that our text element should be horizontally centered in the \e Page element.
 
 \section2 Viewing the example
 
 To view what you have created, run the qmlviewer (located in the \c bin directory) with your filename as the first argument. For example, to run the provided completed Tutorial 1 example from the install location, you would type:
 
 \code
-bin/qmlviewer examples/tutorials/t1/tutorial1.qml
+bin/qmlviewer $QTDIR/examples/declarative/tutorials/helloworld/t1/tutorial1.qml
 \endcode
 
 [\l tutorial] [Next: \l tutorial2]
diff --git a/doc/src/declarative/tutorial2.qdoc b/doc/src/declarative/tutorial2.qdoc
index db846b8..54f1828 100644
--- a/doc/src/declarative/tutorial2.qdoc
+++ b/doc/src/declarative/tutorial2.qdoc
@@ -12,29 +12,54 @@ Our color picker is made of many cells with different colors. To avoid writing t
 Here is the QML code for \c Cell.qml:
 
 \code
-<Item id="CellContainer" width="40" height="25">
-    <properties>
-        <Property name="color"/>
-    </properties>
-    <Rect anchors.fill="{parent}" color="{CellContainer.color}"/>
-    <MouseRegion anchors.fill="{parent}" onClick="HelloText.color = CellContainer.color" />
-</Item>
+Item {
+    id: CellContainer
+    width: 40
+    height: 25
+    properties: Property {
+        name: "color"
+    }
+    Rect {
+        anchors.fill: parent
+        color: CellContainer.color
+    }
+    MouseRegion {
+        anchors.fill: parent
+        onClicked: { HelloText.color = CellContainer.color }
+    }
+}
 \endcode
 
 Then, we use our \c Cell component to create the color picker in the QML code for the application:
 
 \code
-<Rect id="Page" width="480" height="200" color="white">
-    <Text id="HelloText" text="Hello world!" font.size="24" font.bold="true" y="30" anchors.horizontalCenter="{Page.horizontalCenter}"/>
-    <GridLayout id="ColorPicker" x="0" anchors.bottom="{Page.bottom}" width="120" height="50" columns="3" rows="2">
-        <Cell color="#ff0000"/>
-        <Cell color="#00ff00"/>
-        <Cell color="#0000ff"/>
-        <Cell color="#ffff00"/>
-        <Cell color="#00ffff"/>
-        <Cell color="#ff00ff"/>
-    </GridLayout>
-</Rect>
+Rect {
+    id: Page
+    width: 480
+    height: 200
+    color: "white"
+    Text {
+        id: HelloText
+        text: "Hello world!"
+        font.size: 24
+        font.bold: true
+        y: 30
+        anchors.horizontalCenter: Page.horizontalCenter
+    }
+    GridLayout {
+        id: ColorPicker
+        x: 0
+        anchors.bottom: Page.bottom
+        width: 120; height: 50
+        rows: 2; columns: 3
+        Cell { color: "#ff0000" }
+        Cell { color: "#00ff00" }
+        Cell { color: "#0000ff" }
+        Cell { color: "#ffff00" }
+        Cell { color: "#00ffff" }
+        Cell { color: "#ff00ff" }
+    }
+}
 \endcode
 
 \section1 Walkthrough
@@ -42,21 +67,28 @@ Then, we use our \c Cell component to create the color picker in the QML code fo
 \section2 The Cell Component
 
 \code
-<Item id="CellContainer" width="40" height="25">
+Item {
+    id: CellContainer
+    width: 40
+    height: 25
+}
 \endcode
 
 The root element of our component is an \c Item. It is the most basic 'Fx' element in Qml and is often used as a container for other elements.
 
 \code
-<properties>
-    <Property name="color"/>
-</properties>
+properties: Property {
+    name: "color"
+}
 \endcode
 
 We declare a \c color property. This property is accessible from  \e outside our component, this allows us to instantiate the cells with different colors.
 
 \code
-<Rect anchors.fill="{parent}" color="{CellContainer.color}"/>
+Rect {
+    anchors.fill: parent
+    color: CellContainer.color
+}
 \endcode
 
 Our cell component is basically a colored rectangle.
@@ -66,24 +98,32 @@ The \c anchors.fill property is a convenient way to set the size of an element.
 We bind the \c color property of this \c Rect to the color property of our component.
 
 \code
-<MouseRegion anchors.fill="{parent}" onClick="HelloText.color = CellContainer.color" />
+MouseRegion {
+    anchors.fill: parent
+    onClicked: { HelloText.color = CellContainer.color }
+}
 \endcode
 
 In order to change the color of the text when clicking on a cell, we create a \c MouseRegion element with the same size as its parent.
 
-The \c onClick property sets the \c color property of the element named \e HelloText to our cell color.
+The \c onClicked property sets the \c color property of the element named \e HelloText to our cell color.
 
 \section2 The main QML file
 
 \code
-<GridLayout id="ColorPicker" x="0" anchors.bottom="{Page.bottom}" width="120" height="50" columns="3" rows="2">
-    <Cell color="#ff0000"/>
-    <Cell color="#00ff00"/>
-    <Cell color="#0000ff"/>
-    <Cell color="#ffff00"/>
-    <Cell color="#00ffff"/>
-    <Cell color="#ff00ff"/>
-</GridLayout>
+GridLayout {
+    id: ColorPicker
+    x: 0
+    anchors.bottom: Page.bottom
+    width: 120; height: 50
+    rows: 2; columns: 3
+    Cell { color: "#ff0000" }
+    Cell { color: "#00ff00" }
+    Cell { color: "#0000ff" }
+    Cell { color: "#ffff00" }
+    Cell { color: "#00ffff" }
+    Cell { color: "#ff00ff" }
+}
 \endcode
 
 In the main QML file, the only thing we have to do is to create a color picker by putting 6 cells with different colors in a grid layout.
diff --git a/doc/src/declarative/tutorial3.qdoc b/doc/src/declarative/tutorial3.qdoc
index 533e179..3ac22a1 100644
--- a/doc/src/declarative/tutorial3.qdoc
+++ b/doc/src/declarative/tutorial3.qdoc
@@ -12,44 +12,86 @@ We want our text to jump at the bottom of the screen and become red when clicked
 Here is the QML code:
 
 \code
-<Rect id="Page" width="480" height="200" color="white">
-    <Text id="HelloText" text="Hello world!" font.size="24" font.bold="true" y="30" anchors.horizontalCenter="{Page.horizontalCenter}">
-        <states>
-            <State name="down" when="{MouseRegion.pressed == true}">
-                <SetProperty target="{HelloText}" property="y" value="160"/>
-                <SetProperty target="{HelloText}" property="color" value="red"/>
-            </State>
-        </states>
-        <transitions>
-            <Transition fromState="*" toState="down" reversible="true">
-                <ParallelAnimation>
-                    <NumericAnimation properties="y" duration="500" easing="easeOutBounce"/>
-                    <ColorAnimation duration="500"/>
-                </ParallelAnimation>
-            </Transition>
-        </transitions>
-    </Text>
-    <MouseRegion id="MouseRegion" anchors.fill="{HelloText}"/>
-    <GridLayout id="ColorPicker" x="0" anchors.bottom="{Page.bottom}" width="120" height="50" columns="3" rows="2">
-        <Cell color="#ff0000"/>
-        <Cell color="#00ff00"/>
-        <Cell color="#0000ff"/>
-        <Cell color="#ffff00"/>
-        <Cell color="#00ffff"/>
-        <Cell color="#ff00ff"/>
-    </GridLayout>
-</Rect>
+Rect {
+    id: Page
+    width: 480
+    height: 200
+    color: "white"
+    Text {
+        id: HelloText
+        text: "Hello world!"
+        font.size: 24
+        font.bold: true
+        y: 30
+        anchors.horizontalCenter: Page.horizontalCenter
+        states: [
+            State {
+                name: "down"
+                when: MouseRegion.pressed == true
+                SetProperty {
+                    target: HelloText
+                    property: "y"
+                    value: 160
+                }
+                SetProperty {
+                    target: HelloText
+                    property: "color"
+                    value: "red"
+                }
+            }
+        ]
+        transitions: [
+            Transition {
+                fromState: "*"
+                toState: "down"
+                reversible: true
+                ParallelAnimation {
+                    NumericAnimation {
+                        properties: "y"
+                        duration: 500
+                        easing: "easeOutBounce"
+                    }
+                    ColorAnimation { duration: 500 }
+                }
+            }
+        ]
+    }
+    MouseRegion { id: MouseRegion; anchors.fill: HelloText }
+    GridLayout {
+        id: ColorPicker
+        x: 0
+        anchors.bottom: Page.bottom
+        width: 120; height: 50
+        rows: 2; columns: 3
+        Cell { color: "#ff0000" }
+        Cell { color: "#00ff00" }
+        Cell { color: "#0000ff" }
+        Cell { color: "#ffff00" }
+        Cell { color: "#00ffff" }
+        Cell { color: "#ff00ff" }
+    }
+}
 \endcode
 
 \section1 Walkthrough
 
 \code
-<states>
-    <State name="down" when="{MouseRegion.pressed == true}">
-        <SetProperty target="{HelloText}" property="y" value="160"/>
-        <SetProperty target="{HelloText}" property="color" value="red"/>
-    </State>
-</states>
+states: [
+    State {
+        name: "down"
+        when: MouseRegion.pressed == true
+        SetProperty {
+            target: HelloText
+            property: "y"
+            value: 160
+        }
+        SetProperty {
+            target: HelloText
+            property: "color"
+            value: "red"
+        }
+    }
+]
 \endcode
 
 First, we create a new state \e down for our text element. This state will be activated when MouseRegion is pressed, and deactivated when it is released.
@@ -57,7 +99,11 @@ First, we create a new state \e down for our text element. This state will be ac
 The \e down state includes a set of property changes from our implicit \e {default state} (the items as they were initially defined in the QML). Specifically, we set the \c y property of the text to 160 and the \c color to red.
 
 \code
-<Transition fromState="*" toState="down" reversible="true">
+Transition {
+    fromState: "*"
+    toState: "down"
+    reversible: true
+}
 \endcode
 
 Because we don't want the text to appear at the bottom instantly but rather move smoothly, we add a transition between our two states.
@@ -67,10 +113,14 @@ Because we don't want the text to appear at the bottom instantly but rather move
 Because we want the same transition to be run in reverse when changing back from the \e down state to the default state, we set \c reversible to \c true. This is equivalent to writing the two transitions separately.
 
 \code
-<ParallelAnimation>
-    <NumericAnimation properties="y" duration="500" easing="easeOutBounce"/>
-    <ColorAnimation duration="500"/>
-</ParallelAnimation>
+ParallelAnimation {
+    NumericAnimation {
+        properties: "y"
+        duration: 500
+        easing: "easeOutBounce"
+    }
+    ColorAnimation { duration: 500 }
+}
 \endcode
 
 The \c ParallelAnimation element makes sure that the two animations (color and position) will start at the same time. We could also run them one after the other by using \c SequentialAnimation instead.