Question

In this part of the Visual Basic Qyoto programming tutorial, we will work with menus and toolbars.

A menubar is one of the most visible parts of the GUI application. It is a group of commands located in various menus. While in console applications you had to remember all those arcane commands, here we have most of the commands grouped into logical parts. There are accepted standards that further reduce the amount of time spending to learn a new application. Menus group commands that we can use in an application. Toolbars provide a quick access to the most frequently used commands.

Simple menu

The first example will show a simple menu.

' ZetCode Mono Visual Basic Qt tutorial
'
' This program shows a simple
' menu. It has one action, which
' will terminate the program, when
' selected. 
'
' author jan bodnar
' last modified May 2009
' website www.zetcode.com


Imports Qyoto


Public Class VBQApp 
  Inherits QMainWindow

  Public Sub New()
  
    Me.SetWindowTitle("Simple menu")
  
    Me.InitUI()
    
    Me.Resize(250, 200)
    Me.Move(300, 300)
    Me.Show()
    
  End Sub
  
  Private Sub InitUI()
  
    Dim quit As New QAction("&Quit", Me)

    Dim file As QMenu = Me.MenuBar().AddMenu("&File")
    file.AddAction(quit)

    Connect(quit, SIGNAL("triggered()"), qApp, SLOT("quit()"))
  
  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 have a menubar, a menu and an action. In order to work with menus, we must inherit from QMainWindow widget.

Dim quit As New QAction("&Quit", Me)

This code line creates a QAction . Each QMenu has one or more action objects. Note the ampersand (&) character. It creates a shortcut for the item: Alt+Q. It also underlines the Q character. The shortcut is active, when the file menu is dropped down.

Dim file As QMenu = Me.MenuBar().AddMenu("&File")
file.AddAction(quit)

We create a QMenu object. The ampersand character creates a shortcut: Alt+F. The consecutive shortcuts Alt+F, Alt+Q quit the application.

Connect(quit, SIGNAL("triggered()"), qApp, SLOT("quit()"))

When we select this option from the menu, the application quits.

Figure: Simple menu

Creating a submenu

A submenu is a menu plugged into another menu object. The next example demonstrates this.

' ZetCode Mono Visual Basic Qt tutorial
'
' This program creates 
' a submenu
'
' author jan bodnar
' last modified May 2009
' website www.zetcode.com


Imports Qyoto


Public Class VBQApp 
  Inherits QMainWindow

  Public Sub New()
  
    Me.SetWindowTitle("Submenu")
  
    Me.InitUI()
    
    Me.Resize(280, 200)
    Me.Move(300, 300)
    Me.Show()
    
  End Sub
  
  Private Sub InitUI()
  
    Dim quit As New QAction("&Quit", Me)

    Dim file As QMenu = MenuBar().AddMenu("&File")
    Dim impm As New QMenu("Import")

    Dim seeds As New QAction("Import news feed...", Me)
    Dim marks As New QAction("Import bookmarks...", Me)
    Dim mail As New QAction("Import mail...", Me)
    
    impm.AddAction(seeds)
    impm.AddAction(marks)
    impm.AddAction(mail)
    
    file.AddMenu(impm)
    file.AddAction(quit)

    Connect(quit, SIGNAL("triggered()"), qApp, SLOT("quit()"))
  
  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 example, we have three options in a submenu of a file menu.

Dim file As QMenu = MenuBar().AddMenu("&File")
Dim impm As New QMenu("Import")

We have two QMenu objects. The file menu and the import menu.

Dim seeds As New QAction("Import news feed...", Me)
Dim marks As New QAction("Import bookmarks...", Me)
Dim mail As New QAction("Import mail...", Me)

We create three action objects.

impm.AddAction(seeds)
impm.AddAction(marks)
impm.AddAction(mail)

We add the action objects into the import menu.

file.AddMenu(impm)

Finally, we add the import menu into the file menu.

Figure: Submenu

