Video anzeigen

GUI-Elemente – Grundlagen

In diesem Beitrag erklären wir dir die ersten Grundlagen dazu, wie man Programme auf dem Bildschirm visualisieren kann und welche Elemente man für die grafische Oberfläche verwendet.

Inhaltsübersicht

Dialoge zur Platzierung von Elementen

Um überhaupt Elemente platzieren zu können, brauchst du zunächst ein Fenster, fachsprachlich auch Dialog genannt. Es gibt aber nicht nur EINE Art von Fenster. Deshalb musst du dich erst einmal entscheiden, was dein Fenster für Eigenschaften haben soll.

GUI, GUI-Elemente
direkt ins Video springen
Zur Platzierung von Elementen benötigt man Dialoge

Primärdialog und Sekundärdialog

Zunächst einmal gibt es den simplen Primärdialog, der der direkten Aufgabenerfüllung dient. Du kannst ihn dir ähnlich vorstellen wie den Editor.

Als nächstes gibt es den Sekundärdialog, der dich situationsabhängig mit Zusatzinformationen versorgt. Er wird immer aus einem Primärdialog heraus gestartet und du kannst ihn dir ähnlich vorstellen wie den „Speichern Unter Dialog“ deines Schreibprogramms. Nach seiner Beendigung wird der Primärdialog fortgesetzt.

GUI, GUI-Elemente
direkt ins Video springen
Primärdialog und Sekundärdialog

Nicht-modale und modale Dialoge

Außerdem unterscheiden wir zwischen nicht-modalen und modalen Dialogen. Modale Dialoge müssen beendet werden, damit ein anderes Fenster aktiviert werden kann, nicht-modale können unterbrochen werden. Damit wäre ein Beispiel für den modalen Dialog das bereits erwähnte „Speichern Unter“, ein Beispiel für einen nicht-modalen Dialog die Suchfunktion deines Dateibrowsers.

GUI, GUI-Elemente
direkt ins Video springen
Nicht-modale und modale Dialoge

RGB-Prinzip und Schrift

Die Farben erzeugen wir nach dem RGB-Prinzip. Das heißt, wir erzeugen die Farbe mittels Konstruktor und geben drei Werte zwischen 0 und 255 an, wobei der erste für rot, der zweite für grün und der dritte für blau steht.

GUI, GUI-Elemente
direkt ins Video springen
Das RGB-Prinzip

Willst du nur Graustufen erzeugen, so setzt du einfach alle drei Parameter auf denselben Wert.

Aber wir wollen ja nicht nur ein leeres Fenster erzeugen, sondern es auch mit etwas füllen. Deshalb fügen wir jetzt eine Schrift hinzu.

Diese erzeugst du wie die Farbe mit einem Konstruktor. Als ersten Parameter gibst du den Namen der gewünschten Schrift ein, wobei wichtig ist, dass diese auch installiert ist. Der zweite Parameter ist der sogenannte Font Style. Dieser kann entweder Fett, kursiv oder normal sein.

Als dritten und letzten Parameter gibst du die Schriftgröße an.

GUI, GUI-Elemente
direkt ins Video springen
Erzeugung einer Schrift

Erzeugung von grafischen Komponenten

Um das Fenster jetzt auch irgendeinen Zweck erfüllen zu lassen, braucht es noch grafische Komponenten. Denn mit diesen kann der Benutzer, sobald eine Ereignisbehandlung implementiert ist, per Maus oder Tastatur interagieren.

Dabei sind grafische Komponenten, so wie alle anderen Objekte, abstrakt. Sie werden jedoch durch reale Abbilder, die sogenannten „peers“ grafisch dargestellt. Bei der Software-Entwicklung für eine konkrete Plattform werden diese meist vom Betriebssystem erzeugt. Bei Java gibt es allerdings auch die Möglichkeit, sie vom Runtime Environment erzeugen zu lassen.

GUI, GUI-Elemente
direkt ins Video springen
Erzeugung grafischer Komponenten

Wenn wir die Elemente durch das Betriebssystem erzeugen lassen, können wir das Abstract Windowing Toolkit, kurz AWT, nutzen. Denn dieses setzt zur Implementierung der peers die nativen Methoden des Betriebssystems ein. Das führt allerdings dazu, dass die Darstellung der fertigen Software auf verschiedenen Plattformen sehr unterschiedlich ausfallen kann. Da meist ein einheitliches Erscheinungsbild der Software gewünscht ist, damit diese Wiederkennungswert besitzt, greift man bei plattformübergreifender Entwicklung meist auf SWING zurück.

GUI, GUI-Elemente
direkt ins Video springen
Das AWT Toolkit erzeugt die Elemente durch das Betriebssystem

Komponenten, die mit AWT erzeugt wurden, gehören zu den heavyweight components, da sie vom Betriebssystem erzeugt werden, im Gegensatz zu Komponenten, die mit SWING erzeugt wurden. Diese nennt man lightweight components, da sie Plattformunabhängig von SWING selbst gezeichnet werden.

Nun weißt du, welche grundlegenden Komponenten dir zur Verfügung stehen, um ein GUI zu erzeugen. In den nächsten Beiträgen gehen wir noch tiefer in die Materie.

Hallo, leider nutzt du einen AdBlocker.

Auf Studyflix bieten wir dir kostenlos hochwertige Bildung an. Dies können wir nur durch die Unterstützung unserer Werbepartner tun.

Schalte bitte deinen Adblocker für Studyflix aus oder füge uns zu deinen Ausnahmen hinzu. Das tut dir nicht weh und hilft uns weiter.

Danke!
Dein Studyflix-Team

Wenn du nicht weißt, wie du deinen Adblocker deaktivierst oder Studyflix zu den Ausnahmen hinzufügst, findest du hier eine kurze Anleitung. Bitte .