devahead BLOG

Setter is not invoked when a bindable Flex property doesn’t change

Andrea Bresolin — Sat, 15 May 2010 20:35:35 +0000

You’ve probably been using the Bindable metadata tag a lot of times with properties in your Flex applications. When a property is defined through getter and setter functions, you may take for granted that each time you set the value of the property, the corresponding setter is invoked, so you can perform your own operations in it. Well, this is not totally true with bindable properties. What I’m going to show is just something to remember whenever you use the Bindable metadata tag with properties defined through getter and setter. It is much easier to explain everything if we immediately look at the example application.

The property called notBindableProp is just a simple not bindable property. Whenever you set its value, the setter is invoked. bindableProp is a standard bindable property. If you try to set its value, you’ll quickly find out that the setter is invoked only if the new value is different from the value returned by the corresponding getter. So you cannot rely on doing something inside the setter when the new value is exactly the same as the previous one. What if you still want a bindable property, but you need to perform some operations in the setter every time a value is set, even if it’s equal to the previous one? You can simply define a custom event name in the Bindable metadata tag as you can see in the bindableEventProp. Every time a value is set for that property, the setter is invoked and you can perform your operations and then dispatch your own event.

Disabling user interaction in a Flex application

Andrea Bresolin — Sat, 24 Apr 2010 00:04:11 +0000

Live demoSource code (LICENSE)

While working with asynchronous operations like server calls or asynchronous events, you know that it’s not easy to guarantee a correct processing of user’s requests if there isn’t a well defined workflow that the user must follow. For example: the user clicks a button that makes a function call on the server side, so the application waits for the server to reply, but meanwhile the application is still responsive for the user so any other operation could be performed by the user on the interface possibly not compatible with the reply of the server in the moment that the client receives it. There are times when the user interaction must be disabled until the application is again in a state that can safely process any other user request because there’s a well defined workflow to follow. This is the topic of this post, giving you a way to temporarily disable user interaction while the application is not in a ready state.

At this point one could think: well, that’s easy, you can do that simply by setting the enabled property of the components. No, it’s not that easy. The reason why it’s not easy, is because you don’t want the user to see weird color changes in the user interface because a component switches from enabled to disabled state and vice versa and you want to keep the focus on the component that was focused before disabling the interface. So these are the key points that I had to keep in mind while thinking about the solution that I’m going to show you.

As usual, the best way to start is looking at the source code, so we can discuss later about what it does.

package com.devahead.utils
{
	import flash.display.DisplayObjectContainer;
	import flash.events.Event;
	import flash.events.EventDispatcher;

	import mx.collections.ArrayCollection;
	import mx.containers.Canvas;
	import mx.core.Application;
	import mx.core.IChildList;
	import mx.core.UIComponent;

	public class UserInteractionManager extends EventDispatcher
	{
		protected var _blocker: Canvas = null;

		protected var _managedApp: Application = null;

		/**
		 * Application managed by this UserInteractionManager instance.
		 */
		public function get managedApp(): Application
		{
			return _managedApp;
		}

		protected var _focusState: Object = null;

		/**
		 * Data about the focused components before disabling the
		 * user interaction.
		 */
		protected function get focusState(): Object
		{
			return _focusState;
		}

		protected function set focusState(value: Object): void
		{
			_focusState = value;

			dispatchEvent(new Event("isInteractionEnabledChanged"));
		}

		/**
		 * Tells if the user interaction is currently enabled.
		 */
		[Bindable("isInteractionEnabledChanged")]
		public function get isInteractionEnabled(): Boolean
		{
			return (_focusState == null);
		}

		/**
		 * Constructor.
		 *
		 * @param managedApp
		 *   Application instance managed by UserInteractionManager.
		 */
		public function UserInteractionManager(managedApp: Application)
		{
			_managedApp = managedApp;

			// Create the blocker component to avoid mouse clicks.
			// We set a backgroundColor to actually allow the clicks to be blocked
			// (it doesn't work if the blocker is totally transparent) and we set
			// the backgroundAlpha to a very small number so the blocker is not
			// transparent for the Flash player but it is actually invisible for the
			// human eye.
			_blocker = new Canvas();
			_blocker.setStyle("backgroundColor", 0xffffff);
			_blocker.setStyle("backgroundAlpha", 0.01);
		}

		/**
		 * Disable the user interaction with the application.
		 */
		public function disableUserInteraction(): void
		{
			// Check if interaction is already disabled
			if (!isInteractionEnabled) return;

			// Save the information about the current focused component
			focusState = new Object();

			if (_managedApp.focusManager != null)
			{
				focusState.focusedComponent = _managedApp.focusManager.getFocus();

				if (focusState.focusedComponent != null &&
					focusState.focusedComponent.hasOwnProperty("selectionBeginIndex") &&
					focusState.focusedComponent.hasOwnProperty("selectionEndIndex"))
				{
					// Save the selection information about the focused component (useful for text
					// selection inside a TextInput for example).
					focusState.focusedCompSelectionBeginIndex = focusState.focusedComponent.selectionBeginIndex;
					focusState.focusedCompSelectionEndIndex = focusState.focusedComponent.selectionEndIndex;
				}
			}

			// Set the size of the blocker
			_blocker.width = _managedApp.width;
			_blocker.height = _managedApp.height;

			// Make the blocker the topmost component in the display list
			var rawChildren: IChildList = _managedApp.systemManager.rawChildren;

			if (rawChildren.contains(_blocker))
			{
				rawChildren.removeChild(_blocker);
			}

			rawChildren.addChild(_blocker);

			if (_managedApp.stage != null)
			{
				// Remove the focus from the current focused component
				_managedApp.stage.focus = null;
			}

			if (_managedApp.systemManager is DisplayObjectContainer)
			{
				// Disable tabbing so the user cannot use the tab key to cycle
				// among the components.
				focusState.sysManTabChildren = (_managedApp.systemManager as DisplayObjectContainer).tabChildren;
				(_managedApp.systemManager as DisplayObjectContainer).tabChildren = false;
			}
		}

		/**
		 * Restore the user interaction with the application.
		 */
		public function restoreUserInteraction(): void
		{
			// Check if the interaction is already enabled
			if (isInteractionEnabled) return;

			if (_managedApp.systemManager is DisplayObjectContainer)
			{
				// Restore the tabbing state saved before disabling the user interaction
				(_managedApp.systemManager as DisplayObjectContainer).tabChildren = focusState.sysManTabChildren;
			}

			// Remove the blocker from the display list
			var rawChildren: IChildList = _managedApp.systemManager.rawChildren;

			if (rawChildren.contains(_blocker))
			{
				rawChildren.removeChild(_blocker);
			}

			if (focusState.hasOwnProperty("focusedComponent") &&
				focusState.focusedComponent != null &&
				_managedApp.focusManager != null)
			{
				// Check if I can restore the focus or not depending on whether or not there
				// are modal popups over the previously focused component.
				var canRestoreFocus: Boolean = false;

				if (_managedApp.systemManager.numModalWindows > 0)
				{
					// Get the list of all the active popups
					var popupList: ArrayCollection = PopUpUtils.getAllPopups(_managedApp, true);

					if (popupList.length == 0)
					{
						// There are no popups, so I can restore the focus
						canRestoreFocus = true;
					}
					else
					{
						if (focusState.focusedComponent is UIComponent)
						{
							// Get the topmost popup
							var topmostPopup: Object = popupList.getItemAt(popupList.length - 1);

							var currParent: Object = (focusState.focusedComponent as UIComponent).parent;

							// Go through all the parents hierarchy for the component that should be
							// focused to check if it belongs to the topmost popup.
							while (currParent != null)
							{
								if (currParent == topmostPopup)
								{
									// The component that should be focused belongs to the topmost popup,
									// so I can restore the focus.
									canRestoreFocus = true;
									break;
								}

								if (currParent == currParent.parent)
								{
									break;
								}

								currParent = currParent.parent;
							}
						}
						else
						{
							canRestoreFocus = true;
						}
					}
				}
				else
				{
					// There are no modal popups, so I can always restore the focus
					canRestoreFocus = true;
				}

				if (canRestoreFocus)
				{
					// Restore the focus on the component that was focused before disabling the
					// user interaction.
					_managedApp.focusManager.setFocus(focusState.focusedComponent);

					if (focusState.focusedComponent.hasOwnProperty("selectionBeginIndex") &&
						focusState.focusedComponent.hasOwnProperty("selectionEndIndex"))
					{
						// Restore the selection inside the focused component (useful for TextInput
						// for example).
						focusState.focusedComponent.selectionBeginIndex = focusState.focusedCompSelectionBeginIndex;
						focusState.focusedComponent.selectionEndIndex = focusState.focusedCompSelectionEndIndex;
					}
				}
			}

			focusState = null;
		}
	}
}

