Question

In this part of the Ruby GTK programming tutorial, we will introduce the GTK library and create our first programs using the Ruby programming language.

The purpose of this tutorial is to get you started with the GTK and Ruby. Images for the Nibbles game can be downloaded here .

About

GTK is a toolkit for creating graphical user interfaces. Ruby is a popular scripting language.

Simple example

In the first example, we create a simple window. The window is centered on the screen.

#!/usr/bin/ruby

'''
ZetCode Ruby GTK tutorial

This program centers a window on 
the screen.

Author: Jan Bodnar
Website: www.zetcode.com
Last modified: May 2014
'''

require 'gtk3'

class RubyApp < Gtk::Window

  def initialize
    super
  
    set_title "Center"
    signal_connect "destroy" do 
      Gtk.main_quit 
    end

    set_default_size 300, 200

    set_window_position Gtk::Window::Position::CENTER
    
    show
  end
end

Gtk.init
  window = RubyApp.new
Gtk.main

This example shows a 300x200px window in the centre of the screen.

require 'gtk3'

The require keyword imports necessary types that we will use in the application.

class RubyApp < Gtk::Window

The example inherits from a Gtk::Window —a toplevel container.

set_title "Center"

We set a title for the window.

signal_connect "destroy" do 
  Gtk.main_quit 
end

The destroy signal is triggered when we click on the close button in the titlebar, or press Alt+F4. The Gtk.main_quit method quits the application.

set_default_size 300, 200

We set a default size for the application window.

set_window_position Gtk::Window::Position::CENTER

This line centers the window on the screen. It is also possible to use the :center symbol.

show

When everything is ready, we show the window on the screen.

Gtk.init
  window = RubyApp.new
Gtk.main

These three lines set up the application.

Tooltips

The second 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 GTK tutorial

This program shows a tooltip on 
a window and a button.

Author: Jan Bodnar
Website: www.zetcode.com
Last modified: May 2014
'''

require 'gtk3'

class RubyApp < Gtk::Window

  def initialize
    super
    
    init_ui
  end

  def init_ui
  
    set_title  "Tooltips"
    signal_connect "destroy" do 
      Gtk.main_quit 
    end
    
    fixed = Gtk::Fixed.new
    add fixed

    button = Gtk::Button.new :label =>'Button'
    button.set_size_request 80, 35    
    button.set_tooltip_text "Button widget"
  
    fixed.put button, 50, 50     

    set_tooltip_text "Window widget"
    set_default_size 300, 200
    set_window_position :center
    
    show_all
  end
end

Gtk.init
  window = RubyApp.new
Gtk.main

If we hover a mouse pointer over the area of the window and the button widget, a tooltip pops up.

def initialize
  super
  
  init_ui
end

The creation of the user interface is delegated to the init_ui method.

fixed = Gtk::Fixed.new
add fixed

The Gtk::Fixed is a container which allows to position widgets at fixed coordinates. For more complex applications, it is necessary to use layout managers.

button = Gtk::Button.new :label =>'Button'

A Gtk::Button widget is created.

button.set_size_request 80, 35  

The set_size_request method gives a size to the button widget—width:80, height:35.

button.set_tooltip_text "Button widget"

We set a tooltip with the set_tooltip_text method.

fixed.put button, 50, 50

The button widget is placed in the Gtk::Fixed container at x:50, y:50 coordinates. The coordinate system starts at the top-left part of the window.

set_tooltip_text "Window widget"

We set a tooltip for the Gtk::Window widget.

Figure: Tooltips

Quit button

In the last example of this chapter, we will create a quit button. When we press this button, the application terminates.

#!/usr/bin/ruby

'''
ZetCode Ruby GTK tutorial

This program creates a quit
button. When we press the button,
the application terminates. 

Author: Jan Bodnar
Website: www.zetcode.com
Last modified: May 2014
'''

require 'gtk3'

class RubyApp < Gtk::Window

  def initialize
    super
      
    init_ui
  end
  
  def init_ui
  
    fixed = Gtk::Fixed.new
    add fixed
     
    button = Gtk::Button.new :label => "Quit"
    button.set_size_request 80, 35    
    button.signal_connect "clicked" do 
      Gtk.main_quit 
    end
  
    fixed.put button, 50, 50     
    
    set_title  "Quit button"
    signal_connect "destroy" do 
      Gtk.main_quit 
    end    

    set_default_size 300, 200
    set_window_position(:center)
    show_all
  end
end

Gtk.init
  window = RubyApp.new
Gtk.main

In the example, we place Gtk::Button widget on the window. We attach a handler to the clicked signal.

button = Gtk::Button.new :label => "Quit"

A Gtk::Button with label "Quit" is created.

button.signal_connect "clicked" do 
  Gtk.main_quit 
end

We plug the main_quit method to the button clicked signal.

show_all

We have two options. Either to call show on all widgets, or to call show_all , which shows the container and all its children.

Figure: Quit button

This chapter was an introduction to the GTK library with the Ruby language.