Sunday, 6 April 2014

Weather Forecast (First Ubuntu Touch app tutorial)

Welcome to the fifth part of the tutorial. This tutorial will be wrap-up of what we have done so far.

import QtQuick 2.0
import Ubuntu.Components 0.1
import "components"

/*!
    \brief MainView with a Label and Button elements.
*/

MainView {
    id: root

    // objectName for functional testing purposes (autopilot-qt5)
    objectName: "mainView"

    // Note! applicationName needs to match the "name" field of the click manifest
    applicationName: "com.ubuntu.developer.karthik.upadya1.wrapup"

    /*
     This property enables the application to change orientation
     when the device is rotated. The default is false.
    */
    //automaticOrientation: true

    property string currentTime: ""
    property string currentDate: ""
    property int intervalIndex: 0
    property int languageIndex: 0

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

    width: units.gu(45)
    height: units.gu(75)

    Page {
        title: i18n.tr("Weather Forecast")
        Timer {
            id: timer
            running: Qt.application.active && visible == true
            repeat: true
            triggeredOnStart: true
            onTriggered: {
                root.updateTime()
                interval: 1000
            }
        }

        Column {
            spacing: units.gu(1)
            anchors {
                margins: units.gu(2)
                fill: parent
            }

            Row {
                id: line1
                spacing: units.gu(2)

                Label {
                    id: clockText
                    fontSize: "large"
                    color: "lightgreen"
                    text: i18n.tr(currentDate + "\t" + currentTime)
                }
            }

            Row {
                id: line2
                spacing: units.gu(2)

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

                OptionSelector {
                    id: languageSelect
                    width: root.width * 0.5
                    selectedIndex: root.languageIndex
                    model: [i18n.tr("Language"),
                            i18n.tr("English"),
                            i18n.tr("Russian"),
                            i18n.tr("Italian"),
                            i18n.tr("Spanish"),
                            i18n.tr("Ukranian"),
                            i18n.tr("German"),
                            i18n.tr("Portuguese"),
                            i18n.tr("Romanian"),
                            i18n.tr("Polish"),
                            i18n.tr("Finnish"),
                            i18n.tr("Dutch"),
                            i18n.tr("French"),
                            i18n.tr("Bulgarian"),
                            i18n.tr("Swedish"),
                            i18n.tr("Chinese Traditional"),
                            i18n.tr("Chinese Simplified"),
                            i18n.tr("Turkish")]
                    containerHeight: itemHeight * 3
                    onSelectedIndexChanged: {
                        languageIndex = selectedIndex
                    }
                }
            }

            Row {
                id: line3
                spacing: units.gu(2)

                TextField {
                    id: cityName
                    width: root.width * 0.6
                    placeholderText: i18n.tr("Enter city name")
                }

                Button {
                    id: searchButton
                    text: i18n.tr("Search")
                    onClicked: {
                        print(cityName.text)
                        print("Add the logic for getting and displaying weather data here")
                    }
                }
            }
        }
    }
}

When you execute the project the output will be like this:


On clicking the button you will get some message in standard output.

Now to an important aspect of publishing your app, If you are from android background you know about package namespace i.e. reverse domain name to uniquely identify your application. Ubuntu also has same concept. It is set in applicationName property. You can see it above.

When you are registering for publishing your app in Ubuntu store it asks for this information in Package namespace. By default it will be "com.ubuntu.developer.<your-name>". If you have a domain you can use it too.
The same package namespace must be used in applicationName property along with name of your main qml file in your project.

For Example:
I named above project as wrapup. So my qml filename is wrapup.qml
My package namespace is "com.ubuntu.developer.karthik.upadya1"
So I have set applicationName property as com.ubuntu.developer.karthik.upadya1.wrapup

And there is more hing you have to check for, in your Ubuntu-SDK IDE click on "Publish" in left panel. In General tab there are 5 text fields.
You have to make sure that value of Name field and applicationName property are same. If they are not just copy paste the appliactionName value in Name field.
You can put your name in Maintainer field.
Leave the Title field as it is.
Next you can give one line description about your app in Description field.
Version field indicate the current version. Follow your own version method. But keep in mind that as you update the app you must increase the version number.

If you have any doubts or problems you can mail me at karthik.upadya1@gmail.com or comment below.
In next tutorial we will see how to fetch the weather data.
Happy developing :)