1

Das MVC- Konzept (Model-View-Controller)

Realisierung mit Delphi

Speyer, 16.05.07 Helmut Paulus MPG Trier

2

Überblick

1. Grundlagen der OOP2. MVC-Architektur3. Implementierung des Farbenmischers

3

Motivation

Problematik der Softwareentwicklung Komplexität nimmt zu Pflege immer aufwändiger

Lösungen: Objektorientierte Programmierung Entwurfsmuster für graphisch Benutzungsoberflächen MVC: Modell-Ansicht-Steuerung

4

Teil 1

GrundlagenObjektorientierte Programmierung

5

Dinge der Welt Objekte im Sinne der Informatik

Farbe

rot = 23

gruen = 244

blau = 22

Farbe RGB-Farbmodell

Beispiel:

Objektorientierte Programmierung

6

Ein Objekt wird durch die Werte seiner Attribute festgelegt.

AttributwertAttributAttribut

Farbe

rot = 23

gruen = 25

blau = 255

Objekte

Ein Objekt ist das Abbild eines realen oder gedachten Gegenstandes bzw. einer Person.

Objekte sind autonome Bausteine, die bestimmte

Teilaufgaben der Anwendung eigenständig erledigen.

Objekte sind autonome Bausteine, die bestimmte

Teilaufgaben der Anwendung eigenständig erledigen.

setFarbegetFarbetoHTML ...

Methoden

Methoden

•Auftrag - Prozedur

•Anfrage - Funktion

•Auftrag - Prozedur

•Anfrage - Funktion

Die Methoden bestimmen das Verhalten des Objekts.

7

Klassen sind Baupläne von ObjektenObjekte sind Instanzen (Exemplare) von Klassen.

Objekte

Klasse

Farbe1

rot = 23

setFarbe

Farbe2

rot = 123

setFarbe

Farbe3

rot = 233

setFarbe

TFarbe

rot

setFarbe

ist Instanz von

Klassen und Objekte

8

Auf die Eigenschaftswerte wird nicht direkt sondern nur über besondere Lese- und Schreibmethoden zugegriffen.

Bei Delphi gibt es einen speziellen property- Mechanismus, über den durch Zuweisung auf die Eigenschaftswerte zugegriffen werden kann.

TFarbe

- Frot : integer

- Fgruen :integer

- Fblau : integer

+ getRot : integer;+ setRot(r : integer);

Die innere Strukturwird verborgen.

Geheimnisprinzip

Zugriffsmethoden

9

Konstruktoren sind spezielle Methoden, die• den Speicherbereich eines Objekts anlegen, • die Attribute mit Standardwerten belegen, • eine Referenz auf das Objekt zurückgeben.

TFarbe

- Frot : integer

- Fgruen :integer

- Fblau : integer

+ constructor create+ getRot : integer;+ setRot(r : integer);

Konstruktor

Objekte werden mit Konstruktoren erzeugt.

Erzeugung von Objekten

10

Erzeugung eines Farbobjekts

var Farbe1 : TFarbe;

...

...

Farbe1 := TFarbe.create;

Klassenname

Das Objekt existiert noch nicht !

Deklaration der Objektvariablen

nilFarbe1 =

Die Objektvariable erhält eine Referenz auf das Farbobjekt.

:TFarbe

Frot = 255

Fgruen = 255

Fblau = 255

Farbe1 =

Aufruf des Konstruktors

(Der Klassenname wird vorangestellt)

Aufruf des Konstruktors

(Der Klassenname wird vorangestellt)

11

Arbeiten mit Objekten

Der Zugriff auf Objekte erfolgt mit Hilfe der Objektvariablen

Schema: Objektvariable.Methode

Das Formularobjekt ruft eine Methode des Farbobjekts auf.

Beispiel: Farbe1.setFarbe(0,0,0)

Ein Objekt kann eine Methode eines anderen Objekts nur aufrufen, wenn es dieses kennt, d. h. eine Referenz auf dieses Objekt besitzt.

Kennt- Beziehung / Assoziation

2

Shape

FarbForm Farbe1 Das Formularobjekt kennt

1 Farbobjekt und 2 Shape-

Objekte.

12

Teil 2

MVC-Architektur

13

MVC-Farbenmischer

Steuerung

Ansicht

Farbe

rot = 23

gruen = 25

blau = 255

Modell

14

MVC-Prinzip

