Styling Alerts - CAlerts v1.0

April 10, 2007 by udayms

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 ]

Posted in ActionScript, Flex, Flex Components, GUI | 25 Comments

25 Responses to “Styling Alerts - CAlerts v1.0”

on April 10, 2007 at 2:02 pm1 David

Worked like a charm, thanks.
on April 10, 2007 at 7:14 pm2 udayms

Welcome.
on April 11, 2007 at 1:20 pm3 Raj

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.
on July 11, 2007 at 8:53 pm4 Alvaro Medina

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!
on July 12, 2007 at 3:38 am5 udayms

Yes… you should be able to do this very easily… you can have different styles for Alert and then swap them in the AS…
on July 21, 2007 at 1:21 am6 nhoel

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.
on July 25, 2007 at 2:34 pm7 Borek

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
on July 25, 2007 at 4:51 pm8 udayms

@Borek: I really don’t remember where I got it from. But, with photoshop, it shouldn’t be very difficult to create one.
on July 25, 2007 at 4:55 pm9 udayms

@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.
on August 9, 2007 at 9:26 pm10 Sponge

Super Duper! Just what I was looking for! Now I can finally finish my webpage!
on September 17, 2007 at 12:54 pm11 jweldin

confirmation seems to have been changed to confirm, just fyi, might save someone a few minutes of confusion.
on September 24, 2007 at 5:21 pm12 Faisal

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?
on October 4, 2007 at 12:35 pm13 vaibhav

i want to add an icon to the alert. pls help.
on November 8, 2007 at 7:40 pm14 Vijay

well then write your own action script which extends the mx.controls.Alert
on December 4, 2007 at 4:36 pm15 daynier

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.
on December 18, 2007 at 1:50 pm16 venki

hhksoioujiohjh
on December 19, 2007 at 5:54 pm17 Rick Root

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. =)
on January 8, 2008 at 3:54 pm18 Flex Coder

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.
on January 17, 2008 at 2:25 pm19 Tom

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;
}
on January 27, 2008 at 5:55 pm20 Rao

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
on January 27, 2008 at 6:00 pm21 udayms

@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.
on February 21, 2008 at 7:37 am22 narendra

Thanks for help
on April 2, 2008 at 5:10 am23 dg

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?
on May 29, 2008 at 8:58 am24 Asha

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?
on June 27, 2008 at 5:51 pm25 Liliana

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

Trackback URI | Comments RSS

	Joshua on Buttons with icons & prese…
	ana gomez on Client/User Idle Timeout …
	Vengateswaran on Autorefresher Component
	online casino play f… on Time Entry Component
	Kayes on Open-source TreeGrid Comp…

Flexed

Flex 2, Actionscript 3.0