12  Access the Parent of a Flex Component

Discussion

A Flex component can be nested within many different parent components, and also

within multiple applications. In previous versions of Flex, developers would often access the parent application by using Application.application to return a reference to

the main application. In Flex 4, you should use either the parentApplication property

that all UIComponents define to access the application that a particular component

is loaded into, or the FlexGlobals.topLevelApplication to access the top-most

application.

Figure 1-10 shows how a Button could access the various parent components within

which it is nested.



Figure 1-10. Accessing parent documents and applications from a component



Note that the parentDocument and the parent of a UIComponent are different. For instance,

a Button within a list may have a SkinnableContainer as its parent, but a List as its

parentDocument. It’s generally better practice to dispatch a custom event to the parent

than to attempt to access it using a reference. This ensures that components you’re

building will be portable to multiple parent types and reduces dependencies throughout

your application.



1.12 Access the Parent of a Flex Component | 25



www.it-ebooks.info



www.it-ebooks.info



CHAPTER 2



Containers



The Flex Framework provides two sets of containers: MX and Spark. The introduction

of the Spark architecture to the Flex 4 SDK offers a level of abstraction between containers and layouts not available in the MX architecture. An MX container internally

manages the size and position of its children based on specified properties and styles.

To modify the layout rules of a MX container, you often create a subclass of a similar

container or the base mx.core.Container class and override methods such as

updateDisplayList() and measure(). In contrast, Spark containers are separated from

layout management and allow for a developer to specify layouts available in the

spark.layouts package or create custom LayoutBase-based layouts to manage the size

and position of child elements. The separation of responsibilities for Spark containers

provides enhanced runtime performance in rendering because layout is handled

through delegation.

Included in the Spark layout container architecture are two base classes, GroupBase and

SkinnableContainerBase. Both handle visual elements, but only the latter provides

skinning capabilities for the container. The spark.components.Group and spark.compo

nents.DataGroup classes are extensions of GroupBase; both are non-skinnable containers, but they differ in how child elements are declared and represented on their display

lists. A Group container holds children that are implementations of IVisualElement and

that are added either through MXML markup or through methods of the content API.

A DataGroup container uses item rendering for visual elements represented as data items,

which are provided as IList implementations. DataGroup also supports virtualization

through a layout delegate, which can reduce the rendering time of its visual elements

at runtime. spark.components.SkinnableContainer (of which Application is a subclass)

and spark.components.SkinnableDataContainer are equivalent to the GroupBase-based

containers yet support skinning for the visual makeup of the container itself.

Layout containers—those that handle the size and position of their child elements—

have equal parity between the MX and Spark container sets. Though using Spark layout

containers is recommended because of their improved performance and level of abstraction, there are no Spark equivalents of the MX navigational containers (such as

Accordion and ViewStack). If application requirements dictate the use of navigational

27



www.it-ebooks.info



containers, the Flex Framework allows for intermixing of MX and Spark containers in

the same application. Note, however, that a Spark container cannot be added directly

as a child to a MX navigator container. To add a Spark layout container to a MX navigator container, you must wrap the Spark container in a spark.components.Navigator

Content container instance.



2.1 Position Children Within a Container

Problem

You want to position child elements of a container using a specified layout.



Solution

Assign a layout from the spark.layouts package to the layout property of the target

container and apply constraints on the layout and container as necessary.



Discussion

Spark layout containers, such as spark.components.Group and spark.components.Data

Group, delegate the sizing and positioning of their child elements to LayoutBase-based

layouts. As child elements are added to a container, whether declaratively in MXML

or programmatically, the management of the display list is handed over to the layout,

which renders child elements accordingly. Common layouts, such as those for positioning children vertically or horizontally, are provided in the Flex 4 SDK in the

spark.layouts package. Due to the separation of responsibilities between Spark containers and layouts, custom LayoutBase-based layouts can also easily be applied to

containers.

The default layout of the base Spark containers is spark.layouts.BasicLayout. When

the default BasicLayout is applied to a container, child elements are displayed based on

their individual properties, without regard to the size and position of other children:











Using BasicLayout affords developers fine-grained control over the layout of child

elements by enabling them to specify each element’s size and position. Additional constraint properties can be applied to the container as well, to uniformly offset child

positions. The child elements of the s:Group container in the following example are

displayed exactly as in the previous example, yet the top, left, right, and bottom constraint properties are used:



28 | Chapter 2: Containers



www.it-ebooks.info




top="10" left="10" right="10" bottom="10">









The HorizontalLayout, VerticalLayout, and TileLayout classes are available to display

children sequentially and can be applied using the layout property:


top="10" left="10" right="10" bottom="10">















Similar to using constraint properties on a container, distances between the border of

the container and the child elements can be specified using the paddingTop, paddingLeft,

paddingRight, and paddingBottom properties of the sequential layout classes of the SDK:






paddingRight="10" paddingBottom="10" />











Some convenience classes are available in the Flex 4 SDK to declare containers with

predefined layouts. For example, the children of spark.components.HGroup, spark.com

ponents.VGroup, and spark.components.TileGroup containers are laid out sequentially

in a predetermined manner. You declare these containers just as you would any other,

but the layout property is attributed as read-only:


paddingTop="10" paddingLeft="10"

paddingRight="10" paddingBottom="10">









2.1 Position Children Within a Container | 29



www.it-ebooks.info