Let’s say we have a normal class like “Cricketer”.

package components
{
	public class Car{

		private var _carName:String;
		private var _carColor:String;
		private var _carPrize:int;

		/**
		 * CONSTRUCTOR
		 */

		public function Car(){}

		/**
		 * GETTERS AND SETTERS
		 */

		public function get carName():String{return _carName;}
		public function set carName(value:String):void{_carName = value;}
		public function get carColor():String{return _carColor;}
		public function set carColor(value:String):void{_carColor = value;}
		public function get carPrize():int{return _carPrize;}
		public function set carPrize(value:int):void{_carPrize = value;}

	}
}

Now to make this class singleton, add following piece of code.

package components
{

	public class Car{

		private var _carName:String;
		private var _carColor:String;
		private var _carPrize:int;

		protected static var _instance:Car;

		//Making singlton
		public static function getInstance():Car
		{
			if (_instance == null)
			{
				_instance = new Car();
			}
			return _instance;
		}

		/**
		 * CONSTRUCTOR
		 */

		public function Car(){}

		/**
		 * GETTERS AND SETTERS
		 */

		public function get carName():String{return _carName;}
		public function set carName(value:String):void{_carName = value;}
		public function get carColor():String{return _lastName;}
		public function set carColor(value:String):void{_lastName = value;}
		public function get carPrize():int{return _carPrize;}
		public function set carPrize(value:int):void{_carPrize = value;}

	}
}

Let’s see how we can utilize this feature in our application.

protected function checkSinglton(event:FlexEvent):void
{
	// TODO Auto-generated method stub
	//A First Cricketer
	var car:Car = Car.getInstance();
	car.carName= "Tata Indigo Marina";
	car.carColor = "0xEBEBEB";
	car.carPrize = 570000;

	trace ("My First Car: "+car.carName + "having color of " + car.carColor + " which cost me around " + car.carPrize.toString());

	//A new cricketer ? or not ?
	var secondCricketer:Cricketer = Cricketer.getInstance();
	trace ("Second Cricketer : "+cricketer.firstName + " " +cricketer.lastName " " +cricketer.type);
}

var sampleString:String = "The big bug bit the little beetle, but the little beetle bit the big bug back.";

var pattern:RegExp = /little/gi;
sampleString = sampleString.replace(pattern, "Seattle");
trace(sampleString);

The resultant would be something like this.

The big bug bit the little beetle, but the Seattle beetle bit the big bug back

EncryptedLocalStore isSupported is the property you can use to check whether ELS is supported or not.

ELS is strongly recommended to use as a private cache for the application. It should conatain only those information which needs to be secured from other users of the system or for Application specific user information.

ELS data can get lost due to few reasons like

-         Change in the Publisher ID as a result of the update.

-         User could uninstall the application & delete the ELS data.

How to storr file inELS ?

I am initiating the process by clicking let’s say “save” button.

protected function saveButton_clickHandler( event:MouseEvent ):void
{
	resultLabel.text = "";
	EncryptedLocalStore.reset();

	var file : File = File.documentsDirectory;
	file.browseForOpen("Save file to Encrypted Location");
	file.addEventListener(Event.SELECT,saveFile);
}

Now the “saveFile” function will work after the file has been selected by the user.

The target property will give us the instance of the File class, selected by user. Next, it creates an instance of the FileStream class that will be used to stream the bytes from the file into a ByteArray. Next, the filename is stored because it will be used as the key for the Encrypted Local Store. Finally, the value is stored in the Encrypted Local Store.

protected function saveFile( event:Event ):void
{
	var file = File(event.target);
	var stream :FileStream = new FileStream();

	var fileData : ByteArray = new ByteArray();
	stream.open(file,FileMode.READ);
	stream.readBytes(fileData,0,file.size);
	stream.close();
	fileName = file.name;

	EncryptedLocalStore.setItem(fileName,fileData);

	resultLabel.text = "File saved to encrypted local store"
}

