Scott Mebberson

Icon

Web Technologist

July 9, 2009 • 12:12 pm 6

MATE: Responding to events

Recently, I embarked on a personal project to learn about the Mate Framework, which I’ve started hearing more and more about. We’ve successfully used Cairngorm in dozens of Flex/AIR projects at Enpresiv and I thought it was time to try out Mate (apparently pronounced mah-teh).

I’m glad I did, because it is an awesome framework with much flexibility making it suitable for many different types of projects. One of my favourite things about the framework is how quick and easy it is to integrate. It doesn’t force you to use all Mate concepts either, providing endless options for partial integration into existing projects that might just need a little structure.

One of the issues with Cairngorm that a lot of people have trouble with is easily responding to events/commands within a view (albeit the event that dispatched the event or not). I was happily surprised when I found out this is one of the easiest things to do within Mate, and there are two ways to do it!

Mate advocates the Dependency Injection pattern over the Model Locator pattern which Cairngorm advocates. Dependency Injection is a fantastic concept and truly promotes reusable views as the view needs no knowledge of the framework. Your view doesn’t really need to respond to an event directly, it just receives only the required or updated data it needs.

The second means for views to directly respond to events is using the Listener tag, which simply could not be any easier to work with.

I’ve worked up a basic yet focussed example on two options for repsonding to Mate events within views.

I plan on discussing other Mate features in future posts, but thought this was a great starting point as it’s the source of pain for many Cairngorm developers. Although, Universal Mind have released some extensions which make responding to events/commands within views much easier.

Filed under: cairngorm, flash platform, flex, frameworks, mate

May 27, 2009 • 11:40 pm 2

Dispatching events in Adobe AIR using MATE

I’ve been intrigued about the Flex framework called MATE ever since I stumbled across it, some months ago. The guys at asfusion.com have always been expert Flex / ActionScript developers and the MATE framework they’ve developed is no exception.

I decided to use MATE rather than Cairngorm in a personal project I’m working on, to check it out in a real world environment (there’s nothing like going beyond examples and prototypes to determine if a framework actually works beyond design patterns and theory).

So far, I’m very impressed.

It’s light weight, easy to integrate, and has a tag to suit almost any situation and many common design patterns. Within half an hour, I had MATE integrated into my project, dispatching events and updating the model.

I did however come across an interesting problem which had me stumped for a while. I’m working on an AIR application in which I have a preferences window (via a NativeWindow popup) which creates, stores and modifies preferences for the application (yes, I’m using as3preferenceslib).

The basic idea behind MATE is to dispatch events and respond to those with changes to the Model using dependency injection to keep your views notified of the changes. All of this happens via a tag called EventMap (MATE is a tag-based framework) which is used to respond to events, change the model and inject changes to data into views. Basically, you whack the EventMap tag into your Application.mxml, use the standard dispatchEvent and magically, everything works.

Unless you’re view is used in a popup window and you want to use MATE events and the model.

The reason being popup windows within AIR have an entirely different displayList to the Application displayList and your EventMap won’t be able to intercept events dispatched using the standard disptachEvent.

After some poking around in the MATE documentation (which is very good by the way) I found a Dispatch tag, which can also be instantiated via ActionScript. So, I simply made an instance of Dispatch and used the dispatchEvent method and once again, magically, everything worked.

var countdownEvent : CountdownEvent = new CountdownEvent(CountdownEvent.SET);
countdownEvent.countdown = event.newValue;

var d : Dispatcher = new Dispatcher();
d.dispatchEvent(countdownEvent);

Filed under: air, flash platform, flex, frameworks , , ,

March 25, 2009 • 11:31 am 0

View Notifications: responding to Cairngorm Commands in the View

As I’ve previously mentioned, we’re in the early architecting stages of a Flex application and we’re being confronted with some key decisions to be made. I think some these might be useful so I’ll continue my Flex based posts during the project.

The basic premise of Cairngorm and the ModelLocator pattern is that each Command (responsible for retrieving data from the server via the ServiceLocator pattern) retrieves the data and then updates the Model with the new data. In turn, your Views can then respond to changes in the Model via Flex’s baked-in data binding. This is one of the most useful features of Cairngorm and makes it perfect for large scale Flex applications.

