How to achieve attractive UI customisation

Trenton Schulz of Trolltech describes how developers can achieve attractive UI customisation with minimal effort and expense.

Few would disagree that getting the UI right is fundamental to the success of new electronic devices.

This applies as much to consumer-focused gadgets such as the Iphone as it does to professional devices and control panels.

With more companies seeking to differentiate and adapt their software to different user needs, there is a growing need to customise application user interfaces.

Most modern windowing systems standardise the look and feel of the user interface.

A consistent user interface across different applications enables users to learn and discover features of a new application very quickly.

However, many applications deliberately choose to ignore style guidelines and provide a custom user interface.

This is because custom colours and style help brand and differentiate the application: users can immediately identify the software of a certain company.

For example, Apple's Aqua user interface style for its Mac OS X applications is immediately identifiable.

The styling of Apple's Safari browser, Itunes software and Iphone UI are all aligned and recognisably Apple.

Another purpose for UI customisation is accessibility.

Programs written for users with special visual needs may require the use of very bright colours or a certain subset of colours throughout the user interface.

In addition, they may require widgets such as buttons to be larger than usual.

Custom UIs are also common in special purpose applications, such as those that run on in-store kiosks that are styled to be usable with minimal computer knowledge and little or no training.

Other examples include cash machine (ATM) interfaces that provide large buttons with big, bold text, and point-of-sale software that provides different coloured buttons for different products, such as those found in coffee houses and convenience stores.

Another reason for UI customisation is to achieve cross-platform consistency.

This is true of applications such as Itunes and Safari, which aim to replicate the Mac OS X user experience in Windows environments as well.

Different toolkits provide various customisation mechanisms and application developers need to consider a number of key questions to determine how challenging it will be to adapt the user interface.

Most toolkits expose properties for basic customisation such as foreground colour, background colour and text font.

However, more advanced customisation, such as providing a gradient background or fancy borders, requires the widget painting code to be overridden.

Advanced toolkits have the widgets paint themselves through a theming or styling engine and creating a custom user interface simply requires a custom styling engine.

Developing new styles is often a designer-driven task: developers write code to make the application conform to a specification provided by the designer.

As the early stages of design tend to be dynamic and fast-changing, it must be quick and easy to create and change prototypes of designer specifications.

Advanced toolkits can separate UI look and feel from application logic, enabling designers to customise the application independently from the developers writing the application logic.

Of course, the toolkit should also enable seamless integration of the work of designers and developers.

The type of widgets that can be styled and the extent to which they can be styled are key factors in the power of the styling API.

Cross-platform application developers must also check whether widget customisation works across platforms without side-effects.

Qt is a cross-platform application framework for desktop and embedded development.

Its GUI library provides native look and feel on each of the platforms it supports.

In addition, it provides various mechanisms to fine-tune or completely change the application UI, each of which has its relative strengths and weaknesses depending on the application.

One simple but dated technique is to use Qpalette.

This class provides information on system colours used by widgets to paint themselves and holds system colours in categories or colour roles.

Qpalette is a remnant from Windows 98/2000 times, when there was a direct correlation between the widget look and the palette colours.

Newer operating systems such as Windows XP, Windows Vista and Mac OS X do not have this concept: they base widget designs on pixmaps and gradients and not on simple colours, which cannot be customised using Qpalette.

Another way to customise widget painting in Qt is to use Qwidget.

This is the base class of all widgets in Qt and provides a virtual method called Paintevent(), which enables widgets to draw themselves.

Developers can easily subclass an existing widget and re-implement the Paintevent() to provide a custom look and feel.

In Qt, widget painting is performed by Qpainter, which provides basic features such as the drawing of lines, arcs, rectangles, ellipses, Bezier curves and images, as well as advanced features such as painter paths, transformations and composition modes.

One drawback of styling widgets through sub-classing is that the subclassed widget must be used throughout the application.

For an existing application this might mean updating all the user interface forms and code to use the widget.

Qt provides the native look and feel on all the platforms it supports using an abstract base class called Qstyle.

This provides an interface that widgets can query for information about their look and feel, including painting, size metrics, spacing and margins and style hints, as well as more advanced services such as hit testing and layout of sub-elements.

For example, a QcomboBox uses hit testing to determine if the drop-down button was clicked and uses the layout interface to determine where to place its drop-down button.

Qt provides concrete subclasses of Qstyle for each platform it supports - for example, the Qwindowsxpstyle for Windowsxp, Qmacstyle for Mac OS X and Qcleanlooksstyle for Gnome.

When a Qt application starts up, the appropriate class is instantiated and is made available through Qapplication::style().

By default, all widgets follow the application style, although it is possible to set a different style widget-by-widget using Qwidget::setstyle().

Customising the UI means implementing a custom Qstyle, typically by sub-classing an existing concrete style closest to the look and feel of the desired UI.

The biggest advantage of writing a custom style is that there is no need to change any of the existing widget codes.

Furthermore, custom styles are not limited to painting: they can change default widget sizes, provide advanced hit testing (circular buttons) and modify style hints.

Qt Style Sheets provides a powerful mechanism for customising the appearance of widgets beyond what is already possible by sub-classing Qstyle.

The concepts, terminology, and syntax of Qt Style Sheets are heavily inspired by HTML Cascading Style Sheets (CSS), but adapted to the world of widgets.

Qt Style Sheets implements cascading (merging) between the style sheets of the widget, its parents and the application to compute the final style for a widget.

Qt Style Sheets are not limited to simple widgets such as checkboxes and buttons.

Even complex widgets such as tab widgets (Qtabwidget), combo boxes (Qcombobox), item views, scroll bars and menus can be completely styled using Qt Style Sheets with sub-controls.

Sub-controls enable the exact position and size of a part of a widget to be specified; for example, to specify the position and size of the drop-down button of a Qcombobox.

Qt Style Sheets builds upon Qstyle, providing most of its features without requiring style choices, such as colours, to be hard-coded into an application.

The main advantage of Qt Style Sheets over Qstyle is that designers can develop custom user interfaces using Qt Designer without having to wait for a developer to create a mock-up.

In addition, since style sheets are just strings, they can be read on the fly from an embedded resource or from the local file system, or even created dynamically.

Since style sheets need to be parsed before the user interface is rendered they present a performance trade-off.

However, the delay is only noticeable for very large style sheets (more than 5,000 lines).

The fact that custom styles can often be built using only a few lines of code mitigates this concern in most cases.

Qt now integrates the Webkit open-source rendering engine, making it simple to embed entire web pages into a Qt application using the Qwebview widget.

This approach makes use of an HTML/Javascript user interface that can be themed with CSS, just like any other web application.

It is also possible to embed custom widgets such as Qtabwidget into the web page using the