Customize Alert Box by applying styles

Tired of seeing the dull looking default flex alert box…? Need to show some alert box somewhat like this below? This can be achieved by applying styles. The code is as follows…

Inside script tab function:-

<mx:Script>
    <![CDATA[
      import mx.controls.Alert;
      private function alertTest():void{
        var alert:Alert;
        alert = Alert.show("Designed by Paritosh Bisi","Heloo...!!!");
        alert.styleName = "myalertstyle";
      }
    ]]>
  </mx:Script>

Inside style tag:-

<mx:Style>
    .myalertstyle
    {
      background-color: #00FFFF;
      cornerRadius: 0;
      creationCompleteEffect: myEffect;
      title-style-name:alertTitle;
      color:#000000;
      font-family:verdana;
      font-size:11;
      area-fill:#000000;
      border-color:#000000;
      border-style:solid;
      drop-shadow-enabled:true;
      shadow-direction:center;
      shadow-distance:0;
      drop-shadow-color:#000000;
      button-style-name:mybuttonstyle;
      fill-colors:#000000;
    }
    .mybuttonstyle
    {
      cornerRadius: 0;
      color:#000000;
      background-color: #330000;
    }
  </mx:Style>

We have to put the above code in the main application.

Instead of putting this style codes inside style tag, we can create a .css file and put these style codes. in style tag we need to refer the .css file with the source propery as follows…

<mx:Style source=”myCss.css”/>

Please note that, it is better to put the .css file reference in the main application file. Refering from some other places may result in different looking styles.

This code will give us some different looking, colorful and stylish alert box.

Happy Flexing…:-)