Flex Article

Building Flex Applications with Progressive Layout

You've just finished developing your killer Macromedia Flex app and are ready to deliver it to your users. However, you feel like it could use just a few finishing touches. One area you can look into improving is the initialization experience of your application.

By default, Flex will display the Loading progress bar while it initializes the application. Only after all of the components in the application have been initialized and laid out will Flex display any portion of the application. Using a concept called progressive layout, you can customize this experience.

In this article, I will explain how you can use progressive layout to force your content to display after it has been initialized, instead of waiting until the entire application has finished initializing. You can control the order in which your content is displayed. If you are using the WebService, HTTPService, or RemoteObject components, you can display the results of the request as they come back from the server. To add even more slickness to your application, I'll show you how to incorporate effects to the initializing experience.

Requirements

To complete this tutorial you will need to install the following software and files:

Macromedia Flex

• Try
• Buy

Macromedia Flash Player

• Download

Tutorials and sample files:

• prog_layout_samples.zip (ZIP, 4K )– unzip this file into your Flex server directory

Prerequisite knowledge:

Familiarity with Macromedia Flex and some experience building Flex applications. Ideally, you should have built at least one simple Flex application. If you haven't, see Creating Your First Flex Application by Robert Crooks.

Component Instantiation and Creation Policy

The Flex manual explains the component instantiation and creation policy in detail. View the "Applying Deferred Instantiation" section in the Developing Flex Applications manual for this information. I will briefly provide some context and background on component instantiation as it pertains to progressive layout.

When Flex first initializes the application, it performs a series of steps on each component and container. First, it loads all of the component's properties, applies them, and sets up the component's internal state. It then asks the component to measure how big it wishes to be. Next, the component or container is sized and positioned by its parent container. Finally, the component is displayed.

Developers have some control over when this instantiation process occurs. All containers have a creationPolicy property that dictates how the container should instantiate itself. In Flex 1.0 the possible values were all, auto, and none. For Flex 1.5, we've added a new value called queued.

• A value of all means that a container immediately creates its children.
• A value of auto, which is only relevant to navigators like TabNavigator and Accordion, means that a container creates its children when they are needed.
• A value of none means that the container doesn't create its own children. It would then be up to the developer to programmatically create that container's children.
• A value of queued means that the container's children are not immediately created. Instead, they are added to a creation queue. The application processes each item in the queue, one after another. After the item in the queue has been processed, it is displayed immediately. The application then processes the next item in the creation queue.

Page 1 of 6

Next Page

About the author