Kate Alhola's Blog

What Ui toolkit I should use for mobile application development has been a top issue since Maemo5/Fremantle SDK alpha release. There were two choices available, GTK+/Hindon and Qt. The amount of choices has been increased since then and caused a lot of confusion among developers.

Many developers would like to continue to use their old familiar UI toolkit, GTK+/Hildon, QWidgets or Symbian Avkon but there is many reasons reconsider your choice and look at a new toolkit Qt Quick and Qt Quick Components.

To find reasons, we should look 30 years back into history. The modern desktop Graphical User Interface story begins from Xerox Palo Alto Research Center, PARC. Most of basic inventions like mouse, desktop metaphor and windowing system with overlapping windows were made there. Modern Desktop GUI matured to it's current state with first Apple Macintosh release 1984. You can read more about the history from http://en.wikipedia.org/wiki/History_of_the_graphical_user_interface .

After these days, there were no major changes in Desktop GUI paradigm, we had standard UI elements like overlapping windows, pull down menus, scrollbars, dialogs, buttons etc all same form that they are today. There were multiple toolkits with lot of different APIs implementing the same elements. We had Mac and Windows native toolkits and several toolkit variants for Linux/Unix. Qt toolkit, first version released 0.90 was released 1995, offered common cross platform QWidget API for GUI programming.

There was a major UI paradigm shift in 2007 when the first iPhone was released. The old desktop metaphor with mouse interaction was abandoned and a new one introduced. Scrollbars, overlapping windows and mouse-sized UI elements were gone and replaced with sliding windows, scrolling from content pane and widgets designed to be used with finger. iPhone was the first successful touch screen device that was sold with high volumes. Before that, there were numerous touch screen devices on the market, both pocket sized and laptop or pad form factor but none were successful.

All these old generation touch screen devices were still using old desktop UI paradigm and touch screen was just a mouse replacement. In most of the cases it needed to be used with a stylus to provide mouse-like pixel accurate pointer. The idea was good but users just did not like it.

N900 with Maemo5, announced 2009, was the first Nokia device with a new finger based UI paradigm. Maemo5 had finger optimized UI components, sliding stacked windows, kinetic scroll from content pane, all implemented top of desktop-oriented toolkits, GTK+/Hildon and Qt/QWidgets. The new Mobile UI needed a lot of modifications to these toolkits that did not become adopted upstreams implementations as those were still focusing solely on the desktop. Maemo5 implementation was also based on support from tailored window manager for window transitions and stacked windows, enhanced X11 keyboard protocol was used for the virtual keyboard. Also, none of these enhancements were adopted to upstream and Maemo5 toolkit extensions run only under the Maemo5 environment

Maemo6 that later become MeeGo, was started from a clean sheet. Enhancing legacy toolkits, GTK+/Hildon or QWidgets, were insufficient to implement leading edge mobile user experience. The UI toolkit should be based on QGraphicsView/QGraphicsItem rather than old QWidgets. The new approach allowed us to take control of UI elements, transitions and animations inside of the toolkit. Now we had a possibility for a lot more complex animations in element level, animated dynamic layouts etc. There were three parallel development paths inside of Nokia, C++ based Orbit for Symbian, MeeGoTouch for MeeGo and a totally new concept Qt Quick with QML. For the first MeeGo timeframe MeeGoTouch was the only available toolkit and it was used for all basic MeeGo applications.

Qt Quick was part of Qt4.7 released October 2010. The Qt Quick can be considered revolutionary step in UI implementation, even complex UIs were possible to implement with a few easy lines of Qml code. Qml is also easy to learn for UI designers used to work with web UI tools.

The basic Qt Quick contains only Qml that could be considered as a low level UI toolkit. It supports basic low level elements like rectangles, images, mouse areas etc but it did not contain UI components by itself. If you are using plain QML you need to implement UI components by yourself. That is not a problem in many applications that are using their custom UX and UI style but it is wasting time if you just would like to use system UX with system style and standard UI elements. The Qt Quick Components project was introduced to produce ready made Qml UI elements library for Qt Quick. Current status of components project is pre-alpha for MeeGo but it still offers basic UI elements and it evolves quickly. Qt Quick components are also on their way for Symbian and desktop UX.

Our choices

