CODEWITHSUNDEEP
apache-flexflex4
user940016
user940016

Reputation: 2938

Alert styles in Spark

In Flex 3 I had the following styles defined for an Alert component:

Alert 
{
    messageStyleName: alertMessageStyle;
    titleStyleName: alertTitleStyle;
    buttonStyleName: alertButtonStyle;
}

.alertMessageStyle
{
    borderStyle: solid;
    borderAlpha: 0;
    roundedBottomCorners: true;
    cornerRadius: 9;
    headerHeight: 20;
    backgroundAlpha: 0.9;
    highlightAlphas: 0, 0;
    headerColors: #ffffff, #ffffff;
    backgroundColor: #ffffff;
    shadowDistance: 4;
    shadowDirection: right;
    dropShadowColor: #333333;
    color: #666666;
    textAlign: center;
    fontFamily: Arial;
    fontSize: 14;
    fontWeight: bold;
}

.alertTitleStyle
{
    color: #666666;
    backgroundColor: #ff0000;
    textAlign: center;
    fontFamily: Arial;
    fontSize: 13;
    fontWeight: bold;
}

.alertButtonStyle
{
    fontFamily: Arial;
    fontSize: 12;
    backgroundColor: #ff0000;
}

Now I'm migrating to Flex 4 and Spark doesn't have an Alert component, so I'm using the same styles and just added mx|Alert, but only the message style is working! The title and button styles are ignored! Can someone please explain me how to make them work? Thanks.

Upvotes: 0

Views: 1299

Answers (2)

Ilya Zaytsev
Ilya Zaytsev

Reputation: 1055

Title and button styles works fine for 4.6 flex framework. Fix .alertButtonStyle and use chromeColor if you want change bg:

.alertButtonStyle
{
    fontFamily: Arial;
    fontSize: 12;
    chromeColor : #ff0000;
}

.alertTitleStyle class apply for titleTextField:UITextField; Use only styles like font styles.

Upvotes: 1

Imran Haider
Imran Haider

Reputation: 72

You have to add mx|Button style, it will add automatically to Alert button. I am using this code.

mx|Alert{
    borderColor: #0066cc;
    borderThicknessLeft: 3;
    borderThicknessTop: 1;
    borderThicknessBottom: 3;
    borderThicknessRight: 3;
    cornerRadius: 3;
    headerHeight: 30;
    backgroundAlpha: 1;
    highlightAlphas: 0.36, 0;
    headerColors: #003366, #0066cc;
    footerColors: #e7e7e7, #c7c7c7;
    backgroundColor: #ffffff;
    shadowDistance: 2;
    dropShadowColor: #333333;
    titleStyleName: "AlertTitle";
    color:#000000;
}

.AlertTitle {
    color: #ffffff;
    fontFamily: Arial;
    fontSize: 12;
    fontWeight: bold;
}

and for button

mx|Button{
    fontFamily: Arial;
    fontSize: 11;
    fontWeight: bold;
    color: #333333;
    textRollOverColor: #444444;
    textSelectedColor: #000000;

    upSkin:Embed("assets/images/btn_common_n.jpg");
    downSkin:Embed("assets/images/btn_common_h.jpg");
    overSkin:Embed("assets/images/btn_common_h.jpg");
    skin:Embed("assets/images/btn_common_n.jpg");*/


}

Upvotes: 0

Related Questions