MVC : is a design pattern used to isolate business logic from user interface. This increase the modification of UI and Logic easily without affecting other areas of application.
MVC stands for Model , View Controller.
Model : Stores the data throughout the application.
View : Represents the display and Communication part of an application. One view can have multiple models.
Controller : All the logic part handling.
Below is the small and simple example :
First, Create a Fla and drag a combox component from User Interface option in Components Group.
Second, we need a xml from which we load data. So i have created a small one and named the file
books.xml
<bookstore>
<book category="cooking">
<title lang="en">Everyday Italian</title>
<author>Giada De Laurentiis</author>
<year>2005</year>
<price>30.00</price>
</book>
<book category="children">
<title lang="en">Harry Potter</title>
<author>J K. Rowling</author>
<year>2005</year>
<price>29.99</price>
</book>
<book category="web">
<title lang="en">XQuery Kick Start</title>
<author>James McGovern</author>
<author>Per Bothner</author>
<author>Kurt Cagle</author>
<author>James Linn</author>
<author>Vaidyanathan Nagarajan</author>
<year>2003</year>
<price>49.99</price>
</book>
<book category="web" cover="paperback">
<title lang="en">Learning XML</title>
<author>Erik T. Ray</author>
<year>2003</year>
<price>39.95</price>
</book>
</bookstore>
we need to create a view to display combo box and model and controller respectively.
DropDownView.as
package view
{
import flash.display.MovieClip;
import model.DropDownModel;
import controller.DropDownController;
import flash.events.Event;
import fl.events.ComponentEvent;
import fl.controls.ComboBox;
import fl.data.DataProvider;
public class DropDownView extends MovieClip
{
private var _model:DropDownModel;
private var _controller:DropDownController;
private var aCb:ComboBox;
public function DropDownView(m:DropDownModel,c:DropDownController)
{
_model = m;
_controller = c;
_model.addEventListener(DropDownModel.UPDATE, update);
aCb = new ComboBox();
addChild(aCb);
aCb.x = 200;
aCb.y = 100;
aCb.dropdownWidth = 296;
aCb.width = 300;
aCb.prompt = "Select Author
:";
}
private function update(e:Event):void
{
trace(_model.itemText.length);
for(var i:uint=0;i<_model.itemText.length;i++)
{
aCb.addItem( { label: _model.itemText[i], data:i } );
aCb.addEventListener(Event.CHANGE, changeHandler);
}
}
private function changeHandler (e : Event ) : void
{
var getSelectedData:Number = Number(aCb.selectedItem.data);
trace(_model.itemText[getSelectedData]);
// do further work
}
}
}
Every view must have an update function to update the view with latest data set after actions.
Below is the model class to store data :
DropDownModel.as
package model
{
import flash.events.EventDispatcher;
import flash.events.Event;
public class DropDownModel extends EventDispatcher
{
public static var UPDATE:String='ModelUpdated';
private var _text:Array=[];
public function DropDownModel()
{
}
public function get itemText():Array
{
return _text;
}
public function set itemText(s:Array):void
{
_text=s;
dispatchEvent(new Event(DropDownModel.UPDATE));
}
}
}
To Load the external xml we create a controller class name DropDownController.as
package controller
{
import flash.display.MovieClip;
import model.DropDownModel;
import flash.events.Event;
import flash.net.URLLoader;
import flash.net.URLRequest;
public class DropDownController
{
private var _model : DropDownModel;
private var xmlLoader : URLLoader = new URLLoader;
private var xmlData:XML;
private var xmlAry:Array;
public function DropDownController(m:DropDownModel)
{
_model = m;
xmlLoader.addEventListener(Event.COMPLETE, LoadXML);
xmlLoader.load(new URLRequest("books.xml"));
}
private function LoadXML(e:Event):void
{
xmlData = new XML(e.target.data);
xmlAry = new Array();
trace(xmlData..author.length());
var _nodeLen : int = xmlData..author.length();
for(var i:uint=0;i<_nodeLen;i++)
{
xmlAry.push(xmlData..author[i]);
}
_model.itemText = xmlAry;
trace(_model.itemText);
}
}
}
I have explained the Document class at last because to understand the above 3 classes structure and work separately. Now in our document class we have to mention all the classes one by one see below :
package
{
import flash.display.MovieClip;
import view.DropDownView;
import model.DropDownModel;
import controller.DropDownController;
public class Main extends MovieClip
{
private var _model:DropDownModel;
private var _controller:DropDownController;
private var _view:DropDownView;
public function Main()
{
// constructor code
_model = new DropDownModel;
_controller = new DropDownController(_model);
_view = new DropDownView(_model,_controller);
addChild(_view);
}
}
}
View is added after initializing the classes. So the final result will look like below image :
