apache-flex - Flex: HDividedBox を使用して分割された VBox の表示/非表示

Question

HDividedBox を介して分割された 2 つの VBox があります。HDividedBox をダブルクリックして、VBox の 1 つを表示または非表示にすることはできますか? メソッドとメソッド
の使用は知っていますが、この種の問題に対する HDividedBox 機能はありますか。moveDivider()getDividerAt()

Answer 1

したがって、HDividedBox の代わりにカスタム コンポーネントを使用することをお勧めします;)。

特にあなたのために - 分割線のダブルクリックを処理するイベントベースのコンポーネント (200ms - doubleClick 間隔):

<?xml version="1.0" encoding="utf-8"?>
<mx:HDividedBox xmlns:mx="http://www.adobe.com/2006/mxml" initialize="hdividedbox1_initializeHandler(event)">
    <mx:Metadata>
        [Event(name="dividerDoubleClick", type="mx.containers.DividerDblClickEvent")]
    </mx:Metadata>
    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;
            import mx.events.DividerEvent;
            import mx.events.FlexEvent;

            private var _timer:Timer = new Timer(200,1);                        

            protected function hdividedbox1_initializeHandler(event:FlexEvent):void{
                this.addEventListener(DividerEvent.DIVIDER_PRESS, divider_press);
            }           
            protected function divider_press(event:DividerEvent):void{
                if(_timer.running){
                    event.preventDefault();
                    event.stopPropagation(); // not sure what of it use

                    dispatchEvent(new DividerDblClickEvent(DividerDblClickEvent.DOUBLE_CLICK, event.dividerIndex));
                }else{
                    _timer.start();
                }
            }           
        ]]>
    </mx:Script>
</mx:HDividedBox>

ANDカスタムイベント

package mx.containers
{
    import flash.events.Event;

    public class DividerDblClickEvent extends Event{

        // Define static constant.
        public static const DOUBLE_CLICK:String = "dividerDoubleClick";

        public var dividerIndex:int = -1; // not set

        public function DividerDblClickEvent(type:String, dividerIndex:int = -1, bubbles:Boolean=false, cancelable:Boolean=false){
            super(type, bubbles, cancelable);// Call the constructor of the superclass.

            this.dividerIndex = dividerIndex;// Set the new property.
        }

        // Override the inherited clone() method.
        override public function clone():Event {
            return new DividerDblClickEvent(type, dividerIndex);
        }
    }
}

使用例:

    <?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:local="*" xmlns:c="mx.containers.*">

    <mx:Script>
        <![CDATA[
            import mx.effects.easing.Cubic;
        ]]>
    </mx:Script>

    <mx:AnimateProperty id="hide" easingFunction="{Cubic.easeIn}" target="{to_hide}" property="width" toValue="0" duration="700" />

<c:HDividedBoxD height="100%" width="100%" dividerDoubleClick="hide.play();" >
    <mx:VBox height="100%" width="50%" backgroundColor="#00FF00">
        <mx:Label text=" some text left 1"/>
        <mx:Label text=" some text left 2"/>
    </mx:VBox>
    <mx:VBox id="to_hide" height="100%" width="50%" backgroundColor="#0000FF">
        <mx:Label text=" some text right 3"/>
        <mx:Label text=" some text right 4"/>       
    </mx:VBox>      
</c:HDividedBoxD>       
</mx:Application>

必要に応じてそのモジュールを変更できます。私はただ感謝したい:)