1 files changed, 94 insertions, 0 deletions
diff --git a/doc/src/declarative/tutorial2.qdoc b/doc/src/declarative/tutorial2.qdoc
new file mode 100644
index 0000000..8898e68
--- /dev/null
+++ b/doc/src/declarative/tutorial2.qdoc
@@ -0,0 +1,94 @@
+/*! 
+\page tutorial2.html
+\title Tutorial 2 - Some colors
+\target tutorial2
+
+This chapter adds a color picker to change the color of the text.
+
+\image declarative-tutorial2.png
+
+Our color picker is made of many cells with different colors. To avoid writing the same code many times, we first create a new \c Cell component with a color property (see \l components).
+
+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>
+\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>
+\endcode
+
+\section1 Walkthrough
+
+\section2 The Cell Component
+
+\code
+<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>
+\endcode
+
+We declare a \c color property. This property is accessible from  \i outside our component, this allows us to instantiate the cells with different colors.
+
+\code
+<Rect anchors.fill="{parent}" color="{CellContainer.color}"/>
+\endcode
+
+Our cell component is basically a colored rectangle.
+
+The \c anchors.fill property is a convenient way to set the size of an element. In this case the \c Rect will have the same size as its parent.
+
+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" />
+\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 \i 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>
+\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.
+
+[Previous: \l tutorial1] [Next: \l tutorial3]
+
+*/
+