26) Architektur interaktiver Systeme

Transkript

1 26) Architektur interaktiver Systeme Prof. Dr. rer. nat. Uwe Aßmann Institut für Software- und Multimediatechnik Lehrstuhl Softwaretechnologie Fakultät für Informatik TU Dresden Version , Übersicht über die Architektur 2. Einführendes Beispiel für Java-AWT-Oberflächen 3. Ereignisgesteuerter Programmablauf Play-In 4. Benutzungsoberflächen mit Swing Softwaretechnologie, Prof. Uwe Aßmann Technische Universität Dresden, Fakultät Informatik 1

2 Andere Literatur [Herrmann] M. Veit, S. Herrmann. Model-View-Controller and Object Teams: A Perfect Match of Paradigms. Aspect-Oriented System Development (AOSD) 2003, ACM Press Mike Potel. MVP: Model-View-Presenter The Taligent Programming Model for C++ and Java. VP & CTO Taligent, Inc. ftp://www6.software.ibm.com/software/developer/library/mvp.pdf F. Buschmann. N. Meunier, H. Rohnert, P. Sommerlad, M. Stal. Pattern-orientierte Software-Architektur. Addison-Wesley. Entwurfsmuster und Architekturstile. MVC, Pipes, u.v.m. html web frameworks STRUTS Web Application Component Toolkit 2

3 26.1 Kopplung von Graphischen Benutzeroberflächen (GUI) und Anwendungslogik.. Bringe Ereignisse, auslösende Fensterelemente (Sicht) und Modell zusammen Softwaretechnologie, Prof. Uwe Aßmann Technische Universität Dresden, Fakultät Informatik 3

4 4 Schichtenarchitektur Benutzungsoberfläche - Teile des Kontextmodells Window Button Menu Fachliches Modell (Anwendungslogik) Datenhaltung Teammitglied Teambesprechung z.b. relationale Datenbank Ablaufsteuerung

5 5 Schichtenarchitektur Graphische Benutzungsoberfläche (Fensteroberfläche, Widget-Hierarchie) Window Button Menu Play-In (asynchron, push) Fachliches Modell (Anwendungslogik) Controller-Schicht Teammitglied Play-out (synchron, aber multiple Sichten und pull-steuerung) Teambesprechung Unsichtbare Ablauf- Steuerung (Ereignis- Verwaltung)

6 Graphische Benutzungsoberflächen Graphical User Interfaces (GUI) 1980: Smalltalk-80-Oberfläche (Xerox) 1983/84: Lisa/Macintosh-Oberfläche (Apple) 1988: NextStep (Next) 1989: OpenLook (Sun) 1989: Motif (Open Software Foundation) 1987/91: OS/2 Presentation Manager (IBM) 1990: Windows 3.0 (Microsoft) : Windows 95/NT/98/2000/ME/XP (Microsoft) 1995: Java AWT (SunSoft) 1997: Swing Components for Java (SunSoft) 2002: SWT von Eclipse 2006: XAML, Silverlight (Microsoft) Xswt, xswing, XUL (Mozilla) etc. 6

7 Programme mit GUI laufen in 2 Phasen 1) Aufbauphase: Aufbau der Fensteroberflächen (-fronten, widget hierarchies) durch Konstruktoraufrufe und Einfügen in Fensterhierarchie (embodiment) 2) Reaktionsphase, 1) bei der die Benutzeraktionen vom System (Ereignisverwaltung) als Ereignisobjekte ins Programm gegeben werden (Play-In) 2) Bei der in der Anwendungslogik durchgeführten Aktionen die Fensteroberfläche auf den neuesten Stand gebracht wird (Play-Out) 7

8 8 Widgets und Datenstrukturen Screen Buffer Fensterstrukturen sind hierarchisch (Einkapselung von Widgets) Datenstruktur in Anwendung wird den Widget-Hierarchien zugeordnet Screen-Buffer zeigt die Widget-Struktur bitweise (paint()) Pro View ein Controller widget- Observer Observer (play-in) View 1 - Widget Tree 1 (Fenster-Struktur) View 2 - Widget Tree 2 (Fenster-Struktur) Controller- Schicht Controller Controller Observer (play-out) Modell: Datenstruktur in Anwendungslogik (und Datenbank)

9 Zusammenspiel der Widget-Struktur und der Anwendungslogik Interaktive Anwendungen mit GUI laufen in Phasen: 1) Netzaufbau-Phase: Aufbau der Fensterstrukturen des GUI (widget hierarchies) Aufbau der Datenstrukturen in der Anwendungslogik (Modellstruktur) Anschluß des GUI-Reaktionscodes auf Veränderungen der Modellstruktur (View wird pull-observer des Controller, indirekt des Modells, Vorbereitung des Play-Out) Anschluß des Modell-Reaktionscode auf Benutzereingaben (Controller ist push-observer der Widgets, Vorbereitung des Play-In) 2) Arbeitsphase (Reaktive Phase) bei der die Benutzeraktionen vom System als Ereignisobjekte ins Programm gegeben werden, d.h. der Controller wird als Observer benachrichtigt und ausgeführt (Play-In push-observer) Bei denen die GUI-Views auf Modelländerungen durch Neuanzeigen reagieren (Play-Out pull-observer) Der Steuerfluß eines GUI-Programms wird nie explizit spezifiziert, sondern ergibt sich aus den Aktionen des Benutzers Das GUI-Programm reagiert nur (reaktives System) 9

