Increase the gap between the buttons of Alert Box in Flex 3 - actionscript-3

Question

I am trying to put a gap of 20-30px between the Alert box buttons(YES and NO).
but unable to find such styling point in flex. I have tried horizontal-gap, and also padding, but in vain.
Below is the sample code i am trying, which i found when browsing through sites.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application name="Alert_style_test"
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white"
creationComplete="showAlert()">
<!-- Used by the Alert control. -->
<mx:String id="message">The quick brown fox jumped over the lazy dog.
The quick brown fox jumped over the lazy dog.</mx:String>
<mx:String id="title">The quick brown fox jumped over the lazy dog?</mx:String>
<mx:Script>
<![CDATA[
import mx.controls.Alert;
private var a:Alert;
private function showAlert():void {
Alert.yesLabel = "Yes";
Alert.noLabel = "No";
Alert.buttonWidth = 50;
a = Alert.show(
message,
title,
Alert.NO | Alert.YES
);
/* Make the Alert form's text non-selectable. */
a.mx_internal::alertForm.mx_internal::textField.selectable = false;
}
]]>
</mx:Script>
<mx:Style>
Alert{
color : #124332;
background-color: #ffffff;
header-colors : #243322, #243322;
header-height:19;
drop-shadow-enabled: true;
drop-shadow-color :#243322;
corner-radius :6;
border-style :solid;
border-thickness: 1;
border-color : #243322;
footer-colors : #243322, #ffffff;
title-style-name : "title";
horizontal-gap:500;
horizontal-separator-skin:white;
}
.title{
font-family :Verdana;
font-size :10;
font-weight :bold;
color :#ffffff;
}
.alertButton {
letterSpacing: 0;
fontSize: 11;
cornerRadius: 10;
fontWeight: normal;
textRollOverColor: white;
color: red;
horizontal-gap:-500;
}
</mx:Style>
<!-- Click to launch Alert control. -->
<mx:Button label="Launch Alert" click="showAlert();" />
</mx:Application>

Answer 1

Try something like this:
Add FlexEvent.UPDATE_COMPLETE to alertForm in your alert:
a.mx_internal::alertForm.addEventListener(FlexEvent.UPDATE_COMPLETE, alertForm_updateHandler);
And in this handler copy some stuff from original alertForm updateDisplayList method:
private function alertForm_updateHandler(event:FlexEvent):void
{
var form:UIComponent = a.mx_internal::alertForm;
var buttons:Array = a.mx_internal::alertForm.mx_internal::buttons;
var newX:Number;
var newY:Number;
var newWidth:Number;
newWidth = buttons.length * (buttons[0].width + 120) - 120;
newX = Math.round((form.width - newWidth) / 2);
for (var i:int = 0; i < buttons.length; i++)
{
buttons[i].x = newX
buttons[i].tabIndex = i + 1;
newX += buttons[i].width + 120;
}
}
where 120 is your new gap.
Hope this can be useful.

Answer 2

The only idea I have is to implement a new class as a child of TitleWindow or Panel and to add all the features you want to have. I know it is not the best solution, but you can try it.
Here are my proposals:
//Application
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
minWidth="955" minHeight="600">
<fx:Script>
<![CDATA[
import mx.events.CloseEvent;
private function onBtnClick():void
{
var title:String = "The quick brown fox jumped over the lazy dog?";
var message:String = "The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog.";
AdvancedAlert.buttonWidth = 70;
AdvancedAlert.buttonGap = 50;
AdvancedAlert.commonWidth = 400;
AdvancedAlert.show(message, title, AdvancedAlert.YES | AdvancedAlert.NO | AdvancedAlert.CANCEL, this._closeHandler);
}
private function _closeHandler(evt:CloseEvent):void
{
switch (evt.detail)
{
case AdvancedAlert.YES:
trace("yes");
break;
case AdvancedAlert.NO:
trace("no");
break;
case AdvancedAlert.OK:
trace("ok");
break;
case AdvancedAlert.CANCEL:
trace("cancel");
break;
}
}
]]>
</fx:Script>
<mx:Button click="onBtnClick()" label="Alert"/>
</mx:Application>
//Alert implementation
<?xml version="1.0" encoding="utf-8"?>
<mx:TitleWindow xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
layout="absolute"
width="{commonWidth}"
height="110"
styleName="titleWindow"
verticalScrollPolicy="off"
horizontalScrollPolicy="off"
creationComplete="onCreationComplete()" >
<fx:Style>
#namespace mx "library://ns.adobe.com/flex/mx";
.windowStyles {
color: #ffffff;
}
.titleWindow {
borderAlpha: 1.0;
borderColor: #8a9faa;
backgroundColor: #8a9faa;
cornerRadius: 5;
}
</fx:Style>
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.controls.Button;
import mx.core.FlexGlobals;
import mx.events.CloseEvent;
import mx.managers.PopUpManager;
public static const YES:uint = 0x0001;
public static const NO:uint = 0x0002;
public static const OK:uint = 0x0004;
public static const CANCEL:uint= 0x0008;
[Bindable]private var message:String;
[Bindable]public static var buttonGap:int = 20;
public static var buttonWidth:int = 80;
[Bindable]public static var commonWidth:int = 80;
[Bindable]private var buttonHeight:int = 25;
private var buttons:uint;
private var buttonNames:ArrayCollection = new ArrayCollection();
private function onCreationComplete():void
{
addButtons();
}
private function addButtons():void
{
buttonNames.removeAll();
hbButtons.removeAllChildren();
if ((YES & buttons) != 0)
buttonNames.addItem("Yes");
if ((NO & buttons) != 0)
buttonNames.addItem("No");
if ((OK & buttons) != 0)
buttonNames.addItem("Ok");
if ((CANCEL & buttons) != 0)
buttonNames.addItem("Cancel");
for each (var bn:String in buttonNames)
{
var btn:Button = new Button();
btn.width = buttonWidth;
btn.height = buttonHeight;
btn.label = bn;
btn.name = bn;
btn.addEventListener(MouseEvent.CLICK, onBtnClick);
hbButtons.addChild(btn);
}
}
private function onBtnClick(evt:Event):void
{
var currentButtonName:String = (evt.currentTarget as Button).name;
var closeEvent:CloseEvent = new CloseEvent(CloseEvent.CLOSE);
switch (currentButtonName)
{
case "Yes":
closeEvent.detail = YES;
break;
case "No":
closeEvent.detail = NO;
break;
case "Ok":
closeEvent.detail = OK;
break;
case "Cancel":
closeEvent.detail = CANCEL;
break;
}
this.dispatchEvent(closeEvent);
PopUpManager.removePopUp(this);
}
public static function show(message:String = "", title:String = "", buttons:uint = 0x4, closeHandler:Function = null):void
{
var advancedAlert:AdvancedAlert = new AdvancedAlert();
advancedAlert.message = message;
advancedAlert.title = title;
advancedAlert.buttons = buttons;
if (closeHandler != null)
advancedAlert.addEventListener(CloseEvent.CLOSE, closeHandler);
PopUpManager.addPopUp(advancedAlert, Sprite(FlexGlobals.topLevelApplication), true);
PopUpManager.centerPopUp(advancedAlert);
}
]]>
</fx:Script>
<mx:VBox id="vbMain" width="100%" height="100%">
<mx:Text id="txtMessage" text="{message}" width="100%" height="35" color="0xffffff" selectable="false"/>
<mx:HBox id="hbButtons" height="{buttonHeight}" width="100%" horizontalGap="{buttonGap}" horizontalAlign="center"/>
</mx:VBox>
</mx:TitleWindow>