Some notes from the Creating new Flex Components:


Every component extending from UIComponent in Flex experiences the component lifecycle:

   constructor
   commitProperties
   createChildren
   measure
   updateDisplayList

constructor:

- use this just to set initial properties
- do things that need to be done regardless of if component is shown on screen
- do NOT create children components or attempt to position items (component does not have enough info yet)
- constructor is called on new, other methods are called when component is added to the display list, e.g.:

   var blah:Button = new Button(); // constructor
   container.addChild(blah); // others

- in mxml, both calls are generated by placing the button tag on the page

createChildren:

- use this to create your child controls
- do NOT size or position them - ever
- at this point component does notknow how much screen space there is

measure:

- responsible for determining how big component should be in a perfect world
- it is a suggested size
- it is called by layout manager
- the issue is, to know how big your size should be, you need to know how big your children want to be
- layout manager starts at outer most component and works its way down
- measure sets measuredMinWidth, measuredMinHeight, measuredHeight, measureWidth
- these values form the basis of a "suggestion" provided by the component to its parent about how big it would like to be

updateDisplayList:

- reality check method .. it gets passed in unscaledWidth and unscaledHeight, which is the actual space it was allocated
- if you use more than this you get scrollbars
- it is respsonsible for positioning its children, which is up to your component

commitProperties:

- used to sync and coordinate property updates
- e.g. you have three props that work together, but you need all three to be set before doing something
- instead of checking flags in each property setter, you set a flag that indicates the property has changed and make a call to invalidateProperties()
- in commitProperties, you check your flags, do your work if all three properties have been set, and update your flags

You never call the lifecycle methods directly.  Instead, you use:

- invalidateDisplayList ... issues updateDisplayList
- invalidateProperties ... issues commitProperties
- invalidateSize ... issues size

Calling these ensures the framework schedules a call to the method at the next appropriate time.

A note about how data binding works behind the scenes.  When the compiler sees a bound expression, it just generates an anonymous event listener that re-reads the getter.  For example, if you define:

[Bindable("change")]
public function get selectedIndex():int {
   ...
}

public function set selectedIndex(idx:int):void {
   ...
   dispatchEvent("change");
}

With respect to component development, Flex Builder 3 adds:

- categorization of your components in Flex Builder
- default code generation
- ability to make the properties panel show a certain custom way for your component

The speaker gives his email address and blog:

   labriola@digitalprimates.net
   blogs.digitalprimates.net/codeSlinger