Vixiom Axioms

April 1, 2008

ActionScript MVC minimalist example for PureMVC 2.0.3

Filed under: ActionScript, Flash, Flex Alastair @ 9:50 pm

I’ve updated Chandima Cumaranatunge’s excellent PureMVC walk-through to work with the latest version of PureMVC (2.0.3). Although PureMVC has extensive documentation nothing beats a simple demo for wrapping your brain around the framework. The most helpful part of Chandima’s tutorial is when he steps through the sequence of actions which includes initialization and then following a user’s gesture on a round trip through the framework.

1. The Concrete Facade class called ApplicationFacade broadcasts a STARTUP Notification.

2. The STARTUP Notification triggers the StartupCommand command object which registers the KeyDataProxy proxy, and StageMediator mediator.

3. StageMediator mediator registers a KEY_DOWN Event handler to the stage to intercept key presses. It also registers to receive KEYUPDATE Notifications.

4. User presses a key generating a KEY_DOWN Event that is intercepted by the key down event handler in the StageMediator.

5. StageMediator broadcasts a KEYDOWN Notification with the character code of the key in the notification body.

6. The KEYDOWN Notification triggers the StoreKeyCommand command object, which accesses the KeyDataProxy proxy and updates the model (data object).

7. The KeyDataProxy proxy stores the data in a data object (just a property in the proxy in this case).

8. The KeyDataProxy proxy broadcasts a KEYUPDATE Notification with the character code of the key in the notification body.

9. The KEYUPDATE Notification handler in StageMediator intercepts the KEYUPDATE Notification and traces the key value.

In my updated example I trace out each action to clarify when (and in which file) they occur. Make sure you have PureMVC in your class path before running the demo.

Digg! submit ActionScript MVC minimalist example for PureMVC 2.0.3 to stumbleupon.com submit ActionScript MVC minimalist example for PureMVC 2.0.3 to del.icio.us submit ActionScript MVC minimalist example for PureMVC 2.0.3 to reddit.com Like this post? subscribe to the feed.

4 Comments »

  1. This example is really nice for the realMVC newbies. I would have a question, which answer will spare me lot of time :

    I would like to intiate my facade in my mxml file (into ). What should I do since
    facade.startup(this.stage);
    returns an error ?

    Thanks so much !

    Comment by gilles — April 16, 2008 @ 4:12 am

  2. Hey Gilles,

    Take a look at the PureMVC site they have some Flex examples which are a bit more complicated than the minimalist one but show you how to get started.

    In Flex you’re dealing with an ‘Application’ rather than the Stage, so in your main MXML file you set ‘facade.startup(this)’ to run on the creationComplete event (’this’ being the Application). There are a couple of other things you need to do like make sure PureMVC is defined in your name space (xmlns) and that the facade has been created in a mx:Script tag (private var facade:ApplicationFacade = ApplicationFacade.getInstance()).

    Probably a bit confusing here but check out this Flex example and things should be clear as mud :)

    http://trac.puremvc.org/Demo_AS3_Flex_AppSkeleton

    Comment by Alastair — April 16, 2008 @ 8:35 pm

  3. I will have a look at all this, your example got my started…and grab a part of the concepts….
    I would advise this example which is simple and good and works with mxml, “How to Setup Your First PureMVC Application” :
    http://9mmedia.com/blog/?p=10

    Good day to you !

    Comment by gilles — April 17, 2008 @ 5:18 am

  4. Hey all,

    PureMVC definitely needs more tutorials, so I’ve done my bit to help out by writing one :)

    Check it out at http://www.actionscriptdeveloper.co.uk/puremvc-tutorial-flex-puremvc-jabber-and-xiff-3-introduction/

    Enjoy,

    Dave
    http://www.actionscriptdeveloper.co.uk

    Comment by Dave Keen — July 20, 2008 @ 4:50 am

RSS feed for comments on this post. TrackBack URL

Leave a comment

*
To prove you're a person (not a spam script), type the security word shown in the picture.
Anti-Spam Image

Powered by WordPress