Doc: Overhaul of doc/src/declarative and QtQuick2 docs.

-Consolidated model/view documentation into one.
-Added a new navigation for all overviews (grouped the pages)
-New front page that shows the grouping
-Separated the Qt C++ from the main QML overviews
-Consolidated Qt C++ into the "declarative runtime" section
-New articles about JavaScript, the engine, and plugins
-Fixed the older examples. New snippet comments
-Renamed some of the articles
-kept the qtquick2 qmlmodule
-"Qt Quick Elements"

Moved contents of doc/src/declarative into respective
module dirs.

-Qt Quick 2, LocalStorage, Particles, and QML are now
separate.
-Removed unused or duplicate documentation.
-edited C++ examples
-removed navigation and "\inqmlmodule QtQuick 2" for
those pages that are not in Qt Quick 2
-fixed doc/src/ licenses to header.FDL from qtbase

Change-Id: Ib36f9c07565d91160fa8d04f9670c438f684b82a
Reviewed-by: Sergio Ahumada <sergio.ahumada@nokia.com>

6 files changed, 1261 insertions, 7 deletions

diff --git a/doc/src/examples/advtutorial.qdoc b/doc/src/examples/advtutorial.qdoc
new file mode 100644
index 0000000000..d682a73430
--- /dev/null
+++ b/doc/src/examples/advtutorial.qdoc
@@ -0,0 +1,470 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/
+**
+** This file is part of the documentation of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:FDL$
+** 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.
+**
+** Other Usage
+** Alternatively, this file may be used in accordance with the terms
+** and conditions contained in a signed written agreement between you
+** and Nokia.
+**
+**
+**
+**
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+/*!
+\page qml-advtutorial.html
+\inqmlmodule QtQuick 2
+\title QML Advanced Tutorial
+\brief A more advanced tutorial, showing how to use QML to create a game.
+\nextpage QML Advanced Tutorial 1 - Creating the Game Canvas and Blocks
+
+This tutorial walks step-by-step through the creation of a full application using QML.
+It assumes that you already know the basics of QML (for example, from reading the
+\l{QML Tutorial}{simple tutorial}). 
+
+In this tutorial we write a game, \i {Same Game}, based on the Same Game application
+included in the declarative \c examples directory, which looks like this:
+
+\image declarative-samegame.png
+
+We will cover concepts for producing a fully functioning application, including
+JavaScript integration, using QML  \l{State}{States} and \l{Behavior}{Behaviors} to 
+manage components and enhance your interface, and storing persistent application data.
+
+An understanding of JavaScript is helpful to understand parts of this tutorial, but if you don't
+know JavaScript you can still get a feel for how you can integrate backend logic to create and
+control QML elements.
+
+
+Tutorial chapters:
+
+\list 1
+\o \l {declarative/tutorials/samegame/samegame1}{Creating the Game Canvas and Blocks}
+\o \l {declarative/tutorials/samegame/samegame2}{Populating the Game Canvas}
+\o \l {declarative/tutorials/samegame/samegame3}{Implementing the Game Logic}
+\o \l {declarative/tutorials/samegame/samegame4}{Finishing Touches}
+\endlist
+
+All the code in this tutorial can be found in Qt's \c examples/declarative/tutorials/samegame
+directory.
+*/
+
+/*!
+\page qml-advtutorial1.html
+\inqmlmodule QtQuick 2
+\title QML Advanced Tutorial 1 - Creating the Game Canvas and Blocks
+\contentspage QML Advanced Tutorial
+\previouspage QML Advanced Tutorial
+\nextpage QML Advanced Tutorial 2 - Populating the Game Canvas
+
+\example declarative/tutorials/samegame/samegame1
+
+\section2 Creating the application screen
+
+The first step is to create the basic QML items in your application.
+
+To begin with, we create our Same Game application with a main screen like this:
+
+\image declarative-adv-tutorial1.png
+
+This is defined by the main application file, \c samegame.qml, which looks like this:
+
+\snippet declarative/tutorials/samegame/samegame1/samegame.qml 0
+
+This gives you a basic game window that includes the main canvas for the
+blocks, a "New Game" button and a score display.
+
+One item you may not recognize here
+is the \l SystemPalette item. This provides access to the Qt system palette
+and is used to give the button a more native look-and-feel.
+
+Notice the anchors for the \c Item, \c Button and \c Text elements are set using
+\l {qdeclarativeintroduction.html#dot-properties}{group notation} for readability.
+
+\section2 Adding \c Button and \c Block components
+
+The \c Button item in the code above is defined in a separate component file named \c Button.qml.
+To create a functional button, we use the QML elements \l Text and \l MouseArea inside a \l Rectangle.
+Here is the \c Button.qml code:
+
+\snippet declarative/tutorials/samegame/samegame1/Button.qml 0
+
+This essentially defines a rectangle that contains text and can be clicked. The \l MouseArea
+has an \c onClicked() handler that is implemented to emit the \c clicked() signal of the
+\c container when the area is clicked.
+
+In Same Game, the screen is filled with small blocks when the game begins.
+Each block is just an item that contains an image. The block
+code is defined in a separate \c Block.qml file:
+
+\snippet declarative/tutorials/samegame/samegame1/Block.qml 0
+
+At the moment, the block doesn't do anything; it is just an image. As the
+tutorial progresses we will animate and give behaviors to the blocks.
+We have not added any code yet to create the blocks; we will do this
+in the next chapter.
+
+We have set the image to be the size of its parent Item using \c {anchors.fill: parent}.
+This means that when we dynamically create and resize the block items
+later on in the tutorial, the image will be scaled automatically to the
+correct size.
+
+Notice the relative path for the Image element's \c source property. 
+This path is relative to the location of the file that contains the \l Image element.
+Alternatively, you could set the Image source to an absolute file path or a URL
+that contains an image.
+
+You should be familiar with the code so far. We have just created some basic
+elements to get started. Next, we will populate the game canvas with some blocks.
+*/
+
+
+/*!
+\page qml-advtutorial2.html
+\inqmlmodule QtQuick 2
+\title QML Advanced Tutorial 2 - Populating the Game Canvas
+\contentspage QML Advanced Tutorial
+\previouspage QML Advanced Tutorial 1 - Creating the Game Canvas and Blocks
+\nextpage QML Advanced Tutorial 3 - Implementing the Game Logic
+
+\example declarative/tutorials/samegame/samegame2
+
+\section2 Generating the blocks in JavaScript
+
+Now that we've written some basic elements, let's start writing the game.
+
+The first task is to generate the game blocks. Each time the New Game button
+is clicked, the game canvas is populated with a new, random set of
+blocks. Since we need to dynamically generate new blocks for each new game,
+we cannot use \l Repeater to define the blocks. Instead, we will 
+create the blocks in JavaScript.
+
+Here is the JavaScript code for generating the blocks, contained in a new
+file, \c samegame.js. The code is explained below.
+
+\snippet declarative/tutorials/samegame/samegame2/samegame.js 0
+
+The \c startNewGame() function deletes the blocks created in the previous game and
+calculates the number of rows and columns of blocks required to fill the game window for the new game.
+Then, it creates an array to store all the game
+blocks, and calls \c createBlock() to create enough blocks to fill the game window.
+
+The \c createBlock() function creates a block from the \c Block.qml file
+and moves the new block to its position on the game canvas. This involves several steps:
+
+\list
+
+\o \l {QML:Qt::createComponent()}{Qt.createComponent()} is called to
+   generate an element from \c Block.qml.  If the component is ready,
+   we can call \c createObject() to create an instance of the \c Block
+   item.
+
+\o If \c createObject() returned null (i.e. if there was an error
+   while loading the object), print the error information.
+
+\o Place the block in its position on the board and set its width and
+   height.  Also, store it in the blocks array for future reference.
+
+\o Finally, print error information to the console if the component
+   could not be loaded for some reason (for example, if the file is
+   missing).
+
+\endlist
+
+
+\section2 Connecting JavaScript components to QML
+
+Now we need to call the JavaScript code in \c samegame.js from our QML files.
+To do this, we add this line to \c samegame.qml which imports
+the JavaScript file as a \l{Modules#QML Modules}{module}:
+
+\snippet declarative/tutorials/samegame/samegame2/samegame.qml 2
+
+This allows us to refer to any functions within \c samegame.js using "SameGame"
+as a prefix: for example, \c SameGame.startNewGame() or \c SameGame.createBlock().  
+This means we can now connect the New Game button's \c onClicked handler to the \c startNewGame()
+function, like this:
+
+\snippet declarative/tutorials/samegame/samegame2/samegame.qml 1
+
+So, when you click the New Game button, \c startNewGame() is called and generates a field of blocks, like this:
+
+\image declarative-adv-tutorial2.png
+
+Now, we have a screen of blocks, and we can begin to add the game mechanics.
+
+*/
+
+/*!
+\page qml-advtutorial3.html
+\inqmlmodule QtQuick 2
+\title QML Advanced Tutorial 3 - Implementing the Game Logic
+\contentspage QML Advanced Tutorial
+\previouspage QML Advanced Tutorial 2 - Populating the Game Canvas
+\nextpage QML Advanced Tutorial 4 - Finishing Touches
+
+\example declarative/tutorials/samegame/samegame3
+
+\section2 Making a playable game
+
+Now that we have all the game components, we can add the game logic that
+dictates how a player interacts with the blocks and plays the game
+until it is won or lost.
+
+To do this, we have added the following functions to \c samegame.js:
+
+\list
+\o \c{handleClick(x,y)}
+\o \c{floodFill(xIdx,yIdx,type)}
+\o \c{shuffleDown()}
+\o \c{victoryCheck()}
+\o \c{floodMoveCheck(xIdx, yIdx, type)}
+\endlist
+
+As this is a tutorial about QML, not game design, we will only discuss \c handleClick() and \c victoryCheck() below since they interface directly with the QML elements. Note that although the game logic here is written in JavaScript, it could have been written in C++ and then exposed to QML. 
+
+\section3 Enabling mouse click interaction
+
+To make it easier for the JavaScript code to interface with the QML elements, we have added an Item called \c gameCanvas to \c samegame.qml. It replaces the background as the item which contains the blocks. It also accepts mouse input from the user.  Here is the item code:
+
+\snippet declarative/tutorials/samegame/samegame3/samegame.qml 1
+
+The \c gameCanvas item is the exact size of the board, and has a \c score property and a \l MouseArea to handle mouse clicks.
+The blocks are now created as its children, and its dimensions are used to determine the board size so that
+the application scales to the available screen size.
+Since its size is bound to a multiple of \c blockSize, \c blockSize was moved out of \c samegame.js and into \c samegame.qml as a QML property.
+Note that it can still be accessed from the script.
+
+When clicked, the \l MouseArea calls \c{handleClick()} in \c samegame.js, which determines whether the player's click should cause any blocks to be removed, and updates \c gameCanvas.score with the current score if necessary. Here is the \c handleClick() function:
+
+\snippet declarative/tutorials/samegame/samegame3/samegame.js 1
+
+Note that if \c score was a global variable in the \c{samegame.js} file you would not be able to bind to it. You can only bind to QML properties.
+
+\section3 Updating the score
+
+When the player clicks a block and triggers \c handleClick(), \c handleClick() also calls \c victoryCheck() to update the score and to check whether the player has completed the game. Here is the \c victoryCheck() code:
+
+\snippet declarative/tutorials/samegame/samegame3/samegame.js 2
+
+This updates the \c gameCanvas.score value and displays a "Game Over" dialog if the game is finished.
+
+The Game Over dialog is created using a \c Dialog element that is defined in \c Dialog.qml. Here is the \c Dialog.qml code. Notice how it is designed to be usable imperatively from the script file, via the functions and signals:
+
+\snippet declarative/tutorials/samegame/samegame3/Dialog.qml 0
+
+And this is how it is used in the main \c samegame.qml file:
+
+\snippet declarative/tutorials/samegame/samegame3/samegame.qml 2
+
+We give the dialog a \l {Item::z}{z} value of 100 to ensure it is displayed on top of our other components. The default \c z value for an item is 0.
+
+
+\section3 A dash of color
+
+It's not much fun to play Same Game if all the blocks are the same color, so we've modified the \c createBlock() function in \c samegame.js to randomly create a different type of block (for either red, green or blue) each time it is called. \c Block.qml has also changed so that each block contains a different image depending on its type:
+
+\snippet declarative/tutorials/samegame/samegame3/Block.qml 0
+
+
+\section2 A working game
+
+Now we now have a working game! The blocks can be clicked, the player can score, and the game can end (and then you can start a new one).
+Here is a screenshot of what has been accomplished so far:
+
+\image declarative-adv-tutorial3.png
+
+This is what \c samegame.qml looks like now:
+
+\snippet declarative/tutorials/samegame/samegame3/samegame.qml 0
+
+The game works, but it's a little boring right now. Where are the smooth animated transitions? Where are the high scores?
+If you were a QML expert you could have written these in the first iteration, but in this tutorial they've been saved
+until the next chapter - where your application becomes alive!
+
+*/
+
+/*!
+\page qml-advtutorial4.html
+\inqmlmodule QtQuick 2
+\title QML Advanced Tutorial 4 - Finishing Touches
+\contentspage QML Advanced Tutorial
+\previouspage QML Advanced Tutorial 3 - Implementing the Game Logic
+
+\example declarative/tutorials/samegame/samegame4
+
+\section2 Adding some flair
+
+Now we're going to do two things to liven up the game: animate the blocks and add a High Score system.
+
+We've also cleaned up the directory structure for our application files. We now have a lot of files, so all the
+JavaScript and QML files outside of \c samegame.qml have been moved into a new sub-directory named "content".
+
+In anticipation of the new block animations, \c Block.qml file is now renamed to \c BoomBlock.qml.
+
+\section3 Animating block movement
+
+First we will animate the blocks so that they move in a fluid manner. QML has a number of methods for adding fluid
+movement, and in this case we're going to use the \l Behavior element to add a \l SpringAnimation.
+In \c BoomBlock.qml, we apply a \l SpringAnimation behavior to the \c x and \c y properties so that the
+block will follow and animate its movement in a spring-like fashion towards the specified position (whose
+values will be set by \c samegame.js).Here is the code added to \c BoomBlock.qml:
+
+\snippet declarative/tutorials/samegame/samegame4/content/BoomBlock.qml 1
+
+The \c spring and \c damping values can be changed to modify the spring-like effect of the animation.
+
+The \c {enabled: spawned} setting refers to the \c spawned value that is set from \c createBlock() in \c samegame.js.
+This ensures the \l SpringAnimation on the \c x is only enabled after \c createBlock() has set the block to
+the correct position. Otherwise, the blocks will slide out of the corner (0,0) when a game begins, instead of falling
+from the top in rows. (Try commenting out \c {enabled: spawned} and see for yourself.)
+
+\section3 Animating block opacity changes
+
+Next, we will add a smooth exit animation. For this, we'll use a \l Behavior element, which allows us to specify
+a default animation when a property change occurs. In this case, when the \c opacity of a Block changes, we will
+animate the opacity value so that it gradually fades in and out, instead of abruptly changing between fully
+visible and invisible. To do this, we'll apply a \l Behavior on the \c opacity property of the \c Image
+element in \c BoomBlock.qml:
+
+\snippet declarative/tutorials/samegame/samegame4/content/BoomBlock.qml 2
+
+Note the \c{opacity: 0} which means the block is transparent when it is first created. We could set the opacity
+in \c samegame.js when we create and destroy the blocks,
+but instead we'll use \l{QML States}{states}, since this is useful for the next animation we're going to add. 
+Initially, we add these States to the root element of \c{BoomBlock.qml}:
+\code
+    property bool dying: false
+    states: [
+        State{ name: "AliveState"; when: spawned == true && dying == false
+            PropertyChanges { target: img; opacity: 1 }
+        },
+        State{ name: "DeathState"; when: dying == true
+            PropertyChanges { target: img; opacity: 0 }
+        }
+    ]
+\endcode
+
+Now blocks will automatically fade in, as we already set \c spawned to true when we implemented the block animations.
+To fade out, we set \c dying to true instead of setting opacity to 0 when a block is destroyed (in the \c floodFill() function).
+
+\section3 Adding particle effects
+
+Finally, we'll add a cool-looking particle effect to the blocks when they are destroyed. To do this, we first add a \l Particles element in
+\c BoomBlock.qml, like so:
+
+\snippet declarative/tutorials/samegame/samegame4/content/BoomBlock.qml 3
+
+To fully understand this you should read the \l Particles documentation, but it's important to note that \c emissionRate is set
+to zero so that particles are not emitted normally.
+Also, we extend the \c dying State, which creates a burst of particles by calling the \c burst() method on the particles element. The code for the states now look
+like this:
+
+\snippet declarative/tutorials/samegame/samegame4/content/BoomBlock.qml 4
+
+Now the game is beautifully animated, with subtle (or not-so-subtle) animations added for all of the
+player's actions. The end result is shown below, with a different set of images to demonstrate basic theming:
+
+\image declarative-adv-tutorial4.gif
+
+The theme change here is produced simply by replacing the block images. This can be done at runtime by changing the \l Image \c source property, so for a further challenge, you could add a button that toggles between themes with different images.
+
+\section2 Keeping a High Scores table
+
+Another feature we might want to add to the game is a method of storing and retrieving high scores.
+
+To do this, we will show a dialog when the game is over to request the player's name and add it to a High Scores table.
+This requires a few changes to \c Dialog.qml. In addition to a \c Text element, it now has a
+\c TextInput child item for receiving keyboard text input:
+
+\snippet declarative/tutorials/samegame/samegame4/content/Dialog.qml 0
+\dots 4
+\snippet declarative/tutorials/samegame/samegame4/content/Dialog.qml 2
+\dots 4
+\snippet declarative/tutorials/samegame/samegame4/content/Dialog.qml 3
+
+We'll also add a \c showWithInput() function. The text input will only be visible if this function
+is called instead of \c show(). When the dialog is closed, it emits a \c closed() signal, and
+other elements can retrieve the text entered by the user through an \c inputText property:
+
+\snippet declarative/tutorials/samegame/samegame4/content/Dialog.qml 0
+\snippet declarative/tutorials/samegame/samegame4/content/Dialog.qml 1
+\dots 4
+\snippet declarative/tutorials/samegame/samegame4/content/Dialog.qml 3
+
+Now the dialog can be used in \c samegame.qml:
+
+\snippet declarative/tutorials/samegame/samegame4/samegame.qml 0
+
+When the dialog emits the \c closed signal, we call the new \c saveHighScore() function in \c samegame.js, which stores the high score locally in an SQL database and also send the score to an online database if possible. 
+
+The \c nameInputDialog is activated in the \c victoryCheck() function in \c samegame.js:
+
+\snippet declarative/tutorials/samegame/samegame4/content/samegame.js 3
+\dots 4
+\snippet declarative/tutorials/samegame/samegame4/content/samegame.js 4
+
+\section3 Storing high scores offline
+
+Now we need to implement the functionality to actually save the High Scores table.
+
+Here is the \c saveHighScore() function in \c samegame.js:
+
+\snippet declarative/tutorials/samegame/samegame4/content/samegame.js 2
+
+First we call \c sendHighScore() (explained in the section below) if it is possible to send the high scores to an online database.
+
+Then, we use the \l{Offline Storage API} to maintain a persistent SQL database unique to this application. We create an offline storage database for the high scores using \c openDatabaseSync() and prepare the data and SQL query that we want to use to save it. The offline storage API uses SQL queries for data manipulation and retrieval, and in the \c db.transaction() call we use three SQL queries to initialize the database (if necessary), and then add to and retrieve high scores. To use the returned data, we turn it into a string with one line per row returned, and show a dialog containing that string.
+
+This is one way of storing and displaying high scores locally, but certainly not the only way. A more complex alternative would be to create a high score dialog component, and pass it the results for processing and display (instead of reusing the \c Dialog). This would allow a more themeable dialog that could better present the high scores. If your QML is the UI for a C++ application, you could also have passed the score to a C++ function to store it locally in a variety of ways, including a simple format without SQL or in another SQL database.
+
+\section3 Storing high scores online
+
+You've seen how you can store high scores locally, but it is also easy to integrate a web-enabled high score storage into your QML application. The implementation we've done her is very
+simple: the high score data is posted to a php script running on a server somewhere, and that server then stores it and
+displays it to visitors. You could also request an XML or QML file from that same server, which contains and displays the scores,
+but that's beyond the scope of this tutorial. The php script we use here is available in the \c examples directory.
+
+If the player entered their name we can send the data to the web service us
+
+If the player enters a name, we send the data to the service using this code in \c samegame.js:
+
+\snippet declarative/tutorials/samegame/samegame4/content/samegame.js 1
+
+The \l XMLHttpRequest in this code is the same as the \c XMLHttpRequest() as you'll find in standard browser JavaScript, and can be used in the same way to dynamically get XML
+or QML from the web service to display the high scores. We don't worry about the response in this case - we just post the high
+score data to the web server. If it had returned a QML file (or a URL to a QML file) you could instantiate it in much the same
+way as you did with the blocks.
+
+An alternate way to access and submit web-based data would be to use QML elements designed for this purpose. XmlListModel
+makes it very easy to fetch and display XML based data such as RSS in a QML application (see the Flickr demo for an example).
+
+
+\section2 That's it!
+
+By following this tutorial you've seen how you can write a fully functional application in QML:
+
+\list
+\o Build your application with \l {{QML Elements}}{QML elements}
+\o Add application logic \l{JavaScript Expressions in QML}{with JavaScript code}
+\o Add animations with \l {Behavior}{Behaviors} and \l{QML States}{states}
+\o Store persistent application data using, for example, the \l{Offline Storage API} or \l XMLHttpRequest
+\endlist
+
+There is so much more to learn about QML that we haven't been able to cover in this tutorial. Check out all the
+examples and the \l {Qt Quick}{documentation} to see all the things you can do with QML!
+*/
diff --git a/doc/src/examples/dynamicview-tutorial.qdoc b/doc/src/examples/dynamicview-tutorial.qdoc
new file mode 100644
index 0000000000..517dacc2f1
--- /dev/null
+++ b/doc/src/examples/dynamicview-tutorial.qdoc
@@ -0,0 +1,246 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/
+**
+** This file is part of the documentation of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:FDL$
+** 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.
+**
+** Other Usage
+** Alternatively, this file may be used in accordance with the terms
+** and conditions contained in a signed written agreement between you
+** and Nokia.
+**
+**
+**
+**
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+/*!
+\page qml-dynamicview-tutorial.html
+\inqmlmodule QtQuick 2
+\title QML Dynamic View Ordering Tutorial
+\brief A tutorial describing how to re-arrange items in a QML ListView
+\nextpage QML Dynamic View Ordering Tutorial 1 - A Simple ListView and Delegate
+
+This tutorial shows how items in a ListView can be re-ordered without modifying the source model.
+It demonstrates using drag and drop to reposition individual items within a view and using model
+data to dynamically sort all items in a view.
+
+Tutorial chapters:
+
+\list 1
+\o \l {declarative/tutorials/dynamicview/dynamicview1}{A Simple ListView and Delegate}
+\o \l {declarative/tutorials/dynamicview/dynamicview2}{Dragging View Items}
+\o \l {declarative/tutorials/dynamicview/dynamicview3}{Moving Dragged Items}
+\o \l {declarative/tutorials/dynamicview/dynamicview4}{Sorting Items}
+\endlist
+
+All the code in this tutorial can be found in Qt's \c examples/declarative/tutorials/dynamicview
+directory.
+*/
+
+/*!
+\page qml-dynamicview-tutorial1.html
+\inqmlmodule QtQuick 2
+\title QML Dynamic View Ordering Tutorial 1 - A Simple ListView and Delegate
+\contentspage QML Dynamic View Ordering Tutorial
+\previouspage QML Dynamic View Ordering Tutorial
+\nextpage QML Dynamic View Ordering Tutorial 2 - Dragging View Items
+
+\example declarative/tutorials/dynamicview/dynamicview1
+
+We begin our application by defining a ListView, a model which will provide data to the view, and a
+delegate which provides a template for constructing items in the view.
+
+The code for the ListView and delegate looks like this:
+
+\snippet declarative/tutorials/dynamicview/dynamicview1/dynamicview.qml 0
+
+The model is defined in a separate QML file which looks like this:
+
+\snippet declarative/tutorials/dynamicview/dynamicview1/PetsModel.qml 0
+\snippet declarative/tutorials/dynamicview/dynamicview1/PetsModel.qml 1
+
+\section2 Walkthrough
+
+The first item defined within the application's root Rectangle is the delegate Component.  This
+is the template from which each item in the ListView is constructed.
+
+The \c name, \c age, \c type, and \c size variables referenced in the delegate are sourced from
+the model data.  The names correspond to roles defined in the model.
+
+\snippet declarative/tutorials/dynamicview/dynamicview1/dynamicview.qml 1
+
+The second part of the application is the ListView itself to which we bind the model and delegate.
+
+\snippet declarative/tutorials/dynamicview/dynamicview1/dynamicview.qml 2
+*/
+
+/*!
+\page qml-dynamicview-tutorial2.html
+\inqmlmodule QtQuick 2
+\title QML Dynamic View Ordering Tutorial 2 - Dragging View Items
+\contentspage QML Dynamic View Ordering Tutorial
+\previouspage QML Dynamic View Ordering Tutorial 1 - A Simple ListView and Delegate
+\nextpage QML Dynamic View Ordering Tutorial 3 - Moving Dragged Items
+
+\example declarative/tutorials/dynamicview/dynamicview2
+
+Now that we have a visible list of items we want to be able to interact with them. We'll start
+by extending the delegate so the visible content can be dragged up and down the screen.  The
+updated delegate looks like this:
+
+\snippet declarative/tutorials/dynamicview/dynamicview2/dynamicview.qml 0
+
+\section2 Walkthrough
+
+The major change here is the root item of the delegate is now a MouseArea which provides handlers
+for mouse events and will allow us to drag the delegate's content item.  It also acts as
+a container for the content item which is important as a delegate's root item is positioned by
+the view and cannot be moved by other means.
+
+\snippet declarative/tutorials/dynamicview/dynamicview2/dynamicview.qml 1
+\snippet declarative/tutorials/dynamicview/dynamicview2/dynamicview.qml 2
+
+Dragging the content item is enabled by binding it to the MouseArea's
+\l {QtQuick2::MouseArea::drag.target}{drag.target} property.  Because we still want the view to be
+flickable we wait until the MouseArea's \l {QtQuick2::MouseArea::onPressAndHold}{onPressAndHold}
+handler is triggered before binding the drag target. This way when mouse moves before the hold
+timeout has expired it is interpreted as moving the list and if it moves after it is interpreted as
+dragging an item.  To make it more obvious to the user when an item can be dragged we'll change the
+background color of the content item when the timeout has expired.
+
+\snippet declarative/tutorials/dynamicview/dynamicview2/dynamicview.qml 3
+
+The other thing we'll need to do before an item can be dragged is to unset any anchors on the
+content item so it can be freely moved around.  We do this in a state change that is triggered
+when the delegate item is held, at the same time we can reparent the content item to the root item
+so that is above other items in the stacking order and isn't obscured as it is dragged around.
+
+\snippet declarative/tutorials/dynamicview/dynamicview2/dynamicview.qml 4
+
+*/
+
+/*!
+\page qml-dynamicview-tutorial3.html
+\inqmlmodule QtQuick 2
+\title QML Dynamic View Ordering Tutorial 3 - Moving Dragged Items
+\contentspage QML Dynamic View Ordering Tutorial
+\previouspage QML Dynamic View Ordering Tutorial 2 - Dragging View Items
+\nextpage QML Dynamic View Ordering Tutorial 4 - Sorting Items
+
+\example declarative/tutorials/dynamicview/dynamicview3
+
+The next step in our application to move items within the list as they're dragged so that we
+can re-order the list.  To achieve this we introduce three new elements to our application;
+VisualDataModel, \l Drag and DropArea.
+
+\snippet declarative/tutorials/dynamicview/dynamicview3/dynamicview.qml 0
+\snippet declarative/tutorials/dynamicview/dynamicview3/dynamicview.qml 1
+\snippet declarative/tutorials/dynamicview/dynamicview3/dynamicview.qml 2
+\snippet declarative/tutorials/dynamicview/dynamicview3/dynamicview.qml 5
+
+\section2 Walkthrough
+
+In order to re-order the view we need to determine when one item has been dragged over another. With
+the Drag attached property we can generate events that are sent to the scene graph whenever the item
+it is attached to moves.
+
+\snippet declarative/tutorials/dynamicview/dynamicview3/dynamicview.qml 1
+
+Drag events are only sent while the active property is true, so in this example the first event
+would be sent when the delegate was held with additional event sents when dragging.  The
+\l {QtQuick2::Drag::hotSpot}{hotSpot} property specifies the relative position of the drag events
+within the dragged item, the center of the item in this instance.
+
+Then we use a DropArea in each view item to determine when the hot spot of the dragged item
+intersects another item, when a drag enters one of these DropAreas we can move the dragged item
+to the index of the item it was dragged over.
+
+\snippet declarative/tutorials/dynamicview/dynamicview3/dynamicview.qml 3
+
+To move the items within the view we use a VisualDataModel.  The VisualDataModel element is used by
+the view elements to instantiate delegate items from model data and when constructed explicitly can
+be used to filter and re-order the model items provided to ListView.  The
+\l {QtQuick2::VisualDataModel::items}{items} property of VisualDataModel provides access to the
+view's items and allows us to change the visible order without modifying the source model.  To
+determine the current visible index of the items we use \l {QtQuick2::VisualDataModel::itemsIndex}
+{itemsIndex} property on the VisualDataModel attached property of the delegate item.
+
+To utilize a VisualDataModel with a ListView we bind it to the \l {QtQuick2::ListView::model}{model}
+property of the view and bind the \l {QtQuick2::VisualDataModel::model}{model} and
+\l {QtQuick2::VisualDataModel::delegate}{delegate} to the VisualDataModel.
+
+\snippet declarative/tutorials/dynamicview/dynamicview3/dynamicview.qml 4
+
+*/
+
+/*!
+\page qml-dynamicview-tutorial4.html
+\inqmlmodule QtQuick 2
+\title QML Dynamic View Ordering Tutorial 4 - Sorting Items
+\contentspage QML Dynamic View Ordering Tutorial
+\previouspage QML Dynamic View Ordering Tutorial 3 - Moving Dragged Items
+
+\example declarative/tutorials/dynamicview/dynamicview4
+
+Drag and drop isn't the only way items in a view can be re-ordered, using a VisualDataModel it is
+also possible to sort items based on model data.  To do that we extend our VisualDataModel instance
+like this:
+
+\snippet declarative/tutorials/dynamicview/dynamicview4/dynamicview.qml 0
+
+\section2 Walkthrough
+
+Items in a VisualDataModel are filtered into groups represented by the VisualDataGroup type,
+normally all items in the model belong to a default \l {QtQuick2::VisualDataModel::items}{items}
+group but this default can be changed with the includeByDefault property.  To implement our sorting
+we want items to first be added to an unsorted group from where we can transfer them to a sorted
+position in the items group.  To do that we clear includeByDefault on the items group and set it on
+a new group name 'unsorted'.
+
+\snippet declarative/tutorials/dynamicview/dynamicview4/dynamicview.qml 1
+\snippet declarative/tutorials/dynamicview/dynamicview4/dynamicview.qml 2
+
+We sort the items by first finding the position in the items group to insert the first unsorted
+item and then transfer the item to the items group before moving it to the pre-determined index and
+repeat until the unsorted group is empty.
+
+To find the insert position for an item we request a handle for the item from the unsorted group
+with the \l {QtQuick2::VisualDataModel::get} {get} function.  Through the model property on this
+handle we can access the same model data that is available in a delegate instance of that item and
+compare against other items to determine relative position.
+
+\snippet declarative/tutorials/dynamicview/dynamicview4/dynamicview.qml 3
+
+The lessThan argument to the sort function is a comparsion function which will determine the order
+of the list.  In this example it can be one of the following:
+
+\snippet declarative/tutorials/dynamicview/dynamicview4/dynamicview.qml 4
+
+A sort is triggered whenever new items are added to the unsorted VisualDataGroup which we are
+notified of by the \l {QtQuick2::VisualDataGroup::onChanged}{onChanged} handler.  If no sort
+function is currently selected we simply transfer all items from the unsorted group to the items
+group, otherwise we call sort with the selected sort function.
+
+\snippet declarative/tutorials/dynamicview/dynamicview4/dynamicview.qml 5
+
+Finally when the selected sort order changes we can trigger a full re-sort of the list by moving
+all items from the items group to the unsorted group, which will trigger the
+\l {QtQuick2::VisualDataGroup::onChanged}{onChanged} handler and transfer the items back to the
+items group in correct order.  Note that the \l {QtQuick2::VisualDataGroup::onChanged}{onChanged}
+handler will not be invoked recursively so there's no issue with it being invoked during a sort.
+
+\snippet declarative/tutorials/dynamicview/dynamicview4/dynamicview.qml 6
+
+*/
diff --git a/doc/src/examples/example-slideswitch.qdoc b/doc/src/examples/example-slideswitch.qdoc
index 354ed749a5..689841a78b 100644
--- a/doc/src/examples/example-slideswitch.qdoc
+++ b/doc/src/examples/example-slideswitch.qdoc
@@ -25,16 +25,14 @@
 **
 ****************************************************************************/
 
