Model View Presenter Modell der OOP - Fragen/Probleme

[dante]

hallo welt und guten morgen!

ich beschäftige mich gerade mit dem Model-Presenter-View Model der objektorientierten Programmierung in AS und bin in leichten startschwierigkeiten:

1. was genau macht der Presenter?

das model arbeitet mit den daten, ist es fertig ruft es über listener die view herbei die sich die daten schnappt und anzeigt.

die view ist auch dazu da um eingaben etc abzufangen.

und der presenter? was macht der? bzw wo in der reihe zwischen "klick-änderung berechnen-anzeigen" steht er?


2. flash scheint nicht das zu machen was es soll ( bzw.: er macht das was ich ihm gesagt habe...):

_global.HelpCenterModel = function() {
	
	
	} 

	HelpCenterModel.prototype.ladeXML = function(xmldatei) {
		// XML laden
		meinXML = new XML();
		meinXML.ignoreWhite = true;
		meinXML.load(xmldatei);
		
		// gibt XML an tree
		meinXML.onLoad = function() {
			meinTree.dataProvider = meinXML;
		}
		
		}

soweit alles klar. mein model konstruktor ist noch leer (was kommt sinnvollerweise in einen konstruktor? sry für die dumme frage =) ) und ich habe ein funktion dem model hinzugefügt ladeXML(xmldatei).

wenn ich die aber aufrufen will:

init = function(){
	// initialisierung
	
	//füllt tree mit daten die model geholt hat
	//test
	 trace(XMLDOK);
	 HelpCenterModel.ladeXML(XMLDOK);
	 
	}
	
init();

macht er gar nix obwohl der name der xml-datei richtig getraced wird.

stehe grad auf dem schlauch. was hab ich flasch gemacht/ übersehn?

[atothek]

diese pattern kenn ich noch gar nicht kenne nur MVC(modell view controll) haste da mal material zu wo man sich einlesen kann?

mfg
alex

[dante]

...

probier zum beispiel http://www.martinfowler.com/eaaDev/M...Presenter.html

wenn ich gute erklärungen gefunden hätte würde ich nciht fragen

[dante]

ok

ich habe meinen fehler gefunden:

ich sollte vielleicht die ganzen konsturktoren aufrufen um damit arbeiten zu können!

init = function(){
	// initialisierung
	this.model = new HelpCenterModel();
	this.presenter = new HelpCenterPresenter();
	
	
	//füllt tree mit daten die model geholt hat
	//test
	 trace(XMLDOK);
	 model.ladeXML(XMLDOK);
	 
	}
	
init();

bleibt nur die verständnis frage wegen des presenters (s. erstes post von mir)

[atothek]

das MVP ist eine Modifikation des MVC patterns es ist hilfreich wenn du diese pattern kennst. das prinzip hinter dem ganzen ist recht einfach

die View erhält ein event und ruft entsprechend eine function beim Presenter auf dieser wiederum modifiziert die Modell notwendigen daten das Modell seinerseits aktualisiert die View. es ist praktisch ein kreislauf.

View.input->Presenter.action->Model.setData->View.output

so kann man es sich sehr vereinfacht vorstellen.

mfg
alex

[dante]

Zitat von atothek

View.input->Presenter.action->Model.setData->View.output

ok

view gibt an presenter weiter was wo wie geklickt wurde. presenter verarbeitet das und ruft gegebenfalls methoden in model auf um die daten zu ändern etc.

sind die daten in model geändert, sendet das model nen rundruf aus. view "hört" das und zeigt die änderung an.

korrekt?

[atothek]

exakt das ist die functionsweiße von MVC und MVP. das gibt ne 1 . beim MVP allerdings verarbeitet nicht die View das Event sondern die View delegiert an die Presenter Class weiter und diese entscheided was nun passieren soll.

eigentlich recht simple das ganze was etwas kompliziert ist ist die verwebung aller klassen das alle voneinander wissen.

mfg
alex

[dante]

super

das prinzip habe ich also schonnal verstanden, aber ich seh schon es dauert etwas bis man es auch richtig anwenden kann....


jedenfalls:

beim einsetzen der TreeView komponente stosse ich auf schwierigkeiten (mal wieder):

laut macromedia muss das change event an nen objekt gebunden sein

listenerObject = new Object();
listenerObject.change = function(eventObject){
trace(eventObject.target.selectedItem.attributes.label + " wurde ausgewählt");
	};
meinTree.addEventListener("change", listenerObject);

ich möchte es jetzt an mein model oder presenter hängen ( bin mir nicht sicher wohin es muss...)

mache ich aber

model.change = function() {}

bzw.

model.prototype.change = function() {}

reagiert er nicht drauf.

ich hab es jetzt erstmal als eigenes objekt drin stehen (s. code oben) wüsste aber gern wie ich es in die struktur (MVP) einbinden kann.

ziel ist, dass die view(?) beim anklicken einer sache im baum verschiedene, vorher vom model eingelesene, attribute an einen, von der view produzierten und platzierten, container clip übergibt, um sie dann dort anzeigen zu lassen.

puh

wirkt kompliziert, ist es auch

[messingfeld]

Zitat von dante

ich möchte es jetzt an mein model oder presenter hängen ( bin mir nicht sicher wohin es muss...)

Eigentlich muss du es an den Presenter/Controller senden. Nach meinem Verständnis

Beispiel:

function Controller() {
}
Controller.prototype.change = function(eventObject) {
    trace("rufe Model-Methode auf");
    trace(eventObject.target.selectedItem.attributes.label + " wurde ausgewählt");
};
meinTree.addTreeNode("Flash MX"); 
meinTree.addTreeNode("Flash MX 2004");
meinTree.addEventListener("change", new Controller()); 

Ist jetzt nur ein gescripte, müsste aber klappen.

Natürlich rufts du den Controller nicht über new Controller() auf sondern in einer richtige Anwendung erstellst du eine Controller/Presenter Instanz.

Vom Presenter/Controller dann an Model senden und dann halt updaten.

Ich hoffe ich habe mal Recht.

cu messingfeld

[dante]

auf diese weise habe ich es ja probiert.

(meinte ich mit

model.prototype.change = function() {}

)

kann es nochmal genau checken aber bis jetzt funktioniert es nicht

[atothek]

na das sollte in etwa so wie messing das sagt loofen

das event change wird allerdings an die View angehängt und diese delegiert weiter an den Presenter in etwa so

PHP-Code:

function View() {
}
function Presenter() {
}
Presenter.prototype.onChange = function(pEO) {
    trace("aufruf durch das event change des View objectes");
    if (pEO.target.selectedItem.attributes.label == "Flash MX") {
        trace("weiterleitung an aufgabe xy zuständig für alle einträge Flash MX");
    } else if (pEO.target.selectedItem.attributes.label == "Flash MX 2004") {
        trace("weiterleitung an aufgabe xy zuständig für alle einträge Flash MX 2004");
    }
};
myPresenter = new Presenter();
myView = new View();
/* referenz auf die presenter instanz */
myView.presenter = myPresenter;
/* die change eventmethode */
myView.change = function(pEO) {
    /* delegiert an den presenter */
    this.presenter.onChange(pEO);
};
/* listener anmelden */
myTree.addEventListener("change", myView);
myTree.addTreeNode("Flash MX");
myTree.addTreeNode("Flash MX 2004"); 


[messingfeld]

Sieht es nicht schöner aus wenn der Presenter das "change" - Ereignis direkt abfängt.

// Erstelle View
function View() {
    this.presenter = undefined;
}
// weise View einen Presenter zu
View.prototype.setPresenter = function($presenter) {
    this.presenter = $presenter;
};
// lese View-Presenter aus
View.prototype.getPresenter = function() {
    return this.presenter;
};
//
// Erstelle Presenter
function Presenter() {
}
// Erstelle "change" - Methode
// Fängt Ereignis von View ab
Presenter.prototype.change = function(e) {
    trace("change:");
    if (e.target.selectedItem.attributes.label == "Flash MX") {
        trace("Sie haben Flash MX");
    } else if (e.target.selectedItem.attributes.label == "Flash MX 2004") {
        trace("Sie haben Flash MX 2004");
    }
};
//
// Erstelle Instanzen
myPresenter = new Presenter();
myView = new View();
//
myView.setPresenter(myPresenter);
//
myTree.addEventListener("change", myView.getPresenter());
myTree.addTreeNode("Flash MX");
myTree.addTreeNode("Flash MX 2004"); 

