Dialogs in Ruby GTK

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

Dialog windows or dialogs are an indispensable part of most modern GUI applications. A dialog is defined as a conversation between two or more persons. In a computer application a dialog is a window which is used to "talk" to the application. A dialog is used to input data, modify data, change the application settings etc. Dialogs are important means of communication between a user and a computer program.

Message boxes

Message dialogs are convenient dialogs that provide messages to the user of the application. The message consists of textual and image data.

#!/usr/bin/ruby

'''
ZetCode Ruby GTK tutorial

This example shows message dialogs.

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
    
        table = Gtk::Table.new 2, 2, true
        
        info = Gtk::Button.new :label => "Information"
        warn = Gtk::Button.new :label => "Warning"
        ques = Gtk::Button.new :label => "Question"
        erro = Gtk::Button.new :label => "Error"

        info.signal_connect "clicked" do
            on_info
        end    
        
        warn.signal_connect "clicked" do
            on_warn
        end
        
        ques.signal_connect "clicked" do
            on_ques
        end
        
        erro.signal_connect "clicked" do
            on_erro
        end
        
        table.attach info, 0, 1, 0, 1
        table.attach warn, 1, 2, 0, 1
        table.attach ques, 0, 1, 1, 2
        table.attach erro, 1, 2, 1, 2
        
        add table
    
        set_title "Messages"
        signal_connect "destroy" do 
            Gtk.main_quit 
        end

        set_default_size 300, 100
        set_window_position :center
        
        show_all        

    end
    
    def on_info
 
        md = Gtk::MessageDialog.new :parent => self, 
            :flags => :destroy_with_parent, :type => :info, 
            :buttons_type => :close, :message => "Download completed"
        md.run
        md.destroy
    end
        
        
    def on_erro

        md = Gtk::MessageDialog.new :parent => self, 
            :flags => :modal, :type => :error, 
            :buttons_type => :close, :message => "Error loading file"
        md.run
        md.destroy
    end
    
    
    def on_ques

        md = Gtk::MessageDialog.new :parent => self, 
            :flags => :destroy_with_parent, :type => :question, 
            :buttons_type => :close, :message => "Are you sure to quit?"
        md.run
        md.destroy
    end
    
    def on_warn

        md = Gtk::MessageDialog.new :parent => self, 
            :flags => :destroy_with_parent, :type =>  :warning, 
            :buttons_type => :close, :message => "Unallowed operation"
        md.run
        md.destroy
    end
end

Gtk.init
    window = RubyApp.new
Gtk.main

In our example, we will show four kinds of message dialogs: information, warning, question and error message dialogs.

info = Gtk::Button.new :label => "Information"
warn = Gtk::Button.new :label => "Warning"
ques = Gtk::Button.new :label => "Question"
erro = Gtk::Button.new :label => "Error"

We have four buttons. Each of these buttons will show a different kind of message dialog.

def on_info

    md = Gtk::MessageDialog.new :parent => self, 
        :flags => :destroy_with_parent, :type => :info, 
        :buttons_type => :close, :message => "Download completed"
    md.run
    md.destroy
end

If we click on the info button, the information dialog is displayed. The Gtk::MessageDialog::INFO specifies the type of the dialog. The Gtk::MessageDialog::BUTTONS_CLOSE specifies the type of a button to be displayed in the dialog. The last parameter is the message displayed. The dialog is displayed with the run method. The programmer must also call either the destroy or the hide method.

Information message dialog Warning message dialog Question message dialog Error message dialog

AboutDialog

The AboutDialog displays information about the application. It can display a logo, the name of the application, version, copyright, website, or license information. It is also possible to give credits to the authors, documenters, translators, and artists.

#!/usr/bin/ruby

'''
ZetCode Ruby GTK tutorial

This example demonstrates the
Gtk::AboutDialog dialog.

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

require 'gtk3'


class RubyApp < Gtk::Window

    def initialize
        super
    
        set_title "About dialog"
        signal_connect "destroy" do 
            Gtk.main_quit 
        end
        
        init_ui

        set_default_size 300, 150
        set_window_position :center
        
        show_all
    end
    
    def init_ui

        button = Gtk::Button.new :label => "About"
        button.set_size_request 80, 30
        
        button.signal_connect "clicked" do
            on_clicked
        end
        
        fix = Gtk::Fixed.new
        fix.put button, 20, 20
   
        add fix
    end
    
    def on_clicked
    
        about = Gtk::AboutDialog.new
        about.set_program_name "Battery"
        about.set_version "0.1"
        about.set_copyright "(c) Jan Bodnar"
        about.set_comments "Battery is a simple tool for battery checking"
        about.set_website "http://www.zetcode.com"        
              
        begin       
            logo = Gdk::Pixbuf.new :file => "batter.png"
            about.set_logo logo
        rescue IOError => e
            puts e
            puts "cannot load image"
            exit            
        end
        
        about.run
        about.destroy
    end
