Customize the alert box with two buttons - apache-flex

Question

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

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

Answer 2

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

Answer 3

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