Tushar Khairnar's Tech Blog: April 2010

Recently at work place I was working on complex GUI screen which was to be designed in Flex. Flex has quite nice capabilities : Making beautiful GUI containing charts, widgets with minimal efforts and getting data from java-based-server-side with RemoteObject. But I guess as application will get complex(Do check grooveshark.com to see how rich and complex but beautiful GUI can be created with Flex) I needed some way of structuring and designing application so anybody can understand and extend application without reading thousands of lines of action script code. Being java programmer (framework based eco-system) naturally I thought on the lines of Struts, MVC framework. But then I felt need of spring like container too where I can write/design each component separately, test them and inject and wire them in main application. There are lots of framework in flex : Cairngorm, pureMVC and Mate. Naturally first pick was Cairngorm since its official adobe framework. While browsing through HelloWorld program, I thought why I am needed to to make so many framework specific classes. Last update date on download site was very old : 30th May 2007. Then I learned about Mate : a wonderful framework which allows structuring of application in very unobtrusive way with very small learning curve. It was quite easy for me to help other team members understand new design with this framework.

Mate uses flex eventing. So with Model-View-Controller, View generates events like Submit-Form which then you can "map" to one or more Controllers. The best feature of this framework is "Injection". It injects model into controller and view so once you change model in Controller methods View updates it self. With Flex data binding and Mate injection this becomes quite powerful and very simple design for complex GUI. Mate EventMap tag allows declarative coding thus allows rapid testing and prototyping. When you look at Mate EventMap you will come to know what Application is doing, its high-level components. - your design - exactly what framework should do. Mate allowed me structure my application and set discipline.

Say for example on clicking on "submit" button, you want to show make remote call, get data, update couple of labels on screen and put data into Grid also calculate Total Amount from all records and based on some "Value" you want to show some Signal like Yellow, Amber or Green indicating current status. Such screen can be described by simple EventMap declaration as follows. View can be implemented with its own Panels : SearchPanel and DisplayPanel. SearchController will host all activity specific code like calculating Totals or Summary etc.

EventMap

<EventHandlers type="{SearchEvent.SEARCH}">

<RemoteObjectInvoker instance="{services.productService}" method="search" arguments="{event.searchCriteria1,event.searchCriteria1}">

<resultHandlers>

<MethodInvoker generator="{SearchController}" method="setGridData" arguments="{resultObject}"/>

<MethodInvoker generator="{SummaryCalculator}" method="calculateSummary" arguments="{resultObject}"/>

<MethodInvoker generator="{SignalIndicator}" method="calculateAndIndicateState" arguments="{resultObject}"/>

</resultHandlers>

<faultHandlers>

<CallBack method="handleFault" arguments="{fault.faultDetail}"/>

</faultHandlers>

</RemoteObjectInvoker>

</EventHandlers>

View code can be refactored into two panels : SearchPanel and DisplayPanel SearchPanel looks like as follows :

SearchPanel

<mx:Script>

<![CDATA[

import mate.events.*;

import mx.controls.Alert;

import mx.collections.*;

private function fireSearch():void

{

var event:MessageEvent = new SearchEvent(SearchEvent.SEARCH, true);

event.searchCriteria1 = textInput1.text;

event.searchCriteria2 = textInput2.text;

dispatchEvent(event);

}

</mx:Script>

<mx:Button id="searchBtn" label="Search" width="100" click="fireSearch()"/>

Where as DisplayPanel looks like as follows :

DisplayPanel

<mx:Panel>

<mx:Script>

<![CDATA[

import mate.events.*;

import mx.controls.Alert;

import mx.collections.*;

import mate.model.*;

[Bindable]

public var searchResult:SearchResultVO;

</mx:Script>

<mx:VBox label="Search Result">

<mx:DataGrid id="dataGrid" width="350" height="200" dataProvider="{searchResult.Data}"/>

</mx:VBox>

</mx:Panel>

and code below injects model into controller and DisplayPanel. The way it works like Spring context's singlton bean so same instance is shared and below tag says : DisplayPanel.searchResult = SearchController.currentResultSet

EventMap - Injector

<Injectors target="{DisplayPanel}" >

<PropertyInjector targetKey="searchResult" source="{SearchController}" sourceKey="currentResultSet" />

</Injectors>

Below is code for Controller which requires its own Binding when currentResultSet changes :

SearchController

package mate.controller

{

import flash.events.Event;

import flash.events.EventDispatcher;

import mx.controls.Alert;

import mx.collections.ArrayCollection;

import mate.model.*;

public class SearchController extends EventDispatcher

{

private var _currentResultSet:SearchResultVO;

[Bindable (event="currentSetChange")]

public function get currentResultSet():SearchResultVO

{

return _currentResultSet;

}

public function setGridData(result:SearchResultVO):void

{

// Do other processing if required....

_currentSet = result;

dispatchEvent( new Event('currentSetChange'))

}

}

}

One more good feature if Mate is that it has MockService interface where you can write dummy remote service as part of Flex application itself. This allows developers to work independently when server-side services are not ready or avaialable.

<MockRemoteObject id="helloService" showBusyCursor="true" delay="1" mockGenerator="{MockHelloService}"/>

Welcome to awesomeness of Mate.
Tushar

Tushar Khairnar's Tech Blog

Thursday, April 1, 2010

More than MVC framework for Flex : Mate