Qt Quick Components for Desktop?

Published Thursday March 10th, 2011
61 Comments on Qt Quick Components for Desktop?
Posted in Uncategorized

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.

Do you like this? Share it
Share on LinkedInGoogle+Share on FacebookTweet about this on Twitter

Posted in Uncategorized

61 comments

Kit says:

Looks quite nice, this is exactly what I’ve been waiting for from QML! I’m still primarily using Qt on the desktop, so this is pretty much exactly what I’ve been waiting on.

MySchizoBuddy says:

How does it look like on a mac?

aportale says:

Awesome project, Jens! I just tested examples/Gallery.qml, and it looks & feels very native on my Vista system. We can be glad that you have been researching on this topic… who else than our style guru with the eye for details should have done it? 🙂

Congrats, Jens! This is absolutely *fabulous* work, and I think, will be very good at helping speed uptake of QML if adopted and taken further. 🙂

One more step to conquering the universe! 😉

TheBlackCat says:

Does this mean widget layers will have to be repogrammed from scratch in Qt quick or will it be compatible with existing widget style?

Peter Meier says:

I wonder why Qt Labs blog posts so often use screenshots that are GTK+/Gnome-styled instead of showing some love for the desktop that’s actually written using Qt … maybe it’s an attempt to show that it integrates well elsewhere too, which I can understand, but doing it almost exclusively then feels like overcompensating. QtDF should be more proud of KDE – what better way to demonstrate the power of a toolkit than having an entire DE and app platform written in it? KDE shows that Qt isn’t just some sort of meta-technology that sits on the shoulders of other platforms, but that it can also *be* the backbone of a platform.

I guess this reluctance to really stick up for Qt platforms and failure to ally with people outside Nokia who love Qt is part of why the MeeGo and Qt Everywhere dream failed / had to be cut back so much … it’s a shame, thinking of how it could have been very different.

Jens Bache-Wiig says:

TheBlackCat: I’m not sure what you mean by widget layers. You don’t have to code from scratch. You can insert QML items into your app gradually. For instance to create an animated toolbar, you create a QDeclarativeView to contain the QML code and set the source to your “toolbar.qml” file. To communicate with other widgets, you use signals, slots and properties.
Peter Meier: As I also mentioned in my post, I wrote and still maintain the GTK+ integration in Qt. It simply makes sense that this is my everyday desktop. It has _nothing_ to with politics. I also have both windows and mac running on the same desktop to ensure cross platform support. I can assure you that I have tested with Oxygen and KDE styles as well.

Peter Meier says:

Right, sorry, I missed that part – I had a bit of a knee-jerk reaction to seeing yet another non-KDE Linux shot on a Labs blog, I guess. If your day job is working on the GTK+ integration (which is a useful feature to have), it makes sense that you’re “eating your own dogfood” as they say, of course.

That said – if you’re also testing on KDE anyway, hit that screenshot button next time for the full range! 🙂

aportale says:

@Peter Meier: No doubt that KDE was and is vital for Qt. Even the few Trolls using Gnome agree with that. For the reasons mentioned by Jens, he is allowed and even encouraged to exclusively post Gnome screenshots. And in order to compensate that, I always use KDE when making screencasts on Linux (last example: android-qt, a week ago) 🙂
Regarding the recent strategy changes by Nokia, I cannot immagine that the behavior of drowning-in-work QtDF would have had any measurable effect. In my fantasy world, QtDF should have started Qt Quick 2 Years earlier, and Nokia should have acquired Trolltech 1 Year earlier. That may certainly have turned the whole thing around.

NoobSaibot says:

i fully agree with Peter Meier here. it might be your daily work, however, in a public presentation you could have switched to Qt’s or KDE’s own widget style. it comes indeed across as we are ashamed of our own design/style.

other than that, awesome work with Qt and QML! i’m looking forward to what the devs/community will come up with in the future.

Jérémie Delaitre says:

This is just awesome ! Any chance to have this in 4.8 ?
I develop desktop apps and would be glad to use QML for them !

Peter Meier says:

Anyway, sorry, I didn’t want to hijack the thread – to be more on topic, seeing work on desktop applications for the QML technology is very exciting. I’m looking forward to what that might enable in terms of desktop UIs that are more fluid and less box-y as a natural consequence of the approach to writing them being different, while at the same time having a cohesive visual look from app to app.

Jens Bache-Wiig says:

Peter Meier/NoobSaibot: I updated the post to show complete screenshots on both Mac and KDE as well. So please close this discussion and stay on topic. This type of response doesn’t exactly encourage me to continue working on this…
Jérémie Delaitre: It already works with 4.7 and 4.8 as a plugin. I cannot promise that this becomes an official part of Qt yet. We are planning on splitting up Qt into modules soon so in a way it fits well in it’s own Qt-based library.

