vorlesung informatik 1 -...

$: Vorlesung Informatik 1 - hs-esslingen.derau/vorlesungen/Informatik1/folien/informatik1-theorie-gui.pdf · © Andreas Rau, 23.04.10 D:\home\ar\fhte\vorlesungen\informatik1\folien\informatik1-theorie-gui.odp$
© Andreas Rau, 23.04.10 D:\home\ar\fhte\vorlesungen\informatik1\folien\informatik1-theorie-gui.odp #1

Vorlesung Informatik 1Fachhochschule für Technik Esslingen

Studiengang Wirtschaftsinformatik

Teil 5: GUI Programmierung Dr. rer. nat. Andreas Rau

http://www.hs-esslingen.de/[email protected]

http://www.hs-esslingen.de/~rau

mailto:[email protected]


Dieser Teil der Vorlesung behandelt die die Pakete und Klassen zur Oberflächenprogrammierung.

Kein Mensch kann sich alle Details merken. Daher ist es beim Umgang mit den hier beschriebenen Klassen immer wieder wichtig und richtig, auf die Klassenreferenz zurückzugreifen um dort die Methoden der jeweiligen Interfaces und Klassen nachzuschlagen (Wink mit dem Zaunpfahl!).

Inhalt


In der IT-Steinzeit waren viele Programme überhaupt nicht interaktiv sondern wurden über Parameter auf der Kommandozeile gesteuert und arbeiteten mit Dateien statt mit dem Benutzer. Interaktive Applikationen hatten eine textorientierte Oberfläche (dies ist bei vielen Host-Anwendungen noch heute so).

Mittlerweile sind graphische Benutzeroberflächen zum Standard geworden und ermöglichen auch "Normalsterblichen" den einfachen Umgang mit Computern. Doch was an der Oberfläche so einfach aussieht, erfordert im Hintergrund einiges an Arbeit. Je benutzerfreundlicher eine Oberfläche ist, desto mehr Aufwand war vermutlich für Ihren Entwurf(!) und ihre Realisierung notwendig. Darüberhinaus sind graphische Oberflächen überaus schwer zu testen, u.a. weil eine Automatisierung dieser Tests so schwierig ist.

Um diesen Aufwand in Grenzen zu halten gibt es in nahezu jeder Programmiersprache Bibliotheken, welche die wichtigsten Mechanismen und Bausteine zur Realisierung von graphischen Oberflächen zur Verfügung stellen. Was bleibt ist der Aufwand für den Entwurf und der (Lern)aufwand um sich in den umfangreichen Bibliotheken zurechtzufinden.

Graphische Oberflächen - Hintergrund


Eines der elementaren Prinzipien bei der Programmierung graphischer Oberflächen ist die Trennung zwischen Daten und Applikationslogik auf der einen und Oberfläche und Oberflächenlogik auf der anderen Seite. Diese Aufgabentrennung dient dazu, die Verständlichkeit zu erhöhen und die Wiederverwendung der Applikationslogik zu ermöglichen. So ist es u.a. möglich die Oberfläche auszutauschen ohne die eigentliche Applikation zu verändern.

Klassisch wird diese Trennung durch eine 3-Teilung in die Elemente Model (Daten und Logik), View (Anzeige) und Controller (Benutzerinteraktion) realisert. Man spricht daher auch vom MVC-Prinzip. In Java wird dieses Prinzip vereinfacht, indem View und Controller in einer Komponente, dem sogenannten ViewController, zusammengefasst werden. Dieser wird in Java auch als Delegate bezeichnet (vgl. Buch).

Um dem Java-Ziel "write once, run anywhere" gerecht zu werden und in jeder Umgebung die richtige Darstellung (Look and Feel) anbieten zu können und nicht negativ aufzufallen, liegen die Delegates in verschiedenen Ausprägungen vor. Damit ist es z.B. möglich (wenngleich nicht sinnvoll) eine Java-Applikation unter Windows wie ein Linux-Programm aussehen zu lassen.

Graphische Oberflächen - Model/View/Controller


Die Ablaufsteuerung eines Programms mit graphischer Oberfläche unterscheidet sich maßgeblich von der eines Programms mit textbasierter Oberfläche. Während es im textbasierten Programm eine eigene Ablaufsteuerung (meist in Form einer Schleife) gibt, die Benutzereingaben wartet und diese verarbeitet, wartet ein Programm mit graphischer Oberfläche nicht selbst sondern wird vom Betriebssystem mit Tastatur- und Mausereignissen (Events) versorgt. Mit anderen Worten: Das textbasierte Programm hat ständig das Ohr an der Leitung während das graphische Programm wartet, bis das Telefon klingelt.

