Question

In this part of the Visual Basic GTK# programming tutorial, we will introduce some 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. The GTK# toolkit's philosophy is to keep the number of widgets at a minimum level. More specialized widgets are created as custom GTK# widgets.

CheckButton

CheckButton 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.

' ZetCode Mono Visual Basic GTK# tutorial
'
' This program toggles the title of the
' window with the CheckButton widget
'
' author jan bodnar
' last modified May 2009
' website www.zetcode.com


Imports Gtk
 
Public Class GtkVBApp
  Inherits Window
 
  Public Sub New
    
    MyBase.New("CheckButton")
    
    Me.InitUI
    
    Me.SetDefaultSize(250, 150)
    Me.SetPosition(WindowPosition.Center)
    AddHandler Me.DeleteEvent, AddressOf Me.OnDelete

    Me.ShowAll
    
  End Sub
  
  Private Sub InitUI
    
    Dim cb As New CheckButton("Show title")
    cb.Active = True

    AddHandler cb.Toggled, AddressOf Me.OnToggle
    
    Dim fix As New Fixed
    fix.Put(cb, 50, 50)

    Me.Add(fix)

  End Sub
  
  Sub OnToggle(ByVal sender As Object, ByVal args As EventArgs)

    If sender.Active
      Me.Title = "CheckButton"
    Else
      Title = " "
    End If

  End Sub
  
  Sub OnDelete(ByVal sender As Object, _
      ByVal args As DeleteEventArgs)
    Application.Quit
  End Sub

  Public Shared Sub Main
  
    Application.Init
    Dim app As New GtkVBApp
    Application.Run
    
  End Sub
 
End Class

We will display a title in the titlebar of the window, depending on the state of the CheckButton .

Dim cb As New CheckButton("Show title")

CheckButton widget is created.

cb.Active = True

The title is visible by default, so we check the check button by default.

If sender.Active
  Me.Title = "CheckButton" 
Else
  Title = " "
End If

Depending on the Active property of the CheckButton , we show or hide the title of the window.

Figure: CheckButton

Label

The Label widget shows text.

' ZetCode Mono Visual Basic GTK# tutorial

' This program shows lyrics on 
' the window in a label widget
'
' author jan bodnar
' last modified May 2009
' website www.zetcode.com


Imports Gtk
 
Public Class GtkVBApp
  Inherits Window
  
  
  Dim text As String = "Meet you downstairs in the bar and heard" & vbNewLine & _
"your rolled up sleeves and your skull t-shirt" & vbNewLine & _
"You say why did you do it with him today?" & vbNewLine & _
"and sniff me out like I was Tanqueray" & vbNewLine & _
"" & vbNewLine & _
"cause you're my fella, my guy" & vbNewLine & _
"hand me your stella and fly" & vbNewLine & _
"by the time I'm out the door" & vbNewLine & _
"you tear men down like Roger Moore" & vbNewLine & _
"" & vbNewLine & _
"I cheated myself" & vbNewLine & _
"like I knew I would" & vbNewLine & _
"I told ya, I was trouble" & vbNewLine & _
"you know that I'm no good"

  
 
  Public Sub New
    
    MyBase.New("You know I'm No Good")
    
    Me.InitUI

    Me.SetPosition(WindowPosition.Center)
    Me.BorderWidth = 10
    AddHandler Me.DeleteEvent, AddressOf Me.OnDelete

    Me.ShowAll
    
  End Sub
  
  Private Sub InitUI
    
    Dim lyrics As New Label(text)
    Me.Add(lyrics)

  End Sub
  
  
  Sub OnDelete(ByVal sender As Object, ByVal args As DeleteEventArgs)
    Application.Quit
  End Sub

  Public Shared Sub Main
  
    Application.Init
    Dim app As New GtkVBApp
    Application.Run
    
  End Sub
 
End Class

The code example shows some lyrics on the window.

  Dim text As String = "Meet you downstairs in the bar and heard" & vbNewLine & _
"your rolled up sleeves and your skull t-shirt" & vbNewLine & _
...

We define a multi line text. Unlike in C#, Python or Ruby, there is no simple construct to create a multi line text in Visual Basic language. To create a multi line text in Visual Basic, we use the vbNewLine print constant, the + concatenation character and the _ line termination character.

Me.BorderWidth = 10