This is the UserInteractionManager class and it manages all the necessary operations for you to disable and restore the user interaction. The constructor accepts the application that has to be managed by an instance of the class, so you’ll have a single instance of UserInteractionManager for an application. There are two functions in the class, disableUserInteraction and restoreUserInteraction.

When you decide to disable the interaction, UserInteractionManager saves the information about the current focused component so the focus can be restored later, then it puts a blocker canvas on top of every other child object in the application. Here we must use the rawChildren because the blocker must be also on top of the popups if present. After saving state information about the focused component and displaying the blocker, the focus is removed from the focused component and the tabChildren property of the systemManager is set to false so we ensure that the user cannot try to focus the components with the tab key. The blocker is not visible to the human eye because we set a very low backgroundAlpha value, but we must fill it with a color to make sure that the Flash player intercepts the mouse clicks on the blocker canvas instead of letting them go through the underlying components.

If you decide to restore the user interaction, then UserInteractionManager restores the tabChildren property of the systemManager, removes the blocker canvas and restores the focus on the previously focused component. While restoring the focus, we must also check if there are modal popups over the previously focused component. If the component is not a child of a topmost modal popup then it makes no sense to restore the focus on a component that is not supposed to have it since there’s a modal popup in front of it. To get all the popups in the application we use an utility class named PopUpUtils that we’ve already seen in a previous post. The properties selectionBeginIndex and selectionEndIndex are used with a TextInput or similar components to restore the text selection inside the focused component if some text was selected before disabling the user interaction.

Let’s take a look at an example application that uses the UserInteractionManager class.

Basically you’ve got a few controls like TextInput, List and Button to interact with the application and test that the focus is correctly restored like what it was before disabling the user interaction. You can also open both modal and normal popups. The interaction can be disabled with a shortcut (CTRL + SHIFT + ALT + D) and is restored after the specified number of seconds. Make sure you click on the application and set the focus on a control before pressing the keys for the shortcut to be intercepted correctly.

Now, just a typical situation in which the UserInteractionManager class could be useful:

public function makeServerCall(ro: RemoteObject): void
{
	userInteractionManager.disableUserInteraction();

	var asyncToken: AsyncToken = ro.myServerFunction();

	asyncToken.addResponder(new mx.rpc.Responder(
		onMakeServerCallOK, onMakeServerCallFault));
}

protected function onMakeServerCallOK(event: ResultEvent): void
{
	userInteractionManager.restoreUserInteraction();
}

protected function onMakeServerCallFault(event: FaultEvent): void
{
	userInteractionManager.restoreUserInteraction();
}

This is a simple example. Before making a server call you disable the user interaction and you restore it as soon as the server replies. This makes sure that the user cannot act in an unexpected way while you don’t have an answer from the server.

Sending ActionScript objects through BlazeDS with ASObject

Andrea Bresolin — Sun, 18 Apr 2010 23:24:27 +0000

Source code (LICENSE)

Typically, BlazeDS is used to send typed objects between a Flex client and a Java server, but what if you want to send generic objects generated dynamically? On the client side, you can create an ActionScript object dynamically through the Object base class. So, for example, you can write something like this:

var myObject: Object = new Object();
myObject.prop1 = "prop1Value";
myObject.prop2 = new Object();
myObject.prop2.prop21 = "subValue1";
myObject.prop2.prop22 = "subValue2";

Just a simple example that shows how to dynamically add custom properties to a generic ActionScript Object. What could not be obvious is how to obtain the same functionality on the server side with Java. In fact, the Object class in ActionScript corresponds to the ASObject class in Java. What is important to note is that the ASObject class extends java.util.HashMap. How can this information be useful? To understand it, let’s immediately take a look at our example application.

In this application, we call a server function named getSentGenericObject. It’s purpose is simply to send back to the client an object generated dynamically on the server side whose values are the same of the object received in input from the client. As you can see, we create a generic ActionScript object called sentGenericObj, add some properties and send it to the server, then we print on an alert message the values of the object received from the server. Now it’s time to see how getSentGenericObject is implemented.

package com.devahead.services;

import flex.messaging.io.amf.ASObject;

public class TestService
{
	@SuppressWarnings("unchecked")
	public Object getSentGenericObject(ASObject genericObj)
	{
		// Create a new ASObject instance to send to the client with all
		// the properties values received from the client.
		ASObject returnedObj = new ASObject();

		returnedObj.put("prop1", genericObj.get("prop1"));

		ASObject compositeObj = new ASObject();
		returnedObj.put("composite", compositeObj);

		compositeObj.put("sub1", ((ASObject)genericObj.get("composite")).get("sub1"));
		compositeObj.put("sub2", ((ASObject)genericObj.get("composite")).get("sub2"));

		return returnedObj;
	}
}

Since ASObject is in fact an HashMap, all we need to do to generate dynamically an object in Java is add the properties we need as keys of the HashMap and for each property we can assign a value. It’s really simple. As you can see, we create a new instance of ASObject called returnedObj and add a property named prop1 getting its value from the genericObj received from the client. We also create a composite property called composite. With composite I mean a property with sub-properties in it, so composite is another ASObject instance and we can add the sub-properties as we previously did with prop1. This is all we need to do. In this way, we can get a dynamically generated object both on the client and the server side and send it back and forth through BlazeDS. This is the result we get when we click the button on the example application:

Beware of singleton in Flex modules

Andrea Bresolin — Thu, 11 Mar 2010 23:18:00 +0000

Example 1 (without importing the singleton class in the main application – module-wide singleton):

Live demoSource code (LICENSE)

Example 2 (singleton class imported in the main application – application-wide singleton):

Live demoSource code (LICENSE)

This is something I recently discovered during some tests and it’s something to consider when using the singleton design pattern inside Flex modules. First of all, here is an example implementation of the singleton pattern in Flex:

public class SingletonClass
{
	protected static var _instance: SingletonClass = null;

	public static function getInstance(): SingletonClass
	{
		if (_instance == null)
		{
			_instance = new SingletonClass();
		}

		return _instance;
	}
}

This class can be simply used to get the singleton instance with a line like this:

var theInstance: SingletonClass = SingletonClass.getInstance();

