You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
214 lines
9.6 KiB
214 lines
9.6 KiB
14 years ago
|
<!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>
|