How to use Button from Qt Quick Components for Symbian

In this post I will present you two videos I have created. The videos are about a simple app for Symbian^3 phones. App consists of three buttons that change the color of the rectangle and the text of the Text element on the screen.
These videos will show you how to create a button and how to detect when it was pushed. You will also learn how to position elements on screen so they look good in different orientations and screen sizes. We are using Qt Quick components in this tutorial. In this article you will also find part of the source code for this project.



In fist video we will create and app for Nokia Symbian phones with flowing QML elements:
1. Button element introduced in Qt Quick Components 1.0
2. Text element introduced in Qt 4.7
3. Rectangle element introduced in Qt 4.7
We will also use qt console function to write message to console for debugging purposes. We will also examine relation between Edit mode and Designer mode. Parent child relationship between elements will be covered

You can watch first part of the video:

In the second episode we will arrange the user interface using anchors. User interface will re flow itself cording to the orientation of the phone. 
The second part of the video is here:

This code is tested on Symbian Anna and Belle phones. This code was written using QtSDK 1.4.4. and Qt Creator 2.4.0 Based on Qt 4.7.4 (32 bit) Built on Dec 16 2011 at 03:25:42. At the moment of writing this text it was latest version of QtSDK available. With newer versions of Qt the code will probably change and it will get updated. If the code changes the logic behind is will stay the same so this video will be of some use to you.


If you want to learn more read this links:
Introduction to the QML Language:
http://doc.qt.nokia.com/4.7-snapshot/qdeclarativeintroduction.html
Introduction to the Qt Quick Components:
http://doc.qt.nokia.com/qt-components-symbian/qt-components-introduction.html
More on Button:
http://doc.qt.nokia.com/qt-components-symbian/qml-button.html


Here is the source code:
main.qml file - I haven't changed this one
import QtQuick 1.1
import com.nokia.symbian 1.1

PageStackWindow {
    id: window
    initialPage: MainPage {tools: toolBarLayout}
    showStatusBar: true
    showToolBar: true

    ToolBarLayout {
        id: toolBarLayout
        ToolButton {
            flat: true
            iconSource: "toolbar-back"
            onClicked: window.pageStack.depth <= 1 ? Qt.quit() : window.pageStack.pop()
        }
    }
}

MainPage.qml:
import QtQuick 1.1
import com.nokia.symbian 1.1

Page {
    id: mainPage
    Text {
        id:text1
        color: "#ffffff"
        text: qsTr("Color: Yellow")
        horizontalAlignment: Text.AlignHCenter
        anchors.top: parent.top
        anchors.topMargin: 10
        anchors.horizontalCenter: parent.horizontalCenter
        font.pixelSize: 30
    }

    Button {
        id: btnGreen
        x: 136
        y: 464
        text: "Green"
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 10
        onClicked: {
            text1.text = "Color: Green"
            rectangle1.color = "#00ff00"
            console.log ("Green button pressed")
        }
    }

    Button {
        id: btnRed
        x: 136
        y: 464
        text: "Red"
        anchors.right: btnGreen.left
        anchors.rightMargin: 20
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 10
        onClicked: {
            text1.text = "Color: Red"
            rectangle1.color = "#ff0000"
            console.log ("Red button pressed")
        }
    }

    Button {
        id: btnBlue
        y: 464
        text: "Blue"
        anchors.left: btnGreen.right
        anchors.leftMargin: 20
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 10
        onClicked: {
            text1.text = "Color: Blue"
            rectangle1.color = "#0000ff"
            console.log ("Blue button pressed")
        }
    }

    Rectangle {
        id: rectangle1
        color: "yellow"
        anchors.top: text1.bottom
        anchors.topMargin: 20
        anchors.bottom: btnGreen.top
        anchors.bottomMargin: 20
        anchors.right: parent.right
        anchors.rightMargin: 20
        anchors.left: parent.left
        anchors.leftMargin: 20
    }
}