Chapter 4:
Working with Flex Builder
The relationship between containers and controls in Flex is similar to the relationship of a table and form elements embedded in an HTML table. The table works like a Flex container, while the form elements act like controls in Flex. Flex Builder can be used to add containers, controls, and MXML code to your application. MXML containers and control names map to the ActionScript classes that implement them. MXML attributes can initialize attributes of the underlying class, for example, CSS styles and class attributes such as the visibility of the underlying ActionScript class.
The Application Container The application container is the parent container of other containers. It represents the entire display area of the Flex application in the Flash Player. As the base layer it holds all other defined containers. Any container that’s placed inside another container becomes a child container. Therefore, all containers are children of the application container. Child containers inherit the properties of their parent containers, including settings such as size and position. However, these properties can be overridden at the child level. The idea is to automate the assignment of properties yet allow customization. When developing an application, pick a layout for your containers and use that layout on all screens, since it provides a consistent user experience. This not only makes your application easier to use but also makes development simpler, since each page follows the same model.
Constraint-Based Layout Flex Builder includes a constraint-based layout format to make arranging of components automatic when a user resizes the Flex application window. Constraint-based layouts use containers with the layout property set to absolute. To set the layout property to absolute, specify the following in the MXML tag: layout = absolute
Absolute positioning allows for setting constraints on how much your contained component stretches or moves when the container is resized. For example, to place text that remains 20 pixels from the top of the container and horizontally centered: 1. Drag a text element to the Design view. 2. Select Center from the pop-up menu that appears when you click the blue dot on either
the left or right side of the Text component.
87