1

アラートボックスのボタン(YESとNO)の間に20〜30pxのギャップを入れようとしています。しかし、フレックスでそのようなスタイリングポイントを見つけることができません。私は水平ギャップとパディングを試しましたが、無駄でした。

以下は私が試しているサンプルコードで、サイトを閲覧しているときに見つけました。

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

2 に答える 2

1

次のようなことを試してください:

アラートの alertForm に追加FlexEvent.UPDATE_COMPLETEします。

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

そして、このハンドラーで、元の alertFormupdateDisplayListメソッドからいくつかのものをコピーします。

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 は新しいギャップです。

これが役立つことを願っています。

于 2012-12-18T06:50:59.717 に答える
1

私が持っている唯一のアイデアは、新しいクラスを TitleWindow または Panel の子として実装し、必要なすべての機能を追加することです。それが最善の解決策ではないことは承知していますが、試すことができます。

新しいアラート ウィンドウ

ここに私の提案があります:


//応用

<?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>
于 2012-12-18T00:40:12.833 に答える