Widgets in Ruby GTK

In this part of the Ruby GTK programming tutorial, we will introduce some widgets.

Widgets are basic building blocks of a GUI application. Over the years, several widgets became a standard in all toolkits on all OS platforms, for example a button, a check box or a scroll bar. The GTK toolkit's philosophy is to keep the number of widgets at a minimum level. More specialised widgets are created as custom GTK widgets.

Gtk::CheckButton

The Gtk::CheckButton is a widget that has two states: on and off. The on state is visualised by a check mark. It is used to denote some boolean property.

#!/usr/bin/ruby

'''
ZetCode Ruby GTK tutorial

This program toggles the title of the
window with the Gtk::CheckButton widget.

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
        
        cb = Gtk::CheckButton.new "Show title"
        cb.set_active true
        cb.set_can_focus false
        cb.signal_connect("clicked") do |w|
            on_clicked w
        end

        fixed.put cb, 50, 50    
        
        set_title "Gkt::CheckButton"
        signal_connect "destroy" do 
            Gtk.main_quit 
        end        

        set_default_size 300, 200
        set_window_position :center
        show_all        
    
    end
    
    def on_clicked sender

        if sender.active?
            self.set_title "Gtk::CheckButton"
        else
           self.set_title ""
        end
    end
end

Gtk.init
    window = RubyApp.new
Gtk.main

We will display a title in the titlebar of the window depending on the state of the Gtk::CheckButton.

cb = Gtk::CheckButton.new "Show title"

The Gtk::CheckButton widget is created.

cb.set_active true

The title is visible by default, so we activate the check button initially.

if sender.active?
    self.set_title "Gtk::CheckButton"
else
    self.set_title ""
end

We show the title if the button is checked. The state of the button is determined with the active? method.

Gtk::CheckButton widget
Figure: Gtk::CheckButton widget

Gtk::Label

The Gtk::Label widget displays text.

#!/usr/bin/ruby

'''
ZetCode Ruby GTK tutorial

This example demonstrates the Gtk::Label widget.

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


require 'gtk3'

$lyrics = %{Meet you downstairs in the bar and heard
your rolled up sleeves and your skull t-shirt
You say why did you do it with him today?
and sniff me out like I was Tanqueray

cause you're my fella, my guy
hand me your stella and fly
by the time I'm out the door
you tear men down like Roger Moore

I cheated myself
like I knew I would
I told ya, I was trouble
you know that I'm no good}


class RubyApp < Gtk::Window

    def initialize
        super
        
        init_ui
    end
    
    def init_ui
    
        set_title  "You know I'm no Good"
        signal_connect "destroy" do 
            Gtk.main_quit 
        end
    
        set_border_width 10
        label = Gtk::Label.new $lyrics
        add label    
        
        set_default_size 250, 200
        set_window_position :center
        
        show_all        
    
    end
end

Gtk.init
    window = RubyApp.new
Gtk.main

The code example shows some lyrics on the window.

$lyrics = %{Meet you downstairs in the bar and heard
your rolled up sleeves and your skull t-shirt
...

We create a multi-line text.

set_border_width 10

The Gtk::Label widget is surrounded by some empty space.

label = Gtk::Label.new $lyrics
add label 

The Gtk::Label widget is created and added to the window.

Gtk::Label widget
Figure: Gtk::Label widget

Entry

The Gtk::Entry is a single line text entry field. This widget is used to enter textual data.

#!/usr/bin/ruby

'''
ZetCode Ruby GTK tutorial

This example demonstrates the Gtk::Entry widget.

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

        label = Gtk::Label.new "..."
        fixed.put label, 60, 40

        entry = Gtk::Entry.new
        fixed.put entry, 60, 100

        entry.signal_connect "key-release-event" do |w, e|
            on_key_release w, e, label
        end

        add fixed
        
        set_title "Gtk::Entry"
        signal_connect "destroy" do 
            Gtk.main_quit 
        end        

        set_default_size 250, 200
        set_window_position :center
        
        show_all        
    end  
    
    def on_key_release sender, event, label
        label.set_text sender.text
    end
end

Gtk.init
    window = RubyApp.new
Gtk.main

This example shows an entry widget and a label. The text that we key in the entry is displayed immediately in the label widget.

entry = Gtk::Entry.new

The Gtk::Entry widget is created.

entry.signal_connect "key-release-event" do |w, e|
    on_key_release(w, e, label)
end

We plug the on_key_release method to the key-release-event of the Entry widget.

def on_key_release sender, event, label
    label.set_text sender.text
end

We get the text from the Gtk::Entry widget and set it to the label.

Entry Widget
Figure: Entry Widget

Gtk::Image

The Gtk::Image widget shows an image.

#!/usr/bin/ruby

'''
ZetCode Ruby GTK tutorial

This example demonstrates the Gtk::Image widget.

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_border_width 2
        
        image = Gtk::Image.new :file => "redrock.png"
        add image
        
        set_title "Red Rock"
        signal_connect "destroy" do 
            Gtk.main_quit
        end
            
        set_window_position :center
        
        show_all            
    end
    
end

Gtk.init
    window = RubyApp.new
Gtk.main

In our example, we show an image on the window.

set_border_width 2

We put some empty border around the image.

image = Gtk::Image.new :file => "redrock.png"

The Gtk::Image widget is created. If the file is not loaded successfully, the image will contain a "broken image" icon. Therefore, we do not add error checking code.

add image

Widget is added to the container.

Gtk::ComboBoxText

The Gtk::ComboBoxText is a widget that allows the user to choose from a list of textual options.

#!/usr/bin/ruby

'''
ZetCode Ruby GTK tutorial

This example demonstrates the Gtk::ComboBoxText widget.

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
        label = Gtk::Label.new '-'
        fixed.put label, 50, 140
        
        cb = Gtk::ComboBoxText.new
        cb.signal_connect "changed" do |w, e|
            on_changed w, e, label
        end

        cb.append_text 'Xubuntu'
        cb.append_text 'Mandriva'
        cb.append_text 'Redhat'
        cb.append_text 'Gentoo'
        cb.append_text 'Arch' 

        fixed.put cb, 50, 30

        add fixed
        
        set_title "Gtk::ComboBoxText"
        signal_connect "destroy" do 
            Gtk.main_quit 
        end        

        set_default_size 300, 200
        set_window_position :center
        
        show_all        
    end

    def on_changed sender, event, label
        label.set_label sender.active_text
    end
end

Gtk.init
    window = RubyApp.new
Gtk.main

The example shows a combo box and a label. The combo box has a list of five options. These are the names of Linux Distros. The label widget shows the selected option from the combo box.

cb = Gtk::ComboBoxText.new

The Gtk::ComboBoxText widget is created.

cb.signal_connect "changed" do |w, e|
    on_changed w, e, label
end

The custom on_changed method is plugged to the changed signal of the combo box. The signal is emitted whenever the active item of the combo box is changed. We pass in three parameters to the on_changed method: the sender widget (combo box), the event object, and the label widget.

cb.append_text 'Xubuntu'
cb.append_text 'Mandriva'
cb.append_text 'Redhat'
cb.append_text 'Gentoo'
cb.append_text 'Arch' 

The combo box is filled with data.

def on_changed sender, event, label
    label.set_label sender.active_text
end

Inside the on_changed method, we get the selected text out of the combo box and set it to the label.

Gtk::ComboBoxText widget
Figure: GtkComboBoxText widget

In this chapter of the Ruby GTK tutorial, we showed some basic widgets.