Introduction to Ruby Qt
In this part of the Ruby Qt tutorial, we will introduce the Qt toolkit and create our first programs using the Ruby programming language.
The purpose of this tutorial is to get you started with the Qt toolkit with the Ruby language. Images used in this tutorial can be downloaded here. I used some icons from the tango icons pack of the Gnome project.
About
Qt is one of the leading toolkits for creating graphical user interfaces. Ruby is a popular scripting language.
Creating a Tooltip
The first example will show a tooltip. A tooltip is a small rectangular window, which gives a brief information about an object. It is usually a GUI component. It is part of the help system of the application.
#!/usr/bin/ruby
# ZetCode Ruby Qt tutorial
#
# This code shows a tooltip on
# a window and a button
#
# author: jan bodnar
# website: www.zetcode.com
# last modified: June 2009
require 'Qt'
class QtApp < Qt::Widget
def initialize
super
setWindowTitle "Tooltip"
setToolTip "This is Widget"
resize 250, 150
move 300, 300
show
end
end
app = Qt::Application.new ARGV
QtApp.new
app.exec
The example creates a window. If we hover a mouse pointer over the area of the window, a tooltip pops up.
require 'Qt'
The require keyword imports necessery types that we will use in the application.
class QtApp < Qt::Widget
The example inherits from a Widget. The 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.
setWindowTitle "Tooltip"
This method call creates a title for the window.
setToolTip "This is Widget"
The setToolTip method creates a tooltip for the Widget object.
resize 250, 150
Here we set the width and the height of the window.
move 300, 300
The move method moves the window on the screen.
show
When everything is ready, we show the window on the screen.
app = Qt::Application.new ARGV QtApp.new app.exec
These three lines set up the application.
Centering a window
In the second example, we will center the window on the screen.
#!/usr/bin/ruby
# ZetCode Ruby Qt tutorial
#
# This program centers a window
# on the screen
#
# author: jan bodnar
# website: www.zetcode.com
# last modified: June 2009
require 'Qt'
WIDTH = 250
HEIGHT = 150
class QtApp < Qt::Widget
def initialize
super
setWindowTitle "Center"
resize WIDTH, HEIGHT
center
show
end
def center
qdw = Qt::DesktopWidget.new
screenWidth = qdw.width
screenHeight = qdw.height
x = (screenWidth - WIDTH) / 2
y = (screenHeight - HEIGHT) / 2
move x, y
end
end
app = Qt::Application.new ARGV
QtApp.new
app.exec
The Qt toolkit does not have a single method to center a window.
WIDTH = 250 HEIGHT = 150
These two constants define the width and height of the application window.
qdw = Qt::DesktopWidget.new
The DesktopWidget class provides information about the screen.
screenWidth = qdw.width screenHeight = qdw.height
Here we determine the screen width and height.
x = (screenWidth - WIDTH) / 2 y = (screenHeight - HEIGHT) / 2
Here we calculate the x, y coordinates of the centered window. To center a window on the screen, we need to know the size of the screen and the size of the window.
move x, y
We move the window to the computed x, y coordinates.
Quit button
In the last example of this section, we will create a quit button. When we press this button, the application terminates.
#!/usr/bin/ruby
# ZetCode Ruby Qt tutorial
#
# This program creates a quit
# button. When we press the button,
# the application terminates.
#
# author: jan bodnar
# website: www.zetcode.com
# last modified: June 2009
require 'Qt'
class QtApp < Qt::Widget
def initialize
super
setWindowTitle "Quit button"
init_ui
resize 250, 150
move 300, 300
show
end
def init_ui
quit = Qt::PushButton.new 'Quit', self
quit.resize 80, 30
quit.move 50, 50
connect quit, SIGNAL('clicked()'), $qApp, SLOT('quit()')
end
end
app = Qt::Application.new ARGV
QtApp.new
app.exec
We use the PushButton.This is a very common widget. It is a rectangular and usually shows a text label.
init_ui
We delegate the creation of the user interface to the init_ui method.
quit = Qt::PushButton.new 'Quit', self
We create the button widget. The first parameter of the constructor is the label, which the button displays. The second parameter is the parent widget of the button.
quit.resize 80, 30 quit.move 50, 50
We size and position the button widget.
connect quit, SIGNAL('clicked()'), $qApp, SLOT('quit()')
The clicked signal is emitted, when we click on the quit button. The connect method connects a signal to a particular slot of an object. In our case it is the quit method of the application object. The $qApp is a global pointer to the application instance.
This section was an introduction to the Qt toolkit with the Ruby language.