Getting Started: Fluid UI with Flex
I got a customer request yesterday for a Flex example that allows one portion of the UI to be expanded or collapsed at runtime, and in which the surrounding components adjust accordingly to fit the new space made or removed by the change. The good news is that with the Flex layout managers, this type of functionality is easy to create. The bad news is that the customer couldn’t find an existing code sample for this functionality, so I figured it would be worth posting.
The specific example was one of a search mechanism that had two views - basic and advanced. When I thought of a search with basic and advanced views, I thought of the Macromedia Knowledge Base, and that’s the UI on which I based my example.
While setting the height of the advanced view directly would have been the easiest approach, and that is ultimately what is happening, what’s a rich internet application without a little richness? In this sample I’ve incorporated the use of effects to add a little flair to the expand and collapse functionality.
I go a little overboard in my customization of this code example. I could have tied the showEffect and hideEffect properties on the advanced search box to a declarative Resize effect (one defined using tags). When I did so however, the advanced options were visible behind the Link control until the effect was complete.
To address this visibility, I switched to a programmatic resize event where there’s more fine grained control over when things become visible and when they don’t. When expanding to show the advanced options, the application waits until the effect is finished to show the controls. When collapsing to hide the advanced options, the application immediately hide the controls so they don’t appear behind the Link control as they were when using the declarative approach.
In the end, the application gains performance benefits by waiting to show the controls, or to hide them immediately. Without this the application would have to calculate the visible area while calculating how the rest of the UI moves. I additionally set the clipContent property to false to keep the application from having to render or calculate a scroll bar for the advanced search controls.
Wouldn’t you know it, hiding portions of the UI during effects is straight out of the Tips and Techniques for Improving Client Application Performance article (wink). A Captivate example follows and the source is also available for download.