Menus and toolbars in Qt4

In this part of the Qt4 C++ programming tutorial, we will talk about menus and toolbars in Qt4 applications.
A menubar is one of the most visible parts of the GUI application. It is a group of commands located in various 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 will show a simple menu.

simplemenu.h

#ifndef SIMPLEMENU_H
#define SIMPLEMENU_H

#include <QMainWindow>
#include <QApplication>

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

#endif

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, SIGNAL(triggered()), qApp, SLOT(quit()));
}

We have a menubar, a menu and an action. In order to work with menus, we must inherit from 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.

connect(quit, SIGNAL(triggered()), qApp, SLOT(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.move(300, 300);
  window.setWindowTitle("Simple menu");
  window.show();

  return app.exec();
}

The main file.

Figure: Simple menu

Icons, shortcuts and separators

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

anothermenu.h

#ifndef ANOTHERMENU_H
#define ANOTHERMENU_H

#include <QMainWindow>
#include <QApplication>

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

#endif

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);

  connect(quit, SIGNAL(triggered()), qApp, SLOT(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 will terminate the application.

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

These are images that we will 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.

main.cpp

#include "anothermenu.h"


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

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

  return app.exec();
}

Main file.

Figure: Another menu example

Checkable menu

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

checkable.h

#ifndef CHECKABLE_H
#define CHECKABLE_H

#include <QMainWindow>
#include <QApplication>

class Checkable : public QMainWindow
{
  Q_OBJECT  

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

  private:
    QAction *viewst;

};

#endif

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, SIGNAL(triggered()), this, 
    SLOT(toggleStatusbar()));

}

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

A checkable menu item will toggle the visibility of the statusbar.

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

We create an action. Make it checkable with the setCheckable() method. Then we make it checked.

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

Inside the toggleStatusbar() method, we determine if the menu item is checked. And we 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.move(300, 300);
  window.setWindowTitle("Checkable menu");
  window.show();

  return app.exec();
}

Main file.

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

#ifndef TOOLBAR_H
#define TOOLBAR_H

#include <QMainWindow>
#include <QApplication>

class Toolbar : public QMainWindow
{
  Q_OBJECT  

  public:
    Toolbar(QWidget *parent = 0);

};

#endif

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, SIGNAL(triggered()), qApp, SLOT(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.move(300, 300);  
  window.setWindowTitle("QToolBar");
  window.show();

  return app.exec();
}

Main file.

Figure: QToolBar

Application skeleton

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

skeleton.h

#ifndef SKELETON_H
#define SKELETON_H

#include <QMainWindow>
#include <QApplication>

class Skeleton : public QMainWindow
{
  Q_OBJECT  

  public:
    Skeleton(QWidget *parent = 0);

};

#endif

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, SIGNAL(triggered()), qApp, SLOT(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, SIGNAL(triggered()), qApp, SLOT(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.move(300, 300);  
  window.setWindowTitle("Application skeleton");
  window.show();

  return app.exec();
}

Main file.

Figure: Application skeleton

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