Flex Component Basic - ythy/blog GitHub Wiki

reference

Implementing the commitProperties() method for MX components

Implementing the component

When you create a custom component in ActionScript, you have to override the methods of the UIComponent class. You implement the basic component structure, the constructor, and the createChildren(), commitProperties(), measure(), and updateDisplayList() methods.

Basic component structure

The following example shows the basic structure of a Flex component:

package myComponents 
{ 
    public class MyComponent extends UIComponent 
    {     
        .... 
    } 
}

Implementing the constructor

Your ActionScript class should define a public constructor method for a class that is a subclass of the UIComponent class, or a subclass of any child of the UIComponent class. The constructor has the following characteristics:

No return type
Should be declared public
No arguments
Calls the super() method to invoke the superclass’ constructor

Each class can contain only one constructor method; ActionScript does not support overloaded constructor methods.
Use the constructor to set the initial values of class properties. For example, you can set default values for properties and styles, or initialize data structures, such as Arrays.

Do not create child display objects in the constructor; you should use it only for setting initial properties of the component. If your component creates child components, create them in the createChildren() method.

Implementing the `createChildren()` method for MX components

A component that creates other components or visual objects within it is called a composite component.
the createChildren() method has no invalidation method, which means that you do not have to call it a second time after the component is added to its parent.

Implementing the `commitProperties()` method for MX components

You use the commitProperties() method to coordinate modifications to component properties. Most often, you use it with properties that affect how a component appears on the screen.

Flex schedules a call to the commitProperties() method when a call to the invalidateProperties() method occurs. The commitProperties() method executes during the next render event after a call to the invalidateProperties() method. When you use the addChild() method to add a component to a container, Flex automatically calls the invalidateProperties() method.

Calls to the commitProperties() method occur before calls to the measure() method. This lets you set property values that the measure() method might use.

The main advantages of using the commitProperties() method are the following:

To coordinate the modifications of multiple properties so that the modifications occur synchronously.
For example, you might define multiple properties that control the text displayed by the component, such as the alignment of the text within the component. A change to either the text or the alignment property requires Flex to update the appearance of the component. However, if you modify both the text and the alignment, you want Flex to perform any calculations for sizing or positioning the component once, when the screen updates.
Therefore, you use the commitProperties() method to calculate any values based on the relationship of multiple component properties. By coordinating the property changes in the commitProperties() method, you can reduce unnecessary processing overhead.
To coordinate multiple modifications to the same property.
You do not necessarily want to perform a complex calculation every time a user updates a component property. For example, users modify the icon property of the Button control to change the image displayed in the button. Calculating the label position based on the presence or size of an icon can be a computationally expensive operation that you want to perform only when necessary.
To avoid this behavior, you use the commitProperties() method to perform the calculations. Flex calls the commitProperties() method when it updates the display. That means you perform the calculations once when Flex updates the screen, regardless of the number of times the property changed between screen updates.

Implementing the `measure()` method for MX components

The measure() method sets the default component size, in pixels, and optionally sets the component’s default minimum size.
Flex schedules a call to the measure() method when a call to the invalidateSize() method occurs. The measure() method executes during the next render event after a call to the invalidateSize() method. When you use the addChild() method to add a component to a container, Flex automatically calls the invalidateSize() method.

When you set a specific height and width of a component, Flex does not call the measure() method, even if you explicitly call the invalidateSize() method. That is, Flex calls the measure() method only if the explicitWidth property or the explicitHeight property of the component is NaN.

In the following example, because you explicitly set the size of the Button control, Flex does not call the Button.measure() method:

<mx:Button height="10" width="10"/>

The measure() method only sets the default size of the component. In the updateDisplayList() method, the parent container of the component passes to it its actual size, which may be different than the default size.
Component users can also override the default size settings in an application by using the component in the following ways:

Setting the explicitHeight and exlicitWidth properties
Setting the width and height properties
Setting the percentHeight and percentWidth properties

Implementing the `layoutChrome()` method for MX components

The Container class, and some subclasses of the Container class, use the layoutChrome() method to define the border area around the container.
Flex schedules a call to the layoutChrome() method when a call to the invalidateDisplayList() method occurs. The layoutChrome() method executes during the next render event after a call to the invalidateDisplayList() method.

Implementing the `updateDisplayList()` method for MX components

The updateDisplayList() method sizes and positions the children of your component based on all previous property and style settings, and draws any skins or graphic elements that the component uses. The parent container for the component determines the size of the component itself.

A component does not appear on the screen until its updateDisplayList() method gets called. Flex schedules a call to the updateDisplayList() method when a call to the invalidateDisplayList() method occurs. The updateDisplayList() method executes during the next render event after a call to the invalidateDisplayList() method.

The main uses of the updateDisplayList() method are the following:

To set the size and position of the elements of the component for display.
Many components are made up of one or more child components, or have properties that control the display of information in the component. For example, the Button control lets you specify an optional icon, and use the labelPlacement property to specify where the button text appears relative to the icon.
The Button.updateDisplayList() method uses the settings of the icon and labelPlacement properties to control the display of the button.
For containers that have child controls, the updateDisplayList() method controls how those child components are positioned. For example, the updateDisplayList() method on the HBox container positions its children from left to right in a single row; the updateDisplayList() method for a VBox container positions its children from top to bottom in a single column.
To size components in the updateDisplayList() method, you use the setActualSize() method, not the sizing properties, such as width and height. To position a component, use the move() method, not the x and y properties.
To draw any visual elements necessary for the component.
Components support many types of visual elements such as skins, styles, and borders. Within the updateDisplayList() method, you can add these visual elements, use the Flash drawing APIs, and perform additional control over the visual display of your component.

`setActualSize()`

This method exists because if parent would set width and height on children directly, they would immediately turn into fixed size children, and they won't be measured anymore.

Using this method, only the rendering size is being changed - not the (explicit) width and height but _width and _height - meaning if for some reason the container resizes again, the children will be resized by given rules (percentage of the parent, expanding to child component's children size etc.)

方法及层级执行顺序

constructor 由父->子
commitProperties() 由父->子
measure() 由子->父
updateDisplayList() 由父->子