Now we have all pieces together for UI puzzle and we just need to put them together and make our choice. Many may still think that old toolkits like GTK+/Hildon and QWidgets look like attractive choices. Nokia has dropped support of GTK+/Hildon, but QWidgets you'll find everywhere, they run on all desktop platforms and they run on major Nokia platforms. Porting old desktop application with QWidgets looks to most like the  logical solution, you could use same codebase and cover Linux desktop, Mac, Windows, Maemo5, MeeGo and Symbian.

Even if the choice looks attractive, there are two major drawbacks. First of all, if you are porting from desktop, you need full refactoring of your UI. Desktop metaphor is just so different than mobile that it just don't work. This has been tried and it does not work for multiple reasons starting from screen size, resolution and UI element sizes that are different. You just don't have room for large toolbars, forms etc. and using of tiny UI elements with finger is impossible.

The second major issue is that mobile enhancements to these legacy toolkits were not adopted upstream and they are not cross platform. Even if you find QWidgets in every platform running Qt, only Maemo5 supports variant that allows implementing fairly good mobile user experience. In other platforms, you fall back more or less basic desktop implementation that's usability in mobile device is very poor. Also due to differences between the mobile platform implementations and their behavior, the same code may work in a very unexpected way.

Choice is clear, Qt Quick

The choice is clear, if you would like make your application success in Mobile, you should use new UI toolkits designed to meet the mobile requirements. At the moment there are three toolkits available, MeeGoTouch, Qt Quick with plain Qml and Qt Quick Components.

MeeGoTouch is mature but it is not cross platform and not recommended for new application implementation.

Qt Quick should be considered as the preferred future way, it is a part of standard Qt4.7 and exists in all platforms including desktop, Maemo5, MeeGo and Symbian. Qt Quick is clearly the way that I recommend to developers. Then there is still one question open, use just plain QML or be early adaptor of Qt Quick components ?

Qt Quick Components

The Qt Quick components project, http://qt.gitorious.org/qt-components, is currently as pre-alpha in a rapidly evolving phase. It is developed as MeeGo handset UX as pilot platform but Symbian and desktop UX are on their way. Even MeeGo components are still early stage, they already offer fairly good set of MeeGo UI elements and allow implementing most parts needed of MeeGo handset UX. There are still some UI elements that are not yet implemented and for the existing ones, APIs are not yet frozen so you should be prepared to do changes to your QML code when first released version is published.

MeeGo UX Qt Quick components are currently available ready to use debian packages for Desktop Ubuntu Lucid and Maveric, MeeGo/Harmattan ( .deb format) and for Maemo5/N900 as .deb format. You can start developing applications for MeeGo today, just by downloading these development libraries. Even if the there will be API changes before released version, changing some lines of your QML code is a much smaller task than completely redesigning and reimplementing your UI code once again.

How to start

Following examples are not intended to be comprehensive course or documentation of Qt Quick components but just a source of inspiration and also to demonstrate how low the threshold is, even with someone without any Qt Quick Qml experience, to start coding with the Qt Quick Components.

Easiest to start development is to install Qt4.7 and Qt Components to your Desktop Ubuntu from Forum Nokia PPA.

sudo add-apt-repository ppa:forumnokia/fn-ppa
sudo apt-get update
sudo apt-get install qt-components-dev libqtm-dev libmeegotouch-dev

You can find more instructions about installing and setting up Qt4.7 for your Qt Creator from Attila Csipa's blog http://qt-funk.blogspot.com/2010/10/fresh-from-oven-qt-extras-for-ubuntu.html

To make your first application with Qt Quick components, you could use following Qt main program:

#include <qapplication.h>
#include <QtComponents/qdeclarativewindow.h>
#include <qdir.h>

int main(int argc, char **argv)
{
  QApplication app(argc, argv);
  QDir::setCurrent(app.applicationDirPath());
  QDeclarativeWindow window(QUrl::fromLocalFile("main.qml"));
  window.window()->show();
  return app.exec();
}

Compared to a Qt/QWidget application, you just should declare QDeclarativeWindow and show it. In this first example we don't try to interface it by any other way than with our C++ code.

Next step is UI code with Qt Quick Components. Compared to plain Qt Quick Qml application, our main element is now Window, not Rectangle and under window we implement our application UI inside of Page objects. In the first example we created just an one page but later we add more of them. Inside of this page we just create one Button component that is already in our components library and we don't need to code it in plain QML. We put couple of Buttons inside of Column just making easier to add more of them later.

import Qt 4.7
import com.meego 1.0

