68
Chapter 4: Architecting Flex Applications
Using layout containers
You can improve application start-up time by using Canvas containers, instead of relative layout
containers, such as the Form, HBox, VBox, Grid, and Tile containers, to perform automatic
layout. Canvas containers eliminate the layout logic that containers use to perform automatic
positioning of their children at startup, and replaces it with explicit pixel-based positioning.
When using a Canvas container, you must remember to explicitly set the x and y positions of all
of its children. If you do not set x and y positions, the Canvas container’s children lay out on top
of each other at the default x, y coordinates (0,0). Macromedia recommends that developers use
the relative layout containers initially, and move to using Canvas containers as warranted by
performance testing.
Improving initial layout performance
Every container has a
creationPolicy
property that determines how the container decides
which of its descendants, if any, to create when the container is created. Flex uses this property to
determine when components are created when an application starts.
You can instruct Flex to create all components in all containers, only the initially-visible
components in the containers, or no components in any of the containers. In addition, you can
define the order in which Flex creates containers and their components.
By using the
creationPolicy
property, you can decide at what stages the user incurs the costs of
creating components. For more information, see Chapter 27, “Improving Layout Performance,”
in
Developing Flex Applications
.
Nesting containers
Application start-up time slows commensurate with the complexity of the layout of your Flex
application. Excessive levels of nested containers can contribute to this complexity, and should be
avoided if you can accomplish the same layout with fewer levels of nesting. Try using margin, gap,
and alignment properties and the Spacer control, to achieve the desired layout.
When you have a working skeleton of your application, consider the containers that you are using
to determine if you could use alternate containers with less nesting. For example, consider the
following layout:
<mx:Grid>
mx:GridRow>
<mx:GridItem>
<mx:Button label="Visa"/>
</mx:GridItem>
<mx:GridItem>
<mx:Button label="MasterCard"/>
</mx:GridItem>
<mx:GridItem>
<mx:Button label="Diner's Club"/>
</mx:GridItem>
<mx:GridItem>
<mx:Button label="AmEx"/>
</mx:GridItem>
</mx:GridRow>
</mx:Grid>
Summary of Contents for FLEX-GETTING STARTED WITH FLEX
Page 1: ...Getting Started with Flex...
Page 4: ...4 Contents...
Page 22: ...22 Chapter 1 Introducing Flex...
