MVC. MVC (engl: Model-View- Controller, deutsch: Modell- Präsentation-Steuerung) ist ein Entwurfsmuster zur Strukturierung von Software, das eine spätere

  • Published on
    05-Apr-2015

  • View
    106

  • Download
    4

Embed Size (px)

Transcript

<ul><li> Folie 1 </li> <li> MVC </li> <li> Folie 2 </li> <li> MVC (engl: Model-View- Controller, deutsch: Modell- Prsentation-Steuerung) ist ein Entwurfsmuster zur Strukturierung von Software, das eine sptere nderung erleichtert und eine Wiederverwendbarkeit der einzelnen Komponenten ermglicht. </li> <li> Folie 3 </li> <li> Wenn z.B. die Daten in der Klasse View anders dargestellt werden sollen, mu nur die Klasse View, aber nicht die Klasse Controller und die Klasse Model gendert (angepat) werden. </li> <li> Folie 4 </li> <li> Zustndigkeiten: </li> <li> Folie 5 </li> <li> Model: Enthlt die darzustellenden Daten und die zugehrigen Methoden. Model ist von View und Controller unabhngig. </li> <li> Folie 6 </li> <li> View: stellt die Daten des Models dar </li> <li> Folie 7 </li> <li> Controller: nimmt die Anwendereingaben (z.B. Mausklick auf Button "+") entgegen und verndert dementsprechend die Daten (Summenbildung) des Modells (mit Hilfe der Methoden des Models). Im Controller steckt die Logik der Reaktion auf die Eingabe. </li> <li> Folie 8 </li> <li> WICHTIG: die Aufteilung der Aufgaben von M, V und C sind nicht 100% eindeutig geregelt und deshalb etwas "interpretierbar". Das gibt Anla zu Diskussionen. Siehe Internet-Diskussionen, wie z.B: http://www.flashforum.de/forum/softwarearchitektur-und- entwurfsmuster/wieder-einmal-mvc-222602.html http://www.flashforum.de/forum/softwarearchitektur-und- entwurfsmuster/wieder-einmal-mvc-222602.html </li> <li> Folie 9 </li> <li> Controller ViewModel Schwarze, durchgezogene Linien bedeuten Assoziationen, rote, gestrichelte Linien bedeuten Events (Ereignisse). damit das Ereignis eingefangen werden kann, mu aus dem Cotroller eine Wanze gemacht werden. damit das Ereignis eingefangen werden kann, mu aus der View eine Wanze gemacht werden. Ereignis </li> <li> Folie 10 </li> <li> Controller ViewModel Schwarze, durchgezogene Linien bedeuten Assoziationen, rote, gestrichelte Linien bedeuten Events (Ereignisse). Tastatur / Maus E VA E(ingabe) V(erarbeitung) A(usgabe) </li> <li> Folie 11 </li> <li> Bevor es hier weiter abstrakt zugeht, soll MVC an einem Beispiel erklrt werden: </li> <li> Folie 12 </li> <li> AUFGABE: Erstellen Sie einen Taschenrechner, der genau ein Textfeld hat und der nur addieren kann. Er soll genau die 2 Buttons = und + haben. Implementieren Sie u.a. die Klassen Controller, </li> <li> Folie 13 </li> <li> View, Model, wobei in Model die mathematischen Berechnungen, in View die GUI und im Controller die Steuerung gemacht werden. Hier das UML... </li> <li> Folie 14 </li> <li> TRController - trView : TRView - trModel : TRModel TRView - trModel : TRModel TRModel - speicherwert : double schwarzer Pfeil: Assoziation roter, gestrichelter geschwungener Pfeil: zeigt vom Ereignis (fire) zur Wanze (Lauscher) </li> <li> Folie 15 </li> <li> Anwender feuert (z.B. durch Eingabe) in der View. Einfangende Methode (der Wanze) im Controller verndert Daten im Model Model feuert (weil Daten im Model gendert wurden). Einfangende Methode (der Wanze) in der View veranlat Bildschirmausgabe. TRController - trView : TRView - trModel : TRModel TRView - trModel : TRModel TRModel - speicherwert : double </li> <li> Folie 16 </li> <li> TRController - trView : TRView - trModel : TRModel TRView - trModel : TRModel TRModel - speicherwert : double Durch das Klicken eines Buttons (= oder +) in der View wird "gefeuert". Dadurch werden in der einfangenden Methode des Controllers die Daten (das Attribut "speicherwert") in Empfang genommen und ins Modell weitergleitet (und dort verarbeitet). Diese nderung veranlat das Model zu feuern. Dadurch wird in der einfangenden Methode der View die Daten (das Attribut "speicherwert") des Models ausgelesen und auf dem Bildschirm ausgegeben. </li> <li> Folie 17 </li> <li> TRController - trView : TRView - trModel : TRModel TRView - trModel : TRModel TRModel - speicherwert : double Wie siehe eine Kette der Informationsverarbeitung aus, d.h: Wer feuert, welche Wanzen treten dann in Aktion und auf welche Daten greifen diese dann zu? </li> <li> Folie 18 Feuer Einfangende Methode der View greift auf die Daten ("speicherwert") des Model zu (fr Bildschirmausgabe)."&gt; </li><li> TRController - trView : TRView - trModel : TRModel TRView - trModel : TRModel TRModel - speicherwert : double Button wird bettigt --&gt; Feuer Einfangende Methode des Controllers verndert die Daten ("speicherwert") des Model, also... --&gt; Feuer Einfangende Methode der View greift auf die Daten ("speicherwert") des Model zu (fr Bildschirmausgabe). </li> <li> Folie 19 </li> <li> Implementieren Sie - soweit dies mit Ihrem bisherigen Wissen mglich ist - M, V und C des obigen Taschenrechners. </li> <li> Folie 20 </li> <li> package taschenrechnermvc15; import java.awt.*; import java.awt.event.ActionEvent; import java.awt.event.ActionListener; import java.util.Observable; import java.util.Observer; import javax.swing.*; </li> <li> Folie 21 </li> <li> public class StartklasseTaschenrechnerMVC15 { public static void main(String[] args) { TRController trController = new TRController(); TRView trView = new TRView(); TRModel trModel = new TRModel(); // Verlinken von M, V und C trController.setTrModel(trModel); trController.setTrView(trView); trView.setTrModel(trModel); // "Prozee" starten trModel.WanzeAnbringen(trView); trView.WanzeAnbringen(trController); } </li> <li> Folie 22 </li> <li> class TRModel extends Observable { private double speicherwert; public TRModel() { speicherwert=0; } public double getSpeicherwert(){ return speicherwert; } </li> <li> Folie 23 </li> <li> public void setSpeicherwert(double wert){ speicherwert=wert; // Dem Model das Feuern ermglichen setChanged(); notifyObservers(); } public void addiereDazu(double wert) { speicherwert=speicherwert+wert; // Dem Model das Feuern ermglichen setChanged(); notifyObservers(); } public void WanzeAnbringen(TRView trView) { this.addObserver(trView); } Falls eine andere View an das Model angebracht werden soll, msste diese Methode gendert werden, d,h. die Klasse Model msste gendert werden. Um dies zu vermeiden, wre z.B. folgendes sinnvoll: </li> <li> Folie 24 </li> <li> public void setSpeicherwert(double wert){ speicherwert=wert; // Dem Model das Feuern ermglichen setChanged(); notifyObservers(); } public void addiereDazu(double wert) { speicherwert=speicherwert+wert; // Dem Model das Feuern ermglichen setChanged(); notifyObservers(); } public void WanzeAnbringen(Observer obs) { this.addObserver(obs); } </li> <li> Folie 25 </li> <li> Bemerkung: Der Typ TRView sollte weder fr Attribute noch fr lokale Variablen oder Parameter in der Model-Klasse auftauchen. Hintergrund ist der, dass das Model theoretisch ohne Vorhandensein irgendwelcher View-Klassen compiliert werden knnen soll. </li> <li> Folie 26 </li> <li> class TRView extends JFrame implements Observer { private TRModel trModel; private JButton buttonPlus; private JButton buttonGleich; private JTextField tfdZahl; public TRView(){ buttonsAnbringen(); } public TRModel getTrModel() { return trModel; } public void setTrModel(TRModel trModel) { this.trModel = trModel; } </li> <li> Folie 27 </li> <li> public String getJTextField() { return tfdZahl.getText(); } public void setJTextField(String str) { this.tfdZahl.setText(str); } public void buttonsAnbringen() { buttonPlus = new JButton("+"); buttonGleich = new JButton("="); tfdZahl = new JTextField("hier Zahl eingeben", 30); </li> <li> Folie 28 </li> <li> // Beim Anklicken dieses Buttons wird ein Ereignis- // objekt geworfen, das durch den String "btn+" // identifiziert wird. buttonPlus.setActionCommand("btn+"); // siehe oben... buttonGleich.setActionCommand("btn="); getContentPane().add(buttonPlus, BorderLayout.EAST); getContentPane().add(buttonGleich, BorderLayout.WEST); getContentPane().add(tfdZahl, BorderLayout.CENTER); this.setSize(200, 100); setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); this.setVisible(true); } </li> <li> Folie 29 </li> <li> public void WanzeAnbringen(TRController tRController) { buttonPlus.addActionListener(tRController); buttonGleich.addActionListener(tRController); } // wird automatisch aufgerufen (ereigniseinfangende // Methode), wenn in TRModel ein Ereignisobjekt // geworfen wird. public void update(Observable m, Object o) { if (m == trModel) { setJTextField(String.valueOf (trModel.getSpeicherwert())); } </li> <li> Folie 30 </li> <li> class TRController implements ActionListener{ private TRView trView; private TRModel trModel; public TRController() { } public TRView getTRView() { return trView; } public TRView getTrView() { return trView; } public void setTrView(TRView trView) { this.trView = trView; } </li> <li> Folie 31 </li> <li> public TRModel getTrModel() { return trModel; } public void setTrModel(TRModel trModel) { this.trModel = trModel; } // wird automatisch aufgerufen // (ereigniseinfangende Methode), // wenn in TRView ein Ereignisobjekt geworfen // wird (Button angeklickt). // siehe nchste Folie </li> <li> Folie 32 </li> <li> public void actionPerformed(ActionEvent ae){ String str; str=ae.getActionCommand(); // Ereignis wird identifiziert if(str.equals("btn+")){ double wert = Double.valueOf(trView.getJTextField()); trModel.setSpeicherwert(wert); } if(str.equals("btn=")){ double wert = Double.valueOf(trView.getJTextField()); trModel.addiereDazu(wert); } </li> <li> Folie 33 </li> <li> AUFGABE: Ergnzen Sie den Taschenrechner um die Funktionen eines handelsblichen Taschenrechners. </li> </ul>