• 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 tag in HTML.

These embedded widgets can be customised using Qt Style Sheets or Qstyle as described above.

A key advantage of the Qt Webkit integration, as in the web world, is the separation of design and content.

This enables designers to work independently, using existing skills, with an easy mechanism for modifying the UI style and layout through changes to CSS descriptions.

In general Qpalette is no longer recommend.

Qstyle, Qt Style Sheets and Webkit are all good options for customising UI applications in Qt and there are also cases where sub-classing Qwidget works well.

The Qstyle API provides a cross-platform styling interface to change the style and behaviour of any widget without having to modify the widget itself.

Qt Style Sheets, inspired by CSS, can be used to create styles without any programming knowledge and is the preferred choice for micro-customisation.

Qt Webkit integration enables existing HTML/CSS developers to reuse their knowledge when designing desktop applications.

When making minor customisations such as changing foreground, background or font, Qt Style Sheets is recommended.

It provides styling guarantees across platforms: colours will be enforced on all platforms, regardless of the native look.

In some cases, Qt Style Sheets may not support the widget to be customised and developers should determine how much of existing code needs to be changed if a custom widget that re-implements Qwidget::paintevent() is used.

If few changes are needed, sub-classing is the preferred approach.

If there are significant changes to the code, Qstyle could be the best option.

Qt Style Sheets or Qstyle must be used for existing applications.

Style sheets can be used to quickly prototype the application theme.

By their nature, style sheets can be loaded from external resources, enabling customisations to be varied according to the user.

A Qstyle-based approach requires a custom style, which renders widgets using style/theme information loaded from a user resource file.

A Qstyle-based approach is best for creating a heavily customised interface such as a media player, primarily because very big style sheets (more than 5,000 lines) tend to slow down the application.

Currently, style sheets cannot be used in Qt for animations and cannot provide arbitrary shapes for widgets.

Qstyle can be packaged as a dynamically loadable plug-in (Qstyleplugin).

All applications can load the plug-in from a predefined location.

A similar strategy can be used for Qt Style Sheets, where the style sheet is loaded dynamically from a file at a predefined location.

This has the advantage of enabling the style to be updated without updating the application itself.

One shortcoming is that the style information can be lost if the user inadvertently deletes these external files.

To avoid this problem, the custom Qstyle should be compiled as part of every application, causing the Qt Style Sheet to be embedded as a Qt Resource in every application.

To make an application that displays different UI layouts in different themes requires the UI forms to be dynamically loadable.

This can be enabled using the Quiloader class which converts .ui files (files created by Qt Designer) into widgets at runtime.

Because UI design is a designer-driven process, the choice of toolkit can be crucial to getting the desired look and feel with minimal time and effort, especially as UI customisation becomes more commonplace.

The Qt framework offers developers a number of options for customising application UIs efficiently.

Make a Free Website with Yola.