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 :)

Weather Forecast (First Ubuntu Touch app tutorial)

Welcome to the fourth part of creating Ubuntu touch app tutorial. In this tutorial we are going to learn something about taking Text inputs, Buttons and debugging.

Create a Row element as described in the previous post. Open the gallery application. Now click on Text Field option. You will see different ways to implement text input in Ubuntu. Right now we are going to use the Standard text field. Open TextInputs.qml file in ubuntu-ui-toolkit-gallery folder and copy the code for Standard text field. It might look like this:

            TextField {
                objectName: "textfield_standard"
                placeholderText: i18n.tr("Type me in...")
                width: parent.width
            }

In your projects qml file paste the following code within the Row element that you just created. Remove the objectName property and add id property.
Change placeholderText value to something like Enter city name.
Change the width property to root.width * 0.6

Now in gallery application click the Buttons option. This will display the different ways to implement a Button in Ubuntu. Now we are going to use the Standard button. Next step is to copy the code for it Buttons.qml file and paste it in your project's qml file. The code for Standard button might look like this:

            Button {
                objectName: "button_text"
                text: i18n.tr("Call")
            }

In your project's qml file remove the objectName property and add id property.
Change the text property value to something like Search.
After the text property add onClicked property. onClicked is something like a trigger which is called every time the Button is clicked. So we can add all the logic inside onClicked property.

Coming to debugging part. Debugging means finding and removing errors or bugs in your program. You can easily debug your program if you find order of execution. For example when a Button is clicked we will never know what happened after it is clicked unless we write the complete logic of our program. But when our program becomes sufficiently large it becomes more difficult to debug the program. So it's a good idea to find and remove errors as soon as possible.
So I use print  statement to debug my program. The print statement is same as printf statement in 'C'. It sends whatever written inside it to the standard output.
For print statements to work you must run the project. To do this in your terminal type qmlscene then browse to your qml file and double click it. The program executes and statements written inside the print statements are displayed in terminal.

Example: In previous Button statement add onClicked property like this.

    Button {
         id: button1
         text: i18n.tr("Search")
         onClicked: print("Search button is clicked")
    }

So whenever you press the Search button the statement "Search button is clicked" is printed on terminal.

That's it for today's part. Hopefully you learned something. In next tutorial I will give the full code up-to what we have done so far.

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

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"
               text: i18n.tr("Collapsed")
               model: [i18n.tr("Value 1"),
                       i18n.tr("Value 2"),
                       i18n.tr("Value 3"),
                       i18n.tr("Value 4")]
}

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

Column {
   ...
   Row {
   //This is time
   }

   Row {
   id: line2
   spacing: units.gu(2)
   //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: [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: {
                        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: [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: {
                        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
      spacing: units.gu(2)
      ...
   }
}

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 karthik.upadya1@gmail.com or leave comment below.
Happy developing :)

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 :)

Weather Forecast. (First Ubuntu touch app tutorial)

Hello, today I am going to share how I created my first Ubuntu touch app. As I started with developing the app I wondered how easy it is to develop apps for Ubuntu touch app. This tutorial could be divided into multiple post.

OK lets start with designing the app.

OK the image look bad, but I promise final app will be wonderful.

Open the Ubuntu-SDK IDE and create new project. You can keep all default settings in the first screen.

Hit the choose button. Give the project a name and hit Next. (You can give any name).

Now hit Finish button.

Congrats you have created your first project.

Now open the MyProject01.qml file. Remove the following selected lines.

These lines are not required for our project.

Referring the design we see that first we must display app name at top. This can be done as follows:

In the "Page" statement you will see the following line

title: i18n.tr("Simple")

Above line state that Simple is your app name or title.

So change the Simple to any other name you like. Here i18n.tr() is the method used for internationalization. If you want your app to support multiple language then put the string elements within i18n.tr() method. It will do the job for you.

You can run the application at any time. Just hit the big green Play button at left to run the app. If the big green button is disabled then open your terminal and type the following command:

qmlscene

Then hit enter. Now browse to the qml file and double click it. You will see the app running if there are no errors.

This tutorial is now quite long, I will break up now. And continue in the next post. Until then play around with code, read the documentation mentioned in Getting Started posts.

If you have any queries or problem you can comment below or mail to karthik.upadya1@gmail.com

Happy developing :)

Designing help.

If you have seen a native Ubuntu touch app it basically has a Ubuntu feel. What I am trying to say is the buttons, shapes etc trying to say that they are designed for Ubuntu.

You might think that it is very difficult create a button of that style or a list view of that feel.

Well, at first even I thought the same. But it is as easy as copy pasting the code.

Ubuntu has developed a template which has all the User Interface elements with the Ubuntu feel. If you want a button just find the code for it and copy paste it in your project.

You can find this template in your computer. Goto your file system then usr folder then lib folder then ubuntu-ui-toolkit folder then examples folder then unutnu-ui-toolkit-gallery folder. Here you will find design templates of all UI elements in Ubuntu. To view how each item looks like run the gallery file by double clicking it.

For example if you want a Text Input in your app then click on Text Field entry. This will show all the different types of Text Input in Ubuntu.

To get the code in the same folder search for the file TextInputs.qml and open it.

If I want a text input of type password then select the relevant cod stating password and copy paste it into my project. (Don't copy Template or TemplateRow items).

Refer image above to know what to copy.

As usual if you have any problems or queries you can comment below.
Happy developing :)

Getting Started

In this tutorial I will explain how to install necessary tools to start creating the Ubuntu touch apps.

First you need Ubuntu OS, Because Ubuntu-sdk currently supports only Ubuntu OS. So install the latest version of it to get started.

Next add SDK Release PPA by entering following command in terminal

sudo add-apt-repository ppa:ubuntu-sdk-team/ppa

After entering above command it will ask for your password, enter the password and hit Enter.

Install the Ubuntu SDK by entering following command in your terminal.

sudo apt-get update && sudo apt-get install ubuntu-sdk

That's it you are good to go. In terminal type ubuntu-sdk
This will launch the SDK where you can start developing beautiful apps.

You can also launch Ubuntu-SDK IDE by searching it in Unity dash.

You can develop native apps using qml.
You can develop web apps using html5.
Both are supported in Ubuntu touch.

To learn more about designing your app visit this page.

To learn more about Ubuntu-SDK platform visit this page.

Ubuntu has published a tutorial on how to develop native app from start to end. You can check it by going to this page.
The tutorial on how to develop web apps can be found on this page.

You can publish your app in this page.

Here are some useful links.
http://www.askubuntu.com/ Here you can ask questions regarding Ubuntu and experts will answer your question.
file:///usr/share/qt4/doc/html/qdeclarativeelements.html Here you can find all information regarding qml.
file:///usr/share/ubuntu-ui-toolkit/doc/html/overview-ubuntu-sdk.html Here you can find overview of Ubuntu SDK.
sdk-1.0 - Ubuntu Developer Complete documentation of Ubuntu-SDK 1.0
sdk-14.04 - Ubuntu Developer Complete documentation of Ubuntu-SDK (Updated SDK).

If you have any queries you can comment below.
Happy developing :)