end

Gtk.init
    window = RubyApp.new
Gtk.main

The code example uses a Gtk::AboutDialog with some of its features.

about = Gtk::AboutDialog.new

We create the Gkt::AboutDialog widget.

about.set_program_name "Battery"
about.set_version "0.1"
about.set_copyright "(c) Jan Bodnar"

Here we specify the name, the version, and the copyright.

begin       
    logo = Gdk::Pixbuf.new :file => "batter.png"
    about.set_logo logo
rescue IOError => e
    puts e
    puts "cannot load image"
    exit            
end

This line creates a logo for the dialog. Some error checking is performed.

Gtk::AboutDialog
Figure: Gtk::AboutDialog

Gtk::FontSelectionDialog

The Gtk::FontSelectionDialog is a dialog for selecting fonts. It is typically used in applications that do some text editing or formatting.

#!/usr/bin/ruby

'''
ZetCode Ruby GTK tutorial

This example presents the Gtk::FontSelectionDialog.

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 10
        @label = Gtk::Label.new "The only victory over love is flight."
        button = Gtk::Button.new :label => "Select font"
        
        button.signal_connect "clicked" do
            on_clicked
        end

        fix = Gtk::Fixed.new
        fix.put button, 100, 30
        fix.put @label, 30, 90
        add fix
        
        set_title "Gtk::FontSelectionDialog"
        signal_connect "destroy" do 
            Gtk.main_quit 
        end        
        
        set_default_size 300, 150
        set_window_position :center
        
        show_all        
    end
    
    def on_clicked

        fdia = Gtk::FontChooserDialog.new :title => "Select font name", 
            :parent => nil
        response = fdia.run
                      
        if response == Gtk::ResponseType::OK
 
            font_desc = Pango::FontDescription.new fdia.font_desc
            if font_desc

                @label.override_font font_desc
            end
        end
        
        fdia.destroy
    end     
end

Gtk.init
    window = RubyApp.new
Gtk.main

In the code example, we have a button and a label. We show the Gtk::FontSelectionDialog by clicking on the button.

fdia = Gtk::FontSelectionDialog.new "Select font name"

We create the GtkFontSelectionDialog.

if response == Gtk::ResponseType::OK

    font_desc = Pango::FontDescription.new fdia.font_desc
    if font_desc

        @label.override_font font_desc
    end
end

If we click on the OK button, the font of the label widget changes to the one that we selected in the dialog.

Gtk::ColorSelectionDialog

The Gtk::ColorSelectionDialog is a dialog for selecting a colour.

#!/usr/bin/ruby

'''
ZetCode Ruby GTK tutorial

This example presents the Gtk::ColorSelectionDialog.

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 10
        @label = Gtk::Label.new "The only victory over love is flight."
        button = Gtk::Button.new :label => "Select colour"
        
        button.signal_connect "clicked" do
            on_clicked
        end

        fix = Gtk::Fixed.new
        fix.put button, 100, 30
        fix.put @label, 30, 90
        add fix
        
        set_title "Gtk::ColorSelectionDialog"
        signal_connect "destroy" do 
            Gtk.main_quit 
        end        

        set_default_size 350, 150
        set_window_position :center
        
        show_all        
    end
    
    def on_clicked

        cdia = Gtk::ColorSelectionDialog.new :title => "Select colour"
        response = cdia.run
              
        if response == Gtk::ResponseType::OK
        
            colorsel = cdia.color_selection
            col = colorsel.current_rgba
            @label.override_color :normal, col
        end
        
        cdia.destroy
    end
end

Gtk.init
    window = RubyApp.new
Gtk.main

The example is very similar to the previous one. This time we change the colour of the label.

cdia = Gtk::ColorSelectionDialog.new :title => "Select colour"

We create the Gtk::ColorSelectionDialog.

if response == Gtk::ResponseType::OK

    colorsel = cdia.color_selection
    col = colorsel.current_rgba
    @label.override_color :normal, col
end

If we press the OK button, we get the colour value and modify the label's colour.

Gtk::ColorSelectionDialog
Figure: Gtk::ColorSelectionDialog

In this part of the Ruby GTK tutorial, we presented dialogs.