Back to Blog home

Qt Quick Components for Desktop?

Published on Thursday March 10, 2011 by Jens Bache-Wiig in Uncategorized | Comments

While waiting for things to calm down a bit around here, I have been happily hacking on a new research project. Since most of you have probably guessed what it is about by now, I will start by pointing you to this video :

If for some reason YouTube fails to load, you can have a look at this pretty screenshot instead:

Qt Quick has been the main focus of Nokia for some time now. I wanted to see if we could bring some of the fun and joy of working with Qt Quick to the good old desktop. It is true that you can easily make your own widgets with Qt Quick, but obviously not everyone wants to do that. Having personally invested quite a bit of time in developing among others the GTK+ and Vista styles in Qt, I also wanted to prove that we could make use of that effort even in the brave new world of Qt Quick.

The result is basically a new set of widgets written from scratch in QML. The API is mostly aligned with our ongoing mobile SDK effort, but I also had to create some uniquely desktop-related widgets such as ScrollBar, ScrollArea and TabFrame.  To give you a feel for what it looks like in practice, you can do things like this:

Button {
  id: button
  text: "Push me"
  onClicked: button.text = "Pressed"
}

 

As an alternative to the built in Flickable element, there is a ScrollArea component which implicitly adjusts to whatever content you insert in it:

ScrollArea{
  frame: false
  Image {
    source: "wave.jpg"
  }
}

Another nice feature is that you can create desktop icons on platforms that support them:

ToolButton{
  iconSource: "image://desktoptheme/go-previous"
}

There are of course some limitations to what you can do within Qt Quick at the moment. For instance, you cannot create new top level windows since everything is drawn client-side. (Though, I am still considering creating menu popups as true top level windows) In practice, what you get right now is a much more flexible drop-in replacement for your existing .ui files.

Getting started

Unfortunately, I haven't actually gotten around to write a proper application using this framework yet and I am hoping someone else out there would be brave enough to step up to that challenge. An important thing to consider is that this is a labs research project and not a released or supported in any shape or form. Expect bugs, crashes, incomplete API, famine, war and no documentation. That said, I am certainly open to any feedback and bug reports you may have. :)

Since all of this is developed as a plugin to Qt itself, all you need to get started is the Qt 4.7.2 SDK. Just check out the http://qt.gitorious.org/qt-components/desktop and do the equivalent of a "qmake && make install" on your system.

Edit:

Added screenshots to show what things look like on for KDE/Oxygen and Mac as well.

Also note that the catchy music was performed by one of our very own empoyees. :)

Modified title to call it Qt Quick Components.

Subscribe to Our Blog

Stay up to date with the latest marketing, sales and service tips and news.

We are updating our comment system and you could face some issues. Please write to us at feedback@qt.io to report issues/bugs.