~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-t11.html">Chapter 11</a>]

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

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

</p>

<h1 align="center">Qt Tutorial 12 - Hanging in the Air the Way Bricks Don't</h1>

<p>Files:</p>

<ul>

<li><a href="tutorial-t12-cannonfield-cpp.html">tutorial/t12/cannonfield.cpp</a></li>

<li><a href="tutorial-t12-cannonfield-h.html">tutorial/t12/cannonfield.h</a></li>

<li><a href="tutorial-t12-lcdrange-cpp.html">tutorial/t12/lcdrange.cpp</a></li>

<li><a href="tutorial-t12-lcdrange-h.html">tutorial/t12/lcdrange.h</a></li>

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

</ul>

<center><img src="images/t12.png" alt="Screenshot of tutorial twelve" /></center><p>In this example, we extend our <tt>LCDRange</tt> class to include a text label. We also provide something to shoot at.</p>

<h2>Line by Line Walkthrough</h2>

<h3><a href="tutorial-t12-lcdrange-h.html">t12/lcdrange.h</a></h3>

<p>The <tt>LCDRange</tt> now has a text label.</p>

<pre>  class QLabel;

class QSlider;</pre>

<p>We forward declare <a href="qlabel.html">QLabel</a> and <a href="qslider.html">QSlider</a> because we want to use pointers to them in the class definition. We could also use <tt>#include</tt>, but that would slow down compilation for nothing.</p>

<pre>  class LCDRange : public QWidget

{

Q_OBJECT

public:

LCDRange(QWidget *parent = 0);

LCDRange(const QString &text, QWidget *parent = 0);</pre>

<p>We have added a new constructor that sets the label text in addition to the parent.</p>

<pre>  QString text() const;</pre>

<p>This function returns the label text.</p>

<pre>  void setText(const QString &text);</pre>

<p>This slot sets the label text.</p>

<pre>  private:

void init();</pre>

<p>Because we now have two constructors, we have chosen to put the common initialization in the private <tt>init()</tt> function.</p>

<pre>  QLabel *label;</pre>

<p>We also have a new private variable: a <a href="qlabel.html">QLabel</a>. <a href="qlabel.html">QLabel</a> is one of Qt's standard widgets and can show a text or a <a href="qpixmap.html">QPixmap</a> with or without a frame.</p>

<h3><a href="tutorial-t12-lcdrange-cpp.html">t12/lcdrange.cpp</a></h3>

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

: QWidget(parent)

{

init();

}</pre>

<p>This constructor calls the <tt>init()</tt> function, which contains the common initialization code.</p>

<pre>  LCDRange::LCDRange(const QString &text, QWidget *parent)

: QWidget(parent)

{

init();

setText(text);

}</pre>

<p>This constructor first calls <tt>init()</tt> and then sets the label text.</p>

<pre>  void LCDRange::init()

{

QLCDNumber *lcd = new QLCDNumber(2);

slider = new QSlider(Qt::Horizontal);

slider->setRange(0, 99);

slider->setValue(0);

label = new QLabel;

label->setAlignment(Qt::AlignHCenter | Qt::AlignTop);

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

lcd, SLOT(display(int)));

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

this, SIGNAL(valueChanged(int)));

QVBoxLayout *layout = new QVBoxLayout;

layout->addWidget(lcd);

layout->addWidget(slider);

layout->addWidget(label);

setLayout(layout);

setFocusProxy(slider);

}</pre>

100

<p>The setup of <tt>lcd</tt> and <tt>slider</tt> is the same as in the previous chapter. Next we create a <a href="qlabel.html">QLabel</a> and tell it to align the contents centered horizontally and to the top vertically. The <a href="qobject.html#connect">QObject::connect</a>() calls have also been taken from the previous chapter.</p>

101

<pre>  QString LCDRange::text() const

102

{

103

return label->text();

104

}</pre>

105

<p>This function returns the label text.</p>

106

<pre>  void LCDRange::setText(const QString &text)

107

{

108

label->setText(text);

109

}</pre>

110

