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

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!

• 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_PropertyChangeWithInva

lidation.mxml– Implement our new friends,

the invalidation methods.– Watch the number of updates

decrease.

• Nested Picture Frame example:– Ex5_NestedPropertyChange

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