Development/Tutorials/Qt4 Ruby Tutorial/Chapter 04: Difference between revisions
No edit summary |
|||
(9 intermediate revisions by 4 users not shown) | |||
Line 1: | Line 1: | ||
<languages /> | |||
series=[[Development/Tutorials/Qt4_Ruby_Tutorial|Qt4 Ruby Tutorial]]| | {{<translate><!--T:1--> | ||
TutorialBrowser</translate>| | |||
series=[[Special:myLanguage/Development/Tutorials/Qt4_Ruby_Tutorial|<translate><!--T:2--> | |||
Qt4 Ruby Tutorial</translate>]]| | |||
name=<translate><!--T:3--> | |||
Let There Be Widgets</translate>| | |||
pre=[[Special:myLanguage/Development/Tutorials/Qt4_Ruby_Tutorial/Chapter_3|<translate><!--T:4--> | |||
Tutorial 3 - Family Values</translate>]]| | |||
next=[[Special:myLanguage/Development/Tutorials/Qt4_Ruby_Tutorial/Chapter_05|<translate><!--T:5--> | |||
Tutorial 5 - Building Blocks</translate>]] | |||
}} | |||
<translate> | |||
== Let There Be Widgets == <!--T:6--> | |||
</translate> | |||
<translate> | |||
<!--T:7--> | |||
[[Image:Qt4_Ruby_Tutorial_Screenshot_4.png|center]] | |||
</translate> | |||
<translate> | |||
<!--T:8--> | |||
Files: | Files: | ||
</translate> | |||
* [http://www.darshancomputing.com/qt4-qtruby-tutorial/tutorial/t4/t4.rb t4.rb] | * [http://www.darshancomputing.com/qt4-qtruby-tutorial/tutorial/t4/t4.rb t4.rb] | ||
=== Overview === | <translate> | ||
=== Overview === <!--T:9--> | |||
<!--T:35--> | |||
This example shows how to create your own widget, and describes how to control the minimum and maximum sizes of a widget. | This example shows how to create your own widget, and describes how to control the minimum and maximum sizes of a widget. | ||
</translate> | |||
<syntaxhighlight lang="ruby"> | <syntaxhighlight lang="ruby"> | ||
Line 27: | Line 43: | ||
setFixedSize(200, 120) | setFixedSize(200, 120) | ||
quit = Qt::PushButton.new(tr('Quit'), self) | <translate><!--T:36--> | ||
quit = Qt::PushButton.new(tr('Quit'), self)</translate> | |||
quit.setGeometry(62, 40, 75, 30) | quit.setGeometry(62, 40, 75, 30) | ||
quit.setFont(Qt::Font.new('Times', 18, Qt::Font::Bold)) | quit.setFont(Qt::Font.new('Times', 18, Qt::Font::Bold)) | ||
Line 43: | Line 60: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
=== Line by Line Walkthrough === | <translate> | ||
< | === Line by Line Walkthrough === <!--T:17--> | ||
</translate> | |||
<syntaxhighlight lang="ruby"> | |||
class MyWidget < Qt::Widget | class MyWidget < Qt::Widget | ||
</ | </syntaxhighlight> | ||
<translate> | |||
<!--T:18--> | |||
Here we create a new class. Because this class inherits from [http://doc.qt.nokia.com/latest/qwidget.html Qt::Widget], the new class is a widget and may be a top-level window or a child widget (like the [http://doc.qt.nokia.com/latest/qpushbutton.html Qt::PushButton] in the previous chapter). | Here we create a new class. Because this class inherits from [http://doc.qt.nokia.com/latest/qwidget.html Qt::Widget], the new class is a widget and may be a top-level window or a child widget (like the [http://doc.qt.nokia.com/latest/qpushbutton.html Qt::PushButton] in the previous chapter). | ||
</translate> | |||
< | <syntaxhighlight lang="ruby"> | ||
def initialize(parent = nil) | def initialize(parent = nil) | ||
super | super | ||
</ | </syntaxhighlight> | ||
<translate> | |||
<!--T:19--> | |||
This class has only one member, a constructor (in addition to the members it inherits from [http://doc.qt.nokia.com/latest/qwidget.html Qt::Widget]). The constructor is a standard Qt widget constructor; you should always include a similar constructor when you create widgets. | This class has only one member, a constructor (in addition to the members it inherits from [http://doc.qt.nokia.com/latest/qwidget.html Qt::Widget]). The constructor is a standard Qt widget constructor; you should always include a similar constructor when you create widgets. | ||
<!--T:20--> | |||
The argument is its parent widget. To create a top-level window you specify '''<tt>nil</tt>''' as the parent. As you can see, this widget defaults to be a top-level window. | The argument is its parent widget. To create a top-level window you specify '''<tt>nil</tt>''' as the parent. As you can see, this widget defaults to be a top-level window. | ||
Like most widgets, it just passes on the '''<tt>parent</tt>''' parameter to the [http://doc.qt.nokia.com/latest/qwidget.html Qt::Widget] constructor. (If you're new to Ruby, calling '''<tt>super</tt>''' without any parameters will automatically pass on any parameters a method received to the superclass's method of the same name. ''Update'': Apparently, it's also important to leave off the parentheses — calling '''<tt>super()</tt>''' will call the superclass's method of the same name with an empty parameter list.) | <!--T:21--> | ||
Like most widgets, it just passes on the '''<tt>parent</tt>''' parameter to the [http://doc.qt.nokia.com/latest/qwidget.html Qt::Widget] constructor. (If you're new to Ruby, calling '''<tt>super</tt>''' without any parameters will automatically pass on any parameters a method received to the superclass's method of the same name. ''Update'': Apparently, it's also important to leave off the parentheses — calling '''<tt>super()</tt>''' will call the superclass's method of the same name with an empty parameter list.) | |||
</translate> | |||
< | <syntaxhighlight lang="ruby"> | ||
setFixedSize(200, 120) | setFixedSize(200, 120) | ||
</ | </syntaxhighlight> | ||
<translate> | |||
<!--T:22--> | |||
Because this widget doesn't know how to handle resizing, we fix its size. In the next chapter, we will show how a widget can respond to resize event from the user. | Because this widget doesn't know how to handle resizing, we fix its size. In the next chapter, we will show how a widget can respond to resize event from the user. | ||
</translate> | |||
< | <syntaxhighlight lang="ruby"> | ||
quit = Qt::PushButton.new(tr('Quit'), self) | <translate><!--T:37--> | ||
quit = Qt::PushButton.new(tr('Quit'), self)</translate> | |||
quit.setGeometry(62, 40, 75, 30) | quit.setGeometry(62, 40, 75, 30) | ||
quit.setFont(Qt::Font.new('Times', 18, Qt::Font::Bold)) | quit.setFont(Qt::Font.new('Times', 18, Qt::Font::Bold)) | ||
</ | </syntaxhighlight> | ||
<translate> | |||
<!--T:24--> | |||
Here we create and set up a child widget of this widget (the new widget's parent is '''<tt>self</tt>''', i.e. the '''<tt>MyWidget</tt>''' instance). | Here we create and set up a child widget of this widget (the new widget's parent is '''<tt>self</tt>''', i.e. the '''<tt>MyWidget</tt>''' instance). | ||
<!--T:25--> | |||
The [http://doc.qt.nokia.com/latest/qobject.html#tr QObject::tr()] function call around the string literal 'Quit' marks the string for translation, making it possible to change it at run-time based on the contents of a translation file. It is a good habit to use [http://doc.qt.nokia.com/latest/qobject.html#tr QObject::tr()] around all user-visible strings, in case you decide later to translate your application to other languages. | The [http://doc.qt.nokia.com/latest/qobject.html#tr QObject::tr()] function call around the string literal 'Quit' marks the string for translation, making it possible to change it at run-time based on the contents of a translation file. It is a good habit to use [http://doc.qt.nokia.com/latest/qobject.html#tr QObject::tr()] around all user-visible strings, in case you decide later to translate your application to other languages. | ||
<!--T:26--> | |||
The [http://doc.qt.nokia.com/latest/qwidget.html#geometry-prop Qt::Widget::setGeometry()] call sets both the widget's screen position and the size. It is equivalent to calling [http://doc.qt.nokia.com/latest/qwidget.html#pos-prop Qt::Widget::move()] followed by [http://doc.qt.nokia.com/latest/qwidget.html#size-prop Qt::Widget::resize()]. | The [http://doc.qt.nokia.com/latest/qwidget.html#geometry-prop Qt::Widget::setGeometry()] call sets both the widget's screen position and the size. It is equivalent to calling [http://doc.qt.nokia.com/latest/qwidget.html#pos-prop Qt::Widget::move()] followed by [http://doc.qt.nokia.com/latest/qwidget.html#size-prop Qt::Widget::resize()]. | ||
</translate> | |||
< | <syntaxhighlight lang="ruby"> | ||
connect(quit, SIGNAL('clicked()'), $qApp, SLOT('quit()')) | connect(quit, SIGNAL('clicked()'), $qApp, SLOT('quit()')) | ||
</ | </syntaxhighlight> | ||
The '''<tt>$qApp</tt>''' pointer is a global variable created when you '''<tt>require 'Qt'</tt>'''. It points to the application's unique [http://doc.qt.nokia.com/latest/qapplication.html Qt::Application] instance. | <translate> | ||
<!--T:27--> | |||
The '''<tt>$qApp</tt>''' pointer is a global variable created when you '''<tt>require 'Qt'</tt>'''. It points to the application's unique [http://doc.qt.nokia.com/latest/qapplication.html Qt::Application] instance. | |||
</translate> | |||
< | <syntaxhighlight lang="ruby"> | ||
app = Qt::Application.new(ARGV) | app = Qt::Application.new(ARGV) | ||
Line 92: | Line 131: | ||
app.exec() | app.exec() | ||
</ | </syntaxhighlight> | ||
Here we instantiate our new child, set it to be the main widget, and execute the application. | <translate> | ||
<!--T:28--> | |||
Here we instantiate our new child, set it to be the main widget, and execute the application. | |||
</translate> | |||
=== Running the Application === | <translate> | ||
=== Running the Application === <!--T:29--> | |||
</translate> | |||
<translate> | |||
<!--T:30--> | |||
This program is very similar in behavior to the previous one. The difference lies in the way we have implemented it. It does behave slightly differently, however. Just try to resize it to see. | This program is very similar in behavior to the previous one. The difference lies in the way we have implemented it. It does behave slightly differently, however. Just try to resize it to see. | ||
</translate> | |||
=== Exercises === | <translate> | ||
=== Exercises === <!--T:31--> | |||
</translate> | |||
<translate> | |||
<!--T:32--> | |||
Try to create another '''<tt>MyWidget</tt>''' object. What happens? | Try to create another '''<tt>MyWidget</tt>''' object. What happens? | ||
<!--T:33--> | |||
Try to add more buttons or put in widgets other than [http://doc.qt.nokia.com/latest/qpushbutton.html Qt::PushButton]. | Try to add more buttons or put in widgets other than [http://doc.qt.nokia.com/latest/qpushbutton.html Qt::PushButton]. | ||
<!--T:34--> | |||
[[Category:Ruby]] | [[Category:Ruby]] | ||
</translate> |
Latest revision as of 14:16, 18 July 2012
Tutorial Series | Qt4 Ruby Tutorial |
Previous | Tutorial 3 - Family Values |
What's Next | Tutorial 5 - Building Blocks |
Further Reading | n/a |
Let There Be Widgets
Files:
Overview
This example shows how to create your own widget, and describes how to control the minimum and maximum sizes of a widget.
require 'Qt4'
class MyWidget < Qt::Widget
def initialize(parent = nil)
super
setFixedSize(200, 120)
quit = Qt::PushButton.new(tr('Quit'), self)
quit.setGeometry(62, 40, 75, 30)
quit.setFont(Qt::Font.new('Times', 18, Qt::Font::Bold))
connect(quit, SIGNAL('clicked()'), $qApp, SLOT('quit()'))
end
end
app = Qt::Application.new(ARGV)
widget = MyWidget.new()
widget.show()
app.exec()
Line by Line Walkthrough
class MyWidget < Qt::Widget
Here we create a new class. Because this class inherits from Qt::Widget, the new class is a widget and may be a top-level window or a child widget (like the Qt::PushButton in the previous chapter).
def initialize(parent = nil)
super
This class has only one member, a constructor (in addition to the members it inherits from Qt::Widget). The constructor is a standard Qt widget constructor; you should always include a similar constructor when you create widgets.
The argument is its parent widget. To create a top-level window you specify nil as the parent. As you can see, this widget defaults to be a top-level window.
Like most widgets, it just passes on the parent parameter to the Qt::Widget constructor. (If you're new to Ruby, calling super without any parameters will automatically pass on any parameters a method received to the superclass's method of the same name. Update: Apparently, it's also important to leave off the parentheses — calling super() will call the superclass's method of the same name with an empty parameter list.)
setFixedSize(200, 120)
Because this widget doesn't know how to handle resizing, we fix its size. In the next chapter, we will show how a widget can respond to resize event from the user.
quit = Qt::PushButton.new(tr('Quit'), self)
quit.setGeometry(62, 40, 75, 30)
quit.setFont(Qt::Font.new('Times', 18, Qt::Font::Bold))
Here we create and set up a child widget of this widget (the new widget's parent is self, i.e. the MyWidget instance).
The QObject::tr() function call around the string literal 'Quit' marks the string for translation, making it possible to change it at run-time based on the contents of a translation file. It is a good habit to use QObject::tr() around all user-visible strings, in case you decide later to translate your application to other languages.
The Qt::Widget::setGeometry() call sets both the widget's screen position and the size. It is equivalent to calling Qt::Widget::move() followed by Qt::Widget::resize().
connect(quit, SIGNAL('clicked()'), $qApp, SLOT('quit()'))
The $qApp pointer is a global variable created when you require 'Qt'. It points to the application's unique Qt::Application instance.
app = Qt::Application.new(ARGV)
widget = MyWidget.new()
widget.show()
app.exec()
Here we instantiate our new child, set it to be the main widget, and execute the application.
Running the Application
This program is very similar in behavior to the previous one. The difference lies in the way we have implemented it. It does behave slightly differently, however. Just try to resize it to see.
Exercises
Try to create another MyWidget object. What happens?
Try to add more buttons or put in widgets other than Qt::PushButton.