Graphische Benutzeroberflächen mit Java Swing

Transkript

1 Graphische Benutzeroberflächen mit Java Swing Teil 1 Dr. Beatrice Amrhein

2 Inhaltsverzeichnis 1 Grundlagen Kurs Überblick Graphik in Java Zeichnen in Java Das Abstract Windowing Toolkit, Java AWT Die AWT Komponenten in Java Container-Komponenten Primitive AWT Komponenten Ein AWT Beispiel Einfügen von Komponenten Java Applets Swing Ein Auszug aus der Klassenstruktur von Swing Die neuen Möglichkeiten mit Swing Setzen des Look and Feel Einfache Swing Komponenten: JLabel, JButton, JCheckBox, Erzeugen von Menus Swing Text Komponenten Swing Container Window Komponenten Anordnen von Interface Komponenten, Java Layout Manager Wie wählt man den Layout Manager Das Java Event Handling Key Events Action Events Anonyme Klassen Adapter Klassen Mouse Events Events auf Menu Items Event Listener mit Parameter Window Events Die Klasse AbstractAction Design Pattern für Graphische Benutzeroberflächen Das Observer Design Pattern Das Model View Controller Design Pattern Das Model View Presenter Pattern (MVP) Das Command Processor Design Pattern Drawing Application Beispiel Der Swing Undo Manager

3 1 Grundlagen 1.1 Kurs Überblick AWT, das Abstract Windowing Toolkit: Das AWT Paket enthält Klassen um User Interfaces zu erstellen, Graphiken zu zeichnen und Bilder darzustellen. Zum Erstellen von User Interfaces stellt das AWT grundlegende Komponenten wie Buttons, Labels, Schiebebalken, Windows,... zur Verfügung. Ausserdem können diese Komponenten mittels Event-Handling User-Eingaben verarbeiten und weiterleiten. Swing, lightweight AWT, aber mit viel mehr Möglichkeiten: Das Swing Paket stellt eine Menge von lightweight Komponenten zur Verfügung, welche (so weit wie möglich) auf allen Plattformen gleich funktionieren und aussehen. Das Swing Paket bietet im Vergleich zum AWT zusätzlich: eine viel grössere Auswahl an GUI Komponenten Shortcuts, Accelerators wählbares Look and Feel verschiedene mächtige Textkomponenten Unterstützung von cut, copy, paste, undo,... Tabellen und Bäume usw. Event Handling: Mit Hilfe von Graphischen Benutzeroberflächen soll der User mit einer Applikation interagieren können. Interaktion (mit einem GUI) geschieht über Events. Ein Event ist also eine Aktion, welche durch einen Benutzer initialisiert wurde, sei es durch Drücken eines Buttons, Verschieben der Maus, Drücken einer Taste... Wir lernen in diesem Kurs das Java Event Modell kennen und benutzen. Design Pattern: Im GUI Bereich sind einige Design Pattern besonders wichtig; dazu gehören das Observer Design Pattern (Publisher-Subscriber), das MVC (Model-View-Controller) und das Command Processor Design Pattern. Spezielle Swing Komponenten wie ComboBoxen (Auswahl-Menü), Listen, Tabellen, Bäume: Swing Komponenten sind nach dem MVC Design Pattern aufgebaut. Einige Swing Komponenten sind ausserdem adaptierbar, das heisst, Modell, View oder Controller Teile der Komponenten sind austauschbar. GUI Komponenten sind vorzugsweise Java Beans, das heisst, sie erfüllen das Java Komponenten Modell. Dies führt dazu, dass alle GUI Komponenten austauschbar und sehr flexibel einsetzbar sind. Die Hauptaufgabe der Software Ergonomie ist es, herauszufinden, wie Benutzeroberflächen gestaltet sein müssen, damit die Applikationen - anwenderfreundlich, - leicht bedienbar, - ansprechend und motivierend sind. 3

4 1.2 Graphik in Java Graphics...definiert eine device-unabhängige Schnittstelle für Graphikobjekte (Graphik-Kontext).... bietet Methoden für das Zeichnen von Linien, Rechtecken, Kreisen, Zeichnen von Bildern, Füllen von Flächen, usw. drawarc, drawline, filloval drawpolygon, drawrect, draw3drect, drawstring, setcolor, setfont,... Verschiedene Plattformen realisieren Graphikobjekte auf unterschiedliche Art und Weise 7 Die Java Klasse Graphics dient als Kontext für alle sichtbaren Objekte in Java. Graphics Objekte können nicht direkt (durch den Konstruktor erzeugt) werden, da der Konstruktor von Graphics protected ist. Wenn eine sichtbare Komponente (Frame, Window, Applet, Button, Label,...) erzeugt wird, wird jeweils automatisch ein zugehöriges Graphics Objekt erzeugt, Von jeder sichtbaren Komponente kann das Graphics Objekt (falls nötig) mit der Methode getgraphics() angefragt Graphik-Kontext werden. Jedes Graphik-Objekt kennt seinen Graphik-Kontext. Dieser besteht aus den Informationen: In welches Fenster (in welche Komponente) das Objekt gezeichnet wird Die aktuelle Zeichenfarbe Der aktuelle Textfont Der sichtbare Bereich (cliprect) Die aktuelle Pixeloperations-Funktion (XOR oder Paint)... Die Methode getgraphics() gibt den aktuellen Graphik-Kontext zurück. Das Abfragen der gesetzten Attribute geschieht zum Beispiel mittels der folgenden Befehle: getgraphics().getcolor() getgraphics().getfont() getgraphics().getclipbounds() Allerdings ist es normalerweise nicht nötig, Objekt diese Eigenschaften über das Graphics zu erfragen, da alle sichtbaren Komponenten eigene entsprechende Methoden besitzen, welche bei ihrem Graphics Kontext diese Eigenschaften abfragen. 8 4

