Array is a data structure consisting of a group of elements that are accessed via indexing. It can store simple data types such as number, boolean, string or even complex data type such as other objects or other Arrays.

[codesyntax lang="actionscript3"]

private var myArray:Array = new Array();
myArray[0] = "vinoth"; // string
myArray[1] = 2; // number
myArray[2] = new Object(); // object

[/codesyntax]

The above example shows how we define an Array in ActionScript. Now that we have declared an array, lets see how we can retrive the value.

[codesyntax lang="actionscript3"]

// retrieving the value of an array element
private var name:String = myArray[0];

[/codesyntax]

Arrays are dynamic and, therefore, can be resized simply by adding or removing elements.

[codesyntax lang="actionscript3"]

// adds an element to the end of an array and increases the array length by one
myArray.push("Vijay");

// removes the last element from an array and decreases the array length by one
myArray.pop();

[/codesyntax]

Arrays can also be built using MXML:

[codesyntax lang="php"]

<mx:Array id="myArray"/> <!--creates an array with zero elements-->

<mx:Array id="myArray"> <!--creates an array with three elements-->
   <mx:String>Vinoth</mx:String> <!--string-->
   <mx:Number>98</mx:Number> <!--floating-point number-->
   <mx:Object name="Vijay" age="25"/> <!--object-->
</mx:Array>

[/codesyntax]

Array is an object and as such it contains some usefel properties and methods. The length property represents the number of array elements.

[codesyntax lang="actionscript3"]

private var myArray:Array = new Array(10);
private var numberOfArrayElements:uint = myArray.length; // 10

[/codesyntax]

By utilizing the methods of the Array class, you can perform a number of operations on the Array elements or the Array itself. Popular Array methods include:

* filter
* indexOf
* join
* push
* reverse
* slice
* sort
* toString

Though Array has powerful features, but the inability to support data binding is a significant shortcoming. For this we have something called ArrayCollection.

Array Collection

Array Collection is a “wrapper class that exposes an Array as a collection that can be accessed and manipulated using the methods and properties of the ICollectionView or IList interfaces”.

To participate in data binding, an object must be able to:

1. It should dispatch event when something changes in the object.
2. It should allow other objects to listen and respond to events.

[codesyntax lang="actionscript3"]

// creates a bindable ArrayCollection with zero elements
[Bindable] private var myArrayCollection:ArrayCollection = new ArrayCollection();

[/codesyntax]

An ArrayCollection can be created in one of three ways:

[codesyntax lang="actionscript3"]

// creating ArrayCollection with zero elements
private var myArrayCollection:ArrayCollection = new ArrayCollection();
// passing an existing Array into an ArrayCollection via the constructor
private var myArrayCollection:ArrayCollection = new ArrayCollection(myArray);
// assigning an existing Array to the source property of an ArrayCollection
private var myArrayCollection:ArrayCollection = new ArrayCollection();
myArrayCollection.source = myArray;

[/codesyntax]

Extending the ListCollectionView class that implements the ICollectionView and IList interfaces, an ArrayCollection inherits a handful of properties, methods and events. Therefore, your plain old Array now has a new set of functionality.

New properties include (but not limited to):

* filterFunction
* length
* list
* sort
* source

New methods include (but not limited to):

* addEventListener
* addItem
* addItemAt
* contains
* getItemAt
* getItemIndex
* refresh
* removeAll
* removeItemAt
* setItemAt

Once an Array is wrapped inside an ArrayCollection, the properties and methods of the Array class are no longer accessible unless you access them through the Array object directly. For example, if you really want to use the Array’s push method, you could do the following:

[codesyntax lang="actionscript3"]
myArrayCollection.source.push("new element");
[/codesyntax]

Using an ArrayCollection in place of or in tandem with an existing Array provides Flex developers with a valuable and responsive data storage and retrieval mechanism.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
 creationComplete="creationCompleteHandler()">

 <mx:Script>
 <![CDATA[

 import flash.display.DisplayObject;
 import mx.core.UIComponent;
 import mx.controls.ComboBox; ComboBox;
 import mx.controls.RadioButton; RadioButton;
 import mx.controls.CheckBox; CheckBox;
 import mx.controls.TextArea; TextArea;

 protected function creationCompleteHandler():void
 {
 var components:Array = getComponentsFromXML(xml.component);
 var i:int = 0;
 var n:int = components.length;
 for (i; i < n; i++)
 {
 panel.addChild(components[i] as DisplayObject);
 }
 }

 /**
 *  Parses an XML string, returns array of new components.
 */
 public function getComponentsFromXML(components:XMLList):Array
 {
 var result:Array = [];
 var child:Object;
 var component:UIComponent;
 var type:String;
 var clazz:Class;
 var i:int = 0;
 var n:int = components.length();
 for (i; i < n; i++)
 {
 child = components[i];
 type = child.@type;
 try {
 clazz = flash.utils.getDefinitionByName(type) as Class;
 } catch (error:ReferenceError) {
 traceImportError(type);
 }

 component = new clazz(); // dynamic

 var properties:XMLList = child.elements();
 var property:XML;
 var name:String;
 var value:Object;

 // for each child node
 for each (property in properties)
 {
 name = property.localName();
 value = property.toString();
 // create a more generic method to convert
 // strings to numbers and whatnot
 // this is a regular expression matching any digit
 // check out rubular.com
 if (/\d+/.test(value.toString()))
 value = Number(value);

 if (property.attribute("isStyle") == "true")
 component.setStyle(name, value);
 else
 component[name] = value;
 }
 result.push(component);
 }
 return result;
 }

 protected function traceImportError(type:String):void
 {
 trace("Please include the class '" + type + "' in the swf.");
 var names:Array = type.split(".");
 var last:String = names[names.length - 1];
 trace("import " + type + "; " + last + ";");
 }

 ]]>
 </mx:Script>

 <!-- sample data -->
 <mx:XML id="xml" source="components.xml" />

 <!-- sample container -->
 <mx:Panel id="panel" width="100%" height="100%"/>

