Flex 4 Cookbook

Chapter 3. Layout

Visual elements of an application are sized and positioned within a parent container based on rules provided to and by a managing layout. The Flex Framework provides two sets of containers for layout: MX and Spark. The MX containers reside in the mx.containers package of the Flex Framework, while the Spark containers reside in the spark.components package. Though both container sets inherit from UIComponent, they differ in how they lay out and manage the children in their display lists.

Within a MX container (such as Box), the size and position of the children are managed by the container’s layout rules and constraints, which are internally defined and based on specified properties and styles. In contrast, the Spark set provides a level of abstraction between the container and the layout and allows you to define the layout separately from the skin and style. The separation of the layout from the container not only provides greater flexibility in terms of runtime modifications but also cuts down on the rendering cycle for a container, as the style properties of a container may not be directly related to the layout. A Spark layout manages the size and positioning of the target container’s child elements and is commonly referred to as the container’s layout delegate. Commonly used layout classes for Spark containers, such as VerticalLayout, can be found in the spark.layouts package of the Flex Framework and are extensions of the base LayoutBase class.

When you provide ...