PureMVC Tutorial – Flex, PureMVC, Jabber and XIFF 3: Part 3 – Application and ApplicationFacade

Introduction
Part 1 – Frameworks
Part 2 – Directory structure
Part 3 – Application and ApplicationFacade
Part 4 – Notifications, Commands & Use Cases
Part 5 – Model & Proxy
Part 6 – The Application View & Mediator
Part 7 – The Login View & Mediator
Part 8 – The Roster View & Mediator
Part 9 – The Chat View & Mediator
Conclusion, Demo & Downloads

Every application needs an entry point. PureMVC projects can in fact be thought of as having two entry points – one is the AVM entry point; the first class that is actually executed (this is the ‘real’ entry point). The other is the ApplicationFacade which kicks off the PureMVC framework and this is the class that should be considered the centre of our application.

FlashDevelop will probably have automatically created an entry point called Main.mxml – go ahead and delete this at this point as we will be replacing it with our own file.

Our ‘Flex’ entry point will be called Application.mxml (my PureMVC project entry points are always named Application.mxml or Application.as – I’m not sure if this is an official PureMVC naming convention but its always a good idea to decide on a naming scheme and them stick to it). Navigate to the org.davekeen.xiffer directory in the project area of FlashDevelop, right click and select Add->New MXML File… and in the prompt box name the new file Application.mxml and click OK.

Here’s the code for our application entry point:

   1: <?xml version="1.0" encoding="utf-8"?>

   2: <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"

   3:     xmlns:view="org.davekeen.xiffer.view.components.*"

   4:     layout="absolute"

   5:     width="760" height="440"

   6:     verticalGap="0"

   7:     horizontalGap="0"

   8:     creationComplete="facade.sendNotification(ApplicationFacade.STARTUP, this);">

   9:     <mx:Script>

  10:         <![CDATA[

  11:         import org.davekeen.xiffer.ApplicationFacade;

  12:

  13:         private var facade:ApplicationFacade = ApplicationFacade.getInstance();

  14:         ]]>

  15:     </mx:Script>

  16:

  17: </mx:Application>

This MXML file has no function at all apart from sending a STARTUP notification, which will kick off our PureMVC application. Later we’ll add the top-level view components to this, but for now we’re just interested in getting the basic framework up and running. In order to let FlashDevelop know that this is the entry point right-click the file in the project area and select Always Compile from the popup menu.

Now we need the ApplicationFacade. Right click on the xiffer folder in the project area and select Add->New ApplicationFacade… and name it ApplicationFacade.as. If you can’t see New ApplicationFacade… in the Add menu be sure you have installed the PureMVC FlashDevelop templates from PureMVC: First thoughts & FlashDevelop templates correctly.

Finally we need a StartupCommand. Right click on the controller folder and select Add->New SimpleCommand… and name it StartupCommand.as. Let go for a classic – in the execute method add:

trace(“Hello world!”);

Your StartupCommand.as should now look like this:

   1: /*

   2: Simple Command - PureMVC

   3:  */

   4: package org.davekeen.xiffer.controller {

   5:     import org.puremvc.as3.interfaces.INotification;

   6:     import org.puremvc.as3.patterns.command.SimpleCommand;

   7:     import org.puremvc.as3.patterns.observer.Notification;

   8:

   9:     /**

  10:      * SimpleCommand

  11:      */

  12:     public class StartupCommand extends SimpleCommand {

  13:

  14:         override public function execute(note:INotification):void {

  15:             trace("Hello world!");

  16:         }

  17:

  18:     }

  19: }

And there we have a working Flex/PureMVC HelloWorld application! Run it and feel proud ๐Ÿ™‚

Now lets add some notifications…

