Question

In this part of the Visual Basic Qyoto programming tutorial, we will cover Qyoto 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. Qyoto has a rich set of widgets which cover most of the programming needs. More specialized widgets can be created as custom widgets.

QCheckBox

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

' ZetCode Mono Visual Basic Qt tutorial

' This program toggles the title of the
' window with the QCheckBox widget
'
' author jan bodnar
' last modified April 2009
' website www.zetcode.com


Imports Qyoto


Public Class VBQApp 
  Inherits QWidget

  Public Sub New()
  
    Me.SetWindowTitle("QCheckBox")
  
    Me.InitUI()
    
    Me.Resize(250, 200)
    Me.Move(300, 300)
    Me.Show()
    
  End Sub
  
  Private Sub InitUI()
  
    Dim cb As New QCheckBox("Show title", Me)
    cb.Move(50, 50)
    cb.SetCheckState(True)
    Connect(cb, SIGNAL("clicked(bool)"), Me, SLOT("OnToggle(bool)"))
    
  End Sub

  <Q_SLOT()> _
  Private Sub OnToggle(ByVal state As Boolean)

    If state
       Me.SetWindowTitle("QCheckBox")
    Else
       Me.SetWindowTitle("")
    End If
     
  End Sub

  Public Shared Sub Main(ByVal args() As String)
    Dim qapp As New QApplication(args)
    Dim app As New VBQApp
    QApplication.Exec()
  End Sub

End Class

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

Me.SetWindowTitle("QCheckBox")

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

Dim cb As New QCheckBox("Show title", Me)

The QCheckBox widget is created. The first parameter of the constructor is its text label. The second parameter is the parent widget.

cb.SetCheckState(True)

The title is visible at the start of the application. So the check box must be checked too. We use the SetCheckState() method to check the check box.

Connect(cb, SIGNAL("clicked(bool)"), Me, SLOT("OnToggle(bool)"))

The clicked(bool) signal is emitted when we click on the check box. When the signal is emitted, we trigger the OnToggle() method.

<Q_SLOT()> _
Private Sub OnToggle(ByVal state As Boolean)
...
End Sub

The method definition is preceded by a Q_SLOT() attribute. This attribute informs a compiler about a custom slot.

If state
  Me.SetWindowTitle("QCheckBox")
Else
  Me.SetWindowTitle("")
End If

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

Figure: QCheckBox

QLabel

The QLabel widget is used to display text or image. No user interaction is available.

' ZetCode Mono Visual Basic Qt tutorial
'
' This program shows lyrics on the
' window
'
' author jan bodnar
' last modified April 2009
' website www.zetcode.com


Imports Qyoto


Public Class VBQApp 
  Inherits QWidget

  Public Sub New()
  
    Me.SetWindowTitle("You know I'm no Good")
  
    Me.InitUI()
    
    Me.Resize(250, 200)
    Me.Move(300, 300)
    Me.Show()
    
  End Sub
  
  Private Sub InitUI()
  
    Dim text As String
    text = "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" 

    Dim label As New QLabel(text, Me)
    label.Font = New QFont("Purisa", 9)

    Dim vbox As New QVBoxLayout()
    vbox.AddWidget(label)
    SetLayout(vbox)
  
  End Sub


  Public Shared Sub Main(ByVal args() As String)
    Dim qapp As New QApplication(args)
    Dim app As New VBQApp
    QApplication.Exec()
  End Sub

End Class

Our example shows lyrics of a song in the window.

Dim text As String
text = "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.

Dim label As New QLabel(text, Me)
label.Font = New QFont("Purisa", 9)

We create the label widget and change its font.

Dim vbox As New QVBoxLayout()
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: QLabel

QLineEdit

The QLineEdit 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 QLineEdit widget.

' ZetCode Mono Visual Basic Qt tutorial
'
' This program demonstrates the 
' QLineEdit widget. Text entered in the QLineEdit
' widget is shown in a QLabel widget.
'
' author jan bodnar
' last modified April 2009
' website www.zetcode.com


