Mate (pronounced mah-teh) is a Flex framework for the MVC ( Model View Control ) Pattern. Like other frameworks, Mate addresses the common architectural concerns in Flex such as event handling, data binding, and asynchronous processing, but the most important goal is that it's only tag-based so it's very easy to use it in our Flex Applications.
Now we are going to see how Mate manages the events and the operations connected to them and how the Data results are injected into our application.
The core of the Mate framework is the EventMap tag, where we can define all the handlers of the Events, the Objects that manage Data and the View. We can create a lot of Event maps in our application and put them in every Conteiner Components, it's easy to understand that is necessary to be careful about the position where we put them (remember the Event Handlers rule) in our Application hierarchy.
Here is a simple graph of Mate's architecture:
Now we go to see how to build an EventMap component.
First of all it's necessary to include in our project the Mate swc library. After this we can create the our EventMap component like this:
<mate:EventMap>
</mate:EventMap>
We can use this tag within our application MXML, but I think it's better to create an external component, so it easy to define the functionalities of the framework, and also we are sure that the pattern MVC isn't violated.
In the EventMap tag we can insert some EventHandler tags, were we can define the attribute “type” that indicates the type of the Event that we want to handler. All the events that we want to manage inside the EventMap could be custom or created by us, but remember to built them with the parameter bubbles set to true:
package com.comtaste.controls
{
import flash.events.Event;
public class MyEvent extends Event
{
public static const CONST_MY_EVENT:String = "constMyEvent"
public function MyEvent(type:String,bubble:Boolean = true,cancelable:Boolean = false)
{
super(type,bubble,cancelable);
}
}
}
Here is a small example of EventHandler tag:
<mate:EventMap>
<mate:EventHandlers type="{MyEvent.CONST_MY_EVENT}">
</mate:EventHandlers>
</mate:EventMap>
Once the setup of our EventHandlers is complete, we can define the Objects and the Methods that retrieve or send data from/to a server. Inside the Mate Framework we have this three tags:
- RemoteObjectInvoker
- WebServiceObjectInvoker
- HTTPServiceObjectInvoker
All of these tags are used to create Object instance based on, respectively, RemoteObject class, WebService Class and HttpServive class. With them we can call a method on the object created and specify the same attributes of the standard classes from mx library. In addition, you can specify the methods to call directly as tag attribute.
Inside the Mate tags above we could define the handlers for the ResultEvent and FaultEvent, as in this part of code:
<RemoteObjectInvoker destination="YourDestination"
source="path.to.your.service"
method="methodToCall"
arguments="{['argument1', 'argument2']}">
<resultHandlers>
... this list executes when server returns results ...
</resultHandlers>
<faultHandlers>
... this list executes when server returns an error ...
</faultHandlers>
</RemoteObjectInvoker>
Into the methods that manage the result of the service, we have to define the input parameters like the contents of what the service returned, and we have to do the same thing for the fault methods (in this case the event.fault).
To specify the methods that handle the results events we can use this tag:
<MethodInvoker generator="WorkerTwo" method="receiveResults" arguments="{resultObject}" />
Here we define the class that contains the method in the attribute “generator”, the method's name in the “method” attribute and the resultObject in the “arguments” attribute. The resultObject contains the data returned by our service.
For the faults handler we can use the same tag shown above but we have to insert into it the attribute “arguments”. View the code below:
arguments="{event.fault}"
in this way we can manage the fault messages returned by the service.
So we have seen how to manage the controller layer in a Flex Application, now we are going to see the Model Layer.
Mate framework gives us an MXML-based class for the injection of the data coming from our services into the View Layer: Injector class.
The Injector Class is located as a tag inside our EventMap. In it we can push the value coming from the result of the services into the property of the object in our Application Components. Remember that the visibility of the view-object by the EventMap depends on the position of this tag inside the application hierarchy.
Below you can see an example of the Injector tag:
<Injectors target="{MyView}">
<PropertyInjector targetKey="myVar" source="{MyModel}" sourceKey="modelVar" />
</Injectors>
In the Injector tag the “target” attribute indicates the target component of the injection and the “targetKey” attribute in the ProjectInjector tag indicates the attribute of the target component that must to be change. Moreover the “source” and the “sourceKey” attributes, both in the ProjectInjector tag, are respectively the Class and the value where the injection starts.
What I explained in this post is a very simple demonstration of the architectural structure of the Mate Framework. Next time I will show you a little example where we could see something more and afew best-practice rules to applicate for a correct use of this framework.
Regards