Настройте окно оповещения с помощью двух кнопок

Question

Мне нужно настроить окно оповещения двумя кнопками, и на обеих кнопках должны быть разные скины

Я смог сделать это для одной кожи. Но я не могу разобраться с двумя скинами.

Мой код, который у меня есть сейчас, ниже:

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";                           
}

И код Css ниже:

<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');
}

Это дает одинаковый скин для обеих кнопок "Принять" и "Отклонить"

Может кто-нибудь помочь мне с этим.

Спасибо Zee

Answer 1

Я не знаю, если вы уже нашли решение, но если нет, и вы используете flex 3, я могу вам помочь. Этот код должен делать то, что вам нужно. Изменение кнопок и даже изменение стиля текста на кнопках.

        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>

Answer 2

Попробуйте это:

 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';

            }        

        }
    }

и в вашем стиле css:

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

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

    }

Answer 3

К сожалению, я не думаю, что есть простой способ сделать это - стили кнопок устанавливаются в AlertForm путем циклического перебора всех кнопок в Alert и установки их стилевого имени в buttonStyleName. Чтобы установить отдельные стили кнопок, я думаю, вам нужно расширить как Alert (чтобы использовать собственный класс AlertForm), так и AlertForm (чтобы переопределить styleChanged для назначения отдельных имен стилей).