Home

Qt Tutorial - Chapter 7: One Thing Leads to Another

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 which we've placed in the t7 subdirectory.

• t7/lcdrange.rb contains the LCDRange implementation.
• t7/t7.rb contains MyWidget and the top level.

Line-by-line Walkthrough

    class LCDRange < Qt::VBox
        slots 'setValue( int )'
        signals 'valueChanged( int )'

        ...

        def value()
            @slider.value()
        end

        def setValue( value )
            @slider.setValue( value )
        end

These methods and slot/signal declarations make up an interface between this widget and other components in a program. Until now, LCDRange didn't really have an interface at all.

value() is a public method for accessing the value of the LCDRange. setValue() is our first custom slot and valueChanged() is our first custom signal.

Slots must be implemented in the normal way (remember that a slot is also a ruby method). Signals are automatically implemented in the meta object file. Signals follow the access rules of protected ruby methods (i.e., they can be emitted only by the class they are defined in or by classes inheriting from it).

The signal valueChanged() is used when the LCDRange's value has changed - just as you guessed from the name. This is not the last signal you'll see called somethingChanged().

t7/lcdrange.rb

This file is mainly lifted from t6/t6.rb, and only the changes are noted here.

        connect( @slider, SIGNAL('valueChanged(int)'),
                 lcd, SLOT('display(int)') )
        connect( @slider, SIGNAL('valueChanged(int)'),
                 SIGNAL('valueChanged(int)') )

This code is from the LCDRange constructor.

The first connect is the same that you have seen in the previous chapter. The second is new; it connects slider's valueChanged() signal to this object's valueChanged signal. Connect() with 3 arguments always connects to signals or slots in self object.

Yes, that's right. Signals can be connected to other signals. When the first is emitted, the second signal is also emitted.

Let's look at what happens when the user operates the slider. The slider sees that its value has changed and emits the valueChanged() signal. That signal is connected both to the display() slot of the Qt::LCDNumber and to the valueChanged() signal of the LCDRange.

Thus, when the signal is emitted, LCDRange emits its own valueChanged() signal. In addition, Qt::LCDNumber.display() is called and shows the new number.

Note that you're not guaranteed any particular order of execution - LCDRange.valueChanged() may be emitted before or after Qt::LCDNumber.display()and is entirely arbitrary.

    def value()
        @slider.value()
    end

The implementation of value() is straightforward; it simply returns the slider's value.

    def setValue( value )
        @slider.setValue( value )
    end

The implementation of setValue() 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.

t7/rb.cpp

        previous = nil
        for c in 0..3
            for r in 0..3
                lr = LCDRange.new(grid)
                if previous != nil
                    connect( lr, SIGNAL('valueChanged(int)'),
                             previous, SLOT('setValue(int)') )
                end
                previous = lr
            end
        end

All of t7.rb is copied from the previous chapter except in the constructor for MyWidget. When we create the 16 LCDRange object, we now connect them using the signal/slot mechanism. Each has its valueChanged() signal connected to the setValue() slot in the previous one. Because LCDRange emits the signal valueChanged() when its value changes (surprise!), we are here creating a "chain" of signals and slots.

Behavior

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

Exercises

Use the bottom right slider to set all LCDs to 50. Then set the top half to 40 by clicking once to the left of the slider handle. Now, use the one to the left of the last one operated to set the first seven LCDs back to 50.

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

You're now ready for Chapter 8.

[Previous tutorial] [Next tutorial] [Main tutorial page]