O’Reilly Programming Flex 2 phần 4 potx

124 | Chapter 7: Working with UI Components

scaleY

The scale of the component in the vertical direction relative to its original height.

The scaleY and height properties are linked just as the scaleX and width proper￾ties are linked. The values for scaleY are on the same range as are those for

scaleX. And you can both read and write the scaleY property.

rotation

The number of degrees of rotation of the component relative to its original orien￾tation. Rotation is always clockwise and is always relative to the origin point of

the component’s internal coordinate system. In almost all cases, a component’s

origin exists at the upper-left corner. You can both read and write the rotation

property.

alpha

The opacity of the component. The default value is 1, which means the compo￾nent is fully opaque. The effective range for alpha is from 0 (transparent) to 1

(opaque). You can read and write the alpha property.

visible

The visibility of the component. The default value is true, meaning the compo￾nent is visible. A value of false means the component is not visible. You can

both read and write the visible property.

enabled

Whether a component is interactive. For example, if a button is enabled, it can

accept mouse clicks. The default value is true. A value of false disables the com￾ponent. You can both read and write the enabled property.

parent

A reference to the parent container for the component. The parent property is

read-only. If you want to change the parent of a component, you must use the

removeChild( ) method of the parent container to remove the component or use

addChild( ) to add the component to a new container.

The preceding list is not intended to be comprehensive by any means. However, it

does represent some of the most commonly used properties of all UI components.

You can work with most of these properties both in MXML and in ActionScript

(except when a property is read-only, in which case you must use ActionScript to

read the value). The following example sets several properties of a button instance

using MXML:

<mx:Button id="button" label="Example Button"

width="200" height="50" enabled="false" />

Here’s the equivalent ActionScript code:

var button:Button = new Button( );

button.label = "Example Button";

button.width = 200;

button.height = 50;

Understanding UI Components | 125

button.enabled = false;

addChild(button);

Handling Events

Events are the way in which objects (such as Flex UI components) can communicate

with the rest of the application. There are two basic types of events: user events and

system events. User events are events that occur directly because of user interaction

with the application. For example, when the user clicks on a button, a click event

occurs, and when the user expands a drop-down menu (a combo box component),

an open event occurs. On the other hand, a system event occurs because something

happens within the application in response to initialization, asynchronous opera￾tions, or other such nonuser-driven behavior. For example, when a component is

created, several events occur during the stages of creation indicating that various

aspects of the component are accessible.

When an event occurs, we say that the event is dispatched (or broadcasted). The

object that dispatches an event is called the target. All Flex UI components are

potential event targets, meaning all UI components dispatch events. The event that

gets dispatched is in the form of an object of type flash.events.Event (or a subtype).

The Event instance provides information about the event, including the type of event

(click, open, etc.) and the target that dispatched the event.

When a component dispatches an event, nothing occurs in response unless some￾thing (called a listener) is configured to receive notifications. There are two ways that

you can handle events in a Flex application: one uses MXML attributes and the other

uses ActionScript.

As you saw in Figure 7-1, all UI components inherit from the Flash

Player EventDispatcher class, meaning that all UI components can dis￾patch events to listeners.

Handling events with MXML

When you create a component using MXML, you can add an event handler using an

attribute that has the same name as the event you want to handle. For example, but￾tons dispatch click events when the user clicks on them. Therefore, you can add a

click attribute to the Button tag to handle the click event. You also can assign

ActionScript to the attribute. For example, the following code lowers the alpha by .1

of the button each time the user clicks on it:

<mx:Button id="button" label="Alpha Button" click="button.alpha -= .1" />

Although you can assign ActionScript expressions to event handler attributes, as in

the preceding example, it is more common (and useful) to assign a function call to

the event handler attribute. This allows you to define more complex functionality in

response to the event. When you call a function/method from an event handler

126 | Chapter 7: Working with UI Components

attribute, you should pass a parameter called event to the function. In MXML, the

