Vinothbabu's Desk! » Design Patterns

Design Patterns : Singleton Pattern

Sachin — Thu, 15 Apr 2010 04:40:59 +0000

The Singleton pattern is very similar to creator pattern. This is very widely used pattern. Now a question might raise in the mind that why do we need this pattern and when it should be applied. Let us take a situation where you want to build a chess game. Where does the Singleton Pattern apply here?

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.

Introduction to MVP for Flex

Sachin — Mon, 29 Mar 2010 13:46:00 +0000

I was today having a discussion with my amigos on the various design patterns and we were usually struck with mind blowing MVP pattern. I did a Bing on reseearch but could not eventually find a single article which explains the users very clear of this pattern. That’s the reason of this post.

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.

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.

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

Introduction to Mate Framework

Sachin — Sun, 21 Mar 2010 13:22:38 +0000

Mate is one of the best framework i have ever played with. It is completely unobtrusive. My application code has no dependencies on the framework, it is highly decoupled, reusable and testable. Mate framework is developed by AsFusion.

Let me point out why i have switched over to Mate over Cairngorm

1. You can dispatch an event from anywhere in the view hierarchy and have it bubble up to the framework automatically, instead of having to have a direct line, like Cairngorms CairngormEventDispatcher or PureMVC’s notification system.

2. Mate is extremely light and readable, being a Flex framework which is built on the Event Map idea. This is a collation of handlers that can respond to all the incoming events and complete several actions that are appropriate for the target.

3. By using the Mate framework, you will need no more the Singletons. I have seen a quite a few people using Singleton pattern, when it is actually not needed in the application. Now Mate completely removes it, which actually makes development further easier.

4. Mate also uses a form of dependency injection (leveraging bindings) that makes it possible to connect your models to your views without either one knowing about the other. This is probably the most powerful feature of the framework.

5. The RIA development is most certainly more interesting and flexible with Mate.

My View on Cairngorm

Cairngorm is a bundle of anti-patterns that lead to applications that are tightly coupled to global variables.

Let me explain you the flow on how Mate really goes, its so easy and interesting like RajiniKanth sir Movie.

This tutorial explains how to get started with Mate. As an example, we’ll be sending two numbers to our manager class to add , receives the total value and stores it in the model for the view to show.

All Mate projects must have:

One or more events (custom or built-in)
One or more Event Maps

Let us go step by step

Create a new Flex project named AdditionExample. In the libs folder it creates, place the compiled framework SWC (Mate.swc). This will let you use all Mate classes and tags.Create a folder structure as displayed in the image below, i will explain you how the entire flow goes.

The custom event

Every Mate project is driven by events. In our example, when user enters two values and clicks on the Add button, we’ll create a new event containing that information that will be sent to the manager class to perform the addiiton. For this purpose, we create a custom event to indicate that the user wants to submit the data and retrieve the total.

Our event will be very simple and it will contain two property: the number1 and number2.

package com.vinoth.example.events
{
import flash.events.Event;

public class AdditionEvent extends Event
{
public static const GET: String = “getQuoteEvent”;

public var number1 : Number;
public var number2 : Number;

public function AdditionEvent(type:String, bubbles:Boolean=true, cancelable:Boolean=false)
{
super(type, bubbles, cancelable);
}

}
}

The code above assumes this event is contained within the package: com.vinoth.example.events

The event also contains a constant that we will use to specify the event type. One event can specify more than one event type. We also make this event bubble up by default (the second argument of the constructor). Otherwise, we will need to remember to specify it when we instantiate it.

The View

The user interface will only need two text input and a button.

Dispatching the Custom Event

When the user clicks the Add button, we’ll create the AdditionEvent and dispatch it:

package com.vinoth.example.events
{
import flash.events.Event;

public class AdditionEvent extends Event
{
public static const GET: String = “getQuoteEvent”;

public var number1 : Number;
public var number2 : Number;

public function AdditionEvent(type:String, bubbles:Boolean=true, cancelable:Boolean=false)
{
super(type, bubbles, cancelable);
}

}
}

The Event Map

EventMap is a place where the we place all the handlers for the events which the application creates. There are be n number of event map. Now let me put down before you on how to create an event map.

We need to create a MXML file with name”MainEventMap”. This MXML component must extend from EventMap.

"1.0" encoding="utf-8"?> xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="http://mate.asfusion.com/">

This is how your blank event map file will look like. We’ll add the event map to our main Application file.

xmlns:maps=”com.vinoth.example.maps.*”
>

Now here a question might rise, how could i know whether my event map is receiving the events being dispatched.

"{Debugger.ALL}" />

This Tag does come handy and helps you in debugging whether you are going on the right way. Adding this to the event map looks like this.

"1.0" encoding="utf-8"?> xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="http://mate.asfusion.com/">

"{Debugger.ALL}" />

Listening for AdditionEvent.GET

In our event map, we will listen for the addition event so that we can send the request to the manager class. We’ll add EventHandlers tag which will specify what event type we are listening too.

"{AdditionEvent.GET}" debug="true">

At the top of the event map we’ll need to import the event class.

import com.vinoth.example.events.AdditionEvent ]]>

Inside this EventHandlers block, we’ll place the actions we want to perform when the event is dispatched. In our example we will call the method addValues in the AddManager Class.

method=”addValues” arguments=”{[event.number1,event.number2]}”/>

We are calling the method addValues on that service and sending the values coming from the event as an argument.

Creating our Business, the AddManager

package com.vinoth.example.business
{
import mx.controls.Alert;

public class AddManager
{

[Bindable]
public var totalValue:Number;

// ——————————————–
public function addValues(number1:Number,number2:Number):void {
totalValue = number1+number2;

}

}
}

In this Class we are getting the two numbers as arguments from the event class which dispatches and then we are doing our calculation. Once the value is calculated, we will inject the result in our view.

This makes life simple, here we get the final result. You can have a look at the application and view source is enabled.

Application