Vorlesung Informatik 1

Transkript

1 Vorlesung Informatik 1 Fachhochschule für Technik Esslingen Studiengang Wirtschaftsinformatik Teil 5: GUI Programmierung Dr. rer. nat. Andreas Rau andreas.rau@hs-esslingen.de Andreas Rau, D:\home\ar\fhte\vorlesungen\informatik1\folien\informatik1-theorie-gui.odp #1

2 Inhalt Dieser Teil der Vorlesung behandelt die die Pakete und Klassen Oberflächenprogrammierung. zur 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!). Andreas Rau, D:\home\ar\fhte\vorlesungen\informatik1\folien\informatik1-theorie-gui.odp #2

3 Graphische Oberflächen - Hintergrund 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. Andreas Rau, D:\home\ar\fhte\vorlesungen\informatik1\folien\informatik1-theorie-gui.odp #3

4 Graphische Oberflächen - Model/View/Controller 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. Andreas Rau, D:\home\ar\fhte\vorlesungen\informatik1\folien\informatik1-theorie-gui.odp #4

5 Graphische Oberflächen Funktion: Events 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"). Andreas Rau, D:\home\ar\fhte\vorlesungen\informatik1\folien\informatik1-theorie-gui.odp #5

6 Graphische Oberflächen Prinzipien: Komposition & 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). Andreas Rau, D:\home\ar\fhte\vorlesungen\informatik1\folien\informatik1-theorie-gui.odp #6

7 Exkurs: Vergleich von Benutzeroberflächen 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) Andreas Rau, D:\home\ar\fhte\vorlesungen\informatik1\folien\informatik1-theorie-gui.odp #7

8 Graphische Oberflächen Elemente: Container & Controls 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 Andreas Rau, D:\home\ar\fhte\vorlesungen\informatik1\folien\informatik1-theorie-gui.odp #8

9 Graphische Oberflächen Aufbau (Beispiel) Fenstersystem (Betriebssystem) Java Events Top Level Container Events Container Control Events Control Events Control Events Andreas Rau, D:\home\ar\fhte\vorlesungen\informatik1\folien\informatik1-theorie-gui.odp #9

10 Graphische Oberflächen Struktur Komposition Vererbung und sonstige Beziehungen Container Control Decoration Control Container Layout Ein Container kann Controls enthalten (also auch weitere Container, da Container auch Controls sind). Controls können dekoriert werden. Ein Container ist auch ein Control (also können auch Container dekoriert werden). Außerdem hat er ein Layout. Andreas Rau, D:\home\ar\fhte\vorlesungen\informatik1\folien\informatik1-theorie-gui.odp #10

11 Graphische Oberflächen Koordinatensystem X Bildschirm y x width Y Fenster height x + y = location width + height = dimension bzw. size location + dimension = bounds Andreas Rau, D:\home\ar\fhte\vorlesungen\informatik1\folien\informatik1-theorie-gui.odp #11

12 Graphische Oberflächen Bibliotheken 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. Andreas Rau, D:\home\ar\fhte\vorlesungen\informatik1\folien\informatik1-theorie-gui.odp #12

13 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; Graphische Oberflächen 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 Andreas Rau, D:\home\ar\fhte\vorlesungen\informatik1\folien\informatik1-theorie-gui.odp #13

14 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; Graphische Oberflächen 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 Andreas Rau, D:\home\ar\fhte\vorlesungen\informatik1\folien\informatik1-theorie-gui.odp #14

15 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; Graphische Oberflächen 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 Andreas Rau, D:\home\ar\fhte\vorlesungen\informatik1\folien\informatik1-theorie-gui.odp #15

16 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; Graphische Oberflächen JButton 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 Andreas Rau, D:\home\ar\fhte\vorlesungen\informatik1\folien\informatik1-theorie-gui.odp #16

