1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
|
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en_US" lang="en_US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- wiggly.qdoc -->
<title>Qt 4.8: Wiggly Example</title>
<link rel="stylesheet" type="text/css" href="style/offline.css" />
</head>
<body>
<div class="header" id="qtdocheader">
<div class="content">
<a href="index.html" class="qtref"><span>Qt Reference Documentation</span></a>
</div>
<div class="breadcrumb toolblock">
<ul>
<li class="first"><a href="index.html">Home</a></li>
<!-- Breadcrumbs go here -->
<li><a href="all-examples.html">Examples</a></li>
<li>Wiggly Example</li>
</ul>
</div>
</div>
<div class="content mainContent">
<div class="toc">
<h3><a name="toc">Contents</a></h3>
<ul>
<li class="level1"><a href="#dialog-class-definition">Dialog Class Definition</a></li>
<li class="level1"><a href="#dialog-class-implementation">Dialog Class Implementation</a></li>
<li class="level1"><a href="#wigglywidget-class-definition">WigglyWidget Class Definition</a></li>
<li class="level1"><a href="#wigglywidget-class-implementation">WigglyWidget Class Implementation</a></li>
</ul>
</div>
<h1 class="title">Wiggly Example</h1>
<span class="subtitle"></span>
<!-- $$$widgets/wiggly-description -->
<div class="descr"> <a name="details"></a>
<p>Files:</p>
<ul>
<li><a href="widgets-wiggly-dialog-cpp.html">widgets/wiggly/dialog.cpp</a></li>
<li><a href="widgets-wiggly-dialog-h.html">widgets/wiggly/dialog.h</a></li>
<li><a href="widgets-wiggly-wigglywidget-cpp.html">widgets/wiggly/wigglywidget.cpp</a></li>
<li><a href="widgets-wiggly-wigglywidget-h.html">widgets/wiggly/wigglywidget.h</a></li>
<li><a href="widgets-wiggly-main-cpp.html">widgets/wiggly/main.cpp</a></li>
<li><a href="widgets-wiggly-wiggly-pro.html">widgets/wiggly/wiggly.pro</a></li>
</ul>
<p>The Wiggly example shows how to animate a widget using <a href="qbasictimer.html">QBasicTimer</a> and <a href="qobject.html#timerEvent">timerEvent()</a>. In addition, the example demonstrates how to use <a href="qfontmetrics.html">QFontMetrics</a> to determine the size of text on screen.<p class="centerAlign"><img src="images/wiggly-example.png" alt="Screenshot of the Wiggly example" /></p><p><a href="qbasictimer.html">QBasicTimer</a> is a low-level class for timers. Unlike <a href="qtimer.html">QTimer</a>, <a href="qbasictimer.html">QBasicTimer</a> doesn't inherit from <a href="qobject.html">QObject</a>; instead of emitting a <a href="qtimer.html#timeout">timeout()</a> signal when a certain amount of time has passed, it sends a <a href="qtimerevent.html">QTimerEvent</a> to a <a href="qobject.html">QObject</a> of our choice. This makes <a href="qbasictimer.html">QBasicTimer</a> a more lightweight alternative to <a href="qtimer.html">QTimer</a>. Qt's built-in widgets use it internally, and it is provided in Qt's API for highly-optimized applications (e.g., <a href="qt-embedded-linux.html">Qt for Embedded Linux</a> applications).</p>
<p>The example consists of two classes:</p>
<ul>
<li><tt>WigglyWidget</tt> is the custom widget displaying the text in a wiggly line.</li>
<li><tt>Dialog</tt> is the dialog widget allowing the user to enter a text. It combines a <tt>WigglyWidget</tt> and a <tt>QLineEdit</tt>.</li>
</ul>
<p>We will first take a quick look at the <tt>Dialog</tt> class, then we will review the <tt>WigglyWidget</tt> class.</p>
<a name="dialog-class-definition"></a>
<h2>Dialog Class Definition</h2>
<pre class="cpp"> <span class="keyword">class</span> Dialog : <span class="keyword">public</span> <span class="type"><a href="qdialog.html">QDialog</a></span>
{
Q_OBJECT
<span class="keyword">public</span>:
Dialog(<span class="type"><a href="qwidget.html">QWidget</a></span> <span class="operator">*</span>parent <span class="operator">=</span> <span class="number">0</span><span class="operator">,</span> <span class="type">bool</span> smallScreen <span class="operator">=</span> <span class="keyword">false</span>);
};</pre>
<p>The <tt>Dialog</tt> class provides a dialog widget that allows the user to enter a text. The text is then rendered by <tt>WigglyWidget</tt>.</p>
<a name="dialog-class-implementation"></a>
<h2>Dialog Class Implementation</h2>
<pre class="cpp"> Dialog<span class="operator">::</span>Dialog(<span class="type"><a href="qwidget.html">QWidget</a></span> <span class="operator">*</span>parent<span class="operator">,</span> <span class="type">bool</span> smallScreen)
: <span class="type"><a href="qdialog.html">QDialog</a></span>(parent)
{
WigglyWidget <span class="operator">*</span>wigglyWidget <span class="operator">=</span> <span class="keyword">new</span> WigglyWidget;
<span class="type"><a href="qlineedit.html">QLineEdit</a></span> <span class="operator">*</span>lineEdit <span class="operator">=</span> <span class="keyword">new</span> <span class="type"><a href="qlineedit.html">QLineEdit</a></span>;
<span class="type"><a href="qvboxlayout.html">QVBoxLayout</a></span> <span class="operator">*</span>layout <span class="operator">=</span> <span class="keyword">new</span> <span class="type"><a href="qvboxlayout.html">QVBoxLayout</a></span>;
layout<span class="operator">-</span><span class="operator">></span>addWidget(wigglyWidget);
layout<span class="operator">-</span><span class="operator">></span>addWidget(lineEdit);
setLayout(layout);
<span class="preprocessor">#ifdef QT_SOFTKEYS_ENABLED</span>
<span class="type"><a href="qaction.html">QAction</a></span> <span class="operator">*</span>exitAction <span class="operator">=</span> <span class="keyword">new</span> <span class="type"><a href="qaction.html">QAction</a></span>(tr(<span class="string">"Exit"</span>)<span class="operator">,</span> <span class="keyword">this</span>);
exitAction<span class="operator">-</span><span class="operator">></span>setSoftKeyRole(<span class="type"><a href="qaction.html">QAction</a></span><span class="operator">::</span>NegativeSoftKey);
connect (exitAction<span class="operator">,</span> SIGNAL(triggered())<span class="operator">,</span><span class="keyword">this</span><span class="operator">,</span> SLOT(close()));
addAction (exitAction);
<span class="type"><a href="qt.html">Qt</a></span><span class="operator">::</span>WindowFlags flags <span class="operator">=</span> windowFlags();
flags <span class="operator">|</span><span class="operator">=</span> <span class="type"><a href="qt.html">Qt</a></span><span class="operator">::</span>WindowSoftkeysVisibleHint;
setWindowFlags(flags);
<span class="preprocessor">#endif</span>
connect(lineEdit<span class="operator">,</span> SIGNAL(textChanged(<span class="type"><a href="qstring.html">QString</a></span>))<span class="operator">,</span>
wigglyWidget<span class="operator">,</span> SLOT(setText(<span class="type"><a href="qstring.html">QString</a></span>)));
<span class="keyword">if</span> (<span class="operator">!</span>smallScreen){
lineEdit<span class="operator">-</span><span class="operator">></span>setText(tr(<span class="string">"Hello world!"</span>));
}
<span class="keyword">else</span>{
lineEdit<span class="operator">-</span><span class="operator">></span>setText(tr(<span class="string">"Hello!"</span>));
}
setWindowTitle(tr(<span class="string">"Wiggly"</span>));
resize(<span class="number">360</span><span class="operator">,</span> <span class="number">145</span>);
}</pre>
<p>In the constructor we create a wiggly widget along with a <a href="qlineedit.html">line edit</a>, and we put the two widgets in a vertical layout. We connect the line edit's <a href="qlineedit.html#textChanged">textChanged()</a> signal to the wiggly widget's <tt>setText()</tt> slot to obtain the real time interaction with the wiggly widget. The widget's default text is "Hello world!".</p>
<a name="wigglywidget-class-definition"></a>
<h2>WigglyWidget Class Definition</h2>
<pre class="cpp"> <span class="keyword">class</span> WigglyWidget : <span class="keyword">public</span> <span class="type"><a href="qwidget.html">QWidget</a></span>
{
Q_OBJECT
<span class="keyword">public</span>:
WigglyWidget(<span class="type"><a href="qwidget.html">QWidget</a></span> <span class="operator">*</span>parent <span class="operator">=</span> <span class="number">0</span>);
<span class="keyword">public</span> <span class="keyword">slots</span>:
<span class="type">void</span> setText(<span class="keyword">const</span> <span class="type"><a href="qstring.html">QString</a></span> <span class="operator">&</span>newText) { text <span class="operator">=</span> newText; }
<span class="keyword">protected</span>:
<span class="type">void</span> paintEvent(<span class="type"><a href="qpaintevent.html">QPaintEvent</a></span> <span class="operator">*</span>event);
<span class="type">void</span> timerEvent(<span class="type"><a href="qtimerevent.html">QTimerEvent</a></span> <span class="operator">*</span>event);
<span class="keyword">private</span>:
<span class="type"><a href="qbasictimer.html">QBasicTimer</a></span> timer;
<span class="type"><a href="qstring.html">QString</a></span> text;
<span class="type">int</span> step;
};</pre>
<p>The <tt>WigglyWidget</tt> class provides the wiggly line displaying the text. We subclass <a href="qwidget.html">QWidget</a> and reimplement the standard <a href="qwidget.html#paintEvent">paintEvent()</a> and <a href="qobject.html#timerEvent">timerEvent()</a> functions to draw and update the widget. In addition we implement a public <tt>setText()</tt> slot that sets the widget's text.</p>
<p>The <tt>timer</tt> variable, of type <a href="qbasictimer.html">QBasicTimer</a>, is used to update the widget at regular intervals, making the widget move. The <tt>text</tt> variable is used to store the currently displayed text, and <tt>step</tt> to calculate position and color for each character on the wiggly line.</p>
<a name="wigglywidget-class-implementation"></a>
<h2>WigglyWidget Class Implementation</h2>
<pre class="cpp"> WigglyWidget<span class="operator">::</span>WigglyWidget(<span class="type"><a href="qwidget.html">QWidget</a></span> <span class="operator">*</span>parent)
: <span class="type"><a href="qwidget.html">QWidget</a></span>(parent)
{
setBackgroundRole(<span class="type"><a href="qpalette.html">QPalette</a></span><span class="operator">::</span>Midlight);
setAutoFillBackground(<span class="keyword">true</span>);
<span class="type"><a href="qfont.html">QFont</a></span> newFont <span class="operator">=</span> font();
newFont<span class="operator">.</span>setPointSize(newFont<span class="operator">.</span>pointSize() <span class="operator">+</span> <span class="number">20</span>);
setFont(newFont);
step <span class="operator">=</span> <span class="number">0</span>;
timer<span class="operator">.</span>start(<span class="number">60</span><span class="operator">,</span> <span class="keyword">this</span>);
}</pre>
<p>In the constructor, we make the widget's background slightly lighter than the usual background using the <a href="qpalette.html#ColorRole-enum">QPalette::Midlight</a> color role. The background role defines the brush from the widget's palette that Qt uses to paint the background. Then we enlarge the widget's font with 20 points.</p>
<p>Finally we start the timer; the call to <a href="qbasictimer.html#start">QBasicTimer::start</a>() makes sure that <i>this</i> particular wiggly widget will receive the timer events generated when the timer times out (every 60 milliseconds).</p>
<pre class="cpp"> <span class="type">void</span> WigglyWidget<span class="operator">::</span>paintEvent(<span class="type"><a href="qpaintevent.html">QPaintEvent</a></span> <span class="operator">*</span> <span class="comment">/* event */</span>)
{
<span class="keyword">static</span> <span class="keyword">const</span> <span class="type">int</span> sineTable<span class="operator">[</span><span class="number">16</span><span class="operator">]</span> <span class="operator">=</span> {
<span class="number">0</span><span class="operator">,</span> <span class="number">38</span><span class="operator">,</span> <span class="number">71</span><span class="operator">,</span> <span class="number">92</span><span class="operator">,</span> <span class="number">100</span><span class="operator">,</span> <span class="number">92</span><span class="operator">,</span> <span class="number">71</span><span class="operator">,</span> <span class="number">38</span><span class="operator">,</span> <span class="number">0</span><span class="operator">,</span> <span class="operator">-</span><span class="number">38</span><span class="operator">,</span> <span class="operator">-</span><span class="number">71</span><span class="operator">,</span> <span class="operator">-</span><span class="number">92</span><span class="operator">,</span> <span class="operator">-</span><span class="number">100</span><span class="operator">,</span> <span class="operator">-</span><span class="number">92</span><span class="operator">,</span> <span class="operator">-</span><span class="number">71</span><span class="operator">,</span> <span class="operator">-</span><span class="number">38</span>
};
<span class="type"><a href="qfontmetrics.html">QFontMetrics</a></span> metrics(font());
<span class="type">int</span> x <span class="operator">=</span> (width() <span class="operator">-</span> metrics<span class="operator">.</span>width(text)) <span class="operator">/</span> <span class="number">2</span>;
<span class="type">int</span> y <span class="operator">=</span> (height() <span class="operator">+</span> metrics<span class="operator">.</span>ascent() <span class="operator">-</span> metrics<span class="operator">.</span>descent()) <span class="operator">/</span> <span class="number">2</span>;
<span class="type"><a href="qcolor.html">QColor</a></span> color;</pre>
<p>The <tt>paintEvent()</tt> function is called whenever a <a href="qpaintevent.html">QPaintEvent</a> is sent to the widget. Paint events are sent to widgets that need to update themselves, for instance when part of a widget is exposed because a covering widget was moved. For the wiggly widget, a paint event will also be generated every 60 milliseconds from the <tt>timerEvent()</tt> slot.</p>
<p>The <tt>sineTable</tt> represents y-values of the sine curve, multiplied by 100. It is used to make the wiggly widget move along the sine curve.</p>
<p>The <a href="qfontmetrics.html">QFontMetrics</a> object provides information about the widget's font. The <tt>x</tt> variable is the horizontal position where we start drawing the text. The <tt>y</tt> variable is the vertical position of the text's base line. Both variables are computed so that the text is horizontally and vertically centered. To compute the base line, we take into account the font's ascent (the height of the font above the base line) and font's descent (the height of the font below the base line). If the descent equals the ascent, they cancel out each other and the base line is at <tt>height()</tt> / 2.</p>
<pre class="cpp"> <span class="type"><a href="qpainter.html">QPainter</a></span> painter(<span class="keyword">this</span>);
<span class="keyword">for</span> (<span class="type">int</span> i <span class="operator">=</span> <span class="number">0</span>; i <span class="operator"><</span> text<span class="operator">.</span>size(); <span class="operator">+</span><span class="operator">+</span>i) {
<span class="type">int</span> index <span class="operator">=</span> (step <span class="operator">+</span> i) <span class="operator">%</span> <span class="number">16</span>;
color<span class="operator">.</span>setHsv((<span class="number">15</span> <span class="operator">-</span> index) <span class="operator">*</span> <span class="number">16</span><span class="operator">,</span> <span class="number">255</span><span class="operator">,</span> <span class="number">191</span>);
painter<span class="operator">.</span>setPen(color);
painter<span class="operator">.</span>drawText(x<span class="operator">,</span> y <span class="operator">-</span> ((sineTable<span class="operator">[</span>index<span class="operator">]</span> <span class="operator">*</span> metrics<span class="operator">.</span>height()) <span class="operator">/</span> <span class="number">400</span>)<span class="operator">,</span>
<span class="type"><a href="qstring.html">QString</a></span>(text<span class="operator">[</span>i<span class="operator">]</span>));
x <span class="operator">+</span><span class="operator">=</span> metrics<span class="operator">.</span>width(text<span class="operator">[</span>i<span class="operator">]</span>);
}
}</pre>
<p>Each time the <tt>paintEvent()</tt> function is called, we create a <a href="qpainter.html">QPainter</a> object <tt>painter</tt> to draw the contents of the widget. For each character in <tt>text</tt>, we determine the color and the position on the wiggly line based on <tt>step</tt>. In addition, <tt>x</tt> is incremented by the character's width.</p>
<p>For simplicity, we assume that QFontMetrics::width(<tt>text</tt>) returns the sum of the individual character widths (QFontMetrics::width(<tt>text[i]</tt>)). In practice, this is not always the case because QFontMetrics::width(<tt>text</tt>) also takes into account the kerning between certain letters (e.g., 'A' and 'V'). The result is that the text isn't perfectly centered. You can verify this by typing "AVAVAVAVAVAV" in the line edit.</p>
<pre class="cpp"> <span class="type">void</span> WigglyWidget<span class="operator">::</span>timerEvent(<span class="type"><a href="qtimerevent.html">QTimerEvent</a></span> <span class="operator">*</span>event)
{
<span class="keyword">if</span> (event<span class="operator">-</span><span class="operator">></span>timerId() <span class="operator">=</span><span class="operator">=</span> timer<span class="operator">.</span>timerId()) {
<span class="operator">+</span><span class="operator">+</span>step;
update();
} <span class="keyword">else</span> {
<span class="type"><a href="qwidget.html">QWidget</a></span><span class="operator">::</span>timerEvent(event);
}</pre>
<p>The <tt>timerEvent()</tt> function receives all the timer events that are generated for this widget. If a timer event is sent from the widget's <a href="qbasictimer.html">QBasicTimer</a>, we increment <tt>step</tt> to make the text move, and call <a href="qwidget.html#update">QWidget::update</a>() to refresh the display. Any other timer event is passed on to the base class's implementation of the <a href="qobject.html#timerEvent">timerEvent()</a> function.</p>
<p>The <a href="qwidget.html#update">QWidget::update</a>() slot does not cause an immediate repaint; instead the slot schedules a paint event for processing when Qt returns to the main event loop. The paint events are then handled by <tt>WigglyWidget</tt>'s <tt>paintEvent()</tt> function.</p>
</div>
<!-- @@@widgets/wiggly -->
<div class="ft">
<span></span>
</div>
</div>
<div class="footer">
<p>
<acronym title="Copyright">©</acronym> 2012 Nokia Corporation and/or its
subsidiaries. Documentation contributions included herein are the copyrights of
their respective owners.</p>
<br />
<p>
The documentation provided herein is licensed under the terms of the
<a href="http://www.gnu.org/licenses/fdl.html">GNU Free Documentation
License version 1.3</a> as published by the Free Software Foundation.</p>
<p>
Documentation sources may be obtained from <a href="http://www.qt-project.org">
www.qt-project.org</a>.</p>
<br />
<p>
Nokia, Qt and their respective logos are trademarks of Nokia Corporation
in Finland and/or other countries worldwide. All other trademarks are property
of their respective owners. <a title="Privacy Policy"
href="http://en.gitorious.org/privacy_policy/">Privacy Policy</a></p>
</div>
</body>
</html>
|
