Grundlegender Aufbau / UML

[Howan]

Hallo

Ich bin mal wieder am basteln und hatte eigentlich vor einem Jahr gedacht ich könnte meine eigene Flash - Website auf die schnelle bauen.
Habe davor nur Perlscripte geschrieben, also keine OOP.
Habe mir dann ein AS3 Buch gekauft und meine erste Website gebaut.

http://www.ingopolster.com
Für die erste ist es auch ganz gut geworden und ist in ein Paar Klassen organisiert.
Es gab aber einige Probleme bei der Programmierung und vor allem zum Schluss hin wurden die Wortkarounds schon etwas häufiger.

Jetzt sind wieder ein Paar Monate vergangen und ich möchte meine Website komplett neu designen.
Bevor ich mich ins Programmieren stürze, was bei meiner wenigen Übung meist lange dauert, wollte ich einige Probleme meiner alten Programmierung überdenken um nicht die gleichen Fehler nochmal zu machen.

Ich habe versucht das mal in einem ULM festzuhalten.

Ich habe von sowas nicht viel Ahnung also bitte nicht motzen.

Das Größte Problem ist das Menü. Es funktioniert aber ich frage in "Mymenue" den Eventlistener welcher button geklickt wurde und übergebe
den Namen des Buttons an den Contentcontroller der damit den jeweiligen Content lädt.

public function load_content(contentname:String):void {
			if (contentname == "People"){
				loaded_content = new Gallery("people", 20);
				add_hider();
			}
			if (contentname == "Still"){
				loaded_content = new Gallery("still", 9);
				add_hider();
			}
			if (contentname == "3-Dimensional"){
				loaded_content = new Gallery("3D", 2);
				add_hider();
			}
			if (contentname == "About"){
				loaded_content = new About();
				add_hider();				
			}
			if (contentname == "Imprint"){
				loaded_content = new Impressum();
				add_hider();				
			}

Das ist total schlecht, ich weis. Ich habe aber keine Ahnung wie ich sauber die Information, was passieren soll wenn der Button geklickt wurde, im Button selbst abspeichern kann.

Wäre toll wenn es einige Anregungen gäbe, auch zur grundlegenden Modellierung solcher Klassen für meinen Zweck.
Es soll nicht super toll werden aber über sauberere Schnittstellen wäre ich sehr dankbar.

[malthoff]

Hallo Howan.

Erstmal Props für das Video Blackout Gefällt mir sehr gut. Wielange hast
Du daran gesessen?

Zu deinem Aufbau: Der ist nicht schlecht. Und deine Idee, den Namen des Button an den Controller zu schicken, der dann entscheidet, was er lädt ist ebenfalls völlig ok. Damit hast Du eine funktionierende View Klasse (Menu), zu der Du immer einen neuen Controller schreiben könntest.

Natürlich ist es immer möglich alles perfekt nach Design Pattern zu lösen aber bei der größe des Projekts seh ich dazu fast keinen Anlass. Soll der Aufbau deiner neuen Site genauso aussehen?

Was aus deiner UML zeichnung, die sehr übersichtlich und damit gut ist, wird nicht klar, ob Du die Namen der Button per Events an den Controller schickst. Es sieht eher so aus, als würden sich beide direkt unterhalten. Aber selbst das finde ich, wie schon gesagt, bei der Größe nicht so tragisch. Zusätzlich könntest Du noch für jeden Content Typ einen eigenen Controller erstellen, um den einen großen Controller zu entlasten.

Für sehr gute Aufbautipps bzw. Erklärungen zu Design Pattern bitte hier weiterlesen: www.as3dp.com (aber hier im Forum weiterdiskutieren :-) )

[readme.txt]

Sieht gut aus imho ... und den zu ladenden Content als String an eine Funktion zu übergeben die die Steuerung übernimmt halte ich auch für eine vernünftige Methode das zu machen ... jedenfalls mache ich das auch so:

PHP-Code:


  
  private function switchContent(page:String):Void {
    var _scope:Main         = this;    
    
    // -> Die Main.switchContent()-Methode ist dafür zuständig den Seiteninhalt
    //    zu wechseln. Basierend auf dem übergebenen String wird eine Content-Instanz
    //    erstellt, aufgebaut und angezeigt.
    //    Der Content-Instanz wird ein MovieClip übergeben der die Inhalte enthalten soll
    //    und eine Höhe/Breite.
    //    Zusätzlich wird noch der onContent-Event gefeuert der z.B. dazu genutzt werden kann
    //    die erstellten Inhalte einzublenden.
    
    // -> Eine Debug-Nachricht ausgeben.
    Bug._trace("Main.switchContent(): "+page);
    
    // -> Einen _listener, den MovieClip der die Inhalte fassen soll und die Höhe/Breite des
    //    Inhaltes erstellen.
    var _listener:Object   = new Object();
    var _content:MovieClip = _scope._timeline.createEmptyMovieClip("content"+_scope._timeline.getNextHighestDepth(),_scope._timeline.getNextHighestDepth());
    var _h:Number          = Math.round(Stage.height-_scope._offset-100)-(Math.round(Stage.height-_scope._offset-100)%10);
    var _w:Number          = Math.round((_h/3)*4)-(Math.round((_h/3)*4)%10);
    
    // -> Per switch entscheiden welcher Contenttyp geladen werden muss und eine
    //    neue Instanz dieser Contenttypen erstellen. 
    //    Außerdem den onContent-Event anmelden.
    switch(page) {
      case "lobby":
      _scope._curr = new Lobby(_content,_w,_h);
      _scope._curr.addEventListener("onContent",_listener);
      break;
        
      case "deck":
      _scope._curr = new Deck(_content,_w,_h);
      _scope._curr.addEventListener("onContent",_listener);
      break;
        
      /*case "achievements":
      _scope._curr = new Achievements(_content,_w,_h);
      _scope._curr.addEventListener("onContent",_listener);
      break;*/
        
      default:
      _scope._curr = new Lobby(_content,_w,_h);
      _scope._curr.addEventListener("onContent",_listener);
      break;
    }
    
    // -> Wenn der onContent-Event gefeuert wird ...
    _listener.onContent = function():Void {
      // -> ... den Event wieder löschen.
      _scope._curr.removeEventListener("onContent",_listener);
    }
  } 


Die jeweiligen Contentklassen erben dabei von einer "BaseContent"-Klasse die den Grundlegenden aufbau enthält. Und die einzelnen Contentklassen übernehmen dann
das Befüllen mit Inhalten weil die Dinge die dargestellt werden sollen/müssen ja auf jeder Unterseite anders sein können.

[Omega Psi]

Hier mal ein kleiner Versuch, der Verbesserung. Das Problem, dass du hast: es bestehen recht viele Abhängigkeiten. Schaue dir mal meine UML Diagramm an.

Meiner Meinung nach musst du den Controller nicht aus der MainView herausziehen, dafür ist das Projekt zu klein. Empfange einfach die Events der MenuButtons und zeige das an, was zu sehen sein soll. Das wäre so grob skizziert meine Idee.

@Ache:

Was aus deiner UML zeichnung, die sehr übersichtlich und damit gut ist, wird nicht klar, ob Du die Namen der Button per Events an den Controller schickst.

Dafür gibt es andere Diagramme.

[Howan]

Vielen Dank erstmal für die schnellen Antworten.
Ich muss zugeben das ich etwas überrascht bin. Ich hatte gedacht ihr zerreist den Entwurf in der Luft. Es bleiben aber Fragen.

Wenn ich mir den Entwurf von Omega Psi so ansehe verstehe ich das folgendermaßen.

Wenn ein Button geklickt wird, bubbelt der KlickEvent nach oben und wird auch erst in WebSite abgefangen.
Jetzt muss abgefragt werden ob überhaupt ein Button geklickt wurde oder ein anderes Element das vll Klickevents auslösen kann.

Das habe ich bis jetzt folgendermaßen gelöst.
Das sieht für mich aber nach einer Notlösung aus, da es ja eigentlich nicht sein kann, das ich im Nachhinein wieder herausfinden muss wasgeklickt wurde.
Wie kann ich das sauberer machen?

