Need help understand MVC implementation within Actionscript 3 AS3, please - actionscript-3

I am learning MVC implementation with ActionScript 3.0. So far, I have done alright but have couple of questions that can make this learning process very pleasant for me. I would highly appreciate your help and wisdom.
Let me explain how I am implementing a simple MVC implementation:
My Flash Movie is called FusionMVC. I have all the MVC files within the same package like this:
DataModel
DataControl
DataView
Application Facade
Here are my question:
As I understand it correctly, whenever I need to place a display object on the main stage, I declare or implement that display object in DataView class, am I right?
I have a symbol/display object called "Box" in the main library. I add this symbol to the stage by instantiating it within DataView class which I am able to see at runtime. Now if I need to add an EventListener called "ClickHandler" to this object:
Where do I declare this "ClickHandler" event, please? I am currently declaring it in the DataModel Class.
What I am confused about is to where to declare the EventHandler Methods. DataModel, or DataControl?
Thank you for your help. Here is the entire code:
//DATAMODEL
package
{
import flash.events.*;
import flash.errors.*;
public class DataModel extends EventDispatcher
{
public static const UPDATE:String = "modelUpdaed";
private var _txt:String;
public function DataModel()
{
}
public function get Text():String
{
return _txt;
}
public function set Text(p:String):void
{
_txt = p;
notifyObserver();
trace("MODEL HAS BEEN CHANGED");
}
public function notifyObserver():void
{
dispatchEvent(new Event(DataModel.UPDATE));
}
public function sayHello(e:Event):void
{
trace("HEY HELLO");
}
}
}
//DATACONTROL
package
{
import flash.display.*;
import flash.events.*;
import flash.errors.*;
public class DataControl
{
private var _model:DataModel;
public function DataControl(m:DataModel)
{
_model = m;
}
}
}
//DATAVIEW
package
{
import flash.display.*;
import flash.events.*;
import flash.errors.*;
public class DataView extends Sprite
{
private var _model:DataModel;
private var _control:DataControl;
public var b:Box;
public function DataView(m:DataModel, c:DataControl)
{
_model = m;
_control = c;
addBox();
}
public function addBox():void
{
b = new Box();
b.x = b.y = 150;
//b.addEventListener(MouseEvent.CLICK, vHandler);
addChild(b);
}
}
}
//APPLICATION FACADE
package
{
import flash.display.*;
import flash.events.*;
import flash.errors.*;
public class Main extends Sprite
{
private var _model:DataModel;
private var _control:DataControl;
private var _view:DataView;
public function Main()
{
_model = new DataModel();
_control = new DataControl(_model);
_view = new DataView(_model, _control);
addChild(_view);
}
}
}

