Ubuntu looks ready to take on the world of smartphones. Canonical successfully scored lots of media attention when the company announced plans for the smartphone based on Ubuntu. Not so successful was our test of downloading and installing the operating system on a smartphone; however, Canonical is expected to provide the corresponding images in February 2013 (that is, by the time you read this article).

Developers nevertheless have some good news, in that the QML Toolkit can help you develop the first apps for "Ubuntu for phones." In this article, I'll describe how to set up the development environment, relying for the most part on instructions from app developer David Planella. At Canonical, Planella is responsible for the efforts surrounding the new Apps software category. He put together a website [1] encouraging aspiring app developers to use QML for Ubuntu (see the "What Is QML?" box).

I'll show how you can set up a development environment with Qt Creator. I won't go into the code itself, because some good online resources are available that I'll present later in the article. The prerequisite is that you use Ubuntu 12.10, because the components are intended for the Quantal Quetzal release. The Quantal packages can, with a bit of an adjustment, also be installed on Ubuntu 12.04; however, I wasn't able to test that option [2].

At this writing, the components for the QML Toolkit are not yet in the official Canonical repositories. Ubuntu 13.04 likely will officially provide all the packages. Thus, the method provided here is a moving target and the details could change. See the Ubuntu "Go Mobile" site for updates on the installation process [3].

Hands On: Qt 5

To start, you need the current version of Qt 5, which you can get from a PPA for package management. Use the following lines of code:

$ sudo add-apt-repository ppa:canonical-qt5-edgers/qt5-proper
$ sudo apt-get update
$ sudo apt-get install qt5-meta-full

The last-installed qt5-meta-full package gathers the essential packages onto the computer. The executable Qt applications are in the /opt/qt5/bin directory. To run them system-wide in Ubuntu, set the following path for Bash. Use Ctrl+Alt+T to open a terminal and enter the following:

$ echo 'export PATH=/opt/qt5/bin:$PATH' >> ~/.bashrc

The path now lands in the hidden configuration file ~/.bashrc .

QML Toolkit

The qt-components are reusable QML files or Qt Quick components (certain buttons and other graphical elements). Ubuntu also uses these components, and you install them from a PPA as follows:

$ sudo add-apt-repository ppa:ui-toolkit/ppa
$ sudo apt-get update
$ sudo apt-get install qt-components-ubuntu*notepad-qml qtcreator

As you can see, you're also loading the Qt Creator on your computer. This graphical application helps design GUIs with Qt and is also ideal for building the desired QML interfaces; however, you do need to link the Integrated Development Environment (IDE) with qmlscene to test the code from Qt Creator: qmlscene is a viewer for QML documents.

Preparing Qt Creator

You don't need to install qmlscene separately, because it ends up with the initially installed Qt 5 version in the /opt/qt5/bin directory. You'll pass this location on to Qt Creator: Start Qt Creator with Dash and then choose the menu item Tools | External .

On the External Tools tab, select Qt Quick | Preview (qmlviewer) . A double-click changes the selection to Preview (qmlscene) , which later becomes a menu item in Qt Creator. Next to the Executable: entry, click Browse and navigate to the /opt/qt5/bin directory where you'll find qmlscene . Click Open , then OK .

You can now create your first project by clicking File | New File or Project in the menus. Under Projects | Applications , select Qt Quick UI in the right-hand pane. Next, you'll need to give the project an appropriate name. In his tutorial, David Planella describes how you can create a currency converter called CurrencyConverter [4].

You need write permissions on the computer where you're creating the app. For example, this could be in the /home/{USER}/qml directory. To manage the code and its versions, you can also use a version control tool such as Bazaar [5].

Hello World!

After you've successfully completed the previous steps, a document opens that already contains code. Unfortunately, you can't execute this code using Tools | External | External Tools | Qt Quick | Preview (qmlviewer) , because it's out of date (Figure 1). The working code from Planella's app [4] is in Listing 1. Simply replace the code with his, and then you can then use the preview function to view it.

01 import QtQuick 2.0
02 import Ubuntu.Components 0.1
03
04 Rectangle {
05     id: root
06     width: units.gu(60)
07     height: units.gu(80)
08     color: "lightgray"
09
10     property real margins: units.gu(2)
11     property real buttonWidth: units.gu(9)
12
13     Label {
14        id: title
15        ItemStyle.class: "title"
16        text: i18n.tr("Currency Converter")
17        height: contentHeight + root.margins
18        anchors {
19            left: parent.left
20            right: parent.right
21            top: parent.top
22        }
23     }
24 }

Figure 1: You can develop your first apps for "Ubuntu for phones" using the QML Toolkit.

Good Starts

You can now start using various tutorials to get a handle on QML; experienced JavaScript users have a clear advantage here. Planella's aforementioned tutorial [4] is a good start, and he refers to the QML API [6] to help learn about the currently available elements.

Qt 5 developers also provide "Qt Essentials" [7] for creating a QML graphical interface. Canonical also is likely to publish an SDK for "Ubuntu for phones" that might reduce some of the current complexities. Interested developers can also get involved in "Ubuntu for phones" with their content under Canonical's privacy policy [3].