Images, menus, separators

In the following example, we will further enhance our previous application. We will add icons to the menus, use shortcuts and a separator.

' ZetCode Mono Visual Basic Qt tutorial
'
' This program shows image
' menu items, a shorcut and a separator
'
' author jan bodnar
' last modified May 2009
' website www.zetcode.com


Imports Qyoto


Public Class VBQApp 
  Inherits QMainWindow

  Public Sub New()
  
    Me.SetWindowTitle("Image menu")
  
    Me.InitUI()
    
    Me.Resize(280, 200)
    Me.Move(300, 300)
    Me.Show()
    
  End Sub
  
  Private Sub InitUI()
  
    Dim newpix As New QIcon("new.png")
    Dim openpix As New QIcon("open.png")
    Dim quitpix As New QIcon("quit.png")

    Dim newa As New QAction(newpix, "&New", Me)
    Dim open As New QAction(openpix, "&Open", Me)
    Dim quit As New QAction(quitpix, "&Quit", Me)

    quit.Shortcut = New QKeySequence("Ctrl+Q")  

    Dim file As QMenu = MenuBar().AddMenu("&File")
    file.AddAction(newa)
    file.AddAction(open)
    file.AddSeparator()
    file.AddAction(quit)

    Connect(quit, SIGNAL("triggered()"), qApp, SLOT("quit()"))
  
  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 menu with three actions. Only the quit action will actually do something if we select it. We also create a separator and a Ctrl+Q shortcut, which will terminate the application.

Dim newpix As New QIcon("new.png")
Dim openpix As New QIcon("open.png")
Dim quitpix As New QIcon("quit.png")

These are PNG images that we will use in the application.

Dim newa As New QAction(newpix, "&New", Me)
Dim open As New QAction(openpix, "&Open", Me)
Dim quit As New QAction(quitpix, "&Quit", Me)

Here we create three action objects. The first parameter is the QIcon .

quit.Shortcut = New QKeySequence("Ctrl+Q") 

This line creates a shortcut. By pressing this shortcut, we will run the quit action, which will terminate the application.

file.AddSeparator()

We create a separator. The separator is a horizontal line, which enables us to group menu actions into some logical parts.

Figure: Images, shortcut and a separator

A toolbar

The QToolBar class provides a movable panel that contains a set of controls, which provide a quick access to the application actions.

' ZetCode Mono Visual Basic Qt tutorial
'
' This program creates a 
' toolbar
'
' author jan bodnar
' last modified May 2009
' website www.zetcode.com


Imports Qyoto


Public Class VBQApp 
  Inherits QMainWindow

  Public Sub New()
  
    Me.SetWindowTitle("Toolbar")
  
    Me.InitUI()
    
    Me.Resize(280, 200)
    Me.Move(300, 300)
    Me.Show()
    
  End Sub
  
  Private Sub InitUI()
  
    Dim newpi As New QIcon("new.png")
    Dim openpi As New QIcon("open.png")
    Dim quitpi As New QIcon("quit.png")

    Dim toolbar As QToolBar = AddToolBar("main toolbar")
    toolbar.AddAction(newpi, "New File")
    toolbar.AddAction(openpi, "Open File")
    toolbar.AddSeparator()
    Dim quit As QAction = toolbar.AddAction(quitpi, _
      "Quit Application")

    Connect(quit, SIGNAL("triggered()"), qApp, SLOT("quit()"))
  
  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 create a toolbar with three action objects and one separator.

Dim newpi As New QIcon("new.png")
Dim openpi As New QIcon("open.png")
Dim quitpi As New QIcon("quit.png")

Toolbar action objects will display these icons.

Dim toolbar As QToolBar = AddToolBar("main toolbar")

The AddToolBar() method of the QMainWindow class creates a toolbar for the application. The text string gives a toolbar a name. This name is used to reference this toolbar, because there can be multiple toolbars in one application. If we right click on the window area, we can see a checkable option, which shows/hides the toolbar.