</mx:Application>

[/codesyntax]

Live Demo

Application source

chessboard is one, which is a square-checkered board with 64 squares arranged in an eight-by-eight grid. At the start, each player controls sixteen pieces: one king, one queen, two rooks, two knights, two bishops, and eight pawns. The object of the game is to checkmate  the opponent’s king, whereby the king is under immediate attack (in “check”) and there is no way to remove or defend it from attack on the next move.

Here your chessboard is Singleton class as its state should never change. It means even at nth movement, the board should hold all the records of pieces moved and its state. Let us now drive back to technical discussion.

The Singleton pattern allows a class to only one instance and it does provide a global access to the instance. How do we go on to make a Singleton class.

Sample code : SingletonClass.as

package com.sophiacom.as3.designpatterns.creational.singleton
{
public class SingletonClass
{
private static var _instance:SingletonClass;

public function SingletonClass(enforcer:SingletonEnforcer) {}

public static function getInstance():SingletonClass {
if (SingletonClass._instance == null) {
SingletonClass._instance = new SingletonClass(new SingletonEnforcer());
}
return SingletonClass._instance;
}
}
}

class SingletonEnforcer {}

First we are defining a private static property that holds the single instance of the class.
Then we go with a public static function that provides access to the single instance created.
A private constructor that restrict access in instantiating the class.

Oops ActionScript 3.0 does not have a private constructor! So, to do this, the solution is to force a parameter in the constructor while type isn’t accessible. Just with a class outer the package of the class but defined in the same file, because in ActionScript 3, only one class can be visible.

Link to the Application [ View Source enabled ]

var date:Date = new Date("2009/12/30");
myDateChooser.selectedDate = date;

The above one works, but if you take the below one it does not work.

var date:Date = new Date(“2009-12-30″);
myDateChooser.selectedDate = date;

The solution for this is DateFormatter.

var DateStr:String = dateFormatter.format(“2009-12-30″);
DateChooser.selectedDate = new Date(DateStr);

<mx:DateFormatter id=”dateFormatter” formatString=”MMM D, YYYY”/>

<mx:DateChooser showToday=”false” id=”DateChooser” x=”130″ y=”55″  width=”159″></mx:DateChooser>

This will solve your problem. Have a nice day.

Many people might initially get confused over the MVC [ Model, view and Controller ] and the MVP [ Model, View and Presenter ] pattern. There is a slight variation, but this pattern reduces the coupling.

Model View and Control Pattern

In this pattern, view dispatches the events to the controller which in turn interacts with business logic of the application and the data binding techniques which updates the view automatically when ever there is a change in our model.

Model View and Presenter Pattern

In this pattern, controller plays a major role in handling the user input and also an interaction with business logic also responsible of the update of the view. In this way there remains now link of view with Model and it totally relies on controller for all the presentation logic. As a result, there is no dependencies in either direction between the view and the model.

Let us now go through an example in RajiniKanth style. The below defines the the structure of our application.

The presenter folder contains the AdditionPresenter which acts as a controller handling the input and also does the business logic.

The view is area where our form is displayed with an Interface IAddView (implemented by the AdditionForm.mxml file) define the methods we need in order to update the view and get the the numbers from the view to complete our Addition operation.

The MVPAddition.mxml is the main file, it only defines the custom component view.

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute” xmlns:view=”com.vinoth.MVP.view.*”>
<view:AdditionForm/>
</mx:Application>

The Interfact IAddView defines the methods we need in order to update the view and get the numbers from the view. It is implemented by the AdditionForm.mxml

package com.vinoth.MVP.view
{
public interface IAddView
{

function set Number3(value:String):void;

function get Number1():Number;
function get Number2():Number;

}
}

The AddView custom component contains the MXML tag needed to define the UI and it calls the addData() method in the Presenter.

<mx:Label text=”Addition of Two Numbers” width=”100%” fontWeight=”bold”/>

<mx:Form width=”100%” height=”50%”>
<mx:FormItem label=”Number One” width=”100%”>
<mx:TextInput id=”_Number1″ editable=”true” width=”100%” restrict=”0-9″/>
</mx:FormItem>
<mx:FormItem label=”Number Two” width=”100%”>
<mx:TextInput id=”_Number2″ editable=”true” width=”100%” restrict=”0-9″/>
</mx:FormItem>
</mx:Form>
<mx:HBox width=”100%”>
<mx:Label text=”Result” />
<mx:Label width=”100%” id=”_Number3″ />
<mx:Button label=”Add” click=”_presenter.addData()” />
</mx:HBox>

It also contains the methods defined in the IAddView and a private method that is registered as a listener for the creationComplete event that initialize the presenter.

import com.vinoth.MVP.presenter.AdditonPresenter;

private var _presenter:AdditonPresenter;

private function init():void{
_presenter = new AdditonPresenter(this);
}

public function get Number1():Number {
return Number(_Number1.text);
}

public function get Number2():Number{
return Number(_Number2.text);
}

public function set Number3(value:String):void{
_Number3.text = value;
}

The presenter is the one which handles the business logic and updates the view through the interface without accessing the View Form.The presenter stores a private member of the view and it updates accordingly.

public var _view:IAddView

The Patter is simple but yet very powerful because of its least dependency and the presenter relies only on the interface and not on the UI.

Application Souce