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).

Advertisements

About latej
A software engineer working for Forum Nokia. This blog is about the (mostly QML related) stuff I'm working on which is not directly related to my work.

8 Responses to QtInfo goes Qt Quick components (on Symbian)

  1. Great stufff!!!!!

    Release the SIS file soon will ya!

    Cheers!

    @asrialbaker

    • latej says:

      Thanks!

      Because of the way the app is made (we try to keep it running also on Qt 4.6.3, or Qt 4.7.x without Qt Quick components etc.) packaging especially for Symbian is a bit tricky and requires some manual work. We’ll try to make a sis file available ASAP.

  2. But Qt Components for Symbian is still in Beta, isn’t it? So you cant distribute it with Smart Installer..

  3. Ravneng says:

    I’m not sure I get this, can I download this application or qt-something and get this stunning new ui look? So I don’t have to wait for Belle? Or am I totally wrong here?

    • latej says:

      To enable the new UI (which works on all Symbian^3 devices) you need to have the following installed, (installation packages can all be found in \Symbian\sis\Symbian^3 folder of the Qt SDK installation):

      • Qt 4.7.3 and QtWebkit
      • Qt Mobility 1.1.3
      • Qt Quick components 1.0

      Naturally you also need to install qtinfo_3.0_selfsigned.sis to get the QtInfo application. After all of the above has been installed the Qt Quick components UI should appear after launching QtInfo.

      As you can see from the above explanation this is more of a developer thing at the moment, but I would expect applications targeting end users to start taking advantage of Qt Quick components in the not so distant future.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: