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.
You can use percentage values in MXML for the width
and height
properties of any UI control in Flex,
but percentage values are not valid in ActionScript. Instead, you have
to use the percentWidth
and percentHeight
properties of a
component. This is actually how the Flex compiler translates the
percentage values from MXML to ActionScript at compile time.