Tor Arne says:

Great stuff Jens! 😀

Kenneth Christiansen says:

This looks like Winning to me! Darn nice stuff!

André says:

Very cool work, shows real promise! This is the kind of thing needed to get QML really ready for use on all platforms. I hope the “normal” QML components are making good progress too and that the interfaces are somewhat compatible. Great work, thanks for the nice demo. The only thing that I did not really get in the demo, was the part on System Integration. What was I looking at? That dialog where you select a different style, where does it come from? Is that part of the demo app, or is it part of the system?

Paulo Cesar says:

Ha! This will revolutionize the way we build desktop interfaces! Awesome work!

Uwe Kindler says:

Wow, this is really awesome. I’m mainly develope desktop applications and this is exactly the thing that would make me start using QML in my applications. Great :O)

Jens Bache-Wiig says:

Andre The system integration simply shows that the components react to changing system settings on the desktop as opposed to hard-coding a static set of pixmaps for each platform which would be the simplest way to create a set of QML components. In this case, I changed the desktop theme on my GNOME desktop using the standard system settings dialog. The same would apply to KDE or windows if you change your theme from Vista to Classic for instance.

Girish Ramakrishnan says:

Good stuff, Jens!

Nils says:

Great! I hope there will be a nice solution for the top level window problem (Comboboxes come into my mind). Does anybody remember when StarOffice (4?) used to draw everything inside its own window only?

@Jens: Will this work efficiently with the future Scene Graph backend?

qtnext says:

what’s about having non native like qml : for example symbian or meego qt components that can be use on Windows (For example if i wants to do a tablet windows application with big button in the same spirit of symbian components ?)

Jens Bache-Wiig says:

Nils: I think Java Swing is a more common example of this. I already ensure that tool tips are created as native top level windows. Making top levels break all transforms and effects you apply on your QML scene, so it is not entirely without drawbacks.

We actually tried it on scene graph last week and it works rather well. Performance is currently somewhat slower, at least if we support widget animations. However we plan on addressing this by using a more direct rendering approach well before it is released.

Trenton says:

Attaboy, Jens! Bonus points for the well-produced video! 🙂

Jens Bache-Wiig says:

qtnext: Actually, that is the topic of an entirely different blog post. What you are suggesting is essentially what we have in the “custom” branch on the main qt-components repository. It is basically a platform independent set of components that you can style using QML elements themselves. I am still not sure how we want to make these available. But it is all on the public gitorious for you to play with.

Thiago Macieira says:

Great work Jens! Thanks for posting this.

Pierre says:

Awesome stuff !
And I’m pretty sure everybody wants to encourage you to keep working on this, at least I do. 🙂

Will Stokes says:

This looks quite interesting. I’ve been eagerly awaiting this blog posting for a while ever since it was hinted at earlier. Small point: the baseline for text on the Mac screenshot looks a bit to low pretty much everywhere. Also, you appear to have a toolbar working, but I don’t see a pill button at the top right for toggling the toolbar. All the same this looks like it’s getting quite close to being usable. It will become even more exciting once a demo app is included with a version of Qt. Even without documentation a demo app will help developers start using this fairly quickly one would hope. 🙂

Alex says:

Jens: awesome stuff. I’m personally not annoyed at all of seeing GNOME being used, quite the contrary. I’m happy to see gorgeous Qt applications on GNOME, like your screencast, and on KDE, like in Alessandro’s about Necessitas. I hope you keep having fun with this, because is really good work. Is nice that you guys are blogging more with exciting stuff. 🙂

What I don’t fully get yet, is the “fragmentation” feeling that I get with all this. The Qt Components repo has more than one branch (one being the “custom”, which seems the more aligned with this). This seems to be a new repo. I know that this is just a research project, and Components is even pre-alpha, but I fail to see the whole picture.

I know that Qt Quick is really fast to create new UIs, but I have the hope that one could have some sort of shared components between desktop, tablet, phone, etc. Something that probably has the native style always. For example, a news reader app might not display the list of feeds in a phone, but the list with the news items could be shared between all devices, isn’t it?

Thanks.

Gordon Freeman says:

This looks terrific, it’s exactly what I wanted to see! Standard QML components on the desktop, I’m sure this will make a lot of desktop devs very happy (myself included) so please don’t stop this great work!

However I’d also second Alex’s query: what is the relationship between these two projects?

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

Is the former targeted solely at mobile? Does desktop (this new stuff) make use of qt-components? Some clarification would be helpful, thanks!

Jens Bache-Wiig says:

