Apps for the Ubuntu Phone

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.