Home · All Classes · Main Classes · Deprecated

Developing Qt applications for Maemo 5 and MeeGo

Audience

This section targets established Qt developers who would like to use Qt to develop an application for Maemo 5 or MeeGo, without the need to use the native frameworks, Hildon and MeeGo Touch, respectively. Native development is not covered in this section.

Introduction

Since Qt is a cross-platform development framework, the same source code for a Qt application can be compiled on different operating systems without changes and without any custom code. As a result, your application visually integrates into the given environment, whether it is Linux, Windows, or Mac OS X.

This is, of course, also true for Maemo 5 and MeeGo. Compiling your Qt desktop application on the Maemo platform results in an application that comes very close to the native look and feel. On Maemo 5, your application mimics the theming and the habits of applications that are built on top of the Hildon framework. On MeeGo, it emulates the appearance and the behaviour of "native" MeeGo Touch applications.

When developing a Qt application for the MeeGo Touch platform, keep the mobile environment and the philosophy behind MeeGo Touch in mind. The following sections give some guidelines for ensuring a good user experience.

MeeGo Touch style

Your Qt application adjusts its look and feel on both Maemo 5 and MeeGo to emulate the user interface of each platform:

Both styles take theme changes automatically into account. However, since the style is not identical to a truly native application, there can be slight differences in terms of look and behaviour compared to a "real" Maemo 5 or MeeGo application. You can reduce these differences by taking certain typical requirements of the platforms into account.

While the target framework and the implementations are different, both styles share several characteristics. Thus, if your style looks fine on one of the two platforms, it is quite likely that it has a comparable appearance on the other platform as well.

Maemo 5 and MeeGo Touch styles not only modify the theming but they also ensure that your application becomes finger-usable and makes use of the default services and resources provided through each framework.

Compared to other Qt styles, the Maemo 5 and MeeGo Touch styles go way beyond simple widget styling. They have a significant impact on the way dialogs are shown:

In Qt, you can change the style from the command line:

yourapp -style maemo5

or

yourapp -style meegotouch

Note: The Maemo 5 style is only available as a part of the special Qt version that comes with Maemo 5 support, while the MeeGo Touch style is provided by the libmeegotouch framework. On both Maemo 5 and MeeGo Touch platforms, the platform style is used by default for plain Qt applications.

You can change the style either with the -style command line parameter or in your source code with the QStyle API. However, it is not generally recommended since the default styles provided with Qt are not finger-usable.

Achieving a good user experience

The user interface of the Maemo and MeeGo platform is optimised for the specific requirements of the device and the needs of your target audience. This results in a user interface that is significantly different from the desktop paradigm.

The deployment scenario for a plain Qt application is generally one of the following:

In both cases, it is most likely that the resulting user experience does not match the quality of a true MeeGo Touch application. Follow the recommendations below to improve the user experience provided by your application.

Creating a workflow-driven user interface

First and foremost, the user interface of Maemo or MeeGo applications is much simpler than a typical desktop application. This is due to the obvious limitations in terms of screen size. Due to these constraints, the application developer must understand the tasks performed by a user. This helps you create a user interface that does not get in the way of the user and is easy to use.

If your application has been originally developed for the desktop, reconsider the user interface. Desktop applications are often unnecessarily cluttered with controls. An over-loaded UI does not only exceed the space that is available on the mobile platform, but also typically overwhelms novice users on the desktop. Streamlining the UI helps you create a good user experience on the mobile platform and makes your application easier to use on the desktop as well. Streamlining does not necessarily mean that you need to remove functionality, often you just need to rearrange your UI so that it is more task-driven and follows the actual workflow of the user.

Make your application independent of resolution and available size

The N900 running on Maemo is a small device, whereas MeeGo Touch supports a range of devices with different screen sizes. Thus, it is important that, despite the high resolution, it is possible to easily recognise all visual parts of the UI from a reasonable distance. For normal ready-made QWidgets (such as QPushButton, QMenu), the style takes care of this automatically. Note: The styling of widgets is carried out according to the properties defined in the MeeGo Touch CSS. Therefore, in some cases (such as with fonts and geometries), the properties provided by Qt itself are not used.

Whenever possible, instead of hard-coding custom widgets and views:

