Styling Alerts – CAlerts v1.0

We’ve been busy for the last couple of weeks. And some posts have been DRAFT for quiet some time. I guess its high time I completed those posts and getting back into active posting mode😉 .

Back to Flex. This time we are looking at Alert Messages in Flex. While the flex alerts are nice looking, they are a bit too simple. So, I started looking at options for styling the alerts and found that it quiet easy to get a really sexy look and feel for the Alerts. Here goes,

Alert{
color : #0f3177;
title-style-name : “alertTitle”;
header-height:19;
border-thickness: 1;
drop-shadow-enabled: true;
drop-shadow-color :#d1ddf7;
background-color: #ffffff;
corner-radius :6;
border-style :solid;
header-colors : #90a4d1, #5970a0;
footer-colors : #9db6d9, #ffffff;
border-color : #5970a0;
}

.alertTitle{
font-family :Verdana;
font-size :10;
font-weight :bold;
text-align :left;
color :#ffffff;
}

The output of this would look like this –

Note: Thanks to Kumaran for churning up this sexy style🙂 .

Now, that we have applied some nice looking styles to our alerts. Lets, look at what else we can do to Alerts😉 .

Next, we needed a standard set of alerts that the team can use when they want a popup message anywhere in the application. So, I set about extending the Alert class to create alert.as. With alert class, the developer can popup different messages like this –

Information
alert.info('This is an info message');
//you can also pass a clickHandler here.

Confirmation
alert.confirmation('Are you sure you wish to delete all files?', clickHandler);

Error
alert.error('This is an error message');
//you can also pass a clickHandler here.

So, its as simple as that🙂 . Check out the source for more details. I will post a demo of this soon.

[ Demo | Source ]

