FLEX{er}

This was a tricky issue… but solvable. I needed to found a way to collapse the left panel of a HDividedBox. This can be easily done by using moveDividerTo() method or setting getDividerAt().x (for vertical getDividerAt().y) property to the desired value. The problem is this: if you want to collapse the left at double click on the divider you cannot easily know on which divider the event occurred. This is because: the the double click event on the HDividedBox is triggered everywhere on the object and the currentTarget property of the event is always the HDividedBox object, and the target property of the event object returns two different things when clicking on the divider. If the double click is on the handle the target property is a skin, if it is upper or bellow the target is the BoxDivider object.

The whole process to find the divider on which the double click event occurred, is in handleDoubleClick() method. It should not rise any problems to you. The process is like this:

find if the double click is on the divider (on the handle or not) using e.target.name
if the e.target is skin we take its parent (which is BoxDivider object) otherwise we take it as it is (which is also BoxDivider object)
we iterate through all dividers of the HDividedBox (using numDividers property) and we compare the names to see which one is

Now here is the application… You can collapse the left panel by double clicking on the left divider, move dividers to the desired position by setting a position in the inputs and follow everything in a debug text area.

Please notice that even though we set the left divider position to 0 at double click it is 2. So, the divider will never reach 0 (zero) probably because in HDividedBox, in between the children is a gap/padding.

The code is well commented and easily to follow.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    layout="absolute" width="600" height="588"
    applicationComplete="start()">
    <mx:HDividedBox 
        id="divBox"
        x="10" y="10" width="580" height="380"
        liveDragging="true"
        doubleClickEnabled="true"
        doubleClick="handleDoubleClick(event)">
        <mx:Panel title="Panel 1" height="100%" width="200">
            <mx:Canvas id="cnv1" width="100%" height="100%">
            </mx:Canvas>
        </mx:Panel>
        <mx:Panel title="Panel 2" height="100%" width="100%">
            <mx:Canvas id="cnv2" width="100%" height="100%">
            </mx:Canvas>
        </mx:Panel>
        <mx:Panel title="Panel 3" height="100%" width="250">
            <mx:Canvas id="cnv3" width="100%" height="100%">
            </mx:Canvas>
        </mx:Panel>
    </mx:HDividedBox>
    <mx:Label x="10" y="398" text="First Divider"/>
    <mx:TextInput x="10" y="422" id="div1"/>
    <mx:Label x="231" y="398" text="Second Divider"/>
    <mx:TextInput x="231" y="422" id="div2"/>
    <mx:Button x="178" y="422" label="Set" 
        click="handleSetDiv1(event)"/>
    <mx:Button x="399" y="422" label="Set" 
        click="handleSetDiv2(event)"/>
    <mx:Label x="10" y="452" text="Debug"/>
    <mx:TextArea id="debug" x="10" y="478" 
        width="580" height="100"/>
    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;
 
            // variables making possible pannel colapse
            private var _previousDivierPos:Array;
            private var _isClosed:Array;
 
            // initialization
            private function start():void
            {
                _previousDivierPos = new Array();
                _isClosed = new Array();
                for (var i:int = 0; i < divBox.numDividers; i++)
                {
                    _isClosed[i] = false;
                }
            }
 
            // handle for first set button
            private function handleSetDiv1(e:MouseEvent):void
            {
                // set first divider at specified position
                divBox.getDividerAt(0).x = Number(div1.text);
                debug.text += "divider 0: " + divBox.getDividerAt(0).x + "px\n";
            }
 
            // handle for second set button
            private function handleSetDiv2(e:MouseEvent):void
            {
                // set second divider at specified position
                divBox.getDividerAt(1).x = Number(div2.text);
                debug.text += "divider 1: " + divBox.getDividerAt(0).x + "px\n";
            }
 
            // Handler for double click event
            private function handleDoubleClick(e:MouseEvent):void
            {
                // get the name of the current target
                var theName:String = e.target.name.toString();
                // search for "boxdivider" string in the name
                var found:int = theName.search(new RegExp("boxdivider","i"));
 
                if (found > -1)
                {
                    // if "boxdivider" found we double clicked 
                    // on a divider
                    var theDividerObject:Object = new Object();
                    if (e.target.hasOwnProperty("className") && 
                        e.target.className == "BoxDivider")
                        // if the event target is BoxDivider 
                        // object its className property 
                        // will be "BoxDivider"
                        theDividerObject = e.target;
                    else
                        // otherwise is its skin so we will
                        // use its parent
                        theDividerObject = e.target.parent;
 
                    // we iterate thourgh all dividers to find
                    // its position    
                    for (var i:int = 0; i < divBox.numDividers; i++)
                    {
                        // if names are the same we found our 
                        // BoxDivider object
                        if (theDividerObject.name == divBox.getDividerAt(i).name)
                        {
                            // display its name and position
                            debug.text += "divider " + i + ": " + 
                                divBox.getDividerAt(i).x + "px \n";
                            // we collapse it
                            closePanel(i);
                        }
                    }
                }
            }
 
            // method to colapse the left panel
            private function closePanel(divId:int):void
            {
 
                if (!_isClosed[divId])
                {
                    // we close all previous dividers
                    for (var i:int = 0; i <= divId; i++)
                    {
                        // if already closed no change required
                        if (!_isClosed[i])
                        {
                            // getting the current position
                            var currentDividerPos:int = 
                                divBox.getDividerAt(i).x;
                            // if closed we open
                            // save current position
                            _previousDivierPos[i] = currentDividerPos;
                            // move to zero position
                            divBox.getDividerAt(i).x = 0;
                            // set close flag
                            _isClosed[i] = true;
                        }
                    }
                }
                else
                {
                    // othewrwise we close
                    // move to previous saved value
                    divBox.getDividerAt(divId).x = _previousDivierPos[divId];
                    // set close flag
                    _isClosed[divId] = false;
                }
            }
        ]]>
    </mx:Script>
</mx:Application>