In my last post I showed you how Mate framework works. Now I would like to deepen the study on this framework with a short example, and I'd like to show one of best practice ways to use it. For this project I used Flex 4 and Mate_08_9.swc library.
In respect of the Model View Control Pattern I create a project with six packages: business, component, controls,maps, model and view.
In the business package I create all the classes that can communicate with remote services (like http services or wsdl services ), in fact you can find there a ServiceLocator class as an MXML file, that extends the Object class, where I put an httpService tag, from which I would like to obtain an XML File.
<?xml version="1.0" encoding="UTF-8"?> <DataPerson> <Person> <name>Name</name> <surname>Surname</surname> <phone>12345678</phone> </Person> <Person> <name>Name 1</name> <surname>Surname 1</surname> <phone>123456789</phone> </Person> </DataPerson>
In the Component package I create the components of my application (in this example only MyDataGrid.mxml) that I use into my View.
In the controls package I put my Event class, in the maps package My Mate EventMap, and in the model package I create a singleton call MateExampleModel where I manage all the data structure used by my view components that are in View package.
Hope that the project structure is easy to understand, I would like to analize the core of the project in particular how I follow the MVC Pattern with Mate Framework.
First of all we can see into the Application tag (view.MateExample.xml) all the View components present in my project, and it's easy to see that there are only an event dispatcher, a data binding with a property of the model, and the build of the EventMap component (component.MyEntityMap).
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:component="component.*" xmlns:maps="maps.*">
<mx:Script>
<![CDATA[
import controls.XMLLoadMateEvent;
import model.ModelMateExample;
public var evt:XMLLoadMateEvent = new XMLLoadMateEvent(XMLLoadMateEvent.XML_LOAD);
]]>
</mx:Script>
<mx:HBox width="100%" height="100%">
<mx:VBox width="30%">
<s:Button label="Fill the Datagrid" click="{dispatchEvent(evt)}" />
<component:MyDataGrid width="100%" height="100%" dataProvider="{ModelMateExample.instance().gridDB}"/>
</mx:VBox>
</mx:HBox>
<maps:MyEntityMap />
</mx:Application>
The Control components are the Event Class, dispatched by the view, and the HttpServiceManage Class that contains all the methods for manage the resultObject coming from the HttpService (result and fault methods).
The Mate Entity Map is separated by the other Control classes, and it contains all the tags that we analized in my last post... but I think is a good idea to deepen how I used that tags. First we can see how I manage the httpService: on the bottom of the file MyEventMap.mxml I build an object from my ServiceLocator and I used it to generate an instance of an httpService into the HttpServiveInvoker tag, and, inside it, I manage the resultObject and the fault with the methods of an instance of the HttpServiceManage Class (view the code below).
<?xml version="1.0" encoding="utf-8"?>
<mate:EventMap xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:mate="http://mate.asfusion.com/" xmlns:business="business.*">
<mx:Script>
<![CDATA[
import controls.HttpServiceManage;
import controls.XMLLoadMateEvent;
]]>
</mx:Script>
<!-- enable debugger -->
<mate:Debugger level="{Debugger.ALL}"/>
<!-- handler of the XMLLoadMateEvent -->
<mate:EventHandlers type="{XMLLoadMateEvent.XML_LOAD}" debug="true">
<!-- HTTP Service -->
<mate:HTTPServiceInvoker instance="{service.httpService}" debug="true" >
<!-- result handlers -->
<mate:resultHandlers >
<mate:MethodInvoker generator="{HttpServiceManage}" method="result" arguments="{resultObject}" >
</mate:MethodInvoker>
</mate:resultHandlers>
<!-- fault handlers -->
<mate:faultHandlers>
<mate:MethodInvoker generator="{HttpServiceManage}" method="fault" arguments="{fault}" >
</mate:MethodInvoker>
</mate:faultHandlers>
</mate:HTTPServiceInvoker>
</mate:EventHandlers>
<!-- Service Locator -->
<business:ServiceLocator id="service"/>
</mate:EventMap>
It's very import to see that I manage the model of my application without the PropertyInjector tag . In fact, if you see the code of the HttpServiceManageClass, you can observe that I use the model's objects inside the result method of my httpService.
package controls
{
import model.ModelMateExample;
import mx.controls.Alert;
import mx.rpc.Fault;
public class HttpServiceManage
{
public function HttpServiceManage()
{
}
public function result(obj:Object):void{
ModelMateExample.instance().gridDB = obj.DataPerson.Person;
}
public function fault(faultObj:Fault):void{
Alert.show("Error: "+faultObj.message);
}
}
}
Generally I prefer to use this kind of solution because I think it could be clearer for whom want to analize my code to understand the funcionalities and the model's properties managed by the methods.
This approach is not the only one that you can use in your Mate Project, in fact it would like to be only an example of the flexibility of this framework.I think that Mate could be a very simple and power solution for create Flex Project with a solid structure that guarantees good quality for our projects.
Regards