Difference between revisions of "Development/Tutorials/Qt4 Ruby Tutorial/Chapter 3"

Jump to: navigation, search
(remove links to files from translation)
(Marked this version for translation)
Line 3: Line 3:
 
{{Template:I18n/Language Navigation Bar|Development/Tutorials/Qt4 Ruby Tutorial/Chapter 3}}
 
{{Template:I18n/Language Navigation Bar|Development/Tutorials/Qt4 Ruby Tutorial/Chapter 3}}
  
{{<translate>TutorialBrowser</translate>|
+
{{<translate><!--T:1-->
series=[[Special:myLanguage/Development/Tutorials/Qt4_Ruby_Tutorial|<translate>Qt4 Ruby Tutorial</translate>]]|
+
TutorialBrowser</translate>|
name=<translate>Family Values</translate>|
+
series=[[Special:myLanguage/Development/Tutorials/Qt4_Ruby_Tutorial|<translate><!--T:2-->
pre=[[Special:myLanguage/Development/Tutorials/Qt4_Ruby_Tutorial/Chapter_2|<translate>Tutorial 2 - Calling it Quits</translate>]]|
+
Qt4 Ruby Tutorial</translate>]]|
next=[[Special:myLanguage/Development/Tutorials/Qt4_Ruby_Tutorial/Chapter_04|<translate>Tutorial 4 - Let There Be Widgets</translate>]]
+
name=<translate><!--T:3-->
 +
Family Values</translate>|
 +
pre=[[Special:myLanguage/Development/Tutorials/Qt4_Ruby_Tutorial/Chapter_2|<translate><!--T:4-->
 +
Tutorial 2 - Calling it Quits</translate>]]|
 +
next=[[Special:myLanguage/Development/Tutorials/Qt4_Ruby_Tutorial/Chapter_04|<translate><!--T:5-->
 +
Tutorial 4 - Let There Be Widgets</translate>]]
 
}}
 
}}
  
 
<translate>
 
<translate>
== Family Values ==
+
== Family Values == <!--T:6-->
 
</translate>
 
</translate>
 
<translate>
 
<translate>
 +
<!--T:7-->
 
[[Image:Qt4_Ruby_Tutorial_Screenshot_3.png|center]]
 
[[Image:Qt4_Ruby_Tutorial_Screenshot_3.png|center]]
 
</translate>
 
</translate>
  
 
<translate>
 
<translate>
 +
<!--T:8-->
 
Files:
 
Files:
 
</translate>
 
</translate>
Line 23: Line 30:
  
 
<translate>
 
<translate>
=== Overview ===
+
=== Overview === <!--T:9-->
  
 +
<!--T:10-->
 
This example shows how to create parent and child widgets.
 
This example shows how to create parent and child widgets.
  
 +
<!--T:11-->
 
We'll keep it simple and use just a single parent and a lone child.
 
We'll keep it simple and use just a single parent and a lone child.
 
</translate>
 
</translate>
Line 32: Line 41:
 
<syntaxhighlight lang="ruby">
 
<syntaxhighlight lang="ruby">
 
<translate>
 
<translate>
 +
<!--T:12-->
 
require 'Qt4'
 
require 'Qt4'
  
 +
<!--T:13-->
 
app = Qt::Application.new(ARGV)
 
app = Qt::Application.new(ARGV)
  
 +
<!--T:14-->
 
window = Qt::Widget.new()
 
window = Qt::Widget.new()
 
window.resize(200, 120)
 
window.resize(200, 120)
  
 +
<!--T:15-->
 
quit = Qt::PushButton.new('Quit', window)
 
quit = Qt::PushButton.new('Quit', window)
 
quit.font = Qt::Font.new('Times', 18, Qt::Font::Bold)
 
quit.font = Qt::Font.new('Times', 18, Qt::Font::Bold)
Line 44: Line 57:
 
Qt::Object.connect(quit, SIGNAL('clicked()'), app, SLOT('quit()'))
 
Qt::Object.connect(quit, SIGNAL('clicked()'), app, SLOT('quit()'))
  
 +
<!--T:16-->
 
window.show()
 
window.show()
 
app.exec()
 
