Quick Introduction to the Mate Framework for Flex

Although at work I have implemented Cairngorm as our preferred framework, for the personal projects that you see on my blog, I have my own framework of sorts. My framework involves creating view objects that use standard Flex binding to my data models, using Flex's BindingUtils to react to model changes and using the main MXML file to invoke methods on my models in response to events on the views.

Recently, there's been a lot of chatter regarding the Mate framework, so last night started a little project to try it out.

This slightly useless little application allows users to create any number of coloured boxes (which I refer to as GraphicLayers), either filled or unfilled. They can select any of the GraphicLayers using a list view on the left and edit them. Let me run through the architecture to give you some insight into developing using Mate.

The fundamental object is a GraphicLayer - this is a value object that defines how our boxes will be rendered. Also inside my models directory is the GraphicLayersManager which contains an array collection of GraphicLayers and the business logic surrounding it.

I've created four view classes:

• An Editor class that allows users to edit the properties of the currently selected GraphicLayer
• A Renderer class that renders a GraphicLayer
• A Thumbnail class that extends the Renderer but at a thumbnail size
• A ListView class that lists the array collection of GraphicLayers and uses the Thumbnail class as its item renderer. The list view allows the user to define the currently selected GraphicLayer which is displayed in the Renderer and is editable in the Editor.

The view classes dispatch different events depending on user activity:

• The GraphicLayerChangeEvent is dispatched when a user edits or adds a GraphicLayer. The event has two types - a change and an add.
• The GraphicLayerSelectionChangeEvent is dispatched when a user changes the current selection in the list view.

Under the maps directory is the MainEventMap class. This class glues everything together using either EventHandlers or Injectors.

• EventHandlers have a type property which refers to the event type. When a view dispatches an event, it is these that invoke methods on the GraphicLayersManager to change the array collection of GraphicLayers.
• Injectors define the binding between properties of the GraphicLayersManager and view objects.

Having all the plumbing in a central location makes navigating the architecture of your application really easy. However, I do have reservations about the lack of checking at compile time of some of the properties in classes like the MethodInvoker's method property. Luckily, the Mate debugger is really helpful and using Flex's debug feature helps locate bugs and niggles very quickly.

Overall, I really like Mate - it feels a lot lighter than Cairngorm and was a breeze to pick up. I've enabled the source code view on this little application, I hope it helps towards your understanding of this new framework.

The application is available here.

simon gladman