Find me on:
Contact me at:

mikejuly24<at>

ramblingdeveloper.com

Search Ramblings
« Removing Grid Lines from Spark DataGrid Skin | Main | Flex Spark Radar Chart Cookbook »
Monday
Oct102011

Styling an Alert in Flex 4

There is a cookbook request on Adobe Cookbooks requesting information on how to style an Alert in Flex 4.  So naturally, we'll be discussing that here topic.

The truth is, styling an Alert in Flex 4 is almost exactly the same as styling an Alert in Flex 3 since Alert is still just a Halo component.  Rather simply, we'll just need to define a style tag (could also be defined in a CSS file) within our application to change the style of an Alert.  Here's a brief example of a Style tag which will give an Alert a yellow/red theme:

<fx:Style>
  @namespace mx "library://ns.adobe.com/flex/mx";
  mx|Alert{
    borderColor: red;
    backgroundColor: yellow;
    dropShadowVisible: true;
    chromeColor: red;
    titleStyleName: alertTitle;
    messageStyleName: alertMessage;
    buttonStyleName: alertButton;
  }
  .alertTitle{
    fontSize: 20;
    fontWeight: bold;
    color: yellow;
  }
  .alertMessage {
    fontWeight: bold;
    color: red;
  }
  .alertButton {
    color: yellow;
  }
</fx:Style>

Notice we're defining an "mx|Alert" section which is selecting the mx:Alert class to apply styles.  Within that section we are referencing other named styles such as alertTitle, alertMessage and alertButton which are logically named.

That's pretty much all we need to do.  Now when we create an Alert, it will have an unsightly red/yellow theme applied to it's text, borders and chrome!

See below for a demo with view source enabled in the right click menu:

PrintView Printer Friendly Version

EmailEmail Article to Friend

References (14)

References allow you to track sources for this article, as well as articles that were written in response to this article.
  • Response
    Response: sluts n bitches
    Rambling Developer - Ramblings - Styling an Alert in Flex 4
  • Response
    Rambling Developer - Ramblings - Styling an Alert in Flex 4
  • Response
    Rambling Developer - Ramblings - Styling an Alert in Flex 4
  • Response
    Response: google.com
    Rambling Developer - Ramblings - Styling an Alert in Flex 4
  • Response
  • Response
    Response: phen375
    Rambling Developer - Ramblings - Styling an Alert in Flex 4
  • Response
    Rambling Developer - Ramblings - Styling an Alert in Flex 4
  • Response
    Rambling Developer - Ramblings - Styling an Alert in Flex 4
  • Response
    Rambling Developer - Ramblings - Styling an Alert in Flex 4
  • Response
  • Response
    Rambling Developer - Ramblings - Styling an Alert in Flex 4
  • Response
    Response: tablets baratas
    Rambling Developer - Ramblings - Styling an Alert in Flex 4
  • Response
    Rambling Developer - Ramblings - Styling an Alert in Flex 4
  • Response
    By applying simple css,It's actually an easy way to get a good looking flex alert. This class actually offers the best options to customize the appearance. I really admire the style tag with good alert which really higlights with a vibrant color.

Reader Comments (2)

Very nice thanks
How about changing the distances between the elements, I tried padding no luck.
could the Buttons be moved to the right or left of the window?
I have a skin defined to all my spark buttons. could the MX button be replaced with Spark buttons?

May 8, 2012 | Unregistered Commentershira

Shira,

Unfortunately, there is no simple Spark equivalent to the mx:Alert. However, I think you might have luck using a SkinnablePopUpContainer so that you can utilize your existing Spark skins. There's an excellent walk through that might be of use to you here: http://help.adobe.com/en_US/flex/using/WS67cd75b2532ad652-1abb110512d5bda966d-8000.html This should give you great control over how an alert popup will look and how it will be laid out.

May 8, 2012 | Registered CommenterMike Roberts

PostPost a New Comment

Enter your information below to add a new comment.

My response is on my own website »
Author Email (optional):
Author URL (optional):
Post:
 
Some HTML allowed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>