Question

In this part of the Ruby Qt programming tutorial, we will cover basic 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. Qt has a rich set of widgets which covers most of the programming needs. More specialised widgets can be created as custom widgets.

Qt::CheckBox

The Qt::CheckBox 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. The Qt::CheckBox widget provides a checkbox with a text label.

#!/usr/bin/ruby

# ZetCode Ruby Qt tutorial
#
# This program uses Qt::CheckBox
# widget to show/hide the title
# of the window.
#
# author: Jan Bodnar
# website: www.zetcode.com
# last modified: September 2012

require 'Qt'


class QtApp < Qt::Widget

  slots 'on_toggled(bool)'

  def initialize
    super
    
    setWindowTitle "Qt::CheckBox"
     
    init_ui
     
    resize 250, 150
    move 300, 300

    show
  end
  
  def init_ui
    cb = Qt::CheckBox.new "Show Title", self
    cb.setChecked true
    connect cb, SIGNAL("toggled(bool)"), 
      self, SLOT("on_toggled(bool)")

    cb.move 50, 50

  end
  
  def on_toggled state
    if state
      setWindowTitle "Qt::CheckBox"
    else
      setWindowTitle ""
    end
  end
  
end

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

In our example, we place a check box on the window. The check box shows or hides the title of the window.

setWindowTitle "Qt::CheckBox"

During the construction of the window, we set a title for the window.

cb = Qt::CheckBox.new "Show Title", self

The Qt::CheckBox widget is created. The first parameter of the constructor is its text label. The second parameter is the parent widget.

cb.setChecked true

The title is visible at the start of the application. So the check box must be checked too.

connect cb, SIGNAL("toggled(bool)"), 
  self, SLOT("on_toggled(bool)")

The toggled signal is emitted when the state of a check box changes. When the signal is emitted, we trigger the on_toggled method.

if state
  setWindowTitle "Qt::CheckBox"
else
  setWindowTitle ""
end

Depending on the state of the check box, we show or hide the title of the window.

Figure: Qt::CheckBox

Qt::Label

The Qt::Label widget is used to display text or image. No user interaction is available.

#!/usr/bin/ruby

# ZetCode Ruby Qt tutorial
#
# This program uses Qt::Label widget to 
# show lyrics of a song.
#
# author: Jan Bodnar
# website: www.zetcode.com
# last modified: September 2012

require 'Qt'


class QtApp < Qt::Widget

  def initialize
    super
    
    setWindowTitle "You know I'm no Good"
     
    init_ui
     
    resize 250, 150
    move 300, 300

    show
  end
  
  def init_ui
     text = "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\n
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\n
I cheated myself
like I knew I would
I told ya, I was trouble
you know that I'm no good"

    label = Qt::Label.new text, self
    label.setFont Qt::Font.new "Purisa", 9

    vbox = Qt::VBoxLayout.new
    vbox.addWidget label
    setLayout vbox
  end   
end

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

Our example shows lyrics of a song in the window.

     text = "Meet you downstairs in the bar and heard
your rolled up sleeves and your skull t-shirt
...

We define a multi line text.

label = Qt::Label.new text, self
label.setFont Qt::Font.new "Purisa", 9

We create the label widget and change its font.

vbox = Qt::VBoxLayout.new
vbox.addWidget label
setLayout vbox

Instead of manually coding the position and size of the label, we put the label into a box layout.

Figure: Qt::Label

Qt::LineEdit

The Qt::LineEdit is a widget that allows to enter and edit a single line of plain text. There are undo/redo, cut/paste and drag & drop functions available for a Qt::LineEdit widget.

#!/usr/bin/ruby

# ZetCode Ruby Qt tutorial
#
# This program shows text
# which is entered in a Qt::LineEdit
# widget in a Qt::Label widget.
#
# author: Jan Bodnar
# website: www.zetcode.com
# last modified: September 2012

require 'Qt'


class QtApp < Qt::Widget

  slots 'on_changed(QString)'

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

    show
  end
  
  def init_ui
  
    @label = Qt::Label.new self

    edit = Qt::LineEdit.new self
    connect edit, SIGNAL("textChanged(QString)"),
      self, SLOT("on_changed(QString)")

    edit.move 60, 100
    @label.move 60, 40

  end
  
  def on_changed text
    @label.setText text
    @label.adjustSize
  end
  
end

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

In our example we show two widgets. A line edit and a label widget. The text entered into the line edit is shown in the label widget.

edit = Qt::LineEdit.new self

The Qt::LineEdit widget is created.

connect edit, SIGNAL("textChanged(QString)"),
  self, SLOT("on_changed(QString)")

When we type or delete some text from the line edit, the on_changed method is triggered.

def on_changed text
  @label.setText text
  @label.adjustSize
end

In the on_changed method, we set the contents of the line edit to the label widget. The adjustSize method ensures that all text is visible.

Figure: Qt::LineEdit widget

Toggle buttons

Toggle buttons are push buttons with a checkable flag set. Toggle button is a button that has two states. Pressed and not pressed. You toggle between these two states by clicking on it. There are situations where this functionality fits well.

#!/usr/bin/ruby

