====== 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. \\ \\ {{gnome.jpg|Ubuntu mit Gnome 2.26}} {{kde.jpg|Kubuntu mit KDE 4.2}} \\ {{xp.jpg|Windows XP}} {{vista.jpg|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.png|Button}} \\ {{slider und spinbox.png|Slider und Spinbox}} \\ {{textbox checkbox buttons.png|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. [[http://de.wikipedia.org/wiki/Wii-Fernbedienung|Wiimote]], [[http://de.wikipedia.org/wiki/EyeToy|EyeToy]]) oder Geräusche (Sprachsteuerung) reagieren. In Spielen werden oft Joysticks oder Gamepads verwendet. ===== Pie-Menüs ===== ==== Definition ====
{{piemenu_firefox.jpg|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: * [[gui:gtk:start|GTK+]]: Gnome, LXDE, GIMP, OpenOffice * gtkmm: Inkscape, GParted * [[frameworks:qt:start|Qt]]: KDE, GoogleEarth, VLC, Virtualbox * [[gui:wx:start|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.jpg|Qt-Designer}} ==== Beispielcodes ==== Einen Button mit Qt in C++ erstellen: // Qt-Header einbinden #include #include 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 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 #include #include #include 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 ===== Links ===== ==== X ==== * [[http://www.x.org/wiki/|X]] ==== Desktop-Umgebungen ==== * [[http://www.gnome.org/|Gnome]] * [[http://kde.org/|KDE]] * [[http://lxde.org/|LXDE]] ==== Pie-Menüs ==== * [[https://addons.mozilla.org/de/firefox/addon/5739|Firefox-Addon für Pie-Menüs]] ==== GUI-Bibliotheken ==== * [[http://www.gtk.org/|GTK+]] * [[http://www.gtkmm.org/|gtkmm]] * [[http://qt.nokia.com/|Qt]] * [[http://www.wxwidgets.org/|wxWidgets]] ==== weiterführende Links ==== * [[http://de.wikipedia.org/wiki/Kategorie:Grafische_Benutzeroberfl%C3%A4che|Wikipedia: Kategorie grafische Benutzeroberfläche]]