Question

I have various components that are skinned through a programmatic skin. The skin class references a singleton class that holds various colors to be applied to different aspects of the component. The singleton class has default colors set to variations of black/grey etc. I’m loading in custom colors from an XML file that are then loaded into the singleton. I’m applying the custom skin through a css stylesheet that is included in the main Application mxml.

The problem is that when the swf initially loads, the components that are drawn on screen are black and don’t reflect the changes in color loaded from the XML file. I have some dropdown windows that show on button clicks and those dropdowns do reflect the correct colors from the XML file. Therefore, the system is working correctly, but the initial drawing of components obviously happens before the XML is loaded and applied to the singleton.

My question is, is there a way to apply a skin to an element programmatically by calling the constructor?

I have this in my css file:

.PanControlsBackground {
    borderSkin:ClassReference('skins.buttons.PanControlsBackground');
}

and I’m applying the class with this:

_app.panControls.styleName = "PanControlsBackground";

Is there a way to call:

_app.panControls.styleName = new PanControlsBackground();

or something to that effect? This way, I can remove the loading of the skins in the css file and control when they are instantiated to ensure that the correct colors are applied before displaying the various components.

Answer 1

You could use the styleManager to manipulate the style at run time. For example,

.PanControlsBackground {
  /* leave it blank */
}

And then in some script block:

styleManager.getStyleDeclaration(".PanControlsBackground").setStyle("borderSkin", skins.buttons.PanControlsBackground);

So, that’s one way of changing the skin in a programmatic way.

However, I don’t know much about how the garbage collection is handled on the old skins. For instance, how would the GC differ on this method of switching the skin versus just having a bunch of different CSS classes for each of your skins and switching between them? I can’t really answer that.

I think one could at least say that the above method would ensure that the default (or other minimal skin you might create) is used first, and one could control when in the initialization process the other skin get’s instantiated.