Imports Qyoto


Public Class VBQApp 
  Inherits QWidget

  Dim label As QLabel

  Public Sub New()
  
    Me.InitUI()
    
    Me.SetWindowTitle("QLineEdit")
    Me.Resize(250, 200)
    Me.Move(300, 300)
    Me.Show()
    
  End Sub
  
  Private Sub InitUI()
  
    label = New QLabel(Me)

    Dim edit As New QLineEdit(Me)
    Connect(edit, SIGNAL("textChanged(QString)"), Me, _
      SLOT("OnChanged(QString)"))
    
    edit.Move(60, 100)
    label.Move(60, 40)
    
  End Sub

  <Q_SLOT()> _
  Private Sub OnChanged(ByVal text As String)
  
    label.SetText(text)
    label.AdjustSize()
     
  End Sub

  Public Shared Sub Main(ByVal args() As String)
    Dim qapp As New QApplication(args)
    Dim app As New VBQApp
    QApplication.Exec()
  End Sub

End Class

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.

Dim edit As New QLineEdit(Me)

The QLineEdit widget is created.

Connect(edit, SIGNAL("textChanged(QString)"), Me, _
  SLOT("OnChanged(QString)"))

When we type or delete some text from the line edit, the OnChanged() method is triggered. The method takes a string parameter.

<Q_SLOT()> _
Private Sub OnChanged(ByVal text As String)

  label.SetText(text)
  label.AdjustSize()
  
End Sub

In the OnChanged() method, we set the contents of the line edit to the label widget. The AdjustSize() method ensures that all text is visible.

Figure: QLineEdit 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.

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


Imports Qyoto


Public Class VBQApp 
  Inherits QWidget

  Dim square As QWidget
  Dim color As QColor
 
  Dim redb As QPushButton
  Dim greenb As QPushButton
  Dim blueb As QPushButton
  

  Public Sub New()
  
    Me.InitUI()
    
    Me.SetWindowTitle("Toggle buttons")
    Me.Resize(350, 240)
    Me.Move(300, 300)
    Me.Show()
    
  End Sub
  
  Private Sub InitUI()
  
    color = New QColor()

    redb = New QPushButton("Red", Me)
    redb.Checkable = True
    greenb = New QPushButton("Green", Me)
    greenb.Checkable = True
    blueb = New QPushButton("Blue", Me)
    blueb.Checkable = True

    Connect(redb, SIGNAL("toggled(bool)"), Me, SLOT("OnToggled()"))
    Connect(greenb, SIGNAL("toggled(bool)"), Me, SLOT("OnToggled()"))
    Connect(blueb, SIGNAL("toggled(bool)"), Me, SLOT("OnToggled()"))
    
    square = New QWidget(Me)
    square.SetStyleSheet("QWidget { background-color: black }")
    
    redb.Move(30, 30)
    greenb.Move(30, 80)
    blueb.Move(30, 130)
    square.SetGeometry(150, 25, 150, 150)
    
  End Sub

  <Q_SLOT()> _
  Private Sub OnToggled()
  
    Dim red As Integer = color.Red()
    Dim green As Integer = color.Green()
    Dim blue As Integer = color.Blue()
    
    If redb.Checked 
      red = 255
    Else 
      red = 0
    End If
  
    If greenb.Checked
      green = 255
    Else 
      green = 0
    End If

    If blueb.Checked
      blue = 255
    Else 
      blue = 0
    End If
    
    color = New QColor(red, green, blue)

    Dim sheet As String = String.Format("QWidget {{ background-color: {0} }}", _
      color.Name())
    square.SetStyleSheet(sheet)
     
  End Sub

  Public Shared Sub Main(ByVal args() As String)
    Dim qapp As New QApplication(args)
    Dim app As New VBQApp
    QApplication.Exec()
  End Sub

