Working with controls -- Flex 2.01

Flex controls share a common class hierarchy. Therefore, you use a similar procedure to configure all controls. This section describes the following topics:

Subtopics

Class hierarchy of controls

Flex controls are ActionScript objects derived from the flash.display.Sprite and mx.core.UIComponent classes, as the following example shows. Controls inherit the properties, methods, events, styles, and effects of these superclasses:

The Sprite and UIComponent classes are the base classes for all Flex components. Subclasses of the UIComponent class can have shape, draw themselves, and be invisible. Each subclass can participate in tabbing, accept low-level events like keyboard and mouse input, and be disabled so that it does not receive mouse and keyboard input.

For information on the interfaces inherited by controls from the Sprite and UIComponent classes, see Using Flex Visual Components.

Sizing controls

This section briefly describes how Flex sizes controls. For more information on sizing components, see Sizing and Positioning Components.

All controls define rules for determining their size in a Flex application. For example, a Button control sizes itself to fit its label text and optional icon image, while an Image control sizes itself to the size of the imported image. Each control has a default height and a default width. The default size of each standard control is specified in the description of each control.

The default size of a control is not necessarily a fixed value. For example, for a Button control, the default size is large enough to fit its label text and optional icon image. At run time, Flex calculates the default size of each control and, by default, does not resize a control from its default size.

Set the height or width attributes in MXML to percentages, such as 50%, or the percentHeight or percentWidth properties in ActionScript to percentage values, such as 50, to allow Flex to resize the control in the corresponding direction. Flex attempts to fit the control to the percentage of its parent container that you specify. If there isn't enough space available, the percentages are scaled, while retaining their relative values.

For example, you can set the width of a comments box to scale with its parent container as the parent container changes size:

<mx:TextInput id="comments" width="100%" height ="20"/>

You can also specify explicit sizes for a control. In MXML or ActionScript by setting the its height and width properties to numeric pixel values. The following example sets the height and width of the addr2 TextInput control to 20 pixels and 100 pixels, respectively:

<mx:TextInput id="addr2" width="100" height ="20"/>

To resize a control at run time, use ActionScript to set its width and height properties. For example, the click event listener for the following Button control sets the width property of the addr2 TextInput control to increase its width by 10 pixels:

<mx:Button id="button1" label="Slide" height="20" 
    click="addr2.width+=10;"/>

Many components have arbitrarily large maximum sizes, which means that Flex can make them as large as necessary to fit the requirements of your application. While some components have a defined nonzero minimum size, most have a minimum size of 0. You can use the maxHeight, maxWidth, minHeight, and minWidth properties to set explicit size ranges for each component.

Positioning controls

You place controls inside containers. Most containers have predefined layout rules that automatically determine the position of their children. The Canvas container absolutely positions its children, and the Application, and Panel containers optionally let you use absolute or container-relative positioning.

To absolutely position a control, you set its x and y properties to specific horizontal and vertical pixel coordinates within the container. These coordinates are relative to the upper-left corner of the container, where the upper-left corner is at coordinates (0,0). Values for x and y can be positive or negative integers. You can use negative values to place a control outside of the visible area of the container, and then use ActionScript to move the child to the visible area, possibly as a response to an event.

The following example places the TextInput control 150 pixels to the right and 150 pixels down from the upper-left corner of a Canvas container:

<mx:TextInput id="addr2" width="100" height ="20" x="150" y="150"/>

To reposition a control within an absolutely-positioned container at run time, you set its x and y properties. For example, the click event listener for the following Button control moves the TextInput control down 10 pixels from its current position:

<mx:Button id="button1" label="Slide" height="20" x="0" y="250"
click="addr2.y = addr2.y+10;"/>

Changing the appearance of controls

Styles, skins, and fonts let you customize the appearance of controls. They describe aspects of components that you want components to have in common. Each control defines a set of styles, skins, and fonts that you can set; some are specific to a particular type of control, and others are more general.

Flex provides several different ways for you to configure the appearance of your controls. For example, you can set styles for a specific control in the control's MXML tag, by using ActionScript, or globally for all instances of a specific control in an application by using the <mx:Style> tag.

A theme defines the look and feel of a Flex application. A theme can define something as simple as the color scheme or common font for an application, or it can be a complete reskinning of all the Flex components. The current theme for your application defines the styles that you can set on the controls within it. That means some style properties might not always be settable. For more information, see Using Styles and Themes.