source: trunk/doc/src/styles.qdoc@ 109

Last change on this file since 109 was 2, checked in by Dmitry A. Kuminov, 16 years ago

Initially imported qt-all-opensource-src-4.5.1 from Trolltech.

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