GUI

Definition

GUI ist die Abkürzung für „Graphical User Interface“ und bedeutet übersetzt „grafische Benutzeroberfläche“. Sie dient als Schnittstelle zwischen Benutzer und Programm und ist der Nachfolger des CLI (command line interface). CLIs sind jedoch noch mehr oder weniger in aktuellen Betriebssystemen enthalten (Textmodus bei Linux/Unix, cmd.exe unter Windows).
Dabei werden grafische Oberflächen aufgrund ihrer einfachen Bedienbarkeit der Kommandozeile meist vorgezogen. Für unerfahrene Benutzer entfällt das Suchen nach passenden Kommandozeilenbefehlen und außerdem sind Programme dadurch optisch ansprechender.

X

Das X-Window-System (kurz X) ermöglicht einer Desktop-Umgebung das Anzeigen von Fenstern und kümmert sich um Maus- und Tastatureingaben. X ist für alle aktuellen Betriebssysteme erhältlich, am häufigsten wird es jedoch auf Linux- und Unix-Computern verwendet. Es ist nicht Teil des Betriebssystems, weshalb sein Absturz keinen Einfluss darauf hat.
Aufgrund der Arbeitsweise wird das X-Window-System auch oft als X-Server bezeichnet. Er kommuniziert mit der für ihn bestimmten Hardware (Maus, Tastatur, Grafikkarte, etc.) über das Netzwerk. Der X-Server stellt dem Client (Anwendungsprogramm) Dienste zum Anzeigen von grafischen Oberflächen zur Verfügung. Dabei müssen sich Client und Server nicht am selben Rechner befinden.

Desktop-Umgebungen

Als Desktop-Umgebungen werden grafische Benutzeroberflächen zur Verwendung des Betriebssystems bezeichnet. Fälschlicherweise werden sie oft selbst „Betriebssystem“ genannt. Sie können sowohl fest in das Betriebssystem integriert (z.B. Windows) als auch frei wählbar sein (z.B. Linux mit Gnome, KDE, LXDE, usw.).
Ihr Aussehen ist größtenteils anpassbar. Unter Linux und Unix kann man außerdem mehrere Desktop-Umgebungen parallel installieren und während des Betriebs zwischen ihnen wechseln.

Ubuntu mit Gnome 2.26 Kubuntu mit KDE 4.2
Windows XP Windows Vista Aero

Steuerelemente (Widgets)

Die Funktionen des GUIs werden durch Steuerelemente (auch „Widgets“ genannt) aufgerufen. Durch Eingabegeräte können ihre Eigenschaften verändert werden. Widgets können beliebig miteinander zu komplexen Menüs kombiniert werden.

Button
Slider und Spinbox
Textbox, Checkboxen und Buttons

Beispiele für Widgets:

  • Fenster
  • Buttons
  • DropDown-Menüs
  • Symbolleisten
  • Checkboxen
  • Scrollbars
  • Fortschrittsbalken
  • Textboxen
  • Slider
  • Spinboxen
  • Radiobutton

Eingabe

Zur Kommunikation des Benutzers mit der Oberfläche werden Eingabegeräte benötigt. Am häufigsten werden dafür Maus und Tastatur verwendet. Durch einfache Mausklicks oder das Drücken von Tasten können Widgets im GUI ausgewählt oder verändert werden.
Es gibt aber auch andere Eingabegeräte, die z.B. auf Berührung (Touchscreen), Bewegung (z.B. Wiimote, EyeToy) oder Geräusche (Sprachsteuerung) reagieren. In Spielen werden oft Joysticks oder Gamepads verwendet.

Pie-Menüs

Definition

Firefox mit Pie-Menü-Plugin

Pie-Menüs sind Auswahloberflächen mit ringförmiger Anordnung der Auswahlmöglichkeiten. Diese werden dabei oft durch Icons dargestellt. Sie werden zurzeit hauptsächlich in Spielen verwendet (z.B. „Crysis“, „Die Sims“). Bei einigen Programmen wie dem Firefox werden zusätzliche Plugins benötigt um Pie-Menüs zu aktivieren.

Vorteile

  • erhöhte Übersicht
  • geringere Wahrscheinlichkeit eines Fehlklicks

Nachteile

  • wird von wenigen Programmen unterstützt (hauptsächlich Spiele)
  • größerer Aufwand beim Erstellen

GUI-Programmierung

Durch Verwendung externer Bibliotheken kann man auch für eigene Anwendungen Benutzeroberflächen bereitstellen. Diese basieren oft auf Callbacks (Funktionen, die aufgerufen werden, wenn ein Widget verwendet wird).

Beispiele zu bekannten systemunabhängigen GUI-Bibliotheken und Programmen von denen sie verwendet werden:

  • GTK+: Gnome, LXDE, GIMP, OpenOffice
  • gtkmm: Inkscape, GParted
  • Qt: KDE, GoogleEarth, VLC, Virtualbox
  • wxWidgets: Code::Blocks, Audadcity, Bittorrent

GUIs können aber auch mit Zeichen-Tools erstellt und in ein Programm eingebunden werden. Qt liefert dafür das Programm „Qt-Designer“ mit.

Qt-Designer

Beispielcodes

Einen Button mit Qt in C++ erstellen:

// Qt-Header einbinden
#include <QApplication>             
#include <QPushButton>
 
int main (int argc, char *argv[])
{
 
  // Kommandozeilenparameter werden an eine neu erstellte Qt-Anwendung weitergegeben
  QApplication app (argc, argv);    
  // neuer Button mit dem Text "proggen.org" wird erstellt
  QPushButton *button = new QPushButton ("proggen.org");  
 
  // wird auf den Button geklickt, beendet sich das Programm
  // "Callbacks" werden in Qt "slots" genannt
  QObject::connect (button, SIGNAL (clicked ()), &app, SLOT(quit ())); 
 
  // Button anzeigen
  button -> show ();
 
  // Anwendung laufen lassen und Rückgabewert abwarten
  return app.exec ();
 
}



Selbiges mit GTK+ in C:

// GTK+-Header einbinden
#include <gtk/gtk.h>
 
int main (int argc, char* argv[])
{
 
  // Pointer auf ein Fenster und einen Button deklarieren
  GtkWidget *window, *button;
  // Kommandozeilenparameter werden an die Initialisierung von GTK+ weitergegeben
  gtk_init (&argc, &argv);
 
  // neues Fenster wird erstellt
  window = gtk_window_new (GTK_WINDOW_TOPLEVEL);
  // neuer Button mit dem Text "proggen.org" wird erstellt
  button = gtk_button_new_with_label ("proggen.org");
 
  // Programm wird beendet, wenn das Fenster gelöscht wird
  g_signal_connect (G_OBJECT (window), "destroy", G_CALLBACK (gtk_main_quit), NULL);
 
  // wird auf den Button geklickt, wird das Fenster gelöscht
  g_signal_connect_swapped (G_OBJECT (button), "clicked", G_CALLBACK (gtk_widget_destroy), G_OBJECT (window));
 
  // der Button wird zu einem Container im Fenster hinzugefügt
  gtk_container_add (GTK_CONTAINER (window), button);
 
  // die beiden Widgets werden angezeigt
  gtk_widget_show (button);
  gtk_widget_show_all (window);
 
  // GTK+ wartet auf Events und reagiert mit den Callbacks
  gtk_main ();
 
  return 0;
 
}



Synchronisierter Slider und Spinbox mit Qt und C++:

// Qt-Header einbinden
#include <QApplication>
#include <QHBoxLayout>
#include <QSlider>
#include <QSpinBox>
 
int main(int argc, char *argv[])
{
 
  // Kommandozeilenparameter werden an eine neu erstellte Qt-Anwendung weitergegeben
  QApplication app (argc, argv);
  // ein Fenster wird erstellt
  QWidget *window = new QWidget;
  // ein Layout wird erstellt; in einem Layout können Widgets angeordnet werden
  QHBoxLayout *layout = new QHBoxLayout;
  // eine Spinbox wird erstellt
  QSpinBox *spinBox = new QSpinBox;
  // ein horizontaler Slider wird erstellt
  QSlider *slider = new QSlider (Qt::Horizontal);
 
  // Text in der Titelleiste des Fensters festlegen
  window -> setWindowTitle ("Slider + Spinbox");
 
  // Minimalwert und Maximalwert der beiden Widgets festlegen
  spinBox -> setRange (0, 100);
  slider -> setRange (0, 100);
 
  // die beiden Widgets haben immer den gleichen Wert
  // wird der Wert des einen verändert, wird das andere (wenn nötig) angepasst
  QObject::connect (spinBox, SIGNAL (valueChanged (int)), slider, SLOT (setValue (int)));
  QObject::connect (slider, SIGNAL (valueChanged (int)), spinBox, SLOT (setValue (int)));
 
  // Anfangswert wird auf 50 gesetzt
  spinBox -> setValue (50);
 
  // Widgets werden dem Layout hinzugefügt
  layout -> addWidget (spinBox);
  layout -> addWidget (slider);
 
  // das Fenster verwendet nun das Layout
  window -> setLayout (layout);
 
  // das Fenster wird angezeigt
  window -> show ();
 
  // Anwendung laufen lassen und Rückgabewert abwarten
  return app.exec ();
 
}

Hinweise zur Gestaltung eines GUIs

Bei der Gestaltung von GUIs sollte man auf Folgendes achten:

  • häufig verwendete Funktionen (öffnen, speichern, kopieren, etc.) sollten möglichst schnell erreichbar sein (eventuell Symbolleiste oder Kontextmenü)
  • Shortcuts für schnelles Arbeiten anbieten
  • logische Verschachtelung bei komplexen Menüs
  • dem Benutzer Hilfe anbieten („Hilfe“ in der Menüleiste)
  • auf unerfahrene Benutzer Rücksicht nehmen und nicht mit komplizierten Menüs überfordern
  • tolerant gegenüber Fehlern des Benutzers sein
  • Programme nicht mit Widgets überfüllen

X

Desktop-Umgebungen

Pie-Menüs

GUI-Bibliotheken