Introduction to Ruby GTK

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.

Tooltips
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.

Quit button
Figure: Quit button

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