Fernando Correia’s Weblog

July 30, 2008

Flex client using PureMVC

Filed under: Software Development — Fernando Correia @ 8:42 pm
Tags: ,

Continuing my quest to build a Flex client to a Python service on Google App Engine, I decided to try converting my previous example from the Cairngorm framework to PureMVC.

I liked the PureMVC approach better. Its notification mechanism is very simple and powerful. The view components are quite independent from the rest of the application. And, best of all, the framework’s architect, Cliff Hall, has a clear vision that the framework must be kept simple, with few features. He also is very active on writing documentation, examples and answering user questions on the forums.

After reading all documentation and examples I could find, I set out to convert one of those examples to deal with my business entitites: projects.

I must warn that what I am showing here is an exploratory project and a work in progress. It doesn’t represent, by any stretch, the best practices. By documenting my journey I intend to help others that may follow, and also to get some feedback and help on better approaches.

This is what the application looks like:

Using PureMVC the application is structured around a Façade object that has a reference to a collection of Models, a collection of Views and a collection of Controllers. Like this:

The model uses a “proxy” class that has the responsability of managing model objects. The view uses “mediator” classes that have the responsability of connecting the view to the application without too much coupling. And the controller has commands that are invoked by the framework when certain notifications are raised.

It is a good architecture with low coupling, high cohesion and clear separation of responsabilities. It is also lightweight and more concerned on providing guidance and structure than on restricting what the programmer can do. Currently I am considering this my framework of choice for my Flex experiments.

My post is not about explaining how PureMVC works. The project website does it quite well already, at least for those who are willing to invest a few hours learning it. But I will show some snippets of code that may at least raise some curiosity:

This is how the projects list forwards the “New project” command:

private function onNew(event:Event):void
{
    var project:ProjectVO = new ProjectVO();
    sendNotification(ApplicationFacade.NEW_PROJECT, project);
}

This is how the project form prepares itself for entering a new project:

case ApplicationFacade.NEW_PROJECT:
    projectForm.project = note.getBody() as ProjectVO;
    projectForm.mode = ProjectForm.MODE_ADD;
    projectForm.code.setFocus();
    break;

When the user submits the new project, this is how the project form handles this event:

private function onAdd(event:Event):void
{
    var project:ProjectVO = projectForm.project;
    projectProxy.addItem(project);
    sendNotification(ApplicationFacade.PROJECT_ADDED, project);
    clearForm();
}

So, the view mediator, that is a kind of Supervising Controller, causes the model to update itself with the new project’s data. This method in the model’s proxy class is implemented like this:

public function addItem(item:Object):void
{
    Gateway().call("ProjectService.save", new Responder(onAddItemResult), item);
}

So, it talks directly to the service using a remote object gateway.

There is also a Participants list, but it is not persisted to the server yet. It is only kept in the client’s memory and goes away when the application is closed. I am still trying to figure out the better way of dealing with it.

I hope this helps. The project is published on github. Feedback is welcome.

Advertisements

Leave a Comment »

No comments yet.

RSS feed for comments on this post. TrackBack URI

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Blog at WordPress.com.

%d bloggers like this: