Menus and toolbars in Qt5

In this part of the Qt5 C++ programming tutorial, we will talk about menus and toolbars in Qt5 applications.

A menubar is a common part of a GUI application. It is a group of commands located in various places called menus. 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 shows a simple menu.

simplemenu.h
#pragma once

#include <QMainWindow>
#include <QApplication>

class SimpleMenu : public QMainWindow {

  public:
    SimpleMenu(QWidget *parent = 0);
};

This is a header file for our code example.

simplemenu.cpp
#include "simplemenu.h"
#include <QMenu>
#include <QMenuBar>

SimpleMenu::SimpleMenu(QWidget *parent)
    : QMainWindow(parent) {
    
  QAction *quit = new QAction("&Quit", this);

  QMenu *file;
  file = menuBar()->addMenu("&File");
  file->addAction(quit);

  connect(quit, &QAction::triggered, qApp, QApplication::quit);
}

We have a menubar, a menu and an action. In order to work with menus, we must inherit from a QMainWindow widget.

QAction *quit = new QAction("&Quit", this);

This code line creates a QAction. Each QMenu has one or more action objects.

QMenu *file;
file = menuBar()->addMenu("&File");

We create a QMenu object.

file->addAction(quit);

We put an action inside the menu using the addAction() method.

connect(quit, &QAction::triggered, qApp, QApplication::quit);

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

main.cpp
#include "simplemenu.h"

int main(int argc, char *argv[]) {

  QApplication app(argc, argv);  
    
  SimpleMenu window;

  window.resize(250, 150);
  window.setWindowTitle("Simple menu");
  window.show();

  return app.exec();
}

The main file.

Simple menu
Figure: Simple menu

Icons, shortcuts, and separators

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

anothermenu.h
#pragma once

#include <QMainWindow>
#include <QApplication>

class AnotherMenu : public QMainWindow {
    
  public:
    AnotherMenu(QWidget *parent = 0);
};

The header file for the example.

anothermenu.cpp
#include "anothermenu.h"
#include <QMenu>
#include <QMenuBar>

AnotherMenu::AnotherMenu(QWidget *parent)
    : QMainWindow(parent) {
          
  QPixmap newpix("new.png");
  QPixmap openpix("open.png");
  QPixmap quitpix("quit.png");

  QAction *newa = new QAction(newpix, "&New", this);
  QAction *open = new QAction(openpix, "&Open", this);
  QAction *quit = new QAction(quitpix, "&Quit", this);
  quit->setShortcut(tr("CTRL+Q"));

  QMenu *file;
  file = menuBar()->addMenu("&File");
  file->addAction(newa);
  file->addAction(open);
  file->addSeparator();
  file->addAction(quit);
  
  qApp->setAttribute(Qt::AA_DontShowIconsInMenus, false);

  connect(quit, &QAction::triggered, qApp, &QApplication::quit);
}

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 terminates the application.

QPixmap newpix("new.png");
QPixmap openpix("open.png");
QPixmap quitpix("quit.png");

These are images that we use in menus. Note that some desktop environments might not display images in the menus.

QAction *newa = new QAction(newpix, "&New", this);
QAction *open = new QAction(openpix, "&Open", this);
QAction *quit = new QAction(quitpix, "&Quit", this);

In this code we use the QAction constructor with a pixmap as the first argument.

quit->setShortcut(tr("CTRL+Q"));

Here we create a keyboard shortcut. By pressing this shortcut, we will run the quit action which will quit the application.

file->addSeparator();

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

qApp->setAttribute(Qt::AA_DontShowIconsInMenus, false);

In some environments, the menu icons are not shown by default. In this case we can disable the Qt::AA_DontShowIconsInMenus attribute.

main.cpp
#include "anothermenu.h"

int main(int argc, char *argv[]) {

  QApplication app(argc, argv);  
    
  AnotherMenu window;

  window.resize(350, 200);
  window.setWindowTitle("Another menu");
  window.show();

  return app.exec();
}

This is the main file.

Another menu example
Figure: Another menu example

Checkable menu

In the next example, we create a checkable menu. This will be an action with a check box. The option toggles the visibility of a statusbar.

checkable.h
#pragma once

#include <QMainWindow>
#include <QApplication>

class Checkable : public QMainWindow {
    
  Q_OBJECT  

  public:
    Checkable(QWidget *parent = 0);
 
  private slots:
    void toggleStatusbar();

  private:
    QAction *viewst;
};

The header file for the example.

checkable.cpp
#include "checkable.h"
#include <QMenu>
#include <QMenuBar>
#include <QStatusBar>

Checkable::Checkable(QWidget *parent)
    : QMainWindow(parent) {

  viewst = new QAction("&View statusbar", this);
  viewst->setCheckable(true);
  viewst->setChecked(true);

  QMenu *file;
  file = menuBar()->addMenu("&File");
  file->addAction(viewst);

  statusBar();

  connect(viewst, &QAction::triggered, this, &Checkable::toggleStatusbar);
}

