I have been working on a Flex project for quite a few months now that is finally scheduled to go into production in the next week or so. However, there were a few features that the customer wanted me to add before we went into production.

First off let me say that this project is basically an employee relationship application that quickly shows how one employee is related in the corporate tree structure to their manager and everyone else above them. The application is also used as a lookup directory to find people within the company.

With that, the customer wanted the ability to see the user node in the tree selected after a search result was clicked in the datagrid. Keep in mind that the data for the tree is being pulled dynamically from a database and then appended to the appropriate node in the tree.

This didn’t sound too hard, until I racked my brain for two weeks trying to figure it out!! Turns out, it is not as easy as simply using some E4X to find the node I need and telling the tree to select that object (well it is, but it is all in the timing, according to Peter Ent).

Peter Ent shared with me that…

“…one thing to learn about the Flex Framework is timing. Often what properties are set on a component do not have immediate visual effect. The Flex Framework, to keep the amount of redrawing to a minimum, will set flags (perhaps you have seen invalidateProperties or invalidateDisplayList) to let the framework know that the visual display will need updating.

Sometimes you’ll want to make a function call on a component right after you set a property, but because setting the property doesn’t actually change anything, that function call may do nothing or lead to an error. So you can use callLater to queue up what you want to do once all of the properties have been set.”

As Peter said, the callLater() function (which is not talked about in any of my Flex books nor is it widely known) will basically queue up the method you want to perform on a display item. This will clear up a lot of the pesky display problems in Flex.

To use it simply say:

` public function someMethod():void { … callLater(myCoolMethod, [anyArgsIMayNeed]); … }

public function myCoolMethod(arg1:Object, arg2:Object):void { … myTree.selectedItem = arg1; … } `

That’s pretty much it!