Das MVC Konzept ModelViewController Realisierung mit Delphi Speyer

Das MVC- Konzept (Model-View-Controller) Realisierung mit Delphi Speyer, 16. 05. 07 Helmut Paulus MPG Trier 1

Überblick 1. Grundlagen der OOP 2. MVC-Architektur 3. Implementierung des Farbenmischers 2

Motivation Problematik der Softwareentwicklung n Komplexität nimmt zu n Pflege immer aufwändiger Lösungen: § Objektorientierte Programmierung § Entwurfsmuster für graphisch Benutzungsoberflächen § MVC: Modell-Ansicht-Steuerung 3

Teil 1 Grundlagen Objektorientierte Programmierung 4

Objektorientierte Programmierung Dinge der Welt Objekte im Sinne der Informatik Beispiel: Farbe RGB-Farbmodell Farbe rot = 23 gruen = 244 blau = 22 5

Objekte Ein Objekt ist das Abbild eines realen oder gedachten Gegenstandes bzw. einer Person. Farbe Attribut rot = 23 gruen = 25 Attributwert blau = 255 Methoden set. Farbe get. Farbe to. HTML. . . • Auftrag - Prozedur • Anfrage - Funktion Ein Objekt wird durch die Werte seiner Attribute festgelegt. Die Methoden bestimmen das Verhalten des Objekts. Objekte sind autonome Bausteine, die bestimmte Teilaufgaben der Anwendung eigenständig erledigen. 6

Klassen und Objekte Klasse TFarbe rot set. Farbe ist Instanz von Objekte Farbe 1 Farbe 2 Farbe 3 rot = 23 rot = 123 rot = 233 set. Farbe Klassen sind Baupläne von Objekte sind Instanzen (Exemplare) von Klassen. 7

Geheimnisprinzip Auf die Eigenschaftswerte wird nicht direkt sondern nur über besondere Lese- und Schreibmethoden zugegriffen. TFarbe Die innere Struktur wird verborgen. - Frot : integer - Fgruen : integer - Fblau : integer Zugriffsmethoden + get. Rot : integer; + set. Rot(r : integer); Bei Delphi gibt es einen speziellen property- Mechanismus, über den durch Zuweisung auf die Eigenschaftswerte zugegriffen werden kann. 8

Erzeugung von Objekte werden mit Konstruktoren erzeugt. TFarbe - Frot : integer - Fgruen : integer - Fblau : integer + constructor create + get. Rot : integer; + set. Rot(r : integer); Konstruktoren sind spezielle Methoden, die • den Speicherbereich eines Objekts anlegen, • die Attribute mit Standardwerten belegen, • eine Referenz auf das Objekt zurückgeben. 9

Erzeugung eines Farbobjekts var Farbe 1 : TFarbe; Deklaration der Objektvariablen Farbe 1 = . . . nil Das Objekt existiert noch nicht ! Farbe 1 : = TFarbe. create; Aufruf des Konstruktors (Der Klassenname wird vorangestellt) Klassenname Farbe 1 = : TFarbe Frot = 255 Fgruen = 255 Fblau = 255 Die Objektvariable erhält eine Referenz auf das Farbobjekt. 10

Arbeiten mit Objekten Der Zugriff auf Objekte erfolgt mit Hilfe der Objektvariablen Schema: Objektvariable. Methode Beispiel: Farbe 1. set. Farbe(0, 0, 0) Das Formularobjekt ruft eine Methode des Farbobjekts auf. Kennt- Beziehung / Assoziation Ein Objekt kann eine Methode eines anderen Objekts nur aufrufen, wenn es dieses kennt, d. h. eine Referenz auf dieses Objekt besitzt. Farb. Form 1 Farbe Das Formularobjekt kennt 1 Farbobjekt und 2 Shape-Objekte. 2 Shape 11

Teil 2 MVC-Architektur 12

MVC-Farbenmischer Steuerung Modell Farbe rot = 23 gruen = 25 blau = 255 Ansicht 13

MVC-Prinzip Ziel: Trennung von Datenhaltung und -verarbeitung, Darstellung und Steuerung. Die Anwendung wird in drei Bereiche aufgeteilt: Modellklasse: Interne Repräsentation der Daten mit Methoden zum Ändern und Abfragen View Ansicht, Darstellung: Ein Modell kann durch mehrere Views angezeigt werden, welche unterschiedliche Sichtweisen des Models darstellen. Controller Steuerung: Verarbeitung der Benutzereingaben § View und Controller bilden zusammen die Benutzeroberfläche (GUI). 14

