Architektur interaktiver Systeme

Transkript

1 Architektur interaktiver Systeme Prof. Dr. rer. nat. habil. Uwe Aßmann Institut für Software- und Multimediatechnik Lehrstuhl Softwaretechnologie Fakultät für Informatik TU Dresden Version , Entkopplung durch Sichten 2. Ereignisgesteuerter Programmablauf 3. Benutzungsoberflächen 4. Benutzungsoberflächen mit Swing Softwaretechnologie, Prof. Uwe Aßmann, Prof. Heinrich Hussmann 1 Andere Literatur [Herrmann] M. Veit, S. Herrmann. Model-View-Controller and Object Teams: A Perfect Match of Paradigms. AOSD 2003, ACM Press Prof. Uwe Aßmann, Prof. Heinrich Hussmann, Softwaretechnologie 2

2 Architektur interaktiver Systeme 1) Entkopplung durch Sichten Softwaretechnologie, Prof. Uwe Aßmann, Prof. Heinrich Hussmann 3 Schichtenarchitektur Benutzungsoberfläche - Teile des Kontextmodells Window Button Menu (Fachliches) Modell Teammitglied Teambesprechung Ablaufsteuerung Datenhaltung z.b. relationale Datenbank Prof. Uwe Aßmann, Prof. Heinrich Hussmann, Softwaretechnologie 4

3 Schichtenarchitektur Benutzungsoberfläche (Fensteroberfläche, Widget-Hierarchie) Window Button Menu Play-In (asynchron) Play-out (synchron, aber multiple Sichten) Ablauf- Steuerung (Ereignis- Verwaltung) (Fachliches) Modell Teammitglied Teambesprechung Prof. Uwe Aßmann, Prof. Heinrich Hussmann, Softwaretechnologie 5 GUI-Programme laufen in 2 Phasen 1) 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) Prof. Uwe Aßmann, Prof. Heinrich Hussmann, Softwaretechnologie 6

4 Sichten: Zähler als motivierendes Beispiel Sicht 1 Sicht 2 cf: CounterFrame Modell c: Counter ctr = 7 Counter ctr + count() + reset() + getvalue() Prof. Uwe Aßmann, Prof. Heinrich Hussmann, Softwaretechnologie 7 Modell und Sicht Sicht 1 Sicht 2 Methodenaufrufe => Änderungen (play-in, asynchron ausgelöst) Modell Benachrichtigung vieler Sichten über Änderungen (play-out, synchron, viele Listener) Beispiele: Frage: 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" Prof. Uwe Aßmann, Prof. Heinrich Hussmann, Softwaretechnologie 8