64 Responses to Styling Alerts – CAlerts v1.0

  1. David says:

    Worked like a charm, thanks.

  2. udayms says:

    🙂 Welcome.

  3. Raj says:

    From your post:

    “… While the flex alerts are nice looking, they are a bit too simple…”

    You are being too kind there about the default Flex alerts. What you’ve done here is cool. Thanks.

  4. Very useful. I wonder if there could be a way to make different styles as well? Like, red background for error alerts, etc. Thanks for sharing this!

  5. udayms says:

    Yes… you should be able to do this very easily… you can have different styles for Alert and then swap them in the AS…

  6. nhoel says:

    im really new to here, i just googled around and i saw this page because im looking for a pop up window that would have a confimation yes – no button. im using a flash form in coldfusion can i use the confirmation window above? where should i put it?

    i need a pop up window that would confirm that user really wants to delete a certain info. please help. thank you very much in advance.

  7. Borek says:

    The look is really great, thanks for this article. Could you please point me to the icon set that you have used? I would like to add a question mark icon which is currently missing…

    Thanks,
    Borek

  8. udayms says:

    @Borek: I really don’t remember where I got it from. But, with photoshop, it shouldn’t be very difficult to create one.🙂

  9. udayms says:

    @nhoel: Sorry for the delay. I have been really busy lately. To have a confirmation prompt you can definitely use this component. You should call the following onclick of the DELETE button.

    alert.confirmation(‘Are you sure you wish to delete all files?’, clickHandler);

    The clickHandler is the method which will be called if the user clicks YES in the prompt. If the user clicks NO, then the prompt will close.

    Hope this helps.🙂

  10. Sponge says:

    Super Duper! Just what I was looking for! Now I can finally finish my webpage!

  11. jweldin says:

    confirmation seems to have been changed to confirm, just fyi, might save someone a few minutes of confusion.

  12. Faisal says:

    is it possible to remove the buttons? What if I just want to show the popup window for like “Saving…” and then have it remove on it’s own without a button click?

  13. vaibhav says:

    i want to add an icon to the alert. pls help.

  14. Vijay says:

    well then write your own action script which extends the mx.controls.Alert

  15. daynier says:

    Any idea what Flex 3 doesn’t accept the extended class as it is after unpacking the source.

    Also the styles need to be adjusted for flex 3. The text gets overlapped by the Title.

  16. Rick Root says:

    The title style doesn’t seem to work in flex 3 beta 3 (though I’m using the 2.0.1 SDK)…

    It’s because of the way your blog editor put the quotes in as forward and back double quotes instead of normal double quotes. =)

  17. Flex Coder says:

    Further enhancing alert.as should be the ability to return the reference when you call the static show() method. This is the default signature of the show() method on the Alert class anyway. In your code you’ve removed the returned reference.

    i.e. instead of:
    public static function info(message:String. closehanlder:Function=null) {

    }
    you should structure it like so:
    public static function info(message:String, closehandler:Function=null):Alert {
    return show(message, “Information”, Alert.OK, null, closehandler, iconInfo);
    }

    This allows you to grab a reference to the alert buttons so you can set the extra UI behaviors on them as well:

    var myAlert:alert;
    myAlert = alert.info(“Your info message”);
    myAlert.buttonMode = true;
    myAlert.useHandCursor = true;

    Just FYI🙂

    Nice work all the same.

  18. Tom says:

    Hi !

    I had a little problem of padding (my message was hide by the title bar), for fixing add that:

    message-style-name: alertMessage;

    .alertMessage {
    padding-top: 30;
    padding-bottom: 10;
    }

  19. Rao says:

    Hi Uday,
    Thanks for sharing this info. However I have been having trouble to add this as part of a component. Because in a component it does not let me add the stuff. And I could put this in a css but I could not find a way to style alert.setstyle…

    I know I am a novice, any help would be appreciated.

    Rao

  20. udayms says:

    @Rao:
    The alert.as extends the mx.controls.Alert… So, if Alert.setStyle exists, then it should work with alert.setStyle as well. Anyway, Let me try to create a sample and send it out to you.

  21. narendra says:

    Thanks for help

  22. dg says:

    Hi,
    I used the your sample code for alert, i am getting the header color, but the background color is not getting set.
    I have given the background-alpha as 1. I want to have a white background color for my alert message. Not able to set this. What may be the cause?

  23. Asha says:

    Hi,
    I am working on flex. I have created an application(main), then flex component (Canvas).
    I want double color background for canvas. some shaded color I need.
    How to do this?

  24. Liliana says:

    Hola! Tengo mi hoja de estilos y lo que quiero es poner un icon en la alerta. veo ke en tus alertas tienes iconos como es ke lo lograste. Te egradeceria la ayuda =D

  25. Katy says:

    Is it possible to change the text of the buttons so instead of having OK, Cancel, Yes or No you can define your own?

  26. Jonecir says:

    Hi, nice article! I’m new in Flex, and this little advises are really helpful. I have not tried yet!

    Jone

  27. More traffic says:

    Super Duper! Just what I was looking for! Now I can finally finish my webpage!

  28. Vidya says:

    very nice article. very helpful

  29. ag says:

    Hi,
    I could not get the example to work on my flex screen. I have a TitleWindow containing my screen elements and I wanted to use your code to style the alerts on that window. the window opens up as a popup. i get a message inside of flex builder that the css type selectors are not supported in Alert. Also, the styles don’t apply. Any clues ?

    Thanks.

  30. cc says:

    Can you update the link to the source? Getting 404 not found

  31. TunDev says:

    Thanks Man !!!

    Good Style

  32. Pab says:

    Can you update the link to the source? Getting 404 not found

    Thanks

  33. Constantine says:

    Hi! This might be a dumb question, but how do i create reusable alert windows like that?
    I am helping someone on a project in flex 3 and it is pretty large, so it would be good to avoid creating displayCustomAlert_Warning(or _Info, _Error) functions in blocks in every single component of the project. I tried creating “New…->MXML Component->based on: Alert”, and it works fine as long as you have to display alert with, say, in MXML part of the code (which is practically never). And flex doesnt let me specify ID property in the header of MXML Component based on Alert, so i fail to understand how i can call it from actionscript block of another component… I tried extending Alert class and creating a custom .as component, and that also failed, because i am noob trainee. I tried to RTFM, and it talks a lot about creating custom components, but usually like ComboBox (which is too damn simple).

    So, I would very much appreciate any tips! Thanks!

  34. Renjith says:

    Hi,

    One more query, My alert box is coming under the pdf document. Any idea on making this alert box to display over the pdf. Thanks ion advance,

  35. Padma says:

    Hi,

    I am not able to get the source code…can you please update the link.

    Also, is there a way to update the button labels dynamically?
    I need a way to update for eg. the okLabel after calling Alert.show
    Any help is appreciated

    Thanks in advance!

  36. Gill says:

    Below are the code i am using for Alert box.

    I need to make alertHeader BOLD and sixe 18. Below code does not seems to work.

    Any help is much appreciated.

    submitAlert = Alert.show(alertMsg, alertHeader, Alert.OK ,null, alertListener, null, Alert.OK );
    submitAlert.height=320;
    submitAlert.width=320;
    submitAlert.setStyle(“fontSize”,14);
    submitAlert.setStyle(“fontFace”,’arial’);
    submitAlert.setStyle(“header-fontSize”,18);

  37. Pingback: Flex custom Alert message «

  38. Pingback: Alert « VenkatCoolMind's

  39. ikko says:

    its so nice

    i try to use this one

    but source url is not available

    Please upload or tell me another url

    waiting your kinds response

  40. Vijay says:

    how can i add gif image to the alert box..
    I dont need any title or default buttons.

    I like to extend it for a ‘progressing event’..
    thanks in adv.

  41. Gemo says:

    Hello Author,

    Its nice to see this useful article. But not able to access the source code. Can u pls update the same? I need the code file for better understanding🙂

  42. Pingback: Applying CSS to Flex Components « Kusum's Blog

  43. Murilo says:

    HI
    it’s amazing!! I liked

    but, I would like to know, how do you do to put the images in the alert!!

    thank in advance!

  44. keeman says:

    don’t see to be able to download the source file.

  45. benny says:

    Can fix the link???

  46. Patrick says:

    Same here. Does any one still have the original code?

  47. Sridhar says:

    People for source please google calerts.zip.
    This took me to the below link where I downloaded the file.

    http://flexedtoolkit.googlecode.com/files/calerts.zip

    And thanks for the Custom Alert🙂

  48. Tahir Alvi says:

    Hi

    Are we add a title icon in alert.
    Please verify me as soon as possible

    Thanks

  49. Przemas says:

    Well done. What about makeing component based on Alert with returning result of confirmation Yes/No. I don’t want to implement action inside alert closehandle function. I would like to get result of chose Yes/No outside Alert

  50. Shif says:

    Hi, great help.
    How can I make a gradient background to the message body?
    Can I apply GradientCanvas to the alert?
    What does the property footer-colors do?
    Thanx

  51. Mel Gallian says:

    Once again terrific piece of work. I be able to get material I really liked reading I have a presentation, and similar information.

  52. blog home says:

    We’ve been looking forward to looking at this too. Superb read.

  53. William Blake~ The glory of Christianity is to conquer by forgiveness.

  54. Pingback: harikrishnaflex

  55. angel says:

    please post a demo

  56. angel says:

    how could i get the source code????????????

  57. Sid says:

    The source and demo links are not working.
    Can you please post once gain?

    And one more thing I want to ask is that
    how can I set an effect for alert remove?
    i.e. look at a link below
    http://blog.flexexamples.com/2008/09/15/creating-a-custom-creation-complete-effect-on-a-flex-alert-control-redux/

    here you can c the effect for creation complete.
    But if I want to add an effect on removal of it then?
    means on clicking Alert.OK the alert show go away with some effect.

    So how to do this without custom popups ?

  58. Karol says:

    is it possible to have different style for yes button and different for no button in the same alert?

    • Filip says:

      My services are avlbaliae any time*.*Fine Print: any time means whenever I am not sleeping, not doing anything else, and near a computer with an active internet connection, and assumes that I have checked my email and/or feed reader recently.

  59. Pingback: issues in Drag-n-Drop — Need  Help » free icons download

  60. Shiva says:

    The piece of CSS worked like a charm.. Thanks!! My alerts look loads better now..!!

  61. Do you mind if I quote a few of your posts as
    long as I provide credit and sources back to your weblog?
    My blog is in the exact same niche as yours and my users would really benefit from some of the information you
    provide here. Please let me know if this ok with you. Thank you!

  62. buy phen375 says:

    Thanks a lot for sharing this with all of us you really understand
    what you’re talking about! Bookmarked. Kindly additionally seek advice from my site =). We will have a hyperlink alternate arrangement among us

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: