MX: petmarket architektur

[bokel]

ich habe gestern einen interessanten artikel
bei mm gefunden, der von der architektur der
petmarket applikation handelt.

es ist zwar etwas schwierig, zwischen dem
ganzen marketing geblubber die handfesten
infos zu finden, aber gegen ende wirds
interessant.

stichwort mvc.

http://www.macromedia.com/desdev/mx/...petmarket.html

mfg r.

[Madokan]

Sicher sehr sinnvoll für alle die es besser nachvollziehen wollen

mfg
Matze K.

[bokel]

guten morgen faule bande

nachdem mein eintrag gestern den ganzen tag allein
rumstand, habe ich mich heute morgen daran gesetzt,
und mal ein einfaches fotoalbum als mvc programmiert.

das macht die ganze geschichte vielleicht ein wenig
handfester .

ich leih mir mal gerade zwei worte bei matze und
wuerde sagen: be inspired

//zur demonstration der model view controller (mvc) architektur
//bauen wir ein einfaches fotoalbum in dem man vorwaerts und 
//rueckwaerts navigieren kann und sich jeweils das bild und 
//ein kurzer text entsprechend anpassen.
//
//wg. mvc siehe auch
//www.macromedia.com/desdev/mx/blueprint/articles/makingpetmarket/makingpetmarket.html
//
//(c) 07/2002 ralf bokelberg helpQLODhelp.de
 
//
//-------------------------------------
//
function Model(data){
    //das model verwaltet die daten
    //fuer das photoalbum benutzen wir einen ringpuffer
    //d.h. man kann innerhalb der liste vorwaerts und rueckwaerts
    //navigieren und wenn ein ende erreicht ist, wird am anderen
    //ende weitergemacht.
    if(data) this.init(data);
}
 
Model.prototype.init = function(data){
    //daten initialisieren
    this.data = data;   
    this.actDataIdx = 0;
}
 
Model.prototype.getActData = function(){
    //akt. datensatz liefern
    trace("getActData " + this.actDataIdx);
    return this.data[this.actDataIdx]
}
 
Model.prototype.nextData = function(){
    //naechsten datensatz zum aktuellen machen
    if( ++this.actDataIdx >= this.data.length) this.actDataIdx = 0;
}
 
Model.prototype.prevData = function(){
    //vorhergehenden datensatz zum aktuellen machen
    if( --this.actDataIdx < 0) this.actDataIdx = this.data.length-1;
}
 
//
//-------------------------------------
//
function View(controller){
    //der view realisiert die benutzeroberflaeche zum anzeigen der daten
    var depth = 1;
 
    //holder fuer den view
    this.mc = _root.createEmptyMovieclip("view", depth++);
    
    //text ueber dem bild
    this.mc.createTextfield("text", depth++, 50, 10, 200, 20); 
 
    //handler fuer onUpdateEvent    
    this.mc.text.onUpdate = function(actData){
        trace("onUpdate " + this._name);
        this.text = actData.text;
        var tf = new TextFormat();
        tf.align = "center";
        this.setTextFormat(tf);
    }
    
    //handler anmelden
    controller.addListener(this.mc.text);
    
    //mc fuer das bild
    var mcNew = this.createPoly("pic", depth++, 50,50, 0xeeeeee, 0,0, 0,200, 200,200, 200,0);
 
    //handler fuer onUpdateEvent    
    mcNew.onUpdate = function(actData){
        trace("onUpdate " + this._name + " " + actData.picurl);  
        this.holder = this.createEmptyMovieclip("holder", 1);
        this.holder.loadMovie(actData.picurl);
    }
    
    //handler anmelden
    controller.addListener(mcNew);
    
    //button nach links
    mcNew = this.createPoly("links", depth++, 0,0, 0xff0000, 0,20, 40,40, 40,0);
 
    //aktion wenn "links" gedrueckt wird
    mcNew.onRelease = function(){
        trace("onRelease " + this._name);
        controller.prevPic();
    }
    
    //button nach rechts
    mcNew = this.createPoly("rechts", depth++, 260, 0, 0xff0000, 0,0, 40,20, 0,40);
 
    //aktion wenn "rechts" gedrueckt wird
    mcNew.onRelease = function(){
        trace("onRelease " + this._name + " " + this._parent.controller);      
        controller.nextPic();
    }
    
    //hole den ersten datensatz
    controller.getPic();
}
 
