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.8 KiB
214 lines
9.8 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/tutorial.doc:670 -->
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
|
||
|
|
<title>Qt Tutorial - Chapter 7: One Thing Leads to Another</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>Qt Tutorial - Chapter 7: One Thing Leads to Another</h1>
|
||
|
|
|
||
|
|
|
||
|
|
<p> <center><img src="t7.png" alt="Screenshot of tutorial seven"></center>
|
||
|
|
<p> This example shows how to create custom widgets with signals and
|
||
|
|
slots, and how to connect them together in more complex ways. For the
|
||
|
|
first time, the source is split among several files which we've placed
|
||
|
|
in the <tt>t7</tt> subdirectory.
|
||
|
|
<p> <ul>
|
||
|
|
<li> <a href="t7-lcdrange-h.html">t7/lcdrange.h</a> contains the LCDRange class definition.
|
||
|
|
<li> <a href="t7-lcdrange-cpp.html">t7/lcdrange.cpp</a> contains the LCDRange implementation.
|
||
|
|
<li> <a href="t7-main-cpp.html">t7/main.cpp</a> contains MyWidget and main.
|
||
|
|
</ul>
|
||
|
|
<p> <h2> Line-by-line Walkthrough
|
||
|
|
</h2>
|
||
|
|
<a name="1"></a><p> <h3> <a href="t7-lcdrange-h.html">t7/lcdrange.h</a>
|
||
|
|
</h3>
|
||
|
|
<a name="1-1"></a><p> This file is mainly lifted from <a href="tutorial1-06.html#main">main.cpp</a> in
|
||
|
|
Chapter 6; only the changes are noted here.
|
||
|
|
<p>
|
||
|
|
|
||
|
|
<p> <pre> #ifndef LCDRANGE_H
|
||
|
|
#define LCDRANGE_H
|
||
|
|
</pre>
|
||
|
|
<p> This is the classic C construction to avoid errors if a header file
|
||
|
|
happens to be included more than once. If you don't use it already,
|
||
|
|
it is a very good habit to develop. The #ifndef should enclose <em>all</em> of the
|
||
|
|
header file.
|
||
|
|
<p> <pre> #include <<a href="qvbox-h.html">qvbox.h</a>>
|
||
|
|
</pre>
|
||
|
|
<p> <a href="qvbox-h.html">qvbox.h</a> is included. LCDRange inherits <a href="qvbox.html">QVBox</a>, and the header file
|
||
|
|
of a parent class must always be included. We cheated a bit in the
|
||
|
|
previous chapters, and we let <a href="qwidget-h.html">qwidget.h</a> be included indirectly via
|
||
|
|
other header files such as <a href="qpushbutton-h.html">qpushbutton.h</a>.
|
||
|
|
<p> <pre> class QSlider;
|
||
|
|
</pre>
|
||
|
|
<p> This is another classic trick, but one that's much less used often. Because
|
||
|
|
we don't need <a href="qslider.html">QSlider</a> in the <em>interface</em> of the class, only in the
|
||
|
|
implementation, we use a forward declaration of the class in the
|
||
|
|
header file and include the header file for QSlider in the .cpp
|
||
|
|
file.
|
||
|
|
<p> This makes the compilation of big projects much faster, because when a
|
||
|
|
header file has changed, fewer files need to be recompiled. It can
|
||
|
|
often speed up big compilations by a factor of two or more.
|
||
|
|
<p> <pre> class LCDRange : public <a href="qvbox.html">QVBox</a>
|
||
|
|
{
|
||
|
|
<a href="metaobjects.html#Q_OBJECT">Q_OBJECT</a>
|
||
|
|
public:
|
||
|
|
LCDRange( <a href="qwidget.html">QWidget</a> *parent=0, const char *name=0 );
|
||
|
|
</pre>
|
||
|
|
<p> Note the Q_OBJECT. This macro must be included in <em>all</em> classes that
|
||
|
|
contain signals and/or slots. If you are curious, it defines the
|
||
|
|
functions that are implemented in the
|
||
|
|
<a href="metaobjects.html">meta object file</a>.
|
||
|
|
<p> <pre> int value() const;
|
||
|
|
public slots:
|
||
|
|
void setValue( int );
|
||
|
|
|
||
|
|
signals:
|
||
|
|
void valueChanged( int );
|
||
|
|
</pre>
|
||
|
|
<p> These three members make up an interface between this widget and other
|
||
|
|
components in a program. Until now, LCDRange didn't really have an
|
||
|
|
interface at all.
|
||
|
|
<p> value() is a public function for accessing the value of the LCDRange.
|
||
|
|
setValue() is our first custom slot and valueChanged() is our first
|
||
|
|
custom signal.
|
||
|
|
<p> Slots must be implemented in the normal way (remember that a slot is also
|
||
|
|
a C++ member function). Signals are automatically implemented in the
|
||
|
|
<a href="signalsandslots.html">meta object</a> file. Signals follow the
|
||
|
|
access rules of protected C++ functions (i.e., they can be emitted only
|
||
|
|
by the class they are defined in or by classes inheriting from it).
|
||
|
|
<p> The signal valueChanged() is used when the LCDRange's value has
|
||
|
|
changed - just as you guessed from the name. This is not the last
|
||
|
|
signal you'll see called <i>something</i>Changed().
|
||
|
|
<p> <h3> <a href="t7-lcdrange-cpp.html">t7/lcdrange.cpp</a>
|
||
|
|
</h3>
|
||
|
|
<a name="1-2"></a><p>
|
||
|
|
|
||
|
|
<p> This file is mainly lifted from <a href="tutorial1-06.html#main">t6/main.cpp</a>, and
|
||
|
|
only the changes are noted here.
|
||
|
|
<p> <pre> <a name="x2333"></a> <a href="qobject.html#connect">connect</a>( slider, SIGNAL(<a href="qslider.html#valueChanged">valueChanged</a>(int)),
|
||
|
|
<a name="x2330"></a> lcd, SLOT(<a href="qlcdnumber.html#display">display</a>(int)) );
|
||
|
|
<a href="qobject.html#connect">connect</a>( slider, SIGNAL(<a href="qslider.html#valueChanged">valueChanged</a>(int)),
|
||
|
|
SIGNAL(valueChanged(int)) );
|
||
|
|
</pre>
|
||
|
|
<p> This code is from the LCDRange constructor.
|
||
|
|
<p> The first connect is the same that you have seen in the previous chapter.
|
||
|
|
The second is new; it connects slider's valueChanged() signal to this
|
||
|
|
object's valueChanged <em>signal</em>. Connect() with 3 arguments always
|
||
|
|
connects to signals or slots in <tt>this</tt> object.
|
||
|
|
<p> Yes, that's right. Signals can be connected to other signals. When
|
||
|
|
the first is emitted, the second signal is also emitted.
|
||
|
|
<p> Let's look at what happens when the user operates the slider. The
|
||
|
|
slider sees that its value has changed and emits the valueChanged()
|
||
|
|
signal. That signal is connected both to the display() slot of the
|
||
|
|
<a href="qlcdnumber.html">QLCDNumber</a> and to the valueChanged() signal of the LCDRange.
|
||
|
|
<p> Thus, when the signal is emitted, LCDRange emits its own
|
||
|
|
valueChanged() signal. In addition, <a href="qlcdnumber.html#display">QLCDNumber::display</a>() is called
|
||
|
|
and shows the new number.
|
||
|
|
<p> Note that you're not guaranteed any particular order of execution -
|
||
|
|
LCDRange::valueChanged() may be emitted before or after
|
||
|
|
QLCDNumber::display()and is entirely arbitrary.
|
||
|
|
<p> <pre> int LCDRange::value() const
|
||
|
|
{
|
||
|
|
<a name="x2332"></a> return slider-><a href="qslider.html#value">value</a>();
|
||
|
|
}
|
||
|
|
</pre>
|
||
|
|
<p> The implementation of value() is straightforward; it simply returns
|
||
|
|
the slider's value.
|
||
|
|
<p> <pre> void LCDRange::setValue( int value )
|
||
|
|
{
|
||
|
|
<a name="x2331"></a> slider-><a href="qslider.html#setValue">setValue</a>( value );
|
||
|
|
}
|
||
|
|
</pre>
|
||
|
|
<p> The implementation of setValue() is equally straightforward. Note
|
||
|
|
that because the slider and LCD number are connected, setting the
|
||
|
|
slider's value automatically updates the LCD number as well. In
|
||
|
|
addition, the slider will automatically adjust the value if it is
|
||
|
|
outside its legal range.
|
||
|
|
<p> <h3> <a href="t7-main-cpp.html">t7/main.cpp</a>
|
||
|
|
</h3>
|
||
|
|
<a name="1-3"></a><p>
|
||
|
|
|
||
|
|
<p> <pre> LCDRange *previous = 0;
|
||
|
|
for( int r = 0 ; r < 4 ; r++ ) {
|
||
|
|
for( int c = 0 ; c < 4 ; c++ ) {
|
||
|
|
LCDRange* lr = new LCDRange( grid );
|
||
|
|
if ( previous )
|
||
|
|
<a href="qobject.html#connect">connect</a>( lr, SIGNAL(valueChanged(int)),
|
||
|
|
previous, SLOT(setValue(int)) );
|
||
|
|
previous = lr;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</pre>
|
||
|
|
<p> All of main.cpp is copied from the previous chapter except in
|
||
|
|
the constructor for MyWidget. When we create the 16 LCDRange object, we
|
||
|
|
now connect them using the <a href="signalsandslots.html">signal/slot</a> mechanism. Each has its valueChanged() signal
|
||
|
|
connected to the setValue() slot in the previous one. Because LCDRange
|
||
|
|
emits the signal valueChanged() when its value changes (surprise!), we
|
||
|
|
are here creating a "chain" of signals and slots.
|
||
|
|
<p> <a name="compiling"></a>
|
||
|
|
<h2> Compiling
|
||
|
|
</h2>
|
||
|
|
<a name="2"></a><p> Creating a makefile for a multi-file application is no different from
|
||
|
|
creating one for a single-file application. If you've saved all the
|
||
|
|
files in this example in their own directory, all you have to do is:
|
||
|
|
<pre>
|
||
|
|
qmake -project
|
||
|
|
qmake
|
||
|
|
</pre>
|
||
|
|
|
||
|
|
<p> The first command tells <a href="qmake-manual.html">qmake</a> to
|
||
|
|
create a <tt>.pro</tt> (project) file. The second command tells it to create
|
||
|
|
a (platform-specific) makefile based on the project file. You should
|
||
|
|
now be able to type <tt>make</tt> (or <tt>nmake</tt> if you're using Visual
|
||
|
|
Studio) to build your application.
|
||
|
|
<p> <h2> Behavior
|
||
|
|
</h2>
|
||
|
|
<a name="3"></a><p> On startup, the program's appearance is identical to the previous one.
|
||
|
|
Try operating the slider to the bottom right...
|
||
|
|
<p> <h2> Exercises
|
||
|
|
</h2>
|
||
|
|
<a name="4"></a><p> Use the bottom right slider to set all LCDs to 50. Then set the top
|
||
|
|
half to 40 by clicking once to the left of the slider handle. Now,
|
||
|
|
use the one to the left of the last one operated to set the first
|
||
|
|
seven LCDs back to 50.
|
||
|
|
<p> Click to the left of the handle on the bottom right slider. What
|
||
|
|
happens? Why is this the correct behavior?
|
||
|
|
<p> You're now ready for <a href="tutorial1-08.html">Chapter 8.</a>
|
||
|
|
<p> [<a href="tutorial1-06.html">Previous tutorial</a>]
|
||
|
|
[<a href="tutorial1-08.html">Next tutorial</a>]
|
||
|
|
[<a href="tutorial.html">Main tutorial page</a>]
|
||
|
|
<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>
|