Archive for March, 2008

27
Mar

Increase memory performance on data structures using HashMapCollection API

By elad.ny 7 Comments
Categories: Flex and Flex APIs

Hash map is a data structure that can associates keys with values. It provides constant time performance for the basic operations of addItem, removeItemAt, getItemValue and other methods. The main reason for the increase in memory performance is iteration. Unlike ArrayCollection, the HashMapCollection doesn’t need to loop through in order to find a key or a value. The HashMapCollection associates a value with a key.HashMap Collection is a great choice when you need to:

  1. When you need in-memory data structures.
  2. When you need a pair of key-value data structure.
  3. When you need to Increase performance.

Flex and Action Script provides the “IList” interface that is implemented by the Array and ArrayCollection. Using array is a great choice when you need to associate an object with an ID, but if you have scenarios where you want to copy a large database structure to the memory or have a key-values pairs you will have to iteration through the array in order to do a lookup.
The API I developed is called “HashMapCollection” and it is using naming conventions that are very similar to the “ListCollectionView”.

The API is also implementing the change events classes, so you will be able to start using the API right away with much similarity to the “IList” methods.

Let’s take an example. Say we have list of contacts and phone numbers and we need to store them in the memory, the list was given to us through the SQL database and it has about 10,000 contacts.

Action Scriot HashMap Collection example

Using Array or ArrayCollection will force us to loop through the list until we find the name we are looking for and then get the phone number, that process will put a large expense on Flash player and will basically look as if the program is stuck, since action script is a single thread programming language, which means that the program cannot split itself into more than one simultaneously tasks.

The HashMapCollection doesn’t need to loop it’s basically using the following code to find the value:

map[key] = value;

I am giving a list of contacts, as an example, but let me make it clear that the HashMapCollection is flexible to use any type of key-value such as;

• Name-UIComponents
• Name-Object
• Name-Array

Below you can find a use-case example of creating a data structure and modifying the data;


private function map():void {

var map:IMap = new HashMapCollection();
map.addEventListener(CollectionEvent.COLLECTION_CHANGE, handler);

map.addItem(”John”, “212-452-8086″);
map.addItem(”James”, “718-345-3455″);
map.addItem(”Micheal”, “917-782-8822″);
map.addItem(”Ron”, “212-426-8855″);
map.addItem(”Mike”, “212-255-2436″);
map.addItem(”Jenny”, “718-344-2433″);
map.addItem(”Jack”, “917-222-4352″);
map.addItem(”Riki”, “981-222-1122″);
trace(”\nAll items: “+map.toString()+”\n”);

trace(”containsKey Jack? “+map.containsKey(”Jack”));
trace(”containsValue 718-344-2433? “+map.containsValue(”718-344-2433″));
trace(”getItemKey 718-344-2433: “+map.getItemKey(”718-344-2433″));
trace(”getItemValue Jenny: “+map.getItemValue(”Jenny”));

map.removeItemAt(”Riki”);
trace(”Remove Riki.”);
trace(”getItemValue Riki: “+map.getItemValue(”Riki”));
trace(”Comapre: “+map.compare(”Ron”, “212-426-8855″));

map.removeAll();
trace(”\nAll items: “+map.toString()+”\n”);

}

private function handler(event:CollectionEvent):void
{
trace(”Event: “+event.kind);
}

All of this is great, but let me actually prove to you that you gain performance. I created a small Flex application that creates two data structures; ArrayCollection and HashMapCollection. Watch the memory monitor and see how Flash Player actaully stopped while it loops and looks for the key in the ArrayCollection. On the other hand the HashMap doesn’t add any expense on the Flash player.

All source code contained in this API has been published under the MIT licence and is protected as stated therein.

To see the example and download source code (via right click):
http://elromdesign.com/blog/Flex/API/HashMapCollection/

To view the ASDOC of all the API:
http://elromdesign.com/blog/Flex/API/asdoc/

Have fun!

23
Mar

Use singletons discreetly. Here are some tips to help you decide when to use the singleton pattern.

By elad.ny 0 Comments
Categories: Creational patterns, Design patterns and Flex

Singleton design pattern should be used discreetly. Many of us are building API’s and using singletons as a means to create a global object that can be accessed across the application.Here’s why you should use singleton discreetly:

  1. In many cases, using singleton is an anti-pattern;
  2. The singleton may be considered as an anti Action Script, since Action Script 3.0 doesn’t support private or protected constructor;
  3. With programming, it is usually not recommended to

use global objects, since it is hard to test them and the developer has to make assumptions regarding the application and how they will be used.

The main source of the problems is that using the singleton pattern makes the classes tightly coupled instead of loosely coupled, meaning that you can only test a few classes together rather than each of the classes at a time, as you should.