MVC-Architektur Controller schreibt Steuerung Model liest (Daten, Verarbeitung) View informiert Ansicht Fachkonzept GUI (graphical user interface) 15

Bedingungen § Die interne Datenverarbeitung ist von der Benutzeroberfläche (GUI) gänzlich abgekoppelt. § Das Modell kennt weder View noch Controller. Das bedeutet: In den Datenklassen werden keine View– oder Controllermethoden aufgerufen! § View und Controller kennen das Modell und lesen und schreiben die Daten. Zwischen den GUI-Objekten und dem MODEL-Objekt werden Verbindungen hergestellt, um einen Datenaustausch zu ermöglichen. 16

Vorteile der MVC-Struktur n Änderungen der Benutzeroberfläche haben daher keine Auswirkung auf die interne Verarbeitung der Daten und der Datenstruktur. n n n Verbesserung der Wiederverwendbarkeit klare Strukturierung eines Programms Die Daten können gleichzeitig mehrfach auf unterschiedliche Weise dargestellt werden. 17

Fragen und Probleme n Wie erreicht man die Entkopplung? n Wie greifen View und Controller auf die Daten zu? n Wie können die Views aktualisiert werden, wenn das Modell keinen Zugriff auf sie hat? Wie erfahren die Views, dass sich die Daten des Modells geändert haben? 18

Realisierung in Delphi Entkopplung: § GUI- und Modellklassen in verschiedenen Units halten - View und Controller in einem Formular (u. GUI. pas) unterbringen - Modell-Klasse in einer eigenen Unit (u. Modell. pas) speichern Datenzugriff: § Die GUI-Klasse erhält eine Referenz auf das Modell-Objekt. Der Datenzugriff erfolgt mit Lese- und Schreibmethoden, die das Modell zur Verfügung stellt (z. B. set. Attribut() bzw. get. Attribut(), Zugriff über Properties). Aktualisierungsmöglichkeiten: § Die Views fragen (evtl. permanent) das Modell ab. (Polling) § Die Views werden durch Ereignisse des Modells über Datenänderungen informiert und aktualisieren sich daraufhin. (Selbstdefinierte Ereignisse) § Benachrichtigung mittels Beobachter-Muster (Observer-Pattern) 19

Teil 3 Implementierung des Farbmischers (1. Variante: Abfragen) 20

Spezifikation/Implementierung der Modell-Klasse Festlegung von: Implementierung: • Zugriffsrechten (- private; + public) • Datentypen • Signaturen (Parameter der Methoden) (Unit: u. Farb. Modell. pas) TFarbe - Frot : integer - Fgruen : integer - Fblau : integer; + constructor create + get. Farbe : integer; + set. Farbe(r, g, b : integer) + getrot : integer + getgruen: integer + getblau : integer unit u. Farb. Modell. . . type TFarbe = Class private Frot, Fblau, Fgruen : integer; public constructor create; procedure set. Farbe(r, g, b : integer); function get. Farbe : integer function getrot : integer function getgruen: integer function getblau : integer end; 21

Implementation der Methoden constructor TFarbe. create; begin Frot : = 255; Fgruen: = 255; Fblau : = 255; end; function TFarbe. get. Farbe : Integer; begin result : = Fblau*256+FGruen*256+Frot; end; procedure TFarbe. set. Farbe(r, g, b : integer); begin Frot : = r mod 256; Fgruen : = g mod 256; Fblau : = b mod 256; end; (Listing u. Farb. Modell) 22

Benutzeroberfläche GUI (Formular-Unit): GUI-Objekte: TLabel TEdit TButton TShape TButton 23

Objektverwaltung Das Formular verwaltet die GUI-Objekte und das Modellobjekt. Uses. . . , u. Farb. Modell; TFarb. Form = class(TForm) Farbmischer: TGroup. Box; Label 1: TLabel; rot. Ed: TEdit; ok. Btn: TButton; Ansicht: TGroup. Box; Label 7: TLabel; end. Btn: TButton; Farb. Box: TShape; . . . private { Private-Deklarationen } Farbe : TFarbe; . . . Modell-unit-einbinden kennt Zeiger auf ein Farbobjekt Referenzattribute 24