You are correct - display objects should handle events from their own children:
public function addBox():void
{
b = new Box();
b.x = b.y = 150;
b.addEventListener(MouseEvent.CLICK, boxClickHandler);
addChild(b);
}
Handle the event in the view:
private function boxClickHandler(event:MouseEvent)
{
_control.sayHello();
}
And then you just need to add to your controller the method to change the model:
public class DataControl
{
....
public function sayHello():void
{
_model.sayHello();
}

Related

Where must be custom logic in pureMVC (as3)?

I tried to write small as3 program based on framework pureMVC.
I understood basic principles of it, but I can't understand, where I must place custom logic.
For example, I must load 10 images. I created command, that init Proxy.
package app.controller
{
import app.model.GalleryProxy;
import dicts.Constants;
import org.puremvc.interfaces.INotification;
public class LoadFilesCommand extends BaseCommand
{
public function LoadFilesCommand() { }
override public function execute(note:INotification):void
{
facade.registerProxy(new GalleryProxy(Constants.FILES_LIST));
}
}
}
And Proxy is:
package app.model
{
import dicts.Constants;
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.display.Loader;
import flash.display.LoaderInfo;
import flash.events.ErrorEvent;
import flash.events.Event;
import flash.events.IOErrorEvent;
import flash.net.URLRequest;
import org.puremvc.interfaces.IProxy;
import org.puremvc.patterns.proxy.Proxy;
public class GalleryProxy extends Proxy implements IProxy
{
public function GalleryProxy(list:Vector.<String>)
{
super(Constants.PROXY_GALLERY);
_fileList = list;
_total = _fileList.length;
load();
}
public function get currentImage():Bitmap
{
return _images[_index];
}
//--------------------------------------------------------------------------
// PRIVATE SECTION
//--------------------------------------------------------------------------
private var _fileList:Vector.<String>;
private var _total:uint;
private var _loaded:uint = 0;
private var _images:Array = [];
private var _index:int;
private function load():void
{
var loader:Loader;
for (var i:int = 0; i < _total; i++)
{
loader = new Loader();
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, imageLoadHandler);
loader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, errorHandler);
loader.load(new URLRequest(_fileList[i]));
}
}
private function imageLoadHandler(event:Event):void
{
var info:LoaderInfo = LoaderInfo(event.currentTarget);
_images[Constants.FILES_LIST.indexOf(info.url)] = info.content;
info.removeEventListener(Event.COMPLETE, imageLoadHandler);
info.removeEventListener(IOErrorEvent.IO_ERROR, errorHandler);
_loaded++;
if (_loaded >= _total)
sendNotification(Constants.COMMAND_SHOW_MAIN);
}
private function errorHandler(event:ErrorEvent):void
{
throw new Error("bad link or internet disconnect");
}
}
}
Now my Proxy is loading images independently (functions load() and imageLoadHandler)
Is it correct?
Or I must move this logic to Command class?
Or I must create some LoadService.as, which will contains this logic?
What is the correct variant for pureMVC?
Do you want to load your 10 images on application startup? If not, make load() public and call it from a Mediator, responding to a UI event.
If so, what you have will work fine. One alternative would be writing GalleryProxy so it doesn't call load() in the constructor - instead, you could have the Command register the proxy, load the image list, and call proxy.load(images[i]) in a loop.

is it possible to change data provider of flex chart from a seperate ActionScript class?

Im trying to change flex chart data provider from seperate action script class? is it possible. i did not find any method to do that. any ideas guys ?
Yes you can. For that you need to have a reference to dataprovider of chart and it should be bindable. It means when you update dataProvider you view also will be update ( chart in this case ).
If it doesn't help you, I would see your code.
Yes, you can. A nice clean way is to have a custom event dispatcher facade:
package com.app.facades
{
import flash.events.Event;
import flash.events.EventDispatcher;
[Event(name="showDataInGrid" , type="com.app.events.GridEvent")]
public class GridFacade extends EventDispatcher
{
private static var _instance:GridFacade;
public function GridFacade(lock:SingletonLock, target:IEventDispatcher=null) {
super(target);
if(!(lock is SingletonLock)) {
throw(new Error("GridFacade is a singleton, please do not make foreign instances of it"));
}
}
public static function getInstance():GridFacade {
if(!_instance) {
_instance = new GridFacade(new SingletonLock());
}
return _instance;
}
}
}
class SingletonLock{}
create a dispatchable event like so:
package com.app.events {
import flash.events.Event;
import flash.events.IEventDispatcher;
public class DispatchableEvent extends Event implements IDispatchableEvent {
protected var _dispatcher:IEventDispatcher;
public function DispatchableEvent(type:String, bubbles:Boolean=false, cancelable:Boolean=false)
{
super(type, bubbles, cancelable);
}
public function dispatch():void
{
_dispatcher.dispatchEvent(this);
}
}
}
then have a custom GridEvent like so:
package com.app.events {
public class GridEvent extends DispatchableEvent {
public static const SHOW_DATA_IN_GRID:String = "showDataInGrid";
public var data:Object;
public function GridEvent(type:String,
data:ArrayCollection = null,
bubbles:Boolean=false,
cancelable:Boolean=false) {
super(type,bubbles,cancelable);
_dispatcher = GridFacade.getInstance();
this.data = data;
}
}
}
then listen for the showDataInGrid event in the scope of your grid component:
...
GridFacade.getInstance().addEventListener(GridEvent.SHOW_DATA_IN_GRID, onShowDataInGrid);
...
protected function onShowDataInGrid(event:GridEvent):void {
myGrid.dataProvider = event.data;
// refresh the collection so that the component will display the new data
event.data.refresh();
// remember to reset any data specific stuff you may have set in the grid component before doing this.
}
to actually change the data, in any class you wish do the following:
(new GridEvent(
GridEvent.SHOW_DATA_IN_GRID,
someCollectionToShowInTheGrid,
)).dispatch();
And watch the magic! :)
good luck!

