User Interface Styling Made Simple

Transcription

1 White Paper User Interface Styling Made Simple Abstract With more companies seeking to differentiate software, there is an increasing need to customize application UIs the current solutions for UI styling can be difficult and labour-intensive. This whitepaper discusses how to easily customize your user interface using a powerful yet intuitive, cross-platform style API, HTML and JavaScript with the Qt WebKit Integration, or with a few lines of CSS-style code with widget stylesheets all provided in the Qt application framework.

2 Introduction With more and more companies seeking to differentiate software, there is an increasing need to customize application user interfaces (UI). However, the current solutions for UI styling can be difficult and labor-intensive. This whitepaper explains how you can easily customize your user interface using a powerful yet intuitive, cross-platform application programming interface (API), HTML/CSS/JavaScript with the Qt WebKit Integration, or with a few lines of CSS-style code with widget style sheets all provided in the Qt application framework. Why customize user interfaces? Most modern windowing systems standardize on the look and feel of the user interface [1]. A consistent user interface across application enables users to learn and discover features of a new application very quickly. However, many applications deliberately choose to ignore the Style Guidelines and provide a custom user interface. Some of the reasons are: Differentiation Custom colors, look and feel help brand the application users immediately can identify software of a certain company [2]. For example, the Apple metal style is immediately identifiable. A custom style also adds uniqueness to the application. The latest Open SUSE installer received rave reviews for its attractive design [3]. Accessibility Programs written for users with special visual needs may require the usage of very bright colors or a certain subset of colors throughout the user interface. In addition, they may require widgets such as buttons to be larger than usual. Special Purpose Applications that run on kiosks and in retail shops use are styled to be usable with a minimum of computer knowledge and little or no training. ATM interfaces that provide large buttons with big, bold text, and point-of-purchase software that provides different colored buttons for different products such as those found in coffee houses, pizza shops are excellent examples of applications that fall into this category. Cross-platform Consistency The application is cross platform and the authors want to provide the same look and feel across all platforms. Examples are applications such as Apple s itunes and Safari Browser, which attempt to provide the Mac OS X user experience on Windows Nokia Corporation and/or its subsidiaries. User Interface Styling Made Simple 1

3 What are the challenges? Different toolkits provide varied mechanisms for customizing the user interface. Application developers should ask themselves the following question when determining how challenging it will be to change the user interface: 1. Does the toolkit allow widget customization? Most toolkits expose properties for basic customization like foreground color, background color, font. However, for advanced customizations like providing a gradient background or fancy borders, one needs to override the painting code of the widget. Advanced toolkits have the widgets paint themselves through a theming or styling engine. All one needs to do to create a custom user interface is to develop a custom styling engine. 2. Does the toolkit aid rapid prototyping of interface look and feel? Developing new styles is often a designer-driven task. Developers write code to make the application conform to a specification provided by the designer. Because a design in its early stages is a moving target and prone to much feedback, creating prototypes of designer specifications must be fast and easy. 3. Can designers define the look and feel themselves? Advanced toolkits allow separation of UI look and feel from application logic. This means that user interface designers can customize the application independently from the developers who write the application logic. In an optimal case, integration of the work of designers and developers happens seamlessly. 4. How powerful is the styling API? The type of widgets that can be styled and the extent to which they can be styled are key factors to the power of a styling API. Cross-platform applications also must check whether widget customization works across platform without any side effects. User Interface Styling with the Qt Application Framework Qt is a cross-platform application framework for desktop and embedded development. It includes an intuitive API and a rich C++ class library, integrated tools for GUI development and internationalization, and support for Java and C++ development. Qt's GUI library provides native look and feel on each of the platforms it supports. In addition, Qt provides various mechanisms to fine tune or completely change the application user interface. Some of these are more suitable than others for any given application, but we ll cover them all so you can make the best choice for your needs. 1. Customization using palettes One simple, but now somewhat dated, technique is to use the QPalette class, which provides information on system colors. Widgets use these colors to paint themselves. QPalette holds system colors in categories or color roles. For example, the Base color role of the palette provides the background of a lineedit and a list view, the Button color role of the palette provides the background of a push button. In addition, QPalette holds color role information for various widget states such as Enabled, Disabled, Inactive Nokia Corporation and/or its subsidiaries. User Interface Styling Made Simple 2

