Aufgabe Malen zum Software-Engineering. Karl Friedrich Gebhardt

Transkript

1 Aufgabe Malen zum Software-Engineering Karl Friedrich Gebhardt 8. Februar 2017

2 c 2010 Karl Friedrich Gebhardt Auflage vom 8. Februar 2017

3 Aufgabe Das folgende Dokument enthält eine Reihe von aufeinander aufbauenden Aufgaben, an denen hauptsächlich die Anwendung von Entwurfsmustern geübt werden soll. Außerdem soll Erfahrung im Programmieren und im Erstellen von UML-Diagrammen gewonnen werden. Die Aufgaben sind nicht im Team, sondern einzeln durchzuführen. Die Wahl der Programmiersprache ist freigestellt. Allerdings kann eine kompetente Betreuung bezüglich Programmiersprache nur in Java erfolgen. Abzugeben ist diese Dokumentation mit den Lösungen. i

4 ii

5 Inhaltsverzeichnis 1 Das Beispiel Malen 1 2 Entwurfsmuster Factory Method 5 3 Entwurfsmuster Abstract Factory 7 4 Entwurfsmuster Prototype 9 5 Entwurfsmuster Composite 11 6 Entwurfsmuster Bridge 13 7 Entwurfsmuster Decorator 15 8 Entwurfsmuster Observer 19 iii

