Create your second QML app for Ubuntu touch

Why second ?

I expect you have already completed the first one at http://developer.ubuntu.com/get-started/. I hope you are also familiar with little javascript as well.

1. Introduction

In this post, I will try to provide enough resources for you to get started on mobile application development using QT Meta Language (QML). Although QML is not Ubuntu specific package, there will be some libraries and convention used in this tutorial that is specific for Ubuntu. However, you could easily use resources mentioned in this post to port your application to the platform of your choice.

2. Resources

Install two packages namely ubuntu-ui-toolkit-doc and qt4-doc-html  and bookmark following files using a browser.

•  file:///usr/share/ubuntu-ui-toolkit/doc/html/overview-ubuntu-sdk.html.
• file:///usr/share/qt4/doc/html/qdeclarativeelements.html.

These are links to API documentation for Ubuntu touch and QML respectively, which you might need while writing the actual code.

However you might ask, how about actually learning from something like a book. Well, the resources at http://qt-project.org/wiki/Developer-Guides does exactly the same. Some of the files I found there useful for writing QML applications are as follows.

• Introduction to Application Development with Qt Quick ePub PDF
• Particles and Graphics Effects in Qt Quick 2 ePub PDF
• Developing an arcade game with Qt3D ePub PDF
• Qt OpenGL Tutorial ePub PDF

To get started, Introduction to Application Development with Qt Quick should be sufficient.

3. Design

For mobile, design is the key to make your application appeal to more people. Browse http://design.ubuntu.com/apps to learn more about how you should design for Ubuntu.

Ubuntu uses a concept called grid unit (GU). Value of 1 GU might depend upon the resolution of the particular device, in which the application runs. This solves scaling problem to some extent. However, you should still be careful about things like orientation and how each component fits on the screen. Speaking of components, I suggest you install a software called Pencil and prototype your application using Mobile – Android ICS as the template, before you even start to write anything. It solves lots of problems you might have later on.

Note: Use 40GU for width and 75GU for height as the minimum size.

4. Development

As you learn, you will know QML apps are basically stacks of rectangles over one another. A simple QML application (e.g helloworld.qml) might look like this.

import QtQuick 2.0

Rectangle {
 width: 200
 height: 400
}

To run this file, you can use following command.

$ qmlscene helloworld.qml

If you stack rectangles over rectangles you might soon end up trying to figure out, which one is the culprit to break the application layout, rather than trying to progress in  your development. Therefore, I suggest you create a global variable like the following and use it while setting color properties for your components.

// Set it to true and debug
var showDebugginColor = false

Inside the component set color as

color: showDebugginColor? "red" : yourcolor1  // component 1
color: showDebugginColor? "blue" : yourcolor2 // component 2

This sets different colors for each element, while debugging.

After you are done, set showDebuggingColor back to false.

5. Ubuntu feel

There are certain components (checkbox, button, textbox etc) that is specific to Ubuntu touch (in terms of design). Install  a package called ubuntu-ui-toolkit-examples and go to /usr/lib/ubuntu-ui-toolkit/examples/ubuntu-ui-toolkit-gallery directory and run the script gallery ( type ./gallery in a terminal). Browse the components and choose that fits your application (copy the source code from qml files in same directory where the gallery script resides).

6. Deployment

It looks like Ubuntu is going to have its own self-contained package installer, but for the time being, we have to rely on traditional method of packaging. Good news is, Qt Creator does most of the work for us. It even creates templates for debian packaging.

Once you have Ubuntu touch image  installed on your phone, go to https://wiki.ubuntu.com/Touch/ReleaseNotes and setup ssh server on your device. Once you get ssh running, setup your device on Qt Creator (Devices tab) and deploy your application using Build -> Ubuntu Touch -> Run Application on Device or other options in that menu.

7. Conclusion

I hope this tutorial has given enough information for you to start writing QML or Ubuntu touch applications, if you choose to do so. Once you become familiar with basic QML development, you are ready to explore other documents like Qt OpenGL and Developing an arcade game with Qt3D from the list I mentioned above.

Apart from Ubuntu, QML is currently supported in Blackberry and Jolla. Qt 5 is also expected to be released for Android and IOS as well.

Cheers!!

8. References

• http://developer.ubuntu.com/get-started/
• http://qt-project.org/wiki/Developer-Guides
• http://design.ubuntu.com/apps
• http://pencil.evolus.vn/
• https://wiki.ubuntu.com/Touch/ReleaseNotes

Advertisements