Ziel: Trennung von Datenhaltung und -verarbeitung, Darstellung und Steuerung.

Die Anwendung wird in drei Bereiche aufgeteilt:

Modell 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).

15

GUI(graphical user interface)

Fachkonzept

MVC-Architektur

Model(Daten,Verarbeitung)

Controller

Steuerung

View

Ansicht

liest

schreibt

informiert

16

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.

17

Vorteile der MVC-Struktur

Änderungen der Benutzeroberfläche haben daher keine Auswirkung auf die interne Verarbeitung der Daten und der Datenstruktur.

Verbesserung der Wiederverwendbarkeit

klare Strukturierung eines Programms

Die Daten können gleichzeitig mehrfach auf unterschiedliche Weise dargestellt werden.

18

Fragen und Probleme

Wie erreicht man die Entkopplung?

Wie greifen View und Controller auf die Daten zu?

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?

19

Realisierung in Delphi

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)

Entkopplung:

GUI- und Modellklassen in verschiedenen Units halten

- View und Controller in einem Formular (uGUI.pas) unterbringen

- Modell-Klasse in einer eigenen Unit (uModell.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. setAttribut() bzw. getAttribut(), Zugriff über Properties).

20

Implementierun

g des Farbmischers

(1.Variante: Abfragen)

Teil 3

21

TFarbe

- Frot : integer

- Fgruen :integer

- Fblau : integer;

+ constructor create+ getFarbe : integer;+ setFarbe(r, g, b : integer)+ getrot : integer+ getgruen: integer+ getblau : integer

Festlegung von:• Zugriffsrechten (- private; + public)• Datentypen• Signaturen (Parameter der Methoden)

Spezifikation/Implementierung der Modell-Klasse

unit uFarbModell ...

type

TFarbe = Class private Frot, Fblau,

Fgruen : integer;

public

constructor create; procedure setFarbe(r, g, b : integer); function getFarbe : integer function getrot : integer function getgruen: integer function getblau : integer end;

unit uFarbModell ...

type

TFarbe = Class private Frot, Fblau,

Fgruen : integer;

public

constructor create; procedure setFarbe(r, g, b : integer); function getFarbe : integer function getrot : integer function getgruen: integer function getblau : integer end;

Implementierung:

(Unit: uFarbModell.pas)

22

constructor TFarbe.create;

begin

Frot := 255;

Fgruen:= 255;

Fblau := 255;

end;

function TFarbe.getFarbe : Integer;

begin result := Fblau*256*256+FGruen*256+Frot;

end;

procedure TFarbe.setFarbe(r,g, b : integer);

begin

Frot := r mod 256;

Fgruen := g mod 256;

Fblau := b mod 256;

end; (Listing uFarbModell)

constructor TFarbe.create;

begin

Frot := 255;

Fgruen:= 255;

Fblau := 255;

end;

function TFarbe.getFarbe : Integer;

begin result := Fblau*256*256+FGruen*256+Frot;

end;

procedure TFarbe.setFarbe(r,g, b : integer);

begin

Frot := r mod 256;

Fgruen := g mod 256;

Fblau := b mod 256;

end; (Listing uFarbModell)

Implementation der Methoden

23

GUI (Formular-Unit): GUI-Objekte:

TLabelTEditTButton

TShape

TButton

Benutzeroberfläche

24

Das Formular verwaltet die GUI-Objekte und das Modellobjekt.

Uses ..., uFarbModell;TFarbForm = class(TForm)

Farbmischer: TGroupBox; Label1: TLabel; rotEd: TEdit; okBtn: TButton; Ansicht: TGroupBox; Label7: TLabel; endBtn: TButton; FarbBox: TShape; ...private { Private-Deklarationen } Farbe : TFarbe; ...

Uses ..., uFarbModell;TFarbForm = class(TForm)

Farbmischer: TGroupBox; Label1: TLabel; rotEd: TEdit; okBtn: TButton; Ansicht: TGroupBox; Label7: TLabel; endBtn: TButton; FarbBox: TShape; ...private { Private-Deklarationen } Farbe : TFarbe; ...

Referenzattribute

Zeiger auf ein Farbobjekt

Objektverwaltung

kennt

Modell-unit-einbinden

25

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.

procedure TFarbForm.FormCreate(...);begin Farbe := TFarbe.create; ...end;

procedure TFarbForm.FormCreate(...);begin Farbe := TFarbe.create; ...end;

Erzeugung mit dem OnCreate-Ereignis

