Qt Components on Blackberry 10

This post shows how you can use the Symbian Qt Components on Blackberry 10 (BB10) devices and why the name “Symbian” is a bit misleading here.

I’ll assume you know the basics about how to cross-compile for your target platform, about Qt and the tools involved. My demonstrations are based on console code only – if you like to integrate everything with QtCreator or QNX Momentics you’re free to do so of course.

Also please note, that usually you should use the Cascades UI framework to develop apps for Blackberry 10. Cascades is the officially supported framework, it runs fast, gives you native look and feel and is generally preferred over the approach described here.

Anyway, if you need to reuse your old MeeGo or Symbian UI code or there is a feature, which is not available in Cascades the following may help you.

Introduction

The original components developed by Nokia will compile out-of-the-box on all platforms that run Qt 4.8. All Symbian dependencies are optional, which is quite nice. Of course some things like battery indicator won’t show anything useful on a desktop system, but the look and feels will be the same. You can find the official components here: https://qt.gitorious.org/qt-components/qt-components/trees/1.1.3-symbian

Regarding BB10 the biggest issue is the difference in screen resolution between Symbian (640×360) and Blackberry 10 (1280×768). If you use the original source code your app will only cover about a quarter of the screen and all elements will be way too tiny.

Luckily Nokia designed those components to be used on future devices as well, so there is already basic support for higher resolution screens. For example all graphics are scalable (SVG) and default margins and sizes are defined using separate layout files.

So as a prove of concept we’ve made some changes that make the components use the whole screen and scale all elements to reasonable sizes. There is also basic support for device orientation changes, but it is not stable yet.

Compile and use on Blackberry 10

So now how to make use of all this? Here are some quick steps to get everything running on your BB10 device. Please note, that local paths may (of course) be different on your system.

1) Load BB10 SDK environment

cd ~/bbndk
source bbndk-env.sh

2) Get the modified components

cd ~/workspace
git clone https://git.gitorious.org/~conny/qt-components/connys-qt-components.git
cd connys-qt-components
git checkout bb10

3) Compile them for BB10

./configure -symbian -no-xdamage -no-mobility -nomake examples -nomake demos -nomake test
make

3) Now use the components

All files that you need are now under “connys-qt-components/imports/”. So copy this directory into the root of your BB10 app. Now all you need is to adjust the bar-descriptor.xml. This is needed to make sure that all files are properly deployed and to setup the environment so that your app can find those components during run-time.

<asset path="imports/">imports</asset>
<env var="QML_IMPORT_PATH" value="app/native/imports" />

Real-life examples

To see a real-life example, have a look at the “bb10″ branch of Andrea Grandi’s CuteSoma. Originally it was written for MeeGo and then ported to Blackberry using the process described above. The complete code is on Github.

Another example is MeshLab where Andrea Bernabei‏ created the Blackberry Playbook UI for a 3D engine made by ISTI based on those components as well.

What else? What about Qt 5 and QtQuick 2?

If you like, you can use a similar approach to get the Symbian Qt Components running on the Blackberry Playbook or on your desktop as well. Just make sure you have the right versions of Qt available to (cross-) compile.

We were hoping to get better performance if we run those components on top of Qt5, so we’ve ported them to make use of all the Qt5 / QtQuick 2.0 performance improvements. Unfortunately there are a couple of bugs in Qt5 on BB10 that slow everything down. The result is that the UI performs worse on Qt5 than it does on Qt4. Still, if you’re interested in a port to QtQuick 2.0 the branch symbian-qquick20 has everything you need. And yes, that also means you can run those components using Qt5 on your desktop and mix them with funky shader effects etc…

Future – BB10, Sailfish, Android and iOS

There are still no standard mobile UI components for Qt. Of course usually you’d like to get the native look and feel, but with Sailfish, iOS and Android becoming important Qt targets as well, sometimes it would just be handy to write something and have it run everywhere without going into details.

So maybe it would make sense to use those components, remove “Symbian” from the name and setup a new community project that adapts those components to the general need of mobile devices?! Maybe even with some device specific theming?

If you’re interested in that or if you’re having questions, please leave a comment.

Thanks

Thanks to all the people who helped with this project on IRC, Twitter and the BB forums. Andrea and Andrea, thanks for the screenshots!

Last but not least, thanks to Kodira This work has mostly been done during some of our weekly Open-Source-Fridays.

Ah, and if you’re interested, I’ve written something about MeeGo Components for Blackberry on my personal blog.

That’s all for now. Have fun!