Informatik 12/13 (G9)

Diese Seite ist nicht editierbar. Sie können den Quelltext sehen, jedoch nicht verändern. Kontaktieren Sie den Administrator, wenn Sie glauben, dass hier ein Fehler vorliegt.
====== Weitere Design Patterns ("Entwurfsmuster", "Architekturmuster") ======
Wir haben bereits das [[listen:kompositum:start|Kompositum als Design Pattern]] kennengelernt. 

===== Observer-Pattern =====
<WRAP center round info 80%>
{{ :designpattern:mvc:pasted:20250213-150506.png?500}}
Das **Observer-Muster** dient der **Benachrichtigung anderer** (von einem Objekt abhängiger) **Objekte über Änderungen**. Die zu beobachtende Klasse (**Subject**) verfügt hierzu über die **Möglichkeit, Beobachter an- und abzumelden sowie zum Benachrichtigen der angemeldeten Beobachter**. Die **Beobachterklasse** (Observer) benötigt lediglich eine **Methode, die bei Aktualisierung der beobachteten Klasse aufgerufen wird**. Damit es zu einem Subject mehrere Observer geben kann, definiert man ein Interface, das alle Observer-Klassen implementieren. \\ \\ 
Ein [[https://en.wikipedia.org/wiki/Observer_pattern#UML_class_and_sequence_diagram|ausführlicheres Klassendiagramm finden Sie auf Wikipedia.]]
</WRAP>

Ein Beispiel für das Observer-Pattern folgt gleich unten zusammen mit dem Model-View-Controller-Pattern.


===== Model-View-Controller Pattern =====
<WRAP center round info 80%>
{{ :designpattern:mvc:pasted:20250213-150536.png?500}}
Die **Model-Komponente** enthält die zu verwaltenden Daten und besitzt Methoden zum Ändern der Daten. Die **View-Komponente** (Präsentationsschicht) dient zur **Darstellung der Daten** aus dem Modell (z.B. am Bildschirm oder auf einer Webseite) und zur **Entgegennahme von Steuerbefehlen vom Benutzer** (z.B. Eingaben über Tastatur und Maus). Der **Controller** ist die Steuerungseinheit, **verwaltet die View-Komponente(n) und das Model** und **verarbeitet Befehle des Benutzers**. Das Muster funktioniert nach dem Schema rechts (nicht als Klassendiagramm zu verstehen!). \\ \\ 

Im Diagramm bezeichnen **durchgezogene Pfeile direkte Assoziationen** (die View "kennt" das Model, der Controller "kennt" Model und View), **gestrichelte Pfeile** bezeichnen **indirekte Assoziationen, z.B. über das Observer-Pattern**. So ist der Controller ein Observer der View, die den Controller bei Benutzereingaben verständigt. Die View ist ein Observer des Models, das die View verständigt, wenn sich die Daten geändert haben, damit die View die Darstellung entsprechend erneuert. \\ \\ 
</WRAP>

<WRAP center round tip 60%>
Das Observer-Muster ermöglicht es hier, eine Komponente über Änderungen (z.B. im Model) zu informieren, ohne dass diese beim Erstellen der Subject-Klasse direkt bekannt sein muss (im Sinne der oben eingezeichneten, durchgezogenen Pfeile). Ein Observer wird beim beobachteten Objekt (Subject) registriert (und kann auch wieder entfernt werden). Ferner besitzt jedes Subject eine Methode zur Aktualisierung (notify), die bei jedem registrierten Observer die Methode update aufruft.
</WRAP>


===== Beispiel: Button, der Klicks zählt =====
Hier eine beispielhafte MVC-Implementierung eines Buttons, der zählt, wie oft auf ihn geklickt wurde und dies als Button-Beschriftung anzeigt.

<HTML>

<div class="java-online" style="height: 650px; width: 100%" data-java-online="{'withBottomPanel': true, 'id': 'mvc-example', 'speed': 'max'}">

<script type="text/plain" title="Controller.java">
new Controller();

class Controller implements ButtonListener {
   
   private View view;      // Der Controller "kennt" die View
   private Model model;    // Der Controller "kennt" das Model

   public Controller() {
      model = new Model();
      view = new View(50, 50, "Hier klicken!", model);
      view.addButtonListener(this);       // Der Controller registriert sich selbst bei der View als ButtonListener
   }
   
   /**
    * onClick() wird von der View immer dann aufgerufen, 
    * wenn sich der Mauszeiger über dem Button befindet und
    * der Mausbutton losgelassen wird ("MouseUp"-Ereignis).
    */
  	public void onClick() {
      model.increase();
  	}

}
</script>

<script type="text/plain" title="View.java">
interface ButtonListener {
   void onClick();
}

class View extends Rectangle implements MyChangeListener {
   
   Text text;
   ArrayList<ButtonListener> buttonListenerList = new ArrayList<>();    // Liste der Observer, die auf das onClick-Ereignis der View lauschen
   Model model;      // Die View "kennt" das Model

   View(double top, double left, String aufschrift, Model model) {
      super(left, top, 10, 10);
      text = new Text(left + 10, top + 10, 40, aufschrift);
      setWidth(text.getWidth() + 20);
      setHeight(text.getHeight() + 20);
      setFillColor(Color.gray);
      setBorderColor(Color.blue); 
      text.bringToFront();
      text.setFillColor(Color.white);
      this.model = model;
      model.addChangeListener(this);         // Die View registriert sich selbst beim Model als ChangeListener
   }

   /**
    * Beim Runterdrücken des Mausbuttons verschieben wir den Button ein 
    * Stück nach rechts unten
    */
   public void onMouseDown(double x, double y, int key) {
      move(3, 3);
      text.move(3, 3);
   }

   /**
    * Beim Loslassen des Mausbuttons verschieben wir den Button ein 
    * Stück nach links oben und benachrichtigen alle ButtonListener
    * über den erfolgten Button-Klick.
    */
   public void onMouseUp(double x, double y, int key) {
      move(-3, -3);
      text.move(-3, -3); 
      notify1();
   }

   /**
    * Registriert einen ButtonListener
    */
   public void addButtonListener(ButtonListener listener) {
      buttonListenerList.add(listener);
   }

   /**
    * Deregistriert einen ButtonListener
    */
   public void removeButtonListener(ButtonListener listener) {
      buttonListenerList.remove(listener);
   }
 
   /**
    * Verständigt alle ButtonListener über den erfolgten 
    * Button-Klick
    */
   private void notify1() {
      for(ButtonListener listener : buttonListenerList) {
         listener.onClick(); 
      }
   }

   /**
    * Die View ist ChangeListener des Models. Wenn sich das 
    * Model ändert, wird onChange aufgerufen und sorgt dafür, 
    * dass die grafische Darstellung des Buttons angepasst wird.
    */
  	public void onChange() {
    		text.setText(model.getCounter() + "-mal geklickt!");
      setWidth(text.getWidth() + 20);
  	}

}
</script>

<script type="text/plain" title="Model.java">
interface MyChangeListener {
   void onChange();
}


class Model {
   
   private int counter = 0;         // Zustand des Models
   
   ArrayList<MyChangeListener> changeListenerList = new ArrayList<>();   // ChangeListener, die auf das onChange-Ereignis des Models lauschen

   public void increase() {
      counter++;
      notify1();         // die ChangeListener benachrichtigen!
   }

   public int getCounter() {
      return counter;
   }

   /**
    * ChangeListener registrieren
    */
   public void addChangeListener(MyChangeListener listener) {
      changeListenerList.add(listener);
   }

   /**
    * ChangeListener deregistrieren
    */
   public void removeChangeListener(MyChangeListener listener) {
      changeListenerList.remove(listener);
   }

   /**
    * Benachrichtigt alle ChangeListener über die Änderung
    * des Models.
    */
   private void notify1() {
      for(MyChangeListener listener : changeListenerList) {
         listener.onChange();
      }
   }

}
</script>

</div>

</HTML>

<WRAP center round tip 60%>
In der Praxis wird man das MVC-Pattern nicht für so kleine Komponenten wie diesen Button verwenden. Eine Button-Klasse wäre vielmehr ein Bestandteil der View-Komponente. Bei großen Projekten ist das MVC-Pattern aber ungemein nützlich: Zum einen ermöglicht es, das Programm so zu gestalten, dass später die View-Komponente mit wenig Aufwand ausgetauscht werden kann (sie veraltet am schnellsten...) oder eine weitere View-Komponente hinzugefügt werden kann. Zum anderen hilft die Trennung zwischen Model, View und Controller, Ordnung zu halten und den Überblick zu bewahren.
</WRAP>

===== Aufgabe 1 =====
{{ :designpatterns:pasted:20220207-085953.png}}
Im Programmierkasten unten findest Du den Beginn einer View-Klasse und einer Controller-Klasse für ein Schalterelement (siehe Bild rechts). Per Mausklick soll zwischen den Zuständen "aus" (grau) und "an" (grün) umgeschaltet werden können. Ergänze die beiden Klassen und schreibe eine geeignete Model-Klasse, so dass insgesamt das MVC-Pattern verwirklicht wird! 

<HTML>

<div class="java-online" style="height: 650px; width: 100%" data-java-online="{'withBottomPanel': true, 'id': 'mvc-example1', 'speed': 'max'}">

<script type="text/plain" title="View.java">
class SchalterView extends Group {
   
   Circle kreis;
   Circle c1;
   Rectangle r;
   Circle c2;

   double mx1;
   double mx2;

   SchalterView(double top, double left, double width, double height) {
      
      double r1 = height / 2;
      add(c1 = new Circle(left + r1, top + r1, r1));
      add(c2 = new Circle(left + width - r1, top + r1, r1));
      add(r = new Rectangle(left + r1, top, width - 2 * r1, height));
      
      mx1 = left + r1;
      mx2 = left + width - r1;
      add(kreis = new Circle(mx1, top + r1, r1 * 0.8));
      kreis.setFillColor(Color.white); 

      einschalten();
   }

   void setFillColor(Color color) {
      c1.setFillColor(color);
      c2.setFillColor(color);
      r.setFillColor(color);
   }

   void einschalten() {
      setFillColor(Color.green);
      kreis.moveTo(mx2, getCenterY());
   }

   void ausschalten() {
      setFillColor(Color.gray);
      kreis.moveTo(mx1, getCenterY());
   }

   public void onMouseUp(double x, double y, int key) {
      
   }

}
</script>

<script type="text/plain" title="Controller.java">
new Controller();

class Controller {
   SchalterView view;

   Controller() {
      view = new SchalterView(50, 50, 200, 80);
   }


}
</script>

<script type="text/plain" title="Model.java">

</script>

</div>

</HTML>

[[.loesung1:start|Hier geht's zur Lösung!]]