使用两个按钮自定义警报框

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

这使“接受”和“拒绝”按钮的外观相同

有人可以帮我解决这个问题吗？

谢谢 泽

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

不幸的是，我认为没有一种简单的方法可以做到这一点 - 通过循环遍历 Alert 上的所有按钮并将其样式名称设置为 buttonStyleName，在 AlertForm 中设置按钮样式。为了设置单独的按钮样式，我认为您必须同时扩展 Alert（以使用自定义 AlertForm 类）和 AlertForm（以覆盖 styleChanged 以分配单独的样式名称）。

Answer 3

试试这个：

 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 */

    }