Einstieg ins Mate Framework

Das Mate Framework ist ein MXML-basiertes Framework für Flex. Da ich in letzter Zeit öfters darüber gelesen habe, wurde es Zeit, es einmal selbst auszuprobieren. Die vorbildliche Dokumentation erleichtert den Einstieg sehr.

Mate framework has been created to make it easy to handle the events your Flex application creates. Mate allows you to define who is handling those events, whether data needs to be retrieved from the server, or other events need to be triggered.

Model View Controller

Mate unterstützt bei der Programmierung von Anwendungen, die nach dem Model View Controller (MVC) aufgebaut sind. Es setzt dabei auf die Flex-eigenen Events auf und hat als zentrales Element eine sogenannte „Event Map”. Die Event Map ist eine MXML-Datei, die eine Sammlung an Event Handlers enthält, die entsprechende Reaktionen auf bestimmte Events einleitet.

Dependency Injection

Die Daten (Model) werden nicht per Databinding an die View gebunden, sondern mit einem Verfahren namens dependency injection quasi automatisch hineinkopiert.

Mate also implements the idea of dependency injection—sometimes referred to as the Hollywood principle, or „don’t call us, we’ll call you.“ Objects are constructed in such a way that the data they require is provided to them or injected into the class. In other words, the classes don’t call out to get data („don’t call us“) but rather are passed the data they need („we’ll call you“).

Beispielprogramm

Die simple Demonstrationsanwendung hat zwei Eingabefelder für Zahlen. Der Button „Addieren“ rechnet die Zahlen zusammen, „Subtrahieren“ zieht die Zahlen voneinander ab. Der Button „Zahlen aus XML-Datei addieren“ lädt eine XML-Datei und addiert die darin hinterlegten Werte.

[kml_flashembed publishmethod=“dynamic“ fversion=“10.0.0″ movie=“/wp-content/uploads/2009/07/mate/mate.swf“ width=“700″ height=“120″ targetclass=“flashmovie“ base=“.“]

Für das Mate Framework Demo benötigen Sie den Flash Player

[/kml_flashembed]

Am Beispiel des „Addieren“-Buttons wird im Folgenden geschildert, was innerhalb der Anwendung passiert.

Zusammengefasst sieht dies so aus: Ein Event wird in der View ausgelöst. Dieses wird von der Event Map verarbeitet und die Methode einer Klasse aufgerufen. Die Methode berechnet das Ergebnis, woraufhin die Event Map das Resultat entgegennimmt und wieder in die View zurückspielt.

Auslösen von Events in der View

Nach dem Klick auf den Button „Addieren“ wird die Funktion getAddResult() in der View aufgerufen, die lediglich ein neues Event vom Typ MathEvent auslöst. Als Event-Typ wird MathEvent.ADD festgelegt. Die beiden Eigenschaften des Event werden mit den Zahlen aus den Input-Feldern befüllt.

[as]
private function getAddResult() : void {
var mathEvent:MathEvent = new MathEvent(MathEvent.ADD);
mathEvent.myNumber1 = Number (numberInput1.text);
mathEvent.myNumber2 = Number (numberInput2.text);
dispatchEvent(mathEvent);
}
[/as]

Event Handlers in der Event Map

Zentrales Element ist die Event Map. Sie nimmt die ankommenden Events in Empfang und veranlasst die gewünschte Funktionalität (z.B. das Aufrufen von Methoden, Auslösen von anderen Events, Starten eines HTTPServices, etc.). Im konkreten Fall wird über MethodInvoker die Methode addNumbers aus der Klasse MathManager gestartet. Als Argumente werden die beiden Zahlen aus dem Event übergeben.

[xml]



[/xml]

MathManager

Die aufgerufen Funktion berechnet das Ergebnis und speichert es in der Variablen currentMathResult. (Es muss kein return-Befehl erfolgen, wie man vielleicht erwarten würde).

[as]
[Bindable]
public var currentMathResult:Number = 0;

public function addNumbers(n1:Number, n2:Number):void {
currentMathResult = n1 + n2;
}
[/as]

Injectors in der Event Map

Die oben berechnete Variable currentMathResult aus der Klasse MathManager wird nun in die View „injiziert“. Ziel soll die dortige Variable mathResult sein. Ergebnis dieses Schrittes ist, dass das addierte Resultat vom Nutzer zu sehen ist.

[xml]



[/xml]

Download

Das komplette Beispiel steht als FlashDevelop-Projekt zum Download (.zip).

Link: Mate Framework
Link: A beginner’s guide to the Mate framework for Adobe Flex
Link: Choosing a Flex Framework
Link: The Mate framework from a Cairngorm perspective

[ad]