Question

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.

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.

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.

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.

Figure: GtkComboBoxText widget

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