1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- /home/espenr/tmp/qt-3.3.8-espenr-2499/qt-x11-free-3.3.8/doc/customstyles.doc:36 -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Style overview</title>
<style type="text/css"><!--
fn { margin-left: 1cm; text-indent: -1cm; }
a:link { color: #004faf; text-decoration: none }
a:visited { color: #672967; text-decoration: none }
body { background: #ffffff; color: black; }
--></style>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr bgcolor="#E5E5E5">
<td valign=center>
<a href="index.html">
<font color="#004faf">Home</font></a>
| <a href="classes.html">
<font color="#004faf">All Classes</font></a>
| <a href="mainclasses.html">
<font color="#004faf">Main Classes</font></a>
| <a href="annotated.html">
<font color="#004faf">Annotated</font></a>
| <a href="groups.html">
<font color="#004faf">Grouped Classes</font></a>
| <a href="functions.html">
<font color="#004faf">Functions</font></a>
</td>
<td align="right" valign="center"><img src="logo32.png" align="right" width="64" height="32" border="0"></td></tr></table><h1 align=center>Style overview</h1>
<p> A style in Qt implements the look and feel found in a GUI for a
particular platform. For example, Windows platforms may use the
Windows or Windows-XP style, Unix platforms may use the <a href="motif-extension.html#Motif">Motif</a> style,
and so on.
<p> This is a short guide that describes the steps that are necessary to
get started creating and using custom styles with the Qt 3.x style
API. First, we go through the steps necessary to create a style:
<ol type=1>
<li> Pick a base style to inherit from.
<li> Re-implement the necessary functions in the derived class.
</ol>
Then we explain how to use the new style from within your own
applications, or as a plugin that can be used by existing Qt
applications.
<p> <h2> Creating a custom style
</h2>
<a name="1"></a><p> <h3> 1. Pick a base style to inherit from.
</h3>
<a name="1-1"></a><p> The first step is to pick one of the base styles provided with Qt to
build your custom style from. The choice will depend on what look and
feel you are trying to achieve. We recommend that you choose from the
<a href="qwindowsstyle.html">QWindowsStyle</a> derived classes or the <a href="qmotifstyle.html">QMotifStyle</a> derived classes.
These are the two base look and feel classes in the Qt style engine.
Inheriting directly from <a href="qcommonstyle.html">QCommonStyle</a> is also an option if you want to
start almost from scratch when implementing your style. In this simple
example we will inherit from QWindowsStyle.
<p> <h3> 2. Re-implement the necessary functions in your derived class.
</h3>
<a name="1-2"></a><p> Depending on which parts of the base style you want to change, you
must re-implement the functions that are used to draw those parts
of the interface. If you take a look at the <a href="qstyle.html">QStyle</a> documentation,
you will find a list of the different primitives, controls and complex
controls. In this example we will first change the look of the
standard arrows that are used in the QWindowsStyle. The arrows are
PrimitiveElements that are drawn by the drawPrimitive() function,
so we need to re-implement that function. We need the following class
declaration:
<p> <pre>
#include <<a href="qwindowsstyle-h.html">qwindowsstyle.h</a>>
class CustomStyle : public <a href="qwindowsstyle.html">QWindowsStyle</a> {
<a href="metaobjects.html#Q_OBJECT">Q_OBJECT</a>
public:
CustomStyle();
~CustomStyle();
void drawPrimitive( PrimitiveElement pe,
<a href="qpainter.html">QPainter</a> *p,
const <a href="qrect.html">QRect</a> & r,
const <a href="qcolorgroup.html">QColorGroup</a> & cg,
SFlags flags = Style_Default,
const <a href="qstyleoption.html">QStyleOption</a> & = QStyleOption::Default ) const;
private:
// Disabled copy constructor and operator=
CustomStyle( const CustomStyle & );
CustomStyle& operator=( const CustomStyle & );
};
</pre>
<p> Note that we disable the copy constructor and the '=' operator for our
style. <a href="qobject.html">QObject</a> is the base class for all style classes in Qt, and a
QObject inherently cannot be copied since there are some aspects of it
that are not copyable.
<p> From the <a href="qstyle.html">QStyle</a> docs we see that <tt>PE_ArrowUp</tt>, <tt>PE_ArrowDown</tt>, <tt>PE_ArrowLeft</tt> and <tt>PE_ArrowRight</tt> are the primitives we need to do
something with. We get the following in our drawPrimitive() function:
<p> <pre>
CustomStyle::CustomStyle()
{
}
CustomStyle::~CustomStyle()
{
}
void CustomStyle::drawPrimitive( PrimitiveElement pe,
<a href="qpainter.html">QPainter</a> * p,
const <a href="qrect.html">QRect</a> & r,
const <a href="qcolorgroup.html">QColorGroup</a> & cg,
SFlags flags,
const <a href="qstyleoption.html">QStyleOption</a> & opt ) const
{
// we are only interested in the arrows
if (pe >= PE_ArrowUp && pe <= PE_ArrowLeft) {
<a href="qpointarray.html">QPointArray</a> pa( 3 );
// make the arrow cover half the area it is supposed to be
// painted on
int x = r.<a href="qrect.html#x">x</a>();
int y = r.<a href="qrect.html#y">y</a>();
int w = r.<a href="qrect.html#width">width</a>() / 2;
int h = r.<a href="qrect.html#height">height</a>() / 2;
x += (r.<a href="qrect.html#width">width</a>() - w) / 2;
y += (r.<a href="qrect.html#height">height</a>() - h) /2;
switch( pe ) {
case PE_ArrowDown:
pa.<a href="qpointarray.html#setPoint">setPoint</a>( 0, x, y );
pa.<a href="qpointarray.html#setPoint">setPoint</a>( 1, x + w, y );
pa.<a href="qpointarray.html#setPoint">setPoint</a>( 2, x + w / 2, y + h );
break;
case PE_ArrowUp:
pa.<a href="qpointarray.html#setPoint">setPoint</a>( 0, x, y + h );
pa.<a href="qpointarray.html#setPoint">setPoint</a>( 1, x + w, y + h );
pa.<a href="qpointarray.html#setPoint">setPoint</a>( 2, x + w / 2, y );
break;
case PE_ArrowLeft:
pa.<a href="qpointarray.html#setPoint">setPoint</a>( 0, x + w, y );
pa.<a href="qpointarray.html#setPoint">setPoint</a>( 1, x + w, y + h );
pa.<a href="qpointarray.html#setPoint">setPoint</a>( 2, x, y + h / 2 );
break;
case PE_ArrowRight:
pa.<a href="qpointarray.html#setPoint">setPoint</a>( 0, x, y );
pa.<a href="qpointarray.html#setPoint">setPoint</a>( 1, x, y + h );
pa.<a href="qpointarray.html#setPoint">setPoint</a>( 2, x + w, y + h / 2 );
break;
default: break;
}
// use different colors to indicate that the arrow is
// enabled/disabled
if ( flags & Style_Enabled ) {
p-><a href="qpainter.html#setPen">setPen</a>( cg.<a href="qcolorgroup.html#mid">mid</a>() );
p-><a href="qpainter.html#setBrush">setBrush</a>( cg.<a href="qcolorgroup.html#brush">brush</a>( QColorGroup::ButtonText ) );
} else {
p-><a href="qpainter.html#setPen">setPen</a>( cg.<a href="qcolorgroup.html#buttonText">buttonText</a>() );
p-><a href="qpainter.html#setBrush">setBrush</a>( cg.<a href="qcolorgroup.html#brush">brush</a>( QColorGroup::Mid ) );
}
p-><a href="qpainter.html#drawPolygon">drawPolygon</a>( pa );
} else {
// let the base style handle the other primitives
QWindowsStyle::<a href="qstyle.html#drawPrimitive">drawPrimitive</a>( pe, p, r, cg, flags, data );
}
}
</pre>
<p> <h3> Using a custom style
</h3>
<a name="1-3"></a><p> There are several ways of using a custom style in a Qt application.
The simplest way is to include the following lines of code in the
application's main() function:
<p> <pre>
#include "customstyle.h"
int main( int argc, char ** argv )
{
QApplication::<a href="qapplication.html#setStyle">setStyle</a>( new CustomStyle() );
// do the usual routine on creating your QApplication object etc.
}
</pre>
<p> Note that you must also include the <tt>customstyle.h</tt> and <tt>customstyle.cpp</tt> files in your project.
<p> 2. Creating and using a pluggable style
<p> You may want to make your style available for use in other
applications, some of which may not be yours and are not available for
you to recompile. The Qt Plugin system makes it possible to create
styles as plugins. Styles created as plugins are loaded as shared
objects at runtime by Qt itself. Please refer to the <a href="plugins-howto.html">Qt Plugin</a> documentation for more
information on how to go about creating a style plugin.
<p> Compile your plugin and put it into $QTDIR/plugins/styles. We now have
a pluggable style that Qt can load automatically. To use your new
style with existing applications, simply start the application with
the following argument:
<p> <pre>
./application -style custom
</pre>
<p> The application will use the look and feel from the custom style you
implemented.
<p>
<!-- eof -->
<p><address><hr><div align=center>
<table width=100% cellspacing=0 border=0><tr>
<td>Copyright © 2007
<a href="troll.html">Trolltech</a><td align=center><a href="trademarks.html">Trademarks</a>
<td align=right><div align=right>Qt 3.3.8</div>
</table></div></address></body>
</html>
|
