Home  Contents

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

simplemenu.h

#ifndef SIMPLEMENU_H
#define SIMPLEMENU_H

#include <QMainWindow>

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>
#include <QApplication>



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"
#include <QDesktopWidget>
#include <QApplication>

void center(QWidget &widget)
{
  int x, y;
  int screenWidth;
  int screenHeight;
  int width, height;
  QSize windowSize;

  QDesktopWidget *desktop = QApplication::desktop();

  width = widget.frameGeometry().width();
  height = widget.frameGeometry().height();  

  screenWidth = desktop->width();
  screenHeight = desktop->height();
 
  x = (screenWidth - width) / 2;
  y = (screenHeight - height) / 2;

  widget.move( x, y );
}


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

  SimpleMenu window;

  window.setWindowTitle("Simple menu");
  window.show();
  center(window);

  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 will add icons to the menus, use shortcuts and a separator. 

anothermenu.h

#ifndef ANOTHERMENU_H
#define ANOTHERMENU_H

#include <QMainWindow>

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>
#include <QApplication>



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. 

 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"
#include <QDesktopWidget>
#include <QApplication>

void center(QWidget &widget)
{
  int x, y;
  int screenWidth;
  int screenHeight;
  int width, height;
  QSize windowSize;

  QDesktopWidget *desktop = QApplication::desktop();

  width = widget.frameGeometry().width();
  height = widget.frameGeometry().height();  

  screenWidth = desktop->width();
  screenHeight = desktop->height();
 
  x = (screenWidth - width) / 2;
  y = (screenHeight - height) / 2;

  widget.move( x, y );
}


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

  AnotherMenu window;

  window.setWindowTitle("Another menu");
  window.show();
  center(window);

  return app.exec();
}

Main file.


Another menu example
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>

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>
#include <QApplication>


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

 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"
#include <QDesktopWidget>
#include <QApplication>

void center(QWidget &widget)
{
  int x, y;
  int screenWidth;
  int screenHeight;

  int WIDTH = 250;
  int HEIGHT = 170;

  QDesktopWidget *desktop = QApplication::desktop();

  screenWidth = desktop->width();
  screenHeight = desktop->height();
 
  x = (screenWidth - WIDTH) / 2;
  y = (screenHeight - HEIGHT) / 2;

  widget.setGeometry(x, y, WIDTH, HEIGHT);
}


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

  Checkable window;

  window.setWindowTitle("Checkable menu");
  window.show();
  center(window);

  return app.exec();
}

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

#ifndef TOOLBAR_H
#define TOOLBAR_H

#include <QMainWindow>

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 <QApplication>
#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 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"
#include <QDesktopWidget>
#include <QApplication>

void center(QWidget &widget)
{
  int x, y;
  int screenWidth;
  int screenHeight;

  int WIDTH = 250;
  int HEIGHT = 170;

  QDesktopWidget *desktop = QApplication::desktop();

  screenWidth = desktop->width();
  screenHeight = desktop->height();

  x = (screenWidth - WIDTH) / 2;
  y = (screenHeight - HEIGHT) / 2;

  widget.setGeometry(x, y, WIDTH, HEIGHT);
}


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

  Toolbar window;

  window.setWindowTitle("QToolBar");
  window.show();
  center(window);

  return app.exec();
}

Main file.


QToolBar
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>

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 <QApplication>
#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");

  QTextEdit *edit = new QTextEdit(this);  

  setCentralWidget(edit);

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

  connect(quit, SIGNAL(triggered()), qApp, SLOT(quit())); 
  connect(quit2, SIGNAL(triggered()), qApp, SLOT(quit()));
}

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"
#include <QDesktopWidget>
#include <QApplication>

void center(QWidget &widget)
{
  int x, y;
  int screenWidth;
  int screenHeight;

  int WIDTH = 350;
  int HEIGHT = 250;

  QDesktopWidget *desktop = QApplication::desktop();

  screenWidth = desktop->width();
  screenHeight = desktop->height();

  x = (screenWidth - WIDTH) / 2;
  y = (screenHeight - HEIGHT) / 2;

  widget.setGeometry(x, y, WIDTH, HEIGHT);
}


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

  Skeleton window;

  window.setWindowTitle("Application skeleton");
  window.show();
  center(window);

  return app.exec();
}

Main file.


Application skeleton
Figure: Application skeleton


Home ‡ Contents ‡ Top of Page
ZetCode last modified May 13, 2008 © 2007 - 2008 Jan Bodnar