Requirements

 
Prerequisite knowledge
Some experience with Flex programming and Flash Builder is required to make the most of this article.
 
User level
Intermediate
 
Required 
Flash Builder (Download trial)
This article is for developers who are looking for a quick reference guide to using Flex 4.x containers and layouts. Though it’s not necessarily a complex issue, it does seem to be a source of frustration for many developers, particularly those who are just getting started with Flex. When developers don’t know how to use containers and layouts correctly, their code often ends up with too many nested containers and extraneous properties that don’t serve any purpose. 
 

 
Flex container basics

Flex 4.x containers come with a default layout Basic, Horizontal, or Vertical and a default size which may be based on the container’s content.  When aligning children, take note of the minimum and default sizes for the container you are using see Table 1.  Some containers are skinnable, and if so, they can be scrolled by adding a Spark Scroller to their skin.
 
Note that the Basic layout is equivalent to the absolute layout in Flex 3.
 
Also note that Spark containers support both GraphicElement objects including shapes and FXG elements and IVisualElement objects UI controls as direct children. This is not the case with all MX containers. 
 
Table 1. Spark containers
 
Name
 
Min Size
 
Default Size
 
Default Layout
 
Skin?
 
Scrollbars
 
Notes
 
Window
 
0x0
 
100x100
 
Basic
 
X
 
Add to skin
 
AIR only
 
NavigatorContent
 
0x0
 
Content
 
Basic
 
X
 
Add to skin
 
For navigational containers
 
Application
 
0x0
 
375x500 or all space in browser
 
Basic
 
X
 
Add to skin
 
Web application
 
Panel
 
131x127
 
Content
 
Basic
 
X
 
Add to skin
 
Includes title bar
 
BorderContainer
 
112x112
 
112x112
 
Basic
 
X
 
Add to skin
 
Includes style attribs
 
SkinnableContainer
 
0x0
 
Content
 
Basic
 
X
 
Add to skin
 
Includes style attribs
 
DataGroup
 
0x0
 
Content
 
Basic
 
Wrap in Scroller
 
Takes a data provider and item renderer
 
VGroup
 
0x0
 
Content
 
Vertical
 
Wrap in Scroller
 
Aligns items vertically like VBox with no skin
 
HGroup
 
0x0
 
Content
 
Horizontal
 
Wrap in Scroller
 
Aligns items horizontally like VBox with no skin
 
Group
 
0x0
 
Content
 
Basic
 
Wrap in Scroller
 
Like Box but no skin/chrome
 
WindowedApplication
 
OS/chrome-specific
 
100x375
 
Basic
 
X
 
Add to skin
 
AIR Only
 
ViewNavigator
Application
100% x 100% 100% x 100% Defined by child views x Add to child views or skins
** Flex 4.5 – Mobile only
 
Does not accept UIComponents directly, instead they are added to child views
 
TabbedViewNavigator
Application
100% x 100% 100% x 100% Defined by child views X Add to child views or skins
** Flex 4.5 – Mobile only
 
Does not accept UIComponents directly, instead they are added to child views
 
ViewNavigator 0x0 Content Basic x Add to child views or skins
** Flex 4.5 – Mobile only
 
Contains a collection of Views where one view is shown at a time only.
 
By default, when you create a web application in Flash Builder it will have a minimum width and minimum height of 955 and 600 respectively. You can change this in Flash Builder by removing the minSize variable from the File Template:
 
  1. In Flash Builder, choose Flash Builder > Preferences.
  2. Expand Flash Builder and select File Templates.
  3. Click MXML Web Application as the File Type see Figure 1 .
  4. Click Edit and remove ${min_size}.
  5. Click OK twice.
Some containers support nested layout tags to override the default shown in Table 1 simply include the layout tag as a child . The containers that allow you to nest a layout are: Application, BorderContainer, Group, Panel, and SkinnableContainer
 

 
Visualizing layouts and layout properties

It's often easier to grasp a concept more quickly when it's presented visually--as they say a picture is worth a thousand words! Justin Shacklette and Gilles Guillemin, who own FlexLayouts.org, have created three diagrams that really go a long way in explaining HorizonalLayout see Figure 2 , Vertical Layout see Figure 3 , and TileLayout see Figure 4 in Flex 4. They also show how the properties such as padding for example, paddingLeft , alignment for example, horizontalAlign , and gap would apply. You can download the reference PDFs. Check out their cool custom Flex 4 layouts while you're there!
 

 
Scrolling with Group containers

In Flex 3, scrolling is built into the component; in Flex 4 it is not.  As a result there are significant differences in how scrolling is handled for Flex 3 and Flex 4 components. The best practice for scrolling a Group container as well as HGroup, VGroup, and DataGroup containers is to wrap the container in a Spark Scroller object. The key is to set the width and height of the Scroller to the size of the contents you want to be viewable. You can also set a scroll position to display the contents at the current location within that range. If you don’t set width and height, or if you set them to values larger than the contents, the scroll bars will never appear. For instance, consider the following code, which sets the width and height of the Scroller to the size of the image:
 
<?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"> <s:Scroller width="300" height="300"> <s:Group> <mx:Image width="300" height="300" source="@Embed(source='logo.png')"/> </s:Group> </s:Scroller> </s:Application>
No scroll bars will be displayed, just as if the width and height were omitted from the Scroller object completely see Figure 5.
 
The following code will display the left half of the image with a horizontal scroll bar, allowing the user to scroll to the other half of the image see Figure 6. No vertical scroll bar will be added since the Scroller height is sized to the content height by default:
 
<?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"> <s:Scroller width="150"> <s:Group> <mx:Image width="300" height="300" source="@Embed(source='logo.png')"/> </s:Group> </s:Scroller> </s:Application>

 
Scrolling a skinnable container

For skinnable containers including the Spark Application, BorderContainer, NavigatorContent, Panel, and Window you should add the Scroller object to the skin class around the contentGroup Group object. For example, here is the relevant code from a custom SkinnableContainer MXML skin:
 
<s:Scroller width="100%" height="100%"> <s:Group id="contentGroup" minWidth="0" minHeight="0" /> </s:Scroller>
The alternative is to nest a Scroller and Group around your content within your code as the first child. However, the preferred method is to keep the scroller separated in the skin class. For more details about scrolling and containers, see Adding scroll bars to a Spark container.
 

 
Layout guidelines

Here are a few guidelines I follow when using containers:
 
  • If the container of the object has basic or absolute layout, then use constraints such as left , right , top , bottom , horizontalCenter , and verticalCenter to determine its placement.
  • If the container has a vertical or horizontal layout either with the layout tag or by using HGroup or VGroup , then use the horizontalAlign , verticalAlign , gap , paddingTop , paddingBottom , paddingLeft , and paddingRight attributes to control the children and the whitespace around them. These attributes cannot be used with a basic or absolute layout see Table 2 .
Table 2. Summary of layout properties
 
Layout situation
 
Use properties on object itself
 
Use these properties on parent container
 
Object within BasicLayout absolute Container
 
Left, right, top, bottom
 
horizontalCenter, verticalCenter
 
Object within Vertical, Horizontal or TileLayout Container
 
paddingLeft, paddingRight, paddingTop, paddingBottom
 
horizontalAlign, verticalAlign
 
The following code defines two containers that have a different layout and different properties yet display the same result see Figure 7 :
 
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx"> <s:layout> <s:VerticalLayout horizontalAlign="center" verticalAlign="middle"/> </s:layout> <!-- Container 1 has a BasicLayout (default) and uses constraints on the label itself for placement --> <s:SkinnableContainer id="c1" backgroundColor="0x000000" color="0xFFFFFF" width="420" height="200"> <s:Label horizontalCenter="0" top="30" text="Basic Layout using constraints on the object itself for layout."/> </s:SkinnableContainer> <!-- Container 2 has a VerticalLayout with align and padding properties set on it for label placement --> <s:SkinnableContainer id="c2" backgroundColor="0x000000" color="0xFFFFFF" width="420" height="200" > <s:layout> <s:VerticalLayout horizontalAlign="center" paddingTop="30"/> </s:layout> <s:Label text="VerticalLayout that specifies where the label is placed with properties."/> </s:SkinnableContainer> </s:Application>
  • To center children within a container with a horizontal or vertical layout or to center children in an HGroup or VGroup , use horizontalAlign="center" and verticalAlign="middle" .
  • To center a component within a container that has a basic or absolute layout, use horizontalCenter="0" and verticalCenter="0" on the component to be centered.
The following two code samples center an object using different techniques that produce the same result.
 
The first example see Figure 8 uses horizontalAlign="center" and verticalAlign="middle" :
 
<?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx"> <s:layout> <s:VerticalLayout horizontalAlign="center" verticalAlign="middle"/> </s:layout> <s:BorderContainer borderColor="red" borderWeight="5" width="300" height="300"/> </s:Application>
The second example see Figure 9 uses horizontalCenter="0" and verticalCenter="0" :
 
<?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx"> <s:BorderContainer borderColor="red" borderWeight="5" width="300" height="300" horizontalCenter="0" verticalCenter="0"/> </s:Application>

 
General tips

Finally, here are a few general tips to keep in mind:
 
  • In general, opt to use constraints instead of absolute positioning with x,y values because constraints dynamically resize with the browser. This is even more important when developing cross-platform applications for the web, desktop, mobile, and tablet devices on which screen sizes vary greatly.
  • In general, use left/right for sizing purposes and horizontalCenter and verticalCenter for positioning purposes.
  • For general centering purposes, and particularly when minimum sizes come into play and you want to center something, use horizontalCenter.
Note: When in doubt about which properties to use, switch to Design View to see what options are available in the Property inspector. The properties shown in Design View will switch depending on the component selected and the container's layout. This is a great way to double check what you're doing.
 

 
Where to go from here