Before I go into a discussion on when is it a good idea to use the singleton pattern, I think it’s a good idea to show how the singleton is used in Action Script 3.0.

What is the singleton pattern?
The singleton pattern is used to restrict instantiation of a class to one object. The pattern keeps a private constructor to insure that the class was created only once.

Singleton in Action Script 3.0:
Action script does not support the option to declare constructor as private or protected inside of a package, which causes a design pattern problem, since any option you choose will be considered workaround or a “hack”.

One popular option is to use the inner classes, meaning creating another class inside of the package to behave as the private constructor, such as in the example below:

package {

	public class Manager
	{
		/**
		 * var to be used by the singleton pattern to return the instance of the class.
		 */
		private static var manager : Manager;

		/**
		 * Internal constructor. Should not be called from outside this class.
		 *
		 * @param enforcer	Enforce the creation of one class only.
		 *
		 */

		public function Manager(enforcer:AccessRestriction)
		{
			// TODO: throw exception
			if ( enforcer == null )
			{
				throw new Error("Manager error enforcer input param is undefined" );
			}
		}

		/**
		 * Method function to retrieve instance of the class
		 *
		 * @return The same instance of the class
		 *
		 */
		public static function getInstance() : Manager
		{
			if( manager == null )
				manager = new Manager(new AccessRestriction());

			return manager
		}
	}
}

class AccessRestriction {}

To view the source code as text file click here.

So when should you use the singleton design pattern?
Here’s a singleton recommended check list:

  1. Singleton should be used in cases where only one object is needed to coordinate actions and/or events across the application;
  2. The application will always use the object in the same way;
  3. It doesn’t really matter to the client what’s going on in the rest of the application, meaning that the singleton object is independent.

If you can confirm the check list, than it’s a good candidate to use the singleton pattern.

Have fun designing!

15
Mar

Boost Flex performance with Object Pooling Manager API

By elad.ny 8 Comments
Categories: Creational patterns, Design patterns and Flex APIs

Object Pooling Manager API is an open source API that allows you to create a collection of objects and use them at any given time. These usable objects can be anything from a UI component to an XML list. The Object Pooling manager ensures the management of the collections of objects and allows the client to keep using them without costing any additional resources.

Flex is a single thread programming language which means that the program cannot split itself into more than one simultaneously tasks and it causes flex to slow down, especially when the cost of initializing a class is high. Object pooling can be used to manage object caching and boost performance.

A real life example is a book case. You have a case full of books and you decide to read one of the books. While you use the book you may stained a page by a coffee and changed the look of the book. After you are done using the book you return the book to the book case for later usage.

Object pooling works the same way, the object pooling class is singleton to insure you are not pulling more than one reusable object at a time. At any given time you pick a reusable object, the object is being removed from the collection so the client can change it and place it back for future usage.

The Flex API I developed is based on creating a usable collection of objects, the objects can be any component such as Flex Sprite or Canvas, array, class or anything you want it to be.

The object pooling can boost performance; especially in cases where the resources used to initializing a class instance are high, the number of times the class will be usage is often, and the number of instantiations in use at any single time is low.

All source code contained in this API has been published under the MIT licence and is protected as stated therein.

To see an example and download source code:
http://elromdesign.com/blog/Flex/API/ObjectPoolManager/

To view the ASDOC of all the API:
http://elromdesign.com/blog/Flex/API/asdoc/

Object Pooling UML

03
Mar

Custom cursor API is a great solution for creating sets of custom cursors

By elad.ny 5 Comments
Categories: Creational patterns, Design patterns, Flex and Flex APIs

Custom cursor API is a great solution for creating sets of custom cursors. Each set is a concrete class that you can set. In addition, you can implement custom events such as: mouse down, mouse up and custom busy cursor.

CursorManager class is useful for replacing the cursor with a custom cursor or for creating a busy cursor, but what do you do when you want to create a set of custom cursors? You may also be interested in building few sets of custom cursors to be used in different part of the application and keep track of them in one centralized location.
For example you want to create couple of sets of cursors. One of them will be a custom image, the cursor will change on mouse down and mouse up events and the cursor will have a custom busy image. That set will be used in one component and another set will be used in a different component.

Custom cursor API is based on creating custom sets of cursors for usage in an application. You create a concrete class and set all the images, swf or sprite objects you want to assign to that set and the cursor will change according to how you set it in the concrete class.

All source code contained in this API has been published under the MIT licence and is protected as stated therein.

To see an example and download source code:
http://elromdesign.com/blog/Flex/API/Cursor/

To view the ASDOC of the API:
http://elromdesign.com/blog/Flex/API/asdoc/

Cursor UML Class diagram