Someone sent me an e-mail asking what happened to the freedesktop icons I blogged about back in february so I realized I should probably write a followup. I’m happy to say that it has been merged into Qt 4.6 for some time already. If you look up the documentation for QIcon, you will find a new function QIcon::fromTheme(…) which essentially does what QtIconLoader::icon(…) did. Meaning Qt applications can now make use of the icon themes that KDE and GNOME ship with and use by default.

Since freedesktop icon themes only come as standard on X11 based desktops, you cannot use themed icons on other platforms such as Windows and Mac directly. This will simply return the fallback icon you provide. Allowing this would have forced us to decide on a standard icon theme as well as bloat the application by an extra few megabytes that many applications do not need. Instead we decided to leave this choice entirely up to the developer by making it possible to bundle themes such as Oxygen or Tango as part of the application resources and pointing to it using QIcon::setThemeName(…) instead.

This should make those pure Qt applications look a lot more integrated into the X11 desktop! Among other things, our trusty old Assistant client was modified to use the theme icons:

Screenshot showing of Assistant running on GNOME in 4.6.

Here is the same application running on KDE 4.

We added transparency support in Qt 4.5 through the Qt::WA_TranslucentBackground attribute. Unfortunately, as documented, it will only work on Windows if you explicitly remove window decorations.

With Windows Vista, Microsoft introduced the DWM (Desktop Window Manager) api, where you can enable a blur effect behind your application window. Unfortunately Qt does not have API to cover this yet, but by using the aforementioned translucent attribute in combination with a few native API calls you can already get this effect with Qt 4.5.

To make it simple, I created a convenience API to handle it so you can
plug it into your existing code. Note that the code should compile fine on other
platforms as well:

bool QtWin::isCompositionEnabled()
bool QtWin::enableBlurBehindWindow(QWidget *widget, bool enable)
bool QtWin::extendFrameIntoClientArea(QWidget *widget, int left, int top, int right, int bottom)
QColor QtWin::colorizationColor()

You can make a widget blurry by calling enableBlurBehindWindow or extendFrameIntoClientArea with the preferred margins. In both cases you are simply modifying the background of the widget. The colorizationColor is the color Windows tints the window with.

To show of the effect I made (yet another!) 200-line Qt browser. It has a custom style sheet with semi-transparent widgets. You will also see how you can make segmented arrow buttons using nothing but a pair of style sheets.

You can get the code and executables here.

Happy coding!

Both GNOME and KDE has a nice little control panel that allows you to configure how you want your toolbars to appear. Pure Qt applications show only the icons by default. Unfortunately, I don’t think it is a good idea to suddenly change this behavior, but we can do the next best thing and allow you to opt-in. Starting with 4.6, you can use setToolButtonStyle(Qt::ToolButtonFollowStyle) on your mainwindow, tool bar or tool button to make your application dynamically follow desktop settings.

Here is a Qt app on GNOME with “Text below Items”:

And this is how it looks with with “Text beside Items”:

There are a few things you should do before you enable this setting though. First you should allways set QAction::IconText, otherwise your annoyingly long tool tip text will suddenly appear next to your icon. However, as you can barely see in the second screenshot, doing that is not enough to properly support Qt::TextBesideIcon since putting all that text into the toolbar generally takes up a bit too much space.

To solve this problem we added QAction::setPriority(QAction::Priority). In other words, you can now mark actions as more or less important. Quite handy for dynamic layouts determining which items to collapse first. In this case,  actions with low priority will hide their label automatically when changing to this desktop setting.

I did some work this week on a task related to higher DPI values on Vista. The task was essentially about scaling artifacts related to checkboxes, radio buttons and menus. However after fixing up those I decided that we needed a little more to really work properly on Vista and Windows 7 and realized that there were still quite a few hard-coded pixel metrics in the current styling API that really should depend on DPI as well. So after adjusting those metrics, most Qt apps should now look a lot nicer at higher DPI values. The fixes will also directly benefit similar functionality on Mac, once this gets properly supported by Apple.

Here are some screenshots showing noticable improvements in 4.6 vs 4.5 at a moderate scale size of 1.25:

With the improved DPI-scaled metrics this is what it should look like in 4.6:

No radical change in this case, but it certainly looks more polished than the old one. At very high DPI scaling values (1.5 and up) Windows Vista defaults to showing applications in a compatibility friendly, but rather fuzzy scaled mode. In 4.6 we plan to make applications scale properly by default. Unfortunately existing applications are likely to have pixel-based assumptions, so the only real way to ensure that your app will look correct is to try it out.

And again, this is how things should look with 4.6:

There are a few widgets in Qt that have been treated a bit like a stepchild to other widgets. One of these widgets is the QDial. To a certain extent this has been intentional. A normal flat slider is almost always a better choice usability wise and most platforms do not have a native equivalent so it has been left looking a bit out of place everywhere. In fact the only face lift it has received since Qt 3 days is a bit of anti-aliasing. In case you haven’t seen it, here it is in all it’s glory:

However lately there has been an increased interest in touch screen devices where QDial seems to make a bit more sense usability wise. Combined with the fact that it has always been an eye-sore in our styles example I decided to finally do something about it for 4.6. So here is the new and improved QDial:

As you see it’s a bit more shiny. It replaces the ugly focus rect with a subtle glow and it’s designed to look more like something more out of this century. Old styles like motif and windows classic will still get the old looks because that’s what they are… old, but on all our modern styles we will use the new one. I hope you like the change.

Edit: Added a new screenshot in a few different styles also showing the increased contrast.

Qt already provides a set of standard icons. The nice thing about these icons is that they adapt to the current desktop environment. However the current selection of available icons is rather limited, at least compared to what KDE apps have at their disposal through the freedesktop icon specification. Since most of these icons only are available on the X11 platform, we still haven’t decided how to make them available to pure Qt applications such as Designer and Creator. While we are thinking about that, I thought I might as well wrap up the essential code and provide it as a simple convenience class, QtIconLoader, that you can use in your own project. You can find the source code here.

The class currently only provides one static function:

QIcon QtIconLoader::icon(const QString &iconName, const QIcon &fallback = QIcon()).

Usage should be fairly obvious:
new QAction(QtIconLoader::icon(”document-new”), tr(”&New”), this);

The fallback is of course for platform compatibility so you can provide your own masterpiece as a fallback for other platforms, which is probably the icon you are already using.

And since no blog post is complete without some eye candy, I modified our well know textedit example to QtIconLoader:

Here is how it looks running on KDE 4.2:

And since we also pick up GNOME settings, this is how it looks when running GNOME:

I’m sure there are bugs. For some reason freedesktop standardized on everything except a convenient way to detect which theme to use, so we need to do some trickery to get to the KDE and GNOME settings. Feel free to report issues and suggestions here.

One of the few remaining complaints against Qt applications using QGtkStyle on GNOME have been about the file dialog. So far it certainly looked like a GTK+ dialog, but it was not exactly the same dialog that other applications had been using. While I’m not really in a position to comment on which dialog is the better one, this is what it currently looks like with QGtkStyle:

However, the policy on other platforms such as Windows and Mac OS X has been to use the native dialogs if possible. I recently applied some patches to support this for GTK+ as well. This is what you will see if you open forms in Designer now:

Note that since the KDE file dialog provides somewhat different functionality from the Qt one, KDE applications will still use the KDE file dialog. Feel free to try it out directly from the svn on my labs page and report whatever issues you might find here.

QGtkStyle made it’s way into the Qt snapshots this week, meaning it will become part of the Qt 4.5 release. Technical users can already compile and use it on their own desktop, but once Qt 4.5 is out it will simply replace Cleanlooks as the default application style Qt uses on GNOME desktops. While I haven’t blogged about it since the announcement back in May, a lot of fixes and improvements have gone into it since then and I’d like to thank everybody contributing bug reports, suggestions and patches to the project so far. Since the existing plugin based on Qt 4.4 seems rather popular and not everybody feel comfortable using an unstable version of Qt, I will continue to maintain it as a separate project and accept bug reports over at my google code page.

In other news, the nice folks over at the Qt4 Maemo garage have been adapting QGtkStyle to work nicely with the Maemo platform as was evidenced by lorn’s post last month. Samuel also blogged about using Freetype for subpixel filtering which should eventually take care of any differences in font rendering between Qt and GTK.

Now that 4.4 is out, I finally found the time to kick off some new development and one of my pet projects these days is QGtkStyle. We already have QCleanlooks, icon themes, standard shortcuts and dialog buttons to integrate with GNOME, but to achieve true perfection we need to use the Gtk theme engine directly just like we do on Mac and Windows. QGtkStyle does exactly this, and in addition extends and surpasses QCleanlooks in a lot of other areas as well. All group boxes are now flat style to blend better with GNOME dialogs. Icon theme support has improved, scrollbar buttons are disabled at edges and item view branches now support hover.

The style is already available right now as a Qt 4.4 plugin on Labs and given that you can accept the normal disclaimers about using unreleased and experimental code, you can start playing with it immediately.

This is how the Arora browser looks:

All the above shots were taken using the “Clearlooks” engine. Here are a few alternatives:

Ubuntu Human:

Mythbuntu:

And of course the unforgettable Raleigh engine:

The style now comes in two flavors: Standard, and Office. The standard style is the one seen previously. The new Office style is presented here:

I also have some good news for commercial users waiting for this. The style will be renamed QtDotNetStyle and should be released as a dual licensed Qt Solution, hopefully next week.