app.exec()
Line 50: Line 64:
  
 
<translate>
 
<translate>
=== Line by Line Walkthrough ===
+
=== Line by Line Walkthrough === <!--T:17-->
 
</translate>
 
</translate>
 
<syntaxhighlight lang="ruby">
 
<syntaxhighlight lang="ruby">
Line 57: Line 71:
  
 
<translate>
 
<translate>
 +
<!--T:18-->
 
Here we simply create a plain widget object. The [http://doc.qt.nokia.com/latest/qwidget.html Qt::Widget] class is the base class of all user interface objects. The widget is the atom of the user interface: It receives mouse, keyboard and other events from the window system, and paints a representation of itself on the screen. A widget is clipped by its parent and by the widgets in front of it.
 
Here we simply create a plain widget object. The [http://doc.qt.nokia.com/latest/qwidget.html Qt::Widget] class is the base class of all user interface objects. The widget is the atom of the user interface: It receives mouse, keyboard and other events from the window system, and paints a representation of itself on the screen. A widget is clipped by its parent and by the widgets in front of it.
  
 +
<!--T:19-->
 
A widget that isn't embedded in a parent widget, like this particular widget, is called a window. Usually, windows have their own window frame and taskbar entry, provided by the window system. A widget without a parent widget is always an independent window. Its initial position on the screen is controlled by the window system.
 
A widget that isn't embedded in a parent widget, like this particular widget, is called a window. Usually, windows have their own window frame and taskbar entry, provided by the window system. A widget without a parent widget is always an independent window. Its initial position on the screen is controlled by the window system.
 
</translate>
 
</translate>
Line 67: Line 83:
  
 
<translate>
 
<translate>
 +
<!--T:20-->
 
We set the window's width to 200 pixels and its height to 120 pixels.
 
We set the window's width to 200 pixels and its height to 120 pixels.
 
</translate>
 
</translate>
Line 72: Line 89:
 
<syntaxhighlight lang="ruby">
 
<syntaxhighlight lang="ruby">
 
<translate>
 
<translate>
 +
<!--T:21-->
 
quit = Qt::PushButton.new('Quit', window)
 
quit = Qt::PushButton.new('Quit', window)
 
</translate>
 
</translate>
Line 77: Line 95:
  
 
<translate>
 
<translate>
 +
<!--T:22-->
 
A child is born. This [http://doc.qt.nokia.com/latest/qpushbutton.html Qt::PushButton] is created with a parent widget ('''<tt>window</tt>'''). A child widget is always displayed within its parent's area. When displayed, it is clipped by its parent's bounds. By default, it is rooted at the top-left corner of its parent, at position (0, 0).
 
A child is born. This [http://doc.qt.nokia.com/latest/qpushbutton.html Qt::PushButton] is created with a parent widget ('''<tt>window</tt>'''). A child widget is always displayed within its parent's area. When displayed, it is clipped by its parent's bounds. By default, it is rooted at the top-left corner of its parent, at position (0, 0).
 
</translate>
 
</translate>
Line 85: Line 104:
  
 
<translate>
 
<translate>
 +
<!--T:23-->
 
The [http://doc.qt.nokia.com/latest/qwidget.html#setgeometry Qt::Widget::setGeometry()] function takes four arguments: The first two arguments are the x and y coordinates of the button's top-left corner. The coordinates are relative to the parent widget. The last two arguments are the button's width and height. The result is a button that extends from position (10, 40) to position (190, 80).
 
The [http://doc.qt.nokia.com/latest/qwidget.html#setgeometry Qt::Widget::setGeometry()] function takes four arguments: The first two arguments are the x and y coordinates of the button's top-left corner. The coordinates are relative to the parent widget. The last two arguments are the button's width and height. The result is a button that extends from position (10, 40) to position (190, 80).
 
</translate>
 
</translate>
Line 93: Line 113:
  
 
<translate>
 
<translate>
 +
<!--T:24-->
 
When a parent widget is shown, it will call show for all its children (except those that were explicitly hidden using [http://doc.qt.nokia.com/latest/qwidget.html#hide Qt::Widget::hide()]).
 
When a parent widget is shown, it will call show for all its children (except those that were explicitly hidden using [http://doc.qt.nokia.com/latest/qwidget.html#hide Qt::Widget::hide()]).
 
</translate>
 
</translate>
  
 
<translate>
 
<translate>
=== Running the Application ===
+
=== Running the Application === <!--T:25-->
  
 +
<!--T:26-->
 
The button no longer fills the entire window. Instead, it stays at position (10, 40) within the window and with a size of (180, 40), because of the [http://doc.qt.nokia.com/latest/qwidget.html#geometry-prop Qt::Widget::setGeometry()] call.
 
The button no longer fills the entire window. Instead, it stays at position (10, 40) within the window and with a size of (180, 40), because of the [http://doc.qt.nokia.com/latest/qwidget.html#geometry-prop Qt::Widget::setGeometry()] call.
  
=== Exercises ===
+
=== Exercises === <!--T:27-->
  
 +
<!--T:28-->
 
Try resizing the window. How does the button change? What happens to the button's height if you run the program with a bigger font? What happens if you try to make the window really small?
 
Try resizing the window. How does the button change? What happens to the button's height if you run the program with a bigger font? What happens if you try to make the window really small?
  
 +
<!--T:29-->
 
[[Category:Ruby]]
 
[[Category:Ruby]]
 
</translate>
 
</translate>

Revision as of 15:50, 2 July 2011

Other languages:English 100% • ‎Finnish 100% • ‎Russian 100%


Contents

Development/Tutorials/Qt4 Ruby Tutorial/Chapter 3


Family Values
Tutorial Series   Qt4 Ruby Tutorial
Previous   Tutorial 2 - Calling it Quits
What's Next   Tutorial 4 - Let There Be Widgets
Further Reading   n/a

Family Values

Qt4 Ruby Tutorial Screenshot 3.png

Files:

Overview

This example shows how to create parent and child widgets.

We'll keep it simple and use just a single parent and a lone child.

require 'Qt4'
 
app = Qt::Application.new(ARGV)
 
window = Qt::Widget.new()
window.resize(200, 120)
 
quit = Qt::PushButton.new('Quit', window)
quit.font = Qt::Font.new('Times', 18, Qt::Font::Bold)
quit.setGeometry(10, 40, 180, 40)
Qt::Object.connect(quit, SIGNAL('clicked()'), app, SLOT('quit()'))
 
window.show()
app.exec()

Line by Line Walkthrough

window = Qt::Widget.new()

Here we simply create a plain widget object. The Qt::Widget class is the base class of all user interface objects. The widget is the atom of the user interface: It receives mouse, keyboard and other events from the window system, and paints a representation of itself on the screen. A widget is clipped by its parent and by the widgets in front of it.

A widget that isn't embedded in a parent widget, like this particular widget, is called a window. Usually, windows have their own window frame and taskbar entry, provided by the window system. A widget without a parent widget is always an independent window. Its initial position on the screen is controlled by the window system.

window.resize(200, 120)

We set the window's width to 200 pixels and its height to 120 pixels.

quit = Qt::PushButton.new('Quit', window)

A child is born. This Qt::PushButton is created with a parent widget (window). A child widget is always displayed within its parent's area. When displayed, it is clipped by its parent's bounds. By default, it is rooted at the top-left corner of its parent, at position (0, 0).

quit.setGeometry(10, 40, 180, 40)

The Qt::Widget::setGeometry() function takes four arguments: The first two arguments are the x and y coordinates of the button's top-left corner. The coordinates are relative to the parent widget. The last two arguments are the button's width and height. The result is a button that extends from position (10, 40) to position (190, 80).

window.show()

When a parent widget is shown, it will call show for all its children (except those that were explicitly hidden using Qt::Widget::hide()).

Running the Application

The button no longer fills the entire window. Instead, it stays at position (10, 40) within the window and with a size of (180, 40), because of the Qt::Widget::setGeometry() call.

Exercises

Try resizing the window. How does the button change? What happens to the button's height if you run the program with a bigger font? What happens if you try to make the window really small?


KDE® and the K Desktop Environment® logo are registered trademarks of KDE e.V.Legal