Invalidation Routines,  Pounded Into Your Cranium,  Once And For All!   Sakri Rosenstrom
The What?! Why?! <ul><li>Actionscript Picture Frame </li></ul><ul><ul><li>EX1_PropertyChange.mxml </li></ul></ul><ul><li>P...
Enter the Flex Invalidation Mechanism! <ul><li>Used by Flex Framework to: </li></ul><ul><ul><li>Optimize the handling of v...
The How? Meet the 3 methods!
The How? Meet the 3 methods! commitProperties() commitProperties()
The How? Meet the 3 methods! measure() measure()
The How? Meet the 3 methods! updateDisplayList() updateDisplayList()
Nice to Meet you all! <ul><li>Implemented by  UIComponent , override these in your custom components. </li></ul><ul><li>In...
CommitProperties() <ul><li>Coordinates the modifications of multiple properties so that the modifications occur synchronou...
Measure() <ul><li>Sets the default component size and optionally sets the component's default minimum size.  </li></ul><ul...
UpdateDisplayList() <ul><li>Invoked with  InvalidateDisplayList(); </li></ul><ul><li>Receives two arguments: </li></ul><ul...
So, lets seem them in action! <ul><li>Bare bones implementation of the three Invalidation methods in action: </li></ul><ul...
Nice, So how exactly does it work? <ul><li>Let’s dive into the Framework! </li></ul><ul><li>mx.core.UIComponent </li></ul>...
More About LayoutManager… <ul><li>LayoutManager  stores all requests in ‘ PriorityQueues ’ </li></ul><ul><ul><li>mx.manage...
The necessary ‘Flow’ Graphic!
Putting it to work, redo the picture frame <ul><li>Flex Picture Frame Example. </li></ul><ul><ul><li>EX4_PropertyChangeWit...
Invalidation Explorer. <ul><li>Invalidation Explorer. </li></ul><ul><ul><li>Creates a data visualization based on the numb...
Conclusion, Questions And Answers  (hopefully) <ul><li>Further Reading: </li></ul><ul><ul><li>Flex Help Files </li></ul></...
 
Upcoming SlideShare
Loading in …5
×

Invalidation Routines Pounded Into Your Cranium

2,579
-1

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 http://www.sakri.net/presentations/FlexCamp08_Belgium/InvalidationExamples.zip

Published in: Technology, Business
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,579
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
14
Comments
0
Likes
2
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://sakri.net/blog </li></ul></ul><ul><ul><li>Http://www.nascom.be/blog </li></ul></ul>
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×