Wednesday, February 3, 2010

Using Value Objects(Data Transfer Objects) & Model Objects, Fill in the blank template in AS 3.0

All the associated files can be downloaded from this link : Click Here

This post covers the fundamental of Value Objects.
We Use Value Object to encapsulate the business data. When the application requests for the business data, it can get that from Value Object directly. A VO is an ActionScript Class which contains properties that hold simple values. Given below is a simple VO example class in AS3.0

package com.fib.vo

{

/**

* ...

* @author Nitin Sinha

*/

public class FibVO

{

public var questionText:String;

public var correctFeedbackTitle:String;

public var correctFeedbackText:String;

public var incorrectFeedbackTitle:String;

public var incorrectFeedbackText:String;

public var correctAnswer:String;

public var qId:int;

public var attemtedByUser:Boolean;

public var answeredValue:String;

public var isCorrect:String;

public var spentTime:String;

}

}


VO's are also called "Data Transfer Objects". The purpose of a VO or DTO is to exchange data between the application and a server (In most cases). It is one of the efficient method of handling and keeping data that is being used in an application. Model Objects basically binds the VO objects to the application. Model have the get set methods to update values. It can also have some other methods and vars to access some common properties in your application. Example given below :

package com.fib{

import com.fib.vo.FibVO;

public class Model {



// Constants:

// Public Properties:

public var FibQuestions:Array;

// Private Properties:

private static var model:Model;

private var _currentIndex:int;

// Initialization:

public function Model() {

if(model != null){

throw new Error("You can not create an instance of Model class, Please use Model.getInstance() instead.");
}
FibQuestions = new Array();
}

// Public Methods:

public static function getInstance():Model{
if(model == null){
model = new Model();
}

return model;
}

public function get currentIndex():int { return _currentIndex; }

public function set currentIndex(value:int):void
{
_currentIndex = value;
}

public function get totalFibQuestions():int { return FibQuestions.length; }

private function getFibByID(id:String):FibVO
{
return FibQuestions[getFibIndexById(id)];
}

public function getFibIndexById(id:String):int
{
for (var i:int = 0; i < FibQuestions.length; i++)
{

if (FibQuestions[i].qId == id) return i;

}

return -1;

}
}
}


Using the above concept of Model and Value objects we will create a simple example reading the values from XML and storing it to our VO's and further using the same to do our calculation and rendering. This example is "Fill in the blank" kind of screen where we will render the XML to create a screen with some text and a blank box within it. Lets have a look at the XML below :

<?xml version="1.0" encoding="UTF-8"?>

<activity>

<questionList>

<question id="1">

<questionText><![CDATA[The small Indian mongoose, and all other <WOL> of mongoose, are small and furry.]]></questionText>

<correctAnswer>species</correctAnswer>

<correctFeedbackTitle><![CDATA[Correct!]]></correctFeedbackTitle>

<correctFeedbackText><![CDATA[x]]></correctFeedbackText>

<incorrectFeedbackTitle><![CDATA[Incorrect!]]></incorrectFeedbackTitle>

<incorrectFeedbackText><![CDATA[Try rereading the passage or opening the “Word List” to check the spelling of your answer.]]></incorrectFeedbackText>

</question>
..................................................
..................................................
<question id="10">

<questionText><![CDATA[There are now laws against bringing in animals that would <WOL> on mongooses and keep their numbers down.]]></questionText>

<correctAnswer>prey</correctAnswer>

<correctFeedbackTitle><![CDATA[Correct!]]></correctFeedbackTitle>

<correctFeedbackText><![CDATA[x]]></correctFeedbackText>

<incorrectFeedbackTitle><![CDATA[Incorrect!]]></incorrectFeedbackTitle>

<incorrectFeedbackText><![CDATA[Try rereading the passage or opening the “Word List” to check the spelling of your answer.]]></incorrectFeedbackText>

</question>

</questionList>

</activity>


As seen above it is collection of ten questions that will be used to render. One point to keep in notice is that every questionText tag has "" tag in that which refers to the position where the blank box will come.

There are three main class used in the application they are :
  1. FillInTheBlank_DocClass - As the name suggests it is the document class of our flash file.
  2. FillInTheBlank_ClipClass - This is the MovieClip class. It is linked from the library to the container movieclip which holds all the assest for the Fill_in_the_blank screen.
  3. FibMain - This is the most important class as it holds the entire logic for rendering and functioning of the template.
Apart from above three some other classes like XMLParser,Model,VO etc.

Lets see some code snippets from above classes which will help us in understanding the entire code.

In "FillInTheBlank_DocClass" this class lets check its "init()" method.

private function init(xml:XML):void

{

if(xml is XML){

var parser:XMLParser = new XMLParser();

parser.parseXML(xml);

}

this.activity_container_clip.init(model);

currentQuestion = 0;

totalQuestions = model.FibQuestions.length -1

navigateTo(currentQuestion);

this.activityFeedback.visible = false;

}

Once our document class receives the XML it creates object of the XML parser and sends it for parsing.

var parser:XMLParser = new XMLParser();
parser.parseXML(xml);

In the XMLParser class the logic goes which stores the values in the VO's. Let's look at the "parseXML()" method of the class for more clarity.


public function parseXML(xml:XML):void{

var model:Model = Model.getInstance();

var qList:XMLList = xml.questionList.question;

var ql:int = qList.length();

model.FibQuestions = new Array();

for(var i:int=0; i<ql; i++){

var xl:XML = qList[i];

var f:FibVO = new FibVO();

f.questionText = xl.questionText;

f.correctFeedbackTitle = xl.correctFeedbackTitle;

f.correctFeedbackText = xl.correctFeedbackText;

f.incorrectFeedbackTitle = xl.incorrectFeedbackTitle;

f.incorrectFeedbackText = xl.incorrectFeedbackText;

f.correctAnswer = xl.correctAnswer;

model.FibQuestions.push(f);
}
}


As it can be seen first of all the singleton class Model's object is created, later Model object's properties are updated which also updates the Value Objects.

After the parsing is done and we are ready with the Value Objects we come to the MovieClip container class that holds the textboxes and buttons for FIB(Fill in the blanks) template.

The "FillInTheBlank_ClipClass" creates the object of the "FibMain" class which is passed with the VO as parameter to render the screen. Below line of code from "FillInTheBlank_ClipClass" demonstrates it :

objFib.displayQuestion(model.FibQuestions[newQIndex]);

Finally the "FibMain" class uses the VO to create the screen.

public function displayQuestion(FibQ:FibVO):void{}

"displayQuestion()" is the main method that creates the screen.

All the associated files can be downloaded from this link : Click Here

Some other reference links :

Using FormBuilder, Validators & FormGroup in Angular 2 to post data to Node server (node.js)

This blog explains usage of  FormBuilder , Validators , FormGroup classes in Angular 2 projects. In this post we will create HTML form a...