https://techbase.kde.org/index.php?title=Development/Tutorials/Qt4_Ruby_Tutorial/Chapter_06/en&feed=atom&action=history
Development/Tutorials/Qt4 Ruby Tutorial/Chapter 06/en - Revision history
2024-03-29T06:51:49Z
Revision history for this page on the wiki
MediaWiki 1.40.2
https://techbase.kde.org/index.php?title=Development/Tutorials/Qt4_Ruby_Tutorial/Chapter_06/en&diff=73655&oldid=prev
FuzzyBot: Updating to match new version of source page
2012-07-18T14:19:04Z
<p>Updating to match new version of source page</p>
<table style="background-color: #fff; color: #202122;" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="en">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Older revision</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Revision as of 14:19, 18 July 2012</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l1">Line 1:</td>
<td colspan="2" class="diff-lineno">Line 1:</td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><languages /></div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><languages /></div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">{{Template:I18n/Language Navigation Bar|Development/Tutorials/Qt4 Ruby Tutorial/Chapter 06}}</del></div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div> </div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>{{TutorialBrowser|</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>{{TutorialBrowser|</div></td></tr>
</table>
FuzzyBot
https://techbase.kde.org/index.php?title=Development/Tutorials/Qt4_Ruby_Tutorial/Chapter_06/en&diff=61726&oldid=prev
Tampakrap: Updating to match new version of source page
2011-07-02T21:08:21Z
<p>Updating to match new version of source page</p>
<table style="background-color: #fff; color: #202122;" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="en">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Older revision</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Revision as of 21:08, 2 July 2011</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l94">Line 94:</td>
<td colspan="2" class="diff-lineno">Line 94:</td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></syntaxhighlight></div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></syntaxhighlight></div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>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. </div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>This is lifted straight from the '''<tt>MyWidget</tt>''' constructor in <ins style="font-weight: bold; text-decoration: none;">[[Special:myLanguage/Development/Tutorials/Qt4_Ruby_Tutorial/Chapter_05|</ins>Chapter 5<ins style="font-weight: bold; text-decoration: none;">]]</ins>. The only differences are that the <strong>Quit</strong> button is left out and the class is renamed. </div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><syntaxhighlight lang="ruby"></div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><syntaxhighlight lang="ruby"></div></td></tr>
</table>
Tampakrap
https://techbase.kde.org/index.php?title=Development/Tutorials/Qt4_Ruby_Tutorial/Chapter_06/en&diff=61238&oldid=prev
Tampakrap: Updating to match new version of source page
2011-07-02T14:53:27Z
<p>Updating to match new version of source page</p>
<p><b>New page</b></p><div><languages /><br />
<br />
{{Template:I18n/Language Navigation Bar|Development/Tutorials/Qt4 Ruby Tutorial/Chapter 06}}<br />
<br />
{{TutorialBrowser|<br />
series=[[Special:myLanguage/Development/Tutorials/Qt4_Ruby_Tutorial|Qt4 Ruby Tutorial]]|<br />
name=Building Blocks Galore!|<br />
pre=[[Special:myLanguage/Development/Tutorials/Qt4_Ruby_Tutorial/Chapter_05|Tutorial 5 - Building Blocks]]|<br />
next=[[Special:myLanguage/Development/Tutorials/Qt4_Ruby_Tutorial/Chapter_07|Tutorial 7 - One Thing Leads to Another]]<br />
}}<br />
== Building Blocks Galore! ==<br />
[[Image:Qt4_Ruby_Tutorial_Screenshot_6.png|center]]<br />
<br />
Files:<br />
* [http://www.darshancomputing.com/qt4-qtruby-tutorial/tutorial/t6/t6.rb t6.rb]<br />
<br />
=== Overview ===<br />
<br />
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.<br />
<br />
<syntaxhighlight lang="ruby"><br />
require 'Qt4'<br />
<br />
class LCDRange < Qt::Widget<br />
def initialize(parent = nil)<br />
super()<br />
lcd = Qt::LCDNumber.new(2)<br />
<br />
slider = Qt::Slider.new(Qt::Horizontal)<br />
slider.setRange(0, 99)<br />
slider.setValue(0)<br />
<br />
connect(slider, SIGNAL('valueChanged(int)'), lcd, SLOT('display(int)'))<br />
<br />
layout = Qt::VBoxLayout.new()<br />
layout.addWidget(lcd)<br />
layout.addWidget(slider)<br />
setLayout(layout)<br />
end<br />
end<br />
<br />
class MyWidget < Qt::Widget<br />
def initialize(parent = nil)<br />
super()<br />
quit = Qt::PushButton.new(tr('Quit'))<br />
quit.setFont(Qt::Font.new('Times', 18, Qt::Font::Bold))<br />
connect(quit, SIGNAL('clicked()'), $qApp, SLOT('quit()'))<br />
<br />
grid = Qt::GridLayout.new()<br />
<br />
for row in 0..2<br />
for column in 0..2<br />
grid.addWidget(LCDRange.new(), row, column)<br />
end<br />
end<br />
<br />
layout = Qt::VBoxLayout.new()<br />
layout.addWidget(quit)<br />
layout.addLayout(grid)<br />
setLayout(layout)<br />
end<br />
end <br />
<br />
app = Qt::Application.new(ARGV)<br />
<br />
widget = MyWidget.new()<br />
widget.show()<br />
<br />
app.exec()<br />
</syntaxhighlight><br />
<br />
=== Line by Line Walkthrough ===<br />
<syntaxhighlight lang="ruby"><br />
class LCDRange < Qt::Widget<br />
</syntaxhighlight><br />
<br />
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. <br />
<br />
<syntaxhighlight lang="ruby"><br />
def initialize(parent = nil)<br />
super()<br />
lcd = Qt::LCDNumber.new(2)<br />
slider = Qt::Slider.new(Qt::Horizontal)<br />
slider.setRange(0, 99)<br />
slider.setValue(0)<br />
<br />
connect(slider, SIGNAL('valueChanged(int)'), lcd, SLOT('display(int)'))<br />
<br />
layout = Qt::VBoxLayout.new()<br />
layout.addWidget(lcd)<br />
layout.addWidget(slider)<br />
setLayout(layout)<br />
end<br />
</syntaxhighlight><br />
<br />
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. <br />
<br />
<syntaxhighlight lang="ruby"><br />
class MyWidget < Qt::Widget<br />
</syntaxhighlight><br />
<br />
'''<tt>MyWidget</tt>''', too, contains no API except a constructor. <br />
<br />
<syntaxhighlight lang="ruby"><br />
def initialize(parent = nil)<br />
super()<br />
quit = Qt::PushButton.new(tr('Quit'))<br />
quit.setFont(Qt::Font.new('Times', 18, Qt::Font::Bold))<br />
connect(quit, SIGNAL('clicked()'), $qApp, SLOT('quit()'))<br />
</syntaxhighlight><br />
<br />
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. <br />
<br />
<syntaxhighlight lang="ruby"><br />
grid = Qt::GridLayout.new()<br />
</syntaxhighlight><br />
<br />
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. <br />
<br />
<syntaxhighlight lang="ruby"><br />
for row in 0..2<br />
for column in 0..2<br />
grid.addWidget(LCDRange.new(), row, column)<br />
end<br />
end<br />
</syntaxhighlight><br />
<br />
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. <br />
<br />
=== Running the Application ===<br />
<br />
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. <br />
<br />
=== Exercises ===<br />
<br />
Initialize each slider with a different/random value on startup.<br />
<br />
[[Category:Ruby]]</div>
Tampakrap