Proposal: Invalidation mechanism for redrawing/recalculating in custom components

[Yennick Trevels]

Something which can become a bottleneck with custom components is executing
draw/measuring/property calculation code too much (I've seen this in Flex).
As I've seen in several JFXtras custom components, properties on components
are being refreshed, styles are being changed etc. every time a certain
property changes on the custom component.
This isn't such a problem when only one property is being changed on the
custom component, but when changing multiple properties on the component
right after each other this can lead to updates being executed multiple
times.

For example when you do this on your custom component:
myComponent.selectedItem(1)
myComponent.setDefault(0)

This can potentially lead to refresh code in the skin/behaviour class being
executed twice when this is shared logic behind these two properties.

In Flex there is an invalidation mechanism that avoids excessive refreshes
like this. I'll try to explain this for draw code, but Flex has equivalent
methods for measuring and property calculation code.

E.g. this is your custom component:

public class MyComponent extends UIComponent {

      private var _selectedItem:Item;
      private var _selectedItemChanged:Boolean;

      private var _default:Item;
      private var _defaultChanged:Boolean;

      override protected function updateDisplayList(measuredWidth:int,
measuredHeight:int):void {
              if(_selectedItemChanged) {
                         //perform redraw operations related to selected
item changes here
                         _selectedItemChanged = false;
              }

              if(_defaultChanged) {
                         //perform redraw operations related to default
item changes here
                         _defaultChanged = false;
              }
       }

       public function set selectedItem(item:Item):void {
              _selectedItem = item;
              //instead of calling refresh here immediately, invalidate the
displayList of the component
              _selectedItemChanged = true;
              invalidateDisplayList();
       }

       public function set default(item:Item):void {
              _default = item;
              //instead of calling refresh here immediately, invalidate the
displayList of the component
              _defaultChanged = true;
              invalidateDisplayList();
        }
}

What the invalidateDisplayList method exactly does is schedule a call to
the updateDisplayList method during the next frame, therefore avoiding
multiple calls to updateDisplayList when setSelectedItem and setDefault are
being called right after each other.
This mechanism becomes even more useful when part of the redraw code is
being shared between _selectedItemChanged and _defaultChanged.

Flex also has the following method pairs for measuring code and property
calculation code:
invalidateProperties() / commitProperties()
invalidateSize() / measure()


I'd like to know your thoughts on this :-)

Greetz,
Yennick