It also needs to be possible to resize the application window and dialogs so that they fit into the space that is horizontally available on the device. On the N900 the width of the display in landscape mode is 800 pixels. So your application needs to fit into this minimum screen width. When designing the UI of your application, you should also consider that the translated texts may require more space.

Tool bars should only contain the most important features that are necessary for performing tasks. Ideally, the whole tool bar should fit completely onto the screen.

Ensure that your application stays finger-usable

The MeeGo Touch Framework allows users to navigate by using their fingers. This means that you need to think carefully about the size of custom widgets and ensure that all functionalities are accessible with a left-click or gestures. There are some common pitfalls resulting from the faulty assumption that the user is using a mouse pointer. To avoid these:

Things to avoid

Avoid fancy widgets

There are a few classes which are either not styled by the MeeGo Touch style or are otherwise inconsistent. Try to avoid the following:

Avoid overly clever UI design

Avoid too complex UI design by following these guidelines:

There are also some non-standard practices that do not prevent the style from working. However, if the style delivers unexpected results, take these issues into account:

Keep the battery in mind

Power saving is especially important for applications that run on a mobile platform:

Maemo 5 widgets

The following widgets are specific for the Maemo 5 platform:

It is not recommended that you use these widgets since it is most likely that they will not be included in the MeeGo Touch platform.

MeeGo Touch Qt style API

The MeeGo Touch Qt style API determines the style on MeeGo Touch. The style is set with dynamic properties and literal strings to avoid headers from MeeGo Touch or linking against any MeeGo Touch library. Thus, the plain Qt application is independent of the target platform.

To disable styling for your own custom widget, use the dynamic property NoMStyle. For a custom widget instance "mywidget", it would be:

    mywidget->setProperty("NoMStyle", true);

Disable styling only if the style renders a certain custom widget unusable, which is very rare in practice. Note: This only disables styling for this particular widget. It does not affect the children of "mywidget".

If you run into problems with the style or want to completely disable the MeeGo Touch Qt style for your application, you can also set the dynamic property directly for QApplication:

    qApp->setProperty("NoMStyle", true);

With the MeeGo Touch Qt style you can also disable some elements that are added by the style, for example, the status bar or the navigation bar.

Disabling the status bar:

    qApp->setProperty("NoMStatusBar", true);

Disabling the navigation bar:

    qApp->setProperty("NoMNavigationBar", true);

When disabling the navigation bar, your application does not display the Close and Minimise buttons anymore. Thus, the developer needs to close and minimise the application.

The style also provides a basic API for supporting orientation changes on the device. For most QWidget-based Qt applications it is difficult to implement an orientation change, but for some cases, such as QML- or QGraphicsView-based applications, it can be useful. Therefore the orientation change support of the style is opt-in which means the application needs to tell the style whether it would like to support the orientation change. Note: The orientation change support only adjusts the window decorations to the new orientation. You have to take care of rotating the application's content yourself!

You can activate the orientation change for your application like this:

    QMetaObject::invokeMethod(app.style(), "setOrientationChangeEnabled", Q_ARG(bool, true));

Once the orientation change is enabled, the style sends you a signal, as soon as an orientation change happens. The signal tells you the new orientation in degrees. For reacting on the orientation change simply connect to this signal:

    connect(style(), SIGNAL(orientationChanged(int)), this, SLOT(rotateGui(int));

additionally you can always ask the style about its current orientation by calling:

    int orientation = 0;
    QMetaObject::invokeMethod(style(), "orientation", Q_RETURN_ARG(int, orientation));

You can also look at the qtstyleorientation demo application which shortly demonstrates how orientation change works.

The orientation change support is not fully implemented yet. It rotates the statusbar and the navigation bar, but menus and dialogs are not getting rotated yet.

The following figures illustrate the same view of an application on both supported platforms:

qtstyleexample-pizza-freemantle.png

Example application on Maemo 5 (Fremantle)

qtstyleexample-pizza-harmattan.png

Example application on MeeGo

Limitations of Qt support compared to native MeeGo Touch applications

Since MeeGo Touch and its widgets are based on QGraphicsView, some features cannot be emulated for plain QWidget-based widgets. The following MeeGo Touch features cannot be supported by the Maemo styles:

Known issues and common problems


Copyright © 2010 Nokia Corporation
MeeGo Touch