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…

PureMVC Tutorial – Flex, PureMVC, Jabber and XIFF 3: Part 2 – Directory structure

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

We need to create a PureMVC-friendly folder structure for our application – right click on src and create org, then within that create davekeen, then within that create xiffer.  This will be the base package for our Jabber client.  Now we need folders for the various bits of our application.  Within xiffer create three folders named controller, view, model and events.  Finally within view create a folder called components.  We should have ended up with a folder structure that looks like this:

org
davekeen
—–xiffer
——-controller
——-events
——-model
——-view
———components

Now is a good time to explain what each folder’s contents and functions are.  If you haven’t already done so you should have a read through the PureMVC best practices and framework overview as it will make things a lot clearer.

org.davekeen.xiffer

This is the base package of our application and will contain Application.mxml (the Flex entry point) and ApplicationFacade.as (the PureMVC entry point).  The rest of the application will be contained in the other folders.

org.davekeen.xiffer.controller

The controller package contains commands which implement individual pieces of business logic.  For our Jabber client this will be things like login, logout and send message.

org.davekeen.xiffer.model

The model package contains proxies which are the bits of code that do all the dirty work.  All communication between our application and the Jabber server will happen within the proxy; in fact this is the only bit of the application that will even know that a Jabber server exists.

org.davekeen.xiffer.view.components

The components packages contains our actual MXML files – the things we’ll see on the screen.  Cliff Hall has put a lot of thought into the design of PureMVC and these components know nothing about the framework or internals of our app.  When things happen they dispatch events, and they might expose public methods which the framework can invoke.

org.davekeen.xiffer.view

The view package contains mediators which control our components.  In some MVC frameworks this folder might contain the actual objects that are displayed (i.e. subclassing DisplayObject), but PureMVC adds an extra level of abstraction.  The mediators know about PureMVC, but the components are completely self-contained and rely on their associated mediators to do any application-wide communication.

org.davekeen.xiffer.events

The majority of communication within PureMVC is done using notifications, but the only exception to this is communication from components to their mediators which is done using normal AS3 events.  Its also perfectly acceptable to put this package within the view folder.

Onto part 3…