Mate – ein Architektur-Framework für Flex
Dieses Tutorial gibt eine kleine Einführung in das Flex-Architektur-Framework Mate. Als Beispiel erstellen wir eine kleine Aktienkurs-Anwendung, die ein vom Benutzer eingegebenes Aktiensymbol an einen ColdFusion-Server sendet, den aktuellen Wert zurückgibt und diesen im Model speichert, um ihn dann in der View anzuzeigen. Die ColdFusion-Komponente, die Mate-Bibliothek und das vollständige Flex-Projekt finden Sie am Ende des Artikels.
Alle Mate Projekte erfordern:
1. Ein oder mehrere Events (benutzerdefiniert oder Flex-intern)
2. Ein oder mehrere EventMaps
Die üblichen Schritte, um ein Projekt mit Mate zu erstellen, sind:
1. Den kompilierten Framework-Code zum Projekt hinzufügen (Mate.swc).
2. Eine Datei anlegen, die zur EventMap wird.
3. Die EventMap in die Hauptanwendung integrieren.
4. Eine benutzerdefinierte Event-Klasse erstellen.
5. Irgendwo in der Anwendung das Event absenden.
6. EventHandler zur EventMap hinzufügen, um auf Events zu hören.
7. Aktionen im EventHandler-Block ausführen (z.B. Server anfragen, Daten speichern).
8. Schritte 4-7 für jedes benötigte Event wiederholen.
ColdFusion installieren
Laden Sie die kostenlose Developer Edition (Version 9) von Adobe’s ColdFusion-Seite herunter. Installieren Sie die Software mit den Standard-Voreinstellungen.
Den Service installieren
Im Ordner C:\ColdFusion9\wwwroot\ legen Sie den Unterordner AktienkursBeispiel an und kopieren dort die ColdFusion-Komponente Service.cfc hinein.
Ein neues Projekt anlegen
Legen Sie im Flash Builder ein neues Projekt namens „Aktienkurse“ an. Anwendungsservertyp ist „ColdFusion“.
Im Ordner „libs“ platzieren Sie die Datei Mate_08_9.swc.
Damit können wir alle Mate-Klassen und -Tags verwenden.
Das selbstdefinierte AktienkursEvent
Jedes Mate-Projekt ist ereignis-gesteuert. In unserem Anwendungs-Beispiel erzeugen wir ein neues Event, wenn der Benutzer den Button „Aktienkurs abrufen“ angeklickt: Dieses Event erhält das eingegebene Aktiensymbol (z.B. ADBE für Adobe), das an den Server gesendet wird. 
Hierzu benötigen wir ein selbstdefiniertes Event, um anzuzeigen, dass der Benutzer das Kürzel übertragen und den aktuellen Börsenkurs erhalten will. Unser Event ist sehr einfach und enthält nur eine Eigenschaft: symbol.
Die Benutzeroberfläche
Die Benutzeroberfläche besteht lediglich aus einer Texteingabe, einem Button sowie einem Label zur Anzeige des Kurswertes:
Erstellen Sie die UI als Komponente namens „AktienkursPanel“ im Package src/views.
Binden Sie die Komponente in Ihre Hauptanwendung ein.
Das AktienkursEvent absenden
Wenn der Benutzer den Button anklickt, erzeugen wir das AktienkursEvent und senden es ab.
Die EventMap
In der EventMap platzieren wir die Handler für alle Events, die die Anwendung erzeugt
(es kann auch mehrere EventMaps geben).
Um eine EventMap hinzuzufügen, erstellen wir eine neue MXML-Datei namens „MainEventMap“
im Paket src/maps. Diese Komponente wird von EventMap abgeleitet. Im Moment ist unsere neue EventMap leer – bis auf den Debugger-Tag, der uns erlaubt, Events zu überwachen.
Hinweis: Wir verwenden keinen Namespace für http://mate.asfusion.com, so brauchen wir ihn auch nicht zu jedem Tag in der EventMap hinzuzufügen.
Wir fügen die EventMap zu unserer Anwendung (im Deklarationsteil) hinzu.
Auf AktienkursEvent.GET hören
In unserer EventMap hören wir auf das AktienkursEvent, damit wir eine Anforderung an den Server senden können. Wir fügen ein EventHandlers-Tag hinzu, dass den Event-Typ spezifiziert, den wir abhören. Wir setzen auch das Debug-Attribut auf „true“, damit wir die Ausführung des EventHandlers auch in der Debugging Console überwachen können.
Denken Sie daran, in der EventMap noch die Event-Klasse zu importieren.
Innerhalb des EventHandlers-Blocks platzieren wir die Aktionen, die wir ausführen wollen, wenn das Event abgefeuert wurde. In unserem Falle wollen wir eine Anforderung an den Server senden, wofür wir hier das RemoteObjectInvoker-Tag verwenden.
Wir rufen die Methode getKurs und übergeben „symbol“, das vom AktienkursEvent kommt, als Argument an den Methodenaufruf.
Handling des Server Result
Der Server gibt ein ResultObject zurück.
Wir behandeln diese Rückmeldung innerhalb des WebServiceInvoker’s resultHandlers-Tag und rufen über einen MethodInvoker die Funktion „storeKurs“ in der (noch zu erstellenden) Klasse „AktienkursManager“ auf.
Unser Model, der AktienkursManager
Die Klasse „AktienkursManager“ wird nicht nur unsere Daten (hier den Aktienkurs) speichern,
so dass diese von den Views verwendet werden können. Sie enthält auch die gesamte Geschäftslogik betreffend Aktienkurse (eine Manager-Klassen in Mate ist daher mehr als nur ein Model). Hier die Definition der Klasse (im Paket managers):
Wenn die Methode „storeKurs“ aufgerufen wird, können wir hier jede Geschäftslogik unterbringen, die wir benötigen.
Hinweis: Die Eigenschaft „aktuellerKurswert“ ist hier der Einfachheit halber public. In einer realen Anwendung sollte sie Nur-Lesen-Eigenschaft sein (Getter). Um sie dennoch „bindable“ zu machen, wäre vor jeden Getter z.B. ein Metadata-Tag [Bindable (event=“kurswertChanged“)] zu stellen und überall dort, wo eine Eigenschaft geändert wird, ein gleichnamiges Event abzufeuern.
Den Aktienkurs in der View anzeigen
Nun, wenn das Ereignis abgefeuert und der Service aufgerufen wurde, liefert der Server den aktuellen Aktienkurs und den vollen Namen des Unternehmens zurück und speichert beides im AktienkursManager. Aber nun wollen wir die Daten auch in der View anzeigen.
In der View AktienkursPanel fügen wir eine Eigenschaft kurswert hinzu.
Den anzuzeigenden Wert können wir im Label via DataBinding verwenden.
Das ist alles in der View.
Den Aktienkurs vom AktienkursManager zur View bringen
Aber wie bekommt die View die im AktienkursManager gespeicherte Variable?
In unserer EventMap fügen wir ein weiteres Tags-Set ein. Diese Tags werden eine Eigenschaft des Models (AktienkursManager) mit einer Eigenschaft der View (AktienkursPanel) verknüpfen. Und da die Eigenschaft des Models „bindable“ ist, erhält die View immer den aktuellen Wert.
Hinweis: Wenn Sie diese Tags hinzufügen, stellen Sie sicher, dass die EventMap über alle erforderlichen Import-Statements verfügt.
Die Dateien zu diesem Tutorial
Die ColdFusion-Komponente Service.cfc, die Mate-Bibliothek und das Flex-Projekt zu diesem Tutorial können Sie hier als ZIP-Datei (205 KB) herunterladen.