Objekterzeugung/-zerstörung Die GUI-Objekte, die zur Entwurfzeit ins Formular eingefügt wurden, werden automatisch erzeugt und zerstört. Das Farbobjekt muss zur Laufzeit erzeugt und zerstört werden. Erzeugung mit dem On. Create-Ereignis procedure TFarb. Form. Create(. . . ); begin Farbe : = TFarbe. create; . . . end; Zeiger auf ein Farbobjekt (kennt-Beziehung) Zerstörung mit dem On. Destroy-Ereignis procedure. TFarb. Form. Destroy(. . . ); begin Farbe. Free; end; Speicherbereich freigeben 25

Ereignisgesteuerter Ablauf Szenario: Der Ok_Button (‚übernehmen‘) wird gedrückt: Aktionen: • Werte der Eingabefenster lesen. • Farbobjekt aktivieren (Farbe. set. Farbe(r, g, b)); • Shapes aktualisieren sich (update. Views) Wer macht was? 26

Aktualisierung der Views Ereignisprozedur //Datenfluss: Controller Modell procedure TFarb. Form. ok. Btn. Click(Sender: TObject); //Modelldaten schreiben var r, g, b : integer; begin r : = strtoint(rot. Ed. text); g : = strtoint(gruen. Ed. text); b : = strtoint(blau. Ed. text); Farbe. set. Farbe(r, g, b); //Werte speichern update. Views; //Aktualisierung durch Abfragen end; //Datenfluss: Modell View procedure TFarb. Form. update. Views; //Modelldaten lesen begin Farb. Box. brush. color : = Farbe. get. Farbe; KFarb. Box. brush. color : = clwhite - Farbe. get. Farbe; end; Listing u. Farb. Form 27

Aufgaben I 1. Testen Sie das Programm ‚Farben 0’ und verfolgen Sie den Ablauf mit Hilfe des Einzelschritt-Modus. 2. Erweitern Sie das Farbemodell um folgende Methoden • TFarbe. get. Komplement (Komplementärfarbe) • TFarbe. to. HTML (HTML- Code) Bsp. : #AFB 055, verwenden Sie die Funktion Intto. Hex() Binden Sie beide Methoden in die Anwendung ein. 3. Entwickeln Sie eine zweite Benutzungsoberfläche, die RGB-Farben einzeln anzeigt. (z. B. : in drei Shape-Komponenten) Binden Sie das Farbmodell an die entwickelte Benutzeroberfläche an. 28

Teil 4 Implementierung des Farbmischers (2. Variante: Selbstdefiniertes Ereignis) 29

Ereignisse Ereignis: Zustandsänderung eines Objekts, die mit einer Ereignisprozedur verknüpft ist. Realisierung in Delphi mit Hilfe von Methodenzeigern: Referenzen auf Methoden anderer Objekte Sender Button On. Click Empfänger Formular Button. Click() Methodenzeiger Mit dem Aufruf von On. Click wird die Formularmethode Button. Click() aktiviert. Die Verarbeitung wird an andere Objekte delegiert. 30

Methodenzeiger-Mechanismus Die GUI-Komponenten von Delphi verfügen über eine Vielzahl von Methodenzeigern die mit Ereignissen verknüpft werden können. Beispiel: Onclick Der On. Click-Zeiger hat, wenn er nicht gesetzt ist, den Wert nil. Die Zuweisung einer Methode erfolgt entweder im Objektinspektor oder durch eine Zuweisung zur Laufzeit (z. B. in Form. Create): Button. Onclick : = Buttonclick; Methodenname Methodenzeiger haben wie - andere Variablen auch - einen Datentyp. Dieser bestimmt, mit welchen Typen von Methoden der Zeiger verknüpft werden kann. 31

Deklaration von Methodenzeigertypen Beispiele: type TNotify. Event = procedure(Sender : TObject) of Object; Standardtyp (von Delphi vordefiniert) Methoden mit einem Parameter vom Typ TObject z. B. Onclick- Ereignis TMy. Ereignis = procedure of Object; // Methoden ohne Parameter Variablendeklaration: Var Onclick : TNotify. Event; Ereignis : TMy. Ereignis; 32