4 In Qt, QApplication holds the system palette. All widgets, by default, use the QApplication palette to draw themselves. Therefore, by changing the system palette, one can change the colors of all widgets in an application. For example, the following code changes the color of all buttons in an application: QPalette palette = QApplication::palette(); palette.setcolor(qpalette::button, Qt::red); QApplication::setPalette(palette); You also can use QWidget::setPalette to change the palette of a widget on an individual basis. Qt Designer, the powerful GUI layout and forms builder integrated with the Qt Application framework, can be used to edit palettes and preview the result. The concept of a QPalette is remnant of a design from the time of Windows 98/2000, when there was a direct correlation between the widget look and the palette colors. Newer operating systems like 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 colors. As a result, it is not possible to customize an application using QPalette on modern systems. So, this method has the side effect that customizing the interface using a palette works on some platforms and not on others. 2. Customizing by overriding the paintevent() QWidget is the base class of all widgets in Qt and it provides a virtual method called paintevent() that allows widgets to draw themselves. Every widget in Qt draws itself by reimplementing the paintevent(). You can easily subclass an existing widget and reimplement the paintevent() to provide a custom look and feel. For example, the following code paints the button green when it is pressed by the user and red otherwise. void MyPushButton::paintEvent(QPaintEvent *event) { QPainter painter(this); if (isdown()) painter.fillrect(event->rect(), Qt::green); else painter.fillrect(event->rect(), Qt::red); } The QPainter performs painting on Qt's widgets. It not only supports basic features like drawing of lines, arcs, rectangles, ellipses, bezier curves and images but also advanced features like painter paths, transformations and composition modes. The QPainter documentation ( provides an excellent overview on the features of QPainter. Unfortunately, a severe drawback of styling widgets by subclassing 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 this widget Nokia Corporation and/or its subsidiaries. User Interface Styling Made Simple 3