Window
{
  id: window
  Component {
    id: mainpageComponent
    Page {
     id:mainPage
     Column {
       anchors.centerIn: parent
       spacing: 10
       Button {
         height: 50;width: 600
         text: "Show a cat"
         onClicked:(window.nextPage(catComponent))
       }
       Button {
         height: 50; width: 600
         text: "Show a dialog"
         onClicked:(window.nextPage(dialogComponent))
       }
    }
   }
  }
  Component.onCompleted: {
  window.nextPage(mainpageComponent)
  }
}

To compile this application, we need also .pro file

TEMPLATE = app
QT += declarative
LIBS +=-lQtComponents
# Input
SOURCES += main.cpp
OTHER_FILES += \
main.qml

Then just press “run” from your Qt Creator and this you should see, you get your application with MeeGo style and all MeeGo window decorations.

For real application we need more pages and settings dialog with scrolling list of option widgets. Current Qt Quick components does not yet have dialogs that you can populate yourself but in MeeGo many times sliding pages are already used to implement same function. For this application i implement two pages one with just Image content and other being as “settings dialog”.

Settings dialog, I out content inside of QML Flickable element that implements surface with kinetic finger scrolling and then Column object for children component geometry as I did in the main page. I populated this dialog just for example with Buttons, LineEdit,CheckBox and Switch.