10 Hauptprogramm für Fensteranzeige import java.awt.*; class ExampleFrame extends Frame { public ExampleFrame () { settitle("untitled"); setsize(150, 50); setvisible(true); class GUI1 { public static void main (String[] argv) { // Phase 1: Aufbau der Fensteroberfläche ExampleFrame f = new ExampleFrame(); //.. implizites Betreten der Reaktionsschleife: // Phase 2: reaktives Programm 10

11 1) Netzaufbauphase: Aufbau der Widget- Struktur 11 Verschiedene Techniken: Durch Konstruktoraufrufe und Additionen von Unterwidgets zu Oberwidgets (encapsulation) rein in Java-AWT/Swing, mit expliziter Konstruktion der Widget-Hierarchien Durch einen XML-Baum, der von einem XML-Parser eingelesen und als Objekt-Struktur im Speicher abgelegt wird (XUL - Firefox, XAML - Vista) Durch einen HTML-Baum, der von einem Brauser interpretiert wird (für Webanwendungen) Durch einen HTML-Baum, der bei Veränderungen inkrementell im Brauser nachgeladen wird (Web 2.0, Ajax) Client Server Modell: Datenstruktur View 1 - Widget Tree 1 in Anwendungslogik in html / Ajax (und Datenbank) Screen Buffer

12 2) MVC Dynamik (Play-In mit Push, Play-Out mit Pull) 12 Model ist passiv. Der Controller interpretiert die Eingaben und schreibt das Modell entsprechend Controller ist play-in Observer: Der Play-In-Observer hat wenig Daten (nur Events) zu transferieren, kann also als push-observer oder push-callback implementiert werden Controller kann auch optional Play-Out-Observer sein: Der Play-Out-Observer muss u.u. große Datenmengen transferieren und kann in mehreren Varianten implementiert werden Screen Buffer widget- Observer View 1 - Widget Tree 1 (Fenster-Struktur) register as play-in Observer Controller 1 (pro Sicht) Play-in durch push-observer Controller Modell: Datenstruktur in Anwendungslogik (und Datenbank) register as play-out Observer write Play-out durch pull-observer

13 13 MVC Dynamik (Strikte Schichtung) Model ist völlig passiv, wird vom Controller geschrieben Variante a) des Play-Out Observers mit passivem Modell und indirektem play-out: greift indirekt über den Observer auf das Modell zu (update, data-pull) Screen Buffer widget- Observer View 1 - Widget Tree 1 (Fenster-Struktur) register as play-in Observer update-push (play-in Observer) Controller 1 (pro Sicht) update to redraw (play-out Observer) a) pull, getdata (play-out Observer) Controller Modell: Datenstruktur in Anwendungslogik (und Datenbank) register as play-out Observer push-write update (play-out Observer) a) pull, getdata (play-out Observer) write

14 14 MVC Dynamik (Semi-strikte Schichtung) Play-Out-Observer Variante b) erlaubt dem View, das Model zu sehen View wird indirekt benachrichtigt (indirekter Update) View greift beim pull direkt auf das Modell zu (stärker gekoppelt, da das View das Modell kennen muss) Screen Buffer widget- Observer View 1 - Widget Tree 1 (Fenster-Struktur) register as play-in Observer update-push (play-in Observer) Controller 1 (pro Sicht) Controller update to redraw (play-out Observer) b) pull, getdata (play-out Observer) Modell: Datenstruktur in Anwendungslogik (und Datenbank) register as play-out Observer push-write update (play-out Observer) write

15 15 MVC Dynamik (Schwache Schichtung) Play-Out-Observer Variante c): Play-in über Controller, Play-out direkt zum View Modell ist aktiv, benachrichtigt View direkt Widget greift mit pull direkt auf das Modell zu (stärker gekoppelt, da das View das Modell kennen muss) Bei aktivem Modell und direktem pull-out wird im Play-Out der Controller umgangen Die Entscheidung über Redraw liegt bei View, nicht beim Controller Screen Buffer widget- Observer View 1 - Widget Tree 1 (Fenster-Struktur) register as play-in Observer update-push (play-in Observer) Controller 1 (pro Sicht) Controller update to redraw (play-out Observer) b) pull, getdata (play-out Observer) Modell: Datenstruktur in Anwendungslogik (und Datenbank) register as play-out Observer push-write write

16 16 Varianten von MVC Architekturprinzip Strikte Schichtung (strictly passive model) Semi-strikte Schichtung (weakly passive model) Schwache Schichtung indirekter Update via Controller (passive model) direkter Update (active model) Wer benachrichtigt, dass das Modell geändert ist? (update) Wer transportiert die Daten des geänderten Zustandes? Modell Observer indirekter pull-out View Observer Model direkter pull-out View Model Modell Observer und View direkter pull-out View Model

17 26.2 Einführendes Beispiel über Play-In und Play-Out mit Java-AWT Softwaretechnologie, Prof. Uwe Aßmann Technische Universität Dresden, Fakultät Informatik 17

18 18 Sichten: Zähler als motivierendes Beispiel Sicht 1 Sicht 2 cf: CounterFrame c: Counter ctr = 7 Fachl. Modell Counter ctr + count() + reset() + getvalue()