The Label is surrounded by some empty space.

Dim lyrics As New Label(text)
Me.Add(lyrics)

The Label widget is created and added to the window.

Figure: Label Widget

Entry

The Entry is a single line text entry field. This widget is used to enter textual data.

' ZetCode Mono Visual Basic GTK# tutorial
'
' This program demonstrates the 
' Entry widget. Text entered in the Entry
' widget is shown in a Label widget.
'
' author jan bodnar
' last modified May 2009
' website www.zetcode.com


Imports Gtk
 
Public Class GtkVBApp
  Inherits Window
 
  Dim label As Label
 
  Public Sub New
    
    MyBase.New("Entry")
    
    Me.InitUI
    
    Me.SetDefaultSize(250, 150)
    Me.SetPosition(WindowPosition.Center)
    AddHandler Me.DeleteEvent, AddressOf Me.OnDelete

    Me.ShowAll
    
  End Sub
  
  Private Sub InitUI
    
    Dim fixed As New Fixed

    label = New Label("...")
    fixed.put(label, 60, 40)

    Dim entry As New Entry
    fixed.put(entry, 60, 100)

    AddHandler entry.Changed, AddressOf Me.OnTextChanged
    
    Me.Add(fixed)

  End Sub
  
  Sub OnTextChanged(ByVal sender As Object, _
      ByVal args As EventArgs)
    label.Text = sender.Text
  End Sub
  
  Sub OnDelete(ByVal sender As Object, _
      ByVal args As DeleteEventArgs)
    Application.Quit
  End Sub

  Public Shared Sub Main
  
    Application.Init
    Dim app As New GtkVBApp
    Application.Run
    
  End Sub
 
End Class

This example shows an entry widget and a label. The text that we key in the entry is displayed immediately in the label widget.

Dim entry As New Entry

Entry widget is created.

AddHandler entry.Changed, AddressOf Me.OnTextChanged

If the text in the Entry widget is changed, we call the OnTextChanged method.

Sub OnTextChanged(ByVal sender As Object, _
    ByVal args As EventArgs)
  label.Text = sender.Text
End Sub

We get the text from the Entry widget and set it to the label.

Figure: Entry Widget

ToggleButton

ToggleButton 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.

' ZetCode Mono Visual Basic GTK# tutorial
'
' This program uses toggle buttons to
' change the background color of
' a widget.
'
' author jan bodnar
' last modified May 2009
' website www.zetcode.com


Imports Gtk


Public Class GtkVBApp
  Inherits Window
 
  Dim darea As DrawingArea
  Dim color As Gdk.Color

 
  Public Sub New
    
    MyBase.New("Togggle buttons")
    
    Me.InitUI
    
    Me.SetDefaultSize(350, 240)
    Me.SetPosition(WindowPosition.Center)
    AddHandler Me.DeleteEvent, AddressOf Me.OnDelete

    Me.ShowAll 
    
  End Sub
  
  Private Sub InitUI
  
    color = New Gdk.Color(0, 0, 0)
    
    Dim redb As New ToggleButton("Red")
    redb.SetSizeRequest(80, 35)
    AddHandler redb.Toggled, AddressOf Me.OnToggled

    Dim greenb As New ToggleButton("Green")
    greenb.SetSizeRequest(80, 35)
    AddHandler greenb.Toggled, AddressOf Me.OnToggled

    Dim blueb As New ToggleButton("Blue")
    blueb.SetSizeRequest(80, 35)
    AddHandler blueb.Toggled, AddressOf Me.OnToggled

    darea = New DrawingArea
    darea.SetSizeRequest(150, 150)
    darea.ModifyBg(StateType.Normal, color)

    Dim fixed As New Fixed
    fixed.Put(redb, 30, 30)
    fixed.Put(greenb, 30, 80)
    fixed.Put(blueb, 30, 130)
    fixed.Put(darea, 150, 30)

    Me.Add(fixed)

  End Sub
  
  Private Sub OnToggled(ByVal sender As Object, _
      ByVal args As EventArgs)
  
    Dim red As Integer = color.Red
    Dim green As Integer = color.Green
    Dim blue As Integer = color.Blue
    
    If sender.Label.Equals("Red") 
      If sender.Active 
        color.Red = 65535
      Else 
        color.Red = 0
      End If
    End If
  
    If sender.Label.Equals("Green")
      If sender.Active 
        color.Green = 65535
      Else 
        color.Green = 0
      End If 
    End If

    If sender.Label.Equals("Blue") 
      If sender.Active 
        color.Blue = 65535
      Else 
        color.Blue = 0
      End If
    End If   
    
    darea.ModifyBg(StateType.Normal, color)
    
  End Sub
  
  Sub OnDelete(ByVal sender As Object, _
      ByVal args As DeleteEventArgs)
    Application.Quit
  End Sub

  Public Shared Sub Main
  
    Application.Init
    Dim app As New GtkVBApp
    Application.Run
    
  End Sub
 
