Question

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.

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.

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.

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.

Figure: Qt::FontDialog

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