package
{
	import flash.events.EventDispatcher;
	import mx.collections.IHierarchicalData;
	[DefaultProperty("source")]
	public class ObjectHierarchicalData extends EventDispatcher implements
		IHierarchicalData {
		private var _source:Object;
		public function ObjectHierarchicalData() {}
		/* in our simple system, only parents with their type set to
		'parent' can have children */
		public function canHaveChildren(node:Object):Boolean
		{
			return ( node.type == 'parent' );
		}
		/* for any given node, determine whether that node has any children by
		looking through all the other nodes for that node's ID as a parentTask */
		public function hasChildren(node:Object):Boolean
		{
			var obj:Object;
			for each( obj in source )
			{
				if( obj.parentTask == node.objId )
					return true;
			}
			return false;
		}
		/* for any given node, return all the nodes that are children of that
		node in an array */
		public function getChildren(node:Object):Object
		{
			var parentId:String = node.objId;
			var children:Array = [];
			var obj:Object;
			for each( obj in source )
			{
				if( obj.parentTask == parentId )
					children.push( obj );
			}
			return children;
		}
		public function getData(node:Object):Object
		{
			var obj:Object;
			var prop:String;
			for each( obj in source )
			{
				for each( prop in node )
				{
					if( obj[prop] == node[prop] )
						return obj;
					else
						break;
				}
			}
			return null;
		}
		/* we want to return every obj that is a root object, which
		in this case is going to be all nodes that have a parent node
		of '0' */
		public function getRoot():Object
		{
			var rootsArr:Array = [];
			var obj:Object;
			for each( obj in source )
			{
				if( obj.parentTask == "0" )
				{
					rootsArr.push( obj );
				}
			}
			return rootsArr;
		}
		public function getParent(node:Object):*
		{
			var obj:Object;
			for each( obj in source )
			{
				if( obj.parentTask == node.parentTask )
					return obj;
			}
			return null;
		}
		public function get source():Object
		{
			return _source;
		}
		public function set source( value:Object ):void
		{
			_source = value;
		}
	}
}

Let’s jump on the example directly.

The Example is a Checklist for your day to day work. This article is the first installment of the entire series of Checklist application development. Here, I will add the contents in the datagrid at runtime which includes checkbox and a text.

Here, I have a mobile project with a Datagrid named “dgTaskGrid”.

<s:DataGrid id="dgTaskGrid" skinClass="skins.DatagridSkin"
					width="100%" height="100%"
					 verticalScrollPolicy="on" />

Let’s create an arrayCollection “taskItems” in the script part, which will be a Dataprovider for the Grid .

private var taskItems : ArrayCollection = new ArrayCollection();

In the declarations tab, I have a ArrayList named “checkList” which will have a two GridColumn child inside it.

<s:ArrayList id="checkList">
	<s:GridColumn width="50">
		<s:itemRenderer>
		<fx:Component>
			<s:GridItemRenderer textAlign="center" >
				<s:CheckBox label="" selected="{data.isFinished}" horizontalCenter="0"/>
			</s:GridItemRenderer>
			</fx:Component>
				</s:itemRenderer>
			</s:GridColumn>
			<s:GridColumn headerText=""
				  dataField="text"/>
		</s:ArrayList>

I have added checkbox component in the GridItemRenderer of the first column and second column will represent my text for the new task to be added.

I need to set the dataProvider and columns property of the grid “dgTaskGrid” to feed in the data. So updated Datagrid will have following code.

<s:DataGrid id="dgTaskGrid"
	    skinClass="skins.DatagridSkin"
	    width="100%" height="100%"
	    dataProvider="{taskItems}"
	    columns="{checkList}"
	    verticalScrollPolicy="on" />

If you look closely to my sample application, I am adding a row in the Datagrid at rumtime when I click the “Add” button. All I have to do is create an object which will include my new task text. Following is the code of the same.

protected function btnAddTask_clickHandler(event:MouseEvent):void
{
	var taskItem : Object = new Object();
	taskItem.text = txtTaskName.text;
	taskItem.isFinished = false;
	taskItems.addItem(taskItem);
	txtTaskName.text = "";
}

This includes pretty much everything to display the newly added task in the Datagrid.

Now, something about the styling part where I don’t want to show the usual look of the datagrid that includes the rows and columns.

For this purpose I have created a styleClass for the spark Datagrid where I have disable the following skin.

-        columnSeparator

-        rowSeparator

-        headerSeparator

Moreover, I  don’t have anything to show in the header part of the grid. So I am just setting the visible property of ”GridColumnHeaderGroup” to make it disappear.

