Mate tutorial - abstracting the business logic/data communications and presentation


Matt - Posted on 26 September 2008

As promised, here's an example of the business/presentation abstraction in Mate.
We have two projects here - the Data Layer and the Presentation Layer.
The Data Layer is responsible for retrieving data from the server, doing any basic data translation and making that data available to anyone who wants it. The Presentation Layer takes the "raw" data from the Data Layer, modifies it into the format required for display and sends it to the view.
MateModelAdapter1.jpg
Our demo application retrieves the top 40 Digg stories via an RSS feed. Here's how it works. The cycle starts when the Presentation Layer fires the DiggDataEvent.GET_DATA event when the application initializes:
dispatchEvent(new DiggDataEvent(DiggDataEvent.GET_DATA));
The Data Layer's MainEventMap picks up this event, makes the HTTP call and sends the results to DiggRssModel, also in the Data Layer:
<mate:EventHandlers type="{DiggDataEvent.GET_DATA}">
<mate:HTTPServiceInvoker url="http://digg.com/rss/index.xml" resultFormat="e4x">
<mate:resultHandlers>
<mate:MethodInvoker generator="{DiggRssModel}" method="storeXml" arguments="{resultObject}" />
</mate:resultHandlers>
</mate:HTTPServiceInvoker>
</mate:EventHandlers>
Our DiggRssModel simply stored this XML document and makes it available via a Bindable getter. At this point the Data Layer contains the raw data from the server, ready for the Presentation Layer to pick it up and do something with it. The glue to the whole system is the Presentation Layer's AdapterMap. Using databinding, the AdapterMap notices the change in DiggRssModel.diggRssFeed and injects the value into the Presentation Layer's DiggDataAdapter.diggRssFeed property:
<mate:Injectors target="{DiggDataAdapter}">
<mate:PropertyInjector
targetKey="diggRssFeed"
source="{DiggRssModel}"
sourceKey="diggRssFeed" />
</mate:Injectors>
The DiggDataAdapter takes this raw XML data, extracts the title values and adds them to a bindable ArrayCollection. All that is left is for the view to pick up this data and display it, which is done easily using a List control:
<mx:List xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:business="com.preinvent.test.business.*" xmlns:modeladapters="com.preinvent.test.modeladapters.*"
dataProvider="{model.titleList}"
width="414" height="428" >
 
<modeladapters:DiggDataAdapter id="model" />
</mx:List>
And that's all there is to it! As you can see, we have kept the Data Layer in control of server communication and raw data storage, and the Presentation layer deals with picking up the raw data, changing it to fit the view's needs then passing it to the view for display. This way we can have different frontend applications using the same data code without needing to duplicate the server communications code.
The two demo projects are in the ZIP file that can be downloaded from the attachments list below. Note that the crossdomain.xml file on digg.com does not allow access from external servers, therefore the SWF will only run from disk - if you run it from a web page you won't get any results!

AttachmentSize
MateModelAdapter.zip1.1 MB

I've posted a cairngorm version of this concept on my blog.
Here's the link: http://alexrosano.com/flex/cairngorm/abstracting-services/

Great tutorial. It really helps me start with the Mate framewok. Thanks.

I don't see an RSS feed link on your site. I would like to subscribe to your site via a feed. Do you have one?

Thanks,

-Kyle

Hi Kyle,

The site is RSS enabled. The RSS feed for the main blog is http://blog.preinvent.com/blog/1/feed

Thanks for supporting me!

About the author

Matthew Butt is an experienced developer, software architect and development manager. For more information, review the About page.