~oif-team/ubuntu/natty/qt4-x11/xi2.1

<td width="1">  </td><td class="postheader" 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>

[Previous: <a href="tutorial-t5.html">Chapter 5</a>]

[<a href="tutorial.html">Qt Tutorial</a>]

[Next: <a href="tutorial-t7.html">Chapter 7</a>]

</p>

<h1 align="center">Qt Tutorial 6 - Building Blocks Galore!</h1>

<p>Files:</p>

<ul>

<li><a href="tutorial-t6-main-cpp.html">tutorial/t6/main.cpp</a></li>

</ul>

<center><img src="images/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>

<pre>  /****************************************************************

** Qt tutorial 6

****************************************************************/

#include <QApplication>

#include <QFont>

#include <QGridLayout>

#include <QLCDNumber>

#include <QPushButton>

#include <QSlider>

#include <QVBoxLayout>

#include <QWidget>

class LCDRange : public QWidget

{

public:

LCDRange(QWidget *parent = 0);

};

LCDRange::LCDRange(QWidget *parent)

: QWidget(parent)

{

QLCDNumber *lcd = new QLCDNumber(2);

QSlider *slider = new QSlider(Qt::Horizontal);

slider->setRange(0, 99);

slider->setValue(0);

connect(slider, SIGNAL(valueChanged(int)),

lcd, SLOT(display(int)));

QVBoxLayout *layout = new QVBoxLayout;

layout->addWidget(lcd);

layout->addWidget(slider);

setLayout(layout);

}

class MyWidget : public QWidget

{

public:

MyWidget(QWidget *parent = 0);

};

MyWidget::MyWidget(QWidget *parent)

: QWidget(parent)

{

QPushButton *quit = new QPushButton("Quit");

quit->setFont(QFont("Times", 18, QFont::Bold));

connect(quit, SIGNAL(clicked()), qApp, SLOT(quit()));

QGridLayout *grid = new QGridLayout;

for (int row = 0; row < 4; ++row) {

for (int column = 0; column < 4; ++column) {

grid->addWidget(new LCDRange, row, column);

}

QVBoxLayout *layout = new QVBoxLayout;

layout->addWidget(quit);

layout->addLayout(grid);

setLayout(layout);

}

int main(int argc, char *argv[])

{

QApplication app(argc, argv);

100

MyWidget widget;

101

widget.show();

102

return app.exec();

103

}</pre>

104

105

<h2>Line by Line Walkthrough</h2>

106

<pre>  class LCDRange : public QWidget

107

{

108

public:

109

LCDRange(QWidget *parent = 0);

110

};</pre>

111

<p>The <tt>LCDRange</tt> 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>

112

<pre>  LCDRange::LCDRange(QWidget *parent)

113

: QWidget(parent)

114

{

115

QLCDNumber *lcd = new QLCDNumber(2);

116

QSlider *slider = new QSlider(Qt::Horizontal);

117

slider->setRange(0, 99);

118

slider->setValue(0);

119

connect(slider, SIGNAL(valueChanged(int)),

120

lcd, SLOT(display(int)));

121

122

QVBoxLayout *layout = new QVBoxLayout;

123

layout->addWidget(lcd);

124

layout->addWidget(slider);

125

setLayout(layout);

126

}</pre>

127

<p>This is lifted straight from the <tt>MyWidget</tt> constructor in Chapter 5. The only differences are that the <b>Quit</b> button is left out and the class is renamed.</p>

128

<pre>  class MyWidget : public QWidget

129

{

130

public:

131

MyWidget(QWidget *parent = 0);

132

};</pre>

133

<p><tt>MyWidget</tt>, too, contains no API except a constructor.</p>

134

<pre>  MyWidget::MyWidget(QWidget *parent)

135

: QWidget(parent)

136

{

137

QPushButton *quit = new QPushButton("Quit");

138

quit->setFont(QFont("Times", 18, QFont::Bold));

139

connect(quit, SIGNAL(clicked()), qApp, SLOT(quit()));</pre>

140

<p>The push button that used to be in what is now <tt>LCDRange</tt> has been separated so that we can have one <b>Quit</b> button and many <tt>LCDRange</tt> objects.</p>

141

<pre>  QGridLayout *grid = new QGridLayout;</pre>

142

<p>We create a <a href="qwidget.html">QWidget</a> with a <a href="qgridlayout.html">QGridLayout</a> that will contain four columns. The <a href="qgridlayout.html">QGridLayout</a> automatically arranges its widgets in rows and columns; you can specify the row and column numbers when adding widgets to the layout, and <a href="qgridlayout.html">QGridLayout</a> will fit them into the grid.</p>

143

<pre>  for (int row = 0; row < 4; ++row) {

144

for (int column = 0; column < 4; ++column) {

145

grid->addWidget(new LCDRange, row, column);

146

}

147

}</pre>

148

<p>We create 16 <tt>LCDRange</tt> widgets, all of which are children of the grid object. The <a href="qgridlayout.html">QGridLayout</a> will arrange them in four columns.</p>

149

150

151

152

<h2>Running the Application</h2>

153

<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>

154

155

<h2>Exercises</h2>

156

<p>Initialize each slider with a different/random value on startup.</p>

157

<p>

158

[Previous: <a href="tutorial-t5.html">Chapter 5</a>]

159

[<a href="tutorial.html">Qt Tutorial</a>]

160

[Next: <a href="tutorial-t7.html">Chapter 7</a>]

161

</p>

162

163

164

165

<td width="40%" align="center"><a href="trademarks.html">Trademarks</a></td>

166

167

</tr></table></div></address></body>

168

</html>

Older »