Grafikprogrammierung
GUIs mit C++ und Qt

Das Weiterschalten der Folien kann ebenfalls durch das Klicken auf den rechten bzw. linken Folienrand erfolgen.

• Qt ist eine weit verbreitete Klassenbibliothek zur plattformübergreifenden Entwicklung von GUIs
• Qt unterstützt alle gängigen Plattformen, wie Windows, Mac OS und Linux
• Qt ist leicht zu erlernen, sehr gut dokumentiert (siehe Online Reference Documentation) und es gibt viele Beispiele
• Qt unterstützt zahlreiche C++ Compiler, wie gcc oder MS Visual Studio
• Zur Entwicklung kann ebenfalls die Qt-eigene integrierte Entwicklungsumgebung QtCreator  verwendet werden

• Installation des Qt 6 Open Source Frameworks (Download)
• Erstellen eines QMake-Projekts mit Dateinamen "fake.pro"

  TARGET = ApplicationName
  SOURCES += main.cpp Widget1.cpp Widget2.cpp
  HEADERS += Widget1.h Widget2.h
  QT += widgets

• Erstellen eines Makefiles mit qmake  (in einer Shell) :

  qmake -o Makefile fake.pro

• Kompilieren: (in einer Shell)

  make

• Durch das Kompilieren entsteht eine ausführbare Datei

• Erstellen eines ersten Widgets mit den Klassen QApplication und QWidget
• Darstellung des Textes mittels QLabel

Quelltext des Beispiels: HelloGUI.cpp

#include <QApplication>
#include <QLabel>
#include <QWidget>

class MyWidget : public QWidget { // our own custom widget
  ...
};

int main (int argc, char* argv[]) {
  // create a QApplication object that handles initialization,
  // finalization, and the main event loop
  QApplication appl(argc, argv);
  MyWidget widget;  // create a widget
  widget.show(); //show the widget and its children
  return appl.exec(); // execute the application
}

#include <QApplication>
#include <QLabel>
#include <QWidget>

class MyWidget : public QWidget{
  public:
    MyWidget(QWidget *parent = NULL) : QWidget(parent) {
        this->resize(320, 240);
        this->setWindowTitle("HelloGUI with Qt");
        QLabel* label = new QLabel("Hello World", this);
    }
};

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

• Erstellen eines Menüs mit QMenuBar, QMenu und QAction

Quelltext des Beispiels: MyQMenuBar.cpp

class MyWidget : public QMainWindow {
 public:
    MyWidget(QWidget *parent = NULL) : QMainWindow(parent) {
        this->resize(320, 240);
        this->setWindowTitle("HelloGUI with Qt");
        QLabel* label = new QLabel("Hello World", this);
        createMenus();
    }
  private:
    void createMenus() {
      QMenuBar *bar = menuBar();
      QMenu *fileMenu = bar->addMenu(tr("&File"));
      fileMenu->addAction(new QAction("Open", this));
      fileMenu->addAction(new QAction("Close", this));
    }
};        

• Erstellen einer Schaltfläche mit QPushButton

Quelltext des Beispiels: MyQButton.cpp

class MyWidget : public QMainWindow {
 public:
    MyWidget(QWidget *parent = NULL) : QMainWindow(parent) {
        ...
        QLabel* label = new QLabel("Hello World", this);
        label->setGeometry(120, 20, 150, 30);
        QPushButton* button = new QPushButton( "Button text", this);
        button->setGeometry(120, 50, 150, 30);
        createMenus();
    }
  private:
    void createMenus() {...}
};

• Ereignis (Event): Etwas wurde aktiviert, verändert, bewegt, etc.
• Ereignisquelle: Die Komponente, von der das Ereignis ausgeht, z.B. ein gedrückter QPushButton
• Ereignisbeobachter: Die Klasse, die von dem Ereignis informiert werden möchte

• Qt verwendet keine Rückruffunktion (callback function) wie viele Frameworks (und auch keine EventListener wie Java)
• Stattdessen verwendet Qt das "Signals und Slots"-Prinzip
• Eine Ereignisquelle sendet ein Signal aus
• Ein Ereignisbeobachter wird auf seinem Slot (einer Memberfunktion) über ein Ereignis informiert
• Ein Signal und ein Slot werden mittels der connect() Funktion verbunden
• Der Vorteil des "Signals und Slots"-Prinzips ist, dass weder Sender noch Empfänger voneinander wissen müssen, da ein connect() auch von dritter Seite ausgeführt werden kann

class QAbstractButton : public QWidget {
  Q_OBJECT
public:
  QAbstractButton(QWidget* parent=0);
  void setText(const QString &text);
  ...
public slots:
  void click();
  void toggle();
  ...
signals:
  void pressed();
  void released();
  ...
};

