Ubuntu Touch App Development - Getting Started


Nathan Osman's Gravatar

Nathan Osman
published Oct. 13, 2014, 9:56 a.m.


The Ubuntu Touch operating system has come a long way in the last few months. As major issues are fixed and new features continue to land, developers are beginning to investigate the possibility of releasing a version of their app for the platform. This article will provide a brief overview of app development for Ubuntu Touch. (With lots of screenshots!)

The 2buntu App

Before going any further, it's worth pointing out that 2buntu has published an app for Ubuntu Touch. Currently, the app displays a list of recent articles and allows users to view them on their device. Although simple, it does a fairly good job of demonstrating the basics. You can view the source code for the application here on GitHub.

Requirements

This article assumes that you are running either Precise (12.04) or Trusty (14.04). You do not need to have a device in order to develop apps for Ubuntu Touch, though it will help with testing. If you have a Nexus device, you can even install Ubuntu Touch alongside your existing Android operating system using MultiROM.

Package Dependencies

Before beginning, you will need to make sure you have the SDK packages installed. Although the Trusty archives contain the necessary packages, the Ubuntu SDK Release PPA contains newer packages, so we will need to add the PPA:

sudo apt-add-repository ppa:ubuntu-sdk-team/ppa
sudo apt-get update
sudo apt-get install ubuntu-sdk

Quite a few packages will be installed, including Qt Creator. If you have a slow Internet connection, now might be a great time to brew a cup of coffee.

Introducing Qt Creator

Once installation is complete, go ahead and start Qt Creator (use the dash if you have Unity installed or press Alt+F2 and run qtcreator). If this is the first time you have launched Qt Creator, you will be greeted by the SDK wizard:

Qt Creator - Welcome Wizard

On the next page, you will be asked to create one or more "kits". I would suggest creating a kit for the armhf architecture using the ubuntu-sdk-14.10-utopic framework. You can do this by clicking the "Create a new Kit" button at the bottom of the dialog:

Qt Creator - Kits

After this process completes (which may require you to enter the password for your account), you will then be shown Qt Creator's main window. This is the screen that will greet you from now on when you launch Qt Creator:

Qt Creator w/ Ubuntu SDK

Go ahead and click the "Create a New Project" link to begin the New Project wizard. When the dialog appears, select the "App with Simple UI" option and click "Choose...":

Qt Creator - New Project

You will then be asked a series of questions. For the example application that we will be developing for this article, use the answers given below:

Name: testapp
Create in: /home/<username>
Domain: com.ubuntu.developer.testdev
Maintainer: Test Developer <test@example.org>
App name: testapp

When you get to "Kit Selection", be sure to select both "Desktop" and the armhf build you created earlier:

Qt Creator - Kit Selection

The next page will ask about version control, which you can safely ignore at this point. Just click "Finish" and your new project will be created and opened in Qt Creator.

Running the Project

Your project already contains everything needed to build and test it. Simply click the "Run" button in the lower-left of the Qt Creator window to launch your application:

Qt Creator - Run

Your application doesn't do much at this point. It displays a label and button that changes the text of the label when clicked:

Sample QML App

Now we'll take a look at some of the files that Qt Creator generated for us when the project was created. Each of the files in the project is listed in the tree on the left-hand side of the Qt Creator window.

manifest.json

When you first open the manifest.json file, you will be presented with a form that lets you describe your application and specify a few technical attributes, such as the version and framework to use:

manifest.json

If you prefer to edit a text file, click the "JSON Source" button near the top of the editor. In our particular example, there is no need to change any of the values here. If you released a new version of your application, then you would need to open this file and change the version field.

testapp.apparmor

In order to guarantee a base level of security on the Ubuntu Touch platform, applications must declare which features they intend to use. The testapp.apparmor file does exactly this. By default, our app declares that it requires access to networking in order to access the Internet:

{
    "policy_groups": [
        "networking"
    ],
    "policy_version": 1.2
}

testapp.qmlproject

This file describes the project to the Qt build system and also lets Qt Creator know which files are actually a part of your project. (This is what you see displayed in the project tree on the left.)

import QmlProject 1.1

Project {
    mainFile: "main.qml"
    ...

The line containing mainFile indicates which QML file contains the MainView for your application (more on that later).

main.qml

The QML files describe the user interface (UI) for your application. The QML language resembles JavaScript/JSON in some aspects, but provides a few unique additions that prove to be invaluable. We will spend most of the remainder of this article looking over the main.qml file in detail.

Comments

Any lines in the QML file that begin with // indicate a comment. These have no meaning to the application but they provide a way to document various parts of the file. If you need to use more than one line for a comment, insert the comment between /* and */.

// Single line comment
/* Multi
   line
   comment */

Components

Each element in the application (the button, for example) is referred to as a "component". Components are nested, which means that they can act both as an individual element and as a container for other elements. All of the components in our application are contained in the MainView. The basic syntax for a component is as follows:

TypeOfComponent {
    attribute1: value
    attribute2: value

    ...nested components...
}

There are many different types of components - pages, buttons, labels, etc. To include one, simply reference it by name, and specify the attributes you wish to include underneath. Attributes provide a way to modify the style or presentation of the control in some way. Let's take a look at the label from our app:

Label {
    id: label
    objectName: "label"

    text: i18n.tr("Hello..")
}

There are three attributes declared for the label:

  • id - this attribute assigns a unique name to the component that can be used in other places to refer to it
  • objectName - this attribute allows C++ code to find the element by using "label", though we will not need this feature in our app
  • text - this attribute indicates the text that should be displayed in the label

text could easily have been set to "Hello.." without using i18n.tr. However, this makes it easier to provide translations for our application later on if we decide to distribute it in different languages.

Events

An app that merely displays a label isn't terribly useful. Most applications are interactive - they respond to user interaction in a meaningful way. In our app, the label changes when someone clicks (or taps) the button. This is accomplished with a special attribute, called an "event handler":

onClicked: {
    label.text = i18n.tr("..world!")
}

The text between the { and } is interpreted as JavaScript code, so if you've worked with JavaScript before, you will be in familiar territory. We refer to the label using its id and we modify the text attribute.

Building the App

Once your app is ready to go, you will need to build a click package. Luckily, Qt Creator takes care of this for you. Click the "Publish" button (located in the far left of the Qt Creator window) and click the "Create and validate Click package" button:

Publish App

If everything goes well, you should end up with a click package. The location of the package will depend on the build directory. By default this would be a directory named build-testapp-UbuntuSDK_for_armhf_GCC_ubuntu_sdk_14_10_utopic-default in the same directory as the testapp project directory. Essentially:

QML Project Organization

Now What?

Once you have an app that's ready to be published, submit it here. After review, it will be available for installation in the Ubuntu Store on Ubuntu Touch devices.