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:
- PurelyKuler (Main Class)
- call the facade
- 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] - facade (PurelyKulerFacade)
- create singleton
- starts the app
- registers the command (StartUpCommand) I haven’t explained that yet
- 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] - SimpleCommand (StartUpCommand) – similar to your event handler
- registerProxy (KulerDataProxy) not spoke about yet
- 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 proxyfacade.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] - Proxy (KulerDataProxy) – connects to databases/REST/and the like
- setup connection for xml
- expose a loadInfo method for request of data
- 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] - Mediator (PurelyKulerMediator) -the view of the application
- create loading textField and add it to viewComponent(colorComponent)
- when data returns allow click
- 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 arraypublic 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] - 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!
I’ve found tutorials on puremvc extremely thin on the ground so thanks for sharing this, will have a play when I get home from work.
On first impressions it seems to be a lot of overhead code, I know this is a small example and with a larger project the overhead code wont seem as large but the original 53 line example jumps to 258 lines!
On a side note, how do you find the framework? I really need to get in to a framework for as3 apps!
Cheers
Yeah this is just an example. You’d never use PureMVC for a project this small.
you can find PureMVC at http://www.puremvc.org/
I think he meant what do you think of it? (how do you find the framework?)
I get this: ’1118: Implicit coercion of a value with static type Object to a possibly unrelated type String.
Hi Josh, nice work thanks for all your PureMVC posts. I had to make a few amends to get this one to work with FlashDevelop, the new Kuler API URL & solved the issue in comment #3.
Have reposted source and props at
http://www.robmccardle.com/wp/?p=40
Kind Regards,
Rob