But what about the times when you don’t want the Command to change the Model? One of the downsides of the ModelLocator pattern is if you go sticking everything in the model, it will quickly become polluted.

There has been much discussion in the past about how to best deal with this situation:

This time around we chose Thomas Burleson’s View Notifications resolution. It seemed to make perfect sense, it was clean and easy to achieve.

After successfully implementing it (which really was simple), I can definitely recommend View Notifications as a means to respond to Commands directly within your Views!

It seems Thomas and the Universal Mind team are looking to formalise this and some of their other Cairngorm extensions.

Filed under: cairngorm, flash platform, flex

March 24, 2009 • 4:53 pm 0

Implementing Lazy Loading via a Ghost

Many of our Flex applications contain a datagrid showing a large set of objects. It provides a central point in an interface for users to sort and filter the larger set of data with little effort on our behalf because the datagrid control is so feature rich (i.e. good value for money, or ROI).

Datagrids are also very handy for showing only a limited number of object properties until the user selects a record, generally resulting in a detailed view showing more or all object properties.

You need to be careful however, ensuring you avoid common pitfalls such as loading large data sets all at once, using up more memory than you need to causing the application to feel sluggish and slow.

A fantastic approach to avoiding these situations is to use the Lazy Loading design pattern via a Ghost.

Lazy Loading is the practice of deferring initialisation of an object until the last minute (or the point it is actually required). Using the Ghost implementation of Lazy Loading allows you to load an object in a partial state; or put simply, load only a subset of the objects properties until all of them are required.

The properties you would load initially are those you want to display in the datagrid, and the rest could be loaded and injected into the appropriate object once selected in the datagrid and the detail view appears.

Filed under: flash platform, flex

• 3:13 pm 0

Editing VOs in the model?

We’re working on a Flex application at work, using Cairngorm, and we’re in the early architecting stages of the project.

We have a datagrid showing a list of clients (an ArrayCollection containing ClientVOs, which lives in model.clients).

We need to provide the functionality to edit a ClientVO, and save the data back to the database. When constructing the edit view we had to decide to either pass the ClientVO to the view by reference or to pass the ClientVO to the view by value.

The events we had to manage when exiting from the ClientVO edit view where:

  • Save. Save the ClientVO to the database, but do not exit the edit view.
  • Done. Save the ClientVO to the database and exit the edit view.
  • Cancel. Exit the edit view and discard any changes.

The Cancel event basically forced us to pass the ClientVO to the view by value, which gives you great flexibility on editing a local (to the edit view) version of the ClientVO.

However, it does mean you need to force the edited ClientVO back into model.clients (so that the datagrid contains the new values) at the correct index, effectively replacing the old version of the ClientVO and not an unrelated ClientVO.

I’m not sure if there is a Design Pattern that supports this, or demonstrates how to handle this better.

Filed under: cairngorm, flash platform, flex

May 15, 2007 • 1:45 pm 0

Deep Linking in Flash with SWFAddress

I was working on a small Flash project last night, in which I needed to integrate support for the browser navigation buttons (back and forward). It has been a while since I have needed to do this, so I set about reading about any progress in this area.

To my surprise, things have come a long way and there are now solutions which work on the client-side only (great for small little flash applications which don’t require any server-side integration).

I think the initial idea for the client-side only solution came from Kevin Lynch. I used the SWFAddress solution however, and it worked quite well. It was easy to setup, and provided me the flexibility I needed to have my own control mechanisms within Flash (that responded to the back button being clicked and actually making the change within the SWF).

There was one “gotcha” that had me scratching my head for a while:

  • I couldn’t get local testing to work (i.e. loading the container HTML file into the browser from the file:// protocol). Local testing didn’t work until I access the HTML page via my local Apache server.

While SWFAddress goes a long way in taking the pain out of adding browser navigation button support to your Flash project, it doesn’t address implementing the control mechanism within Flash that actually updates the SWF as the user clicks the back button. Implementing a good internal Flash structure such that you can easily change/update SWF content based on back button clicks is the key to painless browser navigation buttons support in your Flash project.

If I have some time in the near future, I might post a couple of good ways to overcome this problem.

technorati tags:

Filed under: flash platform

About Me

I'm a web technologist living and working in Adelaide, Australia.

My Tweets

Downloads

Navigation

My Older Posts

Meta

Blogroll