End Class

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

Dim square As QWidget
Dim color As QColor

Dim redb As QPushButton
Dim greenb As QPushButton
Dim blueb As QPushButton

We define five objects. The square widget is a QWidget , which shows the color. The color variable is used to hold the color value. The three buttons are toggle buttons, which are used to mix the color value.

redb = New QPushButton("Red", Me)
redb.Checkable = True

We create a QPushButton widget. The Checkable property changes the push button into a toggle button.

Connect(redb, SIGNAL("toggled(bool)"), Me, SLOT("OnToggled()"))
Connect(greenb, SIGNAL("toggled(bool)"), Me, SLOT("OnToggled()"))
Connect(blueb, SIGNAL("toggled(bool)"), Me, SLOT("OnToggled()"))

All three buttons are plugged into one method call, the OnToggled() method.

square = New QWidget(Me)
square.SetStyleSheet("QWidget { background-color: black }")

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

Inside the OnToggled() method, we determine the color value and update the square widget to a new color.

Dim red As Integer = color.Red()
Dim green As Integer = color.Green()
Dim blue As Integer = color.Blue()

Here we determine the current color of the square widget.

If redb.Checked 
  red = 255
Else 
  red = 0
End If

Change the red part of the color, depending on the state of the red toggle button.

color = New QColor(red, green, blue)

We create a new color value.

Dim sheet As String = String.Format("QWidget {{ background-color: {0} }}", _
  color.Name())

We use the Visual Basic Format object to create the appropriate stylesheet.

square.SetStyleSheet(sheet)

The color of the square is updated.

Figure: Toggle buttons

QComboBox

The QComboBox 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.

' ZetCode Mono Visual Basic Qt tutorial
'
' In this program, we use the QComboBox
' widget to select an option. 
' The selected option is shown in the
' QLabel widget
'
' author jan bodnar
' last modified April 2009
' website www.zetcode.com


Imports Qyoto


Public Class VBQApp 
  Inherits QWidget

  Dim label As QLabel

  Public Sub New()

    Me.SetWindowTitle("QComboBox")

    Me.InitUI()
    
    Me.Resize(250, 200)
    Me.Move(300, 300)
    Me.Show()
    
  End Sub
  
  Private Sub InitUI()
  
    label = New QLabel("Ubuntu", Me)
    
    Dim combo As New QComboBox(Me)
    combo.AddItem("Ubuntu")
    combo.AddItem("Mandriva")
    combo.AddItem("Fedora")
    combo.AddItem("Red Hat")
    combo.AddItem("Gentoo")
    
    combo.Move(50, 30)
    label.Move(50, 100)
    
    Connect(combo, SIGNAL("activated(QString)"), _
         Me, SLOT("OnActivated(QString)"))
    
  End Sub

  <Q_SLOT()> _
  Private Sub OnActivated(ByVal text As String)

    label.SetText(text)
    label.AdjustSize()
     
  End Sub

  Public Shared Sub Main(ByVal args() As String)
    Dim qapp As New QApplication(args)
    Dim app As New VBQApp
    QApplication.Exec()
  End Sub

End Class

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 = New QLabel("Ubuntu", Me)

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

Dim combo As New QComboBox(Me)

We create the instance of the QComboBox widget.

combo.AddItem("Ubuntu")
combo.AddItem("Mandriva")
combo.AddItem("Fedora")
combo.AddItem("Red Hat")
combo.AddItem("Gentoo")

Combo box is filled with values.

Connect(combo, SIGNAL("activated(QString)"), _
      Me, SLOT("OnActivated(QString)"))

When we select an option from the combo box, the OnActivated() method is triggered.

<Q_SLOT()> _
Private Sub OnActivated(ByVal text As String)

  label.SetText(text)
  label.AdjustSize()
  
End Sub

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

Figure: QComboBox widget

In this part of the Visual Basic Qyoto tutorial, we have presented several Qyoto widgets.