Invalidation Routines Pounded Into Your Cranium


Published on

Slides from the FlexCamp Belgium event hosted on December 11 2008 in Antwerp. This presentation goes through the basics of the Flex Framework invalidation mechanism, a necessary tool for proper custom component development. Download the Source code from

Published in: Technology, Business
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Invalidation Routines Pounded Into Your Cranium

  1. 1. Invalidation Routines, Pounded Into Your Cranium, Once And For All! Sakri Rosenstrom
  2. 2. The What?! Why?! <ul><li>Actionscript Picture Frame </li></ul><ul><ul><li>EX1_PropertyChange.mxml </li></ul></ul><ul><li>Problems: </li></ul><ul><ul><li>Unnecessary processing caused by repeated calls to update(); </li></ul></ul><ul><li>Nested Picture Frame </li></ul><ul><ul><li>Ex2_NestedPropertyChange.mxml </li></ul></ul><ul><li>Problems: </li></ul><ul><ul><li>- Effort to manage listeners handling change within nested components. </li></ul></ul>
  3. 3. Enter the Flex Invalidation Mechanism! <ul><li>Used by Flex Framework to: </li></ul><ul><ul><li>Optimize the handling of visual changes to components </li></ul></ul><ul><ul><li>Handle the layout of containers and the components within them. </li></ul></ul><ul><li>Easy to overlook: </li></ul><ul><ul><li>All Flex components already implement this. </li></ul></ul><ul><li>Tricky for both ‘flashers’ and ‘developers’. </li></ul><ul><li>Becomes necessary when developing custom components. </li></ul><ul><li>Forces developers to take advantage of the Framework as intended. </li></ul><ul><li>Can be seen as a Design Pattern </li></ul>
  4. 4. The How? Meet the 3 methods!
  5. 5. The How? Meet the 3 methods! commitProperties() commitProperties()
  6. 6. The How? Meet the 3 methods! measure() measure()
  7. 7. The How? Meet the 3 methods! updateDisplayList() updateDisplayList()
  8. 8. Nice to Meet you all! <ul><li>Implemented by UIComponent , override these in your custom components. </li></ul><ul><li>Invalidate -> Validate, with a frame in between… </li></ul><ul><li>Multiple invalidation calls in one frame result in only one validation call in the next frame. </li></ul><ul><li>Only called if Component has been added to a display list. During initialization all 3 are called, then, each is called into action when required, throughout the life of the component. </li></ul>
  9. 9. CommitProperties() <ul><li>Coordinates the modifications of multiple properties so that the modifications occur synchronously. </li></ul><ul><ul><li>Or, in English, fix the ‘update’ problem for the picture frame example. </li></ul></ul><ul><li>Invoked by InvalidateProperties(); </li></ul><ul><ul><li>Generally implemented using a number of Boolean flags, set in ‘getter setters’ to mark the component as ‘dirty’, (in need of updates). </li></ul></ul><ul><li>Create / Delete any children resulting from property changes. </li></ul><ul><li>Calls invalidateSize() and InvalidateDisplayList() depending on property changes. </li></ul><ul><li>Must call super.commitProperties(); </li></ul>
  10. 10. Measure() <ul><li>Sets the default component size and optionally sets the component's default minimum size. </li></ul><ul><li>Invoked by invalidateSize(); </li></ul><ul><li>ONLY SETS DEFAULT ‘DESIRED’ VALUES. </li></ul><ul><ul><li>Only used for setting: </li></ul></ul><ul><ul><ul><li>measuredWidth, measuredMinWidth </li></ul></ul></ul><ul><ul><ul><li>measuredHeight, measuredMinHeight </li></ul></ul></ul><ul><ul><ul><li>When extending UIComponent , no need to call super.measure(), UIComponent.measure() sets all 4 to 0; </li></ul></ul></ul><ul><ul><li>Default or ‘framework’ values are overridden by explicit or ‘user set values’, ( width, height, explicitWidth etc.) </li></ul></ul><ul><ul><li>In the absence of ‘Explicit’ values, measure is immeasurably important! </li></ul></ul>
  11. 11. UpdateDisplayList() <ul><li>Invoked with InvalidateDisplayList(); </li></ul><ul><li>Receives two arguments: </li></ul><ul><ul><li>unscaledWidth:Number, </li></ul></ul><ul><ul><li>unscaledHeight:Number </li></ul></ul><ul><ul><ul><li>Not necessarily what was calculated in measure() </li></ul></ul></ul><ul><ul><ul><li>These values can be set by the parent container. </li></ul></ul></ul><ul><li>Update positions of nested children, (re)draw any graphics created using the drawing API. </li></ul><ul><li>No need to Call super.updateDisplayList(uw,uh); when extending UIComponent , the implementation is empty. </li></ul>
  12. 12. So, lets seem them in action! <ul><li>Bare bones implementation of the three Invalidation methods in action: </li></ul><ul><ul><li>EX3_Invalidation.mxml </li></ul></ul>
  13. 13. Nice, So how exactly does it work? <ul><li>Let’s dive into the Framework! </li></ul><ul><li>mx.core.UIComponent </li></ul><ul><ul><li>Implements: </li></ul></ul><ul><ul><ul><li>Mx.managers.ILayoutMangerClient </li></ul></ul></ul><ul><ul><ul><li>Mx.core.IInvalidating </li></ul></ul></ul><ul><ul><li>UIComponentGlobals.layoutManager </li></ul></ul><ul><li>mx.managers.LayoutManager </li></ul><ul><ul><li>A Singleton in charge of executing the Invalidation Mechanism. </li></ul></ul>
  14. 14. More About LayoutManager… <ul><li>LayoutManager stores all requests in ‘ PriorityQueues ’ </li></ul><ul><ul><li>mx.managers.layoutClasses.PriorityQueue </li></ul></ul><ul><ul><li>Priority is set using ILayoutManagerClient.nestLevel </li></ul></ul><ul><ul><li>Crucial for layout: </li></ul></ul><ul><ul><ul><li>Traverses queues, handling items based on “size of priority” </li></ul></ul></ul><ul><ul><ul><li>commitProperties </li></ul></ul></ul><ul><ul><ul><ul><li>removeSmallest(); </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Top Down </li></ul></ul></ul></ul><ul><ul><ul><li>Measure </li></ul></ul></ul><ul><ul><ul><ul><li>removeLargest(); </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Bottom Up </li></ul></ul></ul></ul><ul><ul><ul><li>invalidateDisplayList </li></ul></ul></ul><ul><ul><ul><ul><li>removeSmallest(); </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Top Down </li></ul></ul></ul></ul>
  15. 15. The necessary ‘Flow’ Graphic!
  16. 16. Putting it to work, redo the picture frame <ul><li>Flex Picture Frame Example. </li></ul><ul><ul><li>EX4_PropertyChangeWithInvalidation.mxml </li></ul></ul><ul><ul><li>Implement our new friends, the invalidation methods. </li></ul></ul><ul><ul><li>Watch the number of updates decrease. </li></ul></ul><ul><li>Nested Picture Frame example: </li></ul><ul><ul><li>Ex5_NestedPropertyChangeWithInvalidation.mxml </li></ul></ul><ul><ul><li>Just use HBox </li></ul></ul>
  17. 17. Invalidation Explorer. <ul><li>Invalidation Explorer. </li></ul><ul><ul><li>Creates a data visualization based on the number of items waiting for validation. </li></ul></ul><ul><ul><li>Override Flex Flex Framework classes by duplicating them locally with the same package names. The compiler will grab the local version. </li></ul></ul><ul><ul><li>Get to know the ‘price’ of certain actions. </li></ul></ul>
  18. 18. Conclusion, Questions And Answers (hopefully) <ul><li>Further Reading: </li></ul><ul><ul><li>Flex Help Files </li></ul></ul><ul><ul><li>Flex Framework Source </li></ul></ul><ul><ul><li>FlexLib, OpenFlux… </li></ul></ul><ul><li>Spread the Gospel! </li></ul><ul><li>Something was explained too fast? </li></ul><ul><li>Something was not explained at all… </li></ul><ul><li>Please ask :) </li></ul><ul><li>Links: </li></ul><ul><ul><li>Http:// </li></ul></ul><ul><ul><li>Http:// </li></ul></ul>