Porting a Qt Quick app

Setting up the project

Unlike a Qt widget project, opening a Qt Quick project in Qt Creator and adding a bar-descriptor.xml file will not produce an app that runs on BlackBerry 10. The .qml files cannot be directly executed on the device, so you'll need to create a C++ app to load them. Click File > New File or Project. In the New dialog, click Applications > BlackBerry Qt Quick Application and click Choose. Here you can assign information and assets to the project. In the Project name field, enter clocks as the project name. For this tutorial we won't make any additional changes, so click Next > Next > Next > Finish. This will create an empty project with a file structure BlackBerry 10 can use. Your newly created project should look like this:

Next, you need to copy your QML and image assets into the <path_to_workspace>\<projectname>\qml folder. After the files have been copied, you need to add the files to the clocks.pro file:

TEMPLATE = app

# Please do not modify the following line.
include(qmlapplicationviewer/qmlapplicationviewer.pri)

# Additional import path used to resolve QML modules in Creator's code model
QML_IMPORT_PATH =

# The .cpp file which was generated for your project. Feel free to hack it.
SOURCES += main.cpp

OTHER_FILES += bar-descriptor.xml \
    qml/background.png \
    qml/center.png \
    qml/clock.png \
    qml/Clock.qml \
    qml/clock-night.png \
    qml/clocks.qml \
    qml/hour.png \
    qml/minute.png \
    qml/quit.png \
    qml/QuitButton.qml \
    qml/second.png \

Once you've added the files, save clocks.pro and the Project view will automatically update to reflect the changes:

Next, you need to define the main QML file for the project in main.cpp:

viewer.setMainQmlFile(QLatin1String("qml/clocks.qml")); // MAINQML

Because we simply copied the QML and image assets into the <project>\qml folder, we need to remove a reference to the original file structure in clocks.qml by removing import "content":

import QtQuick 1.0
import "content"

Becomes:

import QtQuick 1.0

With this change in place, you are ready to build and run the app:

Although the app is running, it could use a bit of tweaking to make it a little more user friendly.

Tweaking the visuals

The main issue we want to address is how to optimize certain UI elements for the new screen size and resolution.

To begin, let's increase the size of the text which specifies the location from 14 to 36. In Clock.qml:

Text {
    id: cityLabel
    y: 200; anchors.horizontalCenter: parent.horizontalCenter
    color: "white"
    font.bold: true; font.pixelSize: 36
    style: Text.Raised; styleColor: "black"
   }

Next, we'll change the layout of the clocks to take advantage of the height of the screen. In clocks.qml we change Row to Column:

Column {
    anchors.centerIn: parent
    Clock { city: "New York"; shift: -4 }
    Clock { city: "Mumbai"; shift: 5.5 }
    Clock { city: "Tokyo"; shift: 9 }
   }

Next, we increase the height of the clock Item to increase the spacing between the clocks:

id: clock
    width: 200; height: 280

Finally, we'll change the position of the QuitButton to the bottom of the screen. In clocks.qml:

QuitButton {
    anchors.right: parent.right
    anchors.bottom: parent.bottom
    anchors.margins: 10
   }

The app should now look like this:

From here, your next step is to sign and distribute the app on BlackBerry World. For more information on signing and distributing your app, see Packaging, deployment and distribution. Although this tutorial only shows a simplistic example of how to port a Qt Quick app, it should be enough to get you started porting your own Qt Quick apps to BlackBerry 10.