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="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white" creationComplete="showAlert()" applicationComplete="init()"> <!-- 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> <mx:Script> <![CDATA[ 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.show( message, title, Alert.NO | Alert.YES ); /* Make the Alert form's text non-selectable. */ a.mx_internal::alertForm.mx_internal::textField.selectable = false; } ]]> </mx:Script> <mx:Style> @font-face{ 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); } </mx:Style> <!-- Display SWF name and file size. --> <mx:ApplicationControlBar id="applicationControlBar" dock="true"> <mx:Label id="info" text="{fileName} ({fileSize}kb)" /> </mx:ApplicationControlBar> <!-- Click to launch Alert control. --> <mx:Button label="Launch Alert" click="showAlert()" /> </mx:Application>

Creating a custom creation complete effect on a Flex Alert control

The following example shows how to specify a effect which gets played when an Alert control is displayed by setting the Alert control’s creationCompleteEffect style. You can also see how to embed both the normal and bold font using CSS and @font-face.

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:Style> @font-face { src: local("Verdana"); fontFamily: VerdanaEmbedded; } @font-face { src: local("Verdana"); fontFamily: VerdanaEmbedded; fontWeight: bold; } Alert { fontFamily: VerdanaEmbedded; creationCompleteEffect: myEffect; } </mx:Style> <mx:Script> <![CDATA[ import mx.controls.Alert; private var alert:Alert; private function button_click():void { alert = Alert.show("The quick brown fox jumped over the lazy dog", "Lorem Ipsum"); } ]]> </mx:Script> <mx:Sequence id="myEffect"> <mx:Parallel> <mx:Zoom /> <mx:Fade /> </mx:Parallel> <mx:Rotate /> </mx:Sequence> <mx:Button label="Launch Alert" click="button_click();" /> </mx:Application>

Flex: ISO-8859-1 vs. UTF-8

Hint:
In a flex/flash project we encoded our files using iso-8859-1 encoding resulting in the danish characters like æ, ø etc. not being encoded correct.

The adobe flex compiler seems to interpret all files not containing a Byte Order Mark (BOM) as utf-8 even though we specified the -compiler.actionscript-file-encoding option.
Changing our files to utf-8 encoding solved the problem and no -compiler.actionscript-file-encoding option was needed.

And luckily for that as the israfil maven flex plugin that we use doesn't support the -compiler.actionscript-file-encoding option in the latest available version (1.0).

Flex Timed Alert Example

Creat a New mxml file:

timedAlert.mxml

<?xml version=”1.0″ encoding=”utf-8″?> <mx:Application xmlns:mx=” http://www.blogger.com/ “ layout=”vertical” verticalAlign=”middle” backgroundColor=”white”> <!– creationComplete=”init()” –> <mx:Script> <![CDATA[ import mx.controls.Alert; import mx.managers.PopUpManager; private var myAlert:Alert ; /* public function init():void { myAlert = Alert.show(”My Alert”); this.addChild(myAlert); var myTimer:Timer = new Timer(1000,1); myTimer.start(); myTimer.addEventListener (TimerEvent.TIMER_COMPLETE,callComplete); } public function callComplete(event:TimerEvent):void{ this.removeChild(myAlert); } */ private function showAndHide(delay:Number):void { var alertText:String = “I'm an Alert control. I'll disappear in ” + (delay / 1000).toFixed(1) + ” seconds.”; var alertTitle:String = “Timed Alert”; myAlert = Alert.show(alertText, alertTitle); setTimeout(hideAlert, delay); } private function hideAlert():void { PopUpManager.removePopUp(myAlert); } ]]> </mx:Script> <mx:Button label=”Launch alert” click=”showAndHide(3000);” /> </mx:Application>