Редактирование: Pixel-Perfect Mac + Plastique

__NOTOC__

by Jasmin Blanchette

Apple provide detailed specifications of how Mac OS X applicationsshould look and behave. One aspect of these specifications is thespacing that should be used between widgets on a form. Foraesthetic reasons, Apple requires different values to be used fordifferent widgets. Starting with Qt 4.3, the layout and style systemstalk together to take this into account, rather than using amiddle-of-the-road value. The result? Dialogs that look perfect onthe Mac. Having just seen the light, we rushed to try out the samewith Plastique, the default X11 style.
<!--break-->
*[[#theaquaguidelines | The Aqua Guidelines]]
*[[#variablemarginsandspacings | Variable Margins and Spacings]]
*[[#thelayoutitemrectangle | The Layout Item Rectangle]]
*[[#othervisualimprovementsformacosx | Other Visual Improvements for Mac OS X]]
*[[#conclusion | Conclusion]]
<div id="theaquaguidelines"></div>
===The Aqua Guidelines===

One of Mac OS X's most noticeable improvements over previous versionsof the operating system is the introduction of a new look and feel,dubbed Aqua. The Aqua look takes advantage of the Mac graphicshardware, using semi-transparency and non-linear transformations toprovide smooth visual effects. Built-in components of Mac OS X suchas the Dock and the window frames, applications like Finder andSafari, and low-level libraries such as Cocoa and Carbon allcontribute to defining the Aqua look.

[[Image:qq23-aquadesktop.png|center]]<br />'''Figure 1.''' A Mac OS X 10.5 desktop featuring Aqua

Mac developers who use Cocoa or Carbon directly get Aqua-themedwidgets for free. The same is true of Qt developers: [[Qt:Документация_4.3.2/qmacstyle  | QMacStyle]],the class that draws widgets on the Mac, uses the HIThemes API, justas Carbon itself does, ensuring that [[Qt:Документация_4.3.2/qpushbutton  | QPushButton]], [[Qt:Документация_4.3.2/qscrollbar  | QScrollBar]],and all their friends look native on the Mac.

However, parts of what makes an application look "Aqua" needs to behandled by the programmer. The ''Apple Human Interface Guidelines'',sometimes called the "Aqua guidelines", is a freely available documentintended for "anyone building applications for Mac OS X",to ensure that their applications will blend in well with other Macapplications.

One of the aspects that falls under the guidelines is the sizeof graphical components and the recommended spacing between thesecomponents. For example, the guidelines specify that normal-sizedpush buttons should be 68 ? 20 pixels and that the spacing betweenbuttons laid out horizontally or vertically should be 12 pixels.In contrast, there should be 8 pixels between vertically stackedcheckboxes, and 5 pixels between radio buttons.

Using Qt 4.2 or earlier, the only way to respect the inter-widgetspacing constraints was to lay out forms manually, either in ''QtDesigner'' or in code. [[Qt:Документация_4.3.2/qmacstyle  | QMacStyle]] reported correct size hints forwidgets, but the built-in layout managers ([[Qt:Документация_4.3.2/qboxlayout  | QBoxLayout]] and[[Qt:Документация_4.3.2/qgridlayout  | QGridLayout]]) worked in terms of fixed-size margins and spacings.

[[Image:qq23-macpixels.png|center]]<br />'''Figure 2.''' Examples of Aqua pixel metrics

A similar issue arises with margins: Until Qt 4.3, the layout usedthe same margin on all four sides of a window, while the Aquaguidelines specify 14 pixels for the top margin and 20 pixels for theleft, right, and bottom margins.

While these constraints may seem arbitrary, most of them actuallymake sense. For example, the top margin is smaller than the otherthree margins to account for the visual impact of the title bar.Likewise, mutually exclusive radio buttons rightfully deserve to beshown more closely together than checkboxes controlling independentsettings.

{| align="center" width="90%"

|-
| align="center" | [[Image:qq23-mac-wrong.png|center]]
| align="center" | [[Image:qq23-mac-right.png|center]]
|-
| align="center" | '''Figure 3.''' Incorrect Aqua margins and spacings (Qt 4.2)
| align="center" | '''Figure 4.''' Correct Aqua margins and spacings (Qt 4.3)
|}
Figures 3 and 4 show the same dialog taken with Qt 4.2 and Qt 4.3. Inthe Qt 4.2 version, which uses 11 pixels for the margin and 6 pixelsfor the spacing, the dialog's top margin is too large, and the left,right, and bottom margins are too small.There is also a bit too much space between radio buttons, checkboxes,and push buttons, but, at the same time, too little space between thebottom two group boxes. (If you look closely at Figure 3, you mightnotice that the effective spacing of the push buttons is much morethan 6 pixels; this is because [[Qt:Документация_4.3.2/qpushbutton  | QPushButton]] has a margin ontowhich it normally doesn't draw.)

In contrast, the Qt 4.3 version version of the dialog follows theAqua guidelines. The result is much more visually appealing, andintegrates nicely with other Mac OS X applications.

[[Image:qq23-mac-builder.png|center]]<br />'''Figure 5.''' Apple's Interface Builder in action

Mac developers who develop their applications directly on top ofCocoa or Carbon keep their sanity by using Interface Builder, a GUIdesign tool provided by Apple. While Interface Builder falls short ofoffering a high-level layout system, it displays visual hints, or"guide lines", making it easy to line up widgets and to useappropriate margins and spacings around and between them.
<div id="variablemarginsandspacings"></div>
===Variable Margins and Spacings===

To obtain correct margins and spacings with Qt, all that is necessaryis to recompile our existing applications against Qt/Mac 4.3. Themargins and spacings are transparently handled by Qt's layout andstyle systems. More precisely, [[Qt:Документация_4.3.2/qboxlayout  | QBoxLayout]] and [[Qt:Документация_4.3.2/qgridlayout  | QGridLayout]] nowquery the active [[Qt:Документация_4.3.2/qstyle  | QStyle]] to obtain proper margins and spacings,based on the widgets that are in the layout&mdash;and [[Qt:Документация_4.3.2/qmacstyle  | QMacStyle]] nowprovides that information.

Unsurprisingly, many changes were necessary in Qt to make thishappen. First, the old [[Qt:Документация_4.3.2/qlayout  | QLayout]]::setMargin(int) function had to begeneralized to take four arguments. The new function is called<tt>setContentsMargins()</tt>, because its signature and semantics followthat of [http://www.crossplatform.ru/documentation/qtdoc4.3/qwidget.php#setContentsMargins QWidget::setContentsMargins()]. Like before, the defaultvalues come from the currently active style; for [[Qt:Документация_4.3.2/qmacstyle  | QMacStyle]], thedefault values are 20, 14, 20, 20.

To provide different spacings between different types of widgets, wehad to extend [[Qt:Документация_4.3.2/qsizepolicy  | QSizePolicy]] so that it reports a <tt>ControlType</tt>.By default, [[Qt:Документация_4.3.2/qpushbutton  | QPushButton]] reports <tt>PushButton</tt>, and[[Qt:Документация_4.3.2/qscrollbar  | QScrollBar]] reports <tt>Slider</tt>, and so on. The layout managersquery these values and pass these on to the style. To obtain thehorizontal space between two [[Qt:Документация_4.3.2/qcheckbox  | QCheckBox]]es, the layout managerwould call
<source lang="cpp-qt">
    int spacing = style->layoutSpacing(QSizePolicy::CheckBox,
                                       QSizePolicy::CheckBox,
                                       Qt::Horizontal);

</source> 
Figure 6 lists the different spacings used by [[Qt:Документация_4.3.2/qmacstyle  | QMacStyle]] inQt 4.3. The values were based partly on the Aqua guidelines, partlyon Interface Builder (whose values often contradict the Aquaguidelines), and partly on common sense.

[[Image:qq23-mac-spacings.png|center]]<br />'''Figure 6.''' Spacings used by the Mac style in Qt 4.3

With this mechanism in place, we decided to also provide variablespacings in [[Qt:Документация_4.3.2/qplastiquestyle  | QPlastiqueStyle]], the fallback style on X11. Figures 7and 8 below show the same dialog taken with Qt 4.2 and Qt 4.3, usingPlastique style.

{| align="center" width="90%"

|-
| align="center" | [[Image:qq23-plastique-wrong.png|center]]
| align="center" | [[Image:qq23-plastique-right.png|center]]
|-
| align="center" | '''Figure 7.''' Fixed-size spacings with Plastique (Qt 4.2)
| align="center" | '''Figure 8.''' Variable spacings with Plastique (Qt 4.3)
|}
To obtain the Qt 4.2 behavior, we can call <tt>setSpacing(6)</tt> on thelayout to specify a fixed spacing.
<div id="thelayoutitemrectangle"></div>
===The Layout Item Rectangle===

Child widgets cannot draw outside their geometries. Historically,this was necessary because the window system did not allow this, butin more recent versions of Qt this is preserved mainly for historicalreasons.

So why would a widget want to draw outside of the rectangle (0, 0,<tt>width()</tt> - 1, <tt>height()</tt> - 1)? The main reason is todraw a focus rectangle, a shadow, or some protruding elements. Whenwe put a widget in a layout, we would like these elements to overlapthe margin around the widget.

In the Graphics View framework, [[Qt:Документация_4.3.2/qgraphicsitem  | QGraphicsItem]] has a clippingrectangle, <tt>boundingRect()</tt>, that defines the area into which itmay draw, and an arbitrary non-rectangular geometry, <tt>shape()</tt>,that is used for mouse hit tests. Focus rectangles, shadows, and draghandles can be drawn outside the geometry defined by <tt>shape()</tt> byspecifying a suitably large <tt>boundingRect()</tt>.

Ideally, [[Qt:Документация_4.3.2/qwidget  | QWidget]] would work like [[Qt:Документация_4.3.2/qgraphicsitem  | QGraphicsItem]]: It would beequipped with a <tt>boundingRect()</tt>, which could be different than<tt>rect()</tt>. However, this change would affect lots of existing codein Qt and in applications, so it was rejected for Qt 4.3.

Instead, we decided to keep the equation "geometry <tt>==</tt> clippingrectangle" in place and to introduce an implicit "layout itemrectangle", which specifies the actual geometry of the item,''excluding'' any shadow or other extra. This rectangle is defined bythe active style (as <tt>SE_CheckBoxLayoutItem</tt>,<tt>SE_ComboBoxLayoutItem</tt>, etc.) and queried by the built-in layoutmanagers. (To opt out, we can set the <tt>Qt::WA_LayoutUsesWidgetRect</tt>attribute on a widget.)

For all styles except [[Qt:Документация_4.3.2/qmacstyle  | QMacStyle]], the layout item rectangle of awidget is always (0, 0, <tt>width()</tt> - 1, <tt>height()</tt> - 1).For Mac, the appropriate values were derived from Interface Builder,which has a mode where it shows the layout item rectangles as redboxes, as shown in Figure 9.

[[Image:qq23-builder-layout-rects.png|center]]<br />'''Figure 9.''' Layout item rectangles in Interface Builder

In addition to layout item rectangles, Interface Builder also showsthe baselines of widgets that display one line of text (such aslabels, line editors, and push buttons). When laying out widgets sideby side, the baselines should be aligned. Qt 4.3 doesn't provideexplicit support for this, but we hope to address this in future Qtversions.
<div id="othervisualimprovementsformacosx"></div>
===Other Visual Improvements for Mac OS X===

Qt 4.3 brings some other good news to Qt/Mac developers---andultimately to Mac end-users: Support for Mac-style "unifiedtoolbars" has been added as an option to [[Qt:Документация_4.3.2/qmainwindow  | QMainWindow]], theMac-compliant ''Wizard'' Qt Solution has now migrated into Qt as[[Qt:Документация_4.3.2/qwizard  | QWizard]], and the application icon can be made to bounce in thedock by calling [http://www.crossplatform.ru/documentation/qtdoc4.3/qapplication.php#alert QApplication::alert()].

[[Image:qq23-macintosh-unified-toolbar.png|center]]<br />'''Figure 10.''' Mac-style unified toolbar

[[Image:qq23-mac-wizard.png|center]]<br />'''Figure 11.''' Wizard ("assistant")

These additons come on top of the Qt 4.2 improvements: Theintroduction of [[Qt:Документация_4.3.2/qdialogbuttonbox  | QDialogButtonBox]], which reorders dialog buttonson the Mac, and the redesign of [[Qt:Документация_4.3.2/qmessagebox  | QMessageBox]]. These features werementioned in the article [http://www.crossplatform.ru/?q=node/303 Reordering OK and Cancel] in ''QtQuarterly'' issue 19.

[[Image:qq19-messagebox-mac.png|center]]<br />'''Figure 12.''' Message box ("alert")

[[Image:qq19-mail-mac.png|center]]<br />'''Figure 13.''' Dialog using button box
<div id="conclusion"></div>
===Conclusion===

Qt's philosophy is that the toolkit should insulate the developerfrom the underlying platform. Whereas hard-core Mac developers whouse Carbon or Cocoa must respect various pixel guidelines whendesigning dialogs (the Interface Builder "guide lines" sure helpwhen they don't contradict the Aqua guidelines), Qt's layout andstyle systems take care of everything behind the scenes.

The current work is one step towards making Qt's layout managers andstyles look better, on Mac OS X and elsewhere. In future releases, wehope to provide better support for baseline alignment in layoutsand for high-resolution displays.

[[Категория:Qt_Издания]]