5 Farben Es gibt die vordefinierten Farben Color.white, Color.black, Color.blue, Color.cyan, Color.darkGray, Color.gray, Color.green, Color.lightGray, Color.magenta, Color.orange, Color.pink, Color.red, Color.yellow Daneben können beliebige Farben definiert werden: RGB: setzen des Rot-, Grün-, Blau-Anteils g.setcolor( new Color( 255, 0, 0 ) ); (g ist das aktuelle Graphics-Objekt) 9 Farben können entweder über das Graphics Objekt gesetzt werden, oder direkt in der sichtbaren Komponente. Dafür gibt es die zwei Befehle setbackground(color c) setforeground(color c) Setzen von Fonts Ein Font besteht aus einem Namen, dem Style und der Grösse. Font ( "Dialog", Font.PLAIN,, 12 ); Font ( "DialogInput" DialogInput", Font.ITALIC,, 20 ); Font ( "Monospaced" Monospaced", Font.PLAIN,, 18 ); Font ( "Serif" Serif", Font.BOLD,, 24 ); Das Setzen des Fonts geschieht durch: setfont( new Font("Dialog", Font.BOLD, 18 )); AWT Komponenten kennen nur diese sechs verschiedenen Fonts. Für Swing-Komponenten stehen sämtliche Systemfonts zur Verfügung. Allerdings ist das Setzen von exotischen Fonts ergonomisch nicht sinnvoll. Empfohlen wird für Benutzeroberflächen ein schnörkelloser Font wie SansSerif. 10 5

6 Zeichnen in Java 1.3 Zeichnen in Java Zum Zeichnen gibt es in Java die (Graphics-) Methoden drawline, drawrect, fillrect, draw3drect, drawoval, filloval, drawarc, fillarc, drawpolygon, drawoval(x,y,wd,ht) fillpolygon, drawstring,... (x,y) (x, y) wd ht height width 12 Das Zeichnen von Kreisen und Ellipsen ist in Java etwas gewöhnungsbedürftig, da nicht Mittelpunkt und Radien angegeben werden müssen, sondern die linke obere Ecke des umschliessenden Rechtecks, sowie dessen Zeichnen Breite und Höhe. in Java public void paint(graphics g) { // Kreise zeichnen g.setcolor( new Color( 0,80,160 ) ); g.drawoval( 35,35,110,110 ); g.filloval( 40,40,100,100 ); // Quadrate zeichnen g.setcolor( Color.white ); g.drawrect( 60,60,60,60 ); g.fillrect( 65,65,50,50 ); // Segment zeichnen g.setcolor( Color.blue ); g.fillarc( -25,80,100,100,10,70 ); // Linien zeichnen g.setcolor( Color.red ); g.drawline( 25,130,70,30 ); g.drawline( 25,130,130,25 ); g.drawline( 25,130,140,70 ); 13 drawline(x1, y1, x2, y2)... zeichnet eine Linie zwischen den Punkten (x1,y1) und (x2,y2) in der aktuellen Farbe und im Koordinatensystem des aktuellen Graphik-Kontextes. drawrect(x, y, wd, ht) fillrect(x, y, wd, ht)... zeichnet ein (gefülltes) Rechteck an Position (x,y) mit Breite wd und Höhe ht. drawarc benötigt insgesamt sechs Argumente: die analogen Argumente wie drawoval, plus die zwei zusätzlichen Argumente Startwinkel und Öffnungswinkel. 6

7 Das Koordinatensystem (0,0) x-achse (4,3) y-achse Das Koordinatensystem dient zum absoluten Positionieren von 14 Objekten innerhalb eines Fensters. Dieses wird zum Beispiel in den Befehlen setsize() (Grösse der Komponente) setlocation() (Position der Komponente) setbounds() (Grösse und Position) benutzt Die Einheiten sind jeweils in Pixel. 1.4 Das Abstract Windowing Toolkit, Java AWT Die wichtigsten Pakete in java.awt sind: Components: GUI Komponenten wie Buttons, Menus, Labels, Dialog-Boxen, Container,... Layout Manager: Setzen des Layouts der verschiedenen Komponenten, also arrangieren der verschiedenen Komponenten innerhalb ihres Containers Graphics: Methoden für das Setzen von Farben, Fonts, Bilder, Zeichnen von Polygonen, Linien,... Das AWT bietet nur relativ primitive Funktionalität und nicht die vollen Möglichkeiten der unterliegenden Plattform. Das java.awt Pakage enthält drei Kategorien von Klassen User Interface Komponenten Grafik, Hilfsklassen Layout Managers Es ist ein plattform-unabhängiges GUI-Toolkit, wird also gleich benutzt unter allen Plattformen (Unix/Linux, Windows, ios,... gleich verwendet. AWT ist aber plattform-spezifisch implementiert, das bedeutet, es hat ein plattform-abhängiges Look & Feel, bietet aber nicht alle Möglichkeiten der Plattform (kleinster gemeinsamer Nenner). 7

8 1.5 Die AWT Komponenten in Java Component ist die abstrakte Basisklasse für die in Java angebotenen User Interface Komponenten (ausser den Menü-Komponenten). Ein Canvas ist ein Behälter für Zeichnungen oder Bilder. Choice und Listen dienen zum Auswählen von Optionen. TextArea ist ein Text-Bereich, TextField ist eine Text-Zeile. Frame und Dialog erzeugen ein eigenes, neues Fenster (toplevel application window). In Swing gibt es diese Komponenten nochmals als Lightweight-Komponenten. Diese heissen dann JButton, JLabel, JTextField, JTextArea, JList, JScrollbar... Ausserdem gibt es in Swing neue Komponenten wie: JTextPane, JTree JProgressBar, JToolBar, JTable paint ist die wichtigste Methode beim Erzeugen von Graphiken. Die paint-methode zeichnet die Komponente (Applet, Frame, Panel,...), mit welcher sie aufgerufen wird. g ist der Graphik-Kontext. update zeichnet die AWT-Komponente neu. Dazu wird sie zuerst mit der Hintergrundfarbe gefüllt, dann wird die (aktuelle) Vordergrundfarbe gesetzt und die paint-methode der Komponente aufgerufen. repaint bewirkt, dass (so bald als möglich) die update-methode dieser Komponente aufgerufen wird. setvisible(true)/setvisible(false) macht eine Komponente (un-)sichtbar. Dies muss bei jedem Window (Frame, JFrame,...) am Ende des Konstruktors aufgerufen werden, um das Fenster an den Bildschirm zu schicken. setenabled(true)/setenabled(false) erlaubt/verbietet das Aktivieren von Events. setlocation(), setsize() setzt die Position/ die Grösse der Komponente. Für alle diese Eigenschaften (size, location, bounds, height, width,...) gibt es sowohl set- als auch get- Methoden. So geben getwidth() und getheight() jeweils die (aktuelle) Breite und Höhe einer Komponente zurück. 8

9 java.awt Container Komponenten 1.6 Container-Komponenten... können andere Komponenten enthalten. Komponenten... werden eingefügt durch add( component ) add( component, pos )... werden gelöscht durch remove( component ) removeall( ) am Schluss an der Position pos einzeln alle... werden angeordnet durch setzen eines Layout- Managers setlayout( layoutmgr ) 20 Container Komponenten dienen als Behälter oder Hülle für andere Komponenten. In AWT gibt es die Container: Frame... das Hauptfenster einer Applikation mit MenuBar setmenubar( mb ) Titel settitle( ) Icon seticonimage( ) Panel... ein Container, der in einen anderen Container platziert wird Dialog, FileDialog... Nebenfenster einer Applikation, für temporäre Informationen Window... ein Fenster ohne Window Dekorationen 1.7 Primitive AWT Komponenten Button, Canvas, Checkbox, Choice, Label, List, Scrollbar, TextArea und TextField sind primitive AWT Komponenten. Sie können keine andere Komponenten enthalten. Sie werden erzeugt durch: Button b = new Button("ok"); Label l = new Label("Hinweise"); Danach können die Komponenten durch Panel p = new Panel(); p.add(b); p.add(l); in die Container-Komponente p eingefügt werden. 9

10 1.8 Ein AWT Beispiel import java.awt.*; public class AWTBsp extends Frame { public AWTBsp() { setfont(new Font( "Serif", Font.BOLD, 16 )); // create a panel and add it to the frame Panel p = new Panel(); add(p); // create a label and add it to the panel Label l = new Label ("Name" ); p.add(l); // create a textfield and add it to the panel TextField t = new TextField(24); p.add(t); // create a button and add it to the frame Button b = new Button("Quit"); add(b, BorderLayout.SOUTH); // set size and make frame visible setbounds(100,100,300,90); setvisible(true); public static void main( String argv[] ) { AWTBsp awt = new AWTBsp(); setfont setzt den zu benutzenden Font für die Applikation (Frame). Im Konstruktor des Labels kann gleichzeitig der Label-Text (hier Name ) angegeben werden. Der Label wird mit p.add(l) in das Panel eingefügt. Im Konstruktor des Buttons kann auch der Button-Label (hier Quit ) angegeben werden. Der Button soll am unteren Rand des Frames (BorderLayout.SOUTH) eingefügt werden. Zuletzt werden die Grösse und Position des Fensters (setbounds) sowie die Sichtbarkeit (setvisible) gesetzt. 1.9 Einfügen von Komponenten public class EasyExam extends Frame { private Label l; private Button b; EasyExam() { Panel p = new Panel(); add(p); // Erzeugen und Einfügen des Panels. setfont( new Font("Dialog",Font.PLAIN, 16)); l = new Label("Das ist ein Label"); b = new Button("Das ist ein Button"); p.add(b); p.add(l); public static void main( String argv[] ) { EasyExam e = new EasyExam(); e.setsize(300,90); e.setvisible(true); Die Reihenfolge (Anordnung, Tab-Sequence) der Komponenten hängt nicht davon ab, welche Komponente zuerst erzeugt wurde, sondern einzig davon, welche Komponente als erstes mit add() eingefügt wurde. 10

11 1.10 Java Applets Applets wurden in Java eingeführt, um Programme in Webseiten laufen lassen zu können. und können mit dem Benutzer interagieren, ohne Daten zum Server senden zu müssen. Java-Applets waren Ende der 1990er Jahre mit ein Grund für den Erfolg und die schnelle Verbreitung von Java.Üblicherweise werden Java-Applets von HTML-Seiten aufgerufen. Um sie ausführen zu können, muss der Browser über eine entsprechende Java-VM verfügen. Das Einbinden eines Applets in den HTML-Code kann zum Beispiel so aussehen: <html><body> <applet code="helloworldapplet.class" width="200" height="100"></applet> </body></html> Alle Java-Applets werden von der Java-Klasse java.applet.applet abgeleitet. Sie verfügen über die Methoden: init() wird genau einmal aufgerufen, wenn das Applet erstmals in den Browser geladen wird. start() wird jedes Mal aufgerufen, wenn das Applet sichtbar wird. paint() die Zeichenmethode des Applet stop() wird aufgerufen, wenn das Applet verdeckt wird, z. B. weil das Browser-Fenster geschlossen oder von einem anderen Fenster überdeckt wird. destroy() wird aufgerufen, wenn das Applet aus dem Hauptspeicher entladen wird. Applets benötigen keine main()methode. Die in die HTML-Oberfläche eingebetteten Fenster können nicht programmgesteuert, sondern nur vom Benutzer geschlossen werden, man kann aber programmatisch zusätzliche Fenster öffnen. Ein Beispiel Applet: public class Animation extends JApplet implements Runnable { private int delay, num; private Image im[] = new Image[10]; private Thread animator; public void init() { delay = 250;num = 0; for (int i = 1; i <= 10; i++) try { im[i - 1] = ImageIO.read(new URL(getCodeBase(), "T" + i + ".gif")); catch (IOException e) { public void start() { // Start animating if (animator == null) animator = new Thread(this); animator.start(); public void stop() { // stop animatorthread animator = null; public void run() { // run methode of Runnable interface while (Thread.currentThread() == animator) { repaint(); try { Thread.sleep(delay); catch (InterruptedException e) { public void paint(graphics g) { // draw next image g.setcolor(getbackground()); g.fillrect(20, 20, 60, 60); g.drawimage(im[num % 10], 20, 20, this); num++; 11

12 2 Swing Im Swing-Paket sind alle Oberflächenkomponenten von JComponent abgeleitet, wodurch diese gleichzeitig Komponenten und Container sind. Im Gegensatz zu den AWT-Komponenten sind alle Swing-Komponenten (ausser JApplet, JFrame, JDialog und JWindow) so genannte Lightweight- Komponenten. Die AWT- Komponenten basieren auf den nativen dem Betriebssystem zugrunde liegenden GUI-Komponenten und werden nicht wie bei Swing von Java gezeichnet. AWT Komponenten haben dabei folgende Eigenschaften: Sie liegen auf der z-achse über den Lightweight-Komponenten. Sie haben keine transparenten Bereiche, sind also immer deckend (opaque). Sie sind immer rechteckig. Das Vermischen von Lightweight- und AWT Komponenten kann zu Problemen führen. Die Anzahl Komponenten wurde in Swing massiv erweitert und hat nicht auf einer A4 Seite Platz. Alle AWT Komponenten sind in Swing neu implementiert worden und beginnen zur Unterscheidung jeweils mit einem J. AWT Swing Label JLabel Button JButton 2.1 Ein Auszug aus der Klassenstruktur von Swing 12

13 2.2 Die neuen Möglichkeiten mit Swing Mit Swing sind eine ganze Palette von neuen Möglichkeiten in die Java Gui Programmierung eingeflossen. Keyboard Accelerators Alt+F Öffnet das File-Menüs Ctrl+C -> Kopiert den selektierten Text,... Tool Tips Hilfetexte, welche erscheinen, wenn die Maus über der entsprechenden Komponente steht. Neue LayoutManager, neue Panels virtuelle Desktops (MDI, d.h. Multiple Document Interface Applikationen) Drag and Drop automatisch in viele Swing-Komponenten eingebauter Data-Transfer Mechanismus. Undo Die Klasse UndoManager unterstützt das Rückgängig-Machen von User Eingaben Die Klasse JComponent ist die Basisklasse aller Swing Komponenten, ist von (AWT) Container abgeleitet und erlaubt: Das Einfügen von Komponenten auch in primitive Swing Komponenten (wie JButton, JLabel,...) Das Setzen des Look & Feel (Motif, Window, MacIntosh, Metal,...) auch zur Laufzeit Automatisches Double Buffering Swing-Komponenten - sind Lightweight Komponenten - basieren auf AWT, d.h. sie sind in AWT implement. Swing Komponenten könnten zwar beliebig mit AWT Komponenten vermischt werden. Allerdings ist dabei Vorsicht geboten, da sich Swing und AWT Komponenten nicht gleich verhalten. Da alle sichtbaren Swing Komponenten von JComponent abgeleitet sind, gibt es keine echten primitiven Komponenten mehr: in jede Komponente kann jede andere eingefügt werden (mit unterschiedlich sonderbaren Effekten). Lightweight Komponenten verwalten sich nicht selber, sondern zeichnen sich bloss in den Hintergrund der Eltern Komponente. Vergleich AWT <--> Swing Swing-Komponenten werden genau gleich erzeugt und eingefügt wie AWT Komponenten. Bloss verhalten sich AWT Komponenten anders und sollten darum nicht mehr benutzt werden. public class Swing extends JFrame { Swing() { setbackground( Color.white ); setlayout( new FlowLayout() ); JLabel hallo = new JLabel("Hello"); JButton quit = new JButton("Quit"); add(hallo); add(quit); public static void main( String argv[] ) { Swing s = new Swing(); s.setsize(150,70); s.setvisible(true); 13

14 2.3 Setzen des Look and Feel Das Look and Feel einer Swing Applikation kann (auch zur Laufzeit) ausgetauscht werden. UIManager.LookAndFeelInfo laf[] = UIManager.getInstalledLookAndFeels(); gibt die Liste aller verfügbarer Look and Feel zurück. Weitere Look and Feel können vom Internet herunter geladen werden. Setzen des Look and Feel try{ // set Look And Feel UIManager.setLookAndFeel( "javax.swing.plaf.metal.metallookandfeel" ); // update Component Tree with new Look and Feel SwingUtilities.updateComponentTreeUI( this ); catch( Exception e ) { 8 Beispiel LAFFrame.java unter ~amrhein/swing/beispiele/swing/ 14

15 2.4 Einfache Swing Komponenten: JLabel, JButton, JCheckBox,... JLabel... dienen als Beschriftung und zum Anzeigen von Texten auf der Oberfläche.... sind sehr vielseitig und können sowohl Texte (sogar HTML) als auch Bilder enthalten. Die Ausrichtung (Alignment) der Texte und Bilder wird durch SwingConstants definiert. // by default, the text is aligned left l1 = new JLabel("JLabel", SwingConstants.CENTER); l1.setfont( new Font( "Dialog", Font.BOLD, 18 ) ); add( l1 ); Icon image = new ImageIcon( "icon1.gif" ); // create new JLabel with text and image l2 = new JLabel("Link", image, SwingConstants.RIGHT ); // set position of label text, relative to image. l2.setverticaltextposition( SwingConstants.TOP ); l2.sethorizontaltextposition(swingconstants.left); add( l2 ); sethorizontaltextposition( int textposition ) setzt die horizontale Text-Position, relativ zum Bild des JLabels. Der Defaultwert ist SwingConstants.RIGHT. setverticaltextposition( int textposition ) setzt die vertikale Text-Position. Der Defaultwert ist CENTER. JButton Mit Hilfe eines Buttons kann der Benutzer ein Event auslösen. Jeder Button hat eine Beschriftung oder ein Bild zur Erklärung, was für ein Event durch den Button ausgelöst wird. In Swing sind alle Komponenten, welche auf Maus Klick ein Event auslösen, von AbstractButton abgeleitet und haben darum die gleiche Grundfunktionalität. Wie man zu einem Button ein Event verknüpft, wird im Kapitel Event Handling erklärt. Verschiedene Button-Methoden sind: Setzen eines Icon: seticon(), setpressedicon(), setrollovericon() Ein Button kann (abhängig vom Zustand: normal, gedrückt, Mouse_over) verschiedene Bilder anzeigen. Setzen des ButtonLabels: settext("label ) Setzen eines Hilfetextes (ToolTip): settooltiptext() Buttons sollten jeweils einen Hilfetext (ToolTip) ausgeben, welcher dem Benutzer mitteilt, was beim Drücken dieses Buttons passieren wird. Setzen von Shortcuts: setmnemonic() Es ist ergonomisch sinnvoll, für alle häufig benutzten Buttons Shortcuts zu definieren. Auslösen eines Button Event: doclick() simuliert ein Button Klick eines Users. Hinweis zur Ergonomie: Alle Button-Beschriftungen sind verschieden und ändern sich nicht! 15

16 JCheckBox und JRadioButton Mit Checkboxen und RadioButtons werden verschiedene Optionen ausgewählt. Es können beliebig viele Checkboxen ausgewählt werden, RadioButtons erlauben nur die Auswahl von einem Element. JCheckBox(String s) erzeugt eine Checkbox mit Label s. JRadioButton(String s) erzeugt ein RadioButton mit Label s. Ergonomie: Check Boxen und Radio Button sollten dann verwendet werden, wenn nicht mehr als 5 oder 6 Elemente zur Auswahl stehen. Andernfalls sollte eine JList oder ein JComboBox verwendet werden. Beispiel: CheckboxFrame class MyPanel extends JPanel { private JCheckBox cb1, cb2, cb3; private JRadioButton rb1, rb2, rb3; private ButtonGroup bg; private ImageIcon icon1, icon2; public MyPanel() { // erzeugen von CheckBoxen mit Anfangswert (true oder false) cb1 = new JCheckBox("Opt1", true); cb2 = new JCheckBox("Opt2", false); cb3 = new JCheckBox("Opt3", true); add(cb1);add(cb2);add(cb3); // erzeugen von RadioButtons mit Anfangswert (true oder false) rb1 = new JRadioButton("Excl1",true); rb2 = new JRadioButton("Excl2",false); rb3 = new JRadioButton("Excl3",false); add(rb1);add(rb2);add(rb3); // Die ButtonGroup sorgt dafür, dass immer bloss ein RadioButton true ist. bg = new ButtonGroup(); bg.add(rb1); bg.add(rb2); bg.add(rb3); 16

17 JToolbar Eine Toolbar bietet einen schnellen Zugriff auf die am häufigsten verwendeten Befehle (Actions). Sie enthält normalerweise vor allem Buttons, kann aber beliebige Komponenten enthalten. Die Komponenten darauf dürfen nie den Focus behalten (setfocusable(false). Die Toolbar kann zur Laufzeit vom Benutzer verschoben werden. public ToolBarDemo() { //Create the toolbar. JToolBar toolbar = new JToolBar(); b1 = new JButton(new ImageIcon("left.gif")); b1.setfocusable(false); toolbar.add(b1); b2 = new JButton(new ImageIcon("right.gif")); b2.setfocusable(false); toolbar.add(b2); toolbar.addseparator(); b3 = new JButton(new ImageIcon("Cut.gif")); b3.setfocusable(false); toolbar.add(b3); toolbar.add(new JLabel(new ImageIcon("Copy.gif"))); b4 = new JButton(new ImageIcon("Paste.gif")); b4.setfocusable(false); toolbar.add(b4); toolbar.addseparator(); toolbar.add(new JTextField(15)); // add toolbar to the frame add(toolbar, BorderLayout.NORTH); 2.5 Erzeugen von Menus JMenuBar() erzeugt einen Menubalken. Dieser wird mit setjmenubar() in das Frame eingefügt. JMenu() erzeugt einen Menueintrag, add() fügt diesen in den Menubalken ein. JMenuItem() erzeugt einen Menubutton. add() fügt diesen in das JMenu ein. Die Menueinträge können optisch getrennt werden durch addseparator() // create menubar JMenuBar bar = new JMenuBar(); setjmenubar(bar); // create the file menu JMenu filemenu = new JMenu("File"); JMenu filemenu.setmnemonic('f'); JMenuItem quit = new JMenuItem("Quit"); filemenu.add(quit); // create insert menu JMenu insertmenu = new JMenu("Insert"); JMenuItem instext = new JMenuItem("TextField"); insertmenu.add(instext); JMenu insgraph = new JMenu("Graphic"); insertmenu.add(insgraph); JMenuItem g1 = new JMenuItem("New"); insgraph.add(g1); JMenuItem g2 = new JMenuItem("From File"); insgraph.add(g2); JMenuItem g3 = new JMenuItem("AutoForm"); insgraph.add(g3); JMenuItem instab = new JMenuItem("Table"); insertmenu.add(instab); // add menus to menu bar bar.add(filemenu); bar.add(insertmenu); 17

18 Anbinden von Shortcuts Das Aktivieren des File Menus durch 'Alt F' wird ermöglicht durch: JMenu filemenu = new JMenu("File"); filemenu.setmnemonic('f'); 'Alt F' ist also ein Mnemonic. Aktivieren von "Quit" durch 'Ctrl-Q' geschieht durch: JMenuItem exititem = new JmenuItem("Quit"); exititem.setaccelerator( KeyStroke.getKeyStroke(KeyEvent.VK_Q,Event.CTRL_MASK)); Mnemonics werden unter Windows normalerweise durch die ALT-Taste (zusammen mit einer Doppeltasten- Kombination) ausgelöst (z. Bsp. ALT-F+A für SaveAs) Accelerators werden mit CTRL (STRG) ausgelöst, zum Beispiel CTRL-C für copy. Die gesetzten Shortcuts werden automatisch im JMenuItem (durch Unterstreichen des entsprechenden Buchstabens oder durch Angabe des CTRL-Strings) angegeben. JCheckBoxMenuItem und JRadioMenuItem Checkboxen und RadioButtons gibt es auch als Menu-Items. Da sie von JMenuItem abgeleitet sind, verhalten sie sich wie normale Menu-Items. JCheckBoxMenuItem(String text, Icon icon, boolean b) JRadioButtonMenuItem(String text, Icon icon, boolean selected) Vorsicht Nur JCheckBoxMenuItem oder JRadioButtonMenuItem und keine JCheckBox oder JRadioButton Kompontenten in das Menu einfügen, andernfalls funktioniert das Popup-Menu nicht richtig. Genau wie die JRadioButton benötigen auch die JRadioButtonMenuItem Komponenten eine Button-Group, damit nur immer genau eine Komponente der Gruppe gleichzeitig selektiert ist. 18

19 2.6 Swing Text Komponenten In Swing gibt es die folgenden Text-Komponenten: JTextArea ist ein einfacher Text Bereich ohne Formatierung. JTextField ist ein einzeiliger Text Bereich. Ein JPasswordField verbirgt den Text hinter einem Zeichen (typischerweise * ). JFormattedTextField ermöglicht durch Angeben einer entsprechenden Maske formatierten Text einzugeben (Telefon-Nummern, Währungen,...). Ein JEditorPane kann Plain-Text, HTML-Text oder RTF-Text darstellen. Ein JTextPane kann verschiedene Formatierungen (Farben, Fonts, Styles,...) und auch Bilder darstellen. In einem Text Bereich können verschiedenste Typen von Events abgefangen werden: KeyEvent, CaretEvent, FocusEvent... Jede Text Änderung in einem Text Bereich erzeugt ausserdem ein DocumentEvent. Bei einem JTextField kann auch ein ActionEvent abgefangen werden. Dies wird durch das Drücken der Enter-Taste ausgelöst. Die Editierbarkeit von Text Bereichen kann durch seteditable(true/false); gesetzt werden text1 = new JTextField("TextField Demo"); text1.seteditable( false ); add(text1, BorderLayout.NORTH); // text area in scroll pane text2 = new JTextArea(); add(new JScrollPane(text2)); // editable text field text3 = new JTextField(); add(text3, BorderLayout.SOUTH); Das Setzen von verschiedenen Formatierungen (Farben, Styles,...) in Text Komponenten behandeln wir im Kapitel Spezielle Swing Komponenten Der Text Bereich muss in ein JScrollPane eingefügt werden, damit er einen Schiebe-Balken (Scrollbar) bekommt. 19

20 2.7 Swing Container Alle Swing Komponenten sind Container: JButton hbutton = new JButton("Hintergrund Button"); // set layout manager hbutton.setlayout(new BorderLayout()); // insert swing label JLabel oben = new JLabel("Oben"); hbutton.add(oben, BorderLayout.NORTH); // insert awt label Label unten = new Label("Unten"); hbutton.add(unten, BorderLayout.SOUTH); Alle Swing-Komponenten sind (abgeleitet von der Klasse) AWT-Container. Das bedeutet, dass in Swing nicht nur Container-Komponenten sondern jede Swing Komponente andere Komponenten (sogar AWT-Komponenten) enthalten kann (mit dem entsprechenden seltsamen Verhalten). JPanel JPanel sind die einfachsten Swing Container. Sie dienen vor allem dazu, andere Container (in logisch zusammengehörige Teile) zu unterteilen. JPanel sind unsichtbar. Wir können sie nur sehen, wenn wir einen anderen Hintergrund oder (wie hier) einen Rahmen (Border) setzen. class MyBorderFrame extends JFrame { public MyBorderFrame() { //Create the panels Jpanel p1 = new JPanel(); p1.setborder( new TitledBorder(new LineBorder(Color.blue), "Main Workspace")); add(p1, BorderLayout.CENTER ); Jpanel p2 = new JPanel(); p2.setborder(new TitledBorder(new LineBorder(Color.red), "Utilities")); add(p2, BorderLayout.NORTH); Jpanel p3 = new JPanel(); p3.setborder( new TitledBorder(new LineBorder(Color.black), "Auxilary Informations")); add(p3, BorderLayout.SOUTH); 20

21 JSplitPane und JTabbedPane SplitPane und TabbedPane sind weitere nützliche Swing Panels. Ein SplitPane enthält verschiebbare Teiler-Balken zum Vergrössern/Verkleinern der verschiedenen Bereiche. SplitPanes werden erzeugt durch: JSplitPane( int unterteilung, Component leftcomponent, Component rightcomponent) Es gibt die Unterteilungen: VERTICAL_SPLIT oben/unten HORIZONTAL_SPLIT rechts/links Ein JTabbedPane ist eine Komponente, mit welcher der Benutzer zwischen verschiedenen Komponenten umschalten kann. Dies geschieht durch Drücken des entsprechenden Kartenreiters. JTabbedPane tabbedpane = new JTabbedPane(); tabbedpane.addtab(" 1 ", new JPanel()); tabbedpane.addtab(" 2 ", new Jbutton("This is Pane 2"));... tabbedpane.settabplacement(swingconstants.top); Beispiele: MySplitPane.java MyTabbedPane.java unter ~amrhein/swing/beispiele/swingcontainer 2.8 Window Komponenten Die Komponenten Dialog, Frame, JWindow, JDialog und JFrame sind von Window und nicht von JComponent abgeleitet. Diese Komponenten sind nicht lightweight. Lightweight Komponenten sind in Java implementiert und sind darum unabhängig vom unterliegenden Betriebssystem. Dies funktioniert nicht für die Komponenten, welche ein neues Fenster erzeugen, da diese mit dem Window-Manager (Betriebssystem) interagieren müssen. Alle Fenster-Komponenten (von Window abgeleitet) sind darum nicht Lightweight. 21

22 2.9 Anordnen von Interface Komponenten, Java Layout Manager Es gibt grafische Benutzeroberflächen, bei denen die Anordnung der Komponenten über die Angabe absoluter Koordinaten erfolgt. Diese Vorgehensweise ist aber aus mehreren Gründen nicht zu empfehlen: Absolute Angaben sind sehr unflexibel. Beim Einfügen weiterer Komponenten müssen die Positionen anderer Komponenten angepasst werden, was mit erheblichem Aufwand verbunden sein kann. Die Layout-Manager nehmen dem Benutzer die Arbeit der absoluten Positionierung ab. Der Benutzer macht lediglich qualitative Angaben wie diese Komponente soll links von einer anderen stehen oder alle Komponenten sollen untereinander stehen. Durch Verwenden eines Layout Manager braucht sich der Benutzer auch nicht um die Grösse der Komponente zu kümmern. Jede Java-Komponente besitzt die Methode getminimumsize() und getpreferredsize() zum Bestimmen der Mindestgrösse bzw. der bevorzugten Grösse der Komponente. Bei Buttons und Labels richten sich diese beispielsweise nach der Breite des Textes, mit dem sie beschriftet sind. Wenn der Layout-Manager einen Container bearbeitet, berücksichtigt er die Rückgabewerte dieser Methoden bei allen enthaltenen Komponenten. Mit diesem Zusammenspiel wird dem Benutzer die Festlegung der Grösse von Komponenten erspart. Durch die Vermeidung absoluter Grössenangaben ist es möglich, dass eine Komponente ihre Grösse beim Verändern der Container-Grösse anpassen kann. So kann zum Beispiel ein Text- Bereich stets das gesamte Fenster ausfüllen, in das es eingebettet ist. Der grösste Nachteil von absoluten Koordinaten ist, dass das Erscheinungsbild eines Fensters auf verschiedenen Plattformen stark variieren kann. Ein häufiger Effekt ist beispielsweise ein Abschneiden des Textes von Eingabefeldern, wenn die Oberfläche unter einem anderen Betriebssystem oder mit einer anderen Bildschirm-Auflösung entworfen wurde. Die wichtigsten Layout Manager <<LayoutManager>> FlowLayout BorderLayout BoxLayout CardLayout GridLayout GridBagLayout LayoutManager bestimmen die Position und eventuell auch die Grösse der im Container enthaltenen Komponenten In AWT gibt es fünf verschiedene Layout Manager: FlowLayout, BorderLayout, CardLayout, GridLayout und GridBagLayout. In Swing gibt es noch einige weitere Layout Manager, welche zum Teil vor allem intern (also für die Swing Komponenten selber) gebraucht werden. Alle Layout Manager können sowohl für AWT wie auch für Swing Komponenten benutzt werden

23 FlowLayout Der LayoutManager bestimmt die Position und eventuell auch die Grösse der im Container enthaltenen Komponenten FlowLayout ist geeignet für einfache Anwendungen... positioniert zeilenweise Im FlowLayout werden die einzelnen Komponenten zeilenweise, wie Wörter in einem Text, angeordnet: von links nach rechts und zeilenweise von oben nach unten. Die einzelnen Komponenten können nach links, nach rechts oder in der Zeile zentriert angeordnet werden. Die Komponente JPanel hat per Default ein FlowLayout als Layout Manager. 36 Der Konstruktor von FlowLayout hat die Parameter alignment horizontal spacing vertical spacing public class FlowLayoutBsp extends JFrame { FlowLayoutBsp() 37 { // set layout manager setlayout(new FlowLayout(FlowLayout.LEFT, 5, 5)); // linksbündig mit jeweils 5 Pixel // Abstand zwischen den Komponenten // create a label and add it to the panel JLabel l = new JLabel("Press Button to Quit"); add(l); // create two buttons and add them to the panel JButton b1 = new JButton("Cancel"); add(b1); // add bestimmt die Reihenfolge der Button JButton b2 = new JButton("Quit"); add(b2);... Verwenden des FlowLayout FlowLayoutBsp (){ // set layout manager and font setlayout( new FlowLayout(FlowLayout.LEFT,5,5)); // create a label and add it to the panel l = new JLabel("Press Button to Quit" ); add( l ); // create a button and add it to the panel b = new JButton( "Quit" ); add( b ); 23

24 BorderLayout... ist geeignet für Hauptfenster... verwaltet Grössen und Positionierung... erzeugt einen grossen Zentralbereich Center... und vier schmale Randbereiche North, West, South, East NORTH <-- --> PAGE_START SOUTH <-- --> PAGE_END WEST <-- --> LINE_START EAST <-- --> LINE_END 38 public class BorderLayoutBsp extends JFrame { BorderLayoutBsp() { // create panel with border layout, put 5 pixel between every component JPanel p = new JPanel(new BorderLayout(5, 5)); p.setbackground(color.white); add(p); // create all buttons and add them to the panel JButton center = new JButton("Center"); p.add(center, BorderLayout.CENTER); JButton north = new JButton("North"); p.add( north, BorderLayout.PAGE_START ); JButton south = new JButton("South"); p.add(south, BorderLayout.PAGE_END); JButton west = new JButton("West"); p.add(west, BorderLayout.LINE_START); JButton east = new JButton("East"); p.add(east, BorderLayout.LINE_END); north.setfont(new Font("Courier", Font.BOLD, 18)); west.setfont(new Font("Courier", Font.BOLD, 16)); 24

25 Der Konstruktor von GridLayout hat die Parameter: Anzahl Zeilen der Tabelle Anzahl Spalten der Tabelle Horizontaler Abstand zwischen den Komponenten Vertikaler Abstand zwischen den Komponenten public class GridLayoutBsp extends JFrame { GridLayoutBsp() { // set layout manager setlayout(new GridLayout(0, 2, 5, 5)); // create two labels and add them to the panel JLabel l = new Jlabel("Press Button to Quit"); add(l); add( new JLabel() ); // add empty label to fill empty space // create two s and add them to the panel JButton b1 = new JButton("Cancel"); c.add(b1); JButton b2 = new JButton("Quit"); c.add(b2);... Vollständige Beispiele unter 25

26 Im CardLayout sind alle eingefügten Komponenten so gross wie der Container, in welchem sie enthalten sind. Nur jeweils die oberste Komponente ist sichtbar. Durch die Methoden show(), first(), last(), next() und previous() wird zwischen den verschiedenen Ansichten navigiert. public class MyCardLayout extends JFrame { JPanel parent; CardLayout layout = new CardLayout(); Font font = new Font("Dialog", Font.BOLD, 16); public MyCardLayout() { parent = new JPanel( layout ); add(parent); // create content of cards MyJPanel p1 = new MyJPanel(Color.green, 1); parent.add(p1, "1"); MyJPanel p2 = new MyJPanel(Color.yellow, 2); parent.add(p2, "2"); MyJPanel p3 = new MyJPanel(Color.red, 3); parent.add(p3, "3"); class MyJPanel extends JPanel { MyJPanel(Color color, int c) { setlayout(new GridLayout(2,1)); setbackground(color); JLabel l1 = new JLabel("This is Card " + c, SwingConstants.CENTER); l1.setfont(font); add(l1); JLabel l2 = new JLabel("Click Mouse to switch to card " + (c%3+1)); add(l2); addmouselistener(new MouseAdapter() { public void mouseclicked(mouseevent e) { layout.next(parent); ); 26

27 GridBagLayout... ist geeignet für komplexe Anordnungen... verwaltet Grösse und Position... basiert auf Zeilen und Spalten... passt die Grösse von Zeilen / Spalten dynamisch an Jede Komponente kann... eine oder mehrere Zellen belegen... ihren Bereich ganz oder nur teilweise ausfüllen... bei Änderung der Container Grösse unterschiedlich stark wachsen 41 Das GridBagLayout ist das flexibelste, aber auch das komplizierteste der fünf AWT Layouts. Der Container wird in ein Gitter von Zeilen und Kolonnen unterteilt. Diese müssen nicht gleich hoch/breit sein. Jede Komponente wird positioniert durch Setzen verschiedener Variablen aus GridBagContraints. Das GridBagLayout bietet unter anderem folgende Möglichkeiten: Eine Komponente kann sich über mehrere Gitterzellen erstrecken. Spalten und Zeilen können unterschiedlich breit bzw. hoch sein. Eine Komponente kann die ihr zugewiesenen Gitterzellen voll ausfüllen oder nur zum Teil. Bei Grössen Änderungen des Containers kann angegeben werden, zu welchen Anteilen die Höhen-/Breiten Änderung auf die einzelnen Gitterzeilen und -spalten verteilt wird. Die Einstellung dieser Eigenschaften erfolgt mit Hilfe der Klasse GridBagConstraints. GridBagConstraints.gridwidth/GridBagConstraints.gridheight definiert die Anzahl Gitterzellen, über die sich die Komponente horizontal/vertikal erstreckt. Möglich sind die Werte Absoluter Wert: Anzahl Gitterzellen. GridBagConstraints.REMAINDER vergibt den Rest der aktuellen Zeile an die Komponente. GridBagConstraints.RELATIVE platziert die nächste oder die zweitletzte Komponente. GridBagConstraints.gridx/ GridBagConstraints.gridy positioniert die Komponente in der Gitterzelle gridx/gridy. GridBagConstraints.anchor erlaubt die Festlegung der Position einer Komponente innerhalb ihres Anzeigebereichs, falls sie diesen nicht voll ausfüllt. Mögliche Werte sind GridBagConstraints.CENTER sowie acht Richtungskonstanten: GridBagConstraints.NORTH bis GridBagConstraints.NORTHWEST. GridBagConstraints.fill spezifiziert, ob und wie die Komponente ihren Anzeigebereich ausfüllt: GridBagConstraints.NONE: Die Komponente erhält ihre bevorzugte Grösse. GridBagConstraints.HORIZONTAL: Die Komponente füllt die Horizontale GridBagConstraints.VERTICAL: Die Komponente füllte die Vertikale GridBagConstraints.BOTH: Die Komponente füllte den ganzen Bereich (Default). GridBagConstraints.weightx / GridBagConstraints.weighty : ermöglichen eine gewichtete Verteilung des vorhandenen Platzes auf die einzelnen Gitterzellen. GridBagConstraints.insets fügt an den Rändern des Bereichs zusätzlichen Zwischenraum ein. Vollständige Beispiele unter 27

28 Mit der Einführung von Swing wurden auch einige neue Layout Manager entwickelt: BoxLayout, GroupLayout und SpringLayout. Das SpringLayout ist dazu gedacht, in GUI-Builder eingesetzt zu werden. Das BoxLayout wurde entwickelt, um ähnliche Ergebnisse wie beim GridBagLayout zu erhalten, ohne dessen Komplexität übernehmen zu müssen. Es ordnet Komponenten entlang einer vorgegebenen Linie an, wobei folgende Möglichkeiten zur Verfügung stehen: X_AXIS: Die Komponenten werden horizontal von links nach rechts ausgelegt. Y_AXIS: Die Komponenten werden vertikal von oben nach unten ausgelegt. LINE_AXIS: Horizontal, aber abhängig von der ComponentOrientation des Containers. PAGE_AXIS: Abhängig von der ComponentOrientation (horizontal, vertikal, rechts, links). Das BoxLayout versucht, die Komponenten gemäss der preferredsize anzuordnen. Füllen die Komponenten nicht den gesamten zur Verfügung stehenden Platz aus, wird die Ausrichtung durch das alignmentx bzw. alignmenty der Komponenten bestimmt. Um die Verwendung des BoxLayout zu vereinfachen, gibt es die Klasse Box, die eine Komponente mit einem BoxLayout darstellt Neben den oben erwähnten Möglichkeiten des BoxLayouts bietet die Box drei Konstrukte, um unsichtbare Komponenten zur Ausrichtung zu verwenden: Rigid Area: Eine unsichtbare Komponente mit fixer Grösse. Glue: Ein Glue kann entweder horizontal oder vertikal ausgerichtet sein und nimmt sämtlichen überschüssigen Platz ein. Box.Filler: Ein Box.Filler ist eine nach eigenen Angaben gestaltete, flexible unsichtbare Komponente, welche sich gemäss der angegebenen Dimension skaliert. 28

29 Jede Gruppe besetzt eine Tabellen-Zelle. Komponenten werden zuerst zeilenweise, dann spaltenweise zugeordnet. AdressPanel() { GroupLayout layout = new GroupLayout(this); this.setlayout(layout); layout.setautocreategaps(true); layout.setautocreatecontainergaps(true); layout.sethorizontalgroup(layout.createsequentialgroup() // Definition der.addgroup(layout.createparallelgroup(trailing). // Spalten.addComponent(name).addComponent(geschlecht).addComponent(strasse).addComponent(gebDatum)) );... layout.setverticalgroup(layout.createsequentialgroup() // Definition der.addgroup(layout.createparallelgroup(baseline) // Zeilen.addComponent(name).addComponent(nameField).addComponent(vorname).addComponent(vornameField)) //... analog ); 29

30 Forms Layout Manager Der JGoodies Forms Layout Manager kann ebenfalls sehr komplexe Anordnungen verwalten, ohne dass der Code durch viele Platzierungs-Anweisungen belastet wird. Der Layout Manager von JGoodies bietet eine ähnliche Flexibilität wie ein GridBagLayout, verschmutzt den Code aber viel weniger durch Platzierungs-Anweisungen. Die Initialisierung geschieht in einem (etwas komplizierten) Konstruktor, danach werden die Komponenten einfach der Reihe nach in die Zeilen eingefügt. public LayoutTest() { 45 FormLayout layout = new FormLayout( "right:max(40dlu;pref), 3dlu, fill:max(4dlu;pref), 2dlu, right:max(10dlu;pref), 2dlu, 27dlu:grow, 7dlu, " + // 1st major column "right:max(40dlu;pref), 3dlu, 80dlu:grow", // 2nd major column ""); // add rows dynamically DefaultFormBuilder builder = new DefaultFormBuilder(layout); builder.setdefaultdialogborder(); builder.appendseparator("adresse"); builder.append("name", new JTextField(20), 5); builder.append("vorname", new JTextField()); builder.nextline(); builder.append("strasse", new JTextField(), 5); builder.nextline(); builder.append("plz", new JTextField(4)); builder.append("ort", new JTextField(10)); String[] str = {"Schweiz","Deutschland"; builder.append("land", new JComboBox(str)); builder.nextline(); builder.appendseparator("versand");... Vollständiges Beispiel unter 30

31 2.10 Wie wählt man den Layout Manager In erster Linie soll nicht das Aussehen die Anzahl verwendeter Container bestimmen, sondern die Anwendung. Versuchen Sie also nicht, verschiedenste Probleme in der gleichen Panel-Klasse zu lösen, nur weil deren Ausgabe auf der Oberfläche nebeneinander zu liegen kommen muss. Verwenden Sie lieber mehrere Panels, um die Oberfläche sauber zu gruppieren und versuchen Sie nicht, das ganze Layout auf einen Schlag zu organisieren. Wir betrachten anhand verschiedener Szenarios verschiedene Lösungsmöglichkeiten. 1. Es gibt eine Hauptkomponente, welche so viel Platz wie möglich einnehmen soll. --> BorderLayout, einfügen im CENTER. Die restlichen Komponenten an den Rändern. 2. Es gibt eine Anzahl Komponenten, welche in einer Zeile (oder Spalte) alle gleich gross angeordnet werden sollen. --> GridLayout. 3. Die Komponenten sollen alle jeweils so klein wie möglich in einer Zeile dargestellt werden.--> ein JPanel mit FlowLayout. 4. Es gibt eine Anzahl Komponenten, welche in einer Zeile (oder Spalte) angeordnet werden sollen, sie sind nicht alle gleich gross, oder sie haben verschieden grosse Abstände --> BoxLayout, ev. durch Zuhilfenahme von unsichtbaren Komponenten für die grossen Abstände. 5. Die Komponente muss je nach Zustand (oder Benutzereingabe) verschiedene, vielleicht unterschiedlich grosse oder eine verschiedene Anzahl von Komponenten anzeigen. --> CardLayout. Dabei gibt es pro Zustand je eine Karte. 6. Die Komponente beinhaltet ein Formular (Name, Vorname, Adresse,...plus je ein TextFeld). --> SpringLayout, FormsLayout(JGoodies) GridBagLayout oder eigener Layout Manager. 7. Die Komponente enthält verschiedenste Komponenten, welche unterschiedlich gross sind und unterschiedlich stark wachsten sollen. --> Aufteilen in verschiedene Panels, welche verschiedene Layout Manager benutzen, FormsLayout oder GridBagLayout. 8. Relativ einfaches Layout, welches aber durch keinen Layout Manager optimal verwaltet wird --> eigenen Layout Manager schreiben. 31

32 3 Das Java Event Handling Die Interaktion mit einem GUI geschieht über Events. Ein Event ist eine Aktion, welche durch einen Benutzer initialisiert wurde, sei es durch Drücken eines Buttons, Verschieben der Maus, Drücken einer Taste... Damit Java auf die Aktion eines Benutzers reagiert, muss zuerst ein Event Listener registriert und ein zugehöriger Event Handler implementiert werden. Damit ein Event Listener über die eingegangenen Events benachrichtigt wird, muss er sich bei der entsprechenden Event Source registrieren. Dies geschieht durch Aufruf der addxxxlistener-methode, wobei»xxx«jeweils für den entsprechenden Event-Typ steht. Auszug aus dem java.awt.event Package AWTEvent Die wichtigsten AWT Events ActionEvent AdjustmentEvent ComponentEvent FocusEvent InputEvent PaintEvent WindowEvent KeyEvent MouseEvent MouseWheelEvent 4 Alle AWTEvent-Objekte bieten die Methoden isconsumed() liefert true, falls das Event bereits verarbeitet wurde consume(): verarbeitet (löscht) das Event, falls möglich. getid(): liefert die ID des Ereignisses getsource(): gibt die EventSource zurück. 32

33 Jeder Event-Klasse entspricht ein Listener Interface. Die entsprechenden EventListener <<ActionListener >> <<AdjustmentListener >> <<ComponentListener >> <<EventListener >> <<FocusListener >> <<KeyListener >> <<MouseListener >> <<MouseMotionListener >> << MouseWheelListener >> <<WindowListener >> 5 Jeder Event Listener ist spezialisiert auf gewisse Arten von Events (Mouse Event, Key Event, Action Event...). Der Event Handler ist dann die Methode, welche beim Eintreffen des entsprechenden Events ausgeführt wird. Auszug aus dem Swing Event Package EventObject Die wichtigsten Klassen aus javax.swing.event CaretEvent ChangeEvent ListSelectionEvent MenuEvent TableModelEvent TreeModelEvent UndoableEditEvent 6 Dies sind die wichtigsten Events, welche mit dem Swing Paket neu verfügbar sind. Für die Swing Komponenten können aber auch die üblichen AWT-Events verwendet werden. 33

34 Die entsprechenden EventListener <<EventListener >> << CaretListener >> << ChangeListener >> << DocumentListener >> << ListSelectionListener >> << MenuListener >> << TableModelListener >> << TreeModelListener >> << UndoableEditListener >> Nicht jedes Event kann an jede Event Source verknüpft werden. Die folgende Tabelle zeigt einige Swing Komponenten und mögliche Events. Prinzipiell gilt: Die Komponente erzeugt diejenigen Events, für welche eine Methode addeventlistener existiert. Component action caret change undoable edit Event Listener abstract button x x x combo box x x frame x menu MenuListener menu item x MenuKeyListener tabbed pane x table x TableModelListener text area x x text field x x x tree TreeModelListener item 7 list selection window other 34

35 3.1 Key Events Das Verhalten der Applikation ist unterschiedlich, abhängig vom implementierten Event Handler (keypressed, keytyped, keyreleased). KeyPressed wird sehr früh, noch bevor der Buchstabe im Textfeld angekommen ist, aufgerufen. keytyped wird als zweites ausgeführt. Erst wenn die Eingabe abgeschlossen ist, wird keyreleased ausgeführt. public class TextEvent2 extends JFrame implements KeyListener { private JTextField text; private JLabel output; TextEvent2(){ text = new JTextField(); output = new JLabel(); text.addkeylistener(this); add(text, BorderLayout.NORTH); add(output, BorderLayout.SOUTH); public void keypressed(keyevent e) { output.settext("eingabe: " + text.gettext()); public void keytyped(keyevent e) {... public void keyreleased(keyevent e) {... public static void main(string argv[]) { //main 35

36 3.2 Action Events Verknüpfen eines Events mit einem Button Ein Button-Click generiert ein ActionEvent. Falls ein ActionListener an diesen Button registriert wurde, wird dann automatisch dessen actionperfomed Methode ausgeführt. Das Registrieren eines ActionListeners an einen Button geschieht mit der Methode addactionlistener. public class ButtonEvent extends JFrame { private JPanel panel; ButtonEvent() { panel = new JPanel(); add(panel); JButton b = new JButton("Change Color"); b.addactionlistener(new ColorAction()); panel.add(b); class ColorAction implements ActionListener public void actionperformed(actionevent event) { if (panel.getbackground() == Color.red) panel.setbackground(color.blue); else panel.setbackground(color.red); public static void main(string[] args) {... Zum Change Color -Button wird der ActionListener ColorAction registriert. Die actionperformed Methode des ColorAction wird jedes Mal aufgerufen, wenn jemand auf den Button drückt. Die actionperformed Methode wechselt bei jedem Aufruf die Hintergrundfarbe des Panels zwischen rot und blau. Verknüpfen von ActionEvents mit einem TextField Im Gegensatz zum vorherigen Beispiel, ist hier die Klasse TextEvent1 selber ein ActionListener. public class TextEvent1 extends JFrame implements ActionListener { private JLabel output; private JTextField text; TextEvent1() { text = new JTextField(); output = new JLabel(); text.addactionlistener(this); add(text, BorderLayout.NORTH); add(output, public void actionperformed(actionevent e) { output.settext("eingabe: " + text.gettext());... Dies hat den Vorteil, dass keine separate Klasse implementiert werden muss. Der Nachteil ist, dass es nur eine actionperformed Methode gibt. Bei verschiedenen Event Sources muss daher in der actionperformed Methode zuerst mit Hilfe von getsource() herausgefunden werden, wer/was das Event ausgelöst hat. 36

37 3.3 Anonyme Klassen Anonyme Klassen sind ein Spezialfall von inneren Klassen. Sie haben keinen Namen, werden aber normal durch eine new-anweisung definiert und erzeugt. Sie dienen dazu, kleine»einmal«-objekte mit einfachen Aufgaben zu definieren, wie sie eben zum Beispiel für Event Listener gebraucht werden. Da die Instanz nur genau an dieser Stelle verwendet wird, würde ein Klassenname die Lesbarkeit des Codes nicht verbessern. Anonyme Klassen sollten aber nur eingesetzt werden, wenn die Implementierung kurz und einfach ist. Wenn die Implementierung mehr als fünf bis sechs Anweisungen hat oder nicht intuitiv zu verstehen ist, sollte besser eine lokale Klasse verwendet werden. Beispiele von anonymen Klassen finden Sie in den Beispielen MouseEvent, MenuEvent und WindowAdapter. 3.4 Adapter Klassen Für alle EventListener Interfaces, welche mehr als eine EventHandler Methode verlangen, gibt es in Swing eine entsprechende Event Adapter Klasse: Die wichtigsten Adapter Klassen: FocusAdapter für FocusListener KeyAdapter für KeyListener MouseAdapter für MouseListener MouseMotionAdapter für MouseMotionListener WindowAdapter für WindowListener Die Adapter Klassen sind abstract und implementieren leere Methoden für alle Methoden des Interfaces. Beim Ableiten von einer Adapter Klasse müssen wir nur die Methoden überschreiben, die wir tatsächlich brauchen. 37

38 Mouse Events 3.5 Mouse Events Es gibt drei Sorten von MouseListeners: MouseListener public void mouseclicked( MouseEvent e ); public void mouseentered( MouseEvent e ); public void mouseexited( MouseEvent e ); public void mousepressed( MouseEvent e ); public void mousereleased( MouseEvent e ); MouseMotionListener public void mousedragged( MouseEvent e ); public void mousemoved( MouseEvent e ); MouseWheelListener public void mousewheelmoved( MouseWheelEvent e ); 13 Das MouseListener Interface verlangt fünf zu überschreibende Methoden. Oft wird daher von der entsprechenden MouseAdapter Klasse abgeleitet. Da der Code kurz ist, wird hier eine anonyme Klasse als EventListener benutzt. public class MEvent extends JFrame { private int xval = 0, yval = 0; MEvent(){ addmousemotionlistener( new MouseMotionAdapter() { public void mousedragged( MouseEvent e ) { xval = e.getx(); yval = e.gety(); repaint(); ); public void paint( Graphics g ) { g.filloval( xval, yval, 3, 3 ); public static void main(string args[]) {... 38

39 3.6 Events auf Menu Items JMenuItems sind AbstactButtons. Das Event Handling funktioniert darum genau gleich wie für gewöhnliche Buttons. Hier ein Beispiel mit einem anonymen ActionListener. public class MyMenu extends JFrame { public MyMenu() { // create background panel JPanel panel = new JPanel(); add(panel); // create menubar JMenuBar bar = new JMenuBar(); // create the file menu JMenu filemenu = new JMenu("File"); JMenuItem quit = new JMenuItem("Quit"); filemenu.add(quit); quit.addactionlistener(new ActionListener() public void actionperformed(actionevent e) { System.exit(0); ); Event Listener mit Parameter Beim Registrieren eines ActionListeners können wir eine zusätzliche Information weitergeben, indem wir einen Konstruktor mit Parameter implementieren. So können wir zum Beispiel mitteilen, welches JMenuItem gewählt wurde. public class ParameterEvent extends JFrame { private JRadioButtonMenuItem red, blue; ParameterEvent() { JMenuBar bar = new JMenuBar(); red = new JRadioButtonMenuItem("Red"); blue = new JRadioButtonMenuItem("Blue"); JMenu colormenu = new Jmenu("Color"); colormenu.add(red); colormenu.add(blue); ButtonGroup bg = new ButtonGroup(); bg.add(red); bg.add(blue); red.addactionlistener(new ColorAction(Color.red)); blue.addactionlistener(new ColorAction(Color.blue)); bar.add(colormenu); setjmenubar(bar); class ColorAction implements ActionListener { Color color; ColorAction(Color color) { this.color = color; public void actionperformed(actionevent e) { setbackground(color);

40 3.8 Window Events WindowOpened kann zum Initialisieren des GUI (zum Beispiel zum Setzen des Fokus in die gewünschte Komponente), WindowClosed kann verwendet werden, um andere benutzte (nicht GUI-) Ressourcen aufzuräumen. Activated/Deactivated wird aufgerufen, sobald das Fenster den Fokus hat (oder verliert). Iconified/Deiconified wird aufgerufen, wenn das Fenster minimiert wird / wieder normale Grösse erhält. Da es so viele Methoden zu implementieren gibt wird für Window Events normalerweise von der Klasse WindowAdapter abgeleitet. Das folgende Beispiel setzt in einem (sich öffnenden) Swing-Fenster den Keyboard-Fokus an die richtige Stelle (d.h. in das JTextPane). public class MyFrame extends JFrame { private JTextPane tp; public MyFrame() { tp = new JTextPane(); add(tp); add(new JButton("Save"), BorderLayout.NORTH); addwindowlistener( new WindowAdapter() { public void windowopened( WindowEvent e ) { tp.grabfocus(); ); static public void main( String args[] ) { MyFrame mf = new MyFrame(); mf.setsize( 200, 120 ); // Beenden der Applikation, wenn dieses Frame geschlossen wird. mf.setdefaultcloseoperation(jframe.exit_on_close); mf.setvisible( true ); 40

41 3.9 Die Klasse AbstractAction Die Klasse AbstractAction wird benutzt, wenn mehrere Komponenten (z.b. Menu und Toolbar) dieselbe Aktion auslösen sollen. Ausserdem können alle mit dieser Action verbundenen Komponenten simultan enabled/disabled werden. AbstractAction cutaction = new CutAction(textArea); EditMenu() { // create edit menu super("edit"); add(cutaction); add(copyaction); MyToolBar() { // create toolbar add(cutaction); add(copyaction); class CutAction extends AbstractAction { CutAction(JTextPane text) { super("cut", new ImageIcon("Cut.gif")); public void actionperformed(actionevent e) { text.cut(); 19 Die Klasse AbstractAction ist abstrakt, es muss die Methode actionperformed implementiert werden. Beim Einfügen (add) einer AbstractAction in ein JMenu, wird ein JMenuItem (mit Event-Handling) erzeugt und zurückgegeben. JMenuItem cutitem = editmenu.add( cutaction ); Beim Einfügen derselben AbstractAction in ein JToolBar, wird ein entsprechender JButton (mit EventHandling) erzeugt und zurückgegeben. JButton cutbutton = toolbar.add( cutaction ); AbstractAction können aktiv/inaktiv gesetzt werden (setenabled(true/false)). Damit werden automatisch die daraus erzeugten MenuItems (Buttons) aktiv/inaktiv gesetzt. Beispiel: MyEditorWithActions mit CutAction und PasteAction unter ~amrhein/swing/beispiele/events 41

42 Anonyme Klasse, innere Klasse, Interface Vorteile und Nachteile Den EventListener implementieren kann die (Nutzer-) Klasse selbst welche das Interface implementiert oder von Adapter ableitet eine separate Klasse welche das Interface implementiert oder von Adapter ableitet eine innere Klasse welche das Interface implementiert oder von Adapter ableitet eventuell anonym Beim Design des Event Handling gilt es zu entscheiden, in welcher Art es umgesetzt werden soll. Das Benutzen von inneren Klassen führt zu kompakterem Code, sie sind aber schlechter wiederverwendbar. Separate Klassen sind flexibler einsetzbar, sind aber umständlicher und verursachen mehr Code. Das Interface zu implementieren hat den Vorteil der Mehrfach-Vererbung. Allerdings müssen dafür alle Interface-Methoden selber implementiert werden. Die Adapter-Klassen nehmen uns da einen Teil der Arbeit ab. Da es aber Klassen sind, kann eine Klasse zum Beispiel nicht von JFrame und WindowAdapter gleichzeitig ableiten. 42

43 4 Design Pattern für Graphische Benutzeroberflächen Das Observer Pattern (auch Publisher/Subscriber Pattern) teilt eine Applikation mit GUI auf in - die sichtbaren Teile (GUI, Daten- Anzeige auf dem Bildschirm,...) --> Observer - und den eigentlichen Datenteil (Applikationsteil) --> Observable. 4.1 Das Observer Design Pattern Das am meisten benutzte Pattern für Applikationen mit GUI ist das Model-View-Controller Pattern (MVC). In Java wird das MVC-Pattern indirekt durch das Observer-Pattern unterstützt. Jedes Observable kann einen oder mehrere Observer haben. Sobald ein Observable seinen Zustand ändert, wird die update-methode aller Oberserver aufgerufen Die update Methode hat die Signatur: public void update(observable o, Object m) das erste Argument ist der this-pointer auf das Observable (der Absender des Aufrufs), das zweite Argument kann benutzt werden, um Daten oder Informationen zu übermitteln. observable addobserver(observer) registriert bei einem Observable einen neuen Observer. Das Observable führt eine Liste, in der sich die Observer mit der Methode addobserver() eintragen können. setchanged() gibt an, dass sich der Datenteil des Observable geändert hat. Jedes Mal wenn sich im Observable die Daten geändert haben (und der Zustand wieder konsistent ist) muss im Observable die Methode setchanged() aufgerufen werden. notifyobservers() Damit die Observer benachrichtigt werden, ruft der Observable die Methode notifyobservers() auf. Diese geht durch die Liste aller Obervers und ruft (falls haschanged() true zurück gibt) deren update Methode auf. Falls im Observable eine Daten-Änderung geschehen ist (vorgängig setchanged() aufgerufen wurde) werden mit notifyobservers alle Observer benachrichtigt. 43

44 Datenänderung im Observer Pattern: ein einfaches Counter-Beispiel Das Observable: Push Variante Das Observable kann im Aufruf von notifyobservers ein Argument vom Typ Object mitgeben: notifyobservers(object arg). Dadurch kann der Observable dem Observer beliebige Informationen liefern (z.b. welche Daten geändert wurden, der neue Wert der Daten,...) class MyModel extends Observable implements Runnable { private int counter; private Thread thread; MyModel() { counter = 0; thread = new Thread(this); thread.start(); public void run() { while (true) { try{ Thread.sleep(500); catch... increasecounter(); public void increasecounter() { counter = counter + 1; setchanged(); notifyobservers(counter); 44

45 Der Observer: Beim Aufruf von update gibt das Observable seinen this-pointer als erstes Argument mit. Daraus kann der Observer extrahieren, wer die update-methode aufgerufen hat. Das zweite Argument von update enthält diejenigen Daten arg, welche vorher in notifyobservers( Object arg ) übergeben wurden. public class MyObserver extends JFrame implements Observer { private JLabel label; MyObserver() { label = new JLabel("0", SwingConstants.CENTER); add(label); public void update(observable ob, Object arg){ label.settext( arg.tostring() ); Das Main Programm An einer Stelle müssen wir den Observer beim Observable anmelden. Dies kann im einfachsten Fall im Main Programm geschehen, da dort beide Objekte bekannt sind. class Main { public static void main(string argv[]) { MyModel mm = new MyModel(); MyObserver mo = new MyObserver(); mm.addobserver(mo); mo.setsize(150, 70); mo.setvisible(true); Das Observable: Pull Variante Falls wir die neuen Daten nicht mit Hilfe von notifyobservers verschicken wollen, brauchen wir stattdessen im Observable eine get-methode (hier getcounter), mit welcher die Observer die neuen Werte abholen können. public void increasecounter() { counter = counter + 1; setchanged(); notifyobservers(); public int getcounter() { return counter; Der Observer: Pull Variante In der update Methode des Observers können dann die Werte nicht direkt aus dem zweiten Argument entnommen werden. Wir müssen den neuen Wert des counter (mit getcounter) beim Observable abholen. public void update(observable ob, Object arg) { MyModel m = (MyModel) ob; label.settext(string.valueof( m.getcounter() )); 45

46 Data Transfer Objects Wenn verschiedene Informationen gleichzeitig eine Änderung erfahren ist es vor allem bei der Push Variante nötig, die Schnittstelle zwischen dem Model-Teil (Applikation) und dem GUI (Observer) genau zu definieren. In grösseren Projekten, wo verschiedene Entwickler den Applikationsteil und den GUI Teil implementieren, ist dies sogar stark empfohlen. Die Schnittstellen-Definition geschieht üblicherweise mit Hilfe eines Data Transfer Objects (oder Value Object -> siehe Data Transfer Object Design Pattern). Data Transfer Objects haben normalerweise keine andere Aufgabe als das Speichern und zur Verfügung stellen der zu übergebenden Informationen. public class ValueObject { private int counter; private boolean state; public ValueObject(int c, boolean s) { counter = c; state = s; public int getcounter() { return counter; public boolean isstate() { return state; Im Observable wird das ValueObject benutzt, um die Daten allen Observers zu übergeben. public void increasecounter() { counter =... state =... setchanged(); notifyobservers( new ValueObject(counter, state)); Der Observer kann dann in der update-methode die Informationen aus dem ValueObject verwenden. public void update( Observable ob, Object arg) { // unwrap data transfer object ValueObject vo = (ValueObject)arg; counterlabel.settext( String.valueOf(vO.getCounter())); statelabel.settext( (vo.isstate())? "Running" : "Stopped"); 46

47 4.2 Das Model-View-Controller Controller Design Design Pattern Pattern Drei Teile Benutzer Ausgabe Eingabe View Controller Model Model View Controller Daten und ihre Verarbeitung Präsentation der Daten Benutzer-Eingaben Entkoppelung der verschiedenen Teile der Applikation mehr Flexibilität Das MVC Pattern ist eine Möglichkeit, eine Applikation in drei Teile zu unterteilen. Es entstand ursprünglich aus der Idee, das Input-Processing-Output Schema in den GUI Bereich zu übertragen: Input --> Processing --> Output Controller --> Model --> View Das Modell dient zur Daten Verarbeitung und benachrichtigt bei Daten Änderungen die Observer. Es enthält alle zusammengehörigen Daten und die dazugehörende Funktionalität. Falls es verschiedene unterschiedliche Datenbereiche gibt, sollten sie in verschiedenen Modellen gehalten werden. Die Aufgabe des View besteht darin, die Daten auf dem Bildschirm auszugeben. Jedes View gehört nur zu einem Modell und weiss, wie es die Daten darstellen muss. Immer wenn das Modell sich ändert, zeichnet sich das View automatisch neu. Zu einem Modell können mehrere Views gehören, und jedes View kann die Daten des Modells anders darstellen. Der Controller ist das Mittel, mit welchem der User mit der Applikation interagiert. Ein Controller erhält User Eingaben und sendet diese dem Modell. Der Controller erhält vom User zum Beispiel ein Mouse Klick und weiss, wie er darauf MVC reagieren Design muss. Pattern 14 ASD: 95 CJA: 64 FBU: 109 JPQ: 152 SGD: ASD CJA FBU JPQ SGD 95 15% 64 10% % % % View 1: Pie Chart View 2: Bar Chart View 3: Spread Sheet Zur Präsentation eines Modells werden ein oder mehrere Views erzeugt. Jedes View muss sicherstellen, dass es den aktuellen Zustand des Models wiedergibt. Jedes View meldet sich darum beim Modell als Observer an. Wenn sich das Modell ändert, benachrichtigt es alle Observer. Dadurch erhalten die Views die Möglichkeit, sich den neuen Daten anzupassen

48 Class Responsibility Cards Model Stellt den funktionalen Teil der Applikation zur Verfügung Verwaltet die Daten Registriert die angemeldeten Views und Controller Benachrichtigt die Views über Daten-Änderungen Controller Akzeptiert User-Eingaben und sendet sie dem Model als Requests Implementiert eine update() Prozedur (falls nötig) Model View View Controller View Stellt die nötigen Informationen dar Implementiert eine update() Prozedur Liest vom Model die neuen Daten Model Controller Controller Controller 16 In Java wird das MVC nicht aktiv (zum Beispiel durch Interfaces) unterstützt. Das MVC Pattern muss darum mit Hilfe des Observer Patterns implementiert werden. MVC mit Observable und Observer Das Klassendiagramm: Der Controller muss einerseits ein Observer sein, anderseits auch als ActionListener agieren, damit er immer dem Zustand des Models angepasst werden und auch User-Eingaben entgegen nehmen kann. Das Main erzeugt die verschiedenen Teile und registriert View und Controller als Observer. 48

49 Initialisierung im MVC Pattern Falls das Main Programm alle Komponenten (Model, View und Controller) erzeugt, kann dieses sehr einfach alle Observer beim Observable (Model) anmelden (addobserver). Der Controller benötigt eine Referenz auf das Model, damit es bei User Aktionen die entsprechenden Requests an das Model schicken kann. Die Referenz auf das Modell wird hier am einfachsten im Konstruktor des Controllers gleich mitgegeben. Event Handling im MVC Pattern Sobald beim Controller ein User Event eintrifft, führt dies (normalerweise) zu einer Daten Änderung im Modell. Die setdata() Methode wird abgeschlossen durch setchanged(), notifyobservers(). Dies bewirkt, dass alle update-methoden der angemeldeten Observer aufgerufen werden. 49

50 Beispiel: Ein einfacher Zähler Als Beispiel betrachten wir eine Applikation mit einem Push Button und einem Zähler, welcher die Anzahl Klicks auf den Button zählt. Das Model: Observable Das Modell ist fast das gleiche wie vorher. Der counter zählt die Anzahl Button Klicks. import java.util.observable; class MyModel extends Observable { private int counter; MyModel() { counter = 0; public void increasecounter() { counter = counter + 1; setchanged(); notifyobservers(); public int getcounter() { return counter; View: Observer Die Klasse View muss sicherstellen, dass sie immer den aktuellen Zustand des Observables (also den Wert des counters) anzeigt. Dafür implementiert sie eine update Methode, welche jeweils den neuen Zählerstand aus dem MyModel holt und im View anzeigt. import java.util.*; import javax.swing.*; public class MyView extends JPanel implements Observer { JLabel label; MyView() { // create new label label = new JLabel("0"); add(label); public void update(observable ob, Object arg) { MyModel m = (MyModel) ob; // read new value of counter label.settext("" + m.getcounter()); 50

51 Der Controller: Observer und ActionListener Zum AddValue -Button muss ein ActionListener registriert werden, dessen Event Handler jeweils den counter um 1 erhöht. Die update Methode des Controllers deaktiviert den Push-Button, sobald der Wert des counters die Zahl 10 übersteigt. import java.awt.event.*; import java.util.*; import javax.swing.*; public class MyController extends JPanel implements Observer, ActionListener { private JButton push; private MyModel model; MyController(MyModel m) { model = m; push = new JButton("Add Value"); push.addactionlistener(this); add(push); public void actionperformed(actionevent e) { model.increasecounter(); public void update(observable ob, Object arg) { if (model.getcounter() > 9) push.setenabled(false); Das MainFrame: Controller und View müssen beim Model (Observable) angemeldet werden. Dies geschieht mit dem Aufruf addobserver(observer). import java.awt.*; import javax.swing.jframe; public class MainFrame extends JFrame { MainFrame() { setlayout(new GridLayout(2, 1)); MyModel model = new MyModel(); MyView mv = new MyView(); MyController mc = new MyController(model); setdefaultcloseoperation(jframe.exit_on_close); add(mc); add(mv); model.addobserver(mv); model.addobserver(mc); setbounds(200,200,150,110); static public void main(string args[]) { (new MainFrame()).setVisible(true); 51

52 4.3 Das Model View Presenter Pattern (MVP) Das MVP Pattern hat sich aus dem Model View Controller Pattern entwickelt und beschreibt einen anderen Ansatz, um das Modell und die View voneinander zu trennen und über einen Presenter zu verbinden. Die Vorteile im Vergleich zum MVC Pattern sind die einfachere Testbarkeit und die strengere Trennung der einzelnen Komponenten. Gleich wie MVC basiert MVP auf drei Komponenten: Modell Model Ansicht View Präsentator Presenter Model Das Model stellt die Geschäftslogik dar. Über das Modell muss jedoch alle Funktionalität erreichbar sein, um die View betreiben zu können. Die Steuerung des Modells erfolgt durch den Präsentator. Das Modell selbst kennt weder die View noch den Presenter. View Die View enthält keinerlei steuernde Logik und ist nur für die Darstellung und die Ein- und Ausgabe der Daten zuständig. Sie hat keinen Zugriff auf die Funktionalität des Präsentators oder auf das Model. Die Steuerung der View geschieht im Presenter. Presenter Der Presenter ist das Bindeglied zwischen Model und View. Er steuert die logischen Abläufe zwischen den beiden anderen Komponenten und sorgt dafür, dass die View ihre Aufgaben erfüllen kann. Damit MVP seine Vorteile gegenüber MVC entfalten kann, werden für Model und View jeweils Interfaces verwendet. Die Interfaces definieren den Aufbau der beiden Komponenten und der Presenter verknüpft die Interfaces miteinander. Dies stellt die Austauschbarkeit und Wiederverwertbarkeit des Models und der View sicher. 52

53 4.4 Das Command Processor Design Pattern Ein wichtiges Konzept aus der Ergonomie lautet: Jede Benutzeraktion ist invertierbar (oder der Benutzer erhält eine Warnung). Das Command Processor Design Pattern trennt User Requests und deren Ausführung. Eine Command Processor Komponente verwaltet die Requests als separate Objekte, ist für deren Ausführung zuständig und kann zusätzliche Services wie zum Beispiel Undo / Redo oder Logging (für Test Prozesse) anbieten. Das Command Processor Design Pattern kapselt die User Requests in einem Command Objekt. Wenn der Benutzer eine Funktionalität der Applikation aufruft, wird dieser Request in ein Command Objekt verpackt, im Command Prozessor gespeichert und dann vom Command Prozessor gestartet. Class Responsibility Cards Command Kapselt eine Befehlsaufforderung (mit Argumenten). Benutzt den Supplier, um die Befehle auszuführen. Command- Processor Supplier (Model) CommandProcessor Aktiviert die die Befehlsausführung Verwaltet die die (Liste (Liste der) der) Command-Objekte Bietet Bietet zusätzliche Dienste an an für für Undo/Redo, Command 28 Das Command Objekt speichert alle Informationen, welche nötig sind, um den User Request auszuführen. Der Command Processor verwaltet die Command Objekte (zum Beispiel in einer Liste) und ist zuständig dafür, dass der Request ausgeführt wird. 53

54 Die Beziehungen zwischen den Komponenten Der Controller nimmt die Benutzereingaben (User Requests) entgegen und verpackt sie zu einem Command Objekt. Das Command Objekt speichert alle nötigen Informationen (cmd_args). Ausserdem weiss der Command, wie er sich selber ausführen kann (do_it). Diese Command Objekte werden im CommandProcessor in einer Liste (cmdlist) abgespeichert. Der Ablauf des Request-Handlings als Sequenzdiagramm Der Controller erzeugt ein Command Objekt. Dieses speichert alle, für das (Wieder-) Ausführen des Kommandos nötigen Informationen (normalerweise die Parameter der Eingabe). Das Command Objekt wird dann an den Command-Processor übergeben (submit). Der Command Processor speichert das neue Command Objekt in der Command Liste und aktiviert die eigentliche Befehlsausführung (do_it), welche die Datenänderung im Modell ausführt (setdata). Sobald der Benutzer auf den Undo Knopf drückt wird im Command-Processor das letzte/neueste Element aus der Command Liste geholt und davon dessen undo_it() Methode aufgerufen. Dies führt dazu, dass die letzten Daten Änderungen im Model wieder rückgängig gemacht werden. Das Command-Objekt kann dann gelöscht werden. Diese Daten Änderung im Model bewirkt (gemäss Observer Design Pattern), dass alle Observer ein update ausführen. 54

55 4.5 Drawing Application Beispiel Damit die zuletzt gezeichnete Linie wieder gelöscht werden kann (undo), wird der Zeichnungsbefehl in einem DrawingCommand Objekt gespeichert. Die Funktionsweise des Command Processor Design Pattern betrachten wir anhand dieses kleinen Zeichnungs-Programms. Das vollständige Beispiel unter Beispiele/Pattern/CommandProcessor Das Zeichenfenster: View und Controller public class DrawWindow extends JFrame implements Observer { private CommandProcessor cmdproc; private int xcoor, ycoor; public DrawWindow( ) {... cmdproc = new CommandProcessor();... class DrawPanel extends JPanel { DrawPanel() { addmouselistener(new MouseHandler()); addmousemotionlistener(new MouseMotionHandler()); public void paintcomponent(graphics g){ super.paintcomponent(g); LinkedList<Line> list = drawing.getlines(); for(line l: list){ l.draw(g); class MouseHandler extends MouseAdapter { public void mousepressed(mouseevent e) { xcoor = e.getx(); ycoor = e.gety(); // actual mouse position line = new Line(xCoor, ycoor, xcoor, ycoor); public void mousereleased(mouseevent e) { DrawingCommand dcmd = new DrawingCommand(line, drawing); cmdproc.submit(dcmd); class MouseMotionHandler extends MouseMotionAdapter { public void mousedragged(mouseevent e) { // delete old line line.drawxor(getgraphics()); // draw new line line.reshape(e.getx(), e.gety()); line.drawxor(getgraphics()); Sobald die Maus gedrückt wird (mousepressed), kann eine (leere) Linie erzeugt werden. Diese wird im Verlauf des Linienzeichnens fortlaufend korrigiert (mousedragged). 55