Invalidation Routines Pounded Into Your Cranium
Upcoming SlideShare
Loading in...5
×
 

Invalidation Routines Pounded Into Your Cranium

on

  • 3,081 views

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 ...

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

Statistics

Views

Total Views
3,081
Views on SlideShare
2,617
Embed Views
464

Actions

Likes
2
Downloads
13
Comments
0

4 Embeds 464

http://www.sakri.net 440
http://www.nascom.be 20
http://www.slideshare.net 3
http://translate.googleusercontent.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Invalidation Routines Pounded Into Your Cranium Invalidation Routines Pounded Into Your Cranium Presentation Transcript

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