Home  Contents

Widgets

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 specialized 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 visualized 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/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.

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.

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.

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.

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.

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