QML – The Declarative UI on N900

It seems that the trend with the modern mobile UI platforms will be based on some kind of web techniques (html, css, javascript) in the future. Even now there are good examples of such an environments like Palm WebOs. Web OS kind of environment for running UI will usually requires some processing power from the device in order to work smoothly with good UX. The benefit of running Web OS might be that you basically don’t need to recompile anything (on UI side) in order to make things work for example in a different device with different display size (in ideal world). Another benefit is that you’ll get the styling quite easy – you can use CSS for theming etc.

Nowadays, many mobile devices have quite much processing power (e.g. N900), so I guess we are not so far from the days when we will have more devices based on web os like techniques. Of course Qt comes to picture here, once again:) As many of you might know, Qt will provide a new module called Declarative UI (not sure if this is the official name) which is already available in qt-kinetic repository at Gitorious. You can checkout a branch: kinetic-declarativeui if you want to test it on action. I guess they will release that module with Qt 4.7, but let’s see that then.

Running QML Application on N900

I decided to give a try and test how well these QML applications run on N900. I built the Qt with declarative module for N900 and ran the QML demos available from Qt’s source tree. They seem to run pretty well. Check the video below:

In this video I run the QML applications using qmlviewer, which should be used only when testing QML applications during the development. I’m not gonna go too deep into QML in this article. I will write an article of QML later when I have more experience of it. In the next chapters I will cover just some basic stuff and instructions how to build Qt with QML support for N900.

What is QML?

I’m not really sure what QML stands for. I guess it’s something like Qt Meta Language or Qt Markup Language, but I in this article will use QML. So according Qt Assistant’s documentation: QML is a declarative language designed to describe the user interface of a program: both what it looks like and how it behaves. In QML, a user interface is specified as a tree of objects with properties.

If you’re interested in  QML, just build a Qt witch declarative module and read the documentation. You can then do a QML based application and run it. That’s easy.

  • Define a file with .qml extension for example helloworld.qml
  • Run the application with qmlviewer e.g. qmlviewer helloworld.qml. Check this link how to load qml files from your application C++ code.

Check the example below for simple helloworld app:

import Qt 4.6

 Rectangle {
     id: page
     width: 500; height: 200
     color: "lightgray"

     Text {
         id: helloText
         text: "Hello world!"
         font.pointSize: 24; font.bold: true
         y: 30; anchors.horizontalCenter: page.horizontalCenter
     }
 }

With QML you can also define signals and make QML objects to react on those. In similar manner than in Qt in general.

Compiling Qt with Declarative Module for N900:

UPDATE: You don’t need to build the declarative module anymore for N900. It’s available as a debian package for Maemo 5. Check the following link for further instructions: http://labs.trolltech.com/blogs/2009/12/17/qt-declarative-for-maemo-5/.

This chapter is based on the article at maemo.org. First you need running scratchbox with Fremantle target. Then clone the kinetic-declarativeui branch from Gitorious and run the following commands in scratchbox. Please feel free to change, add or remove any of the flags from the ./configure line. I’m not so familiar with PKG_CONFIG things, but in armel side you need to defined the SUBLIBS to make all the libraries to be found.

export PKG_CONFIG_PATH=/usr/lib/pkgconfig; export PKG_CONFIG_SYSROOT=/export

export SUBLIBS='-lX11 -lXau -lEGL -lGLESv2 -lXdmcp -lIMGegl -lsrv_um -lfontconfig -lfreetype -lXext -lgthread-2.0 -lglib-2.0 -lpng12 -lz -lgobject-2.0 -lICE -lSM -lXrender -lexpat'

./configure -declarative -platform linux-g++ -release -opengl es2 -webkit -force-pkg-config -prefix /opt/qt-kinetic -no-qt3support -nomake demos -nomake examples -no-accessibility -opensource

Summa Summarum

If you want to be part of the UI development in future, I guess it’s worth to get familiar  with QML. I truly believe that this kind of approach of developing UI’s for example for mobile devices will be “the way to do it”. It will probably shorten the development cycle time in UI side and with a good ground work it’s quite easy to provide new UI’s for with common and smooth user experience.

There is still some work left to do in Qt declarative performance issues, but there are also ways to improve it when running QML app on N900. See this link:

http://wiki.maemo.org/QML#Test_Run_on_Device

One interesting thing is what Tomas Junnonen said in this thread in maemo.org’s discussion board. He said:
“We’re digging the declarative UI in Maemo. In fact, we like it so much we think the visual QML designer that integrates into Qt Creator should be the way to rapidly create your Maemo application UI as well.”

So like I said earlier the Declarative UI might be there  sooner than we think. QML will probably be supported by maemo 6 and you should be able to create QML apps there.

Now I’m planning to study QML more and when I know more about it, I’ll write more useful article in this blog. Thanks for reading.

Tags: , , , ,

5 Responses to “QML – The Declarative UI on N900”

  1. VDVsx says:

    Hey,

    try to turn off the hildon-desktop and you will have a much better performance.

    More info here: http://wiki.maemo.org/QML#Test_Run_on_Device

  2. zchydem says:

    I’ll need to try that. Thanks.

  3. [...] Maemos e N900s: como vender o N900 para não-nerds, amar/detestar o N900, observações interessantes sobre a curva de aprendizado do N900 e do Maemo 5, rodando aplicações QML (uma linguagem declarativa do próprio Qt) no N900. [...]

  4. Social comments and analytics for this post…

    This post was mentioned on Twitter by zchydem: QML – The Declarative UI on N900 http://zchydem.enume.net/?p=374

  5. Tk29Lily says:

    Let’s think about, what people will do if have the papers writing assignments. Generally, they buy the classification essay writing at assignment writing services to work out the writing complications.

Leave a Reply

You must be logged in to post a comment.