November 17, 2010

Real Component Development on the Flex 4 Architecture (RIA Unleashed: Boston 2010)

Real Component Development on the Flex 4 Architecture by Michael Labriola

This was a hands on lab so these notes just capture general concepts discussed.

Think of Flex 4 components as the atoms of the system.


  • highly reusable

  • no external dependencies

  • everything is passed into them

  • participate in Flex lifecycle (defined by UIComponent)

  • know how big they are and should lay out nicely



Reusable components should be written in AS3 as MXML components with children can't be extended. MXML components should really be considered leaf nodes.

In Flex 3 you used UIComponent while for Flex 4 use SkinnableComponent (which separates out its visuals). In Flex 3 you used addChild() while for Flex 4 use addElement.

Parent's size children in Flex, this is what you get. The measure() method is concerned with setting measuredHeight, measuredWidth, measuredMinHeight, and measuredMinWidth.

In updateDisplayList(unscaledWidth, unscaledHeight), maybe you add scrolling if your contents won't fit in the size give, tell children via setActualSize(width, height).

In commitProperties(), continue to follow the check flag and component exists before making changes.

SkinnableComponent delegates to skin. Define SkinPart through meta-data. When the skin is set Flex adds parts to the class and calls partAdded. Typically use interfaces like IGraphicElement and IVisualElement to ensure the skin can really do whatever it wants.

Tags: flex riaunleashedboston2010 skinning