QtInfo goes Qt Quick components (on Symbian)

Some time ago I blogged about the QtInfo project which aims to provide a simple tool for figuring out all sorts of information about the Qt installation on your device. The UI of the application didn’t really work that well on Symbian, so we decided to do something about it.

Qt Quick components provide a very convenient way to create a modern looking UI for a QML application. The components are of course mostly useful for “productivity” applications – like QtInfo – that don’t need too flashy graphics. After a little (very little, in fact) investigation into how PageStack, ToolBar, ToolButton, ListItem etc. work I ended up with the UI that you can see below. If you’re interested in how the UI has been implemented, you can find the QML sources here.

To make the change more obvious I attached a screenshot of the QWidget-based UI as a comparison. I would say that it’s quite a nice result considering that I only spent a couple of hours with it.

  

From old and tired to new and fresh (screenshots are from QtInfo running on Nokia N8)

In addition to making the UI more pleasing to the eye the Qt Quick components also provide some usability improvements like flick scrolling on the information list and buttons that are easier to hit with a finger.

The QML UI is implemented in such a way that if QtDeclarative module or Qt Quick components are not available the application will fall back to QWidget-based UI. The check is implemented by first testing if QtDeclarative module is present. If it is, the application tries to load a bit of QML that imports the com.nokia.symbian 1.0 module. The QML based UI is enabled if loading succeeds, otherwise the old UI will be used.

The old UI also struggled with orientation changes, with Qt Quick components (and QML in general) handling landscape orientation became really easy. Since the UI is not too complex and there’s no layout changes when moving from portrait to landscape, I did not need to do any changes to the QML code for landscape orientation to work nicely.

QtInfo in landscape orientation on Nokia N8

Here’s one more screenshot. In QtInfo I’m using a SelectionDialog for selecting where to share or copy data.

SelectionDialog for selecting where to share data

In my Coloring Book blog post I was raving about how easy it is to create nice looking UIs with Qt Quick. With the Qt Quick components the ease of development just became even better. The things that have impressed me the most so far are PageStack concept for doing automatic view transitions and the ToolBar for command handling. Also it’s nice to finally have a Button, I’m a bit tired of creating Button.qml’s.

Another problem when creating the high-level UI components yourself has been that making the application fit the platform and the other applications has not been too easy, especially if you don’t have a skilled graphics designer at hand. Qt Quick components helps a lot in this, for example for QtInfo I did not need to create any graphics myself, which saved a huge amount of time.

QtInfo does not have Smart Installer packaged with it. Because of this Qt Quick Components will not get automatically installed, so you must manually install the Qt Quick Components for Symbian package to enable the new UI. Unless, of course, you already have Qt Quick components installed on your phone. Note that the sis file that we have on the project page does not yet contain the new stuff, updated sis file will be available soon.Installer sis is now available under featured downloads on the project page (qtinfo_3.0_selfsigned.sis).