judah’s blog

If you are a Flex developer you need to know what this is. Knowing what validateNow() can mean the difference between making steady progress and being stuck in a rut scratching your head.

From the Flex Documentation:
validateNow validates and updates the properties and layout of the object and redraws it, if necessary. Processing properties that require substantial computation are normally not processed until the script finishes executing. For example setting the width property is delayed, because it may require recalculating the widths of the objects children or its parent. Delaying the processing prevents it from being repeated multiple times if the script sets the width property more than once. This method lets you manually override this behavior.

The key to this post:

What matters in this article is that if changes are not being applied to your component right away call validateNow() on the component or the parent component to immediately apply those changes. But remember, validateNow does nothing if the component is not on the display list. Every component and container has this method. If you are from the Flash world you already understand the correlation with the onEnterFrame event. This probably got you into using the callLater, the enterFrame event or the listening for a components updateComplete event in Flex. These are all hacks in your efforts to get updated data, the occasional exception being the update complete event.

There are times when you will ask Flex to do something and nothing will happen. You will set properties or get properties and it will appear nothing has changed. This is because Flex delays applying those changes until the next render frame. Since Flex runs on the Flash Player and the Flash Player has a specific method to process your application it devotes a slice of time for responding and processing your ActionScript code (actually compiled bytecode) and then another slice of time is used to render or draw and update the objects in the display to the screen. These time slices can stretch or shrink depending on different factors.

David Colleta explained it this way,
[There is a time between] ...when you set Application.disabled to false and when the Application’s commitProperties() is executed: the invalidateProperties() / commitProperties() cycle. As with many property setters in the Flex framework, calling the Application.enabled setter doesn’t actually disable the application immediately. Instead, a flag is set, invalidateProperties() is called, and then the next time into the scripting engine, commitProperties() is called by the framework. In the Application’s commitProperties() method, the flag is checked, and if appropriate, then the application is disabled.

The invalidateProperties()/commitProperties() cycle is a good thing: it ensures that all property changes to an object during a scripting engine call take place at the same time, and prevents lengthy or expensive operations from being toggled repeatedly during the call.

Since your component properties can change multiple times before the screen is updated Flex saves applying these changes until it's time to render the display. Not all changes or properties behave like this. Mainly it is the ones that cause a visual change.

Here is an example of a change not getting applied right away or in my case it was discarded when I reparented it:

In the above example you need to call validateNow on the parent of the component to apply the changes to the component rather than the component itself. That is because button1's position is bound to it's parent. Button1 is 25 pixels from the "top" of the container it is in.

I won't go into any more details on this but you can learn more about a components life cycle from the Effective UI's presentation found on AMP, http://www.onflex.org/ted/2008/08/360flex-15-sessions-posted.php. Sorry I do not have a link to the slides.

Additional examples of this phenomena are listed here, validateNow() on text fields and lists and datagrids.

This entry was posted on Sunday, September 7th, 2008 at 4:18 pm and is filed under AIR, Flex. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.