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