Component {
   id: catComponent
   Page {
     id:catPage
     Image {
       anchors.centerIn: parent
       source: "aureo600.jpg"
     }
   }
}
Component {
   id: dialogComponent
   Page {
     id:dialog
     Flickable {
       id: dialogscrolarea
       anchors.top: parent.top
       anchors.bottom: parent.bottom
       width: parent.width
       anchors.leftMargin:50;anchors.rightMargin:50
       contentHeight: dialogcontent.height
       contentWidth: parent.width
       Column {
         id: dialogcontent
         anchors.left:parent.left;anchors.right:parent.right
         anchors.leftMargin:50;anchors.rightMargin:50
         spacing: 10
         Button {
           text: "Button 1"
           width: parent.width
         }
         LineEdit {
           id: line1
           width:parent.width
           anchors.left: parent.left; anchors.right: parent.Right
           promptText: "Enter text here"
         }
        Button {
           text: "ToggleButton"
           width:parent.width
           checkable:true
        }
        CheckBox {
           id: cbox
        }
        Switch {
           id: switch1
        }

Running this example, you should get the following result. Now you have two application pages with sliding page transitions and you have dialog content with kinetic scroll.

This all is with MeeGo style and MeeGo UX, behaves just as MeeGo applications should be. If you compare this with QWidgets. In Maemo5 you can implement same function with QWidgets but you don't have Switch, in MeeGo Qt you get basic widget style and kinetic scroll but you don't have any way to implement sliding stacked windows. Symbian Qt4.7 does not implement kinetic scroll, neither sliding windows nor multiple windows of any kind.

Maemo 5 and N900

The Forum Nokia has also released Maemo5 version of Qt Quick Components package. Thanks to Antonio Aloisio. You can just compile this example application with Maemo5 PR1.3 Qt4.7 and our qt-components library from extras-devel and you will get exactly the same looking application. MeeGo style differs a little bit from Maemo5 native but even with this small difference, these applications will have excellent usability on N900. It should not be too big task to hack code little bit and make variant of components library that has mostly same style than Maemo5. Only fundamental difference is that MeeGo applications implement sliding page transition by toolkit, Mamo5 with Window manager and for that reason, window tittle bar is here rendered by toolkit, not window manager and that explains the different look of the home and back button. 

Install qt-components for your maemo5 scratchbox. You need to have extras-devel repository /etc/apt/sources.list

deb http://repository.maemo.org/extras fremantle-1.3 free non-free
deb http://repository.maemo.org/extras-devel fremantle-1.3 free non-free

At the moment we have only ARM version, no X86 version because qt-components depends on libmeegotouch on theme engine and libmeegotouch is available only as an ARM binary for Maemo5.

[sbox-FREMANTLE-ARMEL:~]>fakeroot apt-get install qt-components-dev

To install qt-components to your N900, you need to have extras-devel repository enabled in application manager and then use the terminal or ssh:

sudo gainroot
apt-get install qt-components qt-components-examples

The current N900 version of qt-components-examples does not yet have desktop files so you need to run them from the command line. There is also a known bug that you need to run all components examples with -graphicssystem native -option. The current version is developers pre-alpha but I hope that we can soon deliver a version with desktop files and with these known bugs fixed.

~ $ /opt/qt-components/gallery/gallery -graphicssystem native

Using Qt Components from C++

You may have your application logic made already with C++ and you may be just considering about implementing a mobile UI. Or you are planning a new application and you would like it be easilly portable for desktop and different mobile environments like MeeGo and Symbian. You can implement all application logic as usual in C++ code and change your UI layout just loading a  different QML file. You may even implement the same application binary that can implement handset, tablet and desktop UX just loading a different QML file. The key element for this is to make your C++/Qt application interfacing with your QML code. Signals and slots are the easiest way, you may call slots of your C++ code directly from the QML code. If you would like to make C++ variables visible to Qml you can do it with Q_PROPERTY macro. The Following example tells more.

The class itself is just as it was in C++ application, it implements graphical UI element and for that reason it inherits QgraphicsWidget and implements paint and boundingRect functions. It has just one slot for receiving signal from our QML code. No single line of modifications is needed to the original C++ code. Only change that is needed is to expose float property called “value” to our QML code. We need to specify set and get functions value() and setValue(float) for this variable. The variable is read/write one for Qml code but if we would like to make our Qml code doing some actions when this value is changed, we could specify also NOTIFY signal for it. In our case, this value is only used to change value displayed in our element so, no notify is needed. That's all needed to modify your C++ classes to work with Qt Quick Components UI.

class GaugeLabel : public QGraphicsWidget
{
   Q_OBJECT
   Q_PROPERTY(float value READ value WRITE setValue)
 public slots:
    void testClicked();
 public:
    explicit Gauge(QGraphicsItem *parent = 0);
    void paint(QPainter *painter,const QStyleOptionGraphicsItem *option, QWidget *widget);
    QRectF boundingRect() const; void setValue(float val_); float value();
}

To use our C++ classes from our Qml code, we need add one line to our example main program, qmlRegisterType.

#include <qapplication.h>
#include <QtComponents/qdeclarativewindow.h>
#include <qdir.h>

int main(int argc, char **argv)
{
  QApplication app(argc, argv);
  qmlRegisterType<GaugeLabel>("Efis", 1, 0, "GaugeLabel");
  QDir::setCurrent(app.applicationDirPath());
  QDeclarativeWindow window(QUrl::fromLocalFile("main.qml"));
  window.window()->show();
  return app.exec();
}

And then we can use our class from QML as any QML component, we just need import it like here as import Efis 1.0 . Then in code we just use it as object as any QML native object and we can spefify it's size and coordinates. Line value:valueSlider.value*3 binds value returned Slider component named valueSlider. Our C++ class setValue(float) is automatically called every time than we move the slider and value displayed by our C++ component changes automatically when slider is moved. In Button component we specify onClicked that calls a slot from our C++ class.

import Qt 4.7
import Efis 1.0
import com.meego 1.0

Window {
   id: window
   Component {
     id: mainpageComponent
     Page {
     id:mainPage
     GaugeLabel {
      id: gb
      x:200;y:200;width:100;height:40
      value: valueSlider.value*3
      gaugeStyle:16
      name: "MiuMau"
    }
  Slider {
    id:valueSlider
    x:350;y:200
  }
  Button {
    id:testButton
    x:350;y:250;width:160;height:40
    text:"TestButton"
    onClicked: { gb.testClicked(); }
  }
 }
 }
  Component.onCompleted: { window.nextPage(mainpageComponent); }
}

Final result looks a like this:

Conclusion

Qt Quick with Qt Quick Components is the best choice for implementing new mobile application UI today. Qt Quick Components is at pre-alpha phase at the moment but it is already usable for starting application development. We have currently only MeeGo UX supported but it runs on the desktop, Maemo5 N900 and MeeGo. You can get the latest build done by Forum Nokia from our PPA and maemo extras-devel repository. When you start development with current pre-alpha, you can count on that there will be API changes. Symbian and desktop UX comes later. Interfacing Qt Quick Components UX to your Qt C++ code is very easy and when all UI is in the QML code, changing the UX is very easy.

Links:

http://qt.gitorious.org/qt-components

http://qt-funk.blogspot.com/2010/10/fresh-from-oven-qt-extras-for-ubuntu.html

https://launchpad.net/~forumnokia/+archive/fn-ppa