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. We 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.
#
# author: Jan Bodnar
# website: www.zetcode.com
# last modified: September 2012


require 'Qt'


class QtApp < Qt::Widget

    def initialize
        super
        
        setWindowTitle "Tooltip"

        setToolTip "This is Qt::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 necessary types that we will use in the application.

class QtApp < Qt::Widget

The example inherits from a Qt::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 Qt::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.

Tooltip
Figure: Tooltip

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: September 2012

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 Qt::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 and 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: September 2012


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

The Qt::PushButton class shows a button in Ruby Qt. It is a rectangular widget 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.

Quit button
Figure: Quit button

This section was an introduction to the Qt toolkit with the Ruby language.