That’s it. You can see how the application looks in the below screen shot when add a list of tasks to be completed.

Well more better way of doing the same thing is using the Asynctocken and Responer interfaces which can track objects and pass parameters to the co-dependent services. Let’s have a sample.

For a demo purpose I am using following Dictionary Webservice.

http://services.aonaware.com/DictService/DictService.asmx

This Webservice gives an API for dictionary purpose. For quicker way, I am using wizard to call the webservice. Just add the wsdl and there you go.

Next step is to call the webservice function on creationComplete() event of the application.

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
			   creationComplete="application1_creationCompleteHandler(event)">
			private var dict : DictService = new DictService();
			private var token:AsyncToken;
			private var responder:mx.rpc.Responder;

			protected function application1_creationCompleteHandler(event:FlexEvent):void
			{
				// TODO Auto-generated method stub
				token = dict.DictionaryList();
				responder = new mx.rpc.Responder(onResult, onFault)
				token.addResponder(responder);

			}
			public function onResult(event:ResultEvent):void
			{

			}
			public function onFault(event:FaultEvent):void
			{

			}
		]]>
	</fx:Script>

	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
</s:Application>

We all have loved Arraycollection so much that we almost forget about Array.

All those push() and pop() methods got obsolete against addItem() and removeItem().

Even I also got stumbled upon when one of my friend ask me about this.

Offcourse, ArrayCollection is much more developer friendly. So better to stick to that. :)

First of all create a HTML component object on your desired event. I have placed itunder creationComplete();

public function loadImage():void{
     var cuteDog:HTML = startAnimation("assets/images/dog.gif");
     cuteDog.height = 80;
     cuteDog.width = 80;
     parentContainer.addElement(cuteDog);
}

“startAnimation” function will trigger the do the trick here.

public function startAnimation(url:String):HTML
{
     var gifLoader:HTML = new HTML();
     gifLoader.location=url;
     gifLoader.reload();
     return gifLoader;
}

Just set the desired height and width for the HTML component and its parent component. Finally call the addElement() to add in application.

To develop a custom context menu for a component we first need to understand the mx.internal property of a UI component. Here I am taking a TextInput for an example.

Let’s say you have a requirement to edit the font style in TextInput when you right click on a TextInput’s text area. By default context menu will come with a predefined set of options like Cut, Copy, Paste etc.  But here we need to add one more custom feature “Fonts” in the context menu.

To get this done, we need to reach to the “TextField” of a TextInput. We can get this object by using mx.internal property of a TextInput.

var txt:TextField = messageView.txtChatMessage.mx_internal::getTextField() as TextField;

mx.internal is basically those properties of an objext which has a scope of change in future. So these properties are kept hidden and not available to us. To get access these peroperties just add following piece of line at the beging of your class at import level.

use namespace mx_internal;

Now we have a full access to the TextField object of a TextArea. Following method  createCustomContextMenu() has been called on the right click of a TextArea component.

private function createCustomContextMenu () : void
{
     var txt:TextField = messageView.txtChatMessage.mx_internal::getTextField() as TextField;
}

Now create an object of NativeMenuItem, which will represents our customMenuItem. You need to add an event listener also for the same. You would also like to give a “name” to you Context Menu item together with some “data”  using the “name” and “data” property respectively.Finally you need to add this item in your components contextmenu object. Following is an updated version of the createCustomContextMenu() method.

private function createCustomContextMenu() : void
{

     var txt:TextField = messageView.txtChatMessage.mx_internal::getTextField() as TextField;

     var suggestedWord:NativeMenuItem = new NativeMenuItem(suggestionArray[iCount].toString());

     suggestedWord.addEventListener(Event.SELECT,onWordItemSelect);

     suggestedWord.data = "You menu item Label<strong>"</strong>;

     suggestedWord.name = suggestionArray[iCount].toString();

     txt.contextMenu.addItemAt(suggestedWord,0);

}

In this example I am adding my custom Menu Item at 0th location i.e. the first position. This location can be changed using “”addItemAt()” method of you context menu object.

There are other useful properties available like checked, enabled, mnemonicIndex etc. to be used if required.

You can get a better idea of all these option from livedoc’s following link.

http://livedocs.adobe.com/flex/3/html/help.html?content=Menus_2.html