Will: I will look into the text baseline issue. The toolbars are currently drawn client side so you can apply transforms and animations to them. I am planning on making a desktop runtime that would allow you to control menus and such through QML. Morten is also working on some very interesting mac specific qml stuff, so keep an eye out for future blog posts on that topic.
Alex: This is indeed a very good question. We are standardizing all the component projects through the common API here http://bugreports.qt.nokia.com/browse/QTCOMPONENTS-200. The desktop widgets are also based on this standard and use the same properties and signals where possible so all the qml widgets share some consistency. The problem is that a touch based app needs to be written as a touch based app from the start. Apple also have a clear separation between touch and desktop API’s. Right now running an app written for Symbian or Meego would look exactly like a Symbian or Meego app on your desktop. There is unfortunately no way we can magically make those apps look like native desktop apps without modifying the source code. Swapping out a few buttons too look native would simply not make much of a difference in this respect. I think it is better to simply display these apps as they were designed. In your case of a news reader, it is unlikely that you would use any widgets at all though. You could and probably would write such an app exclusively using core QML elements. I think the way forward is for people to write a new QML UI, ideally for each platform instead of trying to bridge everything into one. That said, we are considering a special import on components that would simply give you the appropriate set of widgets for your platform. But this would be rather limited in what you can do without knowing anything about the platform you are designing for.

Jason says:

Great stuff! This exactly the kind of thing I’d love to see QML morph into.

max says:

Qt have some thing like windows’s WCF?

aalpert says:

Great work Jens!

Perhaps it should be part of Qt Components, instead of an on-the-side research project? It looks really useful in general (at least while people still develop on desktop 😉 ), like the custom style. From the positive feedback, it sounds like it deserves to be promoted from just a labs project.

Rovshan says:

Thank you for great work!
I have recently started developing a desktop application using QWidget derived classes. It is going to take about 2 years to finish and release it. After this I must maintain and develop it further. It is great to know that I will be able to use both QWidget and QML widgets together in the same application as QML gets more mature. However I’m a little worried that after QML gets lots of components, some day maintenance of QWidget based classes might be discontinued, for example new theme will not be released for new version of some OS and my application will not look OK on that new platform. Is it possible? (Sorry for my English)

Aaron Seigo says:

This is really, really great stuff! It could provide a very nice bridge point between “classic” desktop and QML approaches.

I already know one place that this would be utterly perfect for Plasma, for instance: Plasmoid configuration layouts, where on the desktop they should look “desktopy” but it would be best if the QML Plasmoids could still use them directly without having to dip into QWidget-land.

Really looking forward to this getting some more use! I’m grabbing the repo as I type this, in fact 🙂

Cheers …

Jens Bache-Wiig says:

Aaron Seigo: That sounds very cool. I thought there was already a separate project to provide KDE widgets on plasma. I’m also looking forward to patching Oxygen style up a bit. It is using the widget pointer a bit extensively, which means it crashes unless I provide one for compatibility right now. It should really be optional. I also don’t know if we can support the window background implicitly, or if we need to create a window element for that. But I will definitely look into this. Do let me know if you find any KDE specific issues.

las says:

please, more traditional qt articles. recent articles have been just about using javascript in qt and about javascript engines and it seems it’s not even finalized which js engine will have a long stay, so showing the c++ code to accomplish the same would be great! especially when it would be simpler. it would also show the benefits(and limitations) of going through the qml route. because this qt blog has been a qml blog for half a year and that puts too much limelight just on qml. qml is wasteful and so is webruntime, there’s no way around that.

The E says:

@las: QML is the new shiny thing. So it is natural to have more QML articles. Nothing bad about that.

Nikita Nemkin says:

QtGui being supplanted by QtQuick and QtScript is a sad thing.

rix says:

Impressive !
Also, thanks for answering Alex’s question, which was really interesting. Just to continue about it, you’re saying that for a news reader, widgets won’t be of any use. I disagree: for any normal user, having native widgets in common things like option page (which most apps have anyway) would always be nicer than QtQuick homemade “alien” widgets. 😉

Looks pretty neat! Bravo, man!

ddenis says:

Jens, dude you are awesome!

Awesome stuff, hope designers start using this to create new UI’s, just a side note to “traditional developers” QML is great and gives you incredible freedom, having said that its also incredibly easy to make very ugly undesigned and incoherent UI’s. You should consult with a Designer to do the UI, better convince the designer to do the QML himself.

muzhig says:

Hmm.. I faced problems to run examples..
I cloned git://gitorious.org/qt-components/desktop.git into c:desktop
Then I open qmlproject file in qtcreator, open Gallery.qml, run it and get an error:

C:Qt4.7.2binqmlviewer.exe -I C:/Qt/4.7.2/imports C:/desktop/examples/Gallery.qml
file:///C:/desktop/examples/Gallery.qml:3:1: module “C:.desktop.components.plugin” plugin “styleplugin” not found
import “../components/plugin”
^
Can anybody help me?
Maybe I must do something after cloning repo?
“do the equivalent of a “qmake && make install” on your system.” what does this mean on windows?

