Bare Bones Flash MVC

Posted: January 31st, 2010 | Filed under: AS3, Design Patterns, Flash | No Comments » It’s nice to have a simplified version of an MVC architecture to start a new project with. Those familiar with MVC (Model, View, Controller) know that it’s a very scalable architecture and a great way to separate your data from the visual assets of your site, then allow the controller to interface between the two. Those unfamiliar will enjoy how well it allows the data, logic and view to work with each other in an encapsulated way.

The framework operates in a cyclical way: View > Controller > Model > View.
Here, the View has an event listener waiting for a button to be clicked. This listener calls a function in the controller. Depending on the logic in the controller, the method sends a property to the Model. Upon receiving that property the Model dispatches an event that the View is listening for. The View then initiates an action.

In this example, buttons, the text box and the red bar exist in the View. The event listener in the View waits for a button to be clicked and then executes a method in the Contoller. The Controller performs simple logic with the data it’s received. Here it tests if the number is between 0 and 10. If is does, then set a property in the Model. The Model then dispatches an event that the View is listening for. The View executes code which changes the width of the bar.

Download Source

Main.as
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

package
{
	import mvc.*;
	import flash.display.Sprite;
 
	public class Main extends Sprite {
		private var _model:Model;
		private var _controller:Controller;
		private var _view:View;
 
		public function Main():void {
			_model=new Model();
			_controller=new Controller(_model);
			_view=new View(_model,_controller);
			addChild(_view);
		}
 
	}
 
}
Model.as
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

package mvc
{
	import flash.events.Event;
	import flash.events.EventDispatcher;
 
	public class Model extends EventDispatcher
	{
		public static var UPDATE:String='modelWasUpdated';
 
		private var _number:Number = 0;
 
		public function Model(){}
 
		public function get number():Number{
			return _number;
		}
 
		public function set number(n:Number):void{
			_number=n;
			dispatchEvent(new Event(Model.UPDATE));
		}
 
	}
}
View.as
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73

package mvc
{
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;
 
	import fl.controls.Button;
	import fl.controls.TextArea;
 
	public class View extends Sprite
	{
		private var _model:Model;
		private var _controller:Controller;
 
		private var btnUp:Button;
		private var btnDown:Button;
		private var textArea:TextArea;
 
		private var bar:Bar;
 
		public function View(model:Model,controller:Controller)
		{
			_model=model;
			_controller=controller;
			_model.addEventListener(Model.UPDATE,update);
 
			init();
			positionAndFormat();
		}
 
		private function init():void
		{
			var container:Sprite = new Sprite();
			addChild(container);
			container.addEventListener(MouseEvent.MOUSE_DOWN, _controller.numberUpdate, false, 0, true);
 
			btnUp = new Button();
			container.addChild(btnUp).name = "numUp";
 
			btnDown = new Button();
			container.addChild(btnDown).name = "numDown";
 
			textArea = new TextArea();
			addChild(textArea);
 
			bar = new Bar();
			addChild(bar);
		}
 
		private function positionAndFormat():void
		{
			btnUp.x = 0;
			btnUp.label = "Number Up";
 
			btnDown.x = 110;
			btnDown.label = "Number Down";
 
			textArea.y = 30;
			textArea.width = textArea.height = 22;
			textArea.text = String(_model.number);
 
			bar.x = 28;
			bar.y = textArea.y;
		}
 
		private function update(e:Event):void
		{
			textArea.text = String(_model.number);
			bar.update(_model.number);
		}
 
	}
}
Controller.as
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

package mvc
{
	import flash.events.MouseEvent;
 
	public class Controller
	{
		private var _model:Model;
 
		public function Controller(model:Model)
		{
			_model=model;
		}
 
		public function numberUpdate(e:MouseEvent):void 
		{
			switch(e.target.name)
			{
				case "numUp":
				if (_model.number < 10) _model.number++;
				break;
				case "numDown":
				if (_model.number > 0) _model.number--;
				break;
				default:
				break;
			}
		}
 
	}
}
Bar.as
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

package
{
	import flash.display.Sprite;
 
	import fl.transitions.Tween;
 	import fl.transitions.easing.*;
 
	public class Bar extends Sprite
	{
		private var square:Sprite;
 
		public function Bar():void
		{
			square = new Sprite();
			addChild(square);
			square.graphics.beginFill(0xff0000, 1);
			square.graphics.drawRect(0,0,1,22);
			square.graphics.endFill();
			square.visible = false;
		}
 
		public function update(num:Number):void
		{
			var scaleTween = new Tween(square, "width", Regular.easeOut, square.width, num * 65, .5, true);
			square.visible = true;
		}
 
	}
}

Leave a Reply