This is what we already knew. But what could happen if we try to get a singleton instance inside a Flex module? It could happen that our SingletonClass represents in fact a singleton in two different ways: application-wide singleton or module-wide singleton. In the application-wide case, the instance of SingletonClass is unique across the entire application that uses some Flex modules, while in the module-wide case, the instance in unique only inside a single module, but different across different modules. This is really important to know because we may have undesired behaviors of our application and it could be difficult to figure out what happens without knowing this.

Now, the question is: how do we know when we have an application-wide singleton instead of a module-wide singleton? You may have guessed the answer from the examples links at the beginning of this post. We have an application-wide when the SingletonClass is imported in the main application while we have a module-wide singleton when the SingletonClass is used only inside the modules and never imported in the main application. An example will be useful to clarify everything.

To test the SingletonClass instances creation we need to modify a little bit the original class that we saw earlier.

public class SingletonClass
{
	protected static var _instance: SingletonClass = null;

	public static function getInstance(): SingletonClass
	{
		if (_instance == null)
		{
			_instance = new SingletonClass();

			// Generate a random instance ID
			_instance._instanceID = Math.round(Math.random() * 100);
		}

		return _instance;
	}

	protected var _instanceID: Number = NaN;

	public function get instanceID(): Number
	{
		return _instanceID;
	}
}

Each time a new instance of SingletonClass is created, we generate a random ID so we can identify it easily during our tests. A module in the test applications will look like this:

Here we provide a couple of buttons to invoke two times the getInstance function of the SingletonClass and save the ID of the instance returned by the function. This is simply to show that in fact multiple invocations of the getInstance function return the same instance, so the SingletonClass is working properly.

In the example 1 we don’t import the SingletonClass so the main application looks very simple:

To try it, just push the buttons in the different modules and you’ll see that the IDs of the instances are different. Now let’s take a look at the example 2. Here we actually do the same thing that we do in the modules, so we use the getInstance function to obtain instances of the SingletonClass hence the type is imported also in the main application.

Pushing all the buttons, you can verify that the instance ID is always the same both in the main application and the modules. This is really important to know every time you work with the singleton pattern and the modules.

Reducing Flex compilation time with an assets module

Andrea Bresolin — Sun, 28 Feb 2010 21:37:59 +0000

Example 1 (normal embeds):

Live demoSource code (LICENSE)

Example 2 (assets module):

Live demoSource code (LICENSE)

Some time ago one of my coworkers pointed me to a blog post that was giving suggestions to reduce the compilation time of a Flex project. Since we had long compilation times for our project at work, I decided to give it a try. The option that I chose was putting all the embeds inside a Flex module instead of embedding the assets directly inside each single source file. So, before testing the solution on the big project, I prepared a couple of small sample applications to test the difference and see if it was worth trying.

First of all, let’s briefly talk about the problem. Flex compiler can become slow if it has to embed a lot of assets in the application. This can be an issue if the application is particularly big. It seems that even if you change a single source file, the assets have to be embedded again to recompile everything. So, how can we avoid this? Using an assets module, and I’m going to call this module AssetsModule (quite straightforward).

In a standard application, when you want to embed an asset you have something like this:

With the usage of an assets module, you will have something like this:

To make our solution work, we need to make sure that there are no dependencies between the class that contains all the embeds in the module and the normal classes of the application. An interface is the right choice to achieve our goal.

Here are the fundamental components of our solution:

AssetsModule: the only purpose of this Flex module is to contain all the embedded assets of the application;
IAssetsModule: the interface that makes it possible to avoid dependencies between the application and the embedded assets;
ModulesManager: this manager class is responsible of loading the AssetsModule and providing access to it through the IAssetsModule interface.

The AssetsModule has a really simple structure. It’s just a collection of embedded assets. For every asset, a getter function is provided so it can be used in the application. We use getter functions instead of simple variables because we are implementing an interface, the IAssetsModule interface, so we must use functions.

The IAssetsModule interface lists all the available assets through a getter function for each one of them.

package com.devahead.modules
{
	public interface IAssetsModule
	{
		function get myimage1(): Class;
		function get myimage2(): Class;
	}
}

Now it’s time to take a look at the ModulesManager class. Since the assets are shared across all the classes of the application, it’s a singleton. So we have a getInstance method that creates an instance of the modules manager, if it has not already been created, then loads the module. The application’s classes can access the assets through the assets instance property of the modules manager. That property can also be used in curly brackets because it’s bindable and an event (assetsModuleChanged) is dispatched as soon as the module has been fully loaded.

package com.devahead.modules
{
	import flash.events.Event;
	import flash.events.EventDispatcher;

	import mx.controls.Alert;
	import mx.events.ModuleEvent;
	import mx.modules.ModuleLoader;

	public class ModulesManager extends EventDispatcher
	{
		protected static var _instance: ModulesManager = null;

		public static function getInstance(): ModulesManager
		{
			if (_instance == null)
			{
				_instance = new ModulesManager();

				_instance.loadAssetsModule();
			}

			return _instance;
		}

		protected var _assets: IAssetsModule = null;

		[Bindable("assetsModuleChanged")]
		public function get assets(): IAssetsModule
		{
			return _assets;
		}

		protected var _assetsModuleLoader: ModuleLoader = null;

		protected function loadAssetsModule(): void
		{
			if (_assetsModuleLoader == null)
			{
				_assetsModuleLoader = new ModuleLoader();
				_assetsModuleLoader.addEventListener(ModuleEvent.READY, onAssetsModuleReady);
				_assetsModuleLoader.addEventListener(ModuleEvent.ERROR, onAssetsModuleError);
				_assetsModuleLoader.loadModule("com/devahead/modules/AssetsModule.swf");
			}
		}

		protected function onAssetsModuleReady(event: ModuleEvent): void
		{
			_assets = (_assetsModuleLoader.child as IAssetsModule);

			dispatchEvent(new Event("assetsModuleChanged"));
		}

		protected function onAssetsModuleError(event: ModuleEvent): void
		{
			Alert.show("Error while loading AssetsModule.\n\n" + event.errorText, "Error");
		}
	}
}

Now you might be curious about the compilation performance improvements that we get using this solution. To test it, I made a simple application in two different versions, one with the assets module and one with the standard embeds spread all over the application’s classes. In each version, the application is always made up of 100 components and each of them uses 100 images. The difference is how the images are used. I’m not going to write the example source code here since you can download it through the link provided at the beginning of this post and since it’s quite repetitive, instead here I’m going to give the different performance results that I got using the described technique.

Here are the performance results with the example application:

	With clean (m:ss)	Without clean (m:ss)
Normal embeds	1:34	0:54
With AssetsModule	0:45	0:07

With clean means that the application has been built after cleaning the project in Eclipse (i.e. from scratch), while without clean means that I added only a space character in the main application mxml file and then built the project without cleaning it first. As you can see with the test projects, the difference is quite evident, especially when the AssetsModule doesn’t need to be rebuilt because we don’t need to clean the project. In that case, the assets don’t have to be embedded again and this allows to compile only the application’s classes.

Another important fact to note is that in the test project, the number of different embedded images is 100. With the normal embeds the same 100 images are embedded in each one of the 100 components used by the main file, while with the assets module, the 100 images are embedded only one time for all the different components. This means that with the AssetsModule we reduced the number of embeds from 1000 to 100 because we are reusing the same embedded asset across multiple application’s classes without needing to embed it again for each one of them.

