1 files changed, 73 insertions, 33 deletions
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.