+
 /*!
-\page qdeclarativeexampletoggleswitch.html
-\inqmlmodule QtQuick 2
+\page qmlexampletoggleswitch.html
 \title QML Example - Toggle Switch
-\example declarative/ui-components/slideswitch
-\brief A reusable switch component in QML
-
+\brief A reusable switch component made in QML
 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.
+The code for this example can be found in the \c examples/declarative/ui-components/slideswitch directory.
 
 The elements that compose the switch are:
 
@@ -116,7 +114,7 @@ states (\i on and \i off).
 This second function is called when the knob is released and we want to make sure that the knob does not end up between states
 (neither \i on nor \i off). If it is the case call the \c toggle() function otherwise we do nothing.
 
-For more information on scripts see \l{Integrating JavaScript}.
+For more information on scripts see \l{JavaScript Expressions in QML}.
 
 \section2 Transition
 \snippet examples/declarative/ui-components/slideswitch/content/Switch.qml 7
diff --git a/doc/src/examples/example-textballoons.qdoc b/doc/src/examples/example-textballoons.qdoc
index 872c254fb0..be004f59ed 100644
--- a/doc/src/examples/example-textballoons.qdoc
+++ b/doc/src/examples/example-textballoons.qdoc
@@ -25,6 +25,7 @@
 **
 ****************************************************************************/
 
