Search Flex Components Free

Custom Search

January 23, 2008

Styling the Flex Alert control

This is a more complex version of my previous example. This time in addition to making the Alert control’s text non-selectable, we use an embedded font for the Alert title, message, buttons, as well as edit the drop shadow, remove the rounded corners, and remove the button skins.

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx=""






<!-- Used by the ApplicationControlBar control. -->

<mx:String id="fileName" />

<mx:String id="fileSize" />

<!-- Used by the Alert control. -->

<mx:String id="message">The quick brown fox jumped over the lazy dog.

The quick brown fox jumped over the lazy dog.</mx:String>

<mx:String id="title">The quick brown fox jumped over the lazy dog?</mx:String>



import mx.controls.Alert;

private var a:Alert;

private function init():void {

var appInfo:LoaderInfo = Application.application.loaderInfo;

/* Just grab the filename from the SWF URL. */

fileName = (appInfo.url).split("/").pop();

/* Convert bytes to kilobytes. */

fileSize = (appInfo.bytesTotal / 1024).toFixed(2);


private function showAlert():void {

Alert.yesLabel = "Accept";

Alert.noLabel = "Reject";

Alert.buttonWidth = 120;

a =



Alert.NO | Alert.YES


/* Make the Alert form's text non-selectable. */

a.mx_internal::alertForm.mx_internal::textField.selectable = false;






src: url("./fonts/base02.ttf");

fontFamily: "Base02";


Alert {

titleStyleName: "alertTitle";

messageStyleName: "alertMessage";

buttonStyleName: "alertButton";

dropShadowEnabled: true;

shadowDistance: 5;

shadowDirection: right;

cornerRadius: 0;

embedFonts: true;

fontFamily: Base02;


.alertTitle {

letterSpacing: 0;

fontSize: 14;

color: red;


.alertMessage {

letterSpacing: 0;

fontSize: 10;

fontWeight: normal;

color: black;


.alertButton {

letterSpacing: 0;

fontSize: 11;

cornerRadius: 10;

fontWeight: normal;

textRollOverColor: white;

color: red;

skin: ClassReference(null);



<!-- Display SWF name and file size. -->

<mx:ApplicationControlBar id="applicationControlBar" dock="true">

<mx:Label id="info" text="{fileName} ({fileSize}kb)" />


<!-- Click to launch Alert control. -->

<mx:Button label="Launch Alert" click="showAlert()" />


Related Flex Tutorials