ActionScript MVC minimalist example for PureMVC 2.0.3

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.

This entry was posted in ActionScript, Flash, Flex. Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

4 Comments

  1. gilles
    Posted April 16, 2008 at 4:12 am | Permalink

    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 !

  2. Posted April 16, 2008 at 8:35 pm | Permalink

    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

  3. gilles
    Posted April 17, 2008 at 5:18 am | Permalink

    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 !

  4. Posted July 20, 2008 at 4:50 am | Permalink

    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

One Trackback

  1. By Flash Tips » PureMVC wows on November 17, 2008 at 7:15 pm

    [...] ActionScript MVC minimalist example Updated for PureMVC 2.0.3 [...]

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

*
To prove you're a person (not a spam script), type the security word shown in the picture. Click on the picture to hear an audio file of the word.
Click to hear an audio file of the anti-spam word