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 ]