增加Flex 3中警報框的按鈕之間的差距

Question

我試圖在警報框按鈕之間放置20-30px的間隙（是和否）。 但無法在flex中找到這樣的樣式點。我嘗試了水平差距，也填充，但徒勞無功。

以下是我嘗試的示例代碼，我在瀏覽網站時發現了這些代碼。

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

嘗試這樣：

添加FlexEvent.UPDATE_COMPLETE來檢測AlertForm在提醒：

a.mx_internal::alertForm.addEventListener(FlexEvent.UPDATE_COMPLETE, alertForm_updateHandler); 

而在這個處理程序從原來的檢測AlertForm複製一些東西updateDisplayList方法：

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

，其中120你的新差距。

希望這可以是有用的。

Answer 2

我唯一的想法就是實現了一類新的TitleWindow中或面板的孩子，並添加所有你想擁有的功能。我知道這不是最好的解決方案，但你可以嘗試。

這裏是我的建議：

---

//應用

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

---

//警報執行

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