Question

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.

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.

Figure: Quit button

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