• Ein Klick auf den Button erhöht einen Zähler und gibt den Zählerstand im Label-Text aus

Quelltext des Beispiels:
ActionButton.cpp, MyWidget.h

#ifndef MYWIDGET_H
#define MYWIDGET_H
#include <QMainWindow> 
...
class MyWidget : public QMainWindow {
    Q_OBJECT
public:
  MyWidget(QWidget *parent = NULL) : QMainWindow(parent) {...}
public slots:
  void buttonClicked() {...}
private:
  void createMenus() {...}
private:
  int counter;
  QLabel* label;
};
#endif // MYWIDGET_H

public:
  MyWidget(QWidget *parent = NULL) : QMainWindow(parent) {
    ...
    counter = 0;
    label = new QLabel("Hello World", this);
    label->setGeometry(120, 20, 150, 30);
    QPushButton* button = new QPushButton( "Increment", this);
    button->setGeometry(120, 50, 150, 30);
    QObject::connect(button, SIGNAL(clicked()), 
                     this, SLOT(buttonClicked()));
    createMenus();
  }
public slots:
  void buttonClicked() {
      counter++;
      label->setText(QString("Click #%1").arg(counter));
  }

• Die Auswahl des Menüeintrags "Reset" setzt den Zähler zurück.

Quelltext des Beispiels:
ActionMenu.cpp, MyWidget.h

class MyWidget : public QMainWindow {
    Q_OBJECT
public:
  MyWidget(QWidget *parent = NULL) : QMainWindow(parent) {
    ...
    createActions();
    createMenus();
    QObject::connect(button, SIGNAL(clicked()), 
                     this, SLOT(buttonClicked()));          
    QObject::connect(incrementAct, SIGNAL(triggered()), 
                     this, SLOT(buttonClicked()));
    QObject::connect(resetAct, SIGNAL(triggered()), 
                     this, SLOT(resetClicked()));
  }
  ...

 ...
private:
  void createActions() {
    incrementAct = new QAction("Increment", this);
    incrementAct->setShortcut(QKeySequence(Qt::ALT + Qt::Key_I));
    incrementAct->setToolTip(tr("Increment the counter"));
    resetAct = new QAction("Reset", this);
    resetAct->setShortcut(QKeySequence(Qt::ALT + Qt::Key_R));
    resetAct->setToolTip(tr("Reset the counter"));
  }
  void createMenus() {
    QMenuBar* bar = menuBar();
    QMenu* fileMenu = bar->addMenu(tr("Counter"));
    fileMenu->addAction(incrementAct);
    fileMenu->addAction(resetAct);
  }
  ...

class QWidget : public QObject, public QPaintDevice {
    ... 
protected: // Event handlers
  virtual void mousePressEvent(QMouseEvent *);
  virtual void mouseReleaseEvent(QMouseEvent *);
  virtual void mouseDoubleClickEvent(QMouseEvent *);
  virtual void mouseMoveEvent(QMouseEvent *);
  virtual void wheelEvent(QWheelEvent *);
  virtual void keyPressEvent(QKeyEvent *);
  virtual void keyReleaseEvent(QKeyEvent *);
  virtual void focusInEvent(QFocusEvent *);
  virtual void focusOutEvent(QFocusEvent *);
  ...
}

• Soll auf Maus- und Tastatur-Events reagiert werden, kann in einer von QWidget abgeleiteten Klasse die entsprechende virtuelle Memberfunktion überschrieben werden

• Beim Klick mit der Maus auf das QWidget wird die Position des Mauszeigers ausgegeben

Quelltext des Beispiels: MyMouseEvent.cpp

class MyWidget : public QWidget {
public:
  MyWidget(QWidget *parent = NULL) : QWidget(parent) {
    this->resize(320, 240);
    this->setWindowTitle("HelloGUI with Qt");
    label = new QLabel("Position 0, 0", this);
    label->setGeometry(120, 20, 150, 30);
  }
protected:
  void mousePressEvent(QMouseEvent *e)
  {
    int x = e->x(); int y = e->y();
    label->setText(QString("Position %1, %2").arg(x).arg(y));
  }
private:
  QLabel* label;
};

• In den bisherigen Beispielen wurde kein Layout-Manager verwendet
• Das ist kein Problem, solange die Fenstergröße nicht verändert wird

• Ein Layout-Manager automatisiert das Platzieren von Komponenten
• Das Layout wird automatisch angepasst, wenn sich die Fenstergröße verändert
• Dazu teilen die Komponenten ihre minimale, maximale, und gewünschte Größe mit

• Der QHBoxLayout-Manager erlaubt, Komponenten horizontal in einer Linie anzuordnen
• Die Memberfunktion addStretch() fügt ein QSpacerItem ein. Diese Komponente füllt den nicht benötigten Platz und ermöglicht so u.a. die anderen Komponenten an die linken oder rechten Rand anzuordnen

Quelltext des Beispiels: HorizontalLayout.cpp

class MyWidget : public QWidget {

public:
  MyWidget(QWidget *parent = NULL) : QWidget(parent) {
    this->setWindowTitle("HelloGUI with Qt");
     QPushButton* but1 = new QPushButton("Button 1");
     QPushButton* but2 = new QPushButton("Button 2");
     QPushButton* but3 = new QPushButton("Button 3");

     QHBoxLayout *layout = new QHBoxLayout;
     layout->addWidget(but1);
     layout->addWidget(but2);
     layout->addWidget(but3);
     //layout->addStretch(); // try this
     this->setLayout(layout);
  }
};

• Der QGridLayout-Manager ordnet die Komponenten auf einem regulären Gitter an
• Optional kann eine Komponente mehrere Spalten oder Zeilen überspannen

Quelltext des Beispiels: MyQGridLayout.cpp

class MyWidget : public QWidget {
public:
  MyWidget(QWidget *parent = NULL) : QWidget(parent) {
     QPushButton* but1 = new QPushButton("Button 1");
     QPushButton* but2 = new QPushButton("Button 2");
     QPushButton* but3 = new QPushButton("Button 3");
     QPushButton* but4 = new QPushButton("Button 4");
     QLineEdit* edit = new QLineEdit();
     QGridLayout* layout = new QGridLayout();
     layout->addWidget(but1, 0, 0);
     layout->addWidget(but2, 0, 1);
     layout->addWidget(but3, 1, 0);
     layout->addWidget(but4, 1, 1);
     layout->addWidget(edit, 2, 0, 1, 2);
     this->setLayout(layout);
  }
};

• Layouts können auch geschachtelt werden
• Dies geschieht entweder durch die Memberfunktion addLayout() oder durch Hinzufügen ein neues Fenster, das sein eigenes internes Layout besitzt

Quelltext des Beispiels: NestedLayouts.cpp

