Marc Hughes

I am a developer from a bit west of Boston.

Flicker related to modules and custom components

15 May 2009

In a Flex application I'm working on we've been plagued with some flickering problems that have been very tough to pin down. I think I've finally figured out (at least one) source of the problem. We have a bunch of custom components developed. Those components have static intializers that set up the default styles for them like this:

private static var classConstructed:Boolean = classConstruct();
private static function classConstruct():Boolean {
   if (!StyleManager.getStyleDeclaration("NumericDisplay"))
      var myStyles:CSSStyleDeclaration = new CSSStyleDeclaration();
       myStyles.defaultFactory = function():void
                    this.fractionLabelStyleName = "";
                    this.wholeLabelStyleName = "";
                    this.topGap = 0;
                    this.barStrokeColor = 0;
                    this.barColor  = 0;
                    this.barWeight = 2;
        StyleManager.setStyleDeclaration("NumericDisplay", myStyles, true);

} return true; }

Now, usually, that works A-OK. It runs before there's anything on screen so no flicker.

But, what happens if the class that contains that isn't in your main application swf and is instead a loaded module? Well, that initializer doesn't run until the module loads. And the call to StyleManager.setStyleDeclaration causes the entire application to update it's display which causes a visual flicker.

I was considering some solutions like: Making sure the class gets compiled into your main application swf. Add the default CSS to a .css file that gets loaded at startup instead of doing it in code.

But then I realized that the last param to the setStyle call determines whether or not to update styles, setting that to false fixes the flicker. Since the static initializer has to run before any of that component are constructed, we don't actually need to be doing an update anyways.

 StyleManager.setStyleDeclaration("NumericDisplay", myStyles, false);

After googling a bit, I found "best practice" examples that did it both ways. I'd suggest sticking with "false" due to this type of problem.