Support synthesized oblique and bold in SceneGraph
[profile/ivi/qtbase.git] / doc / src / widgets-and-layouts / styles.qdoc
1 /****************************************************************************
2 **
3 ** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies).
4 ** All rights reserved.
5 ** Contact: Nokia Corporation (qt-info@nokia.com)
6 **
7 ** This file is part of the documentation of the Qt Toolkit.
8 **
9 ** $QT_BEGIN_LICENSE:FDL$
10 ** GNU Free Documentation License
11 ** Alternatively, this file may be used under the terms of the GNU Free
12 ** Documentation License version 1.3 as published by the Free Software
13 ** Foundation and appearing in the file included in the packaging of
14 ** this file.
15 **
16 ** Other Usage
17 ** Alternatively, this file may be used in accordance with the terms
18 ** and conditions contained in a signed written agreement between you
19 ** and Nokia.
20 **
21 **
22 **
23 **
24 ** $QT_END_LICENSE$
25 **
26 ****************************************************************************/
27
28 /*!
29     \group appearance
30     \title Widget Appearance and Style
31     \brief Classes used for customizing UI appearance and style.
32 */
33
34 /*!
35     \page style-reference.html
36     \title Styles and Style Aware Widgets
37     \ingroup qt-gui-concepts
38     \brief Styles and the styling of widgets.
39
40     Styles (classes that inherit QStyle) draw on behalf of widgets
41     and encapsulate the look and feel of a GUI. The QStyle class is
42     an abstract base class that encapsulates the look and feel of a
43     GUI. Qt's built-in widgets use it to perform nearly all of their
44     drawing, ensuring that they look exactly like the equivalent
45     native widgets.
46
47     Several styles are built into Qt (e.g., windows style and motif style).
48     Other styles are only available on specific platforms (such as
49     the windows XP style). Custom styles are made available as plugins
50     or by creating an instance of the style class in an application and
51     setting it with QApplication::setStyle().
52
53     To implement a new style, you inherit one of Qt's existing styles
54     - the one most resembling the style you want to create - and
55     reimplement a few virtual functions. This process is somewhat
56     involved, and we therefore provide this overview. We give a
57     step-by-step walkthrough of how to style individual Qt widgets.
58     We will examine the QStyle virtual functions, member variables,
59     and enumerations.
60
61     The part of this document that does not concern the styling of
62     individual widgets is meant to be read sequentially because later
63     sections tend to depend on earlier ones. The description of the
64     widgets can be used for reference while implementing a style.
65     However, you may need to consult the Qt source code in some cases.
66     The sequence in the styling process should become clear after
67     reading this document, which will aid you in locating relevant code.
68
69     To develop style aware widgets (i.e., widgets that conform to
70     the style in which they are drawn), you need to draw them using the
71     current style. This document shows how widgets draw themselves
72     and which possibilities the style gives them.
73
74     \section1 Classes for Widget Styling
75
76     These classes are used to customize an application's appearance and
77     style.
78
79     \annotatedlist appearance
80
81     \section1 The QStyle implementation
82
83     The API of QStyle contains functions that draw the widgets, static
84     helper functions to do common and difficult tasks (e.g.,
85     calculating the position of slider handles) and functions to do
86     the various calculations necessary while drawing (e.g., for the
87     widgets to calculate their size hints). The style also help some
88     widgets with the layout of their contents. In addition, it creates
89     a QPalette that contains \l{QBrush}es to draw with.
90
91     QStyle draws graphical elements; an element is a widget or a
92     widget part like a push button bevel, a window frame, or a scroll
93     bar. Most draw functions now take four arguments:
94
95     \list
96     \o an enum value specifying which graphical element to draw
97     \o a QStyleOption specifying how and where to render that element
98     \o a QPainter that should be used to draw the element
99     \o a QWidget on which the drawing is performed (optional)
100     \endlist
101
102     When a widget asks a style to draw an element, it provides the style
103     with a QStyleOption, which is a class that contains the information
104     necessary for drawing. Thanks to QStyleOption, it is possible to make
105     QStyle draw widgets without linking in any code for the widget. This
106     makes it possible to use \l{QStyle}'s draw functions on any paint
107     device, i.e., you can draw a combobox on any widget, not just on a
108     QComboBox.
109
110     The widget is passed as the last argument in case the style needs
111     it to perform special effects (such as animated default buttons on
112     Mac OS X), but it isn't mandatory.
113
114     We will in the course of this section look at the style elements,
115     the style options, and the functions of QStyle. Finally, we describe
116     how the palette is used.
117
118     Items in item views is drawn by \l{Delegate Classes}{delegates} in
119     Qt. The item view headers are still drawn by the style. Qt's
120     default delegate, QStyledItemDelegate, draws its items partially
121     through the current style; it draws the check box indicators and
122     calculate bounding rectangles for the elements of which the item
123     consists. In this document, we only describe how to implement a
124     QStyle subclass. If you wish to add support for other datatypes
125     than those supported by the QStyledItemDelegate, you need to
126     implement a custom delegate. Note that delegates must be set
127     programmatically for each individual widget (i.e., default
128     delegates cannot be provided as plugins).
129
130     \section2 The Style Elements
131
132     A style element is a graphical part of a GUI. A widget consists
133     of a hierarchy (or tree) of style elements. For instance, when a
134     style receives a request to draw a push button (from QPushButton,
135     for example), it draws a label (text and icon), a button bevel,
136     and a focus frame. The button bevel, in turn, consists of a frame
137     around the bevel and two other elements, which we will look at
138     later. Below is a conceptual illustration of the push button
139     element tree. We will see the actual tree for QPushButton when we
140     go through the individual widgets.
141
142     \image javastyle/conceptualpushbuttontree.png
143
144     Widgets are not necessarily drawn by asking the style to draw
145     only one element. Widgets can make several calls to the style to
146     draw different elements. An example is QTabWidget, which draws its
147     tabs and frame individually.
148
149     There are three element types: primitive elements, control
150     elements, and complex control elements. The elements are defined
151     by the \l{QStyle::}{ComplexControl}, \l{QStyle::}{ControlElement},
152     and \l{QStyle::}{PrimitiveElement} enums. The values of
153     each element enum has a prefix to identify their type: \c{CC_} for
154     complex elements, \c{CE_} for control elements, and \c{PE_} for
155     primitive elements. We will in the following three sections see what
156     defines the different elements and see examples of widgets that use
157     them.
158
159     The QStyle class description contains a list of these elements and
160     their roles in styling widgets. We will see how they are used when
161     we style individual widgets.
162
163     \section3 Primitive Elements
164
165     Primitive elements are GUI elements that are common and often used
166     by several widgets. Examples of these are frames, button bevels,
167     and arrows for spin boxes, scroll bars, and combo boxes.
168     Primitive elements cannot exist on their own: they are always part
169     of a larger construct. They take no part in the interaction with
170     the user, but are passive decorations in the GUI.
171
172     \section3 Control Elements
173
174     A control element performs an action or displays information
175     to the user. Examples of control elements are push buttons, check
176     boxes, and header sections in tables and tree views. Control
177     elements are not necessarily complete widgets such as push
178     buttons, but can also be widget parts such as tab bar tabs and
179     scroll bar sliders. They differ from primitive elements in that
180     they are not passive, but fill a function in the interaction with
181     the user. Controls that consist of several elements often use the
182     style to calculate the bounding rectangles of the elements. The
183     available sub elements are defined by the \l{QStyle::}{SubElement}
184     enum. This enum is only used for calculating bounding rectangles,
185     and sub elements are as such not graphical elements to be drawn
186     like primitive, control, and complex elements.
187
188     \section3 Complex Control Elements
189
190     Complex control elements contain sub controls. Complex controls
191     behave differently depending on where the user handles them with
192     the mouse and which keyboard keys are pressed. This is dependent
193     on which sub control (if any) that the mouse is over or received a
194     mouse press. Examples of complex controls are scroll bars and
195     combo boxes. With a scroll bar, you can use the mouse to move the
196     slider and press the line up and line down buttons. The available
197     sub controls are defined by the \l{QStyle}{SubControl} enum.
198
199     In addition to drawing, the style needs to provide the widgets
200     with information on which sub control (if any) a mouse press was
201     made on. For instance, a QScrollBar needs to know if the user
202     pressed the slider, the slider groove, or one of the buttons.
203
204     Note that sub controls are not the same as the control elements
205     described in the previous section. You cannot use the style to
206     draw a sub control; the style will only calculate the bounding
207     rectangle in which the sub control should be drawn. It is common,
208     though, that complex elements use control and primitive elements
209     to draw their sub controls, which is an approach that is
210     frequently used by the built-in styles in Qt and also the Java
211     style. For instance, the Java style uses PE_IndicatorCheckBox to
212     draw the check box in group boxes (which is a sub control of
213     CC_GroupBox). Some sub controls have an equivalent control element,
214     e.g., the scroll bar slider (SC_SCrollBarSlider and
215     CE_ScrollBarSlider).
216
217     \section3 Other QStyle Tasks
218
219     The style elements and widgets, as mentioned, use the style to
220     calculate bounding rectangles of sub elements and sub controls,
221     and pixel metrics, which is a style dependent size in screen
222     pixels, for measures when drawing. The available rectangles and
223     pixel metrics are represented by three enums in QStyle:
224     \l{QStyle::}{SubElement}, \l{QStyle::}{SubControl}, and
225     \l{QStyle::}{PixelMetric}. Values of the enums can easily by
226     identified as they start with SE_, SC_ and PM_.
227
228     The style also contain a set of style hints, which is
229     represented as values in the \l{QStyle::}{StyleHint} enum. All
230     widgets do not have the same functionality and look in the
231     different styles. For instance, when the menu items in a menu do not
232     fit in a single column on the screen, some styles support
233     scrolling while others draw more than one column to fit all items.
234
235     A style usually has a set of standard images (such as a warning, a
236     question, and an error image) for message boxes, file dialogs,
237     etc. QStyle provides the \l{QStyle::}{StandardPixmap} enum. Its
238     values represent the standard images. Qt's widgets use these, so
239     when you implement a custom style you should supply the images
240     used by the style that is being implemented.
241
242     The style calculates the spacing between widgets in layouts. There
243     are two ways the style can handle these calculations. You can set
244     the PM_LayoutHorizontalSpacing and PM_LayoutVerticalSpacing, which
245     is the way the java style does it (through QCommonStyle).
246     Alternatively, you can implement QStyle::layoutSpacing() and
247     QStyle::layoutSpacingImplementation() if you need more control over 
248     this part of the layout. In these functions you can calculate the
249     spacing based on control types (QSizePolicy::ControlType) for
250     different size policies (QSizePolicy::Policy) and also the style
251     option for the widget in question.
252
253     \section2 Style Options
254
255     The sub-classes of QStyleOption contain all information necessary
256     to style the individual elements. Style options are instantiated - 
257     usually on the stack - and filled out by the caller of the QStyle
258     function. Depending on what is drawn the style will expect
259     different a different style option class. For example, the
260     QStyle::PE_FrameFocusRect element expects a QStyleOptionFocusRect
261     argument, and it's possible to create custom subclasses that a
262     custom style can use. The style options keep public variables
263     for performance reasons.
264
265     The widgets can be in a number of different states, which are
266     defined by the \l{QStyle::}{State} enum. Some of the state flags have
267     different meanings depending on the widget, but others are common
268     for all widgets like State_Disabled. It is QStyleOption that sets
269     the common states with QStyleOption::initFrom(); the rest of the
270     states are set by the individual widgets.
271
272     Most notably, the style options contain the palette and bounding
273     rectangles of the widgets to be drawn. Most widgets have
274     specialized style options. QPushButton and QCheckBox, for
275     instance, use QStyleOptionButton as style option, which contain
276     the text, icon, and the size of their icon. The exact contents of
277     all options are described when we go through individual widgets.
278
279     When reimplementing QStyle functions that take a
280     QStyleOption parameter, you often need to cast the
281     QStyleOption to a subclass (e.g., QStyleOptionFocusRect). For
282     safety, you can use qstyleoption_cast() to ensure that the
283     pointer type is correct. If the object isn't of the right type,
284     qstyleoption_cast() returns 0. For example:
285
286     \snippet doc/src/snippets/code/doc_src_qt4-styles.cpp 0
287
288     The following code snippet illustrates how to use QStyle to
289     draw the focus rectangle from a custom widget's paintEvent():
290
291     \snippet doc/src/snippets/code/doc_src_qt4-styles.cpp 1
292
293     The next example shows how to derive from an existing style to
294     customize the look of a graphical element:
295
296     \snippet doc/src/snippets/customstyle/customstyle.h 0
297     \codeline
298     \snippet doc/src/snippets/customstyle/customstyle.cpp 2
299     \snippet doc/src/snippets/customstyle/customstyle.cpp 3
300     \snippet doc/src/snippets/customstyle/customstyle.cpp 4
301
302     \section2 QStyle Functions
303
304     The QStyle class defines three functions for drawing the primitive,
305     control, and complex elements:
306     \l{QStyle::}{drawPrimitive()},
307     \l{QStyle::}{drawControl()}, and
308     \l{QStyle::}{drawComplexControl()}. The functions takes the
309     following parameters:
310
311     \list
312         \o the enum value of the element to draw
313         \o a QStyleOption which contains the information needed to
314            draw the element.
315         \o a QPainter with which to draw the element.
316         \o a pointer to a QWidget, typically the widget
317            that the element is painted on.
318     \endlist
319
320     Not all widgets send a pointer to themselves. If the style
321     option sent to the function does not contain the information you
322     need, you should check the widget implementation to see if it
323     sends a pointer to itself.
324
325     The QStyle class also provides helper functions that are used
326     when drawing the elements. The \l{QStyle::}{drawItemText()}
327     function draws text within a specified rectangle and taking a
328     QPalette as a parameter. The \l{QStyle::}{drawItemPixmap()}
329     function helps to align a pixmap within a specified bounding
330     rectangle.
331
332     Other QStyle functions do various calculations for the
333     functions that draw. The widgets also use these functions for
334     calculating size hints and also for bounding rectangle
335     calculations if they draw several style elements themselves.
336     As with the functions that draw elements the helper functions
337     typically takes the same arguments.
338
339     \list
340         \o The \l{QStyle::}{subElementRect()} function takes a
341         \l{QStyle::}{SubElement} enum value, and calculates a bounding
342         rectangle for a sub element. The style uses this function to
343         know where to draw the different parts of an element. This is
344         mainly done for reuse. If you create a new style, you can use
345         the same location of sub elements as the super class.
346
347         \o The \l{QStyle::}{subControlRect()} function is used to
348         calculate bounding rectangles for sub controls in complex
349         controls. When you implement a new style, you reimplement \c
350         subControlRect() and calculate the rectangles that are different
351         from the super class.
352
353         \o The \l{QStyle::}{pixelMetric()} function returns a pixel
354         metric, which is a style dependent size given in screen
355         pixels. It takes a value of the \l{QStyle::}{PixelMetric} enum
356         and returns the correct measure. Note that pixel metrics do
357         not necessarily have to be static measures, but can be
358         calculated with, for example, the style option.
359
360         \o The \l{QStyle::}{hitTestComplexControl()} function returns the
361         sub control that the mouse pointer is over in a complex control.
362         Usually, this is simply a matter of using
363         \l{QStyle::}{subControlRect()} to get the bounding rectangles of
364         the sub controls, and see which rectangle contains the position of
365         the cursor.
366     \endlist
367
368     QStyle also have the functions \l{QStyle::}{polish()} and
369     \l{QStyle::}{unpolish()}. All widgets are sent to the \c polish()
370     function before being shown and to \c unpolish() when they
371     are hidden. You can use these functions to set attributes on the
372     widgets or do other work that is required by your style. For
373     instance, if you need to know when the mouse is hovering over the
374     widget, you need to set the \l{Qt::}{WA_Hover} widget attribute.
375     The State_MouseOver state flag will then be set in the widget's
376     style options.
377
378     QStyle has a few static helper functions that do some common and
379     difficult tasks. They can calculate the position of a slider
380     handle from the value of the slider and transform rectangles
381     and draw text considering reverse layouts; see the QStyle
382     class documentation for more details.
383
384     The usual approach when one reimplements QStyle virtual
385     functions is to do work on elements that are different from the
386     super class; for all other elements, you can simply use the super
387     class implementation.
388
389     \section2 The Palette
390
391     Each style provides a color - that is, QBrush - palette that
392     should be used for drawing the widgets. There is one set of colors
393     for the different widget states (QPalette::ColorGroup): active
394     (widgets in the window that has keyboard focus), inactive (widgets
395     used for other windows), and disabled (widgets that are set
396     disabled). The states can be found by querying the State_Active
397     and State_Enabled state flags. Each set contains color certain
398     roles given by the QPalette::ColorRole enum. The roles describe in
399     which situations the colors should be used (e.g., for painting
400     widget backgrounds, text, or buttons).
401
402     How the color roles are used is up to the style. For instance, if
403     the style uses gradients, one can use a palette color and make it
404     darker or lighter with QColor::darker() and QColor::lighter() to
405     create the gradient. In general, if you need a brush that is not
406     provided by the palette, you should try to derive it from one.
407
408     QPalette, which provides the palette, stores colors for
409     different widget states and color roles. The palette for a style
410     is returned by \l{QStyle::}{standardPalette()}. The standard
411     palette is not installed automatically when a new style is set
412     on the application (QApplication::setStyle()) or widget
413     (QWidget::setStyle()), so you must set the palette yourself
414     with (QApplication::setPalette()) or (QWidget::setPalette()).
415
416     It is not recommended to hard code colors as applications and
417     individual widgets can set their own palette and also use the
418     styles palette for drawing. Note that none of Qt's widgets set
419     their own palette. The java style does hard code some colors, but
420     its author looks past this in silence. Of course, it is not
421     intended that the style should look good with any palette.
422
423     \section2 Implementation Issues
424
425     When you implement styles, there are several issues to
426     consider. We will give some hints and advice on implementation
427     here.
428
429     When implementing styles, it is necessary to look through the
430     code of the widgets and code of the base class and its ancestors.
431     This is because the widgets use the style differently, because the
432     implementation in the different styles virtual functions can
433     affect the state of the drawing (e.g., by altering the QPainter
434     state without restoring it and drawing some elements without using
435     the appropriate pixel metrics and sub elements).
436
437     It is recommended that the styles do not alter the proposed size
438     of widgets with the QStyle::sizeFromContents() function but let
439     the QCommonStyle implementation handle it. If changes need to be
440     made, you should try to keep them small; application development
441     may be difficult if the layout of widgets looks considerably
442     different in the various styles.
443
444     We recommend using the QPainter directly for drawing, i.e., not
445     use pixmaps or images. This makes it easier for the style conform
446     to the palette (although you can set your own color table on a
447     QImage with \l{QImage::}{setColorTable()}).
448
449     It is, naturally, possible to draw elements without using the
450     style to draw the sub elements as intended by Qt. This is
451     discouraged as custom widgets may depend on these sub elements to
452     be implemented correctly. The widget walkthrough shows how Qt
453     uses the sub elements.
454
455     \section1 Java Style
456
457     We have implemented a style that resembles the Java default look
458     and feel (previously known as Metal). We have done this as it is
459     relatively simple to implement and we wanted to build a style for
460     this overview document. To keep it simple and not to extensive, we
461     have simplified the style somewhat, but Qt is perfectly able to
462     make an exact copy of the style. However, there are no concrete
463     plans to implement the style as a part of Qt.
464
465     In this section we will have a look at some implementation
466     issues. Finally, we will see a complete example on the styling of
467     a Java widget. We will continue to use the java style
468     throughout the document for examples and widget images. The
469     implementation itself is somewhat involved, and it is not
470     intended that you should read through it.
471
472     \section2 Design and Implementation
473
474     The first step in designing the style was to select the base
475     class. We chose to subclass QWindowsStyle. This class implements
476     most of the functionality we need other than performing the actual
477     drawing. Also, windows and java share layout of sub controls for
478     several of the complex controls (which reduces the amount of code
479     required considerably).
480
481     The style is implemented in one class. We have done this
482     because we find it convenient to keep all code in one file. Also,
483     it is an advantage with regards to optimization as we instantiate
484     less objects. We also keep the number of functions at a minimum by
485     using switches to identify which element to draw in the functions.
486     This results in large functions, but since we divide the code for
487     each element in the switches, the code should still be easy to
488     read.
489
490     \section2 Limitations and Differences from Java
491
492     We have not fully implemented every element in the Java style.
493     This way, we have reduced the amount and complexity of the code.
494     In general, the style was intended as a practical example for
495     this style overview document, and not to be a part of Qt
496     itself.
497
498     Not all widgets have every state implemented. This goes for
499     states that are common, e.g., State_Disabled. Each state is,
500     however, implemented for at least one widget.
501
502     We have only implemented ticks below the slider. Flat push
503     buttons are also left out. We do not handle the case where the
504     title bars and dock window titles grows to small for their
505     contents, but simply draw sub controls over each other.
506
507     We have not tried to emulate the Java fonts. Java and Qt use very
508     different font engines, so we don't consider it worth the effort
509     as we only use the style as an example for this overview.
510
511     We have hardcoded the colors (we don't use the QPalette) for
512     the linear gradients, which are used, for example, for button
513     bevels, tool bars, and check boxes. This is because the Java
514     palette cannot produce these colors. Java does not change these
515     colors based on widget color group or role anyway (they are not
516     dependent on the palette), so it does not present a problem in any
517     case.
518
519     It is Qt's widgets that are styled. Some widgets do not exist
520     at all in Java, e.g., QToolBox. Others contain elements that the
521     Java widgets don't. The tree widget is an example of the latter in
522     which Java's JTree does not have a header.
523
524     The style does not handle reverse layouts. We assume that the
525     layout direction is left to right. QWindowsStyle handles reverse
526     widgets; if we implemented reverse layouts, widgets that we change
527     the position of sub elements, or handle text alignment in labels
528     our selves would need to be updated.
529
530     \section2 Styling Java Check Boxes
531
532     As an example, we will examine the styling of check boxes in the
533     java style. We describe the complete process and print all code in
534     both the java style and Qt classes involved. In the rest of this
535     document, we will not examine the source code of the individual
536     widgets. Hopefully, this will give you an idea on how to search
537     through the code if you need to check specific implementation
538     details; most widgets follow the same structure as the check
539     boxes. We have edited the QCommonStyle code somewhat to remove
540     code that is not directly relevant for check box styling.
541  
542     We start with a look at how QCheckBox builds it style option,
543     which is QStyleOptionButton for checkboxes:
544
545     \snippet doc/src/snippets/code/doc_src_styles.cpp 0
546
547     First we let QStyleOption set up the option with the information
548     that is common for all widgets with \c initFrom().  We will look at
549     this shortly.
550
551     The down boolean is true when the user press the box down; this is
552     true whether the box is checked or not of the checkbox.  The
553     State_NoChange state is set when we have a tristate checkbox and
554     it is partially checked. It has State_On if the box is checked and
555     State_Off if it is unchecked. State_MouseOver is set if the mouse
556     hovers over the checkbox and the widget has attribute Qt::WA_Hover
557     set - you set this in QStyle::polish(). In addition, the style
558     option also contains the text, icon, and icon size of the button.
559
560     \l{QStyleOption::}{initFrom()} sets up the style option with the
561     attributes that are common for all widgets. We print its
562     implementation here:
563
564     \snippet doc/src/snippets/code/doc_src_styles.cpp 1
565
566     The State_Enabled is set when the widget is enabled. When the
567     widget has focus the State_HasFocus flag is set. Equally, the
568     State_Active flag is set when the widget is a child of the active
569     window. The State_MouseOver will only be set if the widget has
570     the WA_HoverEnabled windows flag set. Notice that keypad
571     navigation must be enabled in Qt for the State_HasEditFocus to
572     be included; it is not included by default.
573
574     In addition to setting state flags the QStyleOption contains
575     other information about the widget: \c direction is the layout
576     direction of the layout, \c rect is the bounding rectangle of the
577     widget (the area in which to draw), \c palette is the QPalette
578     that should be used for drawing the widget, and \c fontMetrics is
579     the metrics of the font that is used by the widget.
580
581     We give an image of a checkbox and the style option to match
582     it.
583
584     \image javastyle/checkboxexample.png A java style checkbox
585
586     The above checkbox will have the following state flags in its
587     style option:
588
589     \table 90%
590     \header
591         \o State flag
592         \o Set
593     \row
594         \o State_Sunken
595         \o Yes
596     \row
597         \o State_NoChange
598         \o No
599     \row
600         \o State_On
601         \o Yes
602     \row
603         \o State_Off
604         \o No
605     \row
606         \o State_MouseOver
607         \o Yes
608     \row
609         \o State_Enabled
610         \o Yes
611     \row
612         \o State_HasFocus
613         \o Yes
614     \row
615         \o State_KeyboardFocusChange
616         \o No
617     \row
618         \o State_Active
619         \o Yes
620     \endtable
621
622     The QCheckBox paints itself in QWidget::paintEvent() with
623     style option \c opt and QStylePainter \c p. The QStylePainter
624     class is a convenience class to draw style elements. Most
625     notably, it wraps the methods in QStyle used for painting. The
626     QCheckBox draws itself as follows:
627
628     \snippet doc/src/snippets/code/doc_src_styles.cpp 2
629
630     QCommonStyle handles the CE_CheckBox element. The QCheckBox
631     has two sub elements: SE_CheckBoxIndicator (the checked indicator)
632     and SE_CheckBoxContents (the contents, which is used for the
633     checkbox label). QCommonStyle also implements these sub element
634     bounding rectangles. We have a look at the QCommonStyle code:
635
636     \snippet doc/src/snippets/code/doc_src_styles.cpp 3
637
638     As can be seen from the code extract, the common style gets
639     the bounding rectangles of the two sub elements of
640     CE_CheckBox, and then draws them. If the checkbox has focus,
641     the focus frame is also drawn.
642
643     The java style draws CE_CheckBoxIndicator, while QCommonStyle
644     handles CE_CheckboxLabel. We will examine each implementation and
645     start with CE_CheckBoxLabel:
646
647     \snippet doc/src/snippets/code/doc_src_styles.cpp 4
648
649     \l{QStyle::}{visualAlignment()} adjusts the alignment of text
650     according to the layout direction. We then draw an icon if it
651     exists, and adjust the space left for the text.
652     \l{QStyle::}{drawItemText()} draws the text taking alignment,
653     layout direction, and the mnemonic into account. It also uses the
654     palette to draw the text in the right color.
655
656     The drawing of labels often get somewhat involved. Luckily, it
657     can usually be handled by the base class. The java style
658     implements its own push button label since Java-contrary to
659     windows-center button contents also when the button has an icon.
660     You can examine that implementation if you need an example of
661     reimplementing label drawing.
662
663     We take a look at the java implementation
664     of CE_CheckBoxIndicator in \c drawControl():
665
666     \snippet doc/src/snippets/javastyle.cpp 0
667
668     We first save the state of the painter. This is not always
669     necessary but in this case the QWindowsStyle needs the painter in
670     the same state as it was when PE_IndicatorCheckBox was called (We
671     could also set the state with function calls, of course). We then
672     use \c drawButtonBackground() to draw the background of the check
673     box indicator. This is a helper function that draws the background
674     and also the frame of push buttons and check boxes. We take a look
675     at that function below. We then check if the mouse is hovering
676     over the checkbox. If it is, we draw the frame java checkboxes
677     have when the box is not pressed down and the mouse is over it.
678     You may note that java does not handle tristate boxes, so we have
679     not implemented it.
680
681     Here we use a png image for our indicator. We could also check
682     here if the widget is disabled. We would then have to use
683     another image with the indicator in the disabled color.
684
685     \snippet doc/src/snippets/javastyle.cpp 1
686
687     We have seen how check boxes are styled in the java style from the
688     widget gets a paint request to the style is finished painting. To
689     learn in detail how each widget is painted, you need to go through
690     the code step-by-step as we have done here.  However, it is
691     usually enough to know which style elements the widgets draw. The
692     widget builds a style option and calls on the style one or more
693     times to draw the style elements of which it consists. Usually,
694     it is also sufficient to know the states a widget can be in and the
695     other contents of the style option, i.e., what we list in the next
696     section.
697
698     \section1 Widget Walkthrough
699
700     In this section, we will examine how most of Qt's widgets are
701     styled.  Hopefully, this will save you some time and effort while
702     developing your own styles and widgets. You will not find
703     information here that is not attainable elsewhere (i.e., by
704     examining the source code or the class descriptions for the style
705     related classes).
706
707     We mostly use java style widgets as examples. The java style does not
708     draw every element in the element trees. This is because they are
709     not visible for that widget in the java style. We still make sure
710     that all elements are implemented in a way that conforms with the
711     java style as custom widgets might need them (this does not
712     exclude leaving implementations to QWindowsStyle though).
713
714     The following is given for each widget:
715
716     \list
717         \o A table with the members (variables, etc.) of its style option.
718         \o A table over the state flags (QStyle::StateFlag) that
719            can be set on the widget and when the states are set.
720         \o Its element tree (see section \l{The Style Elements}).
721         \o An image of the widget in which the elements are outlined.
722         \omit This is not written yet - probably never will be
723               either
724         \o List of style hints that should be checked for the
725            widget.
726         \o List of standard pixmaps that could be used by the
727            elements.
728         \endomit
729     \endlist
730
731     The element tree contains the primitive, control, and complex
732     style elements. By doing a top-down traversal of the element tree,
733     you get the sequence in which the elements should be drawn. In the
734     nodes, we have written the sub element rectangles, sub control
735     elements, and pixel metrics that should be considered when drawing
736     the element of the node.
737
738     Our approach on styling center on the drawing of the widgets. The
739     calculations of sub elements rectangles, sub controls, and pixel
740     metrics used \bold during drawing is only listed as contents in
741     the element trees. Note that there are rectangles and pixel
742     metrics that are only used by widgets. This leaves these
743     calculations untreated in the walkthrough. For instance, the
744     \l{QStyle::}{subControlRect()} and
745     \l{QStyle::}{sizeFromContents()} functions often call
746     \l{QStyle::}{subElementRect()} to calculate their bounding
747     rectangles. We could draw trees for this as well. However, how
748     these calculations are done is completely up to the individual
749     styles, and they do not have to follow a specific structure (Qt
750     does not impose a specific structure). You should still make sure
751     that you use the appropriate pixel metrics, though. To limit the
752     size of the document, we have therefore chosen not to include
753     trees or describe the calculations made by the Java (or any other)
754     style.
755
756     You may be confused about how the different pixel metrics, sub
757     element rectangles, and sub control rectangles should be used when
758     examining the trees. If you are in doubt after reading the QStyle
759     enum descriptions, we suggest that you examine the QCommonStyle
760     and QWindowsStyle implementations.
761
762     Some of the bounding rectangles that we outline in the widget
763     images are equal. Reasons for this are that some elements draw
764     backgrounds while others draw frames and labels. If in doubt,
765     check the description of each element in QStyle. Also, some
766     elements are there to layout, i.e., decide where to draw, other
767     elements.
768
769     \section2 Common Widget Properties
770
771     Some states and variables are common for all widgets. These are
772     set with QStyleOption::initFrom(). Not all elements use this function;
773     it is the widgets that create the style options, and for some
774     elements the information from \l{QStyleOption::}{initFrom()} is not
775     necessary.
776
777     A table with the common states follows:
778
779     \table 90%
780         \header
781             \o State
782             \o State Set When
783         \row
784             \o State_Enabled
785             \o Set if the widget is not disabled (see
786                QWidget::setEnabled())
787         \row
788             \o State_Focus
789             \o Set if the widget has focus (see
790                QWidget::hasFocus())
791         \row
792             \o State_KeyobordFocusChange
793             \o Set when the user changes focus with the keyboard
794                (see Qt::WA_KeyboardFocusChange)
795         \row
796             \o State_MouseOver
797             \o Set if the mouse cursor is over the widget
798         \row
799             \o State_Active
800             \o Set if the widget is a child of the active window.
801         \row
802             \o State_HasEditFocus
803             \o Set if the widget has the edit focus
804     \endtable
805
806     The other common members for widgets are:
807
808     \table 90%
809         \header
810             \o Member
811             \o Content
812         \row
813             \o rect
814             \o The bounding rectangle of the element to draw. This
815                is set to the widget bounding rectangle
816                (QWidget::rect()).
817         \row
818             \o direction
819             \o The layout direction; a value of the
820                Qt::LayoutDirection enum.
821         \row
822             \o palette
823             \o The QPalette to use when drawing the element. This
824                is set to the widgets palette (QWidget::palette()).
825         \row
826             \o fontMetrics
827             \o The QFontMetrics to use when drawing text on the
828                widget.
829     \endtable
830
831     The complex style options (classes that inherit
832     QStyleOptionComplex) used for complex style elements share two
833     variables: \l{QStyleOptionComplex::}{subControls} and
834     \l{QStyleOptionComplex::}{activeSubControls}. Both variables are
835     an OR'ed combination of QStyle::SubControl enum values. They
836     indicate which sub controls the complex control consists of and
837     which of these controls are currently active.
838
839     As mentioned, the style calculates the size of the widgets
840     contents, which the widgets calculate their size hints from. In
841     addition, complex controls also use the style to test which
842     sub-controls the mouse is over. 
843
844     \section2 Widget Reference
845
846     Without further delay, we present the widget walkthrough; each
847     widget has its own sub-section.
848
849     \section3 Push Buttons
850
851     The style structure for push buttons is shown below. By doing a
852     top-down traversal of the tree, you get the sequence in which the
853     elements should be drawn.
854
855     \image javastyle/pushbutton.png The style structure for push buttons
856
857     The layout of the buttons, with regard element bounds, varies from
858     style to style. This makes it difficult to show conceptual images
859     of this. Also, elements may - even be intended to - have the same
860     bounds; the PE_PushButtonBevel, for instance, is used in
861     QCommonStyle to draw the elements that contains it:
862     PE_FrameDefaultButton, PE_FrameButtonBevel, and
863     PE_PanelButtonCommand, all of which have the same bounds in common
864     and windows style.  PE_PushButtonBevel is also responsible for
865     drawing the menu indicator (QCommonStyle draws
866     PE_IndicatorArrowDown).
867
868     An image of a push button in the java style that show the bounding
869     rectangles of the elements is given below. Colors are used to
870     separate the bounding rectangles in the image; they do not fill
871     any other purpose. This is also true for similar images for the
872     other widgets.
873
874     \image javastyle/button.png
875
876     The java style, as well as all other styles implemented in Qt,
877     does not use PE_FrameButtonBevel. It is usual that a button
878     with a PE_DefaultFrame adjusts the PE_PanelButtonCommand's
879     rectangle by PM_ButtonDefaultIndicator. The CE_PushButtonLabel
880     is found by adjusting the rect by PM_DefaultFrameWidth.
881
882     We will now examine the style option for push
883     buttons - QStyleOptionButton. A table for the states that
884     QPushButton can set on the style option follows:
885
886     \table 90%
887         \header
888             \o State
889             \o State Set When
890         \row
891             \o State_Sunken
892             \o Button is down or menu is pressed shown
893         \row
894             \o State_On
895             \o Button is checked
896         \row
897             \o State_Raised
898             \o Button is not flat and not pressed down
899     \endtable
900
901     Other members of QStyleOptionButton is:
902
903     \table 90%
904         \header
905             \o Member
906             \o Content
907         \row
908             \o features
909             \o Flags of the QStyleOptionButton::ButtonFeatures enum,
910                which describes various button properties (see enum)
911         \row
912             \o icon
913             \o The buttons QIcon (if any)
914         \row
915             \o iconSize
916             \o The QSize of the icon
917         \row
918             \o text
919             \o a QString with the buttons text
920     \endtable
921
922     \section3 Check and Radio Buttons
923
924     The structures for radio and check buttons are identical.
925     We show the structure using QCheckBox element and pixel
926     metric names:
927
928     \image javastyle/checkbox.png
929
930     QStyleOptionButton is used as the style option for both check
931     and radio buttons. We first give a table of the states that
932     can be set in the option:
933
934     \table 90%
935         \header
936             \o State
937             \o State Set When
938         \row
939             \o State_sunken
940             \o The box is pressed down
941         \row
942             \o State_NoChange
943             \o The box is partially checked (for tristate
944                checkboxes.)
945         \row
946             \o State_On
947             \o The box is checked
948         \row
949             \o State_Off
950             \o The box is unchecked
951     \endtable
952
953     See \l{Push Buttons} for a table over other members in the
954     QStyleOptionButtonClass.
955
956     \section3 Tabs
957
958     In Qt, QTabBar uses the style to draw its tabs. Tabs exist either
959     in a QTabWidget, which contains a QTabBar, or as a separate bar.
960     If the bar is not part of a tab widget, it draws its own base.
961
962     QTabBar lays out the tabs, so the style does not have control over
963     tab placement. However, while laying out its tabs, the bar asks
964     the style for PM_TabBarTabHSpace and PM_TabBarTabVSpace, which is
965     extra width and height over the minimum size of the tab bar tab
966     label (icon and text). The style can also further influence the
967     tab size before it is laid out, as the tab bar asks for
968     CT_TabBarTab. The bounding rectangle of the bar is decided by the
969     tab widget when it is part of the widget (still considering
970     CT_TabBarTab).
971
972     The tab bar is responsible for drawing the buttons that appear on
973     the tab bar when all tabs do not fit. Their placement is not
974     controlled by the style, but the buttons are \l{QToolButton}s
975     and are therefore drawn by the style.
976
977     Here is the style structure for QTabWidget and QTabBar:
978
979     \image javastyle/tab.png
980
981     The dotted lines indicate that the QTabWidget contains a tab bar,
982     but does not draw it itself, that QTabBar only draws its base line
983     when not part of a tab widget, and that the tab bar keeps two tool
984     buttons that scroll the bar when all tabs do not fit; see \l{Tool
985     Buttons} for their element tree. Also note that since the buttons
986     are children of the tab bar, they are drawn after the bar. The
987     tabs bounding rectangles overlap the base by PM_TabBarBaseOverlap.
988
989     Here is a tab widget in the java style:
990
991     \image javastyle/tabwidget.png
992
993     In the java style (and also windows), the tab bar shape and label
994     have the same bounding rectangle as CE_TabBarTab. Notice that the
995     tabs overlap with the tab widget frame. The base of the tab bar
996     (if drawn) is the area where the tabs and frame overlap.
997
998     The style option for tabs (QStyleOptionTab) contains the necessary
999     information for drawing tabs. The option contains the position of
1000     the tab in the tab bar, the position of the selected tab, the
1001     shape of the tab, the text, and icon. After Qt 4.1 the option
1002     should be cast to a QStyleOptionTabV2, which also contains the
1003     icons size.
1004
1005     As the java style tabs don't overlap, we also present an image of
1006     a tab widget in the windows style. Note that if you want the tabs
1007     to overlap horizontally, you do that when drawing the tabs in
1008     CE_TabBarTabShape; the tabs bounding rectangles will not be
1009     altered by the tab bar. The tabs are drawn from left to right in a
1010     north tab bar shape, top to bottom in an east tab bar shape, etc.
1011     The selected tab is drawn last, so that it is easy to draw it over
1012     the other tabs (if it is to be bigger).
1013
1014     \image javastyle/windowstabimage.png
1015
1016     A table of the states a tab bar can set on its tabs follows:
1017
1018     \table 90%
1019         \header
1020             \o State
1021             \o State Set When
1022         \row
1023             \o State_Sunken
1024             \o The tab is pressed on with the mouse.
1025         \row
1026             \o State_Selected
1027             \o If it is the current tab.
1028         \row
1029             \o State_HasFocus
1030             \o The tab bar has focus and the tab is selected
1031     \endtable
1032
1033     Note that individual tabs may be disabled even if the tab bar
1034     is not. The tab will be active if the tab bar is active.
1035
1036     Here follows a table of QStyleOptionTabV2's members:
1037
1038     \table 90%
1039         \header
1040             \o Member
1041             \o Content
1042         \row
1043             \o cornerWidgets
1044             \o Is flags of the CornerWidget enum, which indicate
1045                if and which corner widgets the tab bar has.
1046         \row
1047             \o icon
1048             \o The QIcon of the tab
1049         \row
1050             \o iconSize
1051             \o The QSize of the icon
1052         \row
1053             \o position
1054             \o A TabPosition enum value that indicates the tabs
1055                position on the bar relative to the other tabs.
1056         \row
1057             \o row
1058             \o holds which row the tab is in
1059         \row
1060             \o selectedPosition
1061             \o A value of the SelectedPosition enum that indicates
1062                whether the selected tab is adjacent to or is the
1063                tab.
1064         \row
1065             \o shape
1066             \o A value of the QTabBar::Shape enum indication
1067                whether the tab has rounded or triangular corners
1068                and the orientation of the tab.
1069         \row
1070             \o text
1071             \o The tab text
1072     \endtable
1073
1074     The frame for tab widgets use QStyleOptionTabWidgetFrame as
1075     style option. We list its members here. It does not have
1076     states set besides the common flags.
1077
1078     \table 90%
1079         \header
1080             \o Member
1081             \o content
1082         \row
1083             \o leftCornerWidgetSize
1084             \o The QSize of the left corner widget (if any).
1085         \row
1086             \o rightCornerWidgetSize
1087             \o The QSize of the right corner widget (if any).
1088         \row
1089             \o lineWidth
1090             \o holds the line with for drawing the panel.
1091         \row
1092             \o midLineWith
1093             \o this value is currently always 0.
1094         \row
1095             \o shape
1096             \o The shape of the tabs on the tab bar.
1097         \row
1098             \o tabBarSize
1099             \o The QSize of the tab bar.
1100     \endtable
1101
1102     \section3 Scroll Bars
1103
1104     Here is the style structure for scrollBars:
1105
1106     \image javastyle/scrollbar.png
1107
1108     QScrollBar simply creates its style option and then draws
1109     CC_ScrollBar. Some styles draw the background of add page and sub
1110     page with PE_PanelButtonBevel and also use indicator arrows to
1111     draw the arrows in the nest and previous line indicators; we have
1112     not included these in the tree as their use is up to the
1113     individual style. The style's PM_MaximumDragDistance is the
1114     maximum distance in pixels the mouse can move from the bounds
1115     of the scroll bar and still move the handle.
1116
1117     Here is an image of a scrollbar in the java style:
1118
1119     \image javastyle/scrollbarimage.png
1120
1121     You may notice that the scrollbar is slightly different from
1122     Java's as it has two line up indicators. We have done this to show
1123     how that you can have two separate bounding rectangles for a
1124     single sub control. The scroll bar is an example of a widget that
1125     is entirely implemented by the java style - neither QWindowsStyle
1126     nor QCommonStyle are involved in the drawing.
1127
1128     We have a look at the different states a scroll bar can set on
1129     the style option:
1130
1131     \table 90%
1132         \header
1133             \o State
1134             \o State Set When
1135         \row
1136             \o State_Horizontal
1137             \o The scroll bar is horizontal
1138     \endtable
1139
1140     The style option of QScrollBar is QStyleOptionSlider. Its
1141     members are listed in the following table. The option is used
1142     by all \l{QAbstractSlider}s; we only describe the members
1143     relevant for scroll bars here.
1144
1145     \table 90%
1146         \header
1147             \o Member
1148             \o Content
1149         \row
1150             \o maximum
1151             \o the maximum value of the scroll bar
1152         \row
1153             \o minimum
1154             \o the minimum value of the scroll bar
1155         \row
1156             \o notchTarget
1157             \o the number of pixels between notches
1158         \row
1159             \o orientation
1160             \o a value of the Qt::Orientation enum that specifies
1161                whether the scroll bar is vertical or horizontal
1162         \row
1163             \o pageStep
1164             \o the number to increase or decrease the sliders
1165                value (relative to the size of the slider and its value
1166                range) on page steps.
1167         \row
1168             \o singleStep
1169             \o the number to increase or decrease the sliders
1170                value on single (or line) steps
1171         \row
1172             \o sliderValue
1173             \o The value of the slider
1174         \row
1175             \o sliderPosition
1176             \o the position of the slider handle. This is the same
1177                as \c sliderValue if the scroll bar is
1178                QAbstractSlider::tracking. If not, the scroll
1179                bar does not update its value before the mouse
1180                releases the handle.
1181         \row
1182             \o upsideDown
1183             \o holds the direction in which the scroll bar
1184                increases its value. This is used instead of
1185                QStyleOption::direction for all abstract sliders.
1186     \endtable
1187
1188     \section3 Sliders
1189
1190     When calculating the sliders size hint, PM_SliderTickness and
1191     PM_SliderLength is queried from the style. As with scroll bars,
1192     the QSlider only lets the user move the handle if the mouse is
1193     within PM_MaximumDragDistance from the slider bounds. When it
1194     draws itself it creates the style option and calls \c
1195     drawComplexControl() with CC_Slider:
1196
1197     \image javastyle/slider.png
1198
1199     We also show a picture of a slider in the java style. We show
1200     the bounding rectangles of the sub elements as all drawing is done
1201     in CC_Slider.
1202
1203     \image javastyle/sliderimage.png
1204
1205     QSlider uses QStyleOptionSlider as all \l{QAbstractSlider}s do. We
1206     present a table with the members that affect QSlider:
1207
1208     \table 90%
1209         \header
1210             \o Member
1211             \o Content
1212         \row
1213             \o maximum
1214             \o the maximum value of the slider
1215         \row
1216             \o minimum
1217             \o the minimum value of the slider
1218         \row
1219             \o notchTarget
1220             \o this is the number of pixels between each notch
1221         \row
1222             \o orientation
1223             \o a Qt::Orientation enum value that gives whether the
1224                slider is vertical or horizontal.
1225         \row
1226             \o pageStep
1227             \o a number in slider value to increase or decrease
1228                for page steps
1229         \row
1230             \o singleStep
1231             \o the number to increase or decrease the sliders
1232                value on single (or line) steps.
1233         \row
1234             \o sliderValue
1235             \o the value of the slider.
1236         \row
1237             \o sliderPosition
1238             \o the position of the slider given as a slider value.
1239                This  will be equal to the \c sliderValue if the
1240                slider is \l{QAbstractSlider::}{tracking}; if
1241                not, the sliders value will not change until the handle is
1242                released with the mouse.
1243         \row
1244             \o  upsideDown
1245             \o  this member is used instead of QStyleOption::direction
1246                 for all abstract sliders.
1247     \endtable
1248
1249     You should note that the slider does not use direction for
1250     reverse layouts; it uses \c upsideDown.
1251
1252     \section3 Spin Boxes
1253
1254     When QSpinBox paints itself it creates a QStyleOptionSpinBox and
1255     asks the style to draw CC_SpinBox. The edit field is a line
1256     edit that is a child of the spin box. The dimensions of the
1257     field is calculated by the style with SC_SpinBoxEditField.
1258
1259     Here follows the style tree for spin boxes. It is not
1260     required that a style uses the button panel primitive to paint
1261     the indicator backgrounds. You can see an image below the tree
1262     showing the sub elements in QSpinBox in the java style.
1263
1264     \image javastyle/spinbox.png
1265
1266     \image javastyle/spinboximage.png
1267
1268     The QStyleOptionSpinBox, which is the style option for spin
1269     boxes. It can set the following states on the spin box.:
1270
1271     \table 90%
1272         \header
1273             \o State
1274             \o State Set When
1275         \row
1276             \o State_Sunken
1277             \o Is set if one of the sub controls CC_SpinUp or
1278                CC_SpinDown is pressed on with the mouse.
1279     \endtable
1280
1281     The rest of the members in the spin boxes style options are:
1282
1283     \table 90%
1284         \header
1285             \o Property
1286             \o Function
1287         \row
1288             \o frame
1289             \o boolean that is true if the spin box is to draw a
1290                frame.
1291         \row
1292             \o buttonSymbols
1293             \o Value of the ButtonSymbols enum that decides the
1294                symbol on the up/down buttons.
1295         \row
1296             \o stepEnabled
1297             \o A value of the StepEnabled indication which of the
1298                spin box buttons are pressed down.
1299     \endtable
1300
1301     \section3 Title Bar
1302
1303     The title bar complex control, CC_TitleBar, is used to draw
1304     the title bars of internal windows in QMdiArea. It typically
1305     consists of a window title and close, minimize, system menu, and
1306     maximize buttons. Some styles also provide buttons for shading
1307     the window, and a button for context sensitive help.
1308
1309     The bar is drawn in CC_TitleBar without using any sub elements.
1310     How the individual styles draw their buttons is individual, but
1311     there are standard pixmaps for the buttons that the style should
1312     provide.
1313
1314     \image javastyle/titlebar.png
1315
1316     In an image over a title bar in the java style, we show the
1317     bounding rectangles of the sub elements supported by the java style
1318     (all of which are drawn with standard pixmaps). It is usual to
1319     draw the button backgrounds using PE_PanelButtonTool, but it's no
1320     rule.
1321
1322     \image javastyle/titlebarimage.png
1323
1324     The style option for title bars is QStyleOptionTitleBar. It's
1325     members are:
1326
1327     \table 90%
1328         \header
1329             \o Member
1330             \o Content
1331         \row
1332             \o icon
1333             \o The title bars icon
1334         \row
1335             \o text
1336             \o the text for the title bar's label
1337         \row
1338             \o windowFlags
1339             \o flags of the Qt::WindowFlag enum. The window flags
1340                used by QMdiArea for window management.
1341         \row
1342             \o titleBarState
1343             \o this is the QWidget::windowState() of the window
1344                that contains the title bar.
1345     \endtable
1346
1347     \section3 Combo Box
1348
1349     A QComboBox uses the style to draw the button and label of
1350     non-editable boxes with CC_ComboBox and CE_ComboBoxLabel.
1351
1352     The list that pops up when the user clicks on the combo box is
1353     drawn by a \l{Delegate Classes}{delegate}, which we do not cover
1354     in this overview. You can, however, use the style to control the
1355     list's size and position with the sub element
1356     SC_ComboBoxListBoxPopup. The style also decides where the edit
1357     field for editable boxes should be with SC_ComboBoxEditField; the
1358     field itself is a QLineEdit that is a child of the combo box.
1359
1360     \image javastyle/combobox.png
1361
1362     We show an image over a java style combo box in which we have
1363     outlined its sub elements and sub element rectangles:
1364
1365     \image javastyle/comboboximage.png
1366
1367     Java combo boxes do not use the focus rect; it changes its
1368     background color when it has focus. The SC_ComboBoxEdit field is
1369     used both by QComboBox to calculate the size of the edit field and
1370     the style for calculating the size of the combo box label.
1371
1372     The style option for combo boxes is QStyleOptionComboBox. It
1373     can set the following states:
1374
1375     \table 90%
1376         \header
1377             \o State
1378             \o Set When
1379         \row
1380             \o State_Selected
1381             \o The box is not editable and has focus
1382         \row
1383             \o State_Sunken
1384             \o SC_ComboBoxArrow is active
1385         \row
1386             \o State_on
1387             \o The container (list) of the box is visible
1388     \endtable
1389
1390     The style options other members are:
1391
1392     \table
1393         \header
1394             \o Member
1395             \o Content
1396         \row
1397             \o currentIcon
1398             \o the icon of the current (selected) item of the
1399                combo box.
1400         \row
1401             \o currentText
1402             \o the text of the current item in the box.
1403         \row
1404             \o editable
1405             \o holds whether the combo box is editable or not
1406         \row
1407             \o frame
1408             \o holds whether the combo box has a frame or not
1409         \row
1410             \o iconSize
1411             \o the size of the current items icon.
1412         \row
1413             \o popupRect
1414             \o the bounding rectangle of the combo box's popup
1415                list.
1416     \endtable
1417
1418     \section3 Group Boxes
1419
1420     When calculating the size hint, QGroupBox fetches three pixel
1421     metrics from the style: PM_IndicatorWidth,
1422     PM_CheckBoxLabelSpacing, and PM_IndicatorHeight.  QGroupBox has
1423     the following style element tree:
1424
1425     \image javastyle/groupbox.png
1426
1427     Qt does not impose restrictions on how the check box is drawn; the
1428     java style draws it with CE_IndicatorCheckBox. See \l{Check and
1429     Radio Buttons} for the complete tree.
1430
1431     We also give an image of the widget with the sub controls and
1432     sub control rectangles drawn:
1433
1434     \image javastyle/groupboximage.png
1435
1436     The style option for group boxes are QStyleOptionGroupBox. The
1437     following states can be set on it:
1438
1439     \table 90%
1440         \header
1441             \o State
1442             \o Set When
1443         \row
1444             \o State_On
1445             \o The check box is checked
1446         \row
1447             \o State_Sunken
1448             \o The checkbox is pressed down
1449         \row
1450             \o State_Off
1451             \o The check box is unchecked (or there is no check box)
1452     \endtable
1453
1454     The remaining members of QStyleOptionGroupBox are:
1455
1456     \table
1457         \header
1458             \o Member
1459             \o Content
1460         \row
1461             \o features
1462             \o flags of the QStyleOptionFrameV2::FrameFeatures
1463                enum describing the frame of the group box.
1464         \row
1465             \o lineWidth
1466             \o the line width with which to draw the panel. This
1467                is always 1.
1468         \row
1469             \o text
1470             \o the text of the group box.
1471         \row
1472             \o textAlignment
1473             \o the alignment of the group box title
1474         \row
1475             \o textColor
1476             \o the QColor of the text
1477     \endtable
1478
1479     \section3 Splitters
1480
1481     As the structure of splitters are simple and do not contain any
1482     sub elements, we do not include image of splitters. CE_Splitter
1483     does not use any other elements or metrics.
1484
1485     For its style option, Splitters uses the base class QStyleOption.
1486     It can set the following state flags on it:
1487
1488     \table 90%
1489         \header
1490             \o State
1491             \o Set When
1492         \row
1493             \o State_Horizontal
1494             \o Set if it is a horizontal splitter
1495     \endtable
1496
1497     QSplitter does not use \l{QStyleOption::}{initFrom()} to set up its
1498     option; it sets the State_MouseOver and State_Disabled flags
1499     itself.
1500
1501     \section3 Progress Bar
1502
1503     The CE_ProgressBar element is used by QProgressBar, and it is the
1504     only element used by this widget. We start with looking at the
1505     style structure:
1506
1507     \image javastyle/progressbar.png
1508
1509     Here is a progress bar in the windows style (the java style
1510     bounding rectangles are equal):
1511
1512     \image javastyle/progressbarimage.png
1513
1514     The style option for QProgressBar is QStyleOptionProgressBarV2.
1515     The bar does not set any state flags, but the other members of the
1516     option are:
1517
1518     \table 90%
1519         \header
1520             \o Member
1521             \o Content
1522         \row
1523             \o minimum
1524             \o The minimum value of the bar
1525         \row
1526             \o maximum
1527             \o The maximum value of the bar
1528         \row
1529             \o progress
1530             \o The current value of the bar
1531         \row
1532             \o textAlignment
1533             \o How the text is aligned in the label
1534         \row
1535             \o textVisible
1536             \o Whether the label is drawn
1537         \row
1538             \o text
1539             \o The label text
1540         \row
1541             \o orientation
1542             \o Progress bars can be vertical or horizontal
1543         \row
1544             \o invertedAppearance
1545             \o The progress is inverted (i.e., right to left in a
1546                horizontal bar)
1547         \row
1548             \o bottomToTop
1549             \o Boolean that if true, turns the label of vertical
1550                progress bars 90 degrees.
1551     \endtable
1552
1553     \section3 Tool Buttons
1554
1555     Tool buttons exist either independently or as part of tool bars.
1556     They are drawn equally either way. The QToolButton draws only one
1557     style element: CC_ToolButton.
1558
1559     As you must be used to by now (at least if you have read this
1560     document sequentially), we have a tree of the widget's style
1561     structure:
1562
1563     \image javastyle/toolbutton.png
1564
1565     Note that PE_FrameButtonTool and PE_IndicatorArrowDown are
1566     included in the tree as the java style draws them, but they can
1567     safely be omitted if you prefer it. The structure may also be
1568     different. QWindowsStyle, for instance, draws both
1569     PE_IndicatorButtonDropDown and PE_IndicatorArrowDown in
1570     CE_ToolButton.
1571
1572     We also have an image of a tool button where we have outlined
1573     the sub element bounding rectangles and sub controls.
1574
1575     \image javastyle/toolbuttonimage.png
1576
1577     Here is the states table for tool buttons:
1578
1579     \table 90%
1580         \header
1581             \o State
1582             \o Set When
1583         \row
1584             \o State_AutoRise
1585             \o the tool button has the autoRise property set
1586         \row
1587             \o State_raised
1588             \o the button is not sunken (i.e., by being checked or
1589                pressed on with the mouse).
1590         \row
1591             \o State_Sunken
1592             \o the button is down
1593         \row
1594             \o State_On
1595             \o the button is checkable and checked.
1596     \endtable
1597
1598     QStyleOptionToolButton also contains the following members:
1599
1600     \table
1601         \header
1602             \o Member
1603             \o Content
1604         \row
1605             \o arrowType
1606             \o a Qt::ArrowType enum value, which contains the
1607                  direction of the buttons arrow (if an arrow is to
1608                  be used in place of an icon)
1609         \row
1610             \o features
1611             \o flags of the QStyleOptionToolButton::ButtonFeature
1612                enum describing if the button has an arrow, a menu,
1613                and/or has a popup-delay.
1614         \row
1615             \o font
1616             \o the QFont of the buttons label
1617         \row
1618             \o icon
1619             \o the QIcon of the tool button
1620         \row
1621             \o iconSize
1622             \o the icon size of the button's icon
1623         \row
1624             \o pos
1625             \o the position of the button, as given by
1626                QWidget::pos()
1627         \row
1628             \o text
1629             \o the text of the button
1630         \row
1631             \o toolButtonStyle
1632             \o a Qt::ToolButtonStyle enum value which decides
1633                whether the button shows the icon, the text, or both.
1634     \endtable
1635
1636     \section3 Toolbars
1637
1638     Toolbars are part of the \l{QMainWindow}{main window framework}
1639     and cooperates with the QMainWindow to which it belongs while it
1640     builds its style option. A main window has 4 areas that toolbars
1641     can be placed in. They are positioned next to the four sides of
1642     the window (i.e., north, south, west, and east). Within each area
1643     there can be more than one line of toolbars; a line consists of
1644     toolbars with equal orientation (vertical or horizontal) placed
1645     next to each other.
1646
1647     \l{QToolbar}{QToolbar}s in Qt consists of three elements
1648     CE_ToolBar, PE_IndicatorToolBarHandle, and
1649     PE_IndicatorToolBarSeparator. It is QMainWindowLayout that
1650     calculates the bounding rectangles (i.e., position and size of the
1651     toolbars and their contents. The main window also uses the \c
1652     sizeHint() of the items in the toolbars when calculating the size
1653     of the bars.
1654
1655     Here is the element tree for QToolBar:
1656
1657     \image javastyle/toolbar.png
1658
1659     The dotted lines indicate that the QToolBar keeps an instance of
1660     QToolBarLayout and that QToolBarSeparators are kept by
1661     QToolBarLayout. When the toolbar is floating (i.e., has its own
1662     window) the PE_FrameMenu element is drawn, else QToolbar draws
1663     CE_ToolBar.
1664
1665     Here is an image of a toolbar in the java style:
1666
1667     \image javastyle/toolbarimage.png
1668
1669     QToolBarSaparator uses QStyleOption for their style option. It
1670     sets the State_horizontal flag if the toolbar they live in is
1671     horizontal. Other than that, they use \l{QStyleOption::}{initFrom()}.
1672
1673     The style option for QToolBar is QStyleOptionToolBar. The only
1674     state flag set (besides the common flags) is State_Horizontal
1675     if the bar is horizontal (i.e., in the north or south toolbar area).
1676     The member variables of the style option are:
1677
1678     \table 90%
1679         \header
1680             \o Member
1681             \o Content
1682         \row
1683             \o features
1684             \o Holds whether the bar is movable in a value of the
1685                ToolBarFeature, which is either Movable or None.
1686         \row
1687             \o lineWidth
1688             \o The width of the tool bar frame.
1689         \row
1690             \o midLineWidth
1691             \o This variable is currently not used and is always
1692                0.
1693         \row
1694             \o positionOfLine
1695             \o The position of the toolbar line within the toolbar
1696                area to which it belongs.
1697         \row
1698             \o positionWithinLine
1699             \o The position of the toolbar within the toolbar line.
1700         \row
1701             \o toolBarArea
1702             \o The toolbar area in which the toolbar lives.
1703     \endtable
1704
1705     \section3 Menus
1706
1707     Menus in Qt are implemented in QMenu. The QMenu keeps a list of
1708     action, which it draws as menu items. When QMenu receives paint
1709     events ,it calculates the size of each menu item and draws them
1710     individually with CE_MenuItem. (Menu items do not have a separate
1711     element for their label (contents), so all drawing is done in
1712     CE_MenuItem. The menu also draws the frame of the menu with
1713     PE_FrameMenu. It also draws CE_MenuScroller if the style supports
1714     scrolling. CE_MenuTearOff is drawn if the menu is to large for its
1715     bounding rectangle.
1716
1717     In the style structure tree, we also include QMenu as it also does
1718     styling related work. The bounding rectangles of menu items are
1719     calculated for the menus size hint and when the menu is displayed
1720     or resized.
1721
1722     \image javastyle/menu.png
1723
1724     The CE_MenuScroller and CE_MenuTearOff elements are handled by
1725     QCommonStyle and are not shown unless the menu is to large to fit
1726     on the screen. PE_FrameMenu is only drawn for pop-up menus.
1727
1728     QMenu calculates rectangles based on its actions and calls
1729     CE_MenuItem and CE_MenuScroller if the style supports that.
1730
1731     It is also usual to use PE_IndicatorCheckBox (instead of using
1732     PE_IndicatorMenuCheckMark) and PE_IndicatorRadioButton for drawing
1733     checkable menu items; we have not included them in the style tree
1734     as this is optional and varies from style to style.
1735
1736     \image javastyle/menuimage.png
1737
1738     The style option for menu items is QStyleOptionMenuItem. The
1739     following tables describe its state flags and other members.
1740
1741     \table 90%
1742         \header
1743             \o State
1744             \o Set When
1745         \row
1746             \o State_Selected
1747             \o The mouse is over the action and the action is not
1748                a separator.
1749         \row
1750             \o State_Sunken
1751             \o The mouse is pressed down on the menu item.
1752         \row
1753             \o State_DownArrow
1754             \o Set if the menu item is a menu scroller and it scrolls
1755                the menu downwards.
1756     \endtable
1757
1758     \table 90%
1759         \header
1760             \o Member
1761             \o Content
1762         \row
1763             \o checkType
1764             \o A value of the \l{QStyleOptionMenuItem::}{CheckType} enum,
1765                which is either NotCheckable, Exclusive, or
1766                NonExclusive.
1767         \row
1768             \o checked
1769             \o Boolean that is true if the menu item is checked.
1770         \row
1771             \o font
1772             \o The QFont to use for the menu item's text.
1773         \row
1774             \o icon
1775             \o the QIcon of the menu item.
1776         \row
1777             \o maxIconWidth
1778             \o The maximum width allowed for the icon
1779         \row
1780             \o menuHasChecableItem
1781             \o Boolean which is true if at least one item in the
1782                menu is checkable.
1783         \row
1784             \o menuItemType
1785             \o The type of the menu item. This a value of the
1786                \l{QStyleOptionMenuItem::}{MenuItemType}.
1787         \row
1788             \o menuRect
1789             \o The bounding rectangle for the QMenu that the menu
1790                item lives in.
1791         \row
1792             \o tabWidth
1793             \o This is the distance between the text of the menu
1794                item and the shortcut.
1795         \row
1796             \o text
1797             \o The text of the menu item.
1798     \endtable
1799
1800     The setup of the style option for CE_MenuTearOff and
1801     CE_MenuScroller also uses QStyleOptionMenuItem; they only set the
1802     \c menuRect variable in addition to the common settings with
1803     QStyleOption's \l{QStyleOption::}{initFrom()}. 
1804
1805     \section3 Menu Bar
1806
1807     QMenuBar uses the style to draw each menu bar item and the empty
1808     area of the menu bar. The pull-down menus themselves are
1809     \l{QMenu}s (see \l{Menus}). The style element tree for the menu
1810     bar follows:
1811
1812     \image javastyle/menubar.png
1813
1814     The panel and empty area is drawn after the menu items. The
1815     QPainter that the QMenuBar sends to the style has the bounding
1816     rectangles of the items clipped out (i.e., clip region), so you
1817     don't need to worry about drawing over the items. The pixel
1818     metrics in QMenuBar is used when the bounding rectangles of the
1819     menu bar items are calculated.
1820
1821     \image javastyle/menubarimage.png
1822
1823     QStyleOptionMenuItem is used for menu bar items. The members that
1824     are used by QMenuBar is described in the following table:
1825
1826     \table
1827         \header
1828             \o Member
1829             \o Content
1830         \row
1831             \o menuRect
1832             \o the bounding rectangle of the entire menu bar to
1833                which the item belongs.
1834         \row
1835             \o text
1836             \o the text of the item
1837         \row
1838             \o icon
1839             \o the icon of the menu item (it is not common that
1840                styles draw this icon)
1841     \endtable
1842
1843     QStyleOptionMenuItem is also used for drawing CE_EmptyMenuBarArea.
1844
1845     QStyleOptionFrame is used for drawing the panel frame The
1846     \l{QStyleOptionFrame::}{lineWidth} is set to PM_MenuBarPanelWidth.
1847     The \l{QStyleOptionFrame::}{midLineWidth} is currently always set
1848     to 0. 
1849
1850     \section3 Item View Headers
1851
1852     It is the style that draws the headers of Qt's item views. The
1853     item views keeps the dimensions on individual sections. Also
1854     note that the delegates may use the style to paint decorations
1855     and frames around items. QItemDelegate, for instance, draws
1856     PE_FrameFocusRect and PE_IndicatorViewItemCheck.
1857
1858     \image javastyle/header.png
1859
1860     Here is a QTableWidget showing the bounding rects of a Java
1861     header:
1862
1863     \image javastyle/headerimage.png
1864
1865     The QHeaderView uses CT_HeaderSection, PM_HeaderMargin and
1866     PM_HeaderGripMargin for size and hit test calculations. The
1867     PM_HeaderMarkSize is currently not used by Qt. QTableView draws
1868     the button in the top-left corner (i.e., the area where the
1869     vertical and horizontal headers intersect) as a CE_Header.
1870
1871     The style option for header views is QStyleOptionHeader. The view
1872     paints one header section at a time, so the data is for the
1873     section being drawn. Its contents are:
1874
1875     \table 90%
1876         \header
1877             \o Member
1878             \o Content
1879         \row
1880             \o icon
1881             \o the icon of the header (for section that is being
1882                drawn).
1883         \row
1884             \o iconAlignment
1885             \o the alignment (Qt::Alignment) of the icon in the header.
1886         \row
1887             \o orientation
1888             \o a Qt::Orientation value deciding whether the header
1889                is the horizontal header above the view or the
1890                vertical header on the left.
1891         \row
1892             \o position
1893             \o a QStyleOptionHeader::SectionPosition value
1894                giving the header section's position relative to
1895                the other sections.
1896         \row
1897             \o section
1898             \o holds the section that is being drawn.
1899         \row
1900             \o selectedPosition
1901             \o a QStyleOptionHeader::SelectedPosition value giving
1902                the selected section's position relative to the
1903                section that is being painted.
1904         \row
1905             \o sortIndicator
1906             \o a QStyleOptionHeader::SortIndicator value that
1907                describes the direction in which the section's sort
1908                indicator should be drawn.
1909         \row
1910             \o text
1911             \o the text of the currently drawn section.
1912         \row
1913             \o textAlignment
1914             \o the Qt::Alignment of the text within the
1915                headersection.
1916     \endtable
1917
1918     \section3 Tree Branch Indicators
1919
1920     The branch indicators in a tree view is drawn by the style with
1921     PE_IndicatorBranch. We think of indicators here as the indicators
1922     that describe the relationship of the nodes in the tree. The
1923     generic QStyleOption is sent to the style for drawing this
1924     elements. The various branch types are described by states. Since
1925     there are no specific style option, we simply present the states
1926     table:
1927
1928     \table 90%
1929         \header
1930             \o State
1931             \o Set When
1932         \row
1933             \o State_Sibling
1934             \o the node in the tree has a sibling (i.e., there is
1935                another node in the same column).
1936         \row
1937             \o State_Item
1938             \o this branch indicator has an item.
1939         \row
1940             \o State_Children
1941             \o the branch has children (i.e., a new sub-tree can
1942                be opened at the branch).
1943         \row
1944             \o State_Open
1945             \o the branch indicator has an opened sub-tree.
1946     \endtable
1947
1948     The tree view (and tree widget) use the style to draw the branches
1949     (or nodes if you will) of the tree.
1950
1951     QStyleOption is used as the style for PE_IndicatorBranch has state
1952     flags set depending on what type of branch it is.
1953
1954     Since there is no tree structure for branch indicators, we only
1955     present an image of a tree in the java style. Each state is marked
1956     in the image with a rectangle in a specific color (i.e., these
1957     rectangles are not bounding rectangles). All combinations of
1958     states you must be aware of are represented in the image.
1959
1960     \image javastyle/branchindicatorimage.png
1961
1962     \section3 Tool Boxes
1963
1964     PM_SmallIconSize for sizeHints.
1965
1966     QToolBox is a container that keeps a collection of widgets. It has
1967     one tab for each widget and display one of them at a time. The
1968     tool box lays the components it displays (the tool box buttons
1969     and selected widget) in a QVBoxLayout. The style tree for tool
1970     boxes looks like this:
1971
1972     \image javastyle/toolbox.png
1973
1974     We show an image of a tool box in the Plastique style:
1975
1976     \image javastyle/toolboximage.png
1977
1978     All elements have the same bounding rectangles in the
1979     Plastique as well as the other Qt built-in styles.
1980
1981     The style option for tool boxes is QStyleOptionToolBox. It
1982     contains the text and icon of the tool box contents. The only
1983     state set by QToolBox is State_Sunken, which is set when the user
1984     presses a tab down with the mouse. The rest of the
1985     QStyleOptionToolBox members are:
1986
1987     \table 90%
1988         \header
1989             \o Member
1990             \o Content
1991         \row
1992             \o icon
1993             \o the icon on the toolbox tab
1994         \row
1995             \o text
1996             \o the text on the toolbox tab
1997     \endtable
1998
1999     \section3 Size Grip
2000
2001     The size grip calculates its size hint with CT_SizeGrip. The pixel
2002     metric PM_SizeGripSize is currently unused by Qt. The element tree
2003     for and an image in the Plastique style of QSizeGrip follows:
2004
2005     \image javastyle/sizegrip.png
2006
2007     \image javastyle/sizegripimage.png
2008
2009     We show the size grip in a \l{QMainWindow}'s bottom right
2010     corner.
2011
2012     The size grip style option, QStyleOptionSizeGrip, have one
2013     member except the common members from QStyleOption:
2014
2015     \table 90%
2016         \header
2017             \o Member
2018             \o Content
2019         \row
2020             \o corner
2021             \o a Qt::Corner value that describe which corner in a
2022                window (or equivalent) the grip is located.
2023     \endtable
2024
2025     \section3 Rubber Band
2026
2027     The \l{QRubberBand}'s style tree consists of two nodes.
2028
2029     \image javastyle/rubberband.png
2030
2031     We present an image of a Java style window being moved in a
2032     QMdiArea with a rubber band:
2033
2034     \image javastyle/rubberbandimage.png
2035
2036     The style option for rubber bands is QStyleOptionRubberBand.
2037     Its members are:
2038
2039     \table
2040         \header
2041             \o Member
2042             \o Content
2043         \row
2044             \o opaque
2045             \o boolean that is true if the rubber band must be
2046                drawn in an opaque style (i.e., color)
2047         \row
2048             \o shape
2049             \o a QRubberBand::Shape enum value that holds the
2050                shape of the band (which is either a rectangle or a
2051                line) 
2052     \endtable
2053
2054     \section3 Dock Widgets
2055
2056     When the dock widget lays out its contents it asks the style for
2057     these pixel metrics: PM_DockWidgetSeparatorExtent,
2058     PM_DockWidgetTitleBarButtonMargin, PM_DockWidgetFrameWidth, and
2059     PM_DockWidgetTitleMargin. It also calculates the bounding
2060     rectangles of the float and close buttons with
2061     SE_DockWidgetCloseButton and SE_DockWidgetFloatButton.
2062
2063     \image javastyle/dockwidget.png
2064
2065     The dotted lines indicate that the sender keeps instances of the
2066     recipient of the arrow (i.e., it is not a style element to draw).
2067     The dock widget only draws PE_frameDockWidget when it is detached
2068     from its main window (i.e., it is a top level window). If it is
2069     docked it draws the indicator dock widget resize handle. We show a
2070     dock widget in both docked and floating state in the plastique
2071     style: 
2072
2073     \image javastyle/dockwidgetimage.png
2074
2075     The style option is QStyleOptionDockWidget:
2076
2077     \table 90%
2078         \header
2079             \o Member
2080             \o Content
2081         \row
2082             \o closeable
2083             \o boolean that holds whether the dock window can be
2084                closed
2085         \row
2086             \o floatable
2087             \o boolean that holds whether the dock window can
2088                float (i.e., detach from the main window in which
2089                it lives)
2090         \row
2091             \o movable
2092             \o boolean that holds whether the window is movable
2093                (i.e., can move to other dock widget areas)
2094         \row
2095             \o title
2096             \o the title text of the dock window
2097     \endtable
2098
2099     For the buttons, QStyleOptionButton is used (see \l{Tool Buttons}
2100     for content description). The dock widget resize handle has a
2101     plain QStyleOption.
2102 */