Tips for using Flex containers

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 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

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

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!

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:

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:

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:

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.

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

The following code defines two containers that have a different layout and different properties yet display the same result see Figure 7 :

• 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" :

The second example see Figure 9 uses horizontalCenter="0" and verticalCenter="0" :

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.

• Using constraints to control component layout
• Spark Containers
• When to use what Spark container by Ryan Frishberg
• Spark layouts with Flex 4 by Evtim Georgiev