Zeiger auf ein Farbobjekt (kennt-Beziehung)

Objekterzeugung/-zerstörung

Zerstörung mit dem OnDestroy-Ereignis

procedureTFarbForm.FormDestroy(...);begin Farbe.Free;end;

procedureTFarbForm.FormDestroy(...);begin Farbe.Free;end;

Speicherbereich freigeben

26

Szenario:Der Ok_Button (‚übernehmen‘) wird gedrückt:

Aktionen:

• Werte der Eingabefenster lesen.

• Farbobjekt aktivieren (Farbe.setFarbe(r,g,b));

• Shapes aktualisieren sich (updateViews)

Wer macht was?

Ereignisgesteuerter Ablauf

27

Aktualisierung der Views

//Datenfluss: Modell View

procedure TFarbForm.updateViews;//Modelldaten lesenbegin FarbBox.brush.color := Farbe.getFarbe; KFarbBox.brush.color := clwhite - Farbe.getFarbe;

end;

//Datenfluss: Modell View

procedure TFarbForm.updateViews;//Modelldaten lesenbegin FarbBox.brush.color := Farbe.getFarbe; KFarbBox.brush.color := clwhite - Farbe.getFarbe;

end;

//Datenfluss: Controller Modell

procedure TFarbForm.okBtnClick(Sender: TObject);//Modelldaten schreibenvar r, g, b : integer;begin r := strtoint(rotEd.text); g := strtoint(gruenEd.text); b := strtoint(blauEd.text);

Farbe.setFarbe(r,g,b); //Werte speichern updateViews; //Aktualisierung durch Abfragenend;

//Datenfluss: Controller Modell

procedure TFarbForm.okBtnClick(Sender: TObject);//Modelldaten schreibenvar r, g, b : integer;begin r := strtoint(rotEd.text); g := strtoint(gruenEd.text); b := strtoint(blauEd.text);

Farbe.setFarbe(r,g,b); //Werte speichern updateViews; //Aktualisierung durch Abfragenend;

Ereignisprozedur

Listing uFarbForm

28

Aufgaben I

1. Testen Sie das Programm ‚Farben0’ und verfolgen Sie den Ablauf mit Hilfe des Einzelschritt-Modus.

2. Erweitern Sie das Farbemodell um folgende Methoden

• TFarbe.getKomplement (Komplementärfarbe)

• TFarbe.toHTML (HTML- Code)

Bsp.: #AFB055, verwenden Sie die Funktion InttoHex()

Binden Sie beide Methoden in die Anwendung ein.

3. Entwickeln Sie eine zweite Benutzungsoberfläche, die die RGB-Farben einzeln anzeigt. (z. B.: in drei Shape-Komponenten) Binden Sie das Farbmodell an die entwickelte Benutzeroberfläche an.

29

Implementierung

des Farbmischers

(2.Variante: Selbstdefiniertes Ereignis)

Teil 4

30

Ereignis: Zustandsänderung eines Objekts, die mit einer Ereignisprozedur verknüpft ist.

Realisierung in Delphi mit Hilfe von

Methodenzeigern: Referenzen auf Methoden anderer

Objekte

Mit dem Aufruf von OnClick wird die Formularmethode ButtonClick() aktiviert.Die Verarbeitung wird an andere Objekte delegiert.

Button FormularOnClick ButtonClick()

Methodenzeiger

Sender Empfänger

Ereignisse

31

Methodenzeiger-Mechanismus

Beispiel: OnclickDer OnClick-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 FormCreate):

Button.Onclick := Buttonclick;

Methodenname

Die GUI-Komponenten von Delphi verfügen über eine Vielzahl von Methodenzeigern die mit Ereignissen verknüpft werden können.

Methodenzeiger haben wie - andere Variablen auch - einen Datentyp. Dieser bestimmt, mit welchen Typen von Methoden der Zeiger verknüpft werden kann.

32

Deklaration von Methodenzeigertypen

type TNotifyEvent = procedure(Sender : TObject) of Object; Standardtyp (von Delphi vordefiniert)

Methoden mit einem Parameter vom Typ TObject z. B. Onclick- Ereignis

TMyEreignis = procedure of Object;

// Methoden ohne Parameter

type TNotifyEvent = procedure(Sender : TObject) of Object; Standardtyp (von Delphi vordefiniert)

Methoden mit einem Parameter vom Typ TObject z. B. Onclick- Ereignis

