21.112012

Flex Projekte als MVC Model erstellen

Hey liebe Leute, dies ist nun mein zweiter Blogeintrag und ich wollte dieses mal für alle Entwickler unter euch, die ebenfalls viel mit Flex programmieren eine Methode darstellen, wie die Möglichkeit besteht in Flex zu Programmieren und hierbei den MVC Standard einzuhalten.

Wer sich nun denkt, was denn der MVC Standard ist, dem sei gesagt, dass dies eine Variante ist, seinen Code mit einer vordefinierten Struktur zu erstellen, um hierbei kein Vermischen von Code, Design und Daten zu bekommen. Ich habe dieses folgende Beispiel übrigens mit dem Flash Builder 4.6 erstellt, jedoch ist dies auch mit kleinen Änderungen ohne Probleme möglich, mit dem Flex Builder 3.0 zu benutzen.

Erstellen wir nun ein neues Projekt in Flex Builder / Flash Builder, wir können dies nun einfach weiter klicken, bis wir die initiale mxml Datei bekommen. Sobald dies geschehen ist, müssen wir uns überlegen, wie unser Programm heißen wird, also welche ID es bekommt und hiernach sollten wir auch den Code in einer entsprechenden Ordnerstruktur ablegen. Bei meinem Beispiel sieht dies nun folgender Maßen aus:

  • src.
    • styles
    • images
    • com.
      • joocom.
        • blogtutorial.
          • controllers
          • views
          • models

Jetzt nehmen wir mal an, dass wir ein einfaches Programm erstellen wollen, das Daten aus einer Datenbank ließt und diese ausgibt. Also erstellen wir im Ordner Models erstmal unser DBModel.as. Wichtig hierbei ist, dass ich dies als Singleton erstellt habe, wobei ich auch direkt auf ein Problem gestoßen bin. Und zwar ist es so, dass Actionsscript von sich aus keine Singletons unterstützt. Man muss sich also ein wenig seine Entwickler-Fähigkeiten nutzen und Flex überlisten. Ich habe dies wie folgt bewerkstelligt (mit Hilfe eines netten Kollegen):

package com.joocom.blogtutorial.models
{
    public class DBModel
    {
        protected static var instance:DBModel = null;

        public function DBModel(singleton:DBModelSingleton) {
            if(singleton == null) {
                throw new Error("Use DBModel.getInstance()!");
            }
        }

        public static function getInstance():DBModel {
            if(instance == null) {
                instance = new DBModel(new DBModelSingleton());
            }
            return instance;
        }
    }
}

internal class DBModelSingleton {
}

Da Actionscript nämlich keine private Konstruktoren erlaubt, habe ich durch die internal Class, die man nur durch diese Klasse selbst erstellen kann, dies umgangen. Nun funktioniert der Kontstruktor nur über den Aufruf von DBModel.getInstance() und schon hat man sein singleton Pattern. Hier kann man nun seine kompletten DB Funktionen einfügen und hat sie von überall aus im Projekt verfügbar. Man muss natürlich dies nicht als Singleton machen, jedoch fand ich dies sehr hilfreich, da ich an mehreren Stellen im Programm immer dieselben Daten abrufen und abfragen musste.

Kommen wir zum V von MVC, die Views. Man kann sagen, dass die Views in Flex die mxml Dateien sind, da hier die Optischen Elemente definiert werden.

Zuerst füge ich in meine JoocomBlog.mxml den Link zur CSS Datei ein, damit wir(oder auch ein Mitarbeiter) die gestalterischen Elemente über CSS Stylen können. Somit ist da noch zusätzlich eine Trennung. Gemacht wird dieses mit folgendem Eintrag:

<fx:Style source="styles/global.css" />

Desweiteren wollen wir nun den Content einbinden in der Hauptdatei, natürlich nur der View. Diesen fügen wir mittels namespace ein. Hierzu binden wir im s:WindowedApplication tag ein neues Attribut ein, das wie folgt aussieht:

xmlns:view="com.joocom.blogtutorial.views.*"

Dann erstellen wir ein neues Element im WindowedApplication tag, das wie folgt aussieht:

<view:Anzeige />

Diese View erstellen wir natürlich ebenfalls. Also Rechtsklick auf den Ordner Views und eine neue MXML Komponente erstellen. Was dies ist, könnt ihr euch selbst aussuchen. Ich nehme hierfür meistens das s:Group bzw in Flex mx:Canvas Element. In Flash Builder 4.6 kann man aber auch sehr gut hierfür die s:BorderContainer nehmen, da diese nahezu alle Attribute wie das Canvas Element einem Entwickler zur Verfügung stellen.

Da dies nun auch getan ist, müssen wir natürlich noch die Controller bestimmen. Diese erstellen wir in com/joocom/blogtutorial/controllers. Hier habe ich eine Anzeige.as erstellt(Keine Klasse, sondern lediglich eine Actionscript Datei). Binden wir also diese Datei nun in unsere Anzeige.mxml ein mit folgendem Kommando:

<fx:Script source="com/joocom/blogtutorial/controllers/Anzeige.as" />

Man muss dazu sagen, dass wenn man hier eine Klasse erstellt, es einen Konflikt gibt, wenn man diese als Source einträgt. Ich bin zuerst auf diesen Fehler gestoßen und es ist mir aufgefallen, dass der Tag fx:Script sich identisch zu einem Include verhält und da jede MXML Datei einem Package angehört, gibt es dann hierbei Probleme, da eine AS3 Klasse ebenfalls ein Package besitzt, das im Hintergrund von Flex / Flash Builder generiert wird. Dieses Schema kann im übrigen so oft und beliebig geschachtelt werden, wie es einem beliebt.

Wenn ihr dies alles berücksichtigt habt, ist euer MVC Flex Projekt fertig und ihr könnt beginnen. Ihr könnt nun direkt von den Controllern und von den Views auf das DBModel zugreifen und die Daten benutzen.

Ich hoffe ich habe hier einigen Softwareentwicklern damit geholfen und ihr könnt damit nun ein bischen mehr euren Code ordnen. Mir hat dies extrem geholfen bei meinem aktuellen Projekt. Evtl. werde ich die nächsten Blogs wieder über dieses Thema schreiben, da mir aufgefallen ist, dass es hierzu fast keinerlei brauchbaren Informationen bisher gibt.

Einen schönen Mittwoch wünsche ich noch, euer Mark.

Lern uns kennen!