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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 | <?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> |
Hope this will get many of you out of the hassle finding the right divider. 
Tags: ActionScript, click, event, Events
This post was written by Andrei Ionescu
Views: 7962
Articles
hi, friend, it works great, thanks for your great work!
but i find out that if set liveDragging to false, it didn’t dispatch doubleclick when you dbclick the divider, so it didn’t work.
Has anyone else noticed when using SWFObject (I’m guessing this example does?) to embed a SWF file, and you drag/resize a devided box the entire container shakes? This does not happen when you use the wrapper exported from flex builder. Solution?
You are my God! I’ve been fussing with this identical problem for hours now! Great stuff, thanks for posting this!
Glad it helped you. That means Fx{r} is helping people out. But your god should not be me but the Almighty God above. He is our Creator an Saviour, blessed be His name. I know you said it like a joke but I felt like I had to tell you. Thank you for letting us know that you found a solution on Fx{r} for your problem. And please tell others about our blog if you think is a valuable resource
.
Hi
I’ve got a slider component here that doesn’t use dividers….
http://edsyrett.wordpress.com/2009/05/25/sliding-panel/
Hi, great post, works perfect. I was looking exactly for this example on how to handle the event doubleClick in HDividedBox and VDividedBox.
Thanks!