6 Kapitel 1 Das Beispiel Malen Mit dem folgenden Java-Programm Malen kann man mit der Maus in verschiedenen Farben auf ein JPanel malen. import import import java.awt.*; java.awt.event.*; javax.swing.*; public class Malen implements ActionListener, ItemListener, MouseMotionListener { private Container behaelter; public void setbehaelter (Container behaelter) { this.behaelter = behaelter; } private int altesx = 0; private int altesy = 0; private Color aktuellefarbe = Color.black; private JButton loeschknopf; private JComboBox farbwahl; private JButton endeknopf; private static final String private static final String private static final String private static final String private static final String schwarz = "Schwarz"; rot = "Rot"; gelb = "Gelb"; gruen = "Grün"; blau = "Blau"; public void init () { behaelter.setlayout (new FlowLayout ()); behaelter.setbackground (Color.gray); loeschknopf = new JButton ("Löschen"); loeschknopf.addactionlistener (this); loeschknopf.setforeground (Color.black); loeschknopf.setbackground (Color.lightGray); behaelter.add (loeschknopf); farbwahl = new JComboBox (); farbwahl.additemlistener (this); farbwahl.additem (schwarz); farbwahl.additem (rot); farbwahl.additem (gelb); farbwahl.additem (gruen); farbwahl.additem (blau); farbwahl.setforeground (Color.black); farbwahl.setbackground (Color.lightGray); behaelter.add (new JLabel ("Farbe: ")); 1

7 2 KAPITEL 1. DAS BEISPIEL MALEN behaelter.add (farbwahl); endeknopf = new JButton ("Ende"); endeknopf.addactionlistener (this); endeknopf.setforeground (Color.black); endeknopf.setbackground (Color.lightGray); behaelter.add (endeknopf); behaelter.addmousemotionlistener (this); } public void actionperformed (ActionEvent ereignis) { Object ereignisquelle = ereignis.getsource (); if (ereignisquelle == loeschknopf) { behaelter.repaint (); } else if (ereignisquelle == endeknopf) { System.exit (0); } } public void itemstatechanged (ItemEvent e) { if (e.getitem () == schwarz) aktuellefarbe = Color.black; else if (e.getitem () == rot) aktuellefarbe = Color.red; else if (e.getitem () == gelb) aktuellefarbe = Color.yellow; else if (e.getitem () == gruen) aktuellefarbe = Color.green; else if (e.getitem () == blau) aktuellefarbe = Color.blue; } public void mousedragged (MouseEvent e) { Graphics g = behaelter.getgraphics (); g.setcolor (aktuellefarbe); g.drawline (altesx, altesy, e.getx (), e.gety ()); altesx = e.getx (); altesy = e.gety (); } public void mousemoved (MouseEvent e) { altesx = e.getx (); altesy = e.gety (); } public void addiere (JComponent komponente) { behaelter.add (komponente); } public static void { } JFrame main (String[] argument) f = new JFrame ("Malen"); Malen m = new Malen (); m.setbehaelter (f.getcontentpane ()); m.init (); f.pack (); // Trick: Erzeugt Peer-Frame f.setsize (600, 400); f.setvisible (true); } Die Aufgaben dieses ersten Kapitels dienen dazu, das Programm näher kennenzulernen und durch Verbesserungen des Programms die Programmierfähigkeiten aufzuwärmen. Aufgaben:

8 3 Schreiben Sie die Klasse Malen ab. Übersetzen Sie das Programm und lassen Sie es als Anwendung laufen. 1. Erweitern Sie das Programm um die Farben Zyan (Color.cyan) und Magenta (Color.magenta). 2. Beim Farbwahlmenü soll die Hintergrund-Farbe die aktuelle Mal-Farbe sein. Die Vordergrund-Farbe soll man gut sehen können, d.h. soll Weiß oder Schwarz oder noch etwas Intelligenteres sein. 3. Wenn das Fenster überdeckt, vergrößert oder verkleinert wird, dann bleibt die Zeichnung im allgemeinen nicht erhalten, weil wir nicht dafür gesorgt haben, dass in diesen Fällen die Zeichnung wiederhergestellt wird. In dieser Übung wollen wir diesen Mangel beheben. Unsere Zeichnung besteht aus einer großen Anzahl kurzer Striche, die wir uns in einem Objekt der Klasse java.util.arraylist<strich> merken. Dazu ist es aber notwendig für die Striche eine eigene Klasse zu definieren, z.b. Strich. Ferner müssen wir unsere graphische Benutzeroberfläche etwas erweitern. Insbesondere benötigen wir ein JPanel, auf das wir unsere Zeichnung malen. Folgende Schritte sind nacheinander durchzuführen: (a) In der Klasse Malen bekommt behaelter ein BorderLayout. (b) Definieren Sie ein Datenelement vom Typ JPanel z.b mit Namen menue. Dieses wird instanziiert und mit behaelter.add (menue, BorderLayout.NORTH) oben in behaelter eingefügt. (c) Nun werden alle GUI-Komponenten anstatt in behaelter in menue eingefügt. (d) Schreiben Sie eine Klasse Zeichnung, die von JPanel erbt. Sie hat ein Datenelement vom Typ ArrayList<Strich>, das dann alle Strichobjekte aufnehmen soll. Dies muss instanziiert werden. (e) Schreiben Sie in der Klasse Zeichnung eine Methode loesche, die die ArrayList<Strich> neu instanziiert und dann die Methode repaint () aufruft. (f) Definieren Sie in der Klasse Malen ein Datenelement vom Typ Zeichnung, instanziieren Sie es und fügen Sie es in behaelter an der Stelle BorderLayout.CENTER ein. (g) Rufen Sie in der Methode init (letzte Zeile) die Methode addmousemotionlistener anstatt für behaelter für das Zeichnung-Objekt auf. (h) In der Methode actionperformed wird, wenn der Knopf Löschen gedrückt wurde, für das Zeichnung-Objekt nur die Methode loesche () aufgerufen. (i) In der Methode mousedragged wird das Graphics-Objekt anstatt vom behaelter von dem Zeichnung-Objekt geholt. (j) Schreiben Sie die Klasse Strich. (k) Das Programm sollte jetzt wieder getestet werden.

9 4 KAPITEL 1. DAS BEISPIEL MALEN (l) Schreiben Sie in der Klasse Zeichnung eine Methode addiere, um Objekte vom Typ Strich an die ArrayList zu addieren. (m) In der Methode mousedragged wird ein Strich-Objekt angelegt und mit addiere der Zeichnung hinzugefügt. (n) Für eine JComponente und das ist unsere Klasse Zeichnung wird die Methode paintcomponent (Graphics g) aufgerufen, wenn die Komponente neu dargestellt werden soll. Also müssen wir in Zeichnung die Methode public void paintcomponent (Graphics g) { super.paintcomponent (g); } definieren und so überschreiben, dass der Inhalt des ArrayList-Objekts neu gezeichnet wird. 4. Wahrscheinlich kommt bei Ihnen die Codesequenz g.setcolor (...); g.drawline (...); mindestens zweimal vor. Solche Codewiederholungen sind schwer wartbar und fehleranfällig. Der Code gehört eigentlich in die Klasse Strich. Definieren Sie also in dieser Klasse eine Methode public void zeichne (Graphics g)..., die einen Strich zeichnet. Verwenden Sie diese Methode anstatt der oben erwähnten Codesequenz. 5. Schreiben Sie eine Klasse DoppelStrich, die von der Klasse Strich erbt und die jeden Strich doppelt zeichnet (z.b. um drei Pixel versetzt). Wende diese Klasse an, wobei nur in der Methode mousedragged an einer einzigen Stelle der Klassenname Strich durch DoppelStrich ersetzt werden muss. 6. Bieten Sie für die beiden Stricharten ein Auswahlmenü an. 7. Bieten Sie weitere Strich arten an, d.h. irgendwelche interessante Verbindungen zwischen zwei Punkten (Rechtecke, Kreise usw). Die Methoden der Klasse Graphics können Sie da auf Ideen bringen. 8. Fügen Sie den bisher erstellten Code als Ergebnis in Ihre Dokumentation ein. 9. Erstellen Sie ein UML-Klassendiagramm und fügen Sie es in Ihre Dokumentation ein. 10. Kommentieren Sie das Design der Klassen Strich und DoppelStrich.

10 Kapitel 2 Entwurfsmuster Factory Method Wahrscheinlich haben Sie zur Unterscheidung der Stricharten in der Methode mousedragged einen if-else-konstrukt oder ein switch verwendet. Solche Konstrukte sind schwer zu warten. Ferner ist Ihre interessante Verbindung zwischen zwei Punkten vielleicht so, dass es nicht vernünftig ist, sie von Strich erben zu lassen. Wir wollen diese Probleme unter Ausnutzung des Polymorphismus folgendermaßen lösen: Aufgaben: 1. Definieren Sie in einer eigenen Datei eine Schnittstelle, die alle möglichen Verbindungen repräsentiert und folgende Methoden deklariert: public interface Verbindung void zeichne (Graphics g) Verbindung newverbindung (...) String tostring () 2. Lassen Sie Strich und alle anderen Verbindungstypen diese Schnittstelle implementieren. Dabei gibt newverbindung ein neues Strich-Objekt bzw entsprechend andere Objekte zurück. tostring gibt einfach den Klassennamen zurück, also etwa "Strich". 3. Ersetzen Sie in Zeichnung die Klasse Strich durch die Schnittstelle Verbindung. 4. Definieren Sie für jeden Verbindungstyp ein konstantes Objekt. (Eleganter: Legen Sie ein Feld von Verbindungen an, das dann alle konstanten Verbindungs-Objekte enthält.) Diese Objekte addieren Sie anstatt der Strings an die Auswahl-Combobox für die Verbindungstypen. (JComboBox ruft für jedes Item tostring () auf, um es darzustellen.) 5. Falls nicht schon geschehen, definieren Sie ein Datenelement vom Typ Verbindung etwa mit Namen aktuelleverbindung. In itemstatechanged belegen Sie dieses Klassenelement einfach mit e.getitem (), wenn itemstatechanged von der entsprechenden Combobox aufgerufen wird. 5

11 6 KAPITEL 2. ENTWURFSMUSTER FACTORY METHOD 6. Ersetzen Sie in mousedragged den if-else- oder switch-konstrukt durch einen einzigen newverbindung-aufruf für die aktuelle Verbindung. 7. Fügen Sie den bisher erstellten Code als Ergebnis in Ihre Dokumentation ein. 8. Erstellen Sie ein UML-Klassendiagramm. 9. Wie korrespondieren Ihre Klassen und deren Methoden zum Entwurfsmuster Factory Method bzw. welche Variante von Factory Method wird hier verwendet? Wie sähe die andere Variante aus?

12 Kapitel 3 Entwurfsmuster Abstract Factory Es gibt Leergut und Vollgut. Das Leergut kann Leergut oder Vollgut umrahmen und passt dabei seine Größe an. Das Vollgut kann in Leergut eingepasst werden. Dabei passt das Vollgut seine Größe an. Das Ganze gibt es für Rechtecke und Ovale, die aber gegenseitig nicht verwendbar sind. Bemerkung: Ein vernünftigeres Beispiel wären Schrauben und Muttern, metrisch und amerikanisch! Allerdings ist das nicht ohne weiteres in die bestehende Software zu integrieren. Aufgaben: 1. Diskutieren Sie, inwiefern Leer- und Vollgut etwas mit dem Entwurfsmuster Abstract Factory zu tun hat. (Was sind die Produkte? Was ist die Produktfamilie? Was benötigt man noch für das Muster?) 2. Erstellen Sie ein UML-Klassendiagramm. 3. Implementieren Sie das Klassendiagramm. 4. Fügen Sie den bisher erstellten Code als Ergebnis in Ihre Dokumentation ein. 5. Wie korrespondieren ihre Klassen und deren Methoden zum Entwurfsmuster Abstract Factory? 7

13 8 KAPITEL 3. ENTWURFSMUSTER ABSTRACT FACTORY

14 Kapitel 4 Entwurfsmuster Prototype Beim Entwurfsmuster Factory Method haben wir neue Verbindungen letztlich durch einen Kontruktoraufruf erzeugt. Jetzt wollen wir neue Verbindungen erzeugen, indem wir einen Prototypen (Strich, DoppelStrich usw.) klonen. Für die folgende Übung sollten Sie von dem Code ausgehen, den Sie zum Kapitel Factory Method erstellt haben. Aufgaben: 1. Schnittstelle Verbindung: Die Methode newverbindung (...) wird gestrichen. Stattdessen kommen neu hinzu: public Object clone (); public void aktualisierekoord (int xe, int ye); public void aktualisierefarbe (Color farbe); public Color getfarbe (); Ferner erweitert Verbindung die Schnittstelle Cloneable. 2. Lassen Sie Strich und alle anderen Verbindungstypen diese Schnittstelle implementieren. tostring gibt einfach den Klassennamen zurück, also etwa "Strich". 3. Die Item-Objekte der StrichWahl-JComboBox sind ja Verbindungen. Diese Verbindungen sollten jetzt (falls nicht sowieso schon gemacht) mit einer vernünftigen Anfangsfarbe, also etwa Schwarz angelegt werden. 4. altesx und altesy und aktuellefarbe wollen wir jetzt in den Prototypverbindungen verwalten. Daher können diese herausgestrichen werden. Dazu müssen dann noch einige Anpassungen im Code erfolgen. 5. Ersetzen Sie in mousedragged den newverbindung-aufruf durch einen clone ()-Aufruf. 6. Fügen Sie den bisher erstellten Code als Ergebnis in Ihre Dokumentation ein. 9

15 10 KAPITEL 4. ENTWURFSMUSTER PROTOTYPE 7. Erstellen Sie ein UML-Klassendiagramm. 8. Wie korrespondieren Ihre Klassen und deren Methoden zum Entwurfsmuster Prototype?

16 Kapitel 5 Entwurfsmuster Composite Aufbauend auf der Lösung zum Entwurfsmuster Factory Method wollen wir auch Aggregate von Verbindungen genau so wie eine Verbindung verwenden, d.h. wir wollen keinen Unterschied machen zwischen einer Elementarverbindung und einem Aggregat von Verbindungen. Ferner kann ein Aggregat selbst wieder in einem Aggregat enthalten sein. Aufgaben: 1. Erstellen Sie zunächst ein UML-Klassendiagramm ohne Berücksichtigung von GUI-Klassen. 2. Implementieren Sie das Klassendiagramm. 3. Fügen Sie den bisher erstellten Code als Ergebnis in Ihre Dokumentation ein. 4. Wie korrespondieren Ihre Klassen und deren Methoden zum Entwurfsmuster Composite? 11

17 12 KAPITEL 5. ENTWURFSMUSTER COMPOSITE

18 Kapitel 6 Entwurfsmuster Bridge Die Darstellung der geometrischen Gebilde erfolgt über die Klasse Graphics. Anstatt von Graphics wollen wir andere grafische Systeme verwenden. Z.B. wollen wir die Grafik in einer Textdatei ausgeben, wobei die Pixel durch den Anfangs-Großbuchstaben ihrer Farbe dargestellt werden. Ferner könnten wir die Grafik als SVG-Grafik ausgeben. 1. Diskutieren Sie, inwiefern die oben genannte Problematik etwas mit dem Entwurfsmuster Bridge zu tun hat. (Was ist die Abstraction-Hierarchie? Was ist die Implementor- Hierarchie?) 2. Erstellen Sie ein UML-Klassendiagramm. 3. Implementieren Sie das Klassendiagramm. 4. Fügen Sie den bisher erstellten Code als Ergebnis in Ihre Dokumentation ein. 5. Wie korrespondieren ihre Klassen und deren Methoden zum Entwurfsmuster Bridge? 13

19 14 KAPITEL 6. ENTWURFSMUSTER BRIDGE

20 Kapitel 7 Entwurfsmuster Decorator Im Beispiel zu Abstract Factory wurde ein Grafle zwischen Button pressed und Button released gezeichnet. Damit kann man die grafischen Gebilde größer und sichtbarer zeichnen. Dieses Modell wollen wir hier übernehmen. Dieses Modell hat zunächst folgende Struktur: 15

21 16 KAPITEL 7. ENTWURFSMUSTER DECORATOR Malen aktuellefarbe :Color Prototyp :Grafle[*] aktuellesgrafle :Grafle mousedragged (e :MouseEvent) mousemoved (e :MouseEvent) mousepressed (e :MouseEvent) mousereleased (e :MouseEvent) <<instantiate>> Zeichnung kurve :ArrayList<Grafle> addiere (:Grafle) loesche () paintcomponent (:Graphics) * <<interface>> Grafle zeichne (:Graphics) newgrafle (xa :int, ya :int, xe :int, ye :int, :Color) :Grafle tostring () :String getxa () :int getya () :int getxe () :int getye () :int setxe (:int) setye (:int) GrafleI xa :int ya :int xe :int ye :int farbe :Color Strich DoppelStrich delta :int Rechteck Oval Ein Grafle wird zunächst nur durch Anfangs- und Endpunkt dargestellt.

22 17 Bevor wir es zeichnen, wollen wir aussuchen können, welche Farben und welche Grafle-Arten (Strich, DoppelStrich, Rechteck, Oval usw.) wir addieren. 1. Diskutieren Sie, inwiefern die oben genannte Problematik etwas mit dem Entwurfsmuster Decorator zu tun hat. 2. Erstellen Sie ein UML-Klassendiagramm. 3. Implementieren Sie das Klassendiagramm. Dabei können Sie den bisherigen Code verwenden. 4. Fügen Sie den bisher erstellten Code als Ergebnis in Ihre Dokumentation ein. 5. Wie korrespondieren ihre Klassen und deren Methoden zum Entwurfsmuster Decorator?

23 18 KAPITEL 7. ENTWURFSMUSTER DECORATOR

24 Kapitel 8 Entwurfsmuster Observer Im Kapitel Decorator hatten wir auch eine Lösung gezeigt, bei der ein Grafle blinkt (Blinker). Um das zu realisieren, musste der Blinker-Thread die Methode repaint () von Zeichnung aufrufen. Das verletzt die Flow-Design-Regel, da Zeichnung schon immer die Methode zeichne (...) von Grafle und eben auch Blinker aufruft. <<interface>> Grafle * Zeichnung Strich Blinker Die Verletzung der Flow-Design-Regel hat als Problem zur Folge, dass wir den Fall, dass GrafleI noch keine Zeichnung hat, gesondert behandeln müssen. Die Anwendung des Entwurfsmusters Observer löst dieses Problem. Das derzeitige Klassendiagramm hat folgende Struktur: 19

25 20 KAPITEL 8. ENTWURFSMUSTER OBSERVER Zeichnung addiere (:Grafle) loesche () paintcomponent (:Graphics) Malen aktuellefarbe :Color aktuellesgrafle :Grafle Prototyp :Grafle[*] Dekoration :Dekorator[*] mousedragged (e :MouseEvent) mousemoved (e :MouseEvent) mousepressed (e :MouseEvent) mousereleased (e :MouseEvent) * <<interface>> Grafle zeichne (:Graphics) updatexe (:int) updateye (:int) setzeichnung (:Zeichnung) getzeichnung () :Zeichnung loesche () GrafleI xa :int ya :int xe :int ye :int farbe :Color :Zeichnung updatexe (:int) updateye (:int) loesche () Dekorator :Zeichnung zeichne (:Graphics) updatexe (:int) updateye (:int) newgrafle (:Grafle, xa :int, ya :int, xe :int, ye :int) :Grafle tostring () :String setzeichnung (:Zeichnung) loesche () Farbe Farbe :Color zeichne (:Graphics) Strich xa :int ya :int xe :int ye :int zeichne (:Graphics) updatexe (:int) updateye (:int) DoppelStrich delta :int Rechteck Oval Blinker Stopped :boolean Toggle :boolean :Thread loesche ()

26 21 1. Diskutieren Sie, wie die oben genannte Problematik mit dem Observer-Pattern gelöst wird. 2. Erstellen Sie ein UML-Klassendiagramm. 3. Implementieren Sie das Klassendiagramm. Verwenden Sie dabei den zur Verfügung gestellten Code in ~kfg/swe/blinker.zip. 4. Fügen Sie das Klassendiagramm und den erstellten Code als Ergebnis in Ihre Dokumentation ein.