Flex Component Life-cycle

1
Flex Component Life-cycle
2
What is it?

• Sequence of steps that occur when you create a
  component object from a component class.
• As part of this process, Flex automatically calls
  component methods, dispatches events, and makes
  the component visible.

3
Component Life-cycle steps

• Creation
• Construction
• Configuration
• Attachment
• Initialization
• Life
• Invalidation
• Validation

4
Creation Construction

• Purpose
• Create an instance of a component class
• Configure the object by setting its initial
  properties
• Examples
• In Actionscript
• var bButton new Button()
• b.label test
• b.addEventListener(MouseEvent.CLICK, onClick)
• In MXML
• ltmxButton labeltest clickonClick(event) /gt

5
Creation Configuration

• Purpose
• Set initial properties with setters
• Generic setter features
• Check to see if the value has changed
• Set a private instance of the value
• Set a boolean flag to indicate the property has
  changed
• Schedule component for invalidation (if
  necessary)?
• Dispatch binding events (optional)?
• Adobe does this in their component framework.

6
Creation Configuration

• Check to see if the value has changedprivate var
  _labelString private var
  _labelChangedBoolean falsepublic function
  set label (valueString)void if (_label !
  value)

7
Creation Configuration

• Set a private instance of the new valueprivate
  var _labelString private var
  _labelChangedBoolean falsepublic function
  set label (valueString)void if (_label !
  value) _label value

8
Creation Configuration

• Set a boolean flag to indicate the value
  changeprivate var _labelString private
  var _labelChangedBoolean falsepublic
  function set label (valueString)void if
  (_label ! value) _label value _labelChan
  ged true

9
Creation Configuration

• Schedule component for invalidation
  (optional)private var _labelString
  private var _labelChangedBoolean
  falsepublic function set label
  (valueString)void if (_label ! value)
  _label value _labelChanged
  true invalidateProperties() invalidateSize()
  invalidateDisplayList()

10
Creation Configuration

• Dispatch binding events (optional)private var
  _labelString private var
  _labelChangedBoolean falsepublic function
  set label (valueString)void if (_label !
  value) _label value _labelChanged
  true invalidateProperties() invalidateSize()
  invalidateDisplayList()
  dispatchEvent(new Event(labelChanged))

11
Creation Configuration

• Dispatch binding events (optional)Bindable(lab
  elChanged)public function get label ()String
  return _label

12
Creation Attachment

• Purpose
• Attach the component to the display list.
• Component life-cycle is stalled after
  configuration until attachment occurs
• In Actionscript panel.addChild(button)
• In MXML
• Don't need to do anything, the child is
  automatically added according to how it is
  nested. ltmxPanel idpanel gt
  ltmxButton idbutton /gt lt/mxPanelgt

13
Creation Initialization

• Consists of 1 life-cycle phase and 3 events
• preinitialize event is dispatched on the
  component
• Component is in a very raw state. Its children
  have not yet been added (including internal
  children)?
• Use this event in rare circumstances (set the
  properties on a parent before the children are
  created)
• createChildren() method is called by Flex on the
  component
• override this method from UIComponent
• Add child components that make up your custom
  component
• Construct component, set properties, add to
  display list

14
Creation Initialization

• Consists of 1 life-cycle phase and 3 events
• initialize event is dispatched
• At this point, the component's children have been
  added and the component's initial properties are
  set, but it has not been sized, positioned, or
  processed for layout
• Use this event to perform additional processing
  before layout
• childAdd event is dispatched from parent
• If the parent is also being initialized, its
  initialize event is dispatched when all of its
  children are added.

15
Life Invalidation

• Deferred Validation
• Flex uses a deferred validation for rendering
  components in their various states
• Central concept in the component life-cycle
• Use private variables and boolean flags to defer
  setting any render-related properties until the
  proper validation method is reached

16
Life Invalidation

• Deferred Validation
• 3 methods that trigger validation methods
• invalidateProperties() --gt commitProperties()?
• Use this to set any of the component's properties
• invalidateSize() --gt measure()?
• Use this to change the component's default size
• invalidateDisplayList() --gt updateDisplayList()?
• Use this to change the component's size or
  position

17
Life Validation

• Purpose
• Apply the changes deferred until validation
• 3 Phases occur in validation
• commitProperties()?
• measure()?
• updateDisplayList()?

18
Life Validation

• commitProperties()?
• Purpose
• Commit any changes to component properties
• Synchronize changes to occur at the same time or
  ensure that they are set in a specific order
• When is it called?
• Immediately after the initialize event during
  component creation
• Whenever invalidateProperties() is called
• What is its phase order
• This method is called before measure() or
  updateDisplayList()?
• This allows you to set property values that
  influence size or position

19
Life Validation

• commitProperties()?
• Example

20
Life Validation

• measure()?
• Purpose
• Calculate the component's preferred width and
  height and its preferred minimum width and height
• When is it called?
• After commitProperties() during initialization
• When the invalidateSize() method is called
• NOTE measure() will never be called if the
  component is given an explicit width or height
• What is its phase order?
• After commitProperties() and before
  updateDisplayList()?

21
Life Validation

• measure()?
• Caveats
• Only 4 properties should normally be set in
  measure()?
• measuredHeight
• The default height of the component
• measuredWidth
• The default width of the component
• measuredMinHeight
• The default minimum height of the component
• measuredMinWidth
• The default minimum width of the component
• Use getExplicitOrMeasuredHeight() and
  getExplicitOrMeasuredWidth() to get child
  proportions.

22
Life Validation

• measure()?
• Example

23
Life Validation

• updateDisplayList()?
• Purpose
• To position and size children
• Allow use of the Drawing API to draw on the
  component
• When is it called?
• After measure() during the initialization process
• When invalidateDisplayList() is called
• What is it's order?
• After measure()?

24
Life Validation

• updateDisplayList()?
• Caveats
• Position children using move(x, y), size them
  using setActualSize(width, height) instead of
  using the x, y, width, height properties
• Adobe recommends these methods because they work
  better with Container layouts.
• These methods are said to be quirky at times, so
  if they don't work for some reason just set the
  properties manually.

25
Life Validation

• updateDisplayList()?
• unscaledWidth, unscaledHeight
• Arguments for updateDisplayList()?
• Indicate the width and height of the component as
  dictated by its parent.
• They do not take scaleX and scaleY properties
  into account, so you will have to calculate
  scaling manually if needs be.
• updateComplete event is dispatched by the
  component after its updateDisplayList() is
  executed
• Use this event for actions that must be performed
  each time a component's characteristics change,
  not just when it is created.

26
Life Validation

• updateDisplayList()?
• Example