Using Maemo specific widgets with Qt

September 9, 2010 by Zoran

Maemo custom widgets with QtThe N900 is a piece of work. A smartphone running Linux. What more could a geek want? Well, for one thing, leveraging an existing application framework (Qt… wink, wink) for developing cool applications. And we would also like to be able to use platform specific widgets and whatnot. Well, duh.

Luckly for us, we can do such a thing with Qt. And it’s even a pretty straightforward process. I’m assuming you are familliar with the standard Qt development environment (qmake, Qt Creator, Qt SDK and the like) so I will not go into any details about it (at least not in this post :)).

First things first… Widgets we will be using are Maemo specific so the code we are going to write is platform specific. It will not even compile if we are compiling for platforms other than Maemo. So, we will be using #ifdefs for conditional compilation. Something like this:

// Some platform independent code...
#if defined(Q_WS_MAEMO_5)
    // Some Maemo specific code...
#endif
    // More platform independent code...

In the project file the platform specific ifology looks something like this:

# Standard entries...
maemo5 {
    # Maemo specific entries...
}
# More standard entries...

So lets churn some code. We want to give the user the ability to enter a time for us. The platform agnostic way would be to make a label and a field for user input. And then later validate the input and report an error it the user entered something that was not an acceptable time. Another aproach would be to develop a custom time widget designed specifically for entering time. On Maemo we have such a widget. Better said, we have such a construct. It is a symbiosis of Maemo’s value button and time pick selector. Let’s se how it looks like in code:

// Header stuff...

#if defined(Q_WS_MAEMO_5)
#include <QtMaemo5>
#endif

// Other code...

#if defined(Q_WS_MAEMO_5)
    QMaemo5ValueButton * button = new QMaemo5ValueButton("Time:");
    QMaemo5TimePickSelector * picker = new QMaemo5TimePickSelector(button);
    button->setPickSelector(picker);
    button->setValueLayout(QMaemo5ValueButton::ValueBesideText);
    layout->addWidget(button);
#endif

// More other code...

We are only creating our value button widget and a time pick selector and making them work together. We are also telling the button to display the selected time in the same line as the button label because the default is in the line below the label. And finally, putting our widget on the screen.

But this does not even compile. We still have to make some adjustments in the project file. And here they are:

maemo5 {
    QT += maemo5
}

We are telling Qt that we want to use it’s QtMaemo5 module. Now it works perfectly. The user can only enter valid time values and we’re off the hook:

Maemo value button

Maemo value button

Maemo time picker

Maemo time picker

Now that wasn’t so bad. There are other Maemo specific widgets contained in Qt (like date picker, edit bar and information box). More information about them can be found in the QtMaemo5 module’s documentation. Feel free to drop a line in the comment section if you need more details.