At this point you could say: OK, it works great with the example application, but how does it work in a real world scenario? Since at the beginning of the post I wrote that I started looking into this subject because of the long compilation times we had for our project at work, I’ll show you some results that I got on that real project. It’s a big one (about 900 Flex source files, excluding external libraries). We use a few modules so the compilation times are still high also after refactoring it with the solution I described here, but let the numbers speak for themselves.

	With clean (m:ss)	Without clean (m:ss)
Normal embeds	7:58	1:07
With AssetsModule	7:09	0:58

As you can see, we had an improvement, but the compilation time without cleaning the project wasn’t reduced much. This could be due to the project specific dependencies tree and complexity. Anyway, we had a reduction of compilation time with the clean. Note that with the AssetsModule the number of embeds became 280, while before the refactoring we had 977 embeds.

Now it’s time to talk about the conclusions. This is my opinion after trying all of this. Using an assets module is potentially very convenient to reduce the compilation time, but it depends on the specific project. When you’re compiling the project from scratch, the improvements should be noticeable. Anyway, using an AssetsModule is convenient also because you’re organizing well all the assets of you application, avoiding duplicate embeds and having a single central location for all of them. So, I would suggest to always use an assets module since the beginning to avoid potential compilation performance problems in the future. What seems sure is that you’ve got nothing to loose.

Filtering the children of a Flex container

Andrea Bresolin — Tue, 05 Jan 2010 16:57:48 +0000

Live demoSource code (LICENSE)

In this post I’m going to show an utility function that I implemented some time ago. Its purpose is to filter the children of a Flex container. So, for example, let’s say that you want to have all the children of a specific container going deep throughout the entire children hierarchy, but you want to exclude some classes or instances from the search, then this function is for you. I use it to selectively enable or disable some components or to get the value of a specific property for them, but the function is generic enough to be used in many different situations.

The function is called getContainerChildren. Here is its source code:

package com.devahead.utils
{
	import mx.collections.ArrayCollection;
	import mx.core.Container;

	public class MiscUtils
	{
		/**
		 * Filters all the children of a container.
		 *
		 * @param container
		 *         Container of the children that have to be filtered.
		 * @param childrenClasses
		 *         Array of the classes that have to be kept while
		 *         filtering the children. If not specified, the type
		 *         of the children is not considered while filtering.
		 * @param excludedClasses
		 *         Array of the classes that have to be excluded.
		 *         The children must not belong to these types.
		 * @param excludedInstances
		 *         Array of the instances that have to be excluded.
		 *         The children must not be one of these instances.
		 * @param deepSearch
		 *         If true, specifies that the children must be
		 *         searched throughout the entire hierarchy util
		 *         there are no more children available for a
		 *         component. If false, only the children of the
		 *         container are considered and not their children.
		 * @param forceDeepSearchOnExcludedClasses
		 *         If true and also deepSearch is true, then the children
		 *         are searched also within the components that have been
		 *         excluded from the results because their type is among
		 *         the excludedClasses. If false, the children are never
		 *         searched within the excluded components. If a component
		 *         has been excluded because it's in excludedInstances, then
		 *         a deep search is never executed on it, even if it belongs
		 *         to an excluded class and forceDeepSearchOnExcludedClasses
		 *         is true.
		 * @param forceDeepSearchOnExcludedInstances
		 *         If true and also deepSearch is true, then the children
		 *         are searched also within the components that have been
		 *         excluded from the results because they are among
		 *         the excludedInstances. If false, the children are never
		 *         searched within the excluded components.
		 * @param resultArray
		 *         Array used to store the children found in the recursive
		 *         calls. It should be left null when the function is called
		 *         externally (not recursively).
		 * @return Array of the container's children filtered according
		 *         to the specified parameters.
		 */
		public static function getContainerChildren(container: Container,
			childrenClasses: Array = null, excludedClasses: Array = null,
			excludedInstances: Array = null, deepSearch: Boolean = false,
			forceDeepSearchOnExcludedClasses: Boolean = false,
			forceDeepSearchOnExcludedInstances: Boolean = false,
			resultArray: ArrayCollection = null): ArrayCollection
		{
			var componentsArray: ArrayCollection = (resultArray != null ?
				resultArray : new ArrayCollection());

			if (container != null)
			{
				// Check all the container's children
				for (var i: int = 0; i < container.numChildren; i++)
				{
					var currChild: Object = container.getChildAt(i);

					var isCorrectComponent: Boolean = false;

					// Check if the type of the current child is correct
					if (childrenClasses == null || childrenClasses.length == 0)
					{
						isCorrectComponent = true;
					}
					else
					{
						for each (var currClass: Class in childrenClasses)
						{
							if (currChild is currClass)
							{
								isCorrectComponent = true;
								break;
							}
						}
					}

					// Check if the current child is an instance that has to be excluded
					var excludedAsInstance: Boolean = false;

					if (excludedInstances != null && excludedInstances.length > 0)
					{
						for each (var currExcInst: Object in excludedInstances)
						{
							if (currChild == currExcInst)
							{
								isCorrectComponent = false;
								excludedAsInstance = true;
								break;
							}
						}
					}

					// Check if the current child's type has to be excluded
					var excludedAsClass: Boolean = false;

					if (excludedClasses != null && excludedClasses.length > 0)
					{
						for each (var currExcClass: Class in excludedClasses)
						{
							if (currChild is currExcClass)
							{
								isCorrectComponent = false;
								excludedAsClass = true;
								break;
							}
						}
					}

					// Check if I must use a deep search
					var mustGoDeeper: Boolean = (
						(excludedAsInstance && forceDeepSearchOnExcludedInstances) ||
						(!excludedAsInstance && excludedAsClass && forceDeepSearchOnExcludedClasses));

					if (deepSearch && (currChild is Container) &&
						((!excludedAsInstance && !excludedAsClass) || mustGoDeeper))
					{
						// Get all the children of the current child through a recursive call.
						//
						// NOTE: I don't need to care about the result value of the recursive
						//       call because the children found are directly inserted into the
						//       componentsArray variable.
						getContainerChildren(currChild as Container, childrenClasses,
							excludedClasses, excludedInstances, deepSearch,
							forceDeepSearchOnExcludedClasses, forceDeepSearchOnExcludedInstances,
							componentsArray);
					}

					if (isCorrectComponent)
					{
						// Add the child to the result list
						componentsArray.addItem(currChild);
					}
				}
			}

			return componentsArray;
		}
	}
}

The function is recursive, so during every recursion all the children of a container are discovered and they are filtered according to the specified exclusion classes or instances. If we must go deeper to find other components, then another recursion step is executed.

