Programming Flex 3

Making Fluid Interfaces

Another benefit of using Flex is the ability to build fluid interfaces (i.e., interfaces that expand or contract when their available real estate changes). For applications deployed to the Web, this usually occurs when the browser window is resized. Without Flex, you would need to handle the Flash Player resize event manually and adjust the sizes of all the containers and their children to handle the change in available space.

In Flex, all layout containers and controls support the ability to set some values as percentages, the most basic of which are the width and height properties that set the available real estate for the container. Setting the width and height properties to a percentage value causes the container to occupy a percentage of the container of which it is currently a child.

Example 6-9 shows the code for a Panel container that occupies 70% of the width and 40% of the height of the Application container.

Example 6-9. A panel that occupies 70% of the width and 40% of the height of the available area

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Panel width="70%" height="40%">
    </mx:Panel>
</mx:Application>

The Application container’s width and height values are set by default to occupy all the space available to it. As such, in Example 6-9, the Panel automatically adjusts to changes in the browser’s size during runtime, as Application automatically grows to satisfy its size.

Note

You can use percentage ...