Export translations

Settings

Group

Language

Format

Export for off-line translation

Export in native format

{{TutorialBrowser|
series=[[Special:myLanguage/Development/Tutorials/Qt4_Ruby_Tutorial|Qt4 Ruby Tutorial]]|
name=Building Blocks Galore!|
pre=[[Special:myLanguage/Development/Tutorials/Qt4_Ruby_Tutorial/Chapter_05|Tutorial 5 - Building Blocks]]|
next=[[Special:myLanguage/Development/Tutorials/Qt4_Ruby_Tutorial/Chapter_07|Tutorial 7 - One Thing Leads to Another]]
}}
== Building Blocks Galore! ==
[[Image:Qt4_Ruby_Tutorial_Screenshot_6.png|center]]

Files:
* [http://www.darshancomputing.com/qt4-qtruby-tutorial/tutorial/t6/t6.rb 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.

<syntaxhighlight lang="ruby">
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()
</syntaxhighlight>

=== Line by Line Walkthrough ===
<syntaxhighlight lang="ruby">
class LCDRange < Qt::Widget
</syntaxhighlight>

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
</syntaxhighlight>

This is lifted straight from the '''<tt>MyWidget</tt>''' constructor in [[Special:myLanguage/Development/Tutorials/Qt4_Ruby_Tutorial/Chapter_05|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
</syntaxhighlight>

'''<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()'))
</syntaxhighlight>

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()
</syntaxhighlight>

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
</syntaxhighlight>

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]]