+
 /*!
     \title Scenegraph Painted Item Example
     \example declarative/painteditem/textballoons
diff --git a/doc/src/examples/examples.qdoc b/doc/src/examples/examples.qdoc
new file mode 100644
index 0000000000..f9c89d87f4
--- /dev/null
+++ b/doc/src/examples/examples.qdoc
@@ -0,0 +1,307 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/
+**
+** This file is part of the documentation of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:FDL$
+** 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.
+**
+** Other Usage
+** Alternatively, this file may be used in accordance with the terms
+** and conditions contained in a signed written agreement between you
+** and Nokia.
+**
+**
+**
+**
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+/*!
+
+\page qtquick-codesamples.html
+\title Qt Quick Code Samples
+\brief Building UIs with QML
+\ingroup all-examples
+\ingroup qtquick
+\target qtquick-samples
+\inqmlmodule QtQuick 2
+
+These are code samples that show how to use various aspects of Qt Quick. Larger
+compound interfaces are grouped as applications as they demonstrate more Qt
+Quick features.
+
+To run the sample applications, open them in Qt Creator or use the included
+\l {QML Viewer} tool.
+
+Some of these code samples have a corresponding \l{qtquick-tutorials}{tutorial}.
+The Qt Quick features are covered in the \l {qtquick-overviews}{main page}.
+This set of code samples are part of the collection of \l{Qt Examples}.
+
+\div {class="threecolumn_area"}
+    \div {class="heading"}
+    Qt Quick Applications
+    \enddiv
+    \div {class="threecolumn_piece"}
+        \l{demos/declarative/calculator}{Calculator}
+        \image qml-calculator-example-small.png
+    \enddiv
+    \div {class="threecolumn_piece"}
+        \l{demos/declarative/flickr}{Flickr Mobile}
+        \image qml-flickr-demo-small.png
+    \enddiv
+    \div {class="threecolumn_piece"}
+        \l{demos/declarative/minehunt}{Minehunt}
+        \image qml-minehunt-demo-small.png
+    \enddiv
+    \div {class="threecolumn_piece"}
+        \l{demos/declarative/photoviewer}{Photo Viewer}
+        \image qml-photoviewer-demo-small.png
+    \enddiv
+    \div {class="threecolumn_piece"}
+        \l{demos/declarative/rssnews}{RSS News Reader}
+        \image qml-rssnews-demo-small.png
+    \enddiv
+    \div {class="threecolumn_piece"}
+        \l{demos/declarative/samegame}{Same Game}
+        \image qml-samegame-demo-small.png
+    \enddiv
+    \div {class="threecolumn_piece"}
+        \l{demos/declarative/snake}{Snake}
+        \image qml-snake-demo-small.png
+    \enddiv
+    \div {class="threecolumn_piece"}
+        \l{demos/declarative/twitter}{Twitter}
+        \image qml-twitter-demo-small.png
+    \enddiv
+    \div {class="threecolumn_piece"}
+        \l{demos/declarative/webbrowser}{Web Browser}
+        \image qml-webbrowser-demo-small.png
+    \enddiv
+\enddiv
+\div {class="threecolumn_area"}
+    \div {class="heading"}
+    QML Examples
+    \enddiv
+    Code samples demonstrate a general use for QML features. Some showcase
+    how elements or properties can be used in an application.
+    \div {class="threecolumn_piece"}
+        \div {class="heading"}
+        QML Features
+        \enddiv
+    \enddiv
+    \div {class="threecolumn_piece"}
+        \div {class="heading"}
+        Mouse and Keyboard Input
+        \enddiv
+        \list
+        \o \l{declarative/text/fonts}{Fonts}
+        \o \l{declarative/text/textselection}{Text Selection}
+        \o \l{declarative/keyinteraction/focus}{Keyboard Focus}
+        \o \l{declarative/touchinteraction/mousearea}{MouseArea}
+        \endlist
+    \enddiv
+    \div {class="threecolumn_piece"}
+        \div {class="heading"}
+        States and Transitions
+        \enddiv
+        \list
+        \o \l{declarative/animation/states}{States}
+        \o \l{declarative/animation/basics}{Animation Essentials}
+        \o \l{declarative/animation/behaviors}{Behaviors}
+        \o \l{declarative/animation/easing}{Easing}
+        \endlist
+    \enddiv
+    \div {class="threecolumn_piece"}
+        \div {class="heading"}
+        UI Components
+        \enddiv
+        \list
+        \o \l{declarative/ui-components/dialcontrol}{Dial Control}
+        \o \l{declarative/ui-components/flipable}{Flipable}
+        \o \l{declarative/ui-components/progressbar}{Progress Bar}
+        \o \l{declarative/ui-components/scrollbar}{Scroll Bar}
+        \o \l{declarative/ui-components/searchbox}{Search Box}
+        \o \l{declarative/ui-components/slideswitch}{Slide Switch}
+        \o \l{declarative/ui-components/spinner}{Spinner}
+        \o \l{declarative/ui-components/tabwidget}{Tab Widget}
+        \endlist
+    \enddiv
+    \div {class="threecolumn_piece"}
+        \div {class="heading"}
+        Positioners and Layout
+        \enddiv
+        \list
+        \o \l{declarative/positioners}{Row and Column}
+        \o \l{declarative/righttoleft/layoutmirroring}{Layout Mirroring}
+        \o \l{declarative/righttoleft/layoutdirection}{Layout Direction}
+        \o \l{declarative/righttoleft/textalignment}{Text Alignment}
+        \o \l{declarative/screenorientation}{Screen Orientation}
+        \endlist
+    \enddiv
+    \div {class="threecolumn_piece"}
+        \div {class="heading"}
+        Data with Models and Views
+        \enddiv
+        \list
+        \o \l{declarative/modelviews/gridview}{GridView}
+        \o \l{declarative/modelviews/listview}{ListView}
+        \o \l{declarative/modelviews/pathview}{PathView}
+        \o \l{declarative/modelviews/package}{Package}
+        \o \l{declarative/modelviews/visualitemmodel}{VisualItemModel}
+        \o \l{declarative/modelviews/stringlistmodel}{String ListModel}
+        \o \l{declarative/modelviews/objectlistmodel}{Object ListModel}
+        \o \l{declarative/modelviews/abstractitemmodel}{AbstractItemModel}
+        \o \l{declarative/modelviews/webview}{WebView}
+        \endlist
+    \enddiv
+    \div {class="threecolumn_piece"}
+        \div {class="heading"}
+        Advance UI Components
+        \enddiv
+        \list
+        \o \l{declarative/modelviews/parallax}{Parallax}
+        \o \l{declarative/toys/clocks}{Clocks}
+        \o \l{declarative/toys/corkboards}{Corkboards}
+        \o \l{declarative/toys/dynamicscene}{Dynamic Scene}
+        \o \l{declarative/toys/tic-tac-toe}{Tic Tac Toe}
+        \o \l{declarative/toys/tvtennis}{TV Tennis}
+        \endlist
+    \enddiv
+    \div {class="threecolumn_piece"}
+        \div {class="heading"}
+        Image Elements
+        \enddiv
+        \list
+        \o \l{declarative/imageelements/borderimage}{BorderImage}
+        \o \l{declarative/imageelements/image}{Image}
+        \endlist
+    \enddiv
+    \div {class="threecolumn_piece"}
+        \div {class="heading"}
+        Loading Resources
+        \enddiv
+        \list
+        \o \l{declarative/sqllocalstorage}{SQL Local Storage}
+        \o \l{declarative/xml/xmlhttprequest}{XmlHttpRequest}
+        \endlist
+    \enddiv
+    \div {class="threecolumn_piece"}
+        \div {class="heading"}
+        Localization
+        \enddiv
+        \list
+        \o \l{declarative/i18n}{Translation}
+        \endlist
+    \enddiv
+    \div {class="threecolumn_piece"}
+        \div {class="heading"}
+        Threading
+        \enddiv
+        \list
+        \o \l{declarative/threading/threadedlistmodel}{Threaded ListModel}
+        \o \l{declarative/threading/workerscript}{WorkerScript Element}
+        \endlist
+    \enddiv
+    \div {class="threecolumn_piece"}
+        \div {class="heading"}
+        Graphical Effects
+        \enddiv
+        \list
+        \o \l{declarative/shadereffects}{Shader Effects}
+        \endlist
+    \enddiv
+\enddiv
+\div {class="threecolumn_area"}
+    \div {class="heading"}
+        QDeclarative Examples
+    \enddiv
+    These examples show how a QML based UI could interact with the
+    QDeclarative module.
+    \div {class="threecolumn_piece"}
+        \div {class="heading"}
+        From Qt C++ to QML
+        \enddiv
+        \list
+        \o \l {declarative/cppextensions/referenceexamples/adding}{Exporting C++ Classes}
+        \o \l {declarative/cppextensions/referenceexamples/properties}{Exporting Qt C++ Properties}
+        \o \l {declarative/cppextensions/referenceexamples/coercion}{C++ Inheritance and Coercion}
+        \o \l {declarative/cppextensions/referenceexamples/default}{Default Property}
+        \o \l {declarative/cppextensions/referenceexamples/grouped}{Grouped Properties}
+        \o \l {declarative/cppextensions/referenceexamples/attached}{Attached Properties}
+        \o \l {declarative/cppextensions/referenceexamples/signal}{Signal Support}
+        \o \l {declarative/cppextensions/referenceexamples/methods}{Methods Support}
+        \o \l {declarative/cppextensions/referenceexamples/valuesource}{Property Value Source}
+        \o \l {declarative/cppextensions/referenceexamples/binding}{Binding}
+        \endlist
+    \enddiv
+    \div {class="threecolumn_piece"}
+        \div {class="heading"}
+        Plugins and Resources
+        \enddiv
+        \list
+        \o \l{declarative/cppextensions/plugins}{Plugins}
+        \o \l{declarative/cppextensions/imageprovider}{Image Provider}
+        \o \l{declarative/cppextensions/networkaccessmanagerfactory}{Network Access Manager}
+        \o \l{src/imports/folderlistmodel}{Folder List Model} - a C++ model plugin
+        \endlist
+    \enddiv
+    \div {class="threecolumn_piece"}
+        \div {class="heading"}
+        Qt UI and QML Integration
+        \enddiv
+        \list
+        \o \l{declarative-cppextensions-qgraphicslayouts.html}{QGraphicsLayouts}
+        \o \l{declarative/cppextensions/qwidgets}{QWidgets}
+        \endlist
+    \enddiv
+\enddiv
+
+\div {class="threecolumn_area"}
+    \div {class="heading"}
+        Learning and Resources
+    \enddiv
+    The Qt Developer Network contains additional content such as learning
+    videos, a wiki, and a forum for posting questions.
+    \div {class="threecolumn_piece"}
+        \div {class="heading"}
+            Elements and Components
+        \enddiv
+        \list
+        \o \l{QML Elements}
+        \o \l{external: Qt Mobility QML Plugins}{QML Plugins}
+        \o \l{external: Qt Quick Components for Symbian}{Symbian Components}
+        \o MeeGo Components
+        \o \l{QtWebKit QML Module}
+        \endlist
+    \enddiv
+    \div {class="threecolumn_piece"}
+        \div {class="heading"}
+            Qt Developer Network
+        \enddiv
+        \list
+        \o \l{Qt eLearning}{Training Materials}
+        \o \l{Forums on Qt Developer Network}{Forums}
+        \o \l{Wiki on Qt Developer Network}{Wiki}
+        \endlist
+    \enddiv
+    \div {class="threecolumn_piece"}
+        \div {class="heading"}
+            Reference
+        \enddiv
+        \list
+        \o \l{All Classes}{Qt API}
+        \o \l{external: Qt Creator Manual}{Qt Creator Manual}
+        \o \l{Develop with Qt}
+        \endlist
+    \enddiv
+\enddiv
+*/
diff --git a/doc/src/examples/tutorial.qdoc b/doc/src/examples/tutorial.qdoc
new file mode 100644
index 0000000000..9042b5e3d8
--- /dev/null
+++ b/doc/src/examples/tutorial.qdoc
@@ -0,0 +1,232 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/
+**
+** This file is part of the documentation of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:FDL$
+** 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.
+**
+** Other Usage
+** Alternatively, this file may be used in accordance with the terms
+** and conditions contained in a signed written agreement between you
+** and Nokia.
+**
+**
+**
+**
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+/*!
+\page qml-tutorial.html
+\inqmlmodule QtQuick 2
+\title QML Tutorial
+\brief An introduction to the basic concepts and features of QML.
+\previouspage Introduction to the QML Language
+\nextpage QML Tutorial 1 - Basic Types
+
+This tutorial gives an introduction to QML, the mark up language for Qt Quick. It doesn't cover everything;
+the emphasis is on teaching the key principles, and features are introduced as needed.
+
+Through the different steps of this tutorial we will learn about QML basic types, we will create our own QML component
+with properties and signals, and we will create a simple animation with the help of states and transitions.
+
+Chapter one starts with a minimal "Hello world" program and the following chapters introduce new concepts.
+
+The tutorial's source code is located in the $QTDIR/examples/declarative/tutorials/helloworld directory.
+
+Tutorial chapters:
+
+\list 1
+\o \l {QML Tutorial 1 - Basic Types}{Basic Types}
+\o \l {QML Tutorial 2 - QML Components}{QML Components}
+\o \l {QML Tutorial 3 - States and Transitions}{States and Transitions}
+\endlist
+
+*/
+
+/*!
+\page qml-tutorial1.html
+\inqmlmodule QtQuick 2
+\title QML Tutorial 1 - Basic Types
+\contentspage QML Tutorial
+\previouspage QML Tutorial
+\nextpage QML Tutorial 2 - QML Component
+
+This first program is a very simple "Hello world" example that introduces some basic QML concepts.
+The picture below is a screenshot of this program.
+
+\image declarative-tutorial1.png
+
+Here is the QML code for the application:
+
+\snippet examples/declarative/tutorials/helloworld/tutorial1.qml 0
+
+\section1 Walkthrough
+
+\section2 Import
+
+First, we need to import the types that we need for this example. Most QML files will import the built-in QML
+types (like \l{Rectangle}, \l{Image}, ...) that come with Qt, using:
+
+\snippet examples/declarative/tutorials/helloworld/tutorial1.qml 3
+
+\section2 Rectangle element
+
+\snippet examples/declarative/tutorials/helloworld/tutorial1.qml 1
+
+We declare a root element of type \l{Rectangle}. It is one of the basic building blocks you can use to create an application in QML.
+We give it an \c{id} to be able to refer to it later. In this case, we call it "page".
+We also set the \c width, \c height and \c color properties.
+The \l{Rectangle} element contains many other properties (such as \c x and \c y), but these are left at their default values.
+
+\section2 Text element
+
+\snippet examples/declarative/tutorials/helloworld/tutorial1.qml 2
+
+We add a \l Text element as a child of the root Rectangle element that displays the text 'Hello world!'.
+
+The \c y property is used to position the text vertically at 30 pixels from the top of its parent.
+
+The \c 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 \i page element (see \l{anchor-layout}{Anchor-Based Layout}).
+
+The \c font.pointSize and \c font.bold properties are related to fonts and use the \l{dot properties}{dot notation}.
+
+
+\section2 Viewing the example
+
+To view what you have created, run the \l{QML Viewer} tool (located in the \c bin directory) with your filename as the first argument.
+For example, to run the provided completed Tutorial 1 example from the install location, you would type:
+
+\code
+bin/qmlviewer $QTDIR/examples/declarative/tutorials/helloworld/tutorial1.qml
+\endcode
+*/
+
+/*!
+\page qml-tutorial2.html
+\inqmlmodule QtQuick 2
+\title QML Tutorial 2 - QML Components
+\contentspage QML Tutorial
+\previouspage QML Tutorial 1 - Basic Types
+\nextpage QML Tutorial 3 - States and Transitions
+
+This chapter adds a color picker to change the color of the text.
+
+\image declarative-tutorial2.png
+
+Our color picker is made of six cells with different colors.
+To avoid writing the same code multiple times for each cell, we create a new \c Cell component.
+A component provides a way of defining a new type that we can re-use in other QML files.
+A QML component is like a black-box and interacts with the outside world through properties, signals and functions and is generally
+defined in its own QML file. (For more details, see \l {Defining New Components}).
+The component's filename must always start with a capital letter.
+
+Here is the QML code for \c Cell.qml:
+
+\snippet examples/declarative/tutorials/helloworld/Cell.qml 0
+
+\section1 Walkthrough
+
+\section2 The Cell Component
+
+\snippet examples/declarative/tutorials/helloworld/Cell.qml 1
+
+The root element of our component is an \l Item with the \c id \i container.
+An \l Item is the most basic visual element in QML and is often used as a container for other elements.
+
+\snippet examples/declarative/tutorials/helloworld/Cell.qml 4
+
+We declare a \c cellColor property. This property is accessible from  \i outside our component, this allows us
+to instantiate the cells with different colors.
+This property is just an alias to an existing property - the color of the rectangle that compose the cell
+(see \l{Property Binding in QML}).
+
+\snippet examples/declarative/tutorials/helloworld/Cell.qml 5
+
+We want our component to also have a signal that we call \i clicked with a \i cellColor parameter of type \i color.
+We will use this signal to change the color of the text in the main QML file later.
+
+\snippet examples/declarative/tutorials/helloworld/Cell.qml 2
+
+Our cell component is basically a colored rectangle with the \c id \i rectangle.
+
+The \c anchors.fill property is a convenient way to set the size of an element.
+In this case the rectangle will have the same size as its parent (see \l{anchor-layout}{Anchor-Based Layout}).
+
+\snippet examples/declarative/tutorials/helloworld/Cell.qml 3
+
+In order to change the color of the text when clicking on a cell, we create a \l MouseArea element with
+the same size as its parent.
+
+A \l MouseArea defines a signal called \i clicked.
+When this signal is triggered we want to emit our own \i clicked signal with the color as parameter.
+
+\section2 The main QML file
+
+In our main QML file, we use our \c Cell component to create the color picker:
+
+\snippet examples/declarative/tutorials/helloworld/tutorial2.qml 0
+
+We create the color picker by putting 6 cells with different colors in a grid.
+
+\snippet examples/declarative/tutorials/helloworld/tutorial2.qml 1
+
+When the \i clicked signal of our cell is triggered, we want to set the color of the text to the \i cellColor passed as a parameter.
+We can react to any signal of our component through a property of the name \i 'onSignalName' (see \l{Signal Handlers}).
+*/
+
+/*!
+\page qml-tutorial3.html
+\inqmlmodule QtQuick 2
+\title QML Tutorial 3 - States and Transitions
+\contentspage QML Tutorial
+\previouspage QML Tutorial 2 - QML Component
+
+In this chapter, we make this example a little bit more dynamic by introducing states and transitions.
+
+We want our text to move to the bottom of the screen, rotate and become red when clicked.
+
+\image declarative-tutorial3_animation.gif
+
+Here is the QML code:
+
+\snippet examples/declarative/tutorials/helloworld/tutorial3.qml 0
+
+\section1 Walkthrough
+
+\snippet examples/declarative/tutorials/helloworld/tutorial3.qml 2
+
+First, we create a new \i down state for our text element.
+This state will be activated when the \l MouseArea is pressed, and deactivated when it is released.
+
+The \i down state includes a set of property changes from our implicit \i {default state}
+(the items as they were initially defined in the QML).
+Specifically, we set the \c y property of the text to \c 160, the rotation to \c 180 and the \c color to red.
+
+\snippet examples/declarative/tutorials/helloworld/tutorial3.qml 3
+
+Because we don't want the text to appear at the bottom instantly but rather move smoothly,
+we add a transition between our two states.
+
+\c from and \c to define the states between which the transition will run.
+In this case, we want a transition from the default state to our \i down state.
+
+Because we want the same transition to be run in reverse when changing back from the \i down state to the default state,
+we set \c reversible to \c true.
+This is equivalent to writing the two transitions separately.
+
+The \l ParallelAnimation element makes sure that the two types of animations (number and color) start at the same time.
+We could also run them one after the other by using \l SequentialAnimation instead.
+
+For more details on states and transitions, see \l {QML States} and the \l{declarative/animation/states}{states and transitions example}.
+*/