| 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/tutorial.doc:670 -->
|
|---|
| 3 | <html>
|
|---|
| 4 | <head>
|
|---|
| 5 | <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
|
|---|
| 6 | <title>Qt Tutorial - Chapter 7: One Thing Leads to Another</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>Qt Tutorial - Chapter 7: One Thing Leads to Another</h1>
|
|---|
| 33 |
|
|---|
| 34 |
|
|---|
| 35 | <p> <center><img src="t7.png" alt="Screenshot of tutorial seven"></center>
|
|---|
| 36 | <p> This example shows how to create custom widgets with signals and
|
|---|
| 37 | slots, and how to connect them together in more complex ways. For the
|
|---|
| 38 | first time, the source is split among several files which we've placed
|
|---|
| 39 | in the <tt>t7</tt> subdirectory.
|
|---|
| 40 | <p> <ul>
|
|---|
| 41 | <li> <a href="t7-lcdrange-h.html">t7/lcdrange.h</a> contains the LCDRange class definition.
|
|---|
| 42 | <li> <a href="t7-lcdrange-cpp.html">t7/lcdrange.cpp</a> contains the LCDRange implementation.
|
|---|
| 43 | <li> <a href="t7-main-cpp.html">t7/main.cpp</a> contains MyWidget and main.
|
|---|
| 44 | </ul>
|
|---|
| 45 | <p> <h2> Line-by-line Walkthrough
|
|---|
| 46 | </h2>
|
|---|
| 47 | <a name="1"></a><p> <h3> <a href="t7-lcdrange-h.html">t7/lcdrange.h</a>
|
|---|
| 48 | </h3>
|
|---|
| 49 | <a name="1-1"></a><p> This file is mainly lifted from <a href="tutorial1-06.html#main">main.cpp</a> in
|
|---|
| 50 | Chapter 6; only the changes are noted here.
|
|---|
| 51 | <p>
|
|---|
| 52 |
|
|---|
| 53 | <p> <pre> #ifndef LCDRANGE_H
|
|---|
| 54 | #define LCDRANGE_H
|
|---|
| 55 | </pre>
|
|---|
| 56 | <p> This is the classic C construction to avoid errors if a header file
|
|---|
| 57 | happens to be included more than once. If you don't use it already,
|
|---|
| 58 | it is a very good habit to develop. The #ifndef should enclose <em>all</em> of the
|
|---|
| 59 | header file.
|
|---|
| 60 | <p> <pre> #include <<a href="qvbox-h.html">qvbox.h</a>>
|
|---|
| 61 | </pre>
|
|---|
| 62 | <p> <a href="qvbox-h.html">qvbox.h</a> is included. LCDRange inherits <a href="qvbox.html">QVBox</a>, and the header file
|
|---|
| 63 | of a parent class must always be included. We cheated a bit in the
|
|---|
| 64 | previous chapters, and we let <a href="qwidget-h.html">qwidget.h</a> be included indirectly via
|
|---|
| 65 | other header files such as <a href="qpushbutton-h.html">qpushbutton.h</a>.
|
|---|
| 66 | <p> <pre> class QSlider;
|
|---|
| 67 | </pre>
|
|---|
| 68 | <p> This is another classic trick, but one that's much less used often. Because
|
|---|
| 69 | we don't need <a href="qslider.html">QSlider</a> in the <em>interface</em> of the class, only in the
|
|---|
| 70 | implementation, we use a forward declaration of the class in the
|
|---|
| 71 | header file and include the header file for QSlider in the .cpp
|
|---|
| 72 | file.
|
|---|
| 73 | <p> This makes the compilation of big projects much faster, because when a
|
|---|
| 74 | header file has changed, fewer files need to be recompiled. It can
|
|---|
| 75 | often speed up big compilations by a factor of two or more.
|
|---|
| 76 | <p> <pre> class LCDRange : public <a href="qvbox.html">QVBox</a>
|
|---|
| 77 | {
|
|---|
| 78 | <a href="metaobjects.html#Q_OBJECT">Q_OBJECT</a>
|
|---|
| 79 | public:
|
|---|
| 80 | LCDRange( <a href="qwidget.html">QWidget</a> *parent=0, const char *name=0 );
|
|---|
| 81 | </pre>
|
|---|
| 82 | <p> Note the Q_OBJECT. This macro must be included in <em>all</em> classes that
|
|---|
| 83 | contain signals and/or slots. If you are curious, it defines the
|
|---|
| 84 | functions that are implemented in the
|
|---|
| 85 | <a href="metaobjects.html">meta object file</a>.
|
|---|
| 86 | <p> <pre> int value() const;
|
|---|
| 87 | public slots:
|
|---|
| 88 | void setValue( int );
|
|---|
| 89 |
|
|---|
| 90 | signals:
|
|---|
| 91 | void valueChanged( int );
|
|---|
| 92 | </pre>
|
|---|
| 93 | <p> These three members make up an interface between this widget and other
|
|---|
| 94 | components in a program. Until now, LCDRange didn't really have an
|
|---|
| 95 | interface at all.
|
|---|
| 96 | <p> value() is a public function for accessing the value of the LCDRange.
|
|---|
| 97 | setValue() is our first custom slot and valueChanged() is our first
|
|---|
| 98 | custom signal.
|
|---|
| 99 | <p> Slots must be implemented in the normal way (remember that a slot is also
|
|---|
| 100 | a C++ member function). Signals are automatically implemented in the
|
|---|
| 101 | <a href="signalsandslots.html">meta object</a> file. Signals follow the
|
|---|
| 102 | access rules of protected C++ functions (i.e., they can be emitted only
|
|---|
| 103 | by the class they are defined in or by classes inheriting from it).
|
|---|
| 104 | <p> The signal valueChanged() is used when the LCDRange's value has
|
|---|
| 105 | changed - just as you guessed from the name. This is not the last
|
|---|
| 106 | signal you'll see called <i>something</i>Changed().
|
|---|
| 107 | <p> <h3> <a href="t7-lcdrange-cpp.html">t7/lcdrange.cpp</a>
|
|---|
| 108 | </h3>
|
|---|
| 109 | <a name="1-2"></a><p>
|
|---|
| 110 |
|
|---|
| 111 | <p> This file is mainly lifted from <a href="tutorial1-06.html#main">t6/main.cpp</a>, and
|
|---|
| 112 | only the changes are noted here.
|
|---|
| 113 | <p> <pre> <a name="x2333"></a> <a href="qobject.html#connect">connect</a>( slider, SIGNAL(<a href="qslider.html#valueChanged">valueChanged</a>(int)),
|
|---|
| 114 | <a name="x2330"></a> lcd, SLOT(<a href="qlcdnumber.html#display">display</a>(int)) );
|
|---|
| 115 | <a href="qobject.html#connect">connect</a>( slider, SIGNAL(<a href="qslider.html#valueChanged">valueChanged</a>(int)),
|
|---|
| 116 | SIGNAL(valueChanged(int)) );
|
|---|
| 117 | </pre>
|
|---|
| 118 | <p> This code is from the LCDRange constructor.
|
|---|
| 119 | <p> The first connect is the same that you have seen in the previous chapter.
|
|---|
| 120 | The second is new; it connects slider's valueChanged() signal to this
|
|---|
| 121 | object's valueChanged <em>signal</em>. Connect() with 3 arguments always
|
|---|
| 122 | connects to signals or slots in <tt>this</tt> object.
|
|---|
| 123 | <p> Yes, that's right. Signals can be connected to other signals. When
|
|---|
| 124 | the first is emitted, the second signal is also emitted.
|
|---|
| 125 | <p> Let's look at what happens when the user operates the slider. The
|
|---|
| 126 | slider sees that its value has changed and emits the valueChanged()
|
|---|
| 127 | signal. That signal is connected both to the display() slot of the
|
|---|
| 128 | <a href="qlcdnumber.html">QLCDNumber</a> and to the valueChanged() signal of the LCDRange.
|
|---|
| 129 | <p> Thus, when the signal is emitted, LCDRange emits its own
|
|---|
| 130 | valueChanged() signal. In addition, <a href="qlcdnumber.html#display">QLCDNumber::display</a>() is called
|
|---|
| 131 | and shows the new number.
|
|---|
| 132 | <p> Note that you're not guaranteed any particular order of execution -
|
|---|
| 133 | LCDRange::valueChanged() may be emitted before or after
|
|---|
| 134 | QLCDNumber::display()and is entirely arbitrary.
|
|---|
| 135 | <p> <pre> int LCDRange::value() const
|
|---|
| 136 | {
|
|---|
| 137 | <a name="x2332"></a> return slider-><a href="qslider.html#value">value</a>();
|
|---|
| 138 | }
|
|---|
| 139 | </pre>
|
|---|
| 140 | <p> The implementation of value() is straightforward; it simply returns
|
|---|
| 141 | the slider's value.
|
|---|
| 142 | <p> <pre> void LCDRange::setValue( int value )
|
|---|
| 143 | {
|
|---|
| 144 | <a name="x2331"></a> slider-><a href="qslider.html#setValue">setValue</a>( value );
|
|---|
| 145 | }
|
|---|
| 146 | </pre>
|
|---|
| 147 | <p> The implementation of setValue() is equally straightforward. Note
|
|---|
| 148 | that because the slider and LCD number are connected, setting the
|
|---|
| 149 | slider's value automatically updates the LCD number as well. In
|
|---|
| 150 | addition, the slider will automatically adjust the value if it is
|
|---|
| 151 | outside its legal range.
|
|---|
| 152 | <p> <h3> <a href="t7-main-cpp.html">t7/main.cpp</a>
|
|---|
| 153 | </h3>
|
|---|
| 154 | <a name="1-3"></a><p>
|
|---|
| 155 |
|
|---|
| 156 | <p> <pre> LCDRange *previous = 0;
|
|---|
| 157 | for( int r = 0 ; r < 4 ; r++ ) {
|
|---|
| 158 | for( int c = 0 ; c < 4 ; c++ ) {
|
|---|
| 159 | LCDRange* lr = new LCDRange( grid );
|
|---|
| 160 | if ( previous )
|
|---|
| 161 | <a href="qobject.html#connect">connect</a>( lr, SIGNAL(valueChanged(int)),
|
|---|
| 162 | previous, SLOT(setValue(int)) );
|
|---|
| 163 | previous = lr;
|
|---|
| 164 | }
|
|---|
| 165 | }
|
|---|
| 166 | </pre>
|
|---|
| 167 | <p> All of main.cpp is copied from the previous chapter except in
|
|---|
| 168 | the constructor for MyWidget. When we create the 16 LCDRange object, we
|
|---|
| 169 | now connect them using the <a href="signalsandslots.html">signal/slot</a> mechanism. Each has its valueChanged() signal
|
|---|
| 170 | connected to the setValue() slot in the previous one. Because LCDRange
|
|---|
| 171 | emits the signal valueChanged() when its value changes (surprise!), we
|
|---|
| 172 | are here creating a "chain" of signals and slots.
|
|---|
| 173 | <p> <a name="compiling"></a>
|
|---|
| 174 | <h2> Compiling
|
|---|
| 175 | </h2>
|
|---|
| 176 | <a name="2"></a><p> Creating a makefile for a multi-file application is no different from
|
|---|
| 177 | creating one for a single-file application. If you've saved all the
|
|---|
| 178 | files in this example in their own directory, all you have to do is:
|
|---|
| 179 | <pre>
|
|---|
| 180 | qmake -project
|
|---|
| 181 | qmake
|
|---|
| 182 | </pre>
|
|---|
| 183 |
|
|---|
| 184 | <p> The first command tells <a href="qmake-manual.html">qmake</a> to
|
|---|
| 185 | create a <tt>.pro</tt> (project) file. The second command tells it to create
|
|---|
| 186 | a (platform-specific) makefile based on the project file. You should
|
|---|
| 187 | now be able to type <tt>make</tt> (or <tt>nmake</tt> if you're using Visual
|
|---|
| 188 | Studio) to build your application.
|
|---|
| 189 | <p> <h2> Behavior
|
|---|
| 190 | </h2>
|
|---|
| 191 | <a name="3"></a><p> On startup, the program's appearance is identical to the previous one.
|
|---|
| 192 | Try operating the slider to the bottom right...
|
|---|
| 193 | <p> <h2> Exercises
|
|---|
| 194 | </h2>
|
|---|
| 195 | <a name="4"></a><p> Use the bottom right slider to set all LCDs to 50. Then set the top
|
|---|
| 196 | half to 40 by clicking once to the left of the slider handle. Now,
|
|---|
| 197 | use the one to the left of the last one operated to set the first
|
|---|
| 198 | seven LCDs back to 50.
|
|---|
| 199 | <p> Click to the left of the handle on the bottom right slider. What
|
|---|
| 200 | happens? Why is this the correct behavior?
|
|---|
| 201 | <p> You're now ready for <a href="tutorial1-08.html">Chapter 8.</a>
|
|---|
| 202 | <p> [<a href="tutorial1-06.html">Previous tutorial</a>]
|
|---|
| 203 | [<a href="tutorial1-08.html">Next tutorial</a>]
|
|---|
| 204 | [<a href="tutorial.html">Main tutorial page</a>]
|
|---|
| 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>
|
|---|
