Translate

This example shows how to create custom widgets with signals and slots, and how to connect them together in more complex ways. For the first time, the source is split among several files.‎

Edit

=== Line by Line Walkthrough ===‎

Edit

This file is mainly lifted from [[Special:myLanguage/Development/Tutorials/Qt4_Ruby_Tutorial/Chapter_06|Chapter 6]]; only the non-trivial changes are noted here.‎

Edit

These 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.‎

Edit

'''<tt>value()</tt>''' is a public function for accessing the value of the '''<tt>LCDRange</tt>''', '''<tt>setValue()</tt>''' is our first custom slot, and '''<tt>valueChanged()</tt>''' is our first custom signal.‎

Edit

Slots must be implemented in the normal way (a slot is also a Ruby member function). Signals are automatically implemented. Signals follow the access rules of protected Ruby functions (i.e., they can be emitted only by the class they are defined in or by classes inheriting from it).‎

Edit

The '''<tt>valueChanged()</tt>''' signal is used when the '''<tt>LCDRange's</tt>''' value has changed.‎

Edit

The implementation of '''<tt>value()</tt>''' is straightforward. It simply returns the slider's value.‎

Edit

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

Edit

The first [http://doc.qt.nokia.com/latest/qobject.html#connect QObject::connect()] call is the same that you have seen in the previous chapter. The second is new; it connects slider's [http://doc.qt.nokia.com/latest/qabstractslider.html#valueChanged QAbstractSlider::valueChanged()] signal to this object's '''<tt>valueChanged()</tt>''' signal. Yes, that's right. Signals can be connected to other signals. When the first is emitted, the second signal is also emitted.‎

Edit

Let's look at what happens when the user operates the slider. The slider sees that its value has changed and emits the [http://doc.qt.nokia.com/latest/qabstractslider.html#valueChanged QAbstractSlider::valueChanged()] signal. That signal is connected both to the [http://doc.qt.nokia.com/latest/qlcdnumber.html#intValue-prop QLCDNumber::display()] slot of the [http://doc.qt.nokia.com/latest/qlcdnumber.html Qt::LCDNumber] and to the '''<tt>valueChanged()</tt>''' signal of the '''<tt>LCDRange</tt>'''.‎

Edit

Thus, when the signal is emitted, '''<tt>LCDRange</tt>''' emits its own '''<tt>valueChanged()</tt>''' signal. In addition, [http://doc.qt.nokia.com/latest/qlcdnumber.html#intValue-prop QLCDNumber::display()] is called and shows the new number.‎

Edit

Note that you're not guaranteed any particular order of execution; '''<tt>LCDRange::valueChanged()</tt>''' may be emitted before or after [http://doc.qt.nokia.com/latest/qlcdnumber.html#intValue-prop QLCDNumber::display()] is called.‎

Edit

When we create the nine '''<tt>LCDRange</tt>''' objects, we connect them using the [http://doc.qt.nokia.com/latest/signalsandslots.html signals and slots] 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.‎

Edit

=== Running the Application ===‎

Edit

On startup, the program's appearance is identical to the previous one. Try operating the slider to the bottom-right.‎

Edit

=== Exercises ===‎

Edit

Use the bottom-right slider to set all LCDs to 50. Then set all but the last LCD to 40 by clicking once to the left of the bottom-middle slider handle. Now, use the bottom-left slider to set the first seven LCDs back to 50.‎

Edit

Click to the left of the handle on the bottom-right slider. What happens? Why is this the correct behavior?‎

Edit

[[Category:Ruby]]‎

Edit