/*! 
\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  \e 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 \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>
\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]

*/