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