AS3 :: To Load and display data into ComboBox from external XML using MVC Design Pattern.

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 :