17 Graphische Oberflächen Listener 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. Andreas Rau, D:\home\ar\fhte\vorlesungen\informatik1\folien\informatik1-theorie-gui.odp #17

18 Verallgemeinerung: Das Observer-Pattern 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 Observable Dient als Basisklasse für Dienstanbieter und bringt Mechanismen zur Registrierung und Benachrichtung von Dienstnutzern mit. b) Das Interface Observer Gibt eine standardisierte Methode zur Benachrichtigung von Dienstnutzern vor. Beispiel: public class Anbieter extends Observable { //... public class Nutzer implements Observer { //... Action Box Andreas Rau, D:\home\ar\fhte\vorlesungen\informatik1\folien\informatik1-theorie-gui.odp #18

19 Seitenblick: Operationen als Objekte(1) 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. Andreas Rau, D:\home\ar\fhte\vorlesungen\informatik1\folien\informatik1-theorie-gui.odp #19

20 Anwendungsbeispiel // Datei Function.java public interface Function { public double compute( double x); // compute value for y // Datei LinearFunction.java public class LinearFunction implements Function { double m, b; Seitenblick: Operationen als Objekte(2) public LinearFunction( double m, double b) { this.m = m; this.b = b; public double compute( double x) { return m*x + b; Action Box Andreas Rau, D:\home\ar\fhte\vorlesungen\informatik1\folien\informatik1-theorie-gui.odp #20

21 Seitenblick: Operationen als Objekte(3) Eselsbrücke: AktionsObjekte als Black Box Aus 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. Action Box Andreas Rau, D:\home\ar\fhte\vorlesungen\informatik1\folien\informatik1-theorie-gui.odp #21

22 Graphische Oberflächen Einfügen x Drei Es 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. Andreas Rau, D:\home\ar\fhte\vorlesungen\informatik1\folien\informatik1-theorie-gui.odp #22

23 Graphische Oberflächen Konstruktionsprinzipien Zum 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 vorkonfigurieren JPanel buttonpanel = new JPanel(); // konstruieren buttonpanel.setlayout( new FlowLayout()); // konfigurieren JButton button = new JButton( Klick mich! ); // konstruieren button.addactionlistener(...); // konfigurieren panel.add( button); // Button zum Panel hinzufügen // weitere Buttons add( panel, BorderLayout.CENTER); // Panel zum Fenster hinzufügen // weitere Panels oder Komponenten // Fenster nachkonfigurieren pack(); // oder setlocation() und setsize() Andreas Rau, D:\home\ar\fhte\vorlesungen\informatik1\folien\informatik1-theorie-gui.odp #23

24 AUFRUF Graphische Oberflächen Verständlichkeit 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. Programm main() println()...() Bibliothek 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! Programm Bibliothek main() setvisible() ENDE (warten) actionperformed() RÜCKRUF Andreas Rau, D:\home\ar\fhte\vorlesungen\informatik1\folien\informatik1-theorie-gui.odp #24

25 Graphische Oberflächen Layout Manager 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. Andreas Rau, D:\home\ar\fhte\vorlesungen\informatik1\folien\informatik1-theorie-gui.odp #25

26 Graphische Oberflächen Layout Beispiele(1a) 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); Andreas Rau, D:\home\ar\fhte\vorlesungen\informatik1\folien\informatik1-theorie-gui.odp #26

27 Graphische Oberflächen Layout Beispiele(1b) 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 ;-) Andreas Rau, D:\home\ar\fhte\vorlesungen\informatik1\folien\informatik1-theorie-gui.odp #27

28 Graphische Oberflächen Layout Beispiele(1c) NullLayout Schema Text Text Text Text Text Text "beliebige Anordnung, keine Vergrößerung" Andreas Rau, D:\home\ar\fhte\vorlesungen\informatik1\folien\informatik1-theorie-gui.odp #28

29 Graphische Oberflächen Layout Beispiele(6a) 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); Andreas Rau, D:\home\ar\fhte\vorlesungen\informatik1\folien\informatik1-theorie-gui.odp #29

