Question

How do I skin alert box in flex 4?
I am not interested in customizing alert box via css, how do I create skin?

For example, for TextInput I would write in css:

s|TextInput
{
    skinClass: ClassReference("skins.TextInputSkin");
}

and in TextInputSkin.mxml

<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
    xmlns:fb="http://ns.adobe.com/flashbuilder/2009" 
    alpha.disabledStates="0.5" blendMode="normal">

    <fx:Metadata>
    <![CDATA[ 
        /** 
         * @copy spark.skins.spark.ApplicationSkin#hostComponent
         */
        [HostComponent("spark.components.TextInput")]  
        ...etc..

And get TextInput globally changed.
How do I make something similar for Alert? I can’t understand what is host component for alert.

Answer 1

The mx.controls.Alert control is an MX component, and for that reason doesn’t use the same skinning architecture that Spark components use, which is what your example uses. Frankly, even though Adobe still refers to it as “skinning” (cf., Skinning MX Components), it doesn’t seem to resemble the Spark process very much.

I’m not claiming to offer a comprehensive answer (which is why I’m community wiki-ing this), but as far as I can tell, you’re not going get around using styles.

The other relevant information you’ll probably need to know is that the Alert derives from the mx.containers.Panel class. So to whatever extent you can “skin” a Panel, is the extent to which you’re ultimately going to be able to “skin” an Alert.