Home

Qt Tutorial - Chapter 6: Building Blocks Galore!

This example shows how to encapsulate two widgets into a new component and how easy it is to use many widgets. For the first time, we use a custom widget as a child widget.

#****************************************************************
#**
#** Qt tutorial 6
#**
#****************************************************************

require 'Qt'

class LCDRange < Qt::VBox

def initialize(parent = nil, name = nil)
    super
    lcd = Qt::LCDNumber.new(2, self, 'lcd')

    slider = Qt::Slider.new(Qt::VBox::Horizontal, self, 'slider')
    slider.setRange(0, 99)
    slider.setValue(0)

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

end

class MyWidget < Qt::VBox

def initialize(parent = nil, name = nil)
    super
    quit = Qt::PushButton.new('Quit', self, 'quit')
    quit.setFont(Qt::Font.new('Times', 18, Qt::Font::Bold))
    
    connect(quit, SIGNAL('clicked()'), $qApp, SLOT('quit()'))
    grid = Qt::Grid.new( 4, self )
	
    for c in 0..3
        for r in 0..3
            LCDRange.new(grid)
        end
    end
end

end    

a = Qt::Application.new(ARGV)

w = MyWidget.new
a.setMainWidget(w)
w.show
a.exec

Line-by-line Walkthrough

    class MyWidget < Qt::VBox

The LCDRange widget is a widget without any API. It just has a constructor. This sort of widget is not very useful, so we'll add some API later.

    def initialize(parent = nil, name = nil)
        super
        lcd = Qt::LCDNumber.new( 2, self, "lcd"  )
        slider = Qt::Slider.new( Horizontal, self, "slider" )
        slider.setRange( 0, 99 )
        slider.setValue( 0 )
        connect( slider, SIGNAL('valueChanged(int)'), lcd, SLOT('display(int)') )

This is lifted straight from the MyWidget constructor in Chapter 5. The only differences are that the button is left out and the class is renamed.

MyWidget, too, contains no API except a constructor.

    def initialize(parent = nil, name = nil)
        super
        quit = Qt::PushButton.new( "Quit", self, "quit" )
        quit.setFont( Qt::Font.new( "Times", 18, Qt::Font::Bold ) )

        connect( quit, SIGNAL('clicked()'), $qApp, SLOT('quit()') )

The push button that used to be in what is now LCDRange has been separated so that we can have one "Quit" button and many LCDRange objects.

        grid = Qt::Grid.new( 4, self )

We create a Qt::Grid object with four columns. The Qt::GRid widget automatically arranges its children in rows and columns; you can specify the number of rows or of columns, and Qt::Grid will discover its new children and fit them into the grid.

       for c in 0..3
           for r in 0..3
               LCDRange.new(grid)
           end
       end

Four columns, four rows.

We create 4*4 LCDRanges, all of which are children of the grid object. The Qt::Grid widget will arrange them. That's all.

Behavior

This program shows how easy it is to use many widgets at a time. Each one behaves like the slider and LCD number in the previous chapter. Again, the difference lies in the implementation.

Exercises

Initialize each slider with a different/random value on startup.

The source contains three occurrences of "4". What happens if you change the one in the Qt::Grid constructor call? What about the other two? Why is this?

You're now ready for Chapter 7.

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