  QGroupBox *groupBox = new QGroupBox("Some more important buttons");
  QPushButton* impBut1 = new QPushButton("Important 1");
  QPushButton* impBut2 = new QPushButton("Important 2");
  QPushButton* impBut3 = new QPushButton("Important 3");
  QHBoxLayout *hlayout = new QHBoxLayout;
  hlayout->addWidget(impBut1);
  hlayout->addWidget(impBut2);
  hlayout->addWidget(impBut3);
  QGridLayout* layout = new QGridLayout();
  layout->addWidget(but1, 0, 0);
  layout->addWidget(but2, 0, 1);
  layout->addWidget(but3, 1, 0);
  layout->addWidget(but4, 1, 1);
  groupBox->setLayout(hlayout);
  layout->addWidget(groupBox, 2, 0, 1, 2);
  this->setLayout(layout);

• QGraphicsScene eignet sich besonders zum Zeichnen von 2-dimensionalen Objekten
• Dabei wird zunächst eine QGraphicsScene erzeugt und diese dann durch die Klasse QGraphicsView zur Anzeige gebracht

• Das Beispiel zeichnet eine Linie, ein Rechteck und einen Kreis

Quelltext des Beispiels: LineRectCircle.cpp

class MyWidget : public QMainWindow {
public:
  MyWidget(QWidget *parent = NULL) : QMainWindow(parent) {
    this->setWindowTitle("HelloGUI with Qt");
    this->resize(320, 240);
    QGraphicsScene* scene = new QGraphicsScene();
    scene->addLine(20.0, 50.0, 50.0, 200.0);
    scene->addRect(100.0, 50.0, 60.0, 80.0);
    scene->addEllipse(200.0, 100.0, 80.0, 80.0);
    QGraphicsView* view = new QGraphicsView(scene);
    setCentralWidget(view);
  }
};

• Das Beispiel zeichnet ein "T" mit Hilfe der QPolygonF Klasse

Quelltext des Beispiels: MyGeneralPath.cpp

    QGraphicsScene* scene = new QGraphicsScene();
    QPolygonF polygon;
    polygon <<
    QPointF( 50,  50)  << // start here
    QPointF( 50,  70)  << // going down
    QPointF(100,  70)  << // going right
    QPointF(100, 180)  << // going down
    QPointF(120, 180)  << // going right
    QPointF(120,  70)  << // going up
    QPointF(170,  70)  << // going right
    QPointF(170,  50)  << // going up
    QPointF( 50,  50);   // going left (back to start)
    scene->addPolygon(polygon);

Anregungen oder Verbesserungsvorschläge können auch gerne per E-mail an mich gesendet werden: Kontakt

Weitere Vorlesungsfolien

Folien auf Englisch (Slides in English)