<p>This function sets the label text.</p>

111

112

<h3><a href="tutorial-t12-cannonfield-h.html">t12/cannonfield.h</a></h3>

113

<p>The <tt>CannonField</tt> now has two new signals: <tt>hit()</tt> and <tt>missed()</tt>. In addition, it contains a target.</p>

114

<pre>  void newTarget();</pre>

115

<p>This slot creates a target at a new position.</p>

116

<pre>  signals:

117

void hit();

118

void missed();</pre>

119

<p>The <tt>hit()</tt> signal is emitted when a shot hits the target. The <tt>missed()</tt> signal is emitted when the shot moves beyond the right or bottom edge of the widget (i.e., it is certain that it has not and will not hit the target).</p>

120

<pre>  void paintTarget(QPainter &painter);</pre>

121

<p>This private function paints the target.</p>

122

<pre>  QRect targetRect() const;</pre>

123

<p>This private function returns the enclosing rectangle of the target.</p>

124

<pre>  QPoint target;</pre>

125

<p>This private variable contains the center point of the target.</p>

126

127

<h3><a href="tutorial-t12-cannonfield-cpp.html">t12/cannonfield.cpp</a></h3>

128

<pre>  #include <stdlib.h></pre>

129

<p>We include the <tt><stdlib.h></tt> header file because we need the <tt>rand()</tt> function.</p>

130

<pre>  newTarget();</pre>

131

<p>This line has been added to the constructor. It creates a "random" position for the target. In fact, the <tt>newTarget()</tt> function will try to paint the target. Because we are in a constructor, the <tt>CannonField</tt> widget is invisible. Qt guarantees that no harm is done when calling <a href="qwidget.html#update">QWidget::update</a>() on a hidden widget.</p>

132

<pre>  void CannonField::newTarget()

133

{

134

static bool firstTime = true;

135

136

if (firstTime) {

137

firstTime = false;

138

QTime midnight(0, 0, 0);

139

srand(midnight.secsTo(QTime::currentTime()));

140

}

141

target = QPoint(200 + rand() % 190, 10 + rand() % 255);

142

update();

143

}</pre>

144

<p>This private function creates a target center point at a new random position.</p>

145

<p>We use the <tt>rand()</tt> function to fetch random integers. The <tt>rand()</tt> function normally returns the same series of numbers each time you run a program. This would make the target appear at the same position every time. To avoid this, we must set a random seed the first time this function is called. The random seed must also be random in order to avoid equal random number series. The solution is to use the number of seconds that have passed since midnight as a pseudo-random value.</p>

146

<p>First we create a static <tt>bool</tt> local variable. A static variable like this one is guaranteed to keep its value between calls to the function.</p>

147

<p>The <tt>if</tt> test will succeed only the first time this function is called because we set <tt>firstTime</tt> to <tt>false</tt> inside the <tt>if</tt> block.</p>

148

<p>Then we create the <a href="qtime.html">QTime</a> object <tt>midnight</tt>, which represents the time 00:00:00. Next we fetch the number of seconds from midnight until now and use it as a random seed. See the documentation for <a href="qdate.html">QDate</a>, <a href="qtime.html">QTime</a>, and <a href="qdatetime.html">QDateTime</a> for more information.</p>

149

<p>Finally we calculate the target's center point. We keep it within the rectangle (<i>x</i> = 200, <i>y</i> = 35, <i>width</i> = 190, <i>height</i> = 255), i.e., the possible <i>x</i> and <i>y</i> values are 200 to 389 and 35 to 289, respectively) in a coordinate system where we put <i>y</i> position 0 at the bottom edge of the widget and let <i>y</i> values increase upwards <i>x</i> is as normal, with 0 at the left edge and with <i>x</i> values increasing to the right.</p>

150

<p>By experimentation we have found this to always be in reach of the shot.</p>

151

<pre>  void CannonField::moveShot()

152