void Checkable::toggleStatusbar() {
    
  if (viewst->isChecked()) {
      
      statusBar()->show();
  } else {
      
      statusBar()->hide();
  }
}

A checkable menu item toggles the visibility of the statusbar.

viewst = new QAction("&View statusbar", this);
viewst->setCheckable(true);
viewst->setChecked(true);

We create an actiona and make it checkable with the setCheckable() method. The setChecked() method makes it checked.

if (viewst->isChecked()) {
    
    statusBar()->show();
} else {
    
    statusBar()->hide();
}

Inside the toggleStatusbar() method, we determine if the menu item is checked and hide or show the statusbar accordingly.

main.cpp
#include "checkable.h"

int main(int argc, char *argv[]) {
    
  QApplication app(argc, argv);  
    
  Checkable window;

  window.resize(250, 150);
  window.setWindowTitle("Checkable menu");
  window.show();

  return app.exec();
}

This is the main file.

Checkable menu
Figure: Checkable menu

QToolBar

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

toolbar.h
#pragma once

#include <QMainWindow>
#include <QApplication>

class Toolbar : public QMainWindow {
    
  Q_OBJECT  

  public:
    Toolbar(QWidget *parent = 0);
};

The header file for the example.

toolbar.cpp
#include "toolbar.h"
#include <QToolBar>
#include <QIcon>
#include <QAction>

Toolbar::Toolbar(QWidget *parent)
    : QMainWindow(parent) {
    
  QPixmap newpix("new.png");
  QPixmap openpix("open.png");
  QPixmap quitpix("quit.png");
  
  QToolBar *toolbar = addToolBar("main toolbar");
  toolbar->addAction(QIcon(newpix), "New File");
  toolbar->addAction(QIcon(openpix), "Open File");
  toolbar->addSeparator();
  QAction *quit = toolbar->addAction(QIcon(quitpix), 
      "Quit Application");
  
  connect(quit, &QAction::triggered, qApp, &QApplication::quit);
}

To create a toolbar, we inherit from the QMainWindow widget.

QToolBar *toolbar = addToolBar("main toolbar");

The addToolBar() method creates a toolbar and returns a pointer to it.

toolbar->addAction(QIcon(newpix), "New File");
toolbar->addAction(QIcon(openpix), "Open File");
toolbar->addSeparator();

Here we add two actions and a separator to the toolbar.

main.cpp
#include "toolbar.h"

int main(int argc, char *argv[]) {
    
  QApplication app(argc, argv);  
    
  Toolbar window;

  window.resize(300, 200);
  window.setWindowTitle("QToolBar");
  window.show();

  return app.exec();
}

This is the main file.

QToolBar
Figure: QToolBar

Application skeleton

In the end of this part of the C++ Qt5 tutorial, we create an application skeleton. The example is based mainly on the QMainWindow widget.

skeleton.h
#pragma once

#include <QMainWindow>
#include <QApplication>

class Skeleton : public QMainWindow {
    
  Q_OBJECT  

  public:
    Skeleton(QWidget *parent = 0);
};

The header file for the example.

skeleton.cpp
#include "skeleton.h"
#include <QToolBar>
#include <QIcon>
#include <QAction>
#include <QMenu>
#include <QMenuBar>
#include <QStatusBar>
#include <QTextEdit>

Skeleton::Skeleton(QWidget *parent)
    : QMainWindow(parent) {
        
  QPixmap newpix("new.png");
  QPixmap openpix("open.png");
  QPixmap quitpix("quit.png");

  QAction *quit = new QAction("&Quit", this);

  QMenu *file;
  file = menuBar()->addMenu("&File");
  file->addAction(quit);

  connect(quit, &QAction::triggered, qApp, &QApplication::quit);
  
  QToolBar *toolbar = addToolBar("main toolbar");
  toolbar->addAction(QIcon(newpix), "New File");
  toolbar->addAction(QIcon(openpix), "Open File");
  toolbar->addSeparator();
  
  QAction *quit2 = toolbar->addAction(QIcon(quitpix), 
      "Quit Application");
  connect(quit2, &QAction::triggered, qApp, &QApplication::quit);

  QTextEdit *edit = new QTextEdit(this);  

  setCentralWidget(edit);

  statusBar()->showMessage("Ready");
}

Here we create a menu a toolbar and a statusbar.

QTextEdit *edit = new QTextEdit(this);  

setCentralWidget(edit);

We create a QTextEdit widget and place it into the central part of the QMainWindow widget.

main.cpp
#include "skeleton.h"

int main(int argc, char *argv[]) {
    
  QApplication app(argc, argv);  
    
  Skeleton window;

  window.resize(350, 250);
  window.setWindowTitle("Application skeleton");
  window.show();

  return app.exec();
}

This is the main file.

Application skeleton
Figure: Application skeleton

In this part of the Qt5 tutorial, we have covered menus and toolbars.