Building Flex Applications with Progressive Layout

Using Basic Progressive Layout

To use progressive layout, you need to set the creationPolicy property of your containers to queued. The containers in your application can have a mixture of creationPolicy values. The creation queue is not processed until every container that has a creationPolicy property value of all or auto has been instantiated and displayed.

Let's take a look at a simple example. (All examples can be found in the samples.zip download file listed in the "Requirements" section on the introductory page.) The following application consists of three panels, each containing a button (see Figure 1):

<?xml version="1.0" encoding="utf-8"?>
<!-- basicExample.mxml -->
<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml">

<mx:Panel creationPolicy="queued" width="25%" height="100">
    <mx:Button label="Button 1"/>
</mx:Panel>
<mx:Panel creationPolicy="queued" width="25%" height="100">
    <mx:Button label="Button 2"/>
</mx:Panel>
<mx:Panel creationPolicy="queued" width="25%" height="100">
    <mx:Button label="Button 3"/>
</mx:Panel>

</mx:Application>

Figure 1. Using basic progressive layout (creation order shown in red)

The first thing you notice is that while the creationPolicy property is always applied to containers, not to components, we defer the instantiation of the container's children, not the containers themselves. When you run the application, the three panels (the containers) appear together at first. Then the children of the panels (Button 1, Button 2, and Button 3) appear, one after another (noted in red in Figure 1).

Note that the panels have been assigned values for their widths and heights. Normally a container sizes itself to fit all of its children. But with progressive layout, the containers do not know the size of their children, because the children haven't been created yet. If we left out the width and height values, the panels would be small at first and then grow in size to fit their buttons after the button has been created.

Page 2 of 6

Previous Page

Next Page