Development/Tutorials/Qt4 Ruby Tutorial/Chapter 06: Difference between revisions
No edit summary |
No edit summary |
||
(8 intermediate revisions by 4 users not shown) | |||
Line 1: | Line 1: | ||
<languages /> | |||
name=Building Blocks Galore! | | {{<translate><!--T:1--> | ||
TutorialBrowser</translate>| | |||
pre=[[Development/Tutorials/Qt4_Ruby_Tutorial/Chapter_05|Tutorial 5 - Building Blocks]]| | series=[[Special:myLanguage/Development/Tutorials/Qt4_Ruby_Tutorial|<translate><!--T:2--> | ||
Qt4 Ruby Tutorial</translate>]]| | |||
next=[[Development/Tutorials/Qt4_Ruby_Tutorial/Chapter_07|Tutorial 7 - One Thing Leads to Another]] | name=<translate><!--T:3--> | ||
Building Blocks Galore!</translate>| | |||
pre=[[Special:myLanguage/Development/Tutorials/Qt4_Ruby_Tutorial/Chapter_05|<translate><!--T:4--> | |||
Tutorial 5 - Building Blocks</translate>]]| | |||
next=[[Special:myLanguage/Development/Tutorials/Qt4_Ruby_Tutorial/Chapter_07|<translate><!--T:5--> | |||
Tutorial 7 - One Thing Leads to Another</translate>]] | |||
}} | }} | ||
== Building Blocks Galore! == | <translate> | ||
== Building Blocks Galore! == <!--T:6--> | |||
</translate> | |||
<translate> | |||
<!--T:7--> | |||
[[Image:Qt4_Ruby_Tutorial_Screenshot_6.png|center]] | [[Image:Qt4_Ruby_Tutorial_Screenshot_6.png|center]] | ||
</translate> | |||
<translate> | |||
<!--T:8--> | |||
Files: | Files: | ||
</translate> | |||
* [http://www.darshancomputing.com/qt4-qtruby-tutorial/tutorial/t6/t6.rb t6.rb] | * [http://www.darshancomputing.com/qt4-qtruby-tutorial/tutorial/t6/t6.rb t6.rb] | ||
=== Overview === | <translate> | ||
=== Overview === <!--T:9--> | |||
<!--T:10--> | |||
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. | ||
</translate> | |||
< | <syntaxhighlight lang="ruby"> | ||
require 'Qt4' | require 'Qt4' | ||
Line 66: | Line 82: | ||
widget = MyWidget.new() | widget = MyWidget.new() | ||
widget.show() | widget.show() | ||
=== Line by Line Walkthrough === | app.exec() | ||
< | </syntaxhighlight> | ||
<translate> | |||
=== Line by Line Walkthrough === <!--T:11--> | |||
</translate> | |||
<syntaxhighlight lang="ruby"> | |||
class LCDRange < Qt::Widget | class LCDRange < Qt::Widget | ||
</ | </syntaxhighlight> | ||
<translate> | |||
<!--T:12--> | |||
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. | ||
</translate> | |||
< | <syntaxhighlight lang="ruby"> | ||
def initialize(parent = nil) | def initialize(parent = nil) | ||
super() | super() | ||
Line 90: | Line 113: | ||
setLayout(layout) | setLayout(layout) | ||
end | end | ||
</ | </syntaxhighlight> | ||
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. | <translate> | ||
<!--T:13--> | |||
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. | |||
</translate> | |||
< | <syntaxhighlight lang="ruby"> | ||
class MyWidget < Qt::Widget | class MyWidget < Qt::Widget | ||
</ | </syntaxhighlight> | ||
<translate> | |||
<!--T:14--> | |||
'''<tt>MyWidget</tt>''', too, contains no API except a constructor. | '''<tt>MyWidget</tt>''', too, contains no API except a constructor. | ||
</translate> | |||
< | <syntaxhighlight lang="ruby"> | ||
def initialize(parent = nil) | def initialize(parent = nil) | ||
super() | super() | ||
Line 106: | Line 135: | ||
quit.setFont(Qt::Font.new('Times', 18, Qt::Font::Bold)) | quit.setFont(Qt::Font.new('Times', 18, Qt::Font::Bold)) | ||
connect(quit, SIGNAL('clicked()'), $qApp, SLOT('quit()')) | connect(quit, SIGNAL('clicked()'), $qApp, SLOT('quit()')) | ||
</ | </syntaxhighlight> | ||
<translate> | |||
<!--T:15--> | |||
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. | ||
</translate> | |||
< | <syntaxhighlight lang="ruby"> | ||
grid = Qt::GridLayout.new() | grid = Qt::GridLayout.new() | ||
</ | </syntaxhighlight> | ||
<translate> | |||
<!--T:16--> | |||
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. | ||
</translate> | |||
< | <syntaxhighlight lang="ruby"> | ||
for row in 0..2 | for row in 0..2 | ||
for column in 0..2 | for column in 0..2 | ||
Line 122: | Line 157: | ||
end | end | ||
end | end | ||
</ | </syntaxhighlight> | ||
<translate> | |||
<!--T:17--> | |||
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. | 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. | ||
</translate> | |||
<translate> | |||
=== Running the Application === <!--T:18--> | |||
<!--T:19--> | |||
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. | 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 === | === Exercises === <!--T:20--> | ||
<!--T:21--> | |||
Initialize each slider with a different/random value on startup. | Initialize each slider with a different/random value on startup. | ||
<!--T:22--> | |||
[[Category:Ruby]] | |||
</translate> |
Latest revision as of 14:18, 18 July 2012
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.
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
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.
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.
class MyWidget < Qt::Widget
MyWidget, too, contains no API except a constructor.
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.
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.
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.