Here is an example application. It shows some different ways to use the filtering function. For each filter, there are a button and a label next to it showing the parameters of the function. When a button is pressed, all the resulting components are written in the text area under the buttons. For each component you can see its ID and the path in the hierarchy to reach it.



	
		 0)
				{
					for each (var item: UIComponent in result)
					{
						resultArea.text += item.id + " (" + item.toString() + ")\n";
					}
				}
			}

			protected function getAllTextInput(): void
			{
				printResult(MiscUtils.getContainerChildren(pan1, [TextInput], null, null, true));
			}

			protected function getAllComboBox(): void
			{
				printResult(MiscUtils.getContainerChildren(pan1, [ComboBox], null, null, true));
			}

			protected function getAllLabel(): void
			{
				printResult(MiscUtils.getContainerChildren(pan1, [Label], null, null, true));
			}

			protected function getAllTextInputNotVbox1(): void
			{
				printResult(MiscUtils.getContainerChildren(pan1, [TextInput],
					null, [vbox1], true));
			}

			protected function getAllComboBoxNotPanel(): void
			{
				printResult(MiscUtils.getContainerChildren(pan1, [ComboBox],
					[Panel], null, true));
			}

			protected function getAllUIComponentNotComboBox(): void
			{
				printResult(MiscUtils.getContainerChildren(pan1, [UIComponent],
					[ComboBox], null, true));
			}

			protected function getAllNotVbox1OKChildren(): void
			{
				printResult(MiscUtils.getContainerChildren(pan1, null,
					null, [vbox1], true, false, true));
			}

			protected function getAllNotPanelVBoxOKChildren(): void
			{
				printResult(MiscUtils.getContainerChildren(pan1, null,
					[Panel, VBox], null, true, true));
			}

			protected function getTextInputOnlyInVbox1(): void
			{
				printResult(MiscUtils.getContainerChildren(vbox1, [TextInput]));
			}

			protected function getTextInputOnlyInPan1(): void
			{
				printResult(MiscUtils.getContainerChildren(pan1, [TextInput]));
			}

			protected function getAllPan1(): void
			{
				printResult(MiscUtils.getContainerChildren(pan1));
			}

			protected function getAllPan1DeepSearch(): void
			{
				printResult(MiscUtils.getContainerChildren(pan1, null, null, null, true));
			}
		]]>
	

	
		
			
				
				
				
			

			
			

			
				
				
			
		

		
			
				
					getContainerChildren(
  container: Container,
  childrenClasses: Array = null,
  excludedClasses: Array = null,
  excludedInstances: Array = null,
  deepSearch: Boolean = false,
  forceDeepSearchOnExcludedClasses: Boolean = false,
  forceDeepSearchOnExcludedInstances: Boolean = false,
  resultArray: ArrayCollection = null): ArrayCollection
				]]>

I’m not going to explain each different usage because the function is really generic, so it’s up to you to decide if it suits your needs or not. I just hope it helps somebody.

Getting all the popups in a Flex application

Andrea Bresolin — Sat, 19 Dec 2009 16:32:13 +0000

Live demoSource code (LICENSE)

In Flex, you can create popups easily, but what if you want to get all of them after they’ve already been created? You could keep track of every created popup using a customized function that puts every single instance in an array for example, but what if you’re using a Flex component that simply creates popups in its own way and you cannot keep track of what it creates? Here I’m going to provide a possible solution.

After some debugging, I found out that Flex puts all the popups among the rawChildren in the application’s SystemManager. This is where we can find them. So now that we know where to look, we need a way to distinguish the children that are popups from those that are not (rawChildren does not contain only popups). If we use only components whose base class is the standard UIComponent class (I think this is the case most of the times), there’s an easy way to know if an instance is a popup or not: the isPopUp property of UIComponent.

Whenever we create a new popup that extends UIComponent, the PopUpManager sets the isPopUp property to true. So, all we need to do is cycle through the application’s systemManager.rawChildren and check whether we find an UIComponent instance whose isPopUp property is true. In that case, we’ve got an application’s popup.

To demonstrate the concept, I’ve implemented the PopUpUtils class. It simply allows you to get all the popups inside an application instance, to discover if there are visible popups and to close all the popups. Let’s take a look at it.

package com.devahead.utils
{
	import flash.display.DisplayObject;

	import mx.collections.ArrayCollection;
	import mx.core.Application;
	import mx.core.IChildList;
	import mx.core.UIComponent;
	import mx.managers.PopUpManager;

	public class PopUpUtils
	{
		/**
		 * Returns all the popups inside an application. Only the popups whose base
		 * class is UIComponent are returned.
		 *
		 * @param applicationInstance
		 *   Application instance. If null, Application.application is used.
		 * @param onlyVisible
		 *   If true, considers only the visible popups.
		 * @return All the popups in the specified application.
		 */
		public static function getAllPopups(applicationInstance: Object = null,
			onlyVisible: Boolean = false): ArrayCollection
		{
			var result: ArrayCollection = new ArrayCollection();

			if (applicationInstance == null)
			{
				applicationInstance = Application.application;
			}

			var rawChildren: IChildList = applicationInstance.systemManager.rawChildren;

			for (var i: int = 0; i < rawChildren.numChildren; i++)
			{
				var currRawChild: DisplayObject = rawChildren.getChildAt(i);

				if ((currRawChild is UIComponent) && UIComponent(currRawChild).isPopUp)
				{
					if (!onlyVisible || UIComponent(currRawChild).visible)
					{
						result.addItem(currRawChild);
					}
				}
			}

			return result;
		}

		/**
		 * Checks if an application has visible popups. Only the popups whose base
		 * class is UIComponent are considered.
		 *
		 * @param applicationInstance
		 *   Application instance. If null, Application.application is used.
		 * @return True if there are visible popups in the specified application,
		 *         false otherwise.
		 */
		public static function hasVisiblePopups(applicationInstance: Object = null): Boolean
		{
			if (applicationInstance == null)
			{
				applicationInstance = Application.application;
			}

			var rawChildren: IChildList = applicationInstance.systemManager.rawChildren;

			for (var i: int = 0; i < rawChildren.numChildren; i++)
			{
				var currRawChild: DisplayObject = rawChildren.getChildAt(i);

				if ((currRawChild is UIComponent) && UIComponent(currRawChild).isPopUp
					&& UIComponent(currRawChild).visible)
				{
					return true;
				}
			}

			return false;
		}

		/**
		 * Closes all the popups belonging to an application. Only the popups
		 * whose base class is UIComponent are considered.
		 *
		 * @param applicationInstance
		 *   Application instance. If null, Application.application is used.
		 * @return The list of the closed popups.
		 */
		public static function closeAllPopups(applicationInstance: Object = null): ArrayCollection
		{
			var allPopups: ArrayCollection = getAllPopups(applicationInstance);

			for each (var currPopup: UIComponent in allPopups)
			{
				PopUpManager.removePopUp(currPopup);
			}

			return allPopups;
		}
	}
}

As you can see, the getAllPopups function returns all the popups inside an appplication instance. If the instance is not specified, then the current application is used (the one in which the function is called). The hasVisiblePopups is basically the same, except the fact that it stops executing as soon as a visible popup is found. The closeAllPopups function closes all the popups in the application.

Here is an example on how the PopUpUtils class can be used.

The example application creates 10 popups on startup, then you can create additional popups, you can check if there are visible popups or you can close them all. I used a standard Panel to create popups instances. The X_OFFSET is useful only to avoid having the popups over the buttons, just for usability.

Dynamic ObjectProxy

Andrea Bresolin — Sun, 06 Dec 2009 17:07:25 +0000

Live demoSource code (LICENSE)

The problem: I’ve got a Flex class with all its properties well defined. It’s good for me, it has all the properties I need to represent correctly the model, but sometimes I wish I had a few more properties to use it in some contexts. These additional properties are not strictly related to the model I want to represent, so I don’t want to add them to the class, but I need them to easily integrate with Flex components functionalities for user interaction.

The solution: DynaObjectProxy!

Before looking through the source code of DynaObjectProxy, let’s talk briefly about what it does. Basically, it’s a sort of ObjectProxy, but it extends its functionalities.

With ObjectProxy you can wrap a class instance and access to its properties through the proxy

// MyClass contains the property "prop1"
var myClassInstance: MyClass = new MyClass();
myClassInstance.prop1 = "The value";

var myProxy: ObjectProxy = new ObjectProxy(myClassInstance);