as3 calling a function in Main.as Document Class from another class

I am sure this is a popular question but I can't find the exact answer I need. I simply need to access a function or functions created in the Main.as document class. I have tried several methods and they do not seem to work. Here is one example I tried.
anotherClass.as // This needs to access functions Main.as
package com
{
import Main;
public class anotherClass
{
private var stageMain:Main;
public function anotherClass()
{
// tries to call a function in Main.as called languageLoaded. NO WORK!
stageMain.languageLoaded("English");
// in the Main.as languageLoaded is a public function
}
}
}
The cleaner way is to simply pass a reference to Main to the constructor of the class you want to be able to access it.
For example, your AnotherClass could look like this:
class AnotherClass
{
private var _main:Main;
public function AnotherClass(main:Main)
{
_main = main;
_main.test(); // Success!
}
}
And your main class:
class Main
{
public function Main()
{
var another:AnotherClass = new AnotherClass(this);
}
public function test():void
{
trace("Success!");
}
}
public class MainDoc extends MovieClip // as long as it extends eventDispatcher you re fine
{
private var otherClass:OtherClass;
public function MainDoc()
{
otherClass = new OtherClass();
otherClass.addEventListener("otherClassCustomEvent", onOtherClassReady);
otherClass.startLogic();
}
public function onOtherClassReady(event:Event = null)
{
trace("from other class:", otherClass.infoToShare) // traces "from other class: YOLO!"
}
}
public class OtherClass extends EventDispatcher // must extend the event dispatcher at least
{
public var infoToShare:String;
public function OtherClass()
{
}
public function startLogic()
{
// do what you got to do
// when you have your data ready
infoToShare = "YOLO!";
dispatchEvent("otherClassCustomEvent");
}
}
Once you're confortable with that, you can start looking into building custom events that could carry the variable to send back
Ok I got the following code to work. It's really a messy solution but I didn't know of a better way. It works. I just hope it's stable and does not use a lot of resources.
If you have a much better Idea I am open.
Here is the MainDoc.as
package {
import flash.display.MovieClip;
import flash.events.*;
import com.*;
import com.views.*;
import flash.display.*;
import flash.filesystem.*;
import com.greensock.*;
import com.greensock.easing.*;
import flash.system.System;
public class mainDoc extends MovieClip
{
/// (Get Main Doc flow) this creates an instace of the main timeline
/// and then I send it
private static var _instance:mainDoc;
public static function get instance():mainDoc { return _instance; }
/// Calls the defaultVars.as in to "vars".
var vars:defaultVars = new defaultVars();
public function mainDoc()
{
/// Makes this class ready to be passed to defautVars.as
_instance = this;
// Sends the _instance to defaulVars.as to be accessed later.
vars.getMainDoc(_instance);
// Calls a function in defaultVars.as and loads a var
vars.loadButtonVars("English");
}
}
}
Here is the defaultVars.as
package com {
import flash.display.Stage;
import flash.events.*
import flash.net.*;
import flash.display.*;
import flash.filesystem.*;
public class defaultVars
{
/// Makes the MainDoc.as a MovieClip
// Not sure if this is good but it works.
public var MainDoc:MovieClip;
public function defaultVars()
{
}
public function getMainDoc(_instance:MovieClip)
{
trace("CALLED" + _instance);
/// receives the _instance var and its converted to a MovieClip
// This can now be used in any function because I declared it a public var.
MainDoc = _instance;
}
public function loadButtonVars(Language:String)
{
myLoader.load(new URLRequest("Languages/" + Language + "/vars.xml"));
myLoader.addEventListener(Event.COMPLETE, processXML);
function processXML(e:Event):void
{
myXML = new XML(e.target.data);
/// Home Screen Buttons
homeT = myXML.Button.(#Title=="homeT");
homeB1 = myXML.Button.(#Title=="homeB1");
homeB2 = myXML.Button.(#Title=="homeB2");
homeB3 = myXML.Button.(#Title=="homeB3");
homeB4 = myXML.Button.(#Title=="homeB4");
homeB5 = myXML.Button.(#Title=="homeB5");
/// HERE IS WHERE I CALL FUNCTION from MainDoc after xml is loaded.
/////////////////
trace("xml loaded!!!! " + homeB1);
MainDoc.languageLoaded(Language);
}
}
}
}

Sharing variables in OOP AS3

In Main.as I have the following:
package {
import flash.display.MovieClip;
public class Main extends MovieClip {
public var damage:Number;
public function Main() {
// constructor code
var char:Character = new Character();
addChild(char);
}
}
}
And I have another package called Character.as
package {
import flash.display.MovieClip;
public class Character extends MovieClip{
public function Character() {
trace(damage);
}
}
}
I need to be able to share the damage set in the main.as with the character. Is there any way to make the speed more global?
Why don't you make damage a public property of your Character and then it'll be easily accessible via your Main class like this :
char.damage = 100;
trace (char.damage);
To do this, just add the property to your Character class like so :
public class Character extends MovieClip {
public var damage:Number;
public function Character() {
trace(damage);
}
}
But given your comment, I take it you would rather everything just be global and accessible everywhere as opposed to applying OOP concepts.
If so... just define it as a public static in your Main class like this :
public static var damage:Number;
and to access it anywhere you do this :
Main.damage = 100;
trace(Main.damage);
There is another way of sending values through packages (This way is not really sharing variables, but it could be useful for you). What this code does is that the class Character creates a variable, and this variables gets an value from the Main package:
Change the character.as to this:
package {
import flash.display.MovieClip;
public class Character extends MovieClip{
public function Character(a:int) {
//output will be the integer 10
trace(a);
}
}
}
and main.as to:
package {
import flash.display.MovieClip;
public class Main extends MovieClip {
private var damage:int = 10;
private var char:Character = new Character(damage);
public function Main() {
}
}
}
Edit: Not useful for realtime applications, because the values of private var damage will only be send on initialization of private var char:Character = new Character(damage).

Add other class as child in Flash Professional

Using Flash Professional CS5, I'm trying to add a child object in my script. I want to give the class which creates the child-object as parameter while creating. The problem is when I try to test the project, I get an error stating Incorrect number of arguments. 0 expected.
My MainClass.as:
package {
import flash.display.MovieClip;
import flash.events.Event;
import flash.events.KeyboardEvent;
import flash.ui.Keyboard;
public class MainClass extends MovieClip {
var menuClass:MenuClass;
var gameClass:GameClass;
var highClass:HighscoreClass;
public function Main() {
this.StartOfProject();
}
public function StartOfProject() {
menuClass = new MenuClass(this);
this.addChild(menuClass);
highClass = new HighscoreClass();
}
And my MenuClass.as:
package {
public class MenuClass extends MovieClip {
var mainClass:MainClass;
public function Menu(mainClass:MainClass) {
this.mainClass = mainClass;
...
}
What am I doing wrong?
You named the constructor of your MenuClass incorrectly. It should be "MenuClass" not "Menu"
change:
public function Main() {
this.StartOfProject();
}
to:
public function MainClass() {
this.StartOfProject();
}
and:
public function Menu(mainClass:MainClass)
to: public function MenuClass (mainClass:MainClass)
and see if this already solves your problem