/*! 
\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 {
    property var color

    id: CellContainer
    width: 40
    height: 25

    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: "LightGrey"
    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

\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
property var 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
}
\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
    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 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
    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.

[Previous: \l tutorial1] [Next: \l tutorial3]

*/