trace(myProxy.prop1); // Outputs "The value"

but you cannot dynamically create new properties in the ObjectProxy instance

trace(myProxy.prop2); // ERROR! "prop2" doesn't exist in MyClass

Otherwise, you can create an ObjectProxy instance without wrapping a class instance and in this case you actually can create new properties in the ObjectProxy

var myProxy: ObjectProxy = new ObjectProxy();
myProxy.prop2 = "The property value";

trace(myProxy.prop2); // Outputs "The property value"

What if I would like to have both the functionalities? DynaObjectProxy allows exactly this: you can both wrap a class instance and create new properties keeping all the new properties bindable at the same time.

Now we can start looking through the DynaObjectProxy source code and later we’ll see how it can be used with an example.

package com.devahead.utils
{
	import flash.events.Event;
	import flash.events.EventDispatcher;
	import flash.events.IEventDispatcher;
	import flash.utils.Proxy;
	import flash.utils.describeType;
	import flash.utils.flash_proxy;
	import flash.utils.getQualifiedClassName;

	import mx.events.PropertyChangeEvent;
	import mx.utils.ObjectProxy;

	[Bindable("propertyChange")]
	public dynamic class DynaObjectProxy extends Proxy implements IEventDispatcher
	{
		/**
		 * EventDispatcher used by the proxy to dispatch events.
		 */
		protected var _dispatcher: EventDispatcher;

		/**
		 * Object managed by the proxy.
		 */
		protected var _managedObj: Object = null;

		/**
		 * ObjectProxy used to managed the _managedObj.
		 */
		protected var _managedObjProxy: ObjectProxy = null;

		/**
		 * ObjectProxy used to allow the dynamic creation of
		 * new bindable properties.
		 */
		protected var _dynamicObjProxy: ObjectProxy = null;

		/**
		 * List of the properties belonging to the proxy. It contains, in
		 * alphabetical order, the list of all the properties beloging to
		 * the _managedObj plus those created dynamically on the _dynamicObjProxy.
		 */
		protected var _propertyList: Array = null;

		/**
		 * Constructor.
		 *
		 * @param managedObj
		 *         Object managed by the proxy.
		 */
		public function DynaObjectProxy(managedObj: Object = null)
		{
			super();

			_managedObj = managedObj;

			_propertyList = new Array();

			// Create the ObjectProxy to manage the managedObj and the one to manage
			// the dynamically created properties.
			_managedObjProxy = (managedObj != null ?
				new ObjectProxy(managedObj) :
				new ObjectProxy());

			_dynamicObjProxy = new ObjectProxy();

			// Create the events dispatcher and attach the appropriate listeners
			// to both the ObjectProxy.
			_dispatcher = new EventDispatcher(this);
			_managedObjProxy.addEventListener(PropertyChangeEvent.PROPERTY_CHANGE, onPropertyChangeEvent);
			_dynamicObjProxy.addEventListener(PropertyChangeEvent.PROPERTY_CHANGE, onPropertyChangeEvent);
		}

		/**
		 * Returns all the properties beloging to an object.
		 *
		 * @param obj
		 *         Object.
		 * @return All the object's properties.
		 */
		public static function getObjectProperties(obj: Object): Array
		{
			var result: Array = new Array();

			var objClassInfo: XML = describeType(obj);

			for each (var v: XML in objClassInfo..accessor)
			{
				result.push(String(v.@name));
			}

			return result;
		}

		/**
		 * Returns the original instance of the object managed internally
		 * by the proxy.
		 */
		public function get managedObj(): Object
		{
			return _managedObj;
		}

		/**
		 * Update the list of all the properties available in the proxy (those
		 * visible from outside the proxy by its users).
		 * The list contains, in alphabetical order, the set of the properties
		 * in the managedObj and those in the dynamicObj.
		 */
		protected function updatePropertyList(): void
		{
			var newPropertyList: Array = new Array();

			if (_managedObj != null)
			{
				if (getQualifiedClassName(_managedObj) == "Object")
				{
					// This is an Object so I can get all of its properties
					// through a cycle.
					for (var managedPropName: String in _managedObj)
					{
						newPropertyList.push(managedPropName);
					}
				}
				else
				{
					// This is likely to be a typed object so I get all its properties
					// through the getObjectProperties function.
					newPropertyList = getObjectProperties(_managedObj);
				}
			}

			// Add to the list also the properties created dynamically in the
			// dynamicObj.
			for (var dynamicPropName: String in _dynamicObjProxy)
			{
				newPropertyList.push(dynamicPropName);
			}

			// Update the _propertyList and sort it in alphabetical order.
			_propertyList = newPropertyList;
			_propertyList.sort();
		}

		/**
		 * Handler for the properties changes in the managedObj and the dynamicObj.
		 * This function dispatches again the PropertyChangeEvent as if it was
		 * generated by this proxy instead of the internal ObjectProxy used for
		 * managedObj and dynamicObj.
		 *
		 * @param event
		 *         Event.
		 */
		protected function onPropertyChangeEvent(event: PropertyChangeEvent): void
		{
			var newEvent: PropertyChangeEvent = new PropertyChangeEvent(event.type,
				event.bubbles, event.cancelable, event.kind, event.property,
				event.oldValue, event.newValue, this);

			dispatchEvent(newEvent);
		}

		// *** Implementation of Proxy methods ***

		override flash_proxy function getProperty(name: *): *
		{
			// If the property is in the managedObj then I return its value,
			// otherwise I use property's value from the dynamicObj.
			return (_managedObjProxy.hasOwnProperty(name) ?
				_managedObjProxy[name] :
				_dynamicObjProxy[name]);
		}

		override flash_proxy function callProperty(name: *, ... rest): *
		{
			// If the function is in the managedObj then I call it,
			// otherwise I call the function in the dynamicObj.
			return (_managedObjProxy.hasOwnProperty(name) ?
				_managedObjProxy[name].apply(_managedObjProxy, rest) :
				_dynamicObjProxy[name].apply(_dynamicObjProxy, rest));
		}

		override flash_proxy function deleteProperty(name: *): Boolean
		{
			// I cannot delete a property from the managedObj, so I delete it directly
			// from the dynamicObj.
			return (_dynamicObjProxy.hasOwnProperty(name) ?
				delete _dynamicObjProxy[name] : false);
		}

		override flash_proxy function hasProperty(name: *): Boolean
		{
			// A property exists if it's inside the managedObj or the dynamicObj
			return (_managedObjProxy.hasOwnProperty(name) ||
				_dynamicObjProxy.hasOwnProperty(name));
		}

		override flash_proxy function nextName(index: int): String
		{
			return _propertyList[index - 1];
		}

		override flash_proxy function nextNameIndex(index: int): int
		{
			if (index == 0)
			{
				// I update the list of alla the properties available in the proxy,
				// those from the managedObj and those dynamically created in the
				// dynamicObj.
				updatePropertyList();
			}

			if (index < _propertyList.length)
			{
				return index + 1;
			}
			else
			{
				return 0;
			}
		}

		override flash_proxy function nextValue(index: int): *
		{
			return flash_proxy::getProperty(_propertyList[index - 1]);
		}

		override flash_proxy function setProperty(name: *, value: *): void
		{
			// If the property is in the managedObj then I set its value, otherwise
			// I set the value on the dynamicObj (the property is created if it
			// doesn't already exist).
			if (_managedObjProxy.hasOwnProperty(name))
			{
				_managedObjProxy[name] = value;
			}
			else
			{
				_dynamicObjProxy[name] = value;
			}
		}

		// *** IEventDispatcher implementation ***

		public function addEventListener(type: String, listener: Function,
			useCapture: Boolean = false, priority: int = 0,
			useWeakReference: Boolean = false): void
		{
			_dispatcher.addEventListener(type, listener, useCapture, priority,
				useWeakReference);
		}

		public function removeEventListener(type: String, listener: Function,
			useCapture: Boolean = false): void
		{
			_dispatcher.removeEventListener(type, listener, useCapture);
		}

		public function dispatchEvent(event: Event): Boolean
		{
			return _dispatcher.dispatchEvent(event);
		}

		public function hasEventListener(type: String): Boolean
		{
			return _dispatcher.hasEventListener(type);
		}

		public function willTrigger(type: String): Boolean
		{
			return _dispatcher.willTrigger(type);
		}
	}
}

