Weather Forecast (First Ubuntu Touch app tutorial)

Welcome to the second part of creating the Weather Forecast app. This post continues from previous post.

Next thing we want to add is display current date and time. We can use Timer declarative statement to trigger events when time changes.
attribute shows
        Timer {
            id: updateTimer
            running: Qt.application.active && visible == true
            repeat: true
            triggeredOnStart: true
            onTriggered: {
                root.updateTime()
                interval: 1000
            }
        }

Above snippet shows how I used the Timer declarative statement.
The id attribute is used to reference this Timer statement from any part of the code.
The running attribute determines whether Timer needs to run or not. If the application is in background or not visible on screen then we don't want to update the timer so we can save the battery.
The repeat attribute indicates whether the Timer statement must be kept in loop or not.
The triggeredOnStart statement is used to specify the Timer statements must be executed as you launch the application.
onTriggered statement is called every time the Timer is triggered.
When the Timer is triggered we call a javascript function updateTime() for an interval of every 1000ms or 1 second.

Now you might be wondering from where root came. I have referenced my MainView as root.

MainView {
    id: root
....
}

Within this mainview we are defining our javascript functions and variables.

After the statement height: units.gu(75) add the updateTime() function.

function updateTime() {
    var date = new Date;
    root.currentDate = Qt.formatDateTime(date, "dd : MM : yyyy");
    root.currentTime = Qt.formatDateTime(date, "hh : mm : ss");
}

The first line gets the current date and time.
Then we use Qt.formatDateTime() function to format the date and time as required. The date and time are stored in currentDate and currentTime variable.
These variables must be declared.

Above the function updateTime() add following statements.

property string currentDate: ""
property string currentTime: ""

Every variable is used as property in qml. Then specify the type of property. Then specify the variable name. Then specify the initial value of variable. Unlike other languages a : separates the variable name and value, there is no need to end with the ;

Now we have the date and time variable stored in some variables we can easily use them to display on application.

Next within the Column statement add following statements.

Column {
...
//Add below lines
    Row {
        id: line1
        spacing: units.gu(2)
        Label {
            id: clockText
            fontSize: "large"
            color: "lightgreen"
            text: i18n.tr(currentDate + "\t" + currentTime)
        }
    }
}

Within Row we specify the spacing attribute. It indicates how much space must be left between each item within the row.
A Row is something which places the item horizontally.
A Column is something which places the item vertically. Basically our app is divided as one column which has multiple rows.
The statement units.gu(2) specify the amount of spacing. It specify the spacing in grid units. Grid units is something Ubuntu has designed wonderfully to make your application scale across different device width and height. To specify the dimension of an item one must always use units.gu()

A Label is used to display some text. This text is uneditable. Using this we display the current date and time.

This is it for this post. In the next post I will be covering the OptionSelector for interval time and Language, TextField, Buttons. Stay tuned.

If you have any problem mail me at karthik.upadya1@gmail.com or you can comment below.
Happy developing :)