Every Flex UI component has a set of internal functions that are called throughout the life of the component. Each of these functions serves a specific purpose and should generally only be overridden to implement the intended purpose of that function.
These functions include:
- Constructor()
- createChildren()
- commitProperties()
- measure()
- layoutChrome()
- updateDisplayList()
Constructor
The constructor is the first function invoked in a custom component. This is where you will want to set general properties of the component and initialize arrays. You do not want to create any children or position items in the constructor as this is better served in other functions.
The rules of a ui component constructor:
- No return type
- Should be declared public
- No arguments
- Calls the Super() method
createChildren()
The createChildren() method is called immediately after addChild is invoked on the component. This function should be used for setting explicit properties to child components and where child components should be added using addChild(). Explicit sizing can be handled here if the sizing is not dynamic or not expected to change during the lifetime of the component.
commitProperties()
The commitProperties() method is used for coordinating property modifications of a component. This function allows the deferral of complicated functionality by handling all of the changed properties at once instead of performing the same calculations every time each property is changed. The properties usually handled in commitProperties() are properties that change the UI itself as the calculations only need to be performed once before a screen render.
One key property of the commitProperties() function is that commitProperties() is always called before calls to measure().
measure()
The measure() method's only purpose is to set the components default size and the default minimum size. Setting width/height, explicitWidth/explicitHeight, or percentWidth/percentHeight will override the default size.
Flex only calls this method if explicitHeight or the explicitWidth is NaN. Setting a components width or height is equivalent to setting the components explicitWidth or explicitHeight properties. The only difference between width and explicitWidth is that width can change based on properties and scaling and explicitWidth will always be the value set to width or explicitWidth. The same goes for explicitHeight and height.
Properties set inside measure():
- measuredHeight, measuredWidth: Specify the default width and height of a component.
- measuredMinHeight, measuredMinWidth: Specifies the minimum width and height that Flex will set the component to.
layoutChrome()
The layoutChrome() method is used to define the border around the component. The border of a component should be updated in this function. The primary reason for the layoutChrome() method is the autoLayout property on ui components. When autoLayout is set to false, updateDisplayList() will only fire once where as layoutChrome() will continue to update as expected.
updateDisplayList()
The updateDisplayList() method is used for sizing and positioning all children components. Parent containers should size the current object.
updateDisplayList() will always be called before a component is rendered on the screen. When setting the size and position of a child component, you should use setActualSize() and move() to size and position the children respectively.
updateDisplayList() has two parameters, unscaledWidth and unscaledHeight. This is the prescaled height and width of the current component in the components coordinates. Sizing should be based off of the prescaled height as the scaling actually occurs after updateDisplayList() is called.
Calling these methods is performed by calling the corresponding invalidate method.
There are three invalidate methods:
- invalidateDisplayList(): Signals the framework to call the updateDisplayList() and layoutChrome() methods at the next appropriate time.
- invalidateProperties(): Signals the framework to call the validateProperties() method at the next appropriate time.
- invalidateSize(): Signals the framework to call the measure() method at the next appropriate time.
createChildren() does not have an invalidate call as createChildren() is called when addChild is called on the current object.
This is a general overview of the flex component life cycle and its associated functions. There exists a few other methods that can be situationally useful such as validateNow(), validateSize(), and others but they can be easily misused and cause slower performance.