5 Ein Zähler (Beispiel fachliches Modell) class Counter { private int ctr = 0; public void count () { ctr++; public void reset () { ctr = 0; public int getvalue () { return ctr; Prof. Uwe Aßmann, Prof. Heinrich Hussmann, Softwaretechnologie 9 Beobachtbares Modell (Model) 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; Counter wird Subjekt im Muster Observer Das fachliche Modell enthält keinerlei Bezug auf die Benutzungsoberfl äche Beliebig viele Listener in Oberfl äche möglich Prof. Uwe Aßmann, Prof. Heinrich Hussmann, Softwaretechnologie 10

6 Architektur interaktiver Systeme 2 Ereignisgesteuerter Programmablauf (Asynchroner 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, Prof. Heinrich Hussmann 11 Ereignisse Definition 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: 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 Prof. Uwe Aßmann, Prof. Heinrich Hussmann, Softwaretechnologie 12

7 Beispiel für Ereignisverarbeitung Das erste Java-Programm in der Vorlesung mit einer "graphischen Benutzungsoberfläche"... Hinweis "für Java-Insider": Hier noch reines "AWT", im nächsten Kapitel wird "Swing" eingeführt werden. Aufgabe: Ein leeres, aber schliessbares Fenster anzeigen Schliessknopf Hinweis: Fensterdarstellung ("look and feel") gemäß Solaris CDE; Schliessknopf in Windows-Darstellung: Prof. Uwe Aßmann, Prof. Heinrich Hussmann, Softwaretechnologie 13 Ereignis-Klassen und ihre auslösenden Oberflächenelemente Ereignis-Klassen in (Java-)Benutzungsoberflächen: WindowEvent ActionEvent MouseEvent KeyEvent,... Bezogen auf Klassen für Oberflächenelemente 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 Prof. Uwe Aßmann, Prof. Heinrich Hussmann, Softwaretechnologie 14

8 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 Prof. Uwe Aßmann, Prof. Heinrich Hussmann, Softwaretechnologie 15 Registrierung für Listener 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: Observing public interface WindowListener { (Observer)... Methoden zur Ereignisbehandlung Vergleich mit Observer-Muster: Frame bietet einen "Observable (Subject)"-Mechanismus Window-Listener ist eine "Observer"-Schnittstelle Prof. Uwe Aßmann, Prof. Heinrich Hussmann, Softwaretechnologie 16

9 Hauptprogramm für schließbares Fenster 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); addwindowlistener(new WindowCloser()); setvisible(true); class GUI2 { public static void main (String[] argv) { ExampleFrame f = new ExampleFrame(); reagieren (Phase 2) Anmelden Subjekt starten (Ereignisverwaltung) Prof. Uwe Aßmann, Prof. Heinrich Hussmann, Softwaretechnologie 17 Ereignis-Bearbeitung (1) Laufzeit-System (Ereignisverwaltung) betätigt Schliessknopf Benutzer Reaktion auf ein Ereignis durch Programm: Ereignis wird vom Laufzeitsystem erkannt Programm soll von technischen Details entkoppelt werden Beobachter-Prinzip: Programmteile registrieren sich für bestimmte Ereignisse Laufzeitsystem sorgt für Aufruf an passender Stelle Objekte, die Ereignisse beobachten, heißen bei Java Listener. Prof. Uwe Aßmann, Prof. Heinrich Hussmann, Softwaretechnologie 18

10 Ereignis-Bearbeitung (2) Laufzeit-System betätigt Schliessknopf Benutzer f: Frame Quelle vom System (Ereignisverw.) neu erzeugt: e: WindowEvent registriert bei l: WindowListener Delegation: Aufruf einer Methode von l mit Argument e Prof. Uwe Aßmann, Prof. Heinrich Hussmann, Softwaretechnologie 19 Hierarchie der AWT EventListener (Widget- Listeners) und Event-Objekte EventListener Die Vererbungshierarchien EventListener und AWTEvent werden parallel variiert EventObject WindowListener TextListener void TextValueChanged(TextEvent e) AWTEventListener void eventdispatched(awtevent event) AWTEvent WindowEvent TextEvent 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) MenuEvent ChangeEvent ActionEvent PropertyChangeEvent Prof. Uwe Aßmann, Prof. Heinrich Hussmann, Softwaretechnologie 20

11 java.awt.event.windowlistener /** 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); java.util.eventlistener:basisinterface für alle "Listener" Definition von Ereignissen: java.awt.event.windowevent Prof. Uwe Aßmann, Prof. Heinrich Hussmann, Softwaretechnologie 21 public class WindowEvent extends AWTEvent {... // Konstruktor, wird vom System aufgerufen public WindowEvent (Window source, int id); // Abfragemöglichkeiten public Window getwindow();... Prof. Uwe Aßmann, Prof. Heinrich Hussmann, Softwaretechnologie 22

12 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); Prof. Uwe Aßmann, Prof. Heinrich Hussmann, Softwaretechnologie 23 Wer reagiert denn hier auf Ereignisse? Ereignis-Listener sind 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 Prof. Uwe Aßmann, Prof. Heinrich Hussmann, Softwaretechnologie 24

13 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); Prof. Uwe Aßmann, Prof. Heinrich Hussmann, Softwaretechnologie 25 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(); Prof. Uwe Aßmann, Prof. Heinrich Hussmann, Softwaretechnologie 26

14 b) Vereinfachung 1: Unterklasse der DefaultImplementierung WindowAdapter 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) { Prof. Uwe Aßmann, Prof. Heinrich Hussmann, Softwaretechnologie 27 Vereinfachung 1: Unterklasse der DefaultImplementierung 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(); Prof. Uwe Aßmann, Prof. Heinrich Hussmann, Softwaretechnologie 28

15 Vereinfachung 1: Unterklasse der DefaultImplementierung WindowAdapter <<interface>> WindowListener windowclosing (e: WindowEvent) Window addwindowlistener (l: WindowListener) <<use>> WindowAdapter WindowEvent Frame setsize settitle setvisible WindowCloser registriert bei ExampleFrame Prof. Uwe Aßmann, Prof. Heinrich Hussmann, Softwaretechnologie 29 Diskussion zum Begriff "Adapter" <<interface>>windowlistener windowclosing (e: WindowEvent) window... () Ist das eine Anwendung des Adapter-Musters? Target Adaptee Adapter Adapter WindowAdapter WindowCloser windowclosing (e: WindowEvent).. sollte besser DefaultWindowListener heissen.. Prof. Uwe Aßmann, Prof. Heinrich Hussmann, Softwaretechnologie 30

16 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(); Prof. Uwe Aßmann, Prof. Heinrich Hussmann, Softwaretechnologie 31 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(); Prof. Uwe Aßmann, Prof. Heinrich Hussmann, Softwaretechnologie 32

17 Architektur interaktiver Systeme 3 Benutzungsoberfl ächen.. Bringe Ereignisse, auslösende Fensterelemente (Sicht) und Modell zusammen Softwaretechnologie, Prof. Uwe Aßmann, Prof. Heinrich Hussmann 33 Graphische Benutzungsoberflächen 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. Prof. Uwe Aßmann, Prof. Heinrich Hussmann, Softwaretechnologie 34

18 Widgets und Datenstrukturen Fensterstrukturen sind hierarchisch (Einkapselung von Widgets) Datenstruktur in Anwendung wird den Widget-Hierarchien zugeordnet Screen-Buffer zeigt die Widget-Struktur bitweise (paint()) widget- jdk- Observer Observer View 1 - Widget Tree 1 (Fenster-Struktur) Modell: Datenstruktur in Anwendungslogik (und Datenbank) Screen Buffer View 2 - Widget Tree 2 (Fenster-Struktur) Prof. Uwe Aßmann, Prof. Heinrich Hussmann, Softwaretechnologie 35 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 Observer des Modells, Vorbereitung des Play-Out, callbacks) Anschluß des Modell-Reaktionscode auf Benutzereingaben (Controller ist 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. die Reaktionsobjekte des Modells als Listener benachrichtigt und ausgeführt werden (Play-In) Bei denen die GUI-Views auf Modelländerungen durch Neuanzeigen reagieren (Play-Out) Der Kontrollfluß eines GUI-Programms wird nie explizit spezifiziert, sondern ergibt sich aus den Aktionen des Benutzers Das GUI-Programm reagiert nur (reaktives System) Prof. Uwe Aßmann, Prof. Heinrich Hussmann, Softwaretechnologie 36

19 Aufbau der Widget-Struktur 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 Prof. Uwe Aßmann, Prof. Heinrich Hussmann, Softwaretechnologie 37 Architektur interaktiver Systeme 4 Aufbau der Benutzungsoberfl äche (Widget-Hierarchie) mit Swing Softwaretechnologie, Prof. Uwe Aßmann, Prof. Heinrich Hussmann 38

20 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) Prof. Uwe Aßmann, Prof. Heinrich Hussmann, Softwaretechnologie 39 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,... Prof. Uwe Aßmann, Prof. Heinrich Hussmann, Softwaretechnologie 40

21 AWT/Swing-Klassenhierarchie (Ausschnitt) Dies ist nur ein sehr kleiner Ausschnitt Präfixe "java." und "javax." hier weggelassen. lang.object awt.component awt.container swing.jcomponent awt.window swing. JButton swing. JLabel swing. JTextComponent swing. JPanel swing. JFrame swing. JTextField Prof. Uwe Aßmann, Prof. Heinrich Hussmann, Softwaretechnologie 41 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 Prof. Uwe Aßmann, Prof. Heinrich Hussmann, Softwaretechnologie 42

22 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 Prof. Uwe Aßmann, Prof. Heinrich Hussmann, Softwaretechnologie 43 Zähler-Beispiel: Grobentwurf der Oberfläche JPanel valuepanel JPanel buttonpanel CounterFrame cf abgeleitet von JFrame Prof. Uwe Aßmann, Prof. Heinrich Hussmann, Softwaretechnologie 44

23 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) Prof. Uwe Aßmann, Prof. Heinrich Hussmann, Softwaretechnologie 45 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. content pane menu bar layered pane glass pane In JFrame ist definiert: Container getcontentpane(); Prof. Uwe Aßmann, Prof. Heinrich Hussmann, Softwaretechnologie 46

24 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); Prof. Uwe Aßmann, Prof. Heinrich Hussmann, Softwaretechnologie 47 Zähler-Beispiel: Entwurf der Wertanzeige JPanel valuepanel JLabel valuelabel JTextField valuedisplay Prof. Uwe Aßmann, Prof. Heinrich Hussmann, Softwaretechnologie 48

25 TextComponent, TextField, Label, Button JTextComponent: Oberklasse von JTextField und JTextArea public void settext (String t); public String gettext (); public void seteditable (boolean b); JTextField: Textfeld mit einer Zeile public JTextField (int length); JLabel: Einzeiliger unveränderbarer Text public JLabel (String text); Component Container JComponent JTextComponent JTextField JButton JLabel JButton: Druckknopf mit Textbeschriftung public JButton (String label); Prof. Uwe Aßmann, Prof. Heinrich Hussmann, Softwaretechnologie 49 Die Sicht (View): Elemente der Wertanzeige class CounterFrame extends JFrame { JPanel valuepanel = new JPanel(); JTextField valuedisplay = new JTextField(10); JPanel buttonpanel = new JPanel(); public CounterFrame (Counter c) { settitle("swingcounter"); valuepanel.add(new JLabel("Counter value")); valuepanel.add(valuedisplay); valuedisplay.seteditable(false); getcontentpane().add(valuepanel); getcontentpane().add(buttonpanel); pack(); setvisible(true); Prof. Uwe Aßmann, Prof. Heinrich Hussmann, Softwaretechnologie 50

26 Zähler-Beispiel: Entwurf der Bedienelemente JPanel buttonpanel JButton countbutton JButton resetbutton JButton exitbutton Prof. Uwe Aßmann, Prof. Heinrich Hussmann, Softwaretechnologie 51 Die Sicht (View): Bedienelemente 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); buttonpanel.add(countbutton); buttonpanel.add(resetbutton); buttonpanel.add(exitbutton); getcontentpane().add(buttonpanel); pack(); setvisible(true); Prof. Uwe Aßmann, Prof. Heinrich Hussmann, Softwaretechnologie 52

27 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 Prof. Uwe Aßmann, Prof. Heinrich Hussmann, Softwaretechnologie 53 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 Prof. Uwe Aßmann, Prof. Heinrich Hussmann, Softwaretechnologie 54

28 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) Prof. Uwe Aßmann, Prof. Heinrich Hussmann, Softwaretechnologie 55 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 Prof. Uwe Aßmann, Prof. Heinrich Hussmann, Softwaretechnologie 56

29 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); Prof. Uwe Aßmann, Prof. Heinrich Hussmann, Softwaretechnologie 57 Model-View-Controller-Architektur GUI-Reagiert-Auf-Modelländerungen: Observer (Play-Out) Modell-Reagiert-Auf-View: Controller (Play-In) View Controller <<beobachtet>> bc: ButtonController cf: CounterFrame Play-In Play-Out <<beobachtet>> <<steuert>> Model c: Counter ctr = 7 Counter ctr + count() + reset() + getvalue() Prof. Uwe Aßmann, Prof. Heinrich Hussmann, Softwaretechnologie 58

30 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); // view listens at model public void update (Observable o, Object arg) { Counter c = (Counter) o; valuedisplay.settext(string.valueof(c.getvalue())); Prof. Uwe Aßmann, Prof. Heinrich Hussmann, Softwaretechnologie 59 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); Prof. Uwe Aßmann, Prof. Heinrich Hussmann, Softwaretechnologie 60

31 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 // Die Steuerung belauscht die Knöpfe class ButtonController // Controller implements ActionListener { Counter mycounter; // widget-observer public void actionperformed (ActionEvent event) { String cmd = event.getactioncommand(); if (cmd.equals("count")) mycounter.count(); // Aktion auf Modell if (cmd.equals("reset")) mycounter.reset(); // Aktion if (cmd.equals("exit")) System.exit(0); // Aktion public ButtonController (Counter c) { mycounter = c; Prof. Uwe Aßmann, Prof. Heinrich Hussmann, Softwaretechnologie 61 Play-In, Zähler-Beispiel: Anbindung des Controllers an mehrere Views (Subjekte) 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 view countbutton.addactionlistener(bc); buttonpanel.add(countbutton); // controller listens at another view resetbutton.addactionlistener(bc); buttonpanel.add(resetbutton); // controller listens at another view exitbutton.addactionlistener(bc); buttonpanel.add(exitbutton);... Prof. Uwe Aßmann, Prof. Heinrich Hussmann, Softwaretechnologie 62

32 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); Prof. Uwe Aßmann, Prof. Heinrich Hussmann, Softwaretechnologie 63 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)... Prof. Uwe Aßmann, Prof. Heinrich Hussmann, Softwaretechnologie 64

33 Überblick MVC c:controller c:controller c:controller user input observer direct change messages 1 1 v:view v:view v:view * model change model read * change messages observer 1 1 change messages observer m:model [Herrmann] {xor Prof. Uwe Aßmann, Prof. Heinrich Hussmann, Softwaretechnologie 65 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? Prof. Uwe Aßmann, Prof. Heinrich Hussmann, Softwaretechnologie 66

34 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 Prof. Uwe Aßmann, Prof. Heinrich Hussmann, Softwaretechnologie 67 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. Prof. Uwe Aßmann, Prof. Heinrich Hussmann, Softwaretechnologie 68