The Flex SDK has layout and sizing functionality that allows you to control the size of your visual components.

You can determine the size of your components (explicit sizing), or let Flex do it for you (default sizing). To use default sizing, you do not specify the width and height of the component. Explicit sizing, on the other hand, requires you to specify the width and height of the visual component, as the following example shows:

 <mx:List id=”prodList” dataProvider=”{listDP}” 

width=”200″ height=”300″ labelField= “@name”/>

You may find explicit sizing to be too precise. You can, instead, define the size of the component as a percentage. In Flex, this is called percentage-based sizing. The following example shows percentage-based sizing on a Panel control:

 <mx:Panel id=”panel1″ width=”100%” height=”100%”>

      <mx:Label text=”Percentage-based sizing” /> </mx:Panel>

To specify the percentage-based sizing in ActionScript, you must access the percentageWidth and percentageHeight properties of the control. The following example will reset the Panel control’s width to 50 percent of the parent container:

 panel1.percentageWidth = 50;

The layout of your components is very important. Flex has a mechanism called constraint-based layout that allows you to control the size and position by anchoring the sides, or centering the components within their containers by specifying the top, bottom, left, right, verticalCenter, and horizontalCenter properties. The following example shows a VBox container defining constraint-based layouts:

 <mx:VBox width=”200″ height=”500″ left=”50″ top=”30″ y=”100″>

      <mx:Label text=”Percentage-based sizing” /> </mx:VBox>

You can mix the sizing and layout properties as long as they are done appropriately. You must not specify the width and percentageWidth of a control, because you can use only one or the other.

This chapter describes how to use Flex 2 components to build user interfaces for your applications. Flex 2, as you know, has many built-in components that make life a lot easier when it comes to building the interface. You are introduced to Flex controls, data providers, and collections, and how to lay out controls using containers. Flex makes it very easy to lay out your user interfaces using MXML.

Visual Components

The component-based development model Flex provides allows you to develop applications that are architecturally sound, achieving great scalability and reliability. The pre-built visual components in Flex allow you to build interfaces faster without having to create your own components. That said, Flex includes a well-thought-out component architecture that allows you (as the developer) to build your own components, either by extending existing ones, or creating your own.

You have a lot of power at your fingertips when using visual components in Flex. They are extremely flexible and provide a great deal of control over their appearance (the font and size of the text in any component, the sizing of components), as well as their response to user interactions.

This section provides an overview of the characteristics of visual components such as size, events, styles, behaviors, and skins.

Class Hierarchy

All visual components in Flex generally extend the UIComponent class. This is the base class for all visual components in Flex, both interactive and non-interactive. When creating custom components, you should extend the UIComponent class because it contains functionality for width, height, handling double-clicks, id property, style names, and x and y properties.

components in Flex.

Figure 6-1: Class hierarchy from the Object class through to all visual components in Flex

UIComponent Class

The UIComponent class has many properties and methods that are accessible when extending the class. The most commonly used properties are listed in the following table.

The MouseEvent class and all its subclasses have extra properties that determine if a specific key was held down when clicking the mouse button:

• altKey - Set to true if the Alt key is held down when the user pressed the mouse button.

• ctrlKey - Set to true if the Ctrl key is held down when the user pressed the mouse button.

• shiftKey - Set to true if the Shift key is held down when the user pressed the mouse button.

You may want the user to be able to open a popup window by holding down the Alt key and Shift key together while pressing the mouse button anywhere within application.