Eine Konsequenz davon ist, dass die main-Methode() eines Programms mit graphischer Oberfläche in der Regel mit dem Öffnen des Hauptfensters endet. Das Programm läuft jedoch trotzdem weiter wird automatisch informiert, wenn der Benutzer über Maus oder Tastatur mit dem Programmfenster interagiert.

Außerdem "reserviert sich" ein textbasiertes Programm üblicherweise die Tastatur. Ein Programm mit graphischer Oberfläche dagegen "teilt sich" Tastatur und Maus mit allen anderen laufenden Applikationen. Die Zuteilung der Events erfolgt dabei an das jeweils aktive Fenster (man sagt, dieses "hat den Fokus").

Graphische Oberflächen – Funktion: Events


Graphische Oberflächen werden quasi nach dem LEGO-Prinzip aus einer Vielzahl von Bausteinen hierarisch aufgebaut (Komposition). Dabei ergibt sich eine Baumstruktur an deren Spitze das Hauptfenster steht.

Bei der Darstellung eines Fensters muss der verfügbare Platz (manchmal auch als Canvas(=Leinwand) bezeichnet) zwischen den verschiedenen Bausteinen aufgeteilt werden. Die genaue Größe und Anordnung der Elemente, also das Layout, wird in Java typischerweise durch spezielle Objekte festgelegt.

Wenn der Benutzer über Maus oder Tastatur mit einem Fenster interagiert wird dies in Form von Ereignissen (Events) registriert. Diese werden einem der Elemente in dieser Zerlegungshierarchie zugeteilt und von diesem verarbeitet.

Das Fenster delegiert also die Verarbeitung der Events an den betroffenen Baustein. Die Auswahl des Bausteins erfolgt dabei entweder über dessen Position (z.B. bei Mausklicks) oder durch Anwendung des Fokus-Konzepts innerhalb des Fensters (z.B. aktives Eingabefeld für Tastatureingaben).

Graphische Oberflächen – Prinzipien: Komposition & Events


Textbasierte Programme die auf der Konsole bzw. Kommandozeile laufen, z.B. unter DOS, unterscheiden sich in vielerlei Hinsicht von solchen mit grafischer Oberfläche und Fenstern, z.B. unter (X-)Windows.

Textbasierte Programme● Besitzen die Konsole, d.h. Tastatur und Bildschirm, exklusiv*● Haben einen Einstiegspunkt von dem alle Funktionen erreichbar sind (main)● Programm = Baum von Funktionen, die sich gegenseitig aufrufen● Sind (streng) kontrollflußorientiert

Programme mit grafischer Oberfläche● Teilen sich die Konsole mit anderen Programmen / Fenstern● Haben mehrere Einstiegspunkte für verschiedene Teilfunktionen (listener)● Fenster = Baum von Elementen, die auf Ereignisse reagieren● Sind ereignisgesteuert

Hinweis: Bei Webapplikationen wird alles noch komplizierter!

*gilt nicht für virtuelle Konsolen (DOS Fenster unter Windows)

Exkurs: Vergleich von Benutzeroberflächen


Die Bausteine graphischer Oberflächen lassen sich grob in 3 Gruppen einteilen:

Container (z.B. JFrame, JDialog, JPanel, JScrollPane, JTabbedPane):Container sind die Knoten im Baum. Sie dienen wie der Name schon andeutet zur "Aufbewahrung" anderer Elemente. Mit Ihrer Hilfe ist es möglich, die hierarchische Struktur der Oberfläche zu gliedern indem man Elemente zu Gruppen zusammenfasst und diesen verschiedene Fensterbereiche zuordnet.

Controls / Components (z.B. JTextField, JButton, JRadioButton, ...):Controls sind die Blätter im Baum. Sie dienen zur Interaktion mit dem Benutzer und machen die eigentliche Funktion der Oberfläche aus. Neben elementaren Controls wie Eingabefeldern, Checkboxes, Radiobuttons oder Pushbuttons gibt es auch komplexere Controls wie Listen, Tabellen oder Bäume. Diese sind oftmals aus einfachen Controls zusammengebaut.

