===== QT Quick Application on TQMa6x =====

The application we create in this example will be built for TQMa6x, it can change font colour to a selection of colours found in a grid. Also the text will rotate upon touch.

The finished product will look like this:

{{:intern:general_information:qt_creator:helloworld_.jpg?nolink&600|}}

==== Creating a new Qt Quick project ====

On the Welcome page create a New Project, then select 'Qt Quick Application' and follow the instructions on screen.

The Qt Quick component set we used in this example is 'Qt Quick 2.0'.

For information on how to define a kit for TQMa6x refer to [[intern:general_information:qt_creator#define_a_kit|this]] page.

==== Creating the Colour Grid ====


Upon creation there will be a folder called QML. The main.qml file is located in the subfolder qml/[projectname]. For the cells in our colour grid we will create another .qml file in this folder which will serve as template and will significantly shorten our workflow.

To create a new .qml file press Ctrl + N and select 'Files and Classes/Qt/QML File (Qt Quick 2)' as shown in the image below.

Please note that the first letter of the name of your .qml file **__has__** to be capital. We named ours 'Cell.qml'


{{:intern:general_information:qt_creator:create_qmljpg.jpg?nolink&600|}}

The contents of 'Cell.qml' describe the properties of each of the cells in our colour grid. You can adjust size, border colour etc.

Feel free to copy the code of our Cell.qml


++++ Cell.qml |
<code>
import QtQuick 2.0

Item {
    id: container
    property alias cellColor: rectangle.color
    signal clicked (color cellColor)

    width: 120; height: 60;

    Rectangle {
        id: rectangle
        border.color: "white"
        anchors.fill: parent
    }

    MouseArea {
        anchors.fill: parent
        onClicked: container.clicked(container.cellColor)
    }
}
</code>
++++

==== Creating a Resource File ====
If you want to embed any files like images into your program you will need a resource file.
To create this press Ctrl + N again and select Files and Classes/ Qt/ Qt Resource File as shown in the image below. Then simply add the file you want to embed in your program.

{{:intern:general_information:qt_creator:create_resource.jpg?nolink&600|}}

==== Creating the application in the main.qml ====

Now that we have created all the set pieces it is time to build the application.
The main.qml has aleady been created upon starting this project so there is no need to create it by hand.

Start with defining the size of the window and its background colour:

{{:intern:general_information:qt_creator:rectangle.jpg?nolink&900|}}

If you want to have some text, you can continue with that. We have also added the functionality for the text to rotate, move and change colour upon touch. 

{{:intern:general_information:qt_creator:text.jpg?nolink&900|}}

Now we create the colour grid. You can change the colours by adjusting the value for 'cellColor'. Note that if you want to add colours you also have to add rows/ columns to the grid, otherwise the added colours will not be displayed.

{{:intern:general_information:qt_creator:grid.jpg?nolink&900|}}

Lastly we added the image file. As image source use the name of the image you have added to the resource file we have created earlier.

{{:intern:general_information:qt_creator:image.jpg?nolink&900|}}

This is what the finished code should look like:

{{:intern:general_information:qt_creator:main.qml.jpg?nolink&900|}}

Feel free to copy our code:

++++ main.qml |
<code>
import QtQuick 2.0

Rectangle {
    id: page
    width: 800; height: 480
    color: "silver"

    Text {
        id: helloText
        text: "TQ Embedded                          Hello world!!!"
        y: 30
        anchors.horizontalCenter: page.horizontalCenter
        font.pointSize: 24; font.bold: true

        MouseArea { id: mouseArea; anchors.fill: parent }

        states: State {
            name: "down"; when: mouseArea.pressed == true
            PropertyChanges { target: helloText; y: 160; rotation: 720; color:"steelblue" }

        }

        transitions: Transition {
            from: ""; to: "down"; reversible: true
            ParallelAnimation {
                NumberAnimation { properties: "y,rotation"; duration: 1500; easing.type: Easing.InOutQuad }
                ColorAnimation { duration: 1000 }
            }
        }
    }



    Grid {
        anchors.horizontalCenter: page.horizontalCenter
        id: colorpicker
        x: 4; anchors.bottom: page.bottom; anchors.bottomMargin: 4
        rows: 2; columns: 5; spacing: 3

        Cell { cellColor: "yellow"; onClicked: helloText.color = cellColor }
        Cell { cellColor: "gold"; onClicked: helloText.color = cellColor }
        Cell { cellColor: "orange"; onClicked: helloText.color = cellColor }
        Cell { cellColor: "crimson"; onClicked: helloText.color = cellColor }
        Cell { cellColor: "purple"; onClicked: helloText.color = cellColor }
        Cell { cellColor: "steelblue"; onClicked: helloText.color = cellColor }
        Cell { cellColor: "teal"; onClicked: helloText.color = cellColor }
        Cell { cellColor: "green"; onClicked: helloText.color = cellColor }
        Cell { cellColor: "grey"; onClicked: helloText.color = cellColor }
        Cell { cellColor: "black"; onClicked: helloText.color = cellColor }
    }

    Image {
      source: "qrc:/Logo_TQ-Systems.png"

       y: 80
        anchors.horizontalCenter: parent.horizontalCenter
    }
}
</code>
++++