event parameter will automatically pass along the event object that the component

dispatches:

<mx:Button id="button" label="Alpha Button" click="clickHandler(event)" />

You then need to define the method that is intended to handle the event. The method

should accept a parameter of type Event (or the appropriate subtype). The following

example accomplishes the same thing as the inline expression did previously. How￾ever, in addition, it resets the alpha to 1 if and when the alpha is less than 0:

private function clickHandler(event:Event):void {

var target:Button = Button(event.target);

target.alpha -= .1;

if(target.alpha < 0) {

target.alpha = 1;

}

}

Handling events with ActionScript

You can use ActionScript to add event listeners to a component as an alternative to

using MXML event attributes. This is advantageous for several reasons. First, it is

useful to add event listeners with ActionScript when you are creating the component

instance using ActionScript as opposed to MXML. Second, when you add event lis￾teners using ActionScript, you can also remove the event listeners later. This is handy

if you want to temporarily or permanently stop listening for a specific event for a

component.

In order to register a listener for an event using ActionScript you should employ the

addEventListener( ) method. This method requires that you pass it at least two

parameters: the name of the event for which you want to listen and the function to

use as the listener. Typically, you should use constants for event names rather than

quoted strings to avoid typos that would introduce bugs that would not be caught by

the compiler. The event name constants are members of the associated event class.

For example, the Event class defines OPEN, CLOSE, SCROLL, SELECT, and many other con￾stants. The MouseEvent class defines CLICK, MOUSE_OVER, and other mouse-related

event constants. The FlexEvent class defines constants for many of the Flex-specific

events such as ADD, REMOVE, CREATION_COMPLETE, and INITIALIZE. The following code

creates a button and then adds a listener for the click event:

var button:Button = new Button( );

button.addEventListener(MouseEvent.CLICK, clickHandler);

addChild(button);

The event listener function is automatically passed an Event object as a parameter:

private function clickHandler(event:MouseEvent):void {

var target:Button = Button(event.target);

target.alpha -= .1;

if(target.alpha < 0) {

Understanding UI Components | 127

target.alpha = 1;

}

}

Event objects

The flash.events.Event class is the base class for all events in Flex applications.

However, many event objects are instances of event subtypes. For example, events

related to mouse behavior (click, mouseOver, etc.) are of type MouseEvent.

Event objects always have a type property that indicates the type of event the object

represents. For example, a click event dispatches an object with a type property of

click. Event objects also have target properties that reference the actual object which

dispatched the event. In some cases, the target may not be the object for which you

have registered a listener. This can occur when the object for which you have regis￾tered a listener contains a child component that also dispatches the same event (and

the event bubbles). If you want to ensure that you are getting a reference to the

object for which the listener is registered to listen for the event, use the

currentTarget property.

Standard Flex component events

Each UI component type may have events that are specific to that type. For exam￾ple, combo boxes dispatch open events when the menu is expanded. However, all UI

components have a set of events in common. Table 7-2 lists these common events.

The list of common events in Table 7-2 is not comprehensive. The UIComponent class

(from which all UI components inherit) defines many more events. For a comprehen￾sive list, look at the Flex documentation listing for mx.core.UIComponent. We’ll also

Table 7-2. Common UI component events

Event Constant Description

add FlexEvent.ADD The component has been added to a container.

remove FlexEvent.REMOVE The component has been removed from a container.

show FlexEvent.SHOW The component has been made visible (the visible

property is now true).

hide FlexEvent.HIDE The component has been made nonvisible (the visi￾ble property is now false).

resize FlexEvent.RESIZE The component dimensions have changed.

preinitialize FlexEvent.PREINITIALIZE The component has started to initialize, but children

haven’t yet been created.

initialize FlexEvent.INITIALIZE The component has been constructed, but it has not

yet been measured and laid out.

creationComplete FlexEvent.CREATION_COMPLETE The component is completely created, measured,

and laid out.