7. GUI-Design mit Qt

Programmieren in C++

Hubert Feyrer <hubert@feyrer.de>

Inhalt

• Einführung
• Erstes Beispiel: Button
  • GUI erstellen
  • Rahmenprogramm
  • Compilieren
• Verbinden von Slots und Signals
  • manuell
  • vereinfacht
  • grafisch
• Beispiele
• Übungen

Screenshot

Manuelle GUI-Programmierung

• Für "einfache" und "komplexe" GUIs
• Vorteil: volle Kontrolle für "komplexe" GUIs
• Nachteil: Aufwand für "einfach" GUIs
• Wunsch: Vereinfachung bei "einfachen" GUIs
• Lösung: GUI Builder

Qt mit Designer

• GUI-Builder für Qt: Designer
• Teil von Qt
• Homepage: Qt Designer Manual

Ein erstes Beispiel

• Ziel:
• Vorgehen:
  • Neues Widget anlegen
  • Button anlegen
  • GUI speichern
  • Rahmenprogramm erstellen
  • Compilieren

Ein erstes Beispiel

Ein erstes Beispiel

Ein erstes Beispiel

Ein erstes Beispiel

• Hauptprogramm: src/designer1/main.cc
• Widget-Schnittstelle: src/designer1/designer1.h
• Widget-Implementierung: src/designer1/designer1.cc

Ein erstes Beispiel

• Compilieren:

  % ls
  designer1.cc  designer1.h  designer1.ui  main.cc
  % qmake -project
  % qmake
  % make
  % ./designer1 

  
• Quellcode: src/designer1/*

Verbinden von Slots und Signals

Es existieren drei Möglichkeiten:

• manuell - connect()
• vereinfacht - on_<Element>_<Signal>()
• mit Designer

Verbinden: manuell

• Beispiel: Button

  

• Manuell:

  connect(quitButton, SIGNAL(clicked()),
          &app,       SLOT(quit())); 

Verbinden: manuell

• Beispiel: Slider und SpinBox

  

• Manuelle Verbindung:

  connect(horizontalSlider,
          SIGNAL(valueChanged(int)),
          spinBox,
          SLOT(setValue(int))); 

Verbinden: vereinfacht

• In der Klassendefinition wird ein Slot hinterlegt
• Eine Verbindung zu einem bestimmten Signal eines bestimmten GUI-Elements wird automatisch erstellt
• Verbindung wird vom moc(1) automatisch erstellt
• Slot: on_<Element>_<Signal>()
• Beispiele: on_pushButton_clicked(), on_spinBox_valueChanged(int)

Verbinden: vereinfacht

• Beispiel: Button
• Zur Klassendefinition (designer1.h) hinzufügen:

  class designer1 : public Qwidget
  {
    ... 
  
    public slots:
      void on_pushButton_clicked(); 

• Zur Klasse (designer1.cc) hinzufügen:

  void designer1::on_pushButton_clicked()
  {
          exit(1);
  } 

Verbinden: vereinfacht

• Beispiel: Slider und SpinBox
• Zur Klassendefinition (designer2.h) hinzufügen:

  class designer1 : public Qwidget
  {
    ... 
  
    public slots:
      void on_spinBox_valueChanged(int); 

• Zur Klasse (designer2.cc) hinzufügen:

  void designer2::on_spinBox_valueChanged(int i)
  {
          cout << "spin" << endl;
          ui.horizontalSlider->setValue(i);    
  } 

Verbinden: grafisch

• Verbinden mit Designer
• Anwählen: "Connect Signals and Slots"-Button:
  (bzw. F4-Taste)
• Verbinden durch Drag & Drop:
  

Verbinden: grafisch

• Bestimmen von Signals und Slots:

Verbinden: grafisch

• Anzeige und Signals / Slots Editor:
• Quellcode: src/designer2/*

Beispiele

• src/hfForm-designer

Übungen

• Bestimmen Sie die Dokumentation der Klassen QObject, QString und QPushButton. Wo in der Klassenhierarchie stehen die Klassen, welche Basis- und Unterklassen existieren, welche Methoden und Attribute haben die Klassen, welche Signals und Slots existieren?
• Vergleichen Sie die Klasse QStack mit der in Kapitel 4 erstellten Stack-Klasse und der stack-Klasse der STL. Welche Gemeinsamkeiten und Unterschiede bestehen?
• Taschenrechner mit Grundrechenarten Programmieren
• Taschenrechner um Tasten Speichern/Recall erweitern
• Taschenrechner programmieren, der alternativ die Umgekehrt Polnische Notation anbietet.