27 comments

  1. Hey Dave,
    I’m trying to wrap my head around your tutorial (The necessity of using FlashDevelop is a big barrier). One thing I don’t understand is why you are using different conventions than the examples that PureMVC gives.
    For Example: The skeleton framework uses a command named ApplicationStartupCommand, and you call yours StartupCommand. It inherits from MacroCommand, and yours inherits from SimpleCommand.

    I’m guessing that it doesn’t really matter, but stripping out any FlashDevelop-specifics may help people understand how the framework actually works. (For example, you don’t tell us to registerCommand(), so I’m guessing that FlashDevelop does that for you?!?!?.. but FB users will miss that entirely.)

  2. Hey Dusty,

    I didn’t get into MacroCommands in this tutorial, but basically the deal is that a SimpleCommand (e.g. StartupCommand here) executes code and a MacroCommand execute a sequence of other commands in order. The skeleton framework uses ApplicationStartupCommand to kick off first ModelPrepCommand and then ViewPrepCommand. For this particular project I didn’t really need to seperate out the model and view initializations as they are so simple, so I lumped them into a single SimpleCommand. Note that in general MacroCommands contain no logic themselves.

    I’m not quite sure why I thought the convention was to use StartupCommand instead of ApplicationStartupCommand, but as you say it makes no difference. FlashDevelop is indeed putting in registerCommand(STARTUP, StartupCommand) – I’ve made available a bunch of FlashDevelop templates that contain the basic code for each element. If you are using FB I’m afraid you’ll need to add this by hand. The best thing to do is to open the FlashDevelop templates in a text editor and you’ll be able to see the structure that is required.

    Alternatively you could convert these into templates for Flash Builder! The community would thank you…

    Cheers,

    Dave

  3. Hi Dave, in the last part of this section, I don’t get where exactly the “command” folder was.
    In the structure I didn’t see it.
    Apologize for my English, I’m not from USA.

  4. Hey Jose,

    Oops, that was a typo – I meant to write ‘controller’ instead of ‘command’. That’s now corrected. Well spotted ๐Ÿ™‚

    Dave

  5. Hi Dave,
    i think i installed templates properly, since i see elements in the Add menu in FlashDevelop, but when i create a new SimpleCommand or a new ApplicationFacade, package name is empty and import is incomplete. Is this correct? Am i supposed to add path by hand?

    I paste below the first lines of my ApplicationFacade.as:

    package
    {
    import org.puremvc.as3.interfaces.IFacade;
    import org.puremvc.as3.patterns.facade.Facade;
    import .model.*;
    import .view.*;
    import .controller.*;

    Thanks

  6. Hey Felipe,

    I think your problem is that you are creating the ApplicationFacade at the top level of the application instead of in the org.davekeen.xiffer package. To do this navigate to the correct directory in the tree, right click on the ‘xiffer’ folder and then select New ApplicationFacade…

    That should automatically fill in all the missing bits with ‘org.davekeen.xiffer’ and you’ll be able to continue with the tutorial ๐Ÿ™‚

    Dave

  7. It’s not a problem to fix paths, but I have an error when trying to test movie:
    Error: A file found in a source-path must have the same package structure ‘org.davekeen.xiffer’, as the definition’s package, ”.
    I searched the solving of the problem on internet, but didn’t find good explanation.

  8. Hey Alex,

    That’s exactly the same setup as I have here, so there isn’t anything wrong with that.

    From the error message I am 99% sure that you are creating the classes in the wrong place. Basically that message means that the class package (i.e. the bit after ‘package’ at the beginning of the class) and the directory structure to the file itself don’t match up. Go back to part 2 and carefully go over the steps again and see if you missed something out.

    Also be sure that ‘src’ is in your classpath.

    Good luck!

    Dave

  9. Hi Dave,
    i am very new to the pureMVC and i am using flex builder 3 for this tutorial i have the confusion of setting up the pureMVC and XIFF packages into the classpath but i have added the swc of pureMVC and added those XIFF files into my source directory,finally i run the application view part has come but i dont know how to proceed,Please help me.

  10. Hi Dave!

    I’m getting a compiler error in ApplicationFacade.as that I don’t understand;


    41 Error: The definition of base class Facade was not found.
    59 Error: Interface IFacade was not found.
    31 Error: Method marked override must override another method.

    The thing is that all of the classpaths are correct since I can use F4 in FD and dive straight into the classes…any ideas?

  11. Shouldn’t you be able to have multiple mediators “listen” to the same notification? If so, which I think it would be ridiculous if you couldn’t, I’m assuming there is no order of execution of which mediator gets notified first?

    Here’s some background….
    I’ve tested 2 separate notifications and in both cases, when I listen for the same notification in a second mediator, it seems it doesn’t notify one or the other mediators who have subscribed to the notification. For example, if I listen to ApplicationFacade.RECEIVE_MESSAGE in both ChatMediator and VideoMediator as I do with similar code below, it won’t for example notify ChatMediator of the incoming RECEIVE_MESSAGE notification.

    Here’s where I list notifications I’m interested in for a mediator. As soon as I add ApplicationFacade.RECEIVE_MESSAGE to this in a second mediator is when I start to have problems of the other mediator not being notified:

    override public function listNotificationInterests():Array {
    return [
    ApplicationFacade.RECEIVE_MESSAGE,

    ];
    }

  12. Hi Will,

    You certainly should be able to do this and if you find that you are having problems with this there is almost certainly something odd going on somewhere.

    The first thing to do is to make absolutely certain that you have registered all your mediators with facade.registerMediator; if you forget to let PureMVC know about a mediator no notifications will get through.

    As for order of execution; I think that notifications are sent in the order that the mediators were registered with the facade, but this is not specified anywhere and I wouldn’t rely on it necessarily staying the same in ports of PureMVC or in future updates. Assume that the order is random and you can’t go wrong.

    Hope that helps,

    Dave

  13. Dave,
    You’ve done a very good job with these tutorials. I am still trying to get up to speed with PureMVC, and I think this is going to help a lot!

    Thanks!

  14. Hi Dave,
    I followed your instructons to the Application and Applicationfaade step, but after getting the FlashDevelop templates for Application facade etc where do i put them in which folder, I do not see Add new Application facade option in the menu for add, what am I doing wrong?
    thanks,
    Ann

  15. when i’m trying to run my application.mxml file , by going into poject->testmovie i’m getting this error .
    C:UsersrajatDocumentsxiffersrcorgdavekeenxifferapplication.mxml(1): col: 15 Error: The value following “version” in the XML declaration must be a quoted string.

  16. Hi Dave, when i run the app, I don’t see the “Hello world” string in the flash player. It’s there any mistake or it’s ok?

    Thanks, Mateo

Leave a Reply

Your email address will not be published. Required fields are marked *