<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<!-- /home/gvatteka/dev/qtjambi/4.3/scripts/../doc/src/examples/tutorial.qdoc -->
<head>
<title>Qt Jambi Tutorial 7 - One Thing Leads to Another</title>
<link href="classic.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1 align="center">Qt Jambi Tutorial 7 - One Thing Leads to Another<br /><small></small></h1>
<p align="center"><img src="images/tutorial7-example.png" alt="Screenshot of Chapter 7" /></p><p>This example shows how to create custom widgets with signals and slots, and how to connect them together in more complex ways.</p>
<a name="line-by-line-walkthrough"></a>
<h2>Line by Line Walkthrough</h2>
<p>This file is mainly lifted from <tt>BlocksGalore</tt> in Chapter 6; only the non-trivial changes are noted here.</p>
<p>The LCDRange class now includes three members besides the constructor. They make up an interface between this widget and other components in a program. Until now, <tt>LCDRange</tt> didn't really have an API at all. We will examine them as we stumble upon them in the code.</p>
<p>This class is for the most part equal to LCDRange from chapter 6, and only the changes are noted here.</p>
<pre> quit.setFont(new QFont("Times", 18, QFont.Weight.Bold.value()));</pre>
<p>We have added a private variable that will hold the number in the display.</p>
<pre> public final Signal1<Integer> valueChanged = new Signal1<Integer>();</pre>
<p>Here we declare our first custom signal: <tt>valueChanged</tt>. We will emit it whenever the value of the LCD changes. A signal is an instance of one of the signal classes, which are Signal1, Signal2 ... Signal9). The suffix number is equal to the number of arguments of the signal; the types of the arguments must be given as class generics. We want one argument (the value of the LCD display), so we use the Signal1 class with Integers. You already know how to connect to the signal. The signal can be connected to any method that takes an Integer.</p>
<p>We move on to the constructor:</p>
<pre> public LCDRange()
{
...
slider.valueChanged.connect(lcd, "display(int)");
slider.valueChanged.connect(valueChanged);
...
}</pre>
<p>We connect the sliders <tt>valueChanged</tt> signal to our <tt>display()</tt> slot, and to our own <tt>valueChanged</tt> signal. The signal you connect will be triggered by the signal to which it is connected.</p>
<p>Let's take a closer look at what happens when the user operates the slider. The slider sees that its value has changed and emits the <a href="gui/QSlider.html"><tt>QSlider</tt></a>.valueChanged signal. That signal is connected both to the <a href="gui/QLCDNumber.html"><tt>QLCDNumber</tt></a>.display() slot and to the <tt>valueChanged</tt> signal of the <tt>LCDRange</tt>.</p>
<p>Thus, when the signal is emitted, <tt>LCDRange</tt> emits its own <tt>valueChanged</tt> signal. In addition, <a href="gui/QLCDNumber.html"><tt>QLCDNumber</tt></a>.display() is called and shows the new number.</p>
<p>Note that you're not guaranteed any particular order of execution; <tt>LCDRange.valueChanged</tt> may be emitted before or after <a href="gui/QLCDNumber.html"><tt>QLCDNumber</tt></a>.display() is called.</p>
<pre> public int value()
{
return value;
}</pre>
<p>The implementation of <tt>value()</tt> is straightforward. It simply returns the slider's value.</p>
<pre> public void setValue(int value)
{
slider.setValue(value);
}</pre>
<p>The implementation of <tt>setValue()</tt> is equally straightforward. Note that because the slider and LCD number are connected, setting the slider's value automatically updates the LCD number as well. In addition, the slider will automatically adjust the value if it is outside its legal range.</p>
<p>The <tt>ConnectedSlider</tt> class is copied from BlocksGalore in the previous chapter except for the constructor. We examine the changes here:</p>
<pre> LCDRange previousRange = null;
for (int row = 0; row < 3; ++row) {
for (int column = 0; column < 3; ++column) {
LCDRange lcdRange = new LCDRange();
grid.addWidget(lcdRange, row, column);
if (previousRange != null)
lcdRange.valueChanged.
connect(previousRange, "setValue(int)");
previousRange = lcdRange;
}
}</pre>
<p>When we create the nine <tt>LCDRange</tt> objects, we connect them using the <a href="qtjambi-signalsandslots.html">signals and slots</tt></a> mechanism. Each has its <tt>valueChanged</tt> signal connected to the previous one's <tt>setValue()</tt> slot. Because <tt>LCDRange</tt> emits the <tt>valueChanged</tt> signal when its value changes, we are here creating a chain of signals and slots.</p>
<a name="running-the-application"></a>
<h2>Running the Application</h2>
<p>On startup, the program's appearance is identical to the previous one. Try operating the slider to the bottom-right.</p>
<a name="exercises"></a>
<h2>Exercises</h2>
<p>Use the bottom-right slider to set all LCDs to 50. Then set the top six to 30 by clicking on the slider on the row above. Now, use the one to the left of the last one operated to set the first five LCDs back to 50.</p>
<p>Click to the left of the handle on the bottom-right slider. What happens? Why is this the correct behavior?</p>
<p /><address><hr /><div align="center">
<table width="100%" cellspacing="0" border="0"><tr class="address">
<td width="30%">Copyright © 2007 <a href="trolltech.html">Trolltech</a></td>
<td width="40%" align="center"><a href="trademarks.html">Trademarks</a></td>
<td width="30%" align="right"><div align="right">Qt Jambi </div></td>
</tr></table></div></address></body>
</html>