Decorations (z.B. JLabel*, Border, Insets): Decorations sind ebenfalls Blätter im Baum. Sie sind rein dekorative Elemente wie Texte, Grafiken oder Rahmen ohne Interaktionsmöglichkeit.*technisch eigentlich ein Control aber ohne Interaktionsmöglichkeit

Graphische Oberflächen – Elemente: Container & Controls


Graphische Oberflächen – Aufbau (Beispiel)

Top LevelContainer

Container

Fenstersystem(Betriebssystem)

ControlControl Control

Events

Events

Events EventsEvents

Java


Graphische Oberflächen – Struktur

Control

Container

Komposition

Ein Container kann Controls enthalten (also auch weitere Container, da Container auch Controls sind).

Container

Control

Vererbung und sonstige Beziehungen

Decoration

Controls können dekoriert werden. Ein Container ist auch ein Control (also können auch Container dekoriert werden). Außerdem hat er ein Layout.

Layout


Graphische Oberflächen – Koordinatensystem

BildschirmX

YFenster height

widthx

y

x + y = locationwidth + height = dimension bzw. sizelocation + dimension = bounds


In Java gibt es zwei Bibliotheken für graphische Oberflächen: AWT und Swing. AWT, das Abstract Windowing Toolkit, ist die ältere der beiden Bibliotheken und wird heute nicht mehr direkt verwendet. Es dient aber weiterhin als Basis für Swing, die neue Bibliothek. Die entsprechenden Pakete sind java.awt für AWT und javax.swing für Swing.

Ein Betriebssystem mit graphischer Benutzeroberfläche wie stellt eine Implementierung der grundlegenden Bausteine (native Controls) für seine Applikationen zur Verfügung. Bei AWT greift jedes Oberflächenelement zur Darstellung auf einen solchen grundlegenden Baustein zurück. Dadurch entsteht eine starke Abhängigkeit von spezifischen Optik der jeweiligen Plattform. Darüberhinaus stellt nicht jede Plattform alle Elemente zur Verfügung.

Im Unterschied dazu sind die Oberflächenelemente bei Swing vollständig in Java realisiert. Dadurch werden die oben genannten Abhängigkeiten und Einschränkungen auf Kosten einenes höheren Implementierungsaufwands (der Bibliothek, nicht unserer Programme!) vermieden.

Graphische Oberflächen – Bibliotheken


Das oberste Element der Oberflächenhierarchie ist das Fenster. Dieses wird in Swing durch die Klasse JFrame realisert. Ein Objekt der Klasse JFrame implementiert ein Fenster mit einstellbarer Titelzeile, Größe und Position. Zum öffnen des Fensters wird setVisible(true) aufgerufen. Der Aufruf der Methode setDefaultCloseOperation() dient dazu sicherzustellen, daß das Programm beim Schließen des Fensters beendet wird.

import javax.swing.JFrame;

