Question

In this part of the Visual Basic Qyoto programming tutorial, we will introduce layout managers.

When we design the GUI of our application, we decide what components we will use and how we will organize those components in the application. To organize our components, we use specialized non visible objects called layout managers. There are several options in Qyoto. We can use absolute positioning, built-in layout managers or create a custom layout manager. We can also visually build the layouts using the Qt Designer.

Qyoto has some important built-in layout managers. The QVBoxLayout class lines up widgets vertically. QHBoxLayout lines up widgets horizontally. The QGridLayout class lays out widgets in a grid. The grid layout is the most flexible layout manager. The box layouts nest into one another to create complex layouts.

Absolute positioning

In most cases, programmers should use layout managers. There are a few situations, where we can use absolute positioning. In absolute positioning, the programmer specifies the position and the size of each widget in pixels. The size and the position of a widget do not change if we resize a window. Applications look different on various platforms, and what looks OK on Linux, might not look OK on Mac OS. Changing fonts in our application might spoil the layout. If we translate your application into another language, we must redo our layout. For all these issues, we use the absolute positioning only when we have a reason to do so.

' ZetCode Mono Visual Basic Qt tutorial
'
' In this program, we lay out widgets
' using absolute positioning
'
' author jan bodnar
' last modified May 2009
' website www.zetcode.com


Imports Qyoto


Public Class VBQApp 
  Inherits QMainWindow

  Dim bardejov As QPixmap
  Dim rotunda As QPixmap 
  Dim mincol As QPixmap

  Public Sub New()
  
    Me.SetWindowTitle("Absolute")
  
    Me.InitUI()
    
    Me.Resize(300, 280)
    Me.Move(300, 300)
    Me.Show()
    
  End Sub
  
  Private Sub InitUI()
  
    SetStyleSheet("QWidget { background-color: #414141 }")

    Try 
      bardejov = New QPixmap("bardejov.jpg")
      rotunda = New QPixmap("rotunda.jpg")
      mincol = New QPixmap("mincol.jpg")
    Catch e As Exception
      Console.WriteLine(e.Message)
      Environment.Exit(1)
    End Try

    Dim barLabel As New QLabel(Me)
    barLabel.SetPixmap(bardejov)
    barLabel.SetGeometry(20, 20, 120, 90)

    Dim rotLabel As New QLabel(Me)
    rotLabel.SetPixmap(rotunda)
    rotLabel.SetGeometry(40, 160, 120, 90)

    Dim minLabel As New QLabel(Me)
    minLabel.SetPixmap(mincol)
    minLabel.SetGeometry(170, 50, 120, 90)

  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 this example, we show three images using the absolute positioning.

Dim barLabel As New QLabel(Me)
barLabel.SetPixmap(bardejov)

The QLabel widget is used to hold the image.

barLabel.SetGeometry(20, 20, 120, 90)

We use the SetGeometry() method to position the label on the window at x=20, y=20. The size of the image is 120x90.

When we resize the window, the labels retain their initial size.

Figure: Absolute positioning

Buttons example

In the following example, we will position two buttons in the bottom right corner of the window.

' ZetCode Mono Visual Basic Qt tutorial
'
' In this program, use box layouts
' to position two buttons in the
' bottom right corner of the window
'
' author jan bodnar
' last modified May 2009
' website www.zetcode.com


Imports Qyoto


Public Class VBQApp 
  Inherits QWidget

  Public Sub New()
  
    Me.SetWindowTitle("Buttons")
  
    Me.InitUI()
    
    Me.Resize(300, 150)
    Me.Move(300, 300)
    Me.Show()
    
  End Sub
  
  Private Sub InitUI()
  
    Dim vbox As New QVBoxLayout(Me)
    Dim hbox As New QHBoxLayout

    Dim ok As New QPushButton("OK", Me)
    Dim apply As New QPushButton("Apply", Me)

    hbox.AddWidget(ok, 1, Qt.AlignmentFlag.AlignRight)
    hbox.AddWidget(apply)
    
    vbox.AddStretch(1)
    vbox.AddLayout(hbox)

  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

We use nested box layouts to get our intended layout.

Dim vbox As New QVBoxLayout(Me)
Dim hbox As New QHBoxLayout

We use one vertical and one horizontal box.

Dim ok As New QPushButton("OK", Me)
Dim apply As New QPushButton("Apply", Me)

These are the two buttons that will go into the bottom right corner of the window.

hbox.AddWidget(ok, 1, Qt.AlignmentFlag.AlignRight)

We put the ok button into the horizontal box. The second parameter is the stretch factor. It expands the area allotted to the ok button. It takes all available space left. Inside this area, the button is aligned to the right.

vbox.AddStretch(1)

This line creates a vertically expanded white space, which will push the horizontal box with the buttons to the bottom.

vbox.AddLayout(hbox)

