Development/Tutorials/Qt4 Ruby Tutorial/Chapter 06: Difference between revisions

From KDE TechBase
No edit summary
m (Text replace - "<code ruby>" to "<syntaxhighlight lang="ruby">")
Line 19: Line 19:
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.
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.


<code ruby>
<syntaxhighlight lang="ruby">
require 'Qt4'
require 'Qt4'


Line 71: Line 71:


=== Line by Line Walkthrough ===
=== Line by Line Walkthrough ===
<code ruby>
<syntaxhighlight lang="ruby">
class LCDRange < Qt::Widget
class LCDRange < Qt::Widget
</code>
</code>
Line 77: Line 77:
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.  
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.  


<code ruby>
<syntaxhighlight lang="ruby">
def initialize(parent = nil)
def initialize(parent = nil)
   super()
   super()
Line 96: Line 96:
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.  
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.  


<code ruby>
<syntaxhighlight lang="ruby">
class MyWidget < Qt::Widget
class MyWidget < Qt::Widget
</code>
</code>
Line 102: Line 102:
'''<tt>MyWidget</tt>''', too, contains no API except a constructor.  
'''<tt>MyWidget</tt>''', too, contains no API except a constructor.  


<code ruby>
<syntaxhighlight lang="ruby">
def initialize(parent = nil)
def initialize(parent = nil)
   super()
   super()
Line 112: Line 112:
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.  
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.  


<code ruby>
<syntaxhighlight lang="ruby">
     grid = Qt::GridLayout.new()
     grid = Qt::GridLayout.new()
</code>
</code>
Line 118: Line 118:
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.  
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.  


<code ruby>
<syntaxhighlight lang="ruby">
for row in 0..2
for row in 0..2
   for column in 0..2
   for column in 0..2

Revision as of 20:43, 29 June 2011


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:

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

Line by Line Walkthrough

<syntaxhighlight lang="ruby"> class LCDRange < Qt::Widget

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.

<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

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

<syntaxhighlight lang="ruby"> class MyWidget < Qt::Widget

MyWidget, 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()'))

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.

<syntaxhighlight lang="ruby">

   grid = Qt::GridLayout.new()

We create a Qt::Widget with a Qt::GridLayout that will contain three columns. The 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 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

We create nine LCDRange 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.