Development/Tutorials/Qt4 Ruby Tutorial/Chapter 06

Building Blocks Galore!

Tutorial Series	Qt4 Ruby Tutorial
Previous	Tutorial 5 - Building Blocks
What's Next	Tutorial 7 - One Thing Leads to Another
Further Reading	n/a

Building Blocks Galore!

Files:

t6.rb

Overview

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.

require 'Qt4'
 
class LCDRange < Qt::Widget
  def initialize(parent = nil)
    super()
    lcd = Qt::LCDNumber.new(2)
 
    slider = Qt::Slider.new(Qt::Horizontal)
    slider.setRange(0, 99)
    slider.setValue(0)
 
    connect(slider, SIGNAL('valueChanged(int)'), lcd, SLOT('display(int)'))
 
    layout = Qt::VBoxLayout.new()
    layout.addWidget(lcd)
    layout.addWidget(slider)
    setLayout(layout)
  end
end
 
class MyWidget < Qt::Widget
  def initialize(parent = nil)
    super()
    quit = Qt::PushButton.new(tr('Quit'))
    quit.setFont(Qt::Font.new('Times', 18, Qt::Font::Bold))
    connect(quit, SIGNAL('clicked()'), $qApp, SLOT('quit()'))
 
    grid = Qt::GridLayout.new()
 
    for row in 0..2
      for column in 0..2
        grid.addWidget(LCDRange.new(), row, column)
      end
    end
 
    layout = Qt::VBoxLayout.new()
    layout.addWidget(quit)
    layout.addLayout(grid)
    setLayout(layout)
  end
end    
 
app = Qt::Application.new(ARGV)
 
widget = MyWidget.new()
widget.show()
 
app.exec()
</code>
 
=== Line by Line Walkthrough ===
<syntaxhighlight lang="ruby">
class LCDRange < Qt::Widget
</code>
 
The '''<tt>LCDRange</tt>''' 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. 
 
<syntaxhighlight lang="ruby">
def initialize(parent = nil)
  super()
  lcd = Qt::LCDNumber.new(2)
  slider = Qt::Slider.new(Qt::Horizontal)
  slider.setRange(0, 99)
  slider.setValue(0)
 
  connect(slider, SIGNAL('valueChanged(int)'), lcd, SLOT('display(int)'))
 
  layout = Qt::VBoxLayout.new()
  layout.addWidget(lcd)
  layout.addWidget(slider)
  setLayout(layout)
end
</code>
 
This is lifted straight from the '''<tt>MyWidget</tt>''' constructor in Chapter 5. The only differences are that the <strong>Quit</strong> button is left out and the class is renamed. 
 
<syntaxhighlight lang="ruby">
class MyWidget < Qt::Widget
</code>
 
'''<tt>MyWidget</tt>''', too, contains no API except a constructor. 
 
<syntaxhighlight lang="ruby">
def initialize(parent = nil)
  super()
  quit = Qt::PushButton.new(tr('Quit'))
  quit.setFont(Qt::Font.new('Times', 18, Qt::Font::Bold))
  connect(quit, SIGNAL('clicked()'), $qApp, SLOT('quit()'))
</code>
 
The push button that used to be in what is now '''<tt>LCDRange</tt>''' has been separated so that we can have one <strong>Quit</strong> button and many '''<tt>LCDRange</tt>''' objects. 
 
<syntaxhighlight lang="ruby">
    grid = Qt::GridLayout.new()
</code>
 
We create a [http://doc.qt.nokia.com/latest/qwidget.html Qt::Widget] with a [http://doc.qt.nokia.com/latest/qgridlayout.html Qt::GridLayout] that will contain three columns. The [http://doc.qt.nokia.com/latest/qgridlayout.html Qt::GridLayout] automatically arranges its widgets in rows and columns; you can specify the row and column numbers when adding widgets to the layout, and [http://doc.qt.nokia.com/latest/qgridlayout.html Qt::GridLayout] will fit them into the grid. 
 
<syntaxhighlight lang="ruby">
for row in 0..2
  for column in 0..2
    grid.addWidget(LCDRange.new(), row, column)
  end
end
</code>
 
We create nine '''<tt>LCDRange</tt>''' widgets, all of which are children of the grid object, and we arrange them in three rows and three columns. 
 
=== Running the Application ===
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.
 
[[Category:Ruby]]