Update 'hello world' tutorial.

1 files changed, 20 insertions, 42 deletions

diff --git a/doc/src/declarative/tutorial1.qdoc b/doc/src/declarative/tutorial1.qdoc
index d4f1095..f46c59d 100644
--- a/doc/src/declarative/tutorial1.qdoc
+++ b/doc/src/declarative/tutorial1.qdoc
@@ -1,68 +1,46 @@
 /*!
 \page tutorial1.html
-\title Tutorial 1 - Hello World!
+\title Tutorial 1 - Basic Types
 \target tutorial1
 
-This first program is a simple "Hello world" example. The picture below is a screenshot of this program.
+This first program is a very simple "Hello world" example that introduces some basic QML concepts.
+The picture below is a screenshot of this program.
 
 \image declarative-tutorial1.png
 
 Here is the QML code for the application:
 
-\code
-Rectangle {
-    id: Page
-    width: 480
-    height: 200
-    color: "LightGrey"
-    Text {
-        id: HelloText
-        text: "Hello world!"
-        font.pointSize: 24
-        font.bold: true
-        y: 30
-        anchors.horizontalCenter: Page.horizontalCenter
-    }
-}
-\endcode
+\snippet examples/declarative/tutorials/helloworld/t1/tutorial1.qml 0
 
 \section1 Walkthrough
 
+\section2 Import
+
+First, we need to import the types that we need for this example. Most QML files will import the built-in QML
+types (like \l{Rectangle}, \l{Image}, ...) that come with Qt with:
+
+\snippet examples/declarative/tutorials/helloworld/t1/tutorial1.qml 3
+
 \section2 Rectangle element
 
-\code
-Rectangle {
-    id: Page
-    width: 480
-    height: 200
-    color: "LightGrey"
-}
-\endcode
+\snippet examples/declarative/tutorials/helloworld/t1/tutorial1.qml 1
 
-First, we declare a root element of type \l Rectangle. It is one of the basic building blocks you can use to create an application in QML.
-We give it an id to be able to refer to it later. In this case, we call it \e Page. We also set the \c width, \c height and \c color properties.
-The \l Rectangle element contains many other properties (such as \c x and \c y), but these are left at their default values.
+We declare a root element of type \l{Rectangle}. It is one of the basic building blocks you can use to create an application in QML.
+We give it an \c{id} to be able to refer to it later. In this case, we call it \e page. We also set the \c width, \c height and \c color properties.
+The \l{Rectangle} element contains many other properties (such as \c x and \c y), but these are left at their default values.
 
 \section2 Text element
 
-\code
-Text {
-    id: HelloText
-    text: "Hello world!"
-    font.pointSize: 24
-    font.bold: true
-    y: 30
-    anchors.horizontalCenter: Page.horizontalCenter
-}
-\endcode
+\snippet examples/declarative/tutorials/helloworld/t1/tutorial1.qml 2
 
-We add a text element as a child of our root element to display the text 'Hello world!'.
+We add a \l Text element as a child of our root element that will display the text 'Hello world!'.
 
 The \c y property is used to position the text vertically at 30 pixels from the top of its parent.
 
-The \c font.pointSize and \c font.bold properties are related to fonts and use the \e 'dot' notation.
+The \c font.pointSize and \c font.bold properties are related to fonts and use the \l{Dot Properties}{dot notation}.
 
-The \c anchors.horizontalCenter property refers to the horizontal center of an element. In this case, we specify that our text element should be horizontally centered in the \e Page element.
+The \c anchors.horizontalCenter property refers to the horizontal center of an element.
+In this case, we specify that our text element should be horizontally centered in the \e page element (see \l{anchor-layout}{Anchor-based Layout}).
 
 \section2 Viewing the example