30 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: Graphische Oberflächen Layout Beispiele(6b) Um mehrere Elemente in einer Zone zu plazieren müssen diese in einen Container (z.b. Jpanel) mit eigenem Layout verpackt werden. Andreas Rau, D:\home\ar\fhte\vorlesungen\informatik1\folien\informatik1-theorie-gui.odp #30

31 Graphische Oberflächen Layout Beispiele(2c) BorderLayout Schema "Zonenmodell mit elastischer Mitte" Andreas Rau, D:\home\ar\fhte\vorlesungen\informatik1\folien\informatik1-theorie-gui.odp #31

32 Graphische Oberflächen Layout Beispiele(2a) 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); Andreas Rau, D:\home\ar\fhte\vorlesungen\informatik1\folien\informatik1-theorie-gui.odp #32

33 Graphische Oberflächen Layout Beispiele(2b) 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 Andreas Rau, D:\home\ar\fhte\vorlesungen\informatik1\folien\informatik1-theorie-gui.odp #33

34 Graphische Oberflächen Layout Beispiele(2c) FlowLayout Schema "Automatischer Umbruch, Zentrierung" Andreas Rau, D:\home\ar\fhte\vorlesungen\informatik1\folien\informatik1-theorie-gui.odp #34

35 Graphische Oberflächen Layout Beispiele(3a) 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); Andreas Rau, D:\home\ar\fhte\vorlesungen\informatik1\folien\informatik1-theorie-gui.odp #35

36 Graphische Oberflächen Layout Beispiele(3a) 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); Andreas Rau, D:\home\ar\fhte\vorlesungen\informatik1\folien\informatik1-theorie-gui.odp #36

37 Graphische Oberflächen Layout Beispiele(3b) 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 Andreas Rau, D:\home\ar\fhte\vorlesungen\informatik1\folien\informatik1-theorie-gui.odp #37

38 Graphische Oberflächen Layout Beispiele(2c) BoxLayout Schema "Aneinanderreihung, Feste Ausrichtung (hier: unten)" Andreas Rau, D:\home\ar\fhte\vorlesungen\informatik1\folien\informatik1-theorie-gui.odp #38

39 Graphische Oberflächen Layout Beispiele(4a) 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); Andreas Rau, D:\home\ar\fhte\vorlesungen\informatik1\folien\informatik1-theorie-gui.odp #39

40 Graphische Oberflächen Layout Beispiele(4b) 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 Andreas Rau, D:\home\ar\fhte\vorlesungen\informatik1\folien\informatik1-theorie-gui.odp #40

41 Graphische Oberflächen Layout Beispiele(2c) GridLayout Schema "Gleichförmiges Gitter über gesamten Raum" Andreas Rau, D:\home\ar\fhte\vorlesungen\informatik1\folien\informatik1-theorie-gui.odp #41

42 Graphische Oberflächen Layout Beispiele(5a) 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); Andreas Rau, D:\home\ar\fhte\vorlesungen\informatik1\folien\informatik1-theorie-gui.odp #42

43 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: Graphische Oberflächen Layout Beispiele(5b) Das Constraint-Objekt kann wiederverwendet werden ( Marschroute ) Oftmals führt die Verschachtelung einfacher Layouts zum gleichen Ergebnis Andreas Rau, D:\home\ar\fhte\vorlesungen\informatik1\folien\informatik1-theorie-gui.odp #43

44 Graphische Oberflächen Layout Beispiele(2c) GridBagLayout Schema "Variables Gitter, vielfältiges Verhalten bei Größenänderung" Andreas Rau, D:\home\ar\fhte\vorlesungen\informatik1\folien\informatik1-theorie-gui.odp #44

45 Graphische Oberflächen Fazit 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. Andreas Rau, D:\home\ar\fhte\vorlesungen\informatik1\folien\informatik1-theorie-gui.odp #45