End Class

In our example, we show three toggle buttons and a DrawingArea . We set the background color of the area to black. The togglebuttons will toggle the red, green and blue parts of the color value. The background color will depend on which togglebuttons we have pressed.

color = New Gdk.Color(0, 0, 0)

This is the color value that is going to be updated with the toggle buttons.

Dim redb As New ToggleButton("Red")
redb.SetSizeRequest(80, 35)
AddHandler redb.Toggled, AddressOf Me.OnToggled

The ToggleButton widget is created. We set its size to 80x35 pixels. Each of the toggle buttons has the same handler method.

darea = New DrawingArea
darea.SetSizeRequest(150, 150)
darea.ModifyBg(StateType.Normal, color)

The DrawingArea widget is the widget that displays the color, mixed by the toggle buttons. At start, it shows black color.

If sender.Label.Equals("Red") 
  If sender.Active 
    color.Red = 65535
  Else 
    color.Red = 0
  End If
End If

We update the red part of the color according to the value of the Active property.

darea.ModifyBg(StateType.Normal, color)

We update the color of the DrawingArea widget.

Figure: ToggleButton widget

ComboBox

ComboBox is a widget that allows the user to choose from a list of options.

' ZetCode Mono Visual Basic GTK# tutorial
'
' In this program, we use the ComboBox
' widget to select an option. 
' The selected option is shown in the
' Label widget
'
' author jan bodnar
' last modified May 2009
' website www.zetcode.com


Imports Gtk

 
Public Class GtkVBApp
  Inherits Window

  Dim lbl As Label
  
  Public Sub New
    
    MyBase.New("ComboBox")
    
    Me.InitUI
    
    Me.SetDefaultSize(350, 240)
    Me.SetPosition(WindowPosition.Center)
    AddHandler Me.DeleteEvent, AddressOf Me.OnDelete

    Me.ShowAll
    
  End Sub
  
  Private Sub InitUI
  
     Dim distros() As String = New String() { _
      "Ubuntu", _
      "Mandriva", _
      "Red Hat", _
      "Fedora", _
      "Gentoo" _
     } 

    Dim fixed As New Fixed

    Dim cb As New ComboBox(distros)
    AddHandler cb.Changed, AddressOf Me.OnChanged
    lbl = New Label("...")
    
    fixed.Put(cb, 50, 40)
    fixed.Put(lbl, 50, 140)

    Me.Add(fixed)

  End Sub
  
  Private Sub OnChanged(ByVal sender As Object, _
       ByVal args As EventArgs)
     lbl.Text = sender.ActiveText
  End Sub
  
  Sub OnDelete(ByVal sender As Object, _
      ByVal args As DeleteEventArgs)
    Application.Quit
  End Sub

  Public Shared Sub Main
  
    Application.Init
    Dim app As New GtkVBApp
    Application.Run
    
  End Sub
 
End Class

The example shows a combo box and a label. The combo box has a list of six options. These are the names of Linux Distros. The label widget shows the selected option from the combo box.

Dim distros() As String = New String() { _
  "Ubuntu", _
  "Mandriva", _
  "Red Hat", _
  "Fedora", _
  "Gentoo" _
} 

This is an array of strings that will be shown in the ComboBox widget.

Dim cb As New ComboBox(distros)

The ComboBox widget is created. The constructor takes the array of strings as a parameter.

Private Sub OnChanged(ByVal sender As Object, _
    ByVal args As EventArgs)
  lbl.Text = sender.ActiveText
End Sub

Inside the OnChanged method, we get the selected text out of the combo box and set it to the label.

Figure: ComboBox

In this chapter, we showed some basic widgets of the GTK# programming library with the Visual Basic language.