Customize the alert box with two buttons.

Question

Hi

I need to customize my alert box with two button and both the button need to have different skins on them.

I was able to do it for one skin. But i am unable to figure out about the two skins.

My code that i have right now is below:

public function Messages():void
{   
            Alert.buttonWidth = 100;                            
            Alert.yesLabel = "Accept";
            Alert.noLabel = "Reject";                           
            var alert:Alert = Alert.show("Accept video chat request from "+far_alias+"?", "Incoming Video Chat Request", Alert.YES | Alert.NO | Alert.NONMODAL, Sprite(Application.application), handleIncomingCallResponse, null, Alert.YES);                                                  
            alert.data = cm;
            alert.name = alert_name;
            alert.styleName = "requestVideoAlert"
            _alertDic[alert_name] = alert;

            Alert.yesLabel = "Yes";
            Alert.noLabel = "No";                           
}

And the Css code is below:

<mx:Style>
.requestVideoAlert
{       
    background-color: #000000;
    back-color: #000000;
    area-fill:#000000;
    border-color:#000000;       
    dropShadowEnabled: false;
    button-style-name: cancelbtn;
}
.cancelbtn
{
    skin: Embed(source='assets/images/videoChat-cancel-button.png');
}

This give the same skin on both the buttons "Accept" and "Reject"

Can some one help me with this.

Thank you Zee

Answer 1

Unfortunately, I don't think there's a simple way of doing this - the button styles are set in AlertForm by looping through all the buttons on the Alert and setting their stylename to buttonStyleName. In order to set seperate button styles, I think you'd have to extend both Alert (to use a custom AlertForm class) and AlertForm (to override styleChanged to assign seperate style names).