Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries. Thanks for all your past and future contributions.

Introduction to Timer and Row QML Elements for beginners

From Wiki
Jump to: navigation, search

Article Metadata
Tested with
Devices(s): Qt Quick SDK
Keywords: Introduction to Timer and Row QML Element for beginners.
Created: girishpadia (17 Mar 2011)
Last edited: hamishwillee (24 Jul 2012)


Who should read this article?

The article is intended to those developers who want to jump into QML and need to know about the QML elements. The article is written for the QML beginners. In this connection, I have written my previous article to integrate the JavaScript with QML. Those who are interested can read that article at How to integrate JavaScript in QML


This article describes how to use the two QML components Row and Timer. There is another article about timer which nicely briefs the use of it. You can find the article at Simple Qt timer application in QML and this article has been short listed for QML contest recently organized by Nokia. Those who want an introduction about the "Timer" and "Row" QML element should read this article as getting started. This article do not use any other Animation available from QML and written purely on basic programing.

What is in mind?

I want to draw five horizontal boxes. Each box has been colored white. Border of each box is black. I want to change the color of each box to "Red" at every second. That means, each box will be colored Red for a second so that it looks like that Red color is moving from one box to another box. To create the boxes, I have used QML element "Row". To execute a code at every second, I have used the QML element "Timer". Let's see how this happens.

What you need ?

You need to download Qt SDK 1.1 beta version from Here The Qt SDK 1.1 version is available as Online and Offline version for Windows, Linux and Mac Operating Systems. Download and install appropriate version.

Application Code

Once you install Qt SDK, you need to create a new project. To do this goto File->New File or Project... You will find a dialog box shown in following image. Choose Qt Quick Project and Qt Quick UI. Give appropriate name to your project e.g. "TimerTest".

Article 14 image 1.PNG

You will see the "TimerTest.qml" with some code. Replace the code with the following. I have described each line of the program with the necessary comments so the reader can understand the flow of application and can know about the two element of QML "Row" and "Timer".

import QtQuick 1.0
Rectangle {
width: 220 // Width of Rectangle
height: 50 // Height of Rectangle
//The color is set to "Light Yellow". If you are using Qt Creator then there is one
// as soon as you move your mouse cursor on color property, it will show
// the a box display the defined color. Here if you move your mouse cursor on "lightyellow"
// and hold for a moment then it will show "lightyellow" color in a small box.
// This way you can visualize how the color actully looks like.
color: "lightyellow"
// An integer property is set to 1 for i
property int i: 1
Item {
// following tag creates timer control. The timer control is invisible to user while
// running the application
Timer {
// Interval in milliseconds. It must be interval values.
interval: 1000
// Setting running to true indicates start the timer. It must be boolean value.
running: true
//If repeat is set true, the timer will repeat at specified interval. Here it is 1000 milliseconds.
repeat: true
// This will be called when the timer is triggered. Here the
// subroutine changeBoxColor() will be called at every 1 seconde (1000 milliseconds)
onTriggered: changeBoxColor()
//Defining a Row element means it aligns its childs horizontaly.
Row {
// Spacing puts empty pixels between the two adjuscent children
spacing: 3
// Id is assigned as mainRow. ID must be unique in entire qml file.
id: mainRow
//Defining 5 child using Rectagle. Each is initially colored white,
// height and width 40 and border color as "Black"
Rectangle {color: "white"; id: one; width: 40; height: 40; border.color: "black" }
Rectangle {color: "white"; id: two; width: 40; height: 40; border.color: "black" }
Rectangle {color: "white"; id: three; width: 40; height: 40; border.color: "black" }
Rectangle {color: "white"; id: four; width: 40; height: 40; border.color: "black" }
Rectangle {color: "white"; id: five; width: 40; height: 40; border.color: "black" }
// Following is a User Defined Function which is called and executed after
// each interval specified in Timer element.
// Pls refer onTriggered: changeBoxColor() in the Timer defination above.
function changeBoxColor()
//Condition is checked for value of i.
//If i equal to 1 then first box will be colored "Red" and fifth will be colored "White"
//As our logic is to move red color from one box to another,
//We have set values of previous box's color back to white.
if(i == 1) {
one.color="red" //Here "one" is defined as "id" in first child of Row element.
if(i == 2) {
two.color="red" //Here "two" is defined as "id" in second child of Row element.
if(i == 3) {
three.color="red" //Here "three" is defined as "id" in third child of Row element.
if(i == 4) {
four.color="red" //Here "four" is defined as "id" in fourth child of Row element.
if(i == 5) {
five.color="red" //Here "five" is defined as "id" in fifth child of Row element.
i++; // Value of i is incremented by 1
if(i>5) // if value i is greater than 5 it is set back to 1 because we have only 5 box in a row

Post Condition

Run Application and you will see the Red color will move from one box to another at every second.

Article 15 image 1.jpg

Image - 1 of running application.

Article 15 image 2.jpg

Image - 2 of running application.

More Reference Material

Row QML Element

Timer QML Element

QML Elements


You can implement similar logic with Column QML Element. Try it yourself and see where you need to make necessary changes.

This page was last modified on 24 July 2012, at 01:45.
44 page views in the last 30 days.