Ein Ereignis für das Farbobjekt Das Farbobjekt soll die Views über Datenänderungen informieren. Dazu wird ein Ereignis implementiert, das bei Datenänderung ausgelöst wird, also in der set. Farbe-Methode. Dazu braucht das Modell einen Methodenzeiger, der mit der update. Views- Methode des Formulars verknüpft werden kann. Die Implementation erfordert in vier Schritten: 1. 2. 3. 4. Vereinbarung eines Methodenzeiger-Typs Vereinbarung eines Methodenzeigers Aufruf der Ereignisprozedur über den Methodenzeiger Zuweisung einer Ereignisprozedur Die Schritte (1) – (3) erfolgen in der Modell-Unit, Schritt (4) in der Formular-Unit. 33

Implementation des Ereignisses Ereignis: On. Changed vom Typ TChange. Event type TChange. Event = procedure of object; (1. ) TFarbe = Class. . public. . . On. Changed : TChange. Event; end; (2. ) 1. Deklaration eines Methodenzeigertyps 2. Deklaration einer Referenzvariablen vom Typ des (hier: für eine Prozedur ohne Parameter) Methodenzeigers 34

Auslösen des Ereignisses Modell: procedure TFarbe. set. Farbe(r, g, b : integer); begin Frot : = r mod 256; Fgruen : = g mod 256; Fblau : = b mod 256; //GUI informieren if assigned(On. Changed) then On. Changed; (3) end; 3. Ereignis auslösen Das Modell ruft eine Methode des GUI-Objekts auf, wenn sich seine Daten ändern. 35

Ereignisbearbeitungsmethode type TFarb. Form = class(TForm). . . private Farbe : TFarbe; procedure update. Views; public. . . end; Ereignismethode vom Typ des Methodenzeigers Implementierung: procedure TFarb. Form. update. Views; begin //wird vom Modell aufgerufen Farb. Box. brush. color : = Farbe. get. Farbe; . . . end; 36

Setzen des Methodenzeigers 4. Setzen des Methodenzeigers mit On. Create-Ereignis procedure TFarb. Form. Create(Sender: TObject); begin Farbe : = TFarbe. create; Farbe. On. Changed : = update. Views; (4) end; Der Typ der Methode muss mit dem Typ des Methodenzeigers übereinstimmen. 37

Nachrichtenaustausch : TFarb. Form Start des Programms Button wird gedrückt : TFarbe : TButton Oncreate() : TShape . . . create() Button. Click() set. Farbe() update. Views get. Farbe() Brush. Color : =. . . Ablauf: Ok. Button wird geklickt (Sequenzdiagramm) 38

Aufgaben II Farbenmischer 3. Implementieren Sie das Ereignis ‚Onchanged’. Testen Sie das Programm und verfolgen Sie den Ablauf mit Hilfe des Einzelschritt. Modus. 4. Die Version Farben 3 kann 2 GUIs gleichzeitig darstellen. Untersuchen Sie, wie das 2. Formular eingebunden ist und den Benachrichtungsmechanismus. MVC-Uhr 1. Entwerfen Sie das Modell (Klasse: TUhr - m. TUhr. pas) einer Digitaluhr, die Uhr soll noch nicht selbständig laufen. Entwerfen Sie ein Formular (GUI) (TUhrform - u. Uhr. Form. pas) mit der Möglichkeit, die Zeit (h: min) zu setzen und abzufragen. 2. Die Zeit soll mit Hilfe Schaltfläche jeweils um eine Sekunde erhöht werden. Entwickeln Sie dazu eine Methode. 3. Analysieren Sie das Projekt ‚Uhr mit Ereignis’. Erweitern Sie das Uhrobjekt so, dass die Ansicht über Datenänderungen mit Hilfe eines Ereignisses informiert wird. 39

Literatur und Links n n n Helmut Balzert: Lehrbuch der Software-Technik Siegfried Spolwig: www. oszhdl. be. schule. degymnasiumfaecherinformatikindex. htm K. Merkert: Hohenstaufen-Gymnasium Kaiserlautern http: //hsg. region-kaiserslautern. de/faecher/inf/index. php UML-Werkzeug: n UML-Editor : UMLed. exe http: //www. kubitz-online. de 40