toolbar.AddSeparator()

We create a vertical separator.

Connect(quit, SIGNAL("triggered()"), qApp, SLOT("quit()"))

When we click on the quit action object, the application terminates.

Figure: Toolbar

Undo redo

The following example demonstrates, how we can deactivate toolbar buttons on the toolbar. It is a common practice in GUI programming. For example the save button. If we save all changes of our document to the disk, the save button is deactivated in most text editors. This way the application indicates to the user that all changes are already saved.

' ZetCode Mono Visual Basic Qt tutorial
'
' This program disables/enables
' toolbuttons on a toolbar
'
' author jan bodnar
' last modified May 2009
' website www.zetcode.com


Imports Qyoto


Public Class VBQApp 
  Inherits QMainWindow

  Dim clicks As Integer = 0
  Dim undoButton As QToolButton
  Dim redoButton As QToolButton

  Public Sub New()
  
    Me.SetWindowTitle("Undo redo")
  
    Me.InitUI()
    
    Me.Resize(280, 200)
    Me.Move(300, 300)
    Me.Show()
    
  End Sub
  
  Private Sub InitUI()
  
    Dim undoi As New QIcon("undo.png")
    Dim redoi As New QIcon("redo.png")
    Dim quitpi As New QIcon("quit.png")

    Dim toolbar As New QToolBar
    undoButton = New QToolButton
    redoButton = New QToolButton

    Dim undoAction As New QAction(undoi, "Undo", undoButton)
    Dim redoAction As New QAction(redoi, "Redo", redoButton)

    undoButton.SetDefaultAction(undoAction)
    redoButton.SetDefaultAction(redoAction)

    toolbar.AddSeparator()
    toolbar.AddWidget(undoButton)
    toolbar.AddWidget(redoButton)

    Dim quit As QAction = toolbar.AddAction(quitpi, "Quit Application")
    
    Connect(quit, SIGNAL("triggered()"), qApp, SLOT("quit()"))
    
    Connect(undoButton, SIGNAL("triggered(QAction*)"), _
      Me, SLOT("Count(QAction*)"))
    Connect(redoButton, SIGNAL("triggered(QAction*)"), _
      Me, SLOT("Count(QAction*)"))

    AddToolBar(toolbar)

  End Sub

  <Q_SLOT()> _
  Private Sub Count(ByVal action As QAction)
    
    If "Undo".Equals(action.Text)
      clicks -= 1
    Else 
      clicks += 1
    End If
  
    If clicks <= 0 
      undoButton.SetDisabled(True)
      redoButton.SetDisabled(False)
    End If

    If clicks >= 5 
      undoButton.SetDisabled(False)
      redoButton.SetDisabled(True)
    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 have three QAction objects and a separator. After several clicks on the undo or redo buttons, they become deactivated. Visually, the buttons are grayed out.

Dim clicks As Integer = 0

The clicks variable determines, which button is activated or deactivated.

Connect(undoButton, SIGNAL("triggered(QAction*)"), _
  Me, SLOT("Count(QAction*)"))
Connect(redoButton, SIGNAL("triggered(QAction*)"), _
  Me, SLOT("Count(QAction*)"))

Clicking on the toolbar button, the triggered() signal is emitted. We connect this signal to the Count() method. It receives the QAction object, which triggered it.

If "Undo".Equals(action.Text)
  clicks -= 1
Else 
  clicks += 1
End If

The undo toolbar button subtracts 1 from the clicks variable. The redo adds 1. Depending on the value of the clicks variable, we enable/disable the toolbar buttons.

If clicks <= 0 
  undoButton.SetDisabled(True)
  redoButton.SetDisabled(False)
End If

The SetDisabled() method activates or deactivates the toolbar buttons.

Figure: Undo redo

In this part of the Visual Basic Qyoto tutorial, we mentioned menus and toolbars.