Custom Alert in Flex 3

Usually ‘Alert’ can`t have its default skin class, If you extend ProgrammaticSkin class and add this skin to Alert, It’s lose its original dimensions, because Alert, TitleWindow, Panel , components default skin is PanelSkin class. The solution is extending PanelSkin and applying it as a ‘border-skin’ in style declaration. The mx.skins.halo package contains PanelSkin Class which will be extended and draw our own skin programmatically. Here is custom skin defined in action script 3.0 ‘ CustomeAlertSkin.as’ .

package

{

import mx.skins.halo.PanelSkin;

public class CustomeAlertSkin extends PanelSkin

{

public function CustomeAlert()

{

super();

}

override protected function updateDisplayList(unscaledWidth:Number, scaledHeight:Number):void

{

super.updateDisplayList(unscaledWidth,scaledHeight );

graphics.clear();

graphics.lineStyle(2,0xFFFF00,1);

graphics.beginFill(0x80aad4,1);

graphics.drawRoundRect(0,0,unscaledWidth, unscaledHeight,50, 50);

graphics.endFill();

}

}

}

Defining CustomeAlertSkin in style declaration

<mx:Style>

 Alert
    {
        border-skin : ClassReference("CustomeAlert");
        color : #FFFFFF;
    }
</mx:Style>

Now in application define a Alert component and test it. you find different Alert popup,

Advertisement