TMyEreignis = procedure of Object;

// Methoden ohne Parameter

Beispiele:

Var Onclick : TNotifyEvent; Ereignis : TMyEreignis;Var Onclick : TNotifyEvent; Ereignis : TMyEreignis;

Variablendeklaration:

33

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 setFarbe-Methode. Dazu braucht das Modell einen Methodenzeiger, der mit der updateViews- Methode des Formulars verknüpft werden kann.

Die Schritte (1) – (3) erfolgen in der Modell-Unit, Schritt (4) in der Formular-Unit.

Die Implementation erfordert in vier Schritten:

1. Vereinbarung eines Methodenzeiger-Typs2. Vereinbarung eines Methodenzeigers3. Aufruf der Ereignisprozedur über den

Methodenzeiger4. Zuweisung einer Ereignisprozedur

34

type

TChangeEvent = procedure of object; (1.)

TFarbe = Class .... public ... OnChanged : TChangeEvent; (2.) end;

type

TChangeEvent = procedure of object; (1.)

TFarbe = Class .... public ... OnChanged : TChangeEvent; (2.) end;

Ereignis: OnChanged vom Typ TChangeEvent

Implementation des Ereignisses

1. Deklaration eines Methodenzeigertyps (hier: für eine Prozedur ohne Parameter)

2. Deklaration einer Referenzvariablen vom Typ des

Methodenzeigers

35

procedure TFarbe.setFarbe(r,g, b : integer);

begin Frot := r mod 256; Fgruen := g mod 256; Fblau := b mod 256;

//GUI informieren if assigned(OnChanged) then OnChanged; (3)end;

procedure TFarbe.setFarbe(r,g, b : integer);

begin Frot := r mod 256; Fgruen := g mod 256; Fblau := b mod 256;

//GUI informieren if assigned(OnChanged) then OnChanged; (3)end;

3. Ereignis auslösen

Das Modell ruft eine Methode des GUI-Objekts auf, wenn sich seine Daten ändern.

Auslösen des Ereignisses

Modell:

36

type TFarbForm = class(TForm) ... private Farbe : TFarbe; procedure updateViews; public ... end;

type TFarbForm = class(TForm) ... private Farbe : TFarbe; procedure updateViews; public ... end;

Ereignismethode vom Typ des Methodenzeigers

Ereignisbearbeitungsmethode

procedure TFarbForm.updateViews;begin //wird vom Modell aufgerufen FarbBox.brush.color := Farbe.getFarbe; ...end;

procedure TFarbForm.updateViews;begin //wird vom Modell aufgerufen FarbBox.brush.color := Farbe.getFarbe; ...end;

Implementierung:

37

procedure TFarbForm.FormCreate(Sender: TObject);begin Farbe := TFarbe.create; Farbe.OnChanged := updateViews; (4)end;

procedure TFarbForm.FormCreate(Sender: TObject);begin Farbe := TFarbe.create; Farbe.OnChanged := updateViews; (4)end;

4. Setzen des Methodenzeigers mit OnCreate-Ereignis

Setzen des Methodenzeigers

Der Typ der Methode muss mit dem Typ des Methodenzeigers übereinstimmen.

38

Nachrichtenaustausch

Ablauf: OkButton wird geklickt (Sequenzdiagramm)

:TFarbe

:TShape

:TFarbForm

:TButtonOncreate() create()

Buttonwird gedrückt ButtonClick()

setFarbe()

updateViews

Brush.Color := ...

getFarbe()

...Start desProgramms

39

Aufgaben II

Farbenmischer3. Implementieren Sie das Ereignis ‚Onchanged’.

Testen Sie das Programm und verfolgen Sie den Ablauf mit Hilfe des Einzelschritt-Modus.

4. Die Version Farben3 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 - mTUhr.pas) einer Digitaluhr,

die Uhr soll noch nicht selbständig laufen. Entwerfen Sie ein Formular (GUI) (TUhrform - uUhrForm.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.

40

Literatur und Links

Helmut Balzert: Lehrbuch der Software-Technik Siegfried Spolwig:

www.oszhdl.be.schule.de\gymnasium\faecher\informatik\index.htm

K. Merkert: Hohenstaufen-Gymnasium Kaiserlauternhttp://hsg.region-kaiserslautern.de/faecher/inf/index.php

UML-Werkzeug: UML-Editor : UMLed.exe http://www.kubitz-online.de