Elad Elrom

In preparation for my presentation on Mashup tomorrow at NY Flex group, I gave myself a little challenge. What kind of a Mashup application could I build in about five hours of work, without using a designer!
The result is a job board for Flex developers that can be seen below:

Experience the application here:
http://elromdesign.com/blog/Flex/Jobs/

The Mashup allows you to search for Adobe Flex Developers Jobs based on your Zip code. In addition, you can SMS a job posting to your cell phone. I used two Application Programming Interfaces (APIs), a web service and skin styling.Tomorrow’s one hour presentation will focus on describing what the buzz around Mashup is all about, how to build your own Mashup in Flex and helpful tools and tips to make your life easy.

If you live in the New York area, sign in at New York Flex Group [http://NYFlex.org] and stop by tomorrow! We will have a lot of fun!

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.

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!

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!

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/

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/

Building a large Flex application that communicates with a remote server through SQL commands create an architect design problem. What do you do with all the SQL commands? Do you store them in a properties file or create 50-100 ColdFusion files? What do you do once you want to change some of these SQL commands?

The issue gets even worse once you need to submit few SQL commands for one operation. For example you have a form and once that form submit the client request to sign to a newsletter so you would need two SQL statements.

I created an elegant solution to that problem, utilizing the Abstract Method design pattern. The “SQLStatements Manager” (Flex SQL statements API) will let you create different CRUD (Create, Read, Update and Delete) statements for each form and you have one place where all your SQL commands are located so once it’s time to change them or update your database design, you don’t have to go through your entire application looking for all these SQL statements.

Once you have the SQL statement you can submit them to the database in order to process. I may give an example of implementation of the API using ColdFusion and Cairngorm.

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

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

This API will be in a new Flex 3.0 book I am writing called “Developing Enterprise Architect Applications.” click here to read more and pre-order.

All source code contained on this page has been published under the MIT license and is protected as stated therein.

I am currently in the process of writing as a co-author in a new book by Apress called: “AdvancED Flex 3″

This book makes advanced Flex 3 concepts and techniques easy. Ajax, RIA, Web 2.0, mashups, mobile, the most sophisticated Web tools and the coolest interactive Web applications are all covered with practical, visually-oriented recipes.

* Practical, how-to approach for advanced results.
* Leverage the tools you know, Java, PHP, Python, Ruby, in combination with Flex.
* Build high-performance Web applications with interactivity that really engages your users

To read more about the book click here.

Additionally, I am in the process of writing the following book:

Advanced Flex 3.0 - Developing Enterprise Architect Applications.
The book will be published in late 2008. The book will cover the subject of developing an Enterprise Level Flex Applications from planning to designing and finally testing. It is intended for the experienced Flex developer wishing to expand his/her knowledge and expertise. Developing a large scale Flex application is different than developing a small application and although there is a lot of information, there is not any one resource that covers it all. This book will cover all the best practices and give you the tools you need to develop such a large scale Flex application.

In the next few months I will be giving away some of the API’s that will be part of the book. To learn more about the book and signup for the pre-order list click here.

AutoSuggest API can be used to display an Auto Suggest input box. The separation of the data and view is what makes AutoSuggestion API flexible and easy to modify and fit different applications. The UIAutoSuggest gets “TextInput” and “TileList” and the “AbstractAutoSuggest ” keep sorting the list of words based on the user interaction, the data is bindable which allow the TileList and TextInput to be updates on the fly.

This API will be in a new Flex 3.0 book I am writing called “Developing Enterprise Architect Applications.” click here to read more and pre-order.

All source code contained on this page 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/AutoSuggest/

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

The API is responsible for displaying different files type. There are many scenarios where you want your application to use a different class or component to display different types of files. You can use “if-else” statements; however the problem is when you want to use different type of component or classes to handle the different types of files. Using the factory design pattern solve that problem; The concrete product needs to implements the “IView” interface and the component that is responsible for displaying the file can be of any type. “UIFileViewer” class is responsible for creating the component and adding it to the UIComponent.

This API will be in a new Flex 3.0 book I am writing called “Developing Enterprise Architect Applications.” click here to read more and pre-order.

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

To see an example and download the source code click here:
http://elromdesign.com/blog/Flex/API/FileViewer/

ASDOC:
http://elromdesign.com/blog/Flex/API/asdoc/