Friday, 4 April 2014

Weather Forecast (First Ubuntu Touch app tutorial)

This post takes off exactly from previous post. For this part of tutorial you must open the gallery application described Introduction tutorial.

In this app I will be using openweathermap api to display weather data.

If you examine the openweathermap api you will find the different intervals supported by it. This api generally supports following intervals

1. Every 3 hour
2. Daily weather updates for a span of two weeks.

In our app we can display the interval as OptionSelector. This is used to select one option from whole bunch of options. In ubuntu-ui-toolkit-gallery folder open the file OptionSelectors.qml
In gallery app select the Option Selector. It will show different ways of using option selector.

In this app we will be using Collapsed one.
Goto OptionSelectors.qml and copy the code for collapsed option selector.

OptionSelector {
               objectName: "optionselector_collapsed"
               model: ["Value 1"),
             "Value 2"),
             "Value 3"),
             "Value 4")]

In our project create one more Row element after the Row element for time.

Column {
   Row {
   //This is time

   Row {
   id: line2
   //Here we have to add OptionSelector

Paste the OptionSelector where I mentioned. Create an id for it and name it. You can remove the objectName property, it's used for debugging. You can remove the text property as it will eat some space.

This is OptionSelector

                OptionSelector {
                    id: intervalTime
                    width: root.width * 0.4
                    selectedIndex: root.intervalIndex
                    highlightWhenPressed: true
                    model: ["Interval"),
                  "Every 3 hour"),
                  "Two days"),
                  "Three days"),
                  "Four days"),
                  "Five days"),
                  "Six days"),
                  "One week"),
                  "Eight days"),
                  "Nine days"),
                  "Ten days"),
                  "Eleven days"),
                  "Twelve days"),
                  "Thirteen days"),
                  "Two weeks"),]
                    containerHeight: itemHeight * 3
                    onSelectedIndexChanged: {
                        root.intervalIndex = selectedIndex

width property specify the total size of OptionSelector. We must specify it relative to the size of root. This allows scaling of app across different devices.

selectedIndex property holds the index of currently selected item in OptionSelector. Here I have set it to a variable intervalIndex. You must define it as specified in previous post. Note this variable is of int type. You can consider OptionSelector as an array and selectedIndex as array index pointing to current selected item.

model can be thought as array items.

containerHeight property indicates the size of OptionSelector when expanded. This is set to itemHeight * 3. This means when OptionSelector is fully revealed it's height will be thrice the height of one item. Simply it will display 3 options when expanded.

onSelectedIndexChanged is a signal of OptionSelector. Whenever the selectedIndex changed that is user selects a different option this signal is created and code within this signal is executed. Here we will save the selectedIndex in intervalIndex variable. The intervalIndex must be defined as int type

property int intervalIndex: 0

By default 0th item i.e. first item of OptionSelector is selected.

After closing the above OptionSelector add the following statements. This is for selecting the langauage.

               OptionSelector {
                    id: languageSelect
                    width: root.width * 0.5
                    selectedIndex: root.languageIndex
                    model: ["Language"),
                  "Chinese Traditional"),
                  "Chinese Simplified"),
                    containerHeight: itemHeight * 3
                    onSelectedIndexChanged: {
                        root.languageIndex = selectedIndex

Define the languageIndex as int variable and its value as zero.

Now add another Row element.

Column {
   Row {
      id: line1
   Row {
      id: line2
   //Add this
   Row {
      id: line3

This Row element includes the Text field for entering city name and a Search button.

In ubuntu-ui-toolkit-gallery folder to search for TextInputs.qml and Buttons.qml file. Copy paste the respective code within the third Row. Give those items an id.

We have reached at end of this tutorial. Hopefully you learned something. In next tutorial I will give the code for Text field and button, share a method to easily debug your program.

If you have any problem or queries you can mail me at or leave comment below.
Happy developing :)