public class MyFrame extends JFrame {

public MyFrame() { // Fenster mit div. DefaultCloseOps versuchen! super( "Fenstertitel"); // Fenstertitel an JFrame(String) übergeben setDefaultCloseOperation( EXIT_ON_CLOSE); // Fenster schließen = Ende setLocation( 10, 10); // Position nahe linke obere Bildschirmecke setSize( 200, 100); // 200 breit, 100 hoch }

public static void main( String[] args) { new MyFrame().setVisible(true); // main() endet, Programm läuft weiter }}

Graphische Oberflächen – JFrame


Als eines der einfachsten Oberflächenelemente dienen die Objekte der Klasse JLabel zur Anzeige von Beschriftungen in einem Fenster. Dabei kann neben dem Text auch die Vorder- und Hintergrundfarbe festgelegt werden. Allerdings sind Labels standardmäßig durchsichtig.

import javax.swing.JFrame;import javax.swing.JLabel;

public class MyLabelFrame extends JFrame {

public MyLabelFrame() { super( "Fenstertitel"); // Fenstertitel an JFrame(String) übergeben setDefaultCloseOperation( EXIT_ON_CLOSE); // Fenster schließen = Ende

add( new JLabel( "Beschriftung")); // anonymes Label

setLocation( 10, 10); // Position nahe linke obere Bildschirmecke setSize( 200, 100); // 200 breit, 100 hoch }

// main-Methode wie gehabt}

Graphische Oberflächen – JLabel


Die Klasse JTextField implementiert ein einfaches Eingabefeld zur Eingabe von Strings. Die Größe des Felds kann bei der Erzeugung im Konstruktor angegeben werden. Der Inhalt kann über die Methoden getText() und setText() gelesen bzw. gesetzt werden.

import javax.swing.JFrame;import javax.swing.JTextField;

public class MyTextFrame extends JFrame { JTextField sampleField = new JTextField(10); // ca. 10 Zeichen breit

public MyTextFrame() { super( "Fenstertitel"); // Fenstertitel an JFrame(String) übergeben setDefaultCloseOperation( EXIT_ON_CLOSE); // Fenster schließen = Ende

add( sampleField); // zum Fenster hinzufügen

setSize( 200, 100); // 200 breit, 100 hoch setLocationRelativeTo( null); // Am Bildschirm zentrieren(!) }

// main-Methode wie gehabt}

Graphische Oberflächen – JTextField


Die Klasse JButton implementiert einen einfachen Button. Die zugehörige Aktion wird über einen sog. Listener implementiert. Dies ist ein Objekt mit einer festgelegten Methode die aufgerufen wird, wenn der Button gedrückt wird. Die Signatur dieser Methode ist im Interface ActionListener festgelegt.

import javax.swing.JFrame;import javax.swing.JButton;import java.awt.event.ActionEvent;import java.awt.event.ActionListener;

public class MyButtonFrame extends JFrame implements ActionListener { public MyButtonFrame() { super( "Fenstertitel"); // Fenstertitel an JFrame(String) übergeben setDefaultCloseOperation( EXIT_ON_CLOSE); // Fenster schließen = Ende

JButton button = new JButton( "Klick mich!"); // Button als lokale Variable(!) erzeugen button.addActionListener( this); // Listener definieren getContentPane().add( button); // zum Fenster hinzufügen

setBounds( 10, 10, 200, 100); // Position und Größe in einem Aufruf setzen }

public void actionPerformed( ActionEvent e) { System.out.println( "Danke!"); } // main-Methode wie gehabt}

Graphische Oberflächen – JButton


Das Listener-Prinzip ist ein mächtiges Konzept zur Verarbeitung von Ereignissen und wird an vielen verschiedenen Stellen der Swing-Bibliothek verwendet. So kann auf diese Art und Weise auch auf Mausklicks, Mausbewegungen oder Veränderungen innerhalb eines Controls reagiert werden.

Für jede Art von Listener gibt es (1) ein Interface (z.B. ActionListener) welches die zugehörigen Methoden definiert und (2) ein oder mehrere Event-Klassen (z.B. ActionEvent) deren Instanzen an die verschiedenen Methoden übergeben werden und das Ereignis näher beschreiben, z.B. den Button der gedrückt wurde oder die Position eines Mausklicks.

Der Listener kann dabei nicht nur das Fenster selbst sondern ein beliebiges Objekt sein welches das entsprechende Listener-Interface implementieren. Zu deren einfacher Realisierung wurde Java speziell erweitert (vgl. Informatik 2).

Um bei umfangreichen Interfaces nicht alle Methoden implementieren zu müssen stehen in vielen Fällen sogenannte Adapter-Klassen zur Verfügung die Default-Implementierungen der Methoden zur Verfügung stellen und von denen der eigene Listener abgeleitet werden kann.

Graphische Oberflächen – Listener


Listener-artige Mechanismen sind auch außerhalb von grafischen Oberflächen nützlich. Verallgemeinert heißt das Observer-Pattern und wird in der Klassenbibliothek speziell unterstützt durch

a) Die Klasse ObservableDient als Basisklasse für Dienstanbieter und bringt Mechanismen zur Registrierung und Benachrichtung von Dienstnutzern mit.

b) Das Interface ObserverGibt eine standardisierte Methode zur Benachrichtigung von Dienstnutzern vor.

Beispiel:public class Anbieter extends Observable { // ...}public class Nutzer implements Observer { // ...}

Verallgemeinerung: Das Observer-Pattern

ActionBox


Listener sind ein Beispiel für ein verbreitetes Programmierprinzip in Java:

● Die Definition von Schnittstellen für Operationen und● Die Realisierung von Operationen durch Klassen die diese implementieren

Dieses Prinzip ist so einfach wie genial. Eigentlich ist ein Operation = eine Funktion ( = eine Methode). Da Methoden in Java eine "Heimat" brauchen, ergibt sich der Rest wie von selbst: Die Klasse enthält die Operation und die Schnittstelle sorgt dafür, dass man abstrahieren und mehrere Varianten einer Funktion anbieten kann.

Damit kann man sich wie bei graphischen Oberflächen "zurückrufen lassen" (Callback) wenn etwas wichtiges passiert oder Algorithmen (z.B. einen Sortiervorgang) beeinflußen, indem man die entscheidende Operation (hier den Vergleich) als Parameter übergibt. So gibt es in Java Listener für verschiedene Events, Komparatoren für Sortieralgorithmen, Runnables für Threads, ...

In anderen Programmiersprachen werden derartige Aufgaben oftmals über Funktionszeiger realisiert. Dies ist aber viel tückischer und weniger verständlich.

Seitenblick: Operationen als Objekte(1)


Anwendungsbeispiel

// Datei Function.javapublic interface Function { public double compute( double x); // compute value for y}// Datei LinearFunction.javapublic class LinearFunction implements Function { double m, b; public LinearFunction( double m, double b) { this.m = m; this.b = b; } public double compute( double x) { return m*x + b; }}


ActionBox


Eselsbrücke: AktionsObjekte als Black BoxAus Sicht des Empfängers ist ein AktionsObjekt nichts anderes als ein Apparat mit bekannter Bedienoberfläche(=Interface): Einfache AktionsObjekte wie unser ActionListener haben "nur einen Knopf", andere wie z.B. ein MouseListener, haben mehrere Knöpfe.

Die Funktion der Box (=Implementierung) hingegen ist dem Empfänger unbekannt bzw. egal, da sie letztlich dem Absender nutzen soll. Man könnte also auch sagen, ein AktionsObjekt ist ein Pieper, mit dem der Empfänger den Absender über bestimmte Ereignisse informieren und dadurch die entsprechende (Re)aktion auslösen kann.


ActionBox


Graphische Oberflächen – Einfügen x DreiEs gibt 3 Möglichkeiten zum Einfügen von Komponenten in ein Fenster:

add( label); // entspricht this.add( label);

Wir fügen das Label (scheinbar) zum Fenster hinzu, dieses leitet den Aufruf jedoch an die ContentPane weiter. JFrame.add() dient also nur dem Komfort.

getContentPane().add( label);

Wir greifen explizit auf die ContentPane zu und fügen das Label hinzu. Das ist aber etwas lästig, wenn man mehrere Komponenten hinzufügen möchte.

Container contentPane = getContentPane();contentPane.add( label1);contentPane.add( label2);

Über die Variable contentPane können mehrere Komponenten hinzugefügt oder die Eigenschaften der ContentPane, z.B. Layout oder Farbe, verändert werden.


Graphische Oberflächen – KonstruktionsprinzipienZum Aufbau einer grafischen Oberfläche wird folgendes Vorgehen empfohlen:

Aufbau der Oberfläche von „klein nach groß“ bzw. von „innen nach außen“, d.h. es werden zuerst Komponenten erzeugt, dann ggf. (mit Layout) in Containern gruppiert und schließlich (mit Layout) ins Fenster eingefügt. Die Reihenfolge der Aktionen ist also stets: konstruieren – konfigurieren - hinzufügen.

Das Gruppieren in Containern funktioniert ähnlich wie bei der ContentPane mit Hilfe eines Objekts der Klasse JPanel (oder einer Spezialvariante davon):

Beispiel:setLayout( new BorderLayout()); // Fenster vorkonfigurierenJPanel buttonPanel = new JPanel(); // konstruierenbuttonPanel.setLayout( new FlowLayout()); // konfigurierenJButton button = new JButton( „Klick mich!“); // konstruierenbutton.addActionListener( ...); // konfigurierenpanel.add( button); // Button zum Panel hinzufügen// … weitere Buttonsadd( panel, BorderLayout.CENTER); // Panel zum Fenster hinzufügen// … weitere Panels oder Komponenten// Fenster nachkonfigurierenpack(); // oder setLocation() und setSize()


Programme mit graphischer Oberfläche stützen sich massiv auf Bibliotheken. Während jedoch bei der Benutzung von Bibliotheken für andere Aufgaben wie das Programm je nach Bedarf verschiedene Bibliotheksfunktionen aufruft und dann fortgesetzt wird, ist es beim Thema graphische Oberfläche genau umgekehrt: Die Bibliothek ruft je nach Ereignis verschiedene Programmteile auf.

Als Folge davon sind Programme mit graphischer Oberfläche zunächst schwer zu verstehen da man nicht sieht, wann welche Methode aufgerufen wird. Um sein eigenes Program zu verstehen (bzw. schreiben zu können), muss man also erst einmal verstehen, wie die Bibliothek funktioniert – und zwar als Ganzes, nicht nur methodenweise. Glücklicherweise stellt man bei der Analyse jedoch fest, das vieles auf wenigen Grundprinzipien, v.a. Listenern, basiert!

Graphische Oberflächen – Verständlichkeit

BibliothekProgramm

BibliothekProgramm

setVisible()

println()

actionPerformed()

main()

main()

(warten)

AUFR

UF

RÜ

CK

RU

F

...()

ENDE


Bei der Gestaltung von Oberflächen spielt die sorgfältige Anordnung der verschiedenen Elemente eine entscheidende Rolle. Um den Aufwand hierfür (sprich: die manuelle Festlegung von Position und Größe jedes einzelnen Elements) in Grenzen zu halten und auch bei Veränderung der Fenstergröße ein "vernünftiges" Aussehen zu erreichen (z.B. indem manche Element vergrößert werden und andere nicht) gibt es in Java bzw. Swing sog. Layout-Manager die die Elemente eines Fensters automatisch nach bestimmten Regeln anordnen.

Die gängigsten LayoutManager sind● BorderLayout (Default), Aufteilung des Fensters in Zonen für weitere Elemente● FlowLayout, automatische Anordnung mit Umbruch von links nach rechts● BoxLayout, horizontale oder vertikale Anordnung ohne Umbruch● GridLayout, Tabellenförmige Anordnung in gleichgroßen Zellen● GridBagLayout, Tabellenförmige Anordnung mit variablen Zellen

Komplexere Layouts lassen sich ggf. durch Verschachtelung einfacher Layouts bauen. Trotzdem ist es weiterhin möglich, alles manuell (und starr) festzulegen (sog. NullLayout). Das macht aber eigentlich nur bei fester Fenstergröße Sinn.

Graphische Oberflächen – Layout Manager


public class NullLayoutGUI extends JFrame {

public NullLayoutGUI() { super( "NullLayout"); setDefaultCloseOperation( EXIT_ON_CLOSE); Container contentPane = getContentPane(); contentPane.setLayout( null); setBounds( 10, 10, 200, 130); JButton button; for ( int i=0; i<9; ++i) { button = new JButton( Integer.toString( i+1)); button.setBounds( 10+60*(i%3), 10+30*(i/3), 50, 20); contentPane.add( button); } // pack(); // no layout manager, this does not work } public static void main( String[] args) { new NullLayoutGUI().setVisible( true); } }

Graphische Oberflächen – Layout Beispiele(1a)


NullLayout Eigenschaften

● Beliebige Gestaltung möglich● Viel Aufwand („Pixels zählen“)● Positionen für alle Elemente und Fenstergröße manuell● Starres Layout (keine Anpassung bei Größenänderung)

NullLayout Anwendungsbereich

● Selten verwendet● Für „exotische“ Anordnungen● Bei starren Rahmenbedingungen (z.B. feste Fenstergröße oder Teilbereich)

Lernkontrolle● Größen und Positionen selbst verändern● Fenstergröße ändern

Hinweis: Wer rechnen kann, muss weniger schreiben ;-)

Graphische Oberflächen – Layout Beispiele(1b)


NullLayout SchemaGraphische Oberflächen – Layout Beispiele(1c)

"beliebige Anordnung, keine Vergrößerung"

Text

Text

Text

Text

Text

Text


public class BorderLayoutGUI extends JFrame {

public BorderLayoutGUI() { super( "BorderLayoutGUI"); setDefaultCloseOperation( EXIT_ON_CLOSE); Container contentPane = getContentPane(); contentPane.setLayout( new BorderLayout()); JButton button; String[][] buttonDef = { // einfach mal einzelne Elemente auskommentieren! {"North", BorderLayout.NORTH}, {"South", BorderLayout.SOUTH}, {"East", BorderLayout.EAST}, {"West", BorderLayout.WEST}, {"Center", BorderLayout.CENTER}, }; for ( int i=0; i<buttonDef.length; ++i) { button = new JButton( buttonDef[i][0]); contentPane.add( button, buttonDef[i][1]); } pack(); }

public static void main( String[] args) { new BorderLayoutGUI().setVisible( true); }

}



BorderLayout Eigenschaften

● Plazierung der Elemente in Zonen● Elemente füllen Zonen komplett aus (je ein Element, Größenanpassung)● Gesamtlayout bleibt bei Größenänderungen erhalten (Zonen passen sich an)

BorderLayout Anwendungsbereich

● Für spezielle Anwendungensbereiche● Als Basislayout für ein Fenster (Toolbar, Arbeitsbereich, Statuszeile, ...)

Lernkontrolle● Zonenzuordnung verändern● Fenstergröße ändern

Hinweise:● Um mehrere Elemente in einer Zone zu plazieren müssen diese in einen Container (z.B. Jpanel) mit eigenem Layout verpackt werden.



BorderLayout SchemaGraphische Oberflächen – Layout Beispiele(2c)

"Zonenmodell mit elastischer Mitte"


public class FlowLayoutGUI extends JFrame {

public FlowLayoutGUI() { super( "FlowLayout"); setDefaultCloseOperation( EXIT_ON_CLOSE); Container contentPane = getContentPane(); contentPane.setLayout( new FlowLayout()); JButton button; for ( int i=0; i<9; ++i) { button = new JButton( Integer.toString( i+1)); contentPane.add( button); } pack(); }

public static void main( String[] args) { new FlowLayoutGUI().setVisible( true); }

}



FlowLayout Eigenschaften

● Horizontale Anordnung● Kein Einfluss auf Größe der Elemente ● Automatischer Zeilenumbruch bei Größenänderung

FlowLayout Anwendungsbereich

● Immer wenn Umbruch nicht vorkommt oder nicht stört● Für Toolbars (Knopfleiste mit Umbruchmöglichkeit) oder Buttonleiste in Dialog● Bei starren Rahmenbedingungen (z.B. feste Fenstergröße oder Teilbereich)

Lernkontrolle● Größe von Komponenten vordefinieren● Fenstergröße ändern



FlowLayout SchemaGraphische Oberflächen – Layout Beispiele(2c)

"Automatischer Umbruch, Zentrierung"


public class XBoxLayoutGUI extends JFrame {

public XBoxLayoutGUI() { super( "BoxLayout(X)"); setDefaultCloseOperation( EXIT_ON_CLOSE); Container contentPane = getContentPane(); contentPane.setLayout( new BoxLayout( contentPane, BoxLayout.X_AXIS)); JButton button; for ( int i=0; i<9; ++i) { button = new JButton( Integer.toString( i+1)); // Try the following alignment constants from class JComponent: // TOP_ALIGNMENT, CENTER_ALIGNMENT(=Default) or BOTTOM_ALIGNMENT // Hint: You must resize the window to see the effect! button.setAlignmentY( BOTTOM_ALIGNMENT); contentPane.add( button); } pack(); }

public static void main( String[] args) { new XBoxLayoutGUI().setVisible( true); }}



public class YBoxLayoutGUI extends JFrame {

public YBoxLayoutGUI() { super( "BoxLayout(Y)"); setDefaultCloseOperation( EXIT_ON_CLOSE); Container contentPane = getContentPane(); contentPane.setLayout( new BoxLayout( contentPane, BoxLayout.Y_AXIS)); JButton button; for ( int i=0; i<9; ++i) { button = new JButton( Integer.toString( i+1)); // Try the following alignment constants from class JComponent: // LEFT_ALIGNMENT, CENTER_ALIGNMENT(=Default) or RIGHT_ALIGNMENT // Hint: You must resize the window to see the effect! button.setAlignmentX( LEFT_ALIGNMENT); contentPane.add( button); } pack(); }

public static void main( String[] args) { new YBoxLayoutGUI().setVisible( true); }}



BoxLayout Eigenschaften

● Horizontale oder Vertikale Anordnung● Kein Einfluss auf Größe der Elemente ● Ausrichtung der Elemente gemäß Vorgabe auch bei Größenänderung

BoxLayout Anwendungsbereich

● Wenn FlowLayout nicht in Frage kommt (wg. Umbruch)● Zur Anordnung von Teilbereichen mit eigenem Layout● Für einfache Teilbereiche (z.B. Buttonleiste, Label+Feld)

Lernkontrolle● Ausrichtungsvorgabe verändern● Fenstergröße ändern

siehe auch: Klasse Box mit Methoden für Struts und Glue



BoxLayout SchemaGraphische Oberflächen – Layout Beispiele(2c)

"Aneinanderreihung, Feste Ausrichtung (hier: unten)"


public class GridLayoutGUI extends JFrame {

public GridLayoutGUI() { super( "GridLayout"); setDefaultCloseOperation( EXIT_ON_CLOSE); Container contentPane = getContentPane(); contentPane.setLayout( new GridLayout( 3, 3, 5, 5)); JButton button; for ( int i=0; i<9; ++i) { button = new JButton( Integer.toString( i+1)); contentPane.add( button); } pack(); }

public static void main( String[] args) { new GridLayoutGUI().setVisible( true); }

}



GridLayout Eigenschaften

● Gitterförmige Anordnung der Elemente in Zellen gleicher Größe● Einfügen der Elemente zeilenweise gemäß Reihenfolge beim Einfügen● Ausnutzung der kompletten Fläche, Elemente werden vergrößert● Dynamische Anpassung des Gitters bei Größenänderungen

GridLayout Anwendungsbereich

● Für einfache Gitterstrukturen (z.B. Bedienfelder)● Ohne besonderen Anforderungen an Zellgröße und -Ausrichtung

Lernkontrolle● Gitterdimensionen anpassen● Fenstergröße ändern



GridLayout SchemaGraphische Oberflächen – Layout Beispiele(2c)

"Gleichförmiges Gitter über gesamten Raum"


public class GridBagLayoutGUI extends JFrame { public GridBagLayoutGUI() { super( "GridLayout"); setDefaultCloseOperation( EXIT_ON_CLOSE); Container contentPane = getContentPane(); contentPane.setLayout( new GridBagLayout()); JButton button; GridBagConstraints gbc = new GridBagConstraints(); // Lists to provide the values for the loop below (think more, type less!) int[] anchor = { /* ... anchor values for each button, z.B. GridBagConstraints.CENTER ... */ }; int[] fill = { /* ... fill values for each button, z.B. GridBagConstraints.NONE ... */ }; double[] weightx = { /* ... weightx values for each button, z.B. 0.0 */ }; double[] weighty = { /* ... weighty values for each button, z.B. 0.0 */ }; for ( int i=0; i<9; ++i) { button = new JButton( Integer.toString( i+1)); gbc.gridx = i%3; gbc.gridy = i/3; gbc.anchor = anchor[ i]; gbc.fill = fill[ i]; gbc.weightx = weightx[ i]; gbc.weighty = weighty[ i]; contentPane.add( button, gbc); } pack(); }

public static void main( String[] args) { new GridBagLayoutGUI().setVisible( true); }}



GridBagLayout Eigenschaften

● Gitterförmige Anordnung der Elemente● Position, Größe und Ausrichtung der Elemente „beliebig“ definierbar● Dynamische Anpassung und Einhaltung der Regeln bei Größenänderungen

GridBagLayout Anwendungsbereich

● Für komplexe Gitterstrukturen (z.B. Formulare)● Bei besonderen Anforderungen an Zellgröße und -Ausrichtung

Lernkontrolle● Gitterparameter anpassen● Fenstergröße ändern

Hinweise:● Das Constraint-Objekt kann wiederverwendet werden („Marschroute“)● Oftmals führt die Verschachtelung einfacher Layouts zum gleichen Ergebnis



GridBagLayout SchemaGraphische Oberflächen – Layout Beispiele(2c)

"Variables Gitter, vielfältiges Verhalten bei Größenänderung"


Java stellt mit Swing eine umfangreiche und mächtige Bibliothek zur Realiserung von graphischen Oberflächen zur Verfügung. Diese Übersicht kann nur einen groben Überblick über die Elemente dieser Bibliothek und deren Verwendung.

Zur praktischen Anwendung der Bibliothek sind intensive eigene Experimente unter Verwendung der Online-Hilfe und des Java-Tutorials notwendig. Dabei sollte der Schwerpunkt auf dem Verständnis der grundlegenden Mechanismen, insbesondere Layout-Manager und Events/Listener liegen. Details zu den einzelnen Swing-Klassen müssen auch "im Tagesgeschäft" immer wieder nachgelesen werden (kein Mensch kann sich alles merken).

Moderne Entwicklungsumgebungen leisten dabei durch ihre Funktionen zur Code-Vervollständigung wertvolle Hilfe. Abgeraten wird indes vom Gebrauch von "Oberflächenbaukästen" (GUI-Editoren). Diese sind stets spezifisch und man lernt nur "wo man klicken muss" und nicht etwa, wie das Ganze funktioniert!

Die Diskussion graphischer Oberflächen wird in Informatik 2 mit komplexen Controls wie Listen, Tabellen und Bäumen fortgesetzt.

Graphische Oberflächen – Fazit

vorlesung informatik 1 -...

Documents