<!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:580 --> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Qt Tutorial - Chapter 6: Building Blocks Galore!</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 6: Building Blocks Galore!</h1> <p> <center><img src="t6.png" alt="Screenshot of tutorial six"></center> <p> This example shows how to encapsulate two widgets into a new component and how easy it is to use many widgets. For the first time, we use a custom widget as a child widget. <p> <a name="main"></a> <pre>/**************************************************************** ** ** Qt tutorial 6 ** ****************************************************************/ #include <<a href="qapplication-h.html">qapplication.h</a>> #include <<a href="qpushbutton-h.html">qpushbutton.h</a>> #include <<a href="qslider-h.html">qslider.h</a>> #include <<a href="qlcdnumber-h.html">qlcdnumber.h</a>> #include <<a href="qfont-h.html">qfont.h</a>> #include <<a href="qvbox-h.html">qvbox.h</a>> #include <<a href="qgrid-h.html">qgrid.h</a>> class LCDRange : public <a href="qvbox.html">QVBox</a> { public: LCDRange( <a href="qwidget.html">QWidget</a> *parent=0, const char *name=0 ); }; <a name="f554"></a>LCDRange::LCDRange( <a href="qwidget.html">QWidget</a> *parent, const char *name ) : <a href="qvbox.html">QVBox</a>( parent, name ) { <a href="qlcdnumber.html">QLCDNumber</a> *lcd = new <a href="qlcdnumber.html">QLCDNumber</a>( 2, this, "lcd" ); <a href="qslider.html">QSlider</a> * slider = new <a href="qslider.html">QSlider</a>( Horizontal, this, "slider" ); slider-><a href="qrangecontrol.html#setRange">setRange</a>( 0, 99 ); slider-><a href="qslider.html#setValue">setValue</a>( 0 ); <a href="qobject.html#connect">connect</a>( slider, SIGNAL(<a href="qslider.html#valueChanged">valueChanged</a>(int)), lcd, SLOT(<a href="qlcdnumber.html#display">display</a>(int)) ); } class MyWidget : public <a href="qvbox.html">QVBox</a> { public: MyWidget( <a href="qwidget.html">QWidget</a> *parent=0, const char *name=0 ); }; <a name="f555"></a>MyWidget::MyWidget( <a href="qwidget.html">QWidget</a> *parent, const char *name ) : <a href="qvbox.html">QVBox</a>( parent, name ) { <a href="qpushbutton.html">QPushButton</a> *quit = new <a href="qpushbutton.html">QPushButton</a>( "Quit", this, "quit" ); quit-><a href="qwidget.html#setFont">setFont</a>( QFont( "Times", 18, QFont::Bold ) ); <a href="qobject.html#connect">connect</a>( quit, SIGNAL(<a href="qbutton.html#clicked">clicked</a>()), qApp, SLOT(<a href="qapplication.html#quit">quit</a>()) ); <a href="qgrid.html">QGrid</a> *grid = new <a href="qgrid.html">QGrid</a>( 4, this ); for( int r = 0 ; r < 4 ; r++ ) for( int c = 0 ; c < 4 ; c++ ) (void)new LCDRange( grid ); } int main( int argc, char **argv ) { <a href="qapplication.html">QApplication</a> a( argc, argv ); MyWidget w; a.<a href="qapplication.html#setMainWidget">setMainWidget</a>( &w ); w.<a href="qwidget.html#show">show</a>(); return a.<a href="qapplication.html#exec">exec</a>(); } </pre> <p> <h2> Line-by-line Walkthrough </h2> <a name="1"></a><p> <pre> class LCDRange : public <a href="qvbox.html">QVBox</a> { public: LCDRange( <a href="qwidget.html">QWidget</a> *parent=0, const char *name=0 ); }; </pre> <p> The LCDRange widget is a widget without any API. It just has a constructor. This sort of widget is not very useful, so we'll add some API later. <p> <pre> LCDRange::LCDRange( <a href="qwidget.html">QWidget</a> *parent, const char *name ) : <a href="qvbox.html">QVBox</a>( parent, name ) { <a href="qlcdnumber.html">QLCDNumber</a> *lcd = new <a href="qlcdnumber.html">QLCDNumber</a>( 2, this, "lcd" ); <a href="qslider.html">QSlider</a> * slider = new <a href="qslider.html">QSlider</a>( Horizontal, this, "slider" ); <a name="x2325"></a> slider-><a href="qrangecontrol.html#setRange">setRange</a>( 0, 99 ); <a name="x2326"></a> slider-><a href="qslider.html#setValue">setValue</a>( 0 ); <a name="x2327"></a><a name="x2324"></a> <a href="qobject.html#connect">connect</a>( slider, SIGNAL(<a href="qslider.html#valueChanged">valueChanged</a>(int)), lcd, SLOT(<a href="qlcdnumber.html#display">display</a>(int)) ); } </pre> <p> This is lifted straight from the <a href="tutorial1-05.html#constructor">MyWidget constructor</a> in Chapter 5. The only differences are that the button is left out and the class is renamed. <p> <pre> class MyWidget : public <a href="qvbox.html">QVBox</a> { public: MyWidget( <a href="qwidget.html">QWidget</a> *parent=0, const char *name=0 ); }; </pre> <p> MyWidget, too, contains no API except a constructor. <p> <pre> MyWidget::MyWidget( <a href="qwidget.html">QWidget</a> *parent, const char *name ) : <a href="qvbox.html">QVBox</a>( parent, name ) { <a href="qpushbutton.html">QPushButton</a> *quit = new <a href="qpushbutton.html">QPushButton</a>( "Quit", this, "quit" ); <a name="x2328"></a> quit-><a href="qwidget.html#setFont">setFont</a>( QFont( "Times", 18, QFont::Bold ) ); <a name="x2321"></a> <a href="qobject.html#connect">connect</a>( quit, SIGNAL(<a href="qbutton.html#clicked">clicked</a>()), qApp, SLOT(<a href="qapplication.html#quit">quit</a>()) ); </pre> <p> The push button that used to be in what is now LCDRange has been separated so that we can have one "Quit" button and many LCDRange objects. <p> <pre> <a href="qgrid.html">QGrid</a> *grid = new <a href="qgrid.html">QGrid</a>( 4, this ); </pre> <p> We create a <a href="qgrid.html">QGrid</a> object with four columns. The QGRid widget automatically arranges its children in rows and columns; you can specify the number of rows or of columns, and QGrid will discover its new children and fit them into the grid. <p> <pre> for( int r = 0 ; r < 4 ; r++ ) for( int c = 0 ; c < 4 ; c++ ) (void)new LCDRange( grid ); </pre> <p> Four columns, four rows. <p> We create 4*4 LCDRanges, all of which are children of the grid object. The QGrid widget will arrange them. <p> <pre> } </pre> <p> That's all. <p> <h2> Behavior </h2> <a name="2"></a><p> This program shows how easy it is to use many widgets at a time. Each one behaves like the slider and LCD number in the previous chapter. Again, the difference lies in the implementation. <p> (See <a href="tutorial1-01.html#compiling">Compiling</a> for how to create a makefile and build the application.) <p> <h2> Exercises </h2> <a name="3"></a><p> Initialize each slider with a different/random value on startup. <p> The source contains three occurrences of "4". What happens if you change the one in the <a href="qgrid.html">QGrid</a> constructor call? What about the other two? Why is this? <p> You're now ready for <a href="tutorial1-07.html">Chapter 7.</a> <p> [<a href="tutorial1-05.html">Previous tutorial</a>] [<a href="tutorial1-07.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>