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:

Comments

[shira]

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?

[Mike Roberts]

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.