Mate – ein Architektur-Framework für Flex

Mate – ein Architektur-Framework für Flex

23.03.2010 in Media & More

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 anzu­zei­gen. 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.

Tags: ,

Copyright © 2009-2024 by multimedia and more - - Impressum - powered by WordPress - Portfolio Theme deGusto by ThemeShift.com.