Richard says:

Great job. Good man.

Jens Bache-Wiig says:

rix: Do not worry. The whole point of this blog was to make it possible to use native looking widgets in such places. My point was just that you cannot simply use these widgets and expect any app using them to magically look native. You also need to modify your layouts for the desktop. If you are not prepared to modify _any_ code at all, you are better off using the same widget set on all platforms. Which is perfectly possible.

Jens says:

muzig: After you clone, you run qmake. And after that make. If any errors occur, please post them. This step is required in order to run the example.

IvanDM says:

Hello Trolls,

this is an amazing project.
It has been few months since my day-by-day Qt coding, so I’m hitting a problem while trying to build and run this.
Here is my console output:

$ git clone git://gitorious.org/qt-components/desktop.git
Cloning into desktop…
remote: Counting objects: 3555, done.
remote: Compressing objects: 100% (1064/1064), done.
remote: Total 3555 (delta 2481), reused 3378 (delta 2347)
Receiving objects: 100% (3555/3555), 752.09 KiB | 657 KiB/s, done.
Resolving deltas: 100% (2481/2481), done.

$ cd desktop/

$ qmake
WARNING: Ignored (not found) ‘/Users/detro/Sources/desktop/components/styleitem/styleplugin.xcodeproj’

$ make
make: *** No targets specified and no makefile found. Stop.

$ make install
make: *** No rule to make target `install’. Stop.

Anyone can provide some light here?
Maybe some “lighthouse”? 😛

IvanDM says:

Well, it worked!

Somehow (I need to see why from the console panel…), I can build from Qt Creator.
I had to copy the generated lib file in the “plugin” directory (out of the shadow build) and that made it possible for QMLViewer to load the Browser.qml and Galler.qml examples.

Looks really promising.
And bloody snappy for a work in progress 😉

Jens says:

IvanDM: Good to hear! Yes I would suggest that you simply uncheck the shadow build option in creator to avoid this.

lokiyu says:

How about “TableViewImplementation”?

Jens Bache-Wiig says:

lokiyu: I will look into that but surely you don’t expect me to finish everything at once. 😉

arto says:

Great project! I’m just beginning my foray into Qt and wanted to use the latest and best technologies, and I guessed that means QML. Since I’m interested in having native looking UI, this project came at a great time.

But does this project support Qt libraries that are compiled as static libraries? I have problems running the examples with qmlviewer, for example:

(in the examples directory)

qmlviewer Gallery.qml

file:///{cut}/desktop/examples/Gallery.qml:3:1: plugin cannot be loaded for module “.home.arto.coding.lib.desktop.components.plugin”: Unknown error
import “../components/plugin”

qmake && make finished without errors.

Megaman says:

I could clone, qmake and make this on Windows. A folder ‘componentsplugin’ is created with the files libstyleplugin.a and styleplugin.dll inside it.
How do I install them? make install didn’t seem to work.

When I open the examples in the qmlviewer it just shows a blank screen.

Jens says:

arto: At the moment that is not supported. Actually I don’t really support anything since it is still research. I have not done anything explicitly to prevent static builds from working though.
Megaman: There is no make install required. Perhaps you hare mixing up debug and release builds or different qt versions as that is quite common. Qmlscene is generally built with release so perhaps doing a make clean and nmake release explicitly is required. To get debug output from the console, you can install something like debugviewer on windows.

Megaman says:

Thanks Jens,
This helped. I can now watch your examples in the qmlviewer.

I can also use the components in my projects if I make a release-build of my project. However in the debug-build I get the following error:

Starte D:DropboxProjekteProjektdebugProjekt.exe…
file:///D:/Dropbox/Projekte/Projekt/qml/Projekt/main.qml:2:1: plugin cannot be loaded for module “D:.Dropbox.Projekte.Projekt.desktop-components.components”: The plugin ‘D:/Dropbox/Projekte/Projekt/desktop-components/components/plugin/styleplugin.dll’ uses incompatible Qt library. Expected build key “Windows mingw debug full-config”, got “Windows mingw release full-config”
import “../../desktop-components/components”
^

Jens says:

Megaman: That is completely normal on Windows. If you want to use the debug build, you need to rebuild qmlscene in debug first.

arto says:

Thanks Jens… It’s nice to see this being actively developed. I’ll be keeping watch on this project and appreciate the excellent effort you’re doing. I’m sure I’ll be doing some stuff with it sooner or later, be it static or dynamic linking.

Megaman says:

OK, got everything working fine, besides the editor complaining about “qt type dump of c++ plugin failed” on import “../../desktop-components/components”
You can find a screenshot here:
http://img13.imageshack.us/img13/9431/qterror.png

Commenting closed.

Get started today with Qt Download now