Da du über:

...
myView.presenter = myPresenter;
... 

ja auch schon den Presenter festlegst. Du schaltest ja einfach eine (in diesem Beispiel) unnötige Funktion zwischen.
Wie sieht es eigentlich da genau mit dem Verantwortlichkeiten aus?

cu messingfeld

[atothek]

sicherlich kann man das machen aber das entspricht nicht der implementierung eines MVP pattern. In der Praxis wird schonmal auf den Controller/Presenter verzichtet, aber es ist schon sinnvoll sich an die Patterns weit möglichst zu halt. das beispiel ist auch nur eine mini anwendung um das prinzip zu verdeutlichen. das die eventmethode zum View gehört hat den hintergrund das die tree komponente in diesem fall teil von view ist und aus kapselungsgründen sollte auch das dazugehörige event inerhalb der View bleiben. Das macht auch Sinn wenn es darum geht sich später einmal durch den code zu wühlen denn dann sucht mann mit unter vergebns im View nach dem Event und das steht aber im Presenter/Controller. das sollte vermieden werden.

Ich würde das event auch nicht als prototypen implemtieren, das event sollte immer userdefined sein, also vom user zugewiesen werden.

Das beispiel ist schon der richtige weg .

mfg
alex

[dante]

klappt bis jetzt alles hervorragend! danke nochmal dafür!

falls ich grobe programm-aufbau schnitzer drin habe gebt mir bitte bescheid. ich bin noch am lernen und bin jetzt nicht gerade mit OOP erfahrung gesegnet...

PHP-Code:

    HelpCenterModel.prototype.ladeXML = function() {
        
        // **** TO DO ****
        // noch konstanten, später von parametern abhängig        
        xmldatei = SPRACHE + STUFE + XMLENDUNG;
        
        // XML laden
        meinXML = new XML();
        meinXML.ignoreWhite = true;
        meinXML.load(xmldatei);
        
        // gibt XML an tree
        meinXML.onLoad = function() {
            GUI.meinTree.dataProvider = meinXML;
            trace(xmldatei+" geladen!");
            GUI.meinTree.addEventListener("change", tree); 
            
        }
    }

/* so weit so gut. das war mein model das den baum erstellt
und auch das change ereigniss an das objekt tree verknüpft
(extra objekt tree, da mein "view" objekt komplett auf der
zeitleiste definiert ist)

*/

    HelpCenterPresenter.prototype.onChange = function(eventObject) {
        trace(this+" wird aufgerufen");
        
        _global.kap = eventObject.target.selectedItem.attributes.label;
        _global.id = eventObject.target.selectedItem.attributes.id;
        _global.viewlet = eventObject.target.selectedItem.attributes.url;
        
        trace(_global.kap+newline+_global.id+newline+_global.viewlet+newline);
        
        this.broadcastMessage("onHCTree");
        
        
        } 



    function HelpCenterTree (){
        }

    HelpCenterTree.prototype.change = function(pEO) { 
    /* delegiert an den presenter */ 
    presenter.onChange(pEO); 
    }

init = function(){
    // initialisierung
    this.model = new HelpCenterModel();
    this.model.addListener(this);
    this.presenter = new HelpCenterPresenter();
    this.presenter.addListener(this);
    this.tree = new HelpCenterTree();
    //this.tree.addListener (tree);
    
    baumanzeigen();
    
    }
    
init(); 


[atothek]

So ich hab ma ein kleines beispeil zusammen geclickert ist im anhang. das beispiel ist absolut rudimentär und folgt strikt dem MVP Pattern. In der Praxis würde man es sicherlich noch etwas simpler machen es ist wie gesagt etwas recht simples. schau es dir einfach mal an. Ich habe keinen Broadcaster eingesetzt was sicherlich bei etwas komplexeren zusammenhängen durchaus denkbar wäre.

mfg
alex

download