The constructor accepts a managedObj argument. That’s the class instance that can be wrapped by the proxy and we call it the managed object. Internally, two different proxies are created, the managedObjProxy and the dynamicObjProxy. The first one is useful to intercept the events related to the managed object, while the second one is used to create new properties and get the events for them as well. Whenever a property is read or written on a DynaObjectProxy instance, the implementation looks for it in the managed object instance through the managedObjProxy and if it’s not able to find it, then it looks inside the dynamicObjProxy. If the property is still not available, if it has to be read, then a null value is returned, otherwise it is created inside the dynamicObjProxy. The list of all the properties in a DynaObjectProxy instance is the union of both the properties available in the managedObjProxy and the dynamicObjProxy. All the events dispatched by the proxy are in fact dispatched through an internal EventDispatcher instance because we cannot extend that class as we are already extending the Proxy class and ActionScript 3 doesn’t support multiple inheritance.

So now we can go on with an example application. Let’s say we want the user to select some fruits that he likes from a list and we want him to be able to specify also their quantity. So a Fruit class could look like this:

package com.devahead.model
{
	[Bindable]
	public class Fruit
	{
		public var name: String;
		public var quantity: int;

		public function Fruit(name: String, quantity: int = 0)
		{
			this.name = name;
			this.quantity = quantity;
		}
	}
}

What is important, to identify a fruit in our model, are its name and its quantity. But in this way, we don’t have a property to specify if a fruit is selected or not in a grid, we don’t want to include it in our model because it’s only important for user interaction. This is especially true if you think about the Fruit class as a representation of a record in a database on the server side. In a FRUITS table the only things that have a meaning are the name and the quantity. It’s meaningless to know if a user selected a fruit on the client side interface because we store only the selected fruits in the database.

In the example below, we are able to dynamically add a isFruitSelected property to all the Fruit instances through the DynaObjectProxy while keeping at the same time the original typed instances. This allows us to put all our DynaObjectProxy in the grid’s dataProvider and the user is able to select the fruits through a checkbox and edit their quantity. When the user is happy with his choices, we are able to get all the selected fruits and we could send them to the sever to store them in a database.

If you use something like BlazeDS or web services, you know how much is important to keep the server side and the client side model classes synchronized to easily send them back and forth between the client and the server. This is were DynaObjectProxy turns out to be very useful. You can add temporary properties quickly while keeping the original instances intact. I’ve been using this technique for a very long time and it proved to be useful for me.

Multiple validators on a single component

Andrea Bresolin — Sun, 29 Nov 2009 17:39:29 +0000

Live demoSource code (LICENSE)

Sometimes, while using validators in Flex, i needed to have more than one validator connected to a single component, e.g. a TextInput. So, at the beginnig, I tried the naive approach, just create multiple validators and assign to all of them the same source and the same property to validate. After a few tests, I quickly realized that in Flex, a single component is meant to have only one validator associated to it. This is a problem in some situations because I have different validatiors that already do what I need and I just want my component to be considered valid only when all the validators are valid. So I investigated more in depth taking a look at the Flex SDK source code and I realized that it’s by design that I simply cannot do it easily. What usually happens is that it’s the last triggered validator that decides if a component is valid or not. We know that everything is based on events dispatching in Flex and that we cannot know the order in which events reach a particular component, so we also don’t know what will be the last validator to be triggered for a component. This is especially evident when a form is quite complex and contains a lot of fields that have to be validated.

What can we do to solve this problem? Here I’m going to explain what I did about a couple of years ago, when I faced this problem. There are rumors that there should be something available in the next version of the Flex SDK (version 4) that solves the problem, but meanwhile, we can still solve it using the manager class I developed. I’ve been using it up until now and it always worked as expected without problems. Basically, the class takes care of all the validation events coming from different validators and makes sure that the right validity state is preserved for the component that has been validated. It doesn’t matter when the events are dispatched, it’s not important, the final result is:

a component is considered VALID if all the validators say that it’s valid;
a component is considered INVALID if at least one of the validators says that it’s not valid.

Let’s take a look at the source code now. The ComponentValidationManager is the class that makes it possible to have multiple validators on a single component. We’ll call the component that has to be validated as the managed component and the validators attached to it the managed validators.

package com.devahead.utils
{
	import mx.core.UIComponent;
	import mx.validators.Validator;
	import mx.events.ValidationResultEvent;
	import mx.collections.ArrayCollection;
	import mx.events.FlexEvent;

	public class ComponentValidationManager
	{
		protected var _isManagerValid: Boolean = true;
		protected var _managedComponent: UIComponent;
		protected var _managedValidators: Array;
		protected var _isValidationManagementEnabled: Boolean = false;

		// Array of the validators in INVALID state
		protected var _invalidValidators: ArrayCollection = new ArrayCollection();
		protected var _invalidValidationMessages: ArrayCollection = new ArrayCollection();

		/**
		 * Constructor.
		 *
		 * @param managedComponent
		 *   UIComponent managed by the ComponentValidationManager.
		 *   If must not be NULL.
		 * @param managedValidators
		 *   Array of the validators that have to be managed. They must
		 *   all be in VALID state at this time.
		 */
		public function ComponentValidationManager(managedComponent: UIComponent,
			managedValidators: Array)
		{
			// NOTE: I expect that all the managedValidators are VALID at this time

			_managedComponent = managedComponent;
			_managedValidators = managedValidators;

			if (_managedComponent != null && _managedValidators != null &&
				_managedValidators.length > 0)
			{
				for (var i: int = 0; i < _managedValidators.length; i++)
				{
					if (_managedValidators[i] == null || !(_managedValidators[i] is Validator))
					{
						// NULL values or components that are not subclasses of
						// mx.validators.Validator are not allowed.
						_isManagerValid = false;
						break;
					}
				}

				if (_isManagerValid)
				{
					enableValidationManagement();
				}
			}
		}

		/**
		 * Tells if the ComponentValidationManager is valid.
		 *
		 * @return "True" if the manager is valid (i.e. constructors arguments
		 *         where correct).
		 */
		public function get isManagerValid(): Boolean
		{
			return _isManagerValid;
		}

		/**
		 * Managed component.
		 */
		public function get managedComponent(): UIComponent
		{
			return _managedComponent;
		}

		/**
		 * Managed validators.
		 */
		public function get managedValidators(): Array
		{
			return _managedValidators;
		}

		/**
		 * "True" if the validation management is enabled.
		 */
		public function get isValidationManagementEnabled(): Boolean
		{
			return _isValidationManagementEnabled;
		}

		/**
		 * Enables validation management.
		 */
		public function enableValidationManagement(): void
		{
			if (!_isValidationManagementEnabled)
			{
				// Add the listeners for "VALID" and "INVALID" events generated by
				// the managed validators.
				for each (var v: Validator in _managedValidators)
				{
					v.addEventListener(ValidationResultEvent.VALID, onValidatorValidationEvent);
					v.addEventListener(ValidationResultEvent.INVALID, onValidatorValidationEvent);
				}

				_managedComponent.addEventListener(FlexEvent.VALID, onComponentValidationEvent);
				_managedComponent.addEventListener(FlexEvent.INVALID, onComponentValidationEvent);

				_isValidationManagementEnabled = true;
			}
		}

		/**
		 * Disables validation management.
		 */
		public function disableValidationManagement(): void
		{
			if (_isValidationManagementEnabled)
			{
				_managedComponent.removeEventListener(FlexEvent.INVALID, onComponentValidationEvent);
				_managedComponent.removeEventListener(FlexEvent.VALID, onComponentValidationEvent);

				// Remove the listeners for "VALID" and "INVALID" events generated by
				// the managed validators.
				for each (var v: Validator in _managedValidators)
				{
					v.removeEventListener(ValidationResultEvent.VALID, onValidatorValidationEvent);
					v.removeEventListener(ValidationResultEvent.INVALID, onValidatorValidationEvent);
				}

				_invalidValidators.removeAll();
				_invalidValidationMessages.removeAll();

				_isValidationManagementEnabled = false;
			}
		}

		/**
		 * The managed component has been judged VALID by a validator, so we must
		 * update its state.
		 *
		 * @param validatorInstance
		 *   Validator that judged the managed component as VALID.
		 */
		protected function updateManagedComponentValidState(validatorInstance: Validator): void
		{
			var itemIndex: int = _invalidValidators.getItemIndex(validatorInstance);

			if (itemIndex != -1)
			{
				// Remove the validator from the INVALID list
				_invalidValidators.removeItemAt(itemIndex);

				// Remove also the corresponding validation message
				_invalidValidationMessages.removeItemAt(itemIndex);

				if (_invalidValidators.length == 0)
				{
					// Restore the normal state of the managed component (now it's valid)
					_managedComponent.errorString = null;

					if (_managedComponent.focusManager != null &&
						_managedComponent.focusManager.getFocus() == _managedComponent)
					{
						// The managed component has the focus so we must also
						// draw the border.
						_managedComponent.drawFocus(true);
					}
				}
				else
				{
					// The managed component is still INVALID and due to the fact that
					// the error message previously generated by the validator was
					// removed, we must update the message that should now be displayed
					// for the managed component.
					updateManagedComponentInvalidState();
				}
			}
		}

		/**
		 * The managed component has been judged INVALID by a validator, so we must
		 * update its state.
		 *
		 * @param validatorInstance
		 *   Validator that judged the managed component as INVALID.
		 */
		protected function updateManagedComponentInvalidState(
			validatorInstance: Validator = null, validationMessage: String = ""): void
		{
			var isValidationMessageChanged: Boolean = false;

			if (validatorInstance != null)
			{
				if (!_invalidValidators.contains(validatorInstance))
				{
					// Add the validator the the INVALID list
					_invalidValidators.addItem(validatorInstance);

					// Add the corresponding validation message
					_invalidValidationMessages.addItem(validationMessage);

					isValidationMessageChanged = true;
				}
				else
				{
					// The validation message could have changed, so we update it
					// if necessary.
					var oldValidationMessage: String = String(_invalidValidationMessages.getItemAt(
						_invalidValidators.getItemIndex(validatorInstance)));

					if (oldValidationMessage != validationMessage)
					{
						_invalidValidationMessages.setItemAt(validationMessage,
							_invalidValidators.getItemIndex(validatorInstance));

						isValidationMessageChanged = true;
					}
				}
			}
			else
			{
				if (_invalidValidators.length > 0)
				{
					// We force the update of the INVALID state for the managed component
					isValidationMessageChanged = true;
				}
			}

			if (isValidationMessageChanged)
			{
				// We graphically display the error on the managed component

				// We prepare the error message taking into account all those
				// returned by the managed validators that are in the INVALID state.
				var errorMessage: String = "";

				for each (var msg: String in _invalidValidationMessages)
				{
					if (errorMessage != "")
					{
						errorMessage += "\n";
					}

					errorMessage += msg;
				}

				_managedComponent.errorString = errorMessage;

				if (_managedComponent.focusManager != null &&
					_managedComponent.focusManager.getFocus() == _managedComponent)
				{
					// The managed component has the focus so we must also draw the border
					_managedComponent.drawFocus(true);
				}
			}
		}

		/**
		 * Handler for the validation events coming from the managed component.
		 *
		 * @param event
		 *   Validation event.
		 */
		protected function onComponentValidationEvent(event: FlexEvent): void
		{
			if (event.target == _managedComponent)
			{
				// We check that the INVALID state is kept correctly for the managed
				// component if it is in fact INVALID (this is useful to avoid the
				// interference of the function "validationResultHandler" in
				// mx.core.UIComponent with the management made internally by
				// ComponentValidationManager).
				updateManagedComponentInvalidState();
			}
		}

		/**
		 * Handler for the validation events coming from the managed validators.
		 *
		 * @param event
		 *   Validation event.
		 */
		protected function onValidatorValidationEvent(event: ValidationResultEvent): void
		{
			if (event.type == ValidationResultEvent.VALID)
			{
				updateManagedComponentValidState(Validator(event.target));
			}
			else if (event.type == ValidationResultEvent.INVALID)
			{
				updateManagedComponentInvalidState(Validator(event.target), event.message);
			}
		}
	}
}

So, what does this class do? You create an instance of the class specifying which component you want to manage and all the validators that are connected to it, then the class attaches its handlers to catch the validation events and keeps the component updated setting its validation error message accordingly. The validation error message is created as the sequence of all the messages returned by the invalid validators. To better understand how to use ComponentValidationManager we can take a look at the following example.

In the example, there are a couple of TextInput components and each of them has a couple of validators attached, but only textInpu2 is managed by ComponentValidationManager. According to the validators, only strings made by exactly four characters should be considered valid. If you type something in textInput1 and you try to click the two buttons next to it, you’ll see different behaviors:

if only Validator A considers the string valid and you click Validate (A -> B), textInput1 will be displayed as INVALID because the last validation has been executed by Validator B, while if you click Validate (B -> A) the text field will be considered valid because the last validation has been executed by Validator A;
if only Validator B considers the string valid and you click Validate (B -> A), textInput1 will be displayed as INVALID because the last validation has been executed by Validator A, while if you click Validate (A -> B) the text field will be considered valid because the last validation has been executed by Validator B;
if both the validators consider the string valid, then there are no problems and textInput1 is displayed as VALID;
if both the validators consider the string invalid, then the validation error message displayed as a hint while moving over the text field with the mouse pointer will be the message returned by the last validator that executed the validation.

If you try to repeat the same tests with textInput2, you’ll see that the validity of the component is always kept in the correct state and also the validation error hint reflects the real state of the field. This happens thanks to ComponentValidationManager, so you don’t care when the validation occurs in different validators, you just connect them to your text field and everything is fine.

What we saw can be applied to every kind of UIComponent and every kind of validators. I hope this will be useful to somebody, for me it was. If you develop your own procedure to automatically create ComponentValidationManager instances for all the validators in a form, everything could become transparent to the developer. We’ll see in other posts something that can be useful to execute such a task.