View.prototype.createPoly = function(name, depth, x, y, col, xStart, yStart){
    trace("createPoly " + name);
    var mcNew = this.mc.createEmptyMovieclip(name, depth);
    with(mcNew){
        beginFill(col);
        moveTo(xStart, yStart);
        for(i=7; i<arguments.length; i+=2){
            lineTo(arguments[i], arguments[i+1]);
        }
        endFill();
        _x = x;
        _y = y;
    }
    return mcNew;
}
 
//
//-------------------------------------
//
function Controller(model){
    //der controller verbindet die daten mit der benutzeroberflaeche
    ASBroadcaster.initialize(this);
    this.model = model;
}
 
Controller.prototype.getPic = function(){
    //akt. bild vom model holen und view 
    //informieren, dass es neue daten gibt
    var actData = this.model.getActData();
    this.broadcastMessage("onUpdate", actData);
}
 
Controller.prototype.nextPic = function(){
    //das naechste bild anzeigen
    trace("nextPic");
    this.model.nextData();
    this.getPic();
}
 
Controller.prototype.prevPic = function(){
    //das vorherige bild anzeigen
    trace("prevPic");
    this.model.prevData();
    this.getPic();
}
 
//
//-------------------------------------
//
//hier werden unsere drei objekte initialisiert
myModel = new Model([{picurl: "test1.jpg", text: "ein bild von mir"},
                     {picurl: "test2.jpg", text: "morgens im fruehtau"},
                     {picurl: "test3.jpg", text: "selbst ist die frau"},
                     {picurl: "test4.jpg", text: "hand ab"},
                     {picurl: "test5.jpg", text: "mein neues fahrrad"}]);
 
myController = new Controller(myModel);
 
myView = new View(myController);
 
//das war es auch schon, gar nicht schwer
//(c) 07/2002 ralf bokelberg helpQLODhelp.de 
 

mfg r.

[dassoud]

hey bokel, das ist ja superklasse!

direkt mal ausprobiert - 1a!

das muß ich mir nochmal genauer anschauen.

dassoud

[Madokan]

hehe bokel - fauleband

Schönes Beispiel !

mfg
Matze K.

[bokel]

merci vielmals

ein wesentlicher vorteil dieser methode ist,
dass man datenstrukturen und anzeige voellig
von einander getrennt hat.

das erleichtert die teamarbeit ungemein, wenn
z.B. einer fuer das frontend und jemand anderes
fuer das backend verantwortlich ist.

aber auch fuer einzelkaempfer ist es interessant,
weil aenderungen des einen teils nicht immer auch
automatisch aenderungen und erneute tests im anderen teil bedeuten.

mfg r.

[nky]

SUPER HAMMER FETT!!! Bin immer noch sprachlos !
Abartig !!!

ein begeisterter Fan

[Niels]

Der fleißige bokel-Bandit

Beide Daumen hoch, auch wenn ich es noch nicht ganz verstanden habe. Also nicht dein Script, das ist schee, sondern das Prinzip der Architektur

Ich werde mir dann mal den Artikel durchlesen, wenn das Projekt hier vom Tisch ist. *seufzt*

Thx für die Info Ralf.
Gruss aus Freiburg.
nl

[Thorsten [Flash4all]]

@bokel und alle anderen

könnte man nicht unter jedes beispiel einen Link machen (schon oft hier gesehen)

sehen
saugen

wäre nett

Kann mir nämlich vorstellen, dass sich nicht jeder gleich was drunter vorstellen kann, wenn er den code sieht.


für die anderen auch.. (hat sich ja fast schon eingebürgert), bitte ein beispiel linken, wo man sich das gegebenfalls anschauen könnte.




Gruss
Thorsten

p.s. die meisten machen es ja schon

[bokel]

hey croc,

die links funktionieren ja gar nicht

mfg r.

[dassoud]

soll ich mal ein beispiel hochladen, bokel?

müßte nur ein paar bilder hochladen.

dassoud

[Thorsten [Flash4all]]

bokel


das sind ja auch keine links..sondern unterstrichener text *g*


sorry war ja nur als beispiel gedacht..

schau es dir bei den anderen an..

die haben den code,

dann

link zum beispiel swf
und link zum download dieser beispiel fla (zip)

wäre doch echt besser? weil wie gesagt.,... nicht jeder kann sich was drunter vorstellen, wenn er7sie den code sieht....


Thorsten


P.s. upsss hab deinen irony smiley erst gerade gesehen [edit]

[bokel]

gerne dassoud,

mfg r.

[dassoud]

oki, weil das ding so klasse ist, konnte ich gar nicht anders:

>>anschauen

>> download

dassoud

[Niels]

doppeldaumendrück !