private function mouseClickHandler(event:Event):void{
            //trace(event.target.name);
            
            if (event.target is Mybutton){
                var content_to_load = event.target.name;
                contentobject.load_content(content_to_load);
            }         
            if (event.target is Singlepic){
                var _folder:String = event.target.get_folder();
                var _actuell_number:uint = event.target.get_actuell_number();
                var _total_amount:uint = event.target.get_total_amount();
                var bigpic:BigPic = new BigPic(_folder,_actuell_number,_total_amount);
                addChild(bigpic);
            }         
            if (event.target is BigPic){
                TweenLite.to(event.target, 0.5, {alpha:0, onComplete:remove_BigPic});
            }         
        } 

Vielen Dank schonmal an euch!
Ist hier mit Abstand das beste und freundlichste Forum das ich kenne.

@Dr.Ache: Das video haben wir zu dritt als Studienarbeit in ca 4-5 Wochen realisiert.
Kann man bei uns Studenten nicht immer so genau sagen, da wir an vielen Sachen gleichzeitig arbeiten.

lg
Ingo

[Omega Psi]

Ich würde das so machen, dass ich in der Menu Klasse den MouseEvent.CLICK abfange und dann nach aussen hin einen eigenen Event dispatche, der die Information transportiert, die ich brauche um zu wissen, was ich anzeigen lassen will. Dieser Event wird in der Website Klasse verarbeitet und fertig.

[Howan]

Hi Omega

Sehe ich das richtig??
Mit deiner Idee erreiche ich, das die Klassen für das Menü klar vom Rest der Website getrennt sind und durch den selbst erstellten Event bekomme ich eine klar definierte Schnittstelle zur Klasse "Website".

Wie würde dieser EventDispatcher aussehen?
Ich werde da nicht schlau draus......

package {
    
    import flash.display.Sprite;
    import flash.events.Event;
    
    public class MyDispatcher extends Sprite {
        
        public function MyDispatcher() {
            addEventListener("customEvent", handleEvent);
            dispatchEvent(new Event("customEvent"));
        }
        
        private function handleEvent(event:Event):void {
            trace(event.type); // "customEvent"
        }
    }
} 

LG
Ingo

[Omega Psi]

Jede Sprite Instanz ist auch ein EventDispatcher. Du musst nur eigene Events dispatchen.

[kaneda]

Hmm - also traditionellerweise löse ich das über ein dictionary. Beispiel:

var menu: Menu = new Menu();
menu.addButton( new MenuButton( "People", new Gallery("people"), webSite ) );
menu.addButton( new MenuButton( "Gallery", new Gallery("gallery"), webSite ) );
... usw.

dann kann ich einfach einen MenuButton basteln ala:

class MenuButton extends TextButton {
   private var _page: IPage;
   private var _webSite: Website;
   public function MenuButton( name: String, page: IPage, webSite: Website ) {
     super( name );
     _page = page;
     _webSite = webSite;
     addEventListener( MouseEvent.CLICK, onClick );
   }
   public function onCLick( event: Event ): void
   {
     _webSite.showPage( _page );
   }
}

Damit bekommt Website nur noch eine Dependency zu IPage (die von den anderen seiten implementiert wird). MenuButton delegiert an die Website... Vielleicht reicht es dir auch wenn alle Seiten vom Typ DisplayObject sind, wer weiss. Wenn man dazu noch ein bischen übertreiben will kann man das "_website.showPage" auch in einen Command umwandeln:

class ShowWebsite implements ICommand {
  private var _page: IPage;
  private var _website: Website;
  public function ShowWebsite( page: IPage, website: Website )
  {
     _page = page;
     _website = website;
  }

  public function execute(): void
  {
     _website.showPage( _page );
  }
}

new MenuButtuon( "Gallery", new ShowWebsite( new Gallery("gallery"), website ) );

das würde alles noch etwas mehr entkapseln und macht auch sinn wenn du von 10 verschiedenen stellen den selben befehl aufrufen möchtest ... aber ich glaub im konkreten fall ist das überflüssig