5 3. QStyle and Delegates Qt provides the native look and feel on all the platforms it supports using an abstract base class called QStyle. QStyle provides an interface widgets can query for information about their look and feel painting, size metrics, spacing and margins, style hints. It also provides more advanced services like 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 the WindowsXP, QMacStyle for the MacOS 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. It is possible to set a different style on a widget by widget basis using QWidget::setStyle. For example, the following code makes the widget appear in Windows 2000 style on all platforms. widget->setstyle(new QWindowsStyle); It is important to note that styles like QWindowsXPStyle and QMacStyle are available only on their respective platform since they use the native theme engine to fetch colors, pixmaps and size metrics. When you use this method, widgets never paint anything themselves. They always delegate painting to the QStyle. Let us take an example to emphasize this point - the paintevent of QPushButton looks something like: void QPushButton::paintEvent(QpaintEvent *event) { // code deliberately simplified QPainter painter(this); QStyleOptionButton option; option.initfrom(this); style()->drawcontrol(qstyle::ce_pushbutton, &painter, &option, this); } The QPushButton forwards its painting to its QStyle. It packages all the painting parameters in a structure derived from QStyleOption. This structure contains all the information the style needs to paint the button. This includes the state of the button (Is the button flat? Is it pressed?), the text on the button, the icon if any and so on. Creating custom user interfaces in Qt is about implementing a custom QStyle. The typical approach to this is to begin by subclassing an existing concrete QStyle that is closest to the custom user interface desired. You should take care with the choice of the base class since not all QStyles are available in every platform. Styles like QWindowsXPStyle use the native Windows XP theme engine and hence are unavailable on Mac OS X or Linux. Choosing QStyles like QWindowsStyle, QPlastiqueStyle and QCleanlooksStyle is a safe bet since they are available on all platforms. Here is a simple example of how a button can be customized by re-implementing drawcontrol to provide the appropriate style: 2008 Nokia Corporation and/or its subsidiaries. User Interface Styling Made Simple 4

6 void MyStyle::drawControl(QStyle::ControlElement ce, QPainter *painter, QStyleOption *option, QWidget *widget) { switch (ce) { case CE_PushButton: // Deliberately simple painter->fillrect(option->rect(), Qt::red); break; default: BaseClass::drawControl(ce, painter, option, widget); break; } } The custom style implements CE_PushButton and paints the button red. A more useful style would inspect the data in the option structure and paint the button appropriately. Notice how the style delegates all the other controls to the base class. This ensures that other unhandled cases like Check boxes, radio buttons are painted correctly. Once a custom style is created, it must be set on the application using QApplication::setStyle(). The biggest advantage of writing a custom style is that one need not change any of the existing widget code. Custom styles are also not limited just to painting they can change default sizes of widgets, provide advanced hit testing (circular buttons) and modify style hints. A note on styling of Qt's Item Views (QListView, QTreeView, QTableView): the items inside the Item views are customized through the use of delegates (derivatives of QAbstractItemDelegate). The default delegate paints the view using the view's QStyle. 4. Qt Style Sheets Qt Style Sheets provide a powerful mechanism for customizing the appearance of widgets, in addition to what is already possible by subclassing 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. The best way to appreciate the power of Qt Style Sheets is to fire up Qt Designer, drop a button in a form, select the button, and use the context menu to select Edit Stylesheet.... In the editor that pops up, type something like the following code: 2008 Nokia Corporation and/or its subsidiaries. User Interface Styling Made Simple 5

7 QPushButton { color: gray; lightgray); background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 white,stop: 1 border: 2px solid darkgray; border-radius: 5px; } With that simple code, you already have a customized QPushButton! Colors in Style Sheets can also specify an alpha value to composite the widget with its parent widget. Native Push Button and Styled Push Button You can set the style sheet of the entire application using QApplication::setStyleSheet(). Each widget can have its own style sheet set using QWidget::setStyleSheet. 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 supports styling of widgets using the traditional CSS box model [4]. Pseudo states enable one to style the widget depending on the state of the widget. For example, the following code changes the text color of the checkbox when the mouse hovers over it. QCheckBox:hover { color: white; } 2008 Nokia Corporation and/or its subsidiaries. User Interface Styling Made Simple 6

8 Qt Style Sheets are not limited to simple widgets such as check boxes and buttons. Even complex widgets like tab widgets (QTabWidget), combo boxes (QComboBox), item views, scroll bars, and menus can be completely styled with Qt Style Sheets using the concept of sub controls. Sub controls let you specify the exact position and size of a part of a widget. For example, using subcontrols one can specify the position and size of the drop down button of a QComboBox [5]. Qt Style Sheets builds upon QStyle (using an internal class called QStyleSheetStyle) and provides most of the features of QStyle without requiring style choices such as colors to be hard coded into an application. The primary advantage of Style Sheets over QStyle is 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, one can read them on the fly from an embedded resource or from the local file system or even create them dynamically. Since Style Sheets need to be parsed before the user interface is rendered, they do present a performance trade-off. However, the delay is only noticeable for very large style sheets (more than 5000 lines). The main consideration before choosing Qt Style Sheets is to analyze whether it meets all your application s styling requirements. The Style Sheet Reference ( provides comprehensive documentation on properties and widgets that can be styled. Important limitations include the lack of support for animations and limited support on Mac OS X. 5. Qt Webkit Integration Qt 4.4 introduces the integration of the WebKit project with Qt. WebKit provides an open source scripting and rendering engine for HTML. It is now trivial to embed entire webpages into a Qt application using QWebView [6]. When developing a Qt application based on the Webkit approach, you make use of an HTML/JavaScript user interface that can be themed with Cascading Style Sheets (CSS) just like any other web application. In Qt WebKit, it is also possible to embed custom widgets (like QTabWidget) into the web page using the <object> tag in HTML. These embedded widgets can be customized using Qt Style Sheets or QStyle as discussed in the previous sections. The advantages of Qt WebKit are the same as the ones in the web world separating design and content allows designers to work independently, using existing skills, with an easy mechanism to change the user interface (style and layout) by changing the CSS Nokia Corporation and/or its subsidiaries. User Interface Styling Made Simple 7

9 Selecting the best option Because you have many options for styling your Qt applications, you may be confused about selecting the right approach. In general, we know longer recommend using QPalette, but QStyle, Style Sheets, and WebKit are all strong choices for customizing applications in Qt. There are also cases where subclassing the QWidget paintevent is a good choice. To help you understand your options, we will discuss a few use cases and the approach that is the best match for each: 1. How do I make simple customizations to existing widgets? When making minor customizations like changing foreground, background or the font, Qt Style Sheets is the preferred choice. Qt Style Sheets provides styling guarantees across platforms colors will be enforced on all platforms regardless of the native look. In some cases, Qt Style Sheets may not support the widget that must be customized. In that case, one needs to analyze how much of existing code needs to be changed if a custom widget that reimplements QWidget::paintEvent() is used. If not much change is needed, then subclassing is the preferred approach. If there is lots of code to change, one should look into QStyle as the last option. 2. How do I theme an existing Qt application? For existing applications, Style Sheets or QStyle approach must be used. Style Sheets can be used to quickly prototype the application theme. Style Sheets by their very nature can be loaded from external resource. That makes it possible to vary customizations depending on the user. For a QStyle based approach, one needs to write a custom QStyle. The custom QStyle renders widgets using style/theme information loaded from a user resource file. 3. How does one go about creating a heavily customized interface like a media player? For such applications, a QStyle based approach is the best. This is primarily because very big Style Sheets (more than 5000 lines) tend to slow down the application. Also of Qt 4.4, Style Sheets cannot be used for animations. It also cannot provide arbitrary shape for widgets. For example, it is not currently possible to create a round button using Style Sheets (although you can approximate this effect by starting with a rectangular button rounding it). 4. What is the best approach for sharing a style over a suite of applications? QStyle can be packaged as a dynamically loadable plugin (QStylePlugin). All applications can load the plugin from a predefined installation location. A similar strategy can be used for Qt Style Sheets, where in the Style Sheet is loaded dynamically from a file installed at a predefined location. This approach has the advantage that the style can be updated without updating the application itself. A shortcoming is that the style information can be lost if the user inadvertently deletes these external files. To avoid this problem, we recommend compiling the custom QStyle as a part of every application, causing the Qt Style Sheet to be embedded as a Qt Resource in every application. 5. How can I make an application that displays different UI layouts in different themes? For the application to provide different UI layouts in different styles, one needs to make the user interface forms dynamically loadable. This is made possible using the QUiLoader class which converts.ui files (files created by Qt Designer) into widgets at run time Nokia Corporation and/or its subsidiaries. User Interface Styling Made Simple 8

10 Summary Custom user interfaces help companies differentiate themselves from their competition. Because designing user interfaces is a designer driven process, the choice of framework/toolkit plays a crucial role in getting the exact look and feel with minimal time and effort. The Qt framework provides a comprehensive solution to customize the application user interface. The QStyle API provides a cross platform styling interface to change the style and behavior of any widget without having to modify the widget itself. Qt Style Sheets, inspired with CSS of the web, can be used to create styles without any programming knowledge and is the preferred choice for micro customization. Qt Webkit integration allows existing HTML/CSS developers to reuse their knowledge in designing desktop applications. For More Information The definitive place for more information about customizing user interfaces is Qt s documentation ( The Qt Quarterly article The QStyle API in Qt4 provides an excellent history of the evolution of the QStyle API ( The QStyle reference ( is an indispensable guide for writing custom styles using QStyle. The Qt Style Sheets documentation ( provides examples for customizing practically every widget in Qt. The C++ GUI Programming with Qt 4 book has a chapter devoted to Styles and the latest edition has a section devoted to Qt Widget Style Sheets. References 1. Procontext User Interface Style Guides: 2. Branding and the User Interface Part 2: Tips on New Media Branding, Behaviour and Colour 3. ars technical: Qt styling adds flair to the OpenSUSE Installer 4. Qt Documentation 5. Qt Documentation Nokia Corporation and/or its subsidiaries. User Interface Styling Made Simple 9

11 White Paper About Qt: Qt is a cross-platform application framework. Using Qt, you can develop applications and user interfaces once, and deploy them across many desktop and embedded operating systems without rewriting the source code. Qt Development Frameworks, formerly Trolltech, was acquired by Nokia in June For more details about Qt please visit About Nokia Nokia is the world leader in mobility, driving the transformation and growth of the converging Internet and communications industries. We make a wide range of mobile devices with services and software that enable people to experience music, navigation, video, television, imaging, games, business mobility and more. Developing and growing our offering of consumer Internet services, as well as our enterprise solutions and software, is a key area of focus. We also provide equipment, solutions and services for communications networks through Nokia Siemens Networks. Oslo, Norway Redwood City, CA, USA Beijing, China qt-info@nokia.com Nokia Corporation and/or its subsidiaries. Nokia, Qt and their respective logos are trademarks of Nokia Corporation in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.