Customize the alert box with two buttons

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

I dont know if you already found an solution but if no and you use flex 3 I can help you. This code should do what you need. Changing buttons and even changing style for text on buttons.

'

        protected function application1_creationCompleteHandler(event:FlexEvent):void
        {

            initStyles();

            var myAlert:Alert = Alert.show("description", "title", Alert.YES | Alert.NO);

            var arrOfButtons:Array = myAlert.mx_internal::alertForm.mx_internal::buttons;

            var button1:Button = arrOfButtons[0];
            var button2:Button = arrOfButtons[1];

            // buttons filters
            button1.styleName = 'buttonStyle1';
            button2.styleName = 'buttonStyle2';

            button1.addEventListener(Event.ADDED_TO_STAGE, onAddedToStage);
        }

        private function onAddedToStage(event:Event):void
        {
            // you can change text on buttons as well
            var btn:Button = event.target as Button;
            var text:UITextField = btn.getChildAt(0) as UITextField;
            text.filters = [ new GlowFilter(0x3946C0, 1, 4, 2, 8)];
        }

        /**
         * set style of remove button for alert
         **/
        private function initButton1Style():void
        {
            var buttonStyle1:CSSStyleDeclaration = new CSSStyleDeclaration('buttonStyle1');

            buttonStyle1.setStyle('fontWeight', "normal");
            buttonStyle1.setStyle('fontColor', 0x000000);
            buttonStyle1.setStyle('color', 0x000000);
            buttonStyle1.setStyle("fillColors", [ 0xffffff, 0xF5A2A2, 0xF5A2A2, 0xffffff ]);
            buttonStyle1.setStyle('fontSize', 10);

            buttonStyle1.setStyle('themeColor', 0xff0000);

            StyleManager.setStyleDeclaration(".buttonStyle1", buttonStyle1, true);
        }

        /**
         * set style of buy button for alert
         **/
        private function initButton2Style():void
        {

            var buttonStyle2:CSSStyleDeclaration = new CSSStyleDeclaration('buttonStyle2');

            buttonStyle2.setStyle('fontWeight', "normal");
            buttonStyle2.setStyle('fontColor', 0x000000);
            buttonStyle2.setStyle('color', 0x000000);
            buttonStyle2.setStyle("fillColors", [ 0xffffff, 0xBAFFAB, 0xBAFFAB, 0xffffff ]);
            buttonStyle2.setStyle('fontSize', 10);

            buttonStyle2.setStyle('themeColor', 0x7CCB6C);

            StyleManager.setStyleDeclaration(".buttonStyle2", buttonStyle2, true);
        }


        private function initStyles():void
        {
            initButton1Style();
            initButton2Style();
        }

    ]]>
</mx:Script>

'

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).

Try this:

 package utils
    { 
        import flash.events.EventDispatcher;

        import mx.controls.Alert;
        import mx.controls.Button;
        import mx.core.mx_internal;

        public class AlertUtility extends EventDispatcher
        {        

            use namespace mx_internal;
            public static function getYesNoAlert(title:String, message:String,closeFunction:Function):void{

                var myAlert:Alert = Alert.show(message, title, Alert.YES | Alert.NO,null,closeFunction,null,Alert.NO);            
                var arrOfButtons:Array = myAlert.mx_internal::alertForm.mx_internal::buttons;

                var button1:Button = arrOfButtons[0];
                var button2:Button = arrOfButtons[1];

                button1.styleName = 'alertBtnStyle1';
                button2.styleName = 'alertBtnStyle2';

            }        

        }
    }

and in your style css:

    mx|Button.alertBtnStyle1 {
        skin: ClassReference("skins.myEmphasizedSkin");
        /* desired style */
    }

    mx|Button.alertBtnStyle2 {
        emphasizedSkin: ClassReference("skins.myButtonDefaultSkin");
        /* desired style */

    }