Dialogs in Ruby Qt

In this part of the Ruby Qt programming tutorial, we will work with 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 boxes are convenient dialogs that provide messages to the user of the application. The message consists of text and image data.

#!/usr/bin/ruby

# ZetCode Ruby Qt tutorial
#
# This program demonstrates
# MessageBox dialogs
#
# author: jan bodnar
# website: www.zetcode.com
# last modified: July 2009

require 'Qt'


class QtApp < Qt::Widget

    slots 'showDialog()'

    def initialize
        super
        
        setWindowTitle "Message dialogs"
       
        init_ui
       
        resize 250, 150
        move 300, 300

        show
    end
    
    def init_ui
    
        grid = Qt::GridLayout.new self
        grid.setSpacing 2

        error = Qt::PushButton.new "Error", self
        warning = Qt::PushButton.new "Warning", self
        question = Qt::PushButton.new "Question", self
        information = Qt::PushButton.new "Information", self
        about = Qt::PushButton.new "About", self

        grid.addWidget error, 0, 0
        grid.addWidget warning, 0, 1
        grid.addWidget question, 1, 0
        grid.addWidget information, 1, 1
        grid.addWidget about, 2, 0

        connect(error, SIGNAL("clicked()"),
            self, SLOT("showDialog()"))
        
        connect(warning, SIGNAL("clicked()"),
            self, SLOT("showDialog()"))
            
        connect(question, SIGNAL("clicked()"),
            self, SLOT("showDialog()"))
            
        connect(information, SIGNAL("clicked()"),
            self, SLOT("showDialog()"))
            
        connect(about, SIGNAL("clicked()"),
            self, SLOT("showDialog()"))

    end   
    
    def showDialog
        
        button = sender

        if "Error" == button.text
            Qt::MessageBox.critical self, "Error", "Error loading file!"
        elsif "Warning" == button.text
            Qt::MessageBox.warning self, "Warning", "Operation not permitted!"
        elsif "Question" == button.text
            Qt::MessageBox.question self, "Question", "Are you sure to quit?"
        elsif "Information" == button.text
            Qt::MessageBox.information self, "Information", "Download completed."
        elsif "About" == button.text
            Qt::MessageBox.about self, "About", "ZetCode Ruby Qt tutorial."
        end
    end

end

app = Qt::Application.new ARGV
QtApp.new
app.exec

We use the GridLayout manager to set up a grid of five buttons. Each of the buttons shows a different message box.

if "Error" == button.text
    Qt::MessageBox.critical self, "Error", "Error loading file!"

In case we pressed the error button, we show the error dialog. We use static methods of the MessageBox class to show the message boxes.

Information message dialog
Figure: Info dialog

Qt::InputDialog

The Qt::InputDialog class provides a simple convenience dialog to get a single value from the user. The input value can be a string, a number or an item from a list. A label must be set to tell the user what they should enter.

#!/usr/bin/ruby

# ZetCode Ruby Qt tutorial
#
# This program shows an input
# dialog
#
# author: jan bodnar
# website: www.zetcode.com
# last modified: July 2009

require 'Qt'


class QtApp < Qt::Widget

    slots 'showDialog()'

    def initialize
        super
        
        setWindowTitle "Input dialog"
       
        init_ui
       
        resize 400, 80
        move 300, 300

        show
    end
    
    def init_ui
    
        show = Qt::PushButton.new "Dialog", self

        connect(show, SIGNAL("clicked()"),
            self, SLOT("showDialog()"))

        show.move 20, 20

        @edit = Qt::LineEdit.new self
        @edit.move 130, 22


    end   
    
    def showDialog
        
        text = Qt::InputDialog.getText self, "Input Dialog",
            "Enter your name"
         
        if text != nil 
            name = text.strip
            if not name.empty?
                @edit.setText name
            end
        end
    end

end

app = Qt::Application.new ARGV
QtApp.new
app.exec

In the code example, we have a button and a line edit. The button shows an input dialog. We get some text and the text is shown in the line edit widget.

text = Qt::InputDialog.getText self, "Input Dialog",
    "Enter your name"

The getText static method creates the input dialog. The text from the dialog is stored in the text variable.

if text != nil 
    name = text.strip
    if not name.empty?
        @edit.setText name
    end
end

Before we update the line edit, we ensure that the text variable is not null and that it is not empty and does not consists only from spaces.

Input dialog
Figure: Input dialog

Qt::ColorDialog

The Qt::ColorDialog class provides a dialog widget for specifying colours. The color dialog's function is to allow users to choose colours.

#!/usr/bin/ruby

# ZetCode Ruby Qt tutorial
#
# In this program, we use the
# ColorDialog to change the color
# of a label text
#
# author: jan bodnar
# website: www.zetcode.com
# last modified: July 2009

require 'Qt'


class QtApp < Qt::Widget

    slots 'showDialog()'

    def initialize
        super
        
        setWindowTitle "Color dialog"
       
        init_ui
       
        resize 400, 300
        move 300, 300

        show
    end
    
    def init_ui
    
        @label = Qt::Label.new "ZetCode Ruby Qt tutorial", self

        vbox = Qt::VBoxLayout.new self
        @label.setAlignment Qt::AlignCenter
        vbox.addWidget @label

    end   
    
    def mousePressEvent event

        color = Qt::ColorDialog.getColor

        if not color.isValid
            return
        end

        @label.setStyleSheet "QWidget { color: %s }" % color.name
    end
    
end

app = Qt::Application.new ARGV
QtApp.new
app.exec

We show a some text in the center of the window. By clicking on the area of the window, we show a color dialog. We change the text foreground colour to the selected colour from the dialog.

def mousePressEvent event
    ...
end

In order to receive mouse press events for our window, we must reimplement the mousePressEvent method.

color = Qt::ColorDialog.getColor

The ColorDialog is being created. The selected color is stored in the color variable.

@label.setStyleSheet "QWidget { color: %s }" % color.name

Here we update the foreground color of the label's text.

ColorDialog
Figure: Qt::ColorDialog

Qt::FontDialog

The Qt::FontDialog class provides a dialog widget for selecting a font.

#!/usr/bin/ruby

# ZetCode Ruby Qt tutorial
#
# In this program, we use the
# FontDialog to change the font
# of a label text
#
# author: jan bodnar
# website: www.zetcode.com
# last modified: July 2009

require 'Qt'


class QtApp < Qt::Widget

    slots 'showDialog()'

    def initialize
        super
        
        setWindowTitle "Font dialog"
       
        init_ui
       
        resize 400, 300
        move 300, 300

        show
    end
    
    def init_ui
    
        @label = Qt::Label.new "ZetCode Ruby Qt tutorial", self

        vbox = Qt::VBoxLayout.new self
        @label.setAlignment Qt::AlignCenter
        vbox.addWidget @label

    end   
    
    def mousePressEvent event

        ok = Qt::Boolean.new
        font = Qt::FontDialog.getFont ok
        
        if not ok 
            return
        end

        @label.setFont font
    end
end

app = Qt::Application.new ARGV
QtApp.new
app.exec

This example is similar to the previous one. This time, we change the font of the text.

font = Qt::FontDialog.getFont ok

The Qt::FontDialog is being created.

if not ok 
    return
end

The boolean ok variable is true if we clicked on the OK button of the dialog. We return from the method if the cancel button was pressed.

@label.setFont font

We update the label to the newly selected font.

FontDialog
Figure: Qt::FontDialog

In this part of the Ruby Qt tutorial, we worked with dialog windows.