SWF It Good

Update at: How to Add and Remove Mediators in an Actionscript 3 PureMVC App

So I have been working alot w/ PureMVC, well everyday for the last month to be exact. I’m going to try to explain PureMVC the best way I know how. It may not be the best, but I hope it can get you started. And when you learn something let me know.

So the example I am doing is a simple one using Lee Brimelow’s code from the ActionScript 3 Advanced XML example. The only difference between his and what I changed is some method name changes and putting it in PureMVC.

So if you don’t know what PureMVC is or you are quite confused on how to use it…well so am I . I’m still learned and hopefully can teach some stuff. I’m not going to go into the specifics of this framework but think of it as a way to introduce a lot separation of code using the Model, View, Controller. I’ll explain what I see as the benefits after I explain the example.

Look at lee’s example:

[as]var loader:URLLoader = new URLLoader();
loader.addEventListener(Event.COMPLETE, onLoaded);

stage.addEventListener(MouseEvent.CLICK, changeColor);

var xml:XML;
var kuler:Namespace = new Namespace(“http://kuler.adobe.com/kuler/API/rss/”);
var ka:Array = new Array();
var cc:int = 0;

function onLoaded(e:Event):void
{

xml = new XML(e.target.data);
var il:XMLList = xml.channel.item;
for(var i:uint=0; i<il.length(); i++)
{
var sl:XML = il.kuler::themeItem.kuler::themeSwatches[i];
var co:Object = new Object();
co.c1 = sl.kuler::swatch.kuler::swatchHexColor.text()[0];
co.c2 = sl.kuler::swatch.kuler::swatchHexColor.text()[1];
co.c3 = sl.kuler::swatch.kuler::swatchHexColor.text()[2];
co.c4 = sl.kuler::swatch.kuler::swatchHexColor.text()[3];
co.c5 = sl.kuler::swatch.kuler::swatchHexColor.text()[4];
ka.push(co);
}
drawColors(ka[0]);
}

function drawColors(c:Object):void
{
graphics.beginFill(parseInt(“0x” + c.c1));
graphics.drawRect(0, 0, 200, 200);
graphics.beginFill(parseInt(“0x” + c.c2));
graphics.drawRect(200, 0, 200, 200);
graphics.beginFill(parseInt(“0x” + c.c3));
graphics.drawRect(400, 0, 200, 200);
graphics.beginFill(parseInt(“0x” + c.c4));
graphics.drawRect(600, 0, 200, 200);
graphics.beginFill(parseInt(“0x” + c.c5));
graphics.drawRect(800, 0, 200, 200);
}

function changeColor(e:Event):void
{
if(cc == ka.length – 1)
cc = 0;
else
cc++;
drawColors(ka[cc]);
}

loader.load(new URLRequest(“http://kuler.adobe.com/kuler/API/rss/get.cfm?listtype=rating&itemsperpage=20″));
[/as]

most everything but the drawColors() function are going into the dataProxy.
What’s a dataProxy…hold on.

Make sure you download the swc or classes.

Here is what we are working with:

1. PurelyKuler (Main Class)
   1. call the facade
   2. pass the DisplayObject to the app (a PureMVC method)

   [as]package {
   import flash.display.Sprite;
   import flash.display.StageAlign;
   import flash.display.StageScaleMode;

   //your main class file. you know that!
   public class PurelyKuler extends Sprite
   {
   public function PurelyKuler()
   {
   stage.align = StageAlign.TOP_LEFT;
   stage.scaleMode = StageScaleMode.NO_SCALE;
   //get facade instance
   var facade:PurelyKulerFacade = PurelyKulerFacade.getInstance();
   // make sprite that will be the viewcomponent to the mediator
   var colorContainer:Sprite = new Sprite();
   addChild(colorContainer);
   //start it up and pass the sprite to the app.
   facade.startup(colorContainer);
   }
   }
   }
   [/as]

2. facade (PurelyKulerFacade)
   1. create singleton
   2. starts the app
   3. registers the command (StartUpCommand) I haven’t explained that yet
   4. notify – PurelyKulerConstants.STARTUP and pass the DisplayObject

   [as]package
   {
   import com.joshspoon.etc.purelyKuler.PurelyKulerConstants;
   import com.joshspoon.etc.purelyKuler.controller.*;

   import org.puremvc.interfaces.IFacade;
   import org.puremvc.patterns.facade.Facade;
   import org.puremvc.patterns.observer.Notification;

   public class PurelyKulerFacade extends Facade implements IFacade
   {
   // Singleton Method
   public static function getInstance(): PurelyKulerFacade {
   if (instance == null) {
   instance = new PurelyKulerFacade( );
   }
   return instance as PurelyKulerFacade;
   }

   // Broadcast the STARTUP Notification
   public function startup(app:Object):void {

   notifyObservers(new Notification(PurelyKulerConstants.STARTUP, app));
   }

   // Register Commands with the Controller
   // like EVENT this is listening for STARTUP to excute the StartUpCommand
   override protected function initializeController():void {
   super.initializeController();
   registerCommand(PurelyKulerConstants.STARTUP, StartUpCommand);
   }

   }
   }[/as]

3. SimpleCommand (StartUpCommand) – similar to your event handler
   1. registerProxy (KulerDataProxy) not spoke about yet
   2. registerMediator(PurelyKulerMediator) – not spoken of yet

   [as]package com.joshspoon.etc.purelyKuler.controller
   {
   import com.joshspoon.etc.purelyKuler.model.KulerDataProxy;
   import com.joshspoon.etc.purelyKuler.view.PurelyKulerMediator;

   import flash.display.*;

   import org.puremvc.interfaces.ICommand;
   import org.puremvc.interfaces.INotification;
   import org.puremvc.patterns.command.SimpleCommand;

   public class StartUpCommand extends SimpleCommand implements ICommand
   {
   override public function execute(notification:INotification):void
   {
   // Create and register proxy

   facade.registerProxy(new KulerDataProxy());

   // Create and register the mediator, colorContainer passed as the viewcomponent of the Mediator

   facade.registerMediator(new PurelyKulerMediator(notification.getBody() as Sprite));

   }

   }
   }[/as]

4. Proxy (KulerDataProxy) – connects to databases/REST/and the like
   1. setup connection for xml
   2. expose a loadInfo method for request of data
   3. onKulerLoad method just like lee’s except it notifies DATA_LOADED and passes the array of colors

   [as]package com.joshspoon.etc.purelyKuler.model
   {
   import com.joshspoon.etc.purelyKuler.PurelyKulerConstants;

   import flash.events.Event;
   import flash.net.*;

   import org.puremvc.interfaces.IProxy;
   import org.puremvc.patterns.observer.Notification;
   import org.puremvc.patterns.proxy.Proxy;

   public class KulerDataProxy extends Proxy implements IProxy
   {

   public static const NAME:String = “KulerDataProxy”;
   private var _loader:URLLoader;
   private var _xml:XML;
   private var kuler:Namespace;
   private var _ka:Array;

   public function KulerDataProxy( data:Object = null )
   {
   super ( NAME, data );

   setupNetwork();
   trace(NAME + ” ready”);
   }
   // has everything to prepare the data request to Kuler.
   private function setupNetwork():void
   {
   kuler = new Namespace(“http://kuler.adobe.com/kuler/API/rss/”);
   _ka = new Array();
   _loader = new URLLoader();
   _loader.addEventListener(Event.COMPLETE, onKulerLoad);

   }

   // function called to start action of dataProxy
   public function loadInfo():void
   {
   _loader.load(new URLRequest(“http://kuler.adobe.com/kuler/API/rss/get.cfm?listtype=rating&itemsperpage=20″));
   }
   // this is an overriden inherited function from PureMVC
   override public function getProxyName():String
   {
   return NAME;
   }

   //when data is loaded
   private function onKulerLoad(e:Event):void
   {
   //for more info see: http://www.gotoandlearn.com/player.php?id=65
   _xml = new XML(e.target.data);
   var il:XMLList = _xml.channel.item;
   for(var i:uint=0; i<il.length(); i++)
   {
   var sl:XML = il.kuler::themeItem.kuler::themeSwatches[i];
   var co:Object = new Object();
   co.c1 = sl.kuler::swatch.kuler::swatchHexColor.text()[0];
   co.c2 = sl.kuler::swatch.kuler::swatchHexColor.text()[1];
   co.c3 = sl.kuler::swatch.kuler::swatchHexColor.text()[2];
   co.c4 = sl.kuler::swatch.kuler::swatchHexColor.text()[3];
   co.c5 = sl.kuler::swatch.kuler::swatchHexColor.text()[4];
   _ka.push(co);

   }
   trace(“co.c1: ” + _ka[0].c1);

   //once all the color data is pushed in to the array
   //send notifications
   facade.notifyObservers(new Notification(PurelyKulerConstants.DATA_LOADED, _ka));
   }

   }
   }
   [/as]

5. Mediator (PurelyKulerMediator) -the view of the application
   1. create loading textField and add it to viewComponent(colorComponent)
   2. when data returns allow click
   3. draw colors.

   [as]// code created by Lee Brimelow http://www.gotoandlearn.com/player.php?id=65
   // modified by Josh Weatherspoon: http://etc.joshspoon.com/wp-content/uploads/2008/02/purelykuler_puremvc_example.zip
   package com.joshspoon.etc.purelyKuler.view
   {
   import com.joshspoon.etc.purelyKuler.PurelyKulerConstants;
   import com.joshspoon.etc.purelyKuler.model.KulerDataProxy;

   import flash.display.*;
   import flash.events.*;
   import flash.text.*;

   import org.puremvc.interfaces.IMediator;
   import org.puremvc.interfaces.INotification;
   import org.puremvc.patterns.mediator.Mediator;

   public class PurelyKulerMediator extends Mediator implements IMediator
   {
   public static const NAME:String = “PurelyKulerMediator”;
   private var _tf:TextField; // will display loading…
   private var _ka:Array = []; //array to hold color data from the Proxy
   private var cc:int = 0; // index in th _ka array

   public function PurelyKulerMediator(viewComponent:Object=null)
   {
   _tf = new TextField();

   super(viewComponent);// the colorContainer
   DisplayObjectContainer(viewComponent).addChild(_tf);
   loading();
   trace(NAME + ” started”);
   }
   // a PureMVC override
   override public function getMediatorName():String
   {
   return NAME;// passes name to access this in the app
   }
   // a PureMVC override
   override public function getViewComponent():Object
   {
   return viewComponent;
   }
   // what this mediator is listening for
   override public function listNotificationInterests():Array
   {
   return [PurelyKulerConstants.DATA_LOADED]
   }

   override public function handleNotification(notification:INotification):void
   {
   switch (notification.getName())// like Event.CHANGE
   {
   case PurelyKulerConstants.DATA_LOADED:
   _ka = (notification.getBody() as Array) // like evt.data
   changeColor();
   DisplayObjectContainer(viewComponent).addEventListener(MouseEvent.CLICK, changeColor, false, 0, true); //real events should only be in mediator and call change through notifications
   break;
   }
   }
   // calling the load method for the xml in teh proxy
   private function loading():void
   {
   _tf.text = “Loading…”;
   KulerDataProxy(facade.retrieveProxy(KulerDataProxy.NAME)).loadInfo();
   }
   //see lee’s example
   private function changeColor(e:MouseEvent = null):void
   {
   if(cc == _ka.length – 1)
   cc = 0;
   else
   cc++;
   drawColors(_ka[cc]);
   }
   //see lee’s example
   private function drawColors(c:Object):void
   {
   _tf.text = “”;
   viewComponent.graphics.clear();
   viewComponent.graphics.beginFill(parseInt(“0x” + c.c1));
   viewComponent.graphics.drawRect(0, 0, 200, 200);
   viewComponent.graphics.beginFill(parseInt(“0x” + c.c2));
   viewComponent.graphics.drawRect(200, 0, 200, 200);
   viewComponent.graphics.beginFill(parseInt(“0x” + c.c3));
   viewComponent.graphics.drawRect(400, 0, 200, 200);
   viewComponent.graphics.beginFill(parseInt(“0x” + c.c4));
   viewComponent.graphics.drawRect(600, 0, 200, 200);
   viewComponent.graphics.beginFill(parseInt(“0x” + c.c5));
   viewComponent.graphics.drawRect(800, 0, 200, 200);
   }
   }
   }
   [/as]

6. Lastly the constants I use in PurelyKulerConstants

[as]package com.joshspoon.etc.purelyKuler
{
// a little excess for this example but I like having a global place to store contants
public class PurelyKulerConstants
{
public static const DATA_LOADED:String = “DataLoaded”;
public static const STARTUP:String = “Startup”;
}
}[/as]

You can expand this and make another proxy or mediator and plug and play pieces, since you code is not tightly coupled. That is what I see as benefit.

That should be it. I hope that helps

Enjoy!

source

This entry was posted on Wednesday, February 13th, 2008 at 9:44 pm and is filed under PureMVC, XML, actionscript, as3, flash. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.