====== Icons and Actions ======
This report is based on Qt 4.7 and is thus a bit very dated. I'm leaving them up because it might still be useful to someone and/or be relevant.
This report discusses different ways of binding icons to actions in Qt desktop applications and provides motivation for exploring approaches to robust icon implementations. The following was written against Qt 4.7.1 and Qt Creator 2.1.0 and assumes the reader has some familiarity with Qt/C++ development.
===== Options =====
In Qt, there are (at least) five different approaches to binding icons((http://doc.trolltech.com/4.7/qicon.html)) to actions((http://doc.trolltech.com/4.7/qaction.html)), each offering different pros and cons with respect to development time, system integration, and icon rendering quality. The different approaches are described below. For purposes of demonstration in the following discussions, I will assume we have a main window with three actions: ''action_Open'' that opens a file, ''action_Convert'' that converts the open file and saves it, and ''action_Quit'' that exits the application.
==== Option 1: Use Qt Resources in Qt Designer ====
The path-of-least-resistance for binding icons to actions when developing Qt applications with Qt Designer((Throughout, I use Qt Designer to refer both to the standalone application as well as its built-in support for the the version embedded into Qt Creator)) is to use Qt Resources((http://doc.qt.nokia.com/4.7/resources.html)). The support for ''*.qrc'' resource files built into Qt Designer makes adding icon resources and binding them to actions very easy and provides immediate visual feedback((http://wiki.forum.nokia.com/index.php/How_to_use_Resource_Editor_with_Qt_Creator)).
While this approach has the above stated benefits, it's not optimal for a couple reasons. First, it lacks the ability to specify multiple icon sizes. In a typical application, icons bound to actions will need to be rendered at different sizes. For example, toolbar icons may be rendered at 24x24 pixels while menu item icons will be rendered at 16x16. As far as I can tell, Qt Designer (and possibly all of Qt) does not let you set icons for menu items and toolbar items independently. Rather, Qt will automatically shrink (but not grow) icons to fit the desired space as needed((http://doc.qt.nokia.com/4.7/widgets-icons.html)).
Developers using this approach typically provide an icon in a resource that is as large as the application is likely to require, and then let Qt resize it as needed. Thus, for example, you might bind a 48x48 icon to an action and let Qt shrink it to 24x24 for the toolbar and 16x16 for the menu item. While this works, the shrunk icons often appear fuzzy or otherwise suboptimal((As near as I can tell, it's not possible to specify multi-sized icons in Qt Designer. You can supply Windows-style multi-size ''*.ico'' files as Qt Resources and bind those to actions. However, when I tried this on Linux, I got it to show the smallest icon in the set. In other words, Qt doesn't seem to automatically select the best icon size in mult-size ''*.ico'' files for the given situation. This may work on Windows and/or OS X but requires testing.)).
FIXME (an image here would help a lot)
The second issue with the way Qt Designer deals with binding icons to actions is that it doesn't provide support for existing system icons and icon themes. While this may be a behavior that Windows (and possibly OS X users) are accustomed to (and some developers may actually prefer), users of GTK+-based environments will find this disconcerting. As we will see, Qt itself //does// provide support for system icons, but this is not reflected in Qt Designer.
=== Code implementation ===
There is no specific code implementation required to use the above icon bindings apart from what Qt Designer and ''moc'' generate for us automatically. Thus our example's MainWindow constructor using Qt Resources in Qt Designer looks something like:
MainWindow::MainWindow(QWidget *parent) :
QMainWindow(parent),
ui(new Ui::MainWindow)
{
ui->setupUi(this);
...
}
=== Pros ===
* Available on all platforms
* Incredibly easy; no coding required
=== Cons ===
* Poor resizing
* Not consistent with system icon theme
==== Option 2: Explicitly build and bind icons at runtime ====
It's possible to build ''QIcon'' instances in code that encapsulate multiple icon sizes. Once this is done, the ''QIcon'' instance can be bound to an action -- and Qt will automatically select the best size for a given rendering. This requires that the developer build a resource tree with images for all the required sizes and then do a fair amount of hand-coding for each icon.
=== Code implementation ===
In the code below, we are assuming we have a resource in our project root called ''myicons.qrd'' with the needed icons in the specified locations:
myIcons/16x16/document-open.png
myIcons/24x24/document-open.png
myIcons/32x32/document-open.png
myIcons/16x16/document-save-as.png
myIcons/24x24/document-save-as.png
myIcons/32x32/document-save-as.png
myIcons/16x16/application-exit.png
myIcons/24x24/application-exit.png
myIcons/32x32/application-exit.png
Once the above resource has been added to the project, building and binding icons for the three actions in in the constructor would look like:
MainWindow::MainWindow(QWidget *parent) :
QMainWindow(parent),
ui(new Ui::MainWindow)
{
ui->setupUi(this);
QIcon documentOpenIcon;
documentOpenIcon.addFile(
":myIcons/16x16/document-open.png",QSize(16, 16));
documentOpenIcon.addFile(
":myIcons/24x24/document-open.png", QSize(24, 24));
documentOpenIcon.addFile(
":myIcons/24x24/document-open.png", QSize(32, 32));
ui->action_Open->setIcon(documentOpenIcon);
QIcon saveAsIcon;
saveAsIcon.addFile(
":myIcons/16x16/document-save-as.png", QSize(16, 16));
saveAsIcon.addFile(
":myIcons/24x24/document-save-as.png", QSize(24, 24));
saveAsIcon.addFile(
":myIcons/24x24/document-save-as.png", QSize(32, 32));
ui->actionSave_as->setIcon(saveAsIcon);
QIcon exitIcon;
exitIcon.addFile(
":myIcons/16x16/application-exit.png", QSize(16, 16));
exitIcon.addFile(
":myIcons/24x24/application-exit.png", QSize(24, 24));
exitIcon.addFile(
":myIcons/24x24/application-exit.png", QSize(32, 32));
ui->action_Quit->setIcon(exitIcon);
...
}
If you have more than a handful of such icons, you will probably want to write a helper function to reduce the repeated data entry.
=== Pros ===
* Available to all platforms
* Excellent resizing (if you provide all required sizes)
* Covers all needed icons (if you provide all required icons)
=== Cons ===
* Not consistent with system icon theme
* Requires lots of coding
==== Option 3: QStyle's standardIcon() function ====
An alternative to using icon resources is provided by the ''standardIcon()'' function, which is an instance member of the ''QStyle'' abstract base class((http://doc.qt.nokia.com/4.7/qstyle.html#standardIcon)). This function provides access to the subset of standard system icons enumerated in ''StandardPixmap-enum''((http://doc.qt.nokia.com/4.7/qstyle.html#StandardPixmap-enum)).
The enumerated icons should be available on all platforms, so testing for their existence isn't required. The main issue with using ''standardIcon()'' is that on my platform at least (Linux, Ubuntu 10.10) it does not provide multi-sized icons. You'll get icons from the system theme, but they will be resized and fuzzy at times. (I haven't tested the behavior on Windows and OS X, so it might not be the case on those platforms.) Another issue is that many common icons are not part of ''StandardPixmap-enum''.
Implementation requires only a bit of straight-forward hand-coding.
=== Code implementation ===
In our example, acceptable ''StandardPixmap-enum'' icons are available for ''action_Open'' and (arguably) ''action_Convert''. To use the standardIcon() approach for these icons, the resulting MainWindow constructor would look like:
MainWindow::MainWindow(QWidget *parent) :
QMainWindow(parent),
ui(new Ui::MainWindow)
{
ui->setupUi(this);
ui->action_Open->setIcon(this->style()->standardIcon(QStyle::SP_DialogOpenButton));
ui->action_Convert->setIcon(this->style()->standardIcon(QStyle::SP_DialogSaveButton));
...
}
=== Pros ===
* Consistent with system icon theme
* Available on all platforms
* Fairly easy to implement
=== Cons ===
* Poor resizing
* Limited range of icons
==== Option 4: Use the system theme with QIcon::fromTheme() ====
On X11 systems, Qt lets you access all the icons that are part of the system icon theme using the static function ''QIcon::fromTheme()''.((http://doc.qt.nokia.com/4.7/qicon.html#fromTheme)) Icons so accessed will be selected as needed based on the required rendering size.
As was the case with QStyle's standardIcon() function, implementation with QIcon::fromTheme() requires a bit of hand-coding.
=== Code implementation ===
In our example, using ''QIcon::fromTheme()'' for the three actions in it's simplest form looks like:
MainWindow::MainWindow(QWidget *parent) :
QMainWindow(parent),
ui(new Ui::MainWindow)
{
ui->setupUi(this);
ui->action_Open->setIcon(QIcon::fromTheme("document-open"));
ui->action_Convert->setIcon(QIcon::fromTheme("document-save-as"));
ui->action_Quit->setIcon(QIcon::fromTheme("application-exit"));
...
}
It's typical to test for the icon's existence first((http://doc.qt.nokia.com/4.7/qicon.html#hasThemeIcon)):
MainWindow::MainWindow(QWidget *parent) :
QMainWindow(parent),
ui(new Ui::MainWindow)
{
ui->setupUi(this);
if (QIcon::hasThemeIcon("document-open"))
ui->action_Open->setIcon(QIcon::fromTheme("document-open"));
if (QIcon::hasThemeIcon("document-save-as"))
ui->action_Convert->setIcon(QIcon::fromTheme("document-save-as"));
if (QIcon::hasThemeIcon("application-exit"))
ui->action_Quit->setIcon(QIcon::fromTheme("application-exit"));
...
}
or provide a fallback in the function call:
MainWindow::MainWindow(QWidget *parent) :
QMainWindow(parent),
ui(new Ui::MainWindow)
{
ui->setupUi(this);
ui->action_Open->setIcon(QIcon::fromTheme("document-open", QIcon(":/icons/open.png")));
ui->action_Convert->setIcon(QIcon::fromTheme("document-save-as", QIcon(":/icons/saveas.png")));
ui->action_Quit->setIcon(QIcon::fromTheme("application-exit", QIcon(":/icons/exit.png")));
...
}
=== Pros ===
* Consistent with system icon theme
* Excellent resizing (depending on icon theme)
* Fairly easy to implement
=== Cons ===
* Available only on X11 systems
* Wide range of icons, but won't cover all requirements
=== Caveat ===
QIcon's determination of the system icon theme is at the time of this writing not reliable under Linux -- at least not under Openbox; GNOME and Xfce are yet to be tested. A possible workaround is to use as yet undefined ''HeroicMeasures()''™ to suss out the actual icon theme and then set it in the constructor((http://doc.qt.nokia.com/4.7/qicon.html#setThemeName, http://doc.qt.nokia.com/4.7/qicon.html#themeName)):
QString iconTheme = My::HeroicMeasures();
QIcon::setThemeName(iconTheme);
==== Option 5: Use a custom theme with QIcon::fromTheme() ====
The static function ''QIcon::fromTheme()'' used above can also be used with custom, locally defined icon themes that are placed into Qt Resource files((This idea comes from http://tkrotoff.blogspot.com/2010/02/qiconfromtheme-under-windows.html)). To accomplish this we need to do three things: Create a custom icon theme, create a Qt Resource with the theme, and implement the code needed to use the custom theme.
To describe the process, I will use an example of a custom theme that provides icons in a variety of sizes for our example application. The icons themselves are taken from the raucously popular, public domain Tango Project((http://tango.freedesktop.org/Tango_Desktop_Project)) using files provided in Ubuntu's 10.10 tango-icon-theme package((http://packages.ubuntu.com/maverick/tango-icon-theme)). Because unlike Bill Bruford I am not good at naming things((Bruford, Bill. "Who Managed the Manager?" In //Bill Bruford: the autobiography : Yes, King Crimson, Earthworks, and more.// London: Jawbone Press, 2009. 60-72. )), I call the custom theme, "TangoMFK".
=== Creating a custom icon theme ===
There are several ways to create icon themes((http://standards.freedesktop.org/icon-theme-spec/icon-theme-spec-latest.html)). I will present here a way that I have found works and is relatively easy to set up.
Begin by add the following file and directory structure to the root of your project:
icons (dir)
TangoMFK (dir)
index.theme (text file)
16x16 (dir)
24x24 (dir)
32x32 (dir)
tangomfk.qrc (text file)
Into the file ''index.theme'' place the following text:
[Icon Theme]
Name=TangoMFK
Comment=Tango Icon Theme MFK
Inherits=default
Directories=16x16,24x24,32x32
[16x16]
Size=16
[24x24]
Size=24
[32x32]
Size=32
Into the ''16x16'', ''24x24'' and ''32x32'' subdirectories, place icons in the various sizes that you need for your application. In our case, I added files ''document-open.png'', ''document-save-as.png'' and ''exit.png'' to each of the subdirectories (nine files in total).
The actual icon theme consists of the directory TangoMFK and its contents. The file ''tangomfk.qrc'' is used to build the custom icon theme as a compiled-in resource and is discussed below.
=== Creating a Qt Resource for the theme ===
While you can create the needed ''*.qrc'' file to describe the custom icon theme using only the GUI-based resource manager built into Qt Creator, in this case it's probably easier to create the file using straight text. The file below serves as an example of what you need to put into a ''*.qrc'' file. In particular, note the use of an alias to point to the ''index.theme'' and the syntax for the aliases pointing to the actual files.
icons/TangoMFK/index.theme
icons/TangoMFK/16x16/exit.png
icons/TangoMFK/24x24/exit.png
icons/TangoMFK/32x32/exit.png
icons/TangoMFK/16x16/document-open.png
icons/TangoMFK/24x24/document-open.png
icons/TangoMFK/32x32/document-open.png
icons/TangoMFK/16x16/document-save-as.png
icons/TangoMFK/24x24/document-save-as.png
icons/TangoMFK/32x32/document-save-as.png
Once you have created the ''*.qrc'' file with the needed content, you will need to add it to your project. In Qt Creator, right-click the name of the project, select //Add Existing Files...//, and add the ''*.qrc'' file. After doing this, you can use Qt Creator's GUI-based resource manager to verify that all the icons have been correctly included.
Note that in the set of icons I drew from, there were no 48x48 icons. To maintain best compatibility with Windows OSes, you ideally should include 48x48 icons as well((See http://msdn.microsoft.com/en-us/library/ms997636.aspx for a discussion of Windows XP icons and http://msdn.microsoft.com/en-us/library/aa511280.aspx for Windows 7.)).
The pros and cons associated with this approach are essentially identical to [[#Explicitly build and bind icons at runtime]] above, but there is one important difference: you cannot combine this approach with [[#Custom theme using QIcon::fromTheme()]] because the setting of icon themes is dynamic: the last theme name you set is the theme with which all icons will be rendered.
=== Code implementation ===
Once you have created your custom icon theme and added it to your project as a resource, using it is essentially identical to using the system icon theme except that you must now specify the theme name((http://doc.qt.nokia.com/4.7/qicon.html#setThemeName)).
MainWindow::MainWindow(QWidget *parent) :
QMainWindow(parent),
ui(new Ui::MainWindow)
{
ui->setupUi(this);
QIcon::setThemeName("TangoMFK");
ui->action_Open->setIcon(QIcon::fromTheme("document-open"));
ui->actionSave_as->setIcon(QIcon::fromTheme("document-save-as"));
ui->action_Quit->setIcon(QIcon::fromTheme("exit"));
...
}
You can (and typically should) use the forms shown above for testing icon existence and/or setting fallback icons.
=== Pros ===
* Available to all platforms
* Excellent resizing (if you provide all required sizes)
* Covers all needed icons (if you provide all required icons)
=== Cons ===
* Not consistent with system icon theme
* PITA to implement
===== Toward robust icon support =====
Clearly, there is no single solution that is optimal anywhere and no simple combination that is optimal everywhere. Complicating matters is the fact that Qt does not let us (easily) implement logic along the lines of:
QString systemTheme = QIcon::themeName();
QString customTheme = "TangoMFK";
if (QIcon::hasThemeIcon(iconName))
theAction->setIcon(QIcon::fromTheme(iconName));
else
{
QIcon::setThemeName(customTheme);
if (QIcon::hasThemeIcon(iconName))
theAction->setIcon(QIcon::fromTheme(iconName));
QIcon::setThemeName(systemTheme);
}
because theme setting is dynamic. What will be rendered on screen in the above case are the system theme's icons (even the ones that don't exist), not a combination of the system theme's and custom icons as you might expect.
Given these circumstances, your best bet appears to be to design a workflow that optimizes against your development time, system integration, and icon rendering quality priorities. We enumerate below some policies that serve as a basis for developing comprehensive, hybrid approaches.
==== The "Don't need system integration" policy ====
We begin with this policy because it's conceptually the easiest to implement consistently. This policy uses:
* Fallback icons from a resource file (via Qt Designer)
* Custom theme icons for all icons
Implementation is essentially as described in [[#Creating a custom icon theme]] above with the addition that fallback icons using the same icons present in your custom icon theme are set in Qt Designer.
The chief advantage of this approach is that it uses multi-sized icons for all actions in the application. The chief disadvantage (apart from the need to create a complete custom icon theme) is that the icons will not be integrated with the system's icons.
==== The Windows/OS X policy ====
We call the second policy the "Windows/OS X policy" because it's the only candidate for using system icons on those platforms. However, it may be an effective policy for X11 platforms as well. This policy uses:
* Fallback icons from a resource file (via Qt Designer)
* ''StandardPixmap-enum'' icons when available
* Custom theme icons for the remainder
The main advantage of this policy is that it allows some icons to be integrated with the system's icons -- across all platforms. The main disadvantage to this policy is these system icons will not be scaled optimally -- but the icons from the custom theme will be. The resulting combination may be more jarring to users than optimally rendered but non-standard icons.
==== The X11 policy ====
In the "X11 policy" maximizes the use of system icons via the system icon theme and so only makes sense on X11 platforms. This policy uses:
* Fallback icons from a resource file (via Qt Designer)
* Icons from the system icon theme when available
* Explicitly configured multi-sized icons elsewhere
The main advantage of this policy is that it provides GTK+ users //optimally rendered// familiar icons over a large set of icons and optimally rendered custom icons elsewhere. The main disadvantage is that implementing the icons that are not covered by system icons will requires a good amount of work and code.
===== Discussion =====
A truly robust icon policy in Qt requires an ability to set multi-sized icons from system icons and at least one additional source -- an ability not currently available. This leaves the developer with the choice of optimizing icon rendering quality at the cost of system integration or using system icons at the cost of icon rendering quality. User testing is indicated across platforms to determine the significance of this limitation and the optimal trade-offs until the required support is available.