The horizontal box is nested into the vertical box.

Figure: Buttons example

Windows example

The following is a more complicated example with nested box layouts.

' ZetCode Mono Visual Basic Qt tutorial
'
' In this program, use box layouts
' to create a windows example
'
' author jan bodnar
' last modified May 2009
' website www.zetcode.com


Imports Qyoto


Public Class VBQApp 
  Inherits QWidget

  Public Sub New()
  
    Me.SetWindowTitle("Windows")
  
    Me.InitUI()
    
    Me.Resize(350, 300)
    Me.Move(300, 300)
    Me.Show()
    
  End Sub
  
  Private Sub InitUI()
  
    Dim vbox As New QVBoxLayout(Me)

    Dim vbox1 As New QVBoxLayout
    Dim hbox1 As New QHBoxLayout
    Dim hbox2 As New QHBoxLayout

    Dim windLabel As New QLabel("Windows", Me)
    Dim edit As New QTextEdit(Me)
    edit.SetEnabled(False)

    Dim activate As New QPushButton("Activate", Me)
    Dim close As New QPushButton("Close", Me)
    Dim help As New QPushButton("Help", Me)
    Dim ok As New QPushButton("OK", Me)

    vbox.AddWidget(windLabel)

    vbox1.AddWidget(activate)
    vbox1.AddWidget(close, 0, AlignmentFlag.AlignTop)
    hbox1.AddWidget(edit)
    hbox1.AddLayout(vbox1)

    vbox.AddLayout(hbox1)

    hbox2.AddWidget(help)
    hbox2.AddStretch(1)
    hbox2.AddWidget(ok)
    
    vbox.AddLayout(hbox2, 1)

  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 this layout, we use two vertical and horizontal boxes.

Dim vbox As New QVBoxLayout(Me)

This is the base layout of the example.

vbox.AddWidget(windLabel)

First goes the label widget. It goes simply to the top of the vertical box.

vbox1.AddWidget(activate)
vbox1.AddWidget(close, 0, AlignmentFlag.AlignTop)
hbox1.AddWidget(edit)
hbox1.AddLayout(vbox1)

vbox.AddLayout(hbox1)

In the center part of the window we have a text edit widget and two vertically lined up buttons. The buttons go into a vertical box. The buttons are aligned to the top within this vertical box. The vertical box and the text edit go into a horizontal box. This horizontal box goes to the base vertical box, just below the label widget.

hbox2.AddWidget(help)
hbox2.AddStretch(1)
hbox2.AddWidget(ok)

vbox.AddLayout(hbox2, 1)

The help and the ok button go into another horizontal box. There is an expanded white space between these two buttons. Again, the horizontal box goes to the base vertical box.

Figure: Windows example

New Folder example

In the last example, we use the QGridLayout manager to create a New Folder layout example.

' ZetCode Mono Visual Basic Qt tutorial
'
' In this program, use the QGridLayout
' to create a New Folder example
'
' author jan bodnar
' last modified May 2009
' website www.zetcode.com


Imports Qyoto


Public Class VBQApp 
  Inherits QWidget

  Public Sub New()
  
    Me.SetWindowTitle("New Folder")
  
    Me.InitUI()
    
    Me.Resize(350, 300)
    Me.Move(300, 300)
    Me.Show()
    
  End Sub
  
  Private Sub InitUI()
  
    Dim grid As New QGridLayout(Me)

    Dim nameLabel As New QLabel("Name", Me)
    Dim nameEdit As New QLineEdit(Me)
    Dim text As New QTextEdit(Me)
    Dim okButton As New QPushButton("OK", Me)
    Dim closeButton As New QPushButton("Close", Me)

    grid.AddWidget(nameLabel, 0, 0)
    grid.AddWidget(nameEdit, 0, 1, 1, 3)
    grid.AddWidget(text, 1, 0, 2, 4)
    grid.SetColumnStretch(1, 1)
    grid.AddWidget(okButton, 4, 2)
    grid.AddWidget(closeButton, 4, 3)

  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 have one label, one line edit, one text edit and two buttons.

Dim grid As New QGridLayout(Me)

We create an instance of the QGridLayout manager.

grid.AddWidget(nameLabel, 0, 0)

We place the label widget in the first cell of the grid. The cells count from 0. The last two parameters are the row and column number.

grid.AddWidget(nameEdit, 0, 1, 1, 3)

The line edit widget is placed at the first row, second column. The last two parameters are the row span and the column span. Horizontally, the widget will span three columns.

grid.SetColumnStretch(1, 1)

The parameters of the method are the column number and the stretch factor. Here we set stretch factor 1 to the second column. This means that this column will take all remaining space. This was set, because we wanted our buttons to retain their initial size.

Figure: New Folder example

In this part of the Visual Basic Qyoto tutorial, we mentioned layout management of widgets.