Das MVC- Konzept

1

• Das MVC- Konzept
• (Model-View-Controller)
• Realisierung mit Delphi

Helmut Paulus MPG Trier
Speyer, 16.05.07
2
Überblick

1. Grundlagen der OOP
2. MVC-Architektur
3. 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
Objektorientierte Programmierung
Objekte im Sinne der Informatik
Dinge der Welt
6
Objekte
Ein Objekt ist das Abbild eines realen oder
gedachten Gegenstandes bzw. einer Person.
Farbe
Attributwert
Attribut
rot 23 gruen 25 blau 255
Ein Objekt wird durch die Werte seiner Attribute
festgelegt.
Objekte sind autonome Bausteine, die bestimmte
Teilaufgaben der Anwendung eigenständig erledigen.
7
Klassen und Objekte
Klasse
ist Instanz von
Objekte
Klassen sind Baupläne von Objekten Objekte sind
Instanzen (Exemplare) von Klassen.
8
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
getRot integer setRot(r integer)
Zugriffsmethoden
Bei Delphi gibt es einen speziellen property-
Mechanismus, über den durch Zuweisung auf die
Eigenschaftswerte zugegriffen werden kann.
9
Erzeugung von Objekten
Objekte werden mit Konstruktoren erzeugt.
Konstruktor

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

10
Erzeugung eines Farbobjekts
var Farbe1 TFarbe ... ... Farbe1
TFarbe.create
Aufruf des Konstruktors (Der Klassenname wird
vorangestellt)
Klassenname
11
Arbeiten mit Objekten
Der Zugriff auf Objekte erfolgt mit Hilfe der
Objektvariablen
Schema Objektvariable.Methode
12
Teil 2

• MVC-Architektur

13
MVC-Farbenmischer
14
MVC-Prinzip
Ziel Trennung von Datenhaltung und
-verarbeitung, Darstellung und Steuerung.
Die Anwendung wird in drei Bereiche aufgeteilt

• View und Controller bilden zusammen die
  Benutzeroberfläche (GUI).

15
MVC-Architektur
Controller Steuerung
Model (Daten,Verarbeitung)
View Ansicht
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

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

• 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)

20
Teil 3
Implementierung des Farbmischers (1.Variante
Abfragen)
21
Spezifikation/Implementierung der Modell-Klasse

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

22
Implementation der Methoden
constructor TFarbe.create begin Frot
255 Fgruen 255 Fblau
255 end function TFarbe.getFarbe
Integer begin result Fblau256256FGruen
256Frot end procedure TFarbe.setFarbe(r,g, b
integer) begin Frot r mod 256 Fgruen
g mod 256 Fblau b mod 256 end
(Listing uFarbModell)
23
Benutzeroberfläche
GUI (Formular-Unit)
GUI-Objekte
TLabel TEdit TButton TShape TButton
24
Objektverwaltung
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
...
Modell-unit-einbinden
kennt
Zeiger auf ein Farbobjekt
Referenzattribute
25
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.
26
Ereignisgesteuerter Ablauf
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?
27
Aktualisierung der Views
Ereignisprozedur
//Datenfluss Controller ? Modell procedure
TFarbForm.okBtnClick(Sender TObject) //Modelldat
en schreiben var 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 Abfragen end
//Datenfluss Modell ? View procedure
TFarbForm.updateViews //Modelldaten lesen begin
FarbBox.brush.color Farbe.getFarbe
KFarbBox.brush.color clwhite -
Farbe.getFarbe end
Listing uFarbForm
28
Aufgaben I

• Testen Sie das Programm Farben0 und verfolgen
  Sie den Ablauf mit Hilfe des Einzelschritt-Modus.
  
• 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.
• 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
Teil 4
Implementierung des Farbmischers (2.Variante
Selbstdefiniertes Ereignis)
30
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
Mit dem Aufruf von OnClick wird die
Formularmethode ButtonClick() aktiviert.Die
Verarbeitung wird an andere Objekte delegiert.
31
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 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)
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
Beispiele
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
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.
34
Implementation des Ereignisses
Ereignis OnChanged vom Typ TChangeEvent
type TChangeEvent procedure of object (1.)
TFarbe Class .... public ...
OnChanged TChangeEvent (2.)
end

1. Deklaration eines Methodenzeigertyps (hier für
   eine Prozedur ohne Parameter)
2. Deklaration einer Referenzvariablen vom Typ des
   Methodenzeigers

35
Auslösen des Ereignisses
Modell
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.
36
Ereignisbearbeitungsmethode
type TFarbForm class(TForm) ...
private Farbe TFarbe procedure
updateViews public ... end
Ereignismethode vom Typ des Methodenzeigers
37
Setzen des Methodenzeigers
4. Setzen des Methodenzeigers mit
OnCreate-Ereignis
procedure TFarbForm.FormCreate(Sender
TObject) begin Farbe TFarbe.create
Farbe.OnChanged updateViews (4) end
Der Typ der Methode muss mit dem Typ des
Methodenzeigers übereinstimmen.
38
Nachrichtenaustausch
TFarbe
TFarbForm
...
TShape
TButton
Start des Programms
Oncreate()
create()
Button wird gedrückt
ButtonClick()
setFarbe()
updateViews
getFarbe()
Brush.Color ...
Ablauf OkButton wird geklickt (Sequenzdiagramm)
39
Aufgaben II

• Farbenmischer
• Implementieren Sie das Ereignis
  Onchanged.Testen Sie das Programm und
  verfolgen Sie den Ablauf mit Hilfe des
  Einzelschritt-Modus.
• Die Version Farben3 kann 2 GUIs gleichzeitig
  darstellen. Untersuchen Sie, wie das 2. Formular
  eingebunden ist und den Benachrichtungsmechanismu
  s.
• MVC-Uhr 
• 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 (hmin) zu setzen und
  abzufragen.
• Die Zeit soll mit Hilfe Schaltfläche jeweils um
  eine Sekunde erhöht werden. Entwickeln Sie dazu
  eine Methode.
• 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 Spolwigwww.oszhdl.be.schule.de\gymnasi
  um\faecher\informatik\index.htm
• K. Merkert Hohenstaufen-Gymnasium Kaiserlautern
• http//hsg.region-kaiserslautern.de/faecher/inf/i
  ndex.php
• UML-Werkzeug
• UML-Editor UMLed.exe http//www.kubitz-online.d
  e