19 Modell und Sicht push-observer => Änderungen (play-in, asynchron ausgelöst) Sicht 1 (View) Sicht 2 (View) Methodenaufrufe => Änderungen (play-in) Beispiele: Frage: Controller Fachliche Klasse (Modell) Controller Benachrichtigung vieler Sichten über Änderungen (play-out, viele pull Observer) Verschiedene Dokumentenansichten, Statusanzeigen, Verfügbarkeit von Menüpunkten Wie hält man das Modell in der Anwendungslogik unabhängig von den beliebig vielen Sichten darauf? Muster "Observer" 19

20 Struktur java.util.observer (push- Callback) für Play-Out 20 better called a CallBack Subject pushes itself and data together with update(this,data) Problem: Observable is a concrete class! Observable addobserver(observer) deleteobserver(observer) notifyobservers(d:data) notifyobservers() setchanged() haschanged() for (b: observers) { b.update (this,d) * observers <interface> Observer update(observable,data) update(observable) ConcreteObserver update (Data) ObserverState do something with Data

21 21 Ein Zähler (Beispiel für fachliches Modell) class Counter { private int ctr = 0; public void count () { ctr++; public void reset () { ctr = 0; public int getvalue () { return ctr;

22 Beobachtbares Modell (Play out, Model) Counter wird Subjekt (Klasse java.util.observable) im jdk-implementierungsmuster Observer; bei Veränderung des Counter wird die Oberfläche mit setchanged() benachrichtigt (play out) import java.lang.util.*; class Counter extends Observable { private int ctr = 0; public void count () { ctr++; setchanged(); notifyobservers(); public void reset () { ctr = 0; setchanged(); notifyobservers(); public int getvalue () { return ctr; 22

23 Structure java.awt.windowlistener (push) For play-in java.awt.window offers a special push-observer Better called a CallBack Subject pushes data together with window<*>(this,window) java.awt.window addwindowlistener(windowlistener) removewindowlistener(windowlistener) processwindowevent(e:windowevent) java.awt.frame (Widget) for (b: observers) { b.window<*>(this,d) * listeners <interface> java.awt.windowlistener windowclosed (WindowEvent ev) windowopened (WindowEvent ev) windowiconified (WindowEvent ev) windowdeiconified (WindowEvent ev) windowactivated (WindowEvent ev) windowdeactivated (WindowEvent ev) windowclosing (WindowEvent ev)) ApplicationClass (WindowListener) 23

24 24 Registrierung für WindowListener (Play-In) Im Auslöser java.awt.frame findet sich eine Registrierungsprozedur (ererbt von java.awt.window): public class Frame... { Observable (Subject) public void addwindowlistener (WindowListener l) Observer java.awt.event.windowlistener ist eine Schnittstelle eines Observers, die von der Anwendungsklasse implementiert werden kann: Observing public interface WindowListener { (Observer)... Methoden zur Ereignisbehandlung

25 Hauptprogramm für schließbares Fenster (Konstruktion des play-in) import java.awt.*; import java.awt.event.*; class WindowCloser implements WindowListener {... siehe später... class ExampleFrame extends Frame { public ExampleFrame () { settitle("untitled"); setsize(150, 50); Anmelden des play-in addwindowlistener(new WindowCloser()); setvisible(true); Listener des play-in Subjekt starten (Ereignisverwaltung) class GUI2 { public static void main (String[] argv) { ExampleFrame f = new ExampleFrame(); reagieren (Phase 2) 25

26 26.3 Ereignisgesteuerter Programmablauf beim Play-In Asynchroner Änderungen des Benutzers; Programmablauf beim Play-In I claim not to have controlled events, but confess plainly that events have controlled me. Abraham Lincoln, 1864 Softwaretechnologie, Prof. Uwe Aßmann Technische Universität Dresden, Fakultät Informatik 26

27 27 Ereignisse und Benutzerinteraktionen Ein Ereignis ist ein Vorgang in der Umwelt des Softwaresystems von vernachlässigbarer Dauer, der für das System von Bedeutung ist. Eine wichtige Gruppe von Ereignissen sind Benutzeraktionen, Ereignisse, die eine Aktion in einem Kontext der Benutzeroberfläche ausdrücken: Drücken eines Knopfs Auswahl eines Menüpunkts Verändern von Text Zeigen auf ein Gebiet Schließen eines Fensters Verbergen eines Fensters Drücken einer Taste Mausklick über einem Gebiet

28 Beispiel für Ereignisverarbeitung Das erste Java-Programm in der Vorlesung mit einer "graphischen Benutzungsoberfläche"... Aufgabe: Ein leeres, aber schliessbares Fenster anzeigen Schliessknopf Fensterdarstellung ("look and feel") gemäß Windows: 28

29 Ereignis-Klassen und ihre auslösenden Oberflächenelemente 29 Ereignis-Klassen in (Java-)Benutzungsoberflächen drücken die Aktion oder den Kontext der Benutzerinteraktion aus: WindowEvent ActionEvent MouseEvent, KeyEvent,... Bezogen auf Klassen für Oberflächenelemente (Kontexte) Window Frame Button TextField,... Zuordnung (Beispiele): Window (mit Frame) erzeugt WindowEvent z.b. Betätigung des Schliessknopfes Button erzeugt ActionEvent bei Betätigung des Knopfes

30 Ereignis-Bearbeitung beim play-in (1) Laufzeit-System (Ereignisverwaltung) betätigt Schliessknopf Benutzer Reaktion auf ein Ereignis durch Programm: Ereignis wird vom Laufzeitsystem (Ablaufsteuerung, Ereignisverwaltung) erkannt und in ein Ereignisobjekt (WindowEvent) umgewandelt 30

31 Ereignis-Bearbeitung beim play-in (2) Laufzeit-System betätigt Schliessknopf Benutzer WindowListener f: Frame registriert <<controller>> l: FrameController Quelle vom System (Ereignisverw.) neu erzeugt: e: WindowEvent Delegation (Push): Aufruf einer Methode von l mit Argument e l ist push-windowlistener von f 31

32 Hierarchie der AWT EventListener (Widget- Listeners) und Event-Objekte Die Vererbungshierarchien EventListener und AWTEvent werden parallel variiert AWTEvent ist das Datum, das die EventListener empfangen (push) EventListener EventObject WindowListener TextListener void TextValueChanged(TextEvent e) AWTEventListener void eventdispatched(awtevent event) MenuListener void menuselected(menuevent e) void menucancelled(menuevent e) void menudeselected(menuevent e) ActionListener void actionperformed(actionevent e) ChangeListener void statechanged(changeevent e) PropertyChangeListener void propertychange(propertychangeevent evt) WindowFocusListener void windowgainedfocus(windowevent e) void windowlostfocus(windowevent e) AWTEvent WindowEvent TextEvent ActionEvent MenuEvent ChangeEvent PropertyChangeEvent 32

33 java.awt.event.windowlistener für play-in Observer /** empty marker interface, from which all listeners have to inherit */ public interface EventListener { ; public interface WindowListener extends EventListener { public void windowclosed (WindowEvent ev); public void windowopened (WindowEvent ev); public void windowiconified (WindowEvent ev); public void windowdeiconified (WindowEvent ev); public void windowactivated (WindowEvent ev); public void windowdeactivated (WindowEvent ev); public void windowclosing (WindowEvent ev); 33

34 Definition von Ereignissen: java.awt.event.windowevent public class WindowEvent extends AWTEvent {... // Konstruktor, wird vom System aufgerufen public WindowEvent (Window source, int id); // Abfragemöglichkeiten public Window getwindow();... 34

35 java.awt.event.actionevent, ActionListener public class ActionEvent extends AWTEvent {... // Konstruktor, wird vom System // (Ereignisverwaltung) aufgerufen public ActionEvent (Window source, int id, String command); // Abfragemöglichkeiten public Object getsource (); public String getactioncommand();... public interface ActionListener extends EventListener { public void actionperformed (ActionEvent ev); 35

36 Implementierung von EventListener-Schnittstellen beim Play-In (fürs Selbststudium) Softwaretechnologie, Prof. Uwe Aßmann Technische Universität Dresden, Fakultät Informatik 36

37 Wer reagiert denn hier auf Ereignisse? Ereignis-Listener sind zunächst Schnittstellen, keine Implementierungsklassen Wie programmiert man die Klassen, die die abhörenden Schnittstellen implementieren? Eine neue Klasse (Implementierungsklasse) Eine Default-Implementierung benutzen (WindowAdapter) Eine Unterklasse der Default-Implementierung WindowAdapter Eine innere Klasse Eine anonyme Klasse 37

38 38 a) Implementierungsklasse WindowCloser für Ereignis "Schließen" import java.awt.*; import java.awt.event.*; class WindowCloser implements WindowListener { // Reagiert nur auf Schließen public void windowclosed (WindowEvent ev) { public void windowopened (WindowEvent ev) { public void windowiconified (WindowEvent ev) { public void windowdeiconified (WindowEvent ev) { public void windowactivated (WindowEvent ev) { public void windowdeactivated (WindowEvent ev) { public void windowclosing(windowevent event) { System.exit(0);

39 Hauptprogramm für schließbares Fenster import java.awt.*; import java.awt.event.*; class WindowCloser implements WindowListener {... siehe vorige Folie... class ExampleFrame extends Frame { public ExampleFrame () { settitle("untitled"); setsize(150, 50); addwindowlistener(new WindowCloser()); setvisible(true); class GUI2 { public static void main (String[] argv) { ExampleFrame f = new ExampleFrame(); 39

40 b) Vereinfachung 1: Unterklasse der Default- Implementierung WindowAdapter 40 WindowAdapter bietet eine Default-Implementierung für die WindowListener-Funktionen an: package java.awt.event; public abstract class WindowAdapter implements WindowListener { public void windowclosed (WindowEvent ev) { public void windowopened (WindowEvent ev) { public void windowiconified (WindowEvent ev) { public void windowdeiconified (WindowEvent ev) { public void windowactivated (WindowEvent ev) { public void windowdeactivated (WindowEvent ev) { public void windowclosing (WindowEvent ev) {

41 Vereinfachung 1: Unterklasse der Default- Implementierung WindowAdapter Redefinition einer leeren Reaktionsmethode: import java.awt.*; import java.awt.event.*; class WindowCloser extends WindowAdapter { public void windowclosing(windowevent event) { System.exit(0); class ExampleFrame extends Frame { public ExampleFrame () { settitle("untitled"); setsize(150, 50); addwindowlistener(new WindowCloser()); setvisible(true); class GUI3 { public static void main (String[] argv) { ExampleFrame f = new ExampleFrame(); 41

42 Vereinfachung 1: Unterklasse der DefaultImplementierung WindowAdapter 42 <<interface>> WindowListener windowclosing (e: WindowEvent) Window addwindowlistener (l: WindowListener) <<use>> WindowCloser WindowEvent WindowAdapter registriert bei Frame setsize settitle setvisible ExampleFrame

43 WindowAdapter ist eine Default- Implementierung 43 <<interface>>windowlistener windowclosing (e: WindowEvent) window... () Ist das eine Anwendung des Adapter-Musters? Target Adaptee WindowAdapter WindowCloser windowclosing (e: WindowEvent) Adapter Adapter.. sollte besser DefaultWindowListener heissen..

44 44 b) Vereinfachung 2: Innere Klasse benutzen import java.awt.*; import java.awt.event.*; class ExampleFrame extends Frame { /* inner */ class WindowCloser extends WindowAdapter { public void windowclosing(windowevent event) { System.exit(0); public ExampleFrame () { settitle("untitled"); setsize(150, 50); addwindowlistener(new WindowCloser()); setvisible(true); class GUI4 { public static void main (String[] argv) { ExampleFrame f = new ExampleFrame();

45 c) Vereinfachung 3: Anonyme Klasse benutzen import java.awt.*; import java.awt.event.*; class ExampleFrame extends Frame { public ExampleFrame () { settitle("untitled"); setsize(150, 50); addwindowlistener(new WindowAdapter() { public void windowclosing(windowevent event) { System.exit(0); ); setvisible(true); class GUI5 { public static void main (String[] argv) { ExampleFrame f = new ExampleFrame(); 45

46 26.4 Aufbau der Benutzungsoberfläche (Widget-Hierarchie) mit Swing Softwaretechnologie, Prof. Uwe Aßmann Technische Universität Dresden, Fakultät Informatik 46

47 47 Hier: Expliziter Aufbau mit AWT und Swing Abstract Window Toolkit (AWT): Seit Version 1.1 Standard-Bestandteil von Java Umfangreiche Bibliothek von Oberflächen-Bausteinen Plattformunabhängige Schnittstellen, aber grosse Teile plattformspezifisch realisiert ("native code") Swing-Bibliotheken Seit Version 1.2 Standard-Bestandteil von Java Noch umfangreichere Bibliothek von Oberfächen-Bausteinen Plattformunabhängiger Code (d.h. Swing ist weitestgehend selbst in Java realisiert) Wesentlich größerer Funktionsumfang (nicht auf den "kleinsten Nenner" der Plattformen festgelegt)

48 Bibliotheken von AWT und Swing Wichtigste AWT-Pakete: java.awt: u.a. Grafik, Oberflächenkomponenten, Layout-Manager java.awt.event: Ereignisbehandlung Andere Pakete für weitere Spezialzwecke Wichtigstes Swing-Paket: javax.swing: Oberflächenkomponenten Andere Pakete für Spezialzwecke Viele AWT-Klassen werden auch in Swing verwendet! Standard-Import-Vorspann: import java.awt.*; import java.awt.event.*; import javax.swing.*; (Naiver) Unterschied zwischen AWT- und Swing-Komponenten: AWT: Button, Frame, Menu,... Swing: JButton, JFrame, JMenu,... 48

49 AWT/Swing-Klassenhierarchie (Ausschnitt) Dies ist nur ein sehr kleiner Ausschnitt Präfixe "java." und "javax." hier weggelassen. lang.object awt.component swing. JButton swing.jcomponent swing. JLabel awt.container swing. JTextComponent swing. JTextField swing. JPanel awt.window swing. JFrame 49

50 Component, Container, Window, Frame, Panel awt.component (abstrakt): Oberklasse aller Bestandteile der Oberfläche public void setsize (int width, int height); public void setvisible (boolean b); awt.container (abstrakt): Oberklasse aller Komponenten, die andere Komponenten enthalten public void add (Component comp); public void setlayout (LayoutManager mgr); awt.window Fenster ohne Rahmen oder Menüs public void pack (); //Größe anpassen swing.jframe Größenveränderbares Fenster mit Titel public void settitle (String title); swing.jpanel Zusammenfassung von Swing-Komponenten JPanel Component Container Window JFrame 50

51 JComponent Oberklasse aller in der Swing-Bibliothek neu implementierten, verbesserten Oberflächenkomponenten. Eigenschaften u.a.: Einstellbares "Look-and-Feel" Komponenten kombinierbar und erweiterbar Rahmen für Komponenten void setborder (Border border); (Border-Objekte mit BorderFactory erzeugbar) ToolTips -- Kurzbeschreibungen, die auftauchen, wenn der Cursor über der Komponente liegt void settooltiptext (String text); Automatisches Scrolling Beispiele für weitere Unterklassen von JComponent: JList: Auswahlliste JComboBox: "Drop-Down"-Auswahlliste mit Texteingabemöglichkeit JPopUpMenu: "Pop-Up"-Menü JFileChooser: Dateiauswahl Component Container JComponent 51

52 52 Zähler-Beispiel: Grobentwurf der Oberfläche JPanel valuepanel CounterFrame cf abgeleitet von JFrame JPanel buttonpanel

53 Die Sicht (View) mit Swing: Gliederung, 1. Versuch class CounterFrame extends JFrame { JPanel valuepanel = new JPanel(); JTextField valuedisplay = new JTextField(10); JPanel buttonpanel = new JPanel(); JButton countbutton = new JButton("Count"); JButton resetbutton = new JButton("Reset"); JButton exitbutton = new JButton("Exit"); public CounterFrame (Counter c) { settitle("swingcounter"); valuepanel.add(new JLabel("Counter value")); valuepanel.add(valuedisplay); valuedisplay.seteditable(false); //.. value panel hinzufügen getcontentpane().add(valuepanel, BorderLayout.NORTH); buttonpanel.add(countbutton); buttonpanel.add(resetbutton); buttonpanel.add(exitbutton); //.. button panel hinzufügen getcontentpane().add(buttonpanel, BorderLayout.SOUTH); pack(); setvisible(true); Subjekt starten (Ereignisverwaltung) 53

54 54 Hinzufügen von Komponenten zu JFrames Ein JFrame ist ein "Container", d.h. dient zur Aufnahme weiterer Elemente. Ein JFrame ist intern in verschiedene "Scheiben" (panes) organisiert. Die wichtigste ist die content pane. In JFrame ist definiert: Container getcontentpane(); content pane menu bar layered pane glass pane

55 55 Die Sicht (View): Gliederung, 2. Versuch class CounterFrame extends JFrame { JPanel valuepanel = new JPanel(); JPanel buttonpanel = new JPanel(); public CounterFrame (Counter c) { settitle("swingcounter"); getcontentpane().add(valuepanel); getcontentpane().add(buttonpanel); pack(); setvisible(true);

56 56 Zähler-Beispiel: Entwurf der Wertanzeige JPanel valuepanel JLabel valuelabel JTextField valuedisplay

57 TextComponent, TextField, Label, Button JTextComponent: Oberklasse von JTextField und JTextArea public void settext (String t); public String gettext (); public void seteditable (boolean b); Component Container JTextField: Textfeld mit einer Zeile public JTextField (int length); JLabel: Einzeiliger unveränderbarer Text public JLabel (String text); JButton: JComponent JTextComponent JTextField JButton JLabel Druckknopf mit Textbeschriftung public JButton (String label); 57

58 Die Sicht (View): Elemente der Wertanzeige class class CounterFrame CounterFrame extends extends JFrame JFrame { { JPanel JPanel valuepanel valuepanel = = new new JPanel(); JPanel(); JTextField JTextField valuedisplay valuedisplay = = new new JTextField(10); JTextField(10); JPanel JPanel buttonpanel buttonpanel = = new new JPanel(); JPanel(); public public CounterFrame CounterFrame (Counter (Counter c) c) { { settitle("swingcounter"); settitle("swingcounter"); valuepanel.add(new valuepanel.add(new JLabel("Counter JLabel("Counter value")); value")); valuepanel.add(valuedisplay); valuepanel.add(valuedisplay); valuedisplay.seteditable(false); valuedisplay.seteditable(false); getcontentpane().add(valuepanel); getcontentpane().add(valuepanel); getcontentpane().add(buttonpanel); getcontentpane().add(buttonpanel); pack(); pack(); setvisible(true); setvisible(true); 58

59 59 Zähler-Beispiel: Entwurf der Bedienelemente JButton countbutton JButton resetbutton JButton exitbutton JPanel buttonpanel

60 Die Sicht (View): Bedienelemente class class CounterFrame CounterFrame extends extends JFrame JFrame { { JPanel JPanel valuepanel valuepanel = = new new JPanel(); JPanel(); JTextField JTextField valuedisplay valuedisplay = = new new JTextField(10); JTextField(10); JPanel JPanel buttonpanel buttonpanel = new new JPanel(); JPanel(); JButton JButton countbutton countbutton = = new new JButton("Count"); JButton("Count"); JButton JButton resetbutton resetbutton = = new new JButton("Reset"); JButton("Reset"); JButton JButton exitbutton exitbutton = = new new JButton("Exit"); JButton("Exit"); public public CounterFrame CounterFrame (Counter (Counter c) c) { { settitle("swingcounter"); settitle("swingcounter"); valuepanel.add(new valuepanel.add(new JLabel("Counter JLabel("Counter value")); value")); valuepanel.add(valuedisplay); valuepanel.add(valuedisplay); valuedisplay.seteditable(false); valuedisplay.seteditable(false); getcontentpane().add(valuepanel); getcontentpane().add(valuepanel); buttonpanel.add(countbutton); buttonpanel.add(countbutton); buttonpanel.add(resetbutton); buttonpanel.add(resetbutton); buttonpanel.add(exitbutton); buttonpanel.add(exitbutton); getcontentpane().add(buttonpanel); getcontentpane().add(buttonpanel); pack(); pack(); setvisible(true); setvisible(true); 60

61 61 Layout-Manager Definition Ein Layout-Manager ist ein Objekt, das Methoden bereitstellt, um die graphische Repräsentation verschiedener Objekte innerhalb eines Container-Objektes anzuordnen. Formal ist LayoutManager ein Interface, für das viele Implementierungen möglich sind. In Java definierte Layout-Manager (Auswahl): FlowLayout (java.awt.flowlayout) BorderLayout (java.awt.borderlayout) GridLayout (java.awt.gridlayout) In awt.component: public void add (Component comp, Object constraints); erlaubt es, zusätzliche Information (z.b. Orientierung, Zeile/Spalte) an den Layout-Manager zu übergeben

62 62 Flow-Layout Grundprinzip: Anordnung analog Textfluß: von links nach rechts und von oben nach unten Default für Panels z.b. in valuepanel und buttonpanel für Hinzufügen von Labels, Buttons etc. Parameter bei Konstruktor: Orientierung auf Zeile, Abstände Constraints bei add: keine

63 63 Border-Layout Grundprinzip: Orientierung nach den Seiten (N, S, W, O) bzw. Mitte (center) Default für Window, Frame z.b. in CounterFrame für Hinzufügen von valuepanel, buttonpanel Parameter bei Konstruktor: Keine Constraints bei add: BorderLayout.NORTH, SOUTH, WEST, EAST, CENTER Oberer ("Nord")-Bereich (z.b. valuepanel) Unterer ("Süd")-Bereich (z.b. buttonpanel)

64 64 Grid-Layout Grundprinzip: Anordnung nach Zeilen und Spalten Parameter bei Konstruktor: Abstände, Anzahl Zeilen, Anzahl Spalten Constraints bei add: Keine 1,1 1,2 1,3 2,1 2,2 2,3

65 65 Die Sicht (View): Alle sichtbaren Elemente class CounterFrame extends JFrame { JPanel valuepanel = new JPanel(); JTextField valuedisplay = new JTextField(10); JPanel buttonpanel = new JPanel(); JButton countbutton = new JButton("Count"); JButton resetbutton = new JButton("Reset"); JButton exitbutton = new JButton("Exit"); public CounterFrame (Counter c) { settitle("swingcounter"); valuepanel.add(new JLabel("Counter value")); valuepanel.add(valuedisplay); valuedisplay.seteditable(false); getcontentpane().add(valuepanel, BorderLayout.NORTH); buttonpanel.add(countbutton); buttonpanel.add(resetbutton); buttonpanel.add(exitbutton); getcontentpane().add(buttonpanel, BorderLayout.SOUTH); pack(); setvisible(true);

66 26.5 MVC-Verdrahtung Beispiel mit schwacher Schichung und aktivem Modell (Views beobachten das Modell) Softwaretechnologie, Prof. Uwe Aßmann Technische Universität Dresden, Fakultät Informatik 66

67 Schwach geschichtete Model-View-Controller- Architektur GUI-Reagiert-Auf-Modelländerungen: (push-observer, Play-Out) Modell-Reagiert-Auf-View: Controller (push-observer, Play-In) View Controller <<beobachtet>> bc: ButtonController Play-Out cf: CounterFrame <<beobachtet>> <<data push>> Model c: Counter ctr = 7 <<steuert, schreibt>> Counter ctr + count() + reset() + getvalue() Play-In 67

68 68 Zähler-Beispiel für das Play-Out: Anbindung View an Model class CounterFrame extends JFrame // View implements Observer {... JTextField valuedisplay = new JTextField(10);... // connecting model to view public CounterFrame /*View*/ (Counter c /*Model*/) {... valuepanel.add(valuedisplay); valuedisplay.seteditable(false); valuedisplay.settext(string.valueof(c.getvalue()));... c.addobserver(this); // Registring view at model pack(); setvisible(true); // Wire View so that it listens at model for update // and data push // weak layering: Controller is not involved in play-out public void update (Observable o, Object arg) { Counter c = (Counter) o; valuedisplay.settext(string.valueof(c.getvalue()));

69 Play-In mit ActionListener (Wdh.) java.awt.event.actionevent, ActionListener public class ActionEvent extends AWTEvent {... // Konstruktor wird vom System aufgerufen public Object getsource () public String getactioncommand()... public interface ActionListener extends EventListener { public void actionperformed (ActionEvent ev); 69

70 Die Steuerung des Play-In mit dem Controller Zum Play-In wird der Controller ein Listener der View-Widgets (hier buttons) Die update-methode heisst actionperformed(actionevent), da die Ablaufsteuerung des JDK diese sucht und aufruft Der Controller interpretiert die Eingaben des Benutzers und setzt sie auf das Model um // Die Steuerung belauscht die Knöpfe class // Die ButtonController Steuerung belauscht // Controller die Knöpfe class implements ButtonController ActionListener // Controller { Counter implements mycounter; ActionListener { // Counter push-observer mycounter; interpretiert Kommandos public // push-observer void actionperformed interpretiert (ActionEvent Kommandos event) { public String void cmd actionperformed = event.getactioncommand(); (ActionEvent event) { if String (cmd.equals("count")) cmd = event.getactioncommand(); if mycounter.count(); (cmd.equals("count")) // write: Aktion auf Modell if mycounter.count(); (cmd.equals("reset")) // write: Aktion auf Modell if mycounter.reset(); (cmd.equals("reset")) // write: Aktion if mycounter.reset(); (cmd.equals("exit")) // write: Aktion if System.exit(0); (cmd.equals("exit")) // Aktion: Beende Programm System.exit(0); // Aktion: Beende Programm public ButtonController (Counter c) { public mycounter ButtonController = c; (Counter c) { mycounter = c; 70

71 Play-In, Zähler-Beispiel: Anbindung des Controllers an mehrere Widgets des View 71 class CounterFrame extends JFrame {... JPanel buttonpanel = new JPanel(); JButton countbutton = new JButton("Count"); JButton resetbutton = new JButton("Reset"); JButton exitbutton = new JButton("Exit"); public CounterFrame (Counter c) {... ButtonController bc = new ButtonController(c); // controller listens at another widget countbutton.addactionlistener(bc); buttonpanel.add(countbutton); // controller listens at another widget resetbutton.addactionlistener(bc); buttonpanel.add(resetbutton); // controller listens at another widget exitbutton.addactionlistener(bc); buttonpanel.add(exitbutton);...

72 72 Alles zusammen: CounterFrame (1) class CounterFrame extends JFrame implements Observer { JPanel valuepanel = new JPanel(); JTextField valuedisplay = new JTextField(10); JPanel buttonpanel = new JPanel(); JButton countbutton = new JButton("Count"); JButton resetbutton = new JButton("Reset"); JButton exitbutton = new JButton("Exit"); public CounterFrame (Counter c) { settitle("swingcounter"); valuepanel.add(new JLabel("Counter value")); valuepanel.add(valuedisplay); valuedisplay.seteditable(false); valuedisplay.settext(string.valueof(c.getvalue())); getcontentpane().add(valuepanel,borderlayout.north ); ButtonController bc = new ButtonController(c); countbutton.addactionlistener(bc); buttonpanel.add(countbutton); resetbutton.addactionlistener(bc); buttonpanel.add(resetbutton); exitbutton.addactionlistener(bc); buttonpanel.add(exitbutton); getcontentpane().add(buttonpanel,borderlayout.south);

73 73 Alles zusammen: CounterFrame (2) addwindowlistener(new WindowCloser()); c.addobserver(this); pack(); setvisible(true); public void update (Observable o, Object arg) { Counter c = (Counter) o; valuedisplay.settext(string.valueof(c.getvalue())); class ButtonController implements ActionListener {... (wie oben)... class WindowCloser implements WindowListener {... (wie oben)...

74 74 Überblick MVC user input observer c:controller c:controller c:controller direct change messages 1 1 v:view v:view v:view change messages observer * model change 1 m:model {xor model read 1 * change messages observer [Herrmann]

75 Überblick MVC (Active Model, Schwache Schichtung) 75 Mit aktivem Model wird der View direkt vom Model benachrichtigt, und zieht danach bei Bedarf die Daten aus dem Model Entscheidung über Redraw liegt beim View user input observer c:controller c:controller c:controller change messages observer * 1 1 model change 1 m:model model read 1 v:view v:view v:view * change messages observer

76 Überblick MVC (Passive Model, Semi-starke Schichtung) 76 Mit passivem Model zieht zwar der View die Daten aus dem Model, wird aber indirekt über den Controller benachrichtigt Entscheidung über Redraw liegt beim Controller user input observer c:controller c:controller c:controller change messages observer * direct change messages 1 1 model change 1 model read 1 v:view v:view v:view m:model

77 Überblick MVC (Passive Model, Starke Schichtung) 77 Mit passivem Model zieht zwar der View die Daten aus dem Model, wird aber indirekt über den Controller benachrichtigt Entscheidung über Redraw liegt beim Controller user input observer c:controller c:controller c:controller change messages observer * direct change messages 1 1 model change 1 model read model read v:view v:view v:view m:model

78 Probleme im MVC Wiederverwendung von Sichten und Controller wie? Modell ist abstrakte Klasse (white-box framework mit Variationspunkt Modell) Sicht ist Rolle der Modellklasse (open role framework) Granularität der Ereignisse: Welche Änderungen des Modells sollen en-bloc von Sichten übernommen werden? 78

79 Was haben wir gelernt? GUI-Programme laufen in 2 Phasen: Aufbau der Fensterfronten (widget hierarchies) durch Konstruktoraufrufe und Additionen (embodiment) Vorbereitung Play-Out: Anschluß des View-Reaktionscodes als jdk-observer des Modells Vorbereitung Play-In: Anschluß des Controller als widget-observer der Views Reaktionsphase, bei der die Benutzeraktionen vom System als Ereignisobjekte ins Programm gegeben werden: der Controller als Listener benachrichtigt und ausgeführt werden (Play-In) die Views bzw. der Controller als Listener des Modells benachrichtigt werden (Play-Out) Der Kontrollfluß eines GUI-Programms wird nie explizit spezifiziert, sondern ergibt sich aus den Aktionen des Benutzers Die Views reagieren auf Ereignisse im Screenbuffer, die von der Ablaufsteuerung gemeldet werden Der Controller auf Widget-Veränderungen im View Die Views auf Veränderungen im Modell 79

80 80 The End Diese Folien sind eine überarbeitete Version der Vorlesungsfolien zur Vorlesung Softwaretechnologie von Prof. H. Hussmann, used by permission. Verbreitung, Kopieren nur mit Zustimmung des Autors.