{

153

QRegion region = shotRect();

154

++timerCount;

155

156

QRect shotR = shotRect();</pre>

157

<p>This part of the timer event has not changed from the previous chapter.</p>

158

<pre>  if (shotR.intersects(targetRect())) {

159

autoShootTimer->stop();

160

emit hit();</pre>

161

<p>This <tt>if</tt> statement checks whether the shot rectangle intersects the target rectangle. If it does, the shot has hit the target (ouch!). We stop the shoot timer and emit the <tt>hit()</tt> signal to tell the outside world that a target was destroyed, and return.</p>

162

<p>Note that we could have created a new target on the spot, but because the <tt>CannonField</tt> is a component we leave such decisions to the user of the component.</p>

163

<pre>  } else if (shotR.x() > width() || shotR.y() > height()) {

164

autoShootTimer->stop();

165

emit missed();</pre>

166

<p>This <tt>if</tt> statement is the same as in the previous chapter, except that it now emits the <tt>missed()</tt> signal to tell the outside world about the failure.</p>

167

168

<p>And the rest of the function is as before.</p>

169

<p><tt>CannonField::paintEvent()</tt> is as before, except that this has been added:</p>

170

<pre>  paintTarget(painter);</pre>

171

<p>This line makes sure that the target is also painted when necessary.</p>

172

<pre>  void CannonField::paintTarget(QPainter &painter)

173

{

174

painter.setPen(Qt::black);

175

painter.setBrush(Qt::red);

176

painter.drawRect(targetRect());

177

}</pre>

178

<p>This private function paints the target; a rectangle filled with red and with a black outline.</p>

179

<pre>  QRect CannonField::targetRect() const

180

{

181

QRect result(0, 0, 20, 10);

182

result.moveCenter(QPoint(target.x(), height() - 1 - target.y()));

183

return result;

184

}</pre>

185

<p>This private function returns the enclosing rectangle of the target. Remember from <tt>newTarget()</tt> that the <tt>target</tt> point uses <i>y</i> coordinate 0 at the bottom of the widget. We calculate the point in widget coordinates before we call <a href="qrect.html#moveCenter">QRect::moveCenter</a>().</p>

186

<p>The reason we have chosen this coordinate mapping is to fix the distance between the target and the bottom of the widget. Remember that the widget can be resized by the user or the program at any time.</p>

187

188

189

<p>There are no new members in the <tt>MyWidget</tt> class, but we have slightly changed the constructor to set the new <tt>LCDRange</tt> text labels.</p>

190

<pre>  LCDRange *angle = new LCDRange("ANGLE");</pre>

191

<p>We set the angle text label to "ANGLE".</p>

192

<pre>  LCDRange *force = new LCDRange("FORCE");</pre>

193

<p>We set the force text label to "FORCE".</p>

194

195

<h2>Running the Application</h2>

196

<p>The <tt>LCDRange</tt> widgets look a bit strange: When resizing <tt>MyWidget</tt>, the built-in layout management in <a href="qvboxlayout.html">QVBoxLayout</a> gives the labels too much space and the rest not enough; making the space between the two <tt>LCDRange</tt> widgets change size. We'll fix that in the next chapter.</p>

197

198

<h2>Exercises</h2>

199

<p>Make a cheat button that, when pressed, makes the <tt>CannonField</tt> display the shot trajectory for five seconds.</p>

200

<p>If you did the "round shot" exercise from the previous chapter, try changing the <tt>shotRect()</tt> to a <tt>shotRegion()</tt> that returns a <a href="qregion.html">QRegion</a> so you can have really accurate collision detection.</p>

201

<p>Make a moving target.</p>

202

<p>Make sure that the target is always created entirely on-screen.</p>

203

<p>Make sure that the widget cannot be resized so that the target isn't visible. [Hint: <a href="qwidget.html#minimumSize-prop">QWidget::setMinimumSize</a>() is your friend.]</p>

204

<p>Not easy; make it possible to have several shots in the air at the same time. [Hint: Make a <tt>Shot</tt> class.]</p>

205

<p>

206

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

207

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

208

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

209

</p>

210

211

212

213

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

214

215

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

216

</html>

Older »