Flex Framework: Using Mate to populate a datagrid with an ArrayCollection

01/02/2010 in RIA View Comments

Recently I have been learning to use and implementing the Mate Event based framework for Flex. I have to say it is very easy to pick up and will definitely be digging into it more as the days come. I am including a sample Flex project as a zip file in this post and won’t get into the fine details…unless I am asked to. In using Mate, one of the most important tips is to know what files to create and the process of using those files. For this demo I will be using the EventMap (of course…), and the Manager class. Below is the order or items needed and what they are used for.

Download source here.

Of course, learn more about Mate and get the framework here.

Mate and ArrayCollections

Default mxml file: I usually call a sub mxml file in as a view, in this case “<view:AC_View />”. This means that the AC_View.mxml file is sitting in the “view” folder off of the root of the application. Also, the EventMap which lets Mate access items throughout your application needs to be included in this default file. In my case this looks like “<map:AC_EventMap />”. AC_EventMap.mxml is sitting in the “map” folder off of the application root.
The AC_View.mxml file instantiates an instance of the “AC_ArrayCollection.as” class, which is a class I created that implements the ArrayCollection class. From AC_View.mxml I create the instance and also pass it an Array of values, such as “{first: ‘George’, last: ‘Washington’}].
The AC_ArrayCollection accepts the Array sent from AC_View.mxml, creates an instance of the ArrayCollection class, populates it, then dispatches and event.
AC_EventMap.mxml is a Mate EventMap instance, which accepts the dispatched event, passes the value to the Manager (AC_Manager.as), and also injects the ArrayCollection back to AC_View to populate the DataGrid.

You may be able to see that this seperates things nicely into an MVC (Model, View, Controller) based architecture, making things very reusable and easy to manager. For any of you that have tried to populate a DataGrid that hasn’t been rendered yet this will be a life saver.

This application, and a typical Mate based application, uses the following items:

Demo_ArrayCollection.mxml – Default application, instantiates “AC_View.mxml”
business/AC_Manager.as – Holds the values of event based items, sent from “AC_EventMap.mxml.
event/AC_Events.as – Contains any custon Event and variables that need to be accessed by the application using Mate.
map/AC_EventMap.mxml – The “brain” of the application, which accepts events and “routes” values where they need to go. In my case I am using the EventHandler and the Injector tags. The Injector tags do just that, they “inject” values into a view. In my case I am injecting a value from the manager into a setter method in the view, which sets the dataprovider of the datagrid.
model/AC_ArrayCollection.as – Custom class to instantiate a new ArrayCollection, based on values sent from the view.
view/AC_View.mxml – Holds the data grid and instantiates the ArrayCollection.

After all this “rambling”, just open the project and dig into each file to see the process.