Flex Examples
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.
Since this example uses the mx_internal namespace, you can't always depend on this behavior to work in future versions of the Flex SDK. Use at your own risk.
<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2007/08/11/styling-the-flex-alert-control/ --> <mx:Application name="Alert_style_test" 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>
View source is enabled in the following application.
Base 02 font by www.stereo-type.net.
Peter deHaan
Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.
Share
I tried compiling this example and it does work fine except for the button face which still have the rounded borders.
The same thing happened when i tried another example from this site.
i’m not sure, but i think it’s the line
skin: ClassReference(null);
that does not work.
any idea?
I’m using the flex sdk 2.0.1 with hotfix 1.
I’d like to be able to use the button class without the standard face so i’d really like this to work.
nl,
I believe the “skin” style is new to Flex 3.
http://livedocs.adobe.com/flex/201/langref/mx/controls/Button.html#styleSummary (Flex 2.0.1)
http://livedocs.adobe.com/labs/flex3/langref/mx/controls/Button.html#styleSummary (Flex 3 beta)
In Flex 2 you may need to set the various skin states (disabledSkin, downSkin, overSkin, upSkin, and the various selected*Skin styles) separately.
Sorry for the confusion, I primarily do all these entries in Flex 3 and don’t do much backwards compatibility testing (as you probably discovered).
Peter
ok!
That makes sense.
Thanks for the info.
Hi, I was wondering if there is a way to change the blur en transparant white effect of the Alert class…
nocturnalfrog,
Check out the following styles:
modalTransparencyBlur,modalTransparency,modalTransparencyColor, andmodalTransparencyDuration.For more information, and an example, see “Changing a modal Alert control’s blur, transparency and transparency color”.
Hope that helps,
Peter
How do you switch the yesButton/noButton actions ?
I solved as following:
a.defaultButton.addEventListener(MouseEvent.CLICK, setClick); private function setClick(evt:MouseEvent):void { // my actions... }How and why we can not be able to resize the Alert popup.
It is set to a certain size and i still couldnt find a way to resize it.
If you use large typeface everything is overlaping. It is just really anoying.
Ali Tan Ucer,
Does something like this work for you?
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:Script> <![CDATA[ import mx.managers.PopUpManager; import mx.controls.Alert; private var alert:Alert; private function init():void { alert = new Alert(); alert.width = 500; alert.height = 400; alert.text = lorem; PopUpManager.addPopUp(alert, this); PopUpManager.centerPopUp(alert); } ]]> </mx:Script> <mx:String id="lorem" source="lorem.html" /> <mx:Button click="init();" /> </mx:Application>Peter
How did you know about all proprerties to Style Alert Class?
Nivaldo,
By reading the docs, of course! :)
http://livedocs.adobe.com/flex/3/langref/mx/controls/Alert.html
Peter
Hey guys,
I m making a skin for Flex3. I successfully skinned the Panel component using a PNG asset and the “borderSkin” property. It looks just fine, but the Alert component (which uses the Panel component) displays to a smaller size than it should, so the title, message and button(s) just overlap and everything gets messy.
By progressively removing CSS directives from the Panel {} declarations block, I isolated the one that it’s causing trouble: it is the “borderSkin” definition itself. Merely setting a “borderSkin” on the Panel component makes the children of an Alert component overlap, due to lack of space.
Any idea as to why?
Thanks in advance,
C
Hi .. all anyone can tell me how to accept input from user through AlertBox, i am trying but m not getting the way .. pls help
Hi guys,
How can I include HTML formatted message in my Alert? I’ve tried to use myAlert.mx_internal::alertForm.mx_internal::textField.htmlText=”text here”; or something like this, but the Alert box doesn´t adapt itself according to the text.
Any idea?
Thanks in advance,
AToyansk
Does anyone has an idea about “ciacob’s” question? (2 question/replies above this post)
I hav e the same problem.
Any help?
====================
Following is “ciacob’s” problem for ur reference.
–
ciacob May 8, 2009 at 6:14 am
Hey guys,
I m making a skin for Flex3. I successfully skinned the Panel component using a PNG asset and the “borderSkin” property. It looks just fine, but the Alert component (which uses the Panel component) displays to a smaller size than it should, so the title, message and button(s) just overlap and everything gets messy.
By progressively removing CSS directives from the Panel {} declarations block, I isolated the one that it’s causing trouble: it is the “borderSkin” definition itself. Merely setting a “borderSkin” on the Panel component makes the children of an Alert component overlap, due to lack of space.
Any idea as to why?
Peter,
Would you consider updating this for Flex 4? I cannot get it to work…
thanks
@Mark,
This isn’t exactly the same, but fairly close:
Peter