# ZetCode Ruby Qt tutorial
#
# This program uses toggle buttons to
# change the background colour of
# a widget.
#
# author: Jan Bodnar
# website: www.zetcode.com
# last modified: September 2012

require 'Qt'


class QtApp < Qt::Widget

  slots 'on_clicked()'

  def initialize
    super
    
    setWindowTitle "Toggle button"
     
    init_ui
     
    resize 300, 180
    move 300, 300

    show
  end
  
  def init_ui

    @color = Qt::Color.new 0, 0, 0

    setGeometry 300, 300, 280, 170
    setWindowTitle "ToggleButton"

    @redb = Qt::PushButton.new 'Red', self
    @redb.setCheckable true
    @redb.move 10, 10

    connect @redb, SIGNAL("clicked()"), SLOT("on_clicked()")
    
    @greenb = Qt::PushButton.new 'Green', self
    @greenb.setCheckable true
    @greenb.move 10, 60

    connect @greenb, SIGNAL('clicked()'), SLOT("on_clicked()")

    @blueb = Qt::PushButton.new "Blue", self
    @blueb.setCheckable true
    @blueb.move 10, 110

    connect @blueb, SIGNAL("clicked()"), SLOT("on_clicked()")
    @square = Qt::Widget.new self
    @square.setGeometry 150, 20, 100, 100
    @square.setStyleSheet "QWidget { background-color: %s }" % @color.name
  end
  
  def on_clicked
    red = @color.red
    green = @color.green
    blue = @color.blue
    
    if @redb.isChecked
      red = 255
    else 
      red = 0
    end
  
    if @greenb.isChecked
      green = 255
    else 
      green = 0
    end

    if @blueb.isChecked
      blue = 255
    else 
      blue = 0
    end
    
    @color = Qt::Color.new red, green, blue

    @square.setStyleSheet("QWidget { background-color: %s }" % @color.name) 
  end
end

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

In the code example, we use three toggle buttons to change the colour of a rectangular widget.

@redb = Qt::PushButton.new 'Red', self
@redb.setCheckable true

We create a Qt::PushButton widget. The setCheckable method changes the push button into a toggle button.

connect @redb, SIGNAL("clicked()"), SLOT("on_clicked()")

We plug the button into the on_clicked method call.

@square = Qt::Widget.new self
@square.setGeometry 150, 20, 100, 100
@square.setStyleSheet "QWidget { background-color: %s }" % @color.name

We create a square widget. We set its size. At the beginning, it is black. In Qt, we use style sheets to customize the appearance of a widget.

Inside the on_clicked method, we determine the colour value and update the square widget to a new colour.

red = @color.red
green = @color.green
blue = @color.blue

Here we determine the current colour of the square widget.

if @redb.isChecked
  red = 255
else 
  red = 0
end

The red part of the colour is changed, depending on the state of the red toggle button.

@color = Qt::Color.new red, green, blue

We create a new colour value.

@square.setStyleSheet("QWidget { background-color: %s }" % @color.name) 

The colour of the square is updated.

Figure: Toggle buttons

Qt::ComboBox

The Qt::ComboBox is a widget that allows the user to choose from a list of options. It is a selection widget that displays the current item, and can pop up a list of selectable items. A combo box may be editable. It presents a list of options to the user in a way that takes up the minimum amount of screen space.

#!/usr/bin/ruby

# ZetCode Ruby Qt tutorial
#
# This program uses the Qt::ComboBox widget.
# The option selected from the combo box is
# displayed in the label widget.
#
# author: Jan Bodnar
# website: www.zetcode.com
# last modified: Sepetmber 2012

require 'Qt'


class QtApp < Qt::Widget

  slots 'on_activated(QString)'

  def initialize
    super
    
    setWindowTitle "Qt::ComboBox"
     
    init_ui
     
    resize 250, 150
    move 300, 300

    show
  end
  
  def init_ui
  
    @label = Qt::Label.new "Ubuntu", self

    combo = Qt::ComboBox.new self

    combo.addItem "Ubuntu"
    combo.addItem "Fedora"
    combo.addItem "Mandriva"
    combo.addItem "Red Hat"
    combo.addItem "Mint"

    connect combo, SIGNAL("activated(QString)"),
      self, SLOT("on_activated(QString)")
    
    combo.move 50, 30
    @label.move 50, 100

  end
  
  def on_activated text
    @label.setText text
    @label.adjustSize
  end
  
end

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

In our code example, we have two widgets: a combo box and a label widget. The option selected from a combo box is shown in the label.

@label = Qt::Label.new "Ubuntu", self

This is the label that will show the currently selected option from the combo box.

combo = Qt::ComboBox.new self

We create the instance of the Qt::ComboBox widget.

combo.addItem "Ubuntu"
combo.addItem "Fedora"
combo.addItem "Mandriva"
combo.addItem "Red Hat"
combo.addItem "Mint"

Combo box is filled with values.

connect combo, SIGNAL("activated(QString)"),
  self, SLOT("on_activated(QString)")

When we select an option from the combo box, the on_activated method is triggered.

def on_activated text
  @label.setText text
  @label.adjustSize
end

In the on_activated method, we update the label widget to the currently selected string from the combo box.

Figure: Qt::ComboBox widget

In this part of the Ruby Qt tutorial, we have presented several Qt widgets.