Using callLater vs. validateNow in Flex

For years, many Flex developers have known the secret to fixing many a UI problem was using either callLater() or validateNow() methods. Much to my surprise, some of these developers do not understand WHY these fix problems, what the difference is, and which method to use.

The Problem

So why do we need these functions? Well, in short, the flex framework doesn't do anything in the order you tell it and it doesn't do what you tell it to do when you tell it to. If you set a text's width and a text's style, they may not be applied in that order. And they will probably not be applied until a bunch of other stuff has happened either. When a programmer thinks something is done synchronously (one after the other) when they're actually being done according to the component when it "validates". It is important to note that this is not an issue with ActionScript 3, so much as an issue with the Flex Framework.

callLater vs. validateNow

callLater accepts two parameters. A function and some arguments for the function. This "function" gets queued to be called again at a later frame, hopefully after everything else has finished processing. I blogged about this before but I failed to mention the real difference between this solution and validateNow.

validateNow accepts no parameters and basically tells your component to just do its processing RIGHT NOW! So the difference is, instead of waiting and executing, like callLater, it just executes right now. From a programmer's perspective, this is a lot easier to do, however, it is not faster. It forces Flex to reprocess a bunch of stuff, whereas callLater just executes the code you wanted to execute anyway at a later time. If you want to use validateNow, consider that there are some more specific functions such as validateSize, validateProperties, and validateDisplayList. All 3 of these functions are called by validateNow.

Code vs. Code

The situation is that you want the width of some rendered text. After setting the text, you can not get the measuredwidth property because it will still be 0 until the component has validated.

CallLater Solution

var someText:Text = new Text();    
someText.text="testing";   
addChild(someText); 
trace("before: " + someText.measuredWidth);   
callLater(getWidth);  
public function getWidth():void{       	
	trace("after: " + someText.measuredWidth);  
}

validateNow Solution

var someText:Text = new Text();  
someText.text="testing";  
addChild(someText);  
trace("before: " + someText.measuredWidth);  
someText.validateNow(); //you should actually use validateSize() if you just want the measured width  
trace("after: " + someText.measuredWidth);

Hopefully this makes sense. In my opinion, it is generally better to use callLater as it won't cause any unneeded computation.

invalidate functions

Unless you are writing your own component you won't need to worry about invalidateSize, invalidateDisplayList, and invalidateProperties. These are basically "make dirty" functions that tell flex "this component needs to run a validate function." If for some reason, a component (perhaps a custom component?) is failing to calculate or display something, these functions are an efficient way to tell the component it needs to do some processing. The Flex framework uses these functions internally to avoid unnecessary executions of the validate functions mentioned above.