| 12
 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
 
 |  
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" viewSourceURL="src/index.html">
 
    <mx:Script>
        <![CDATA[
	        private var dragSmallBox:Canvas;
	        private var dragArea:Rectangle;
	        private var draggableCanvas:Canvas = new Canvas();
 
            private function rollOutHandler(event:MouseEvent):void {
                // start dragging the canvas, limit the drag inside the stage
                draggableCanvas.startDrag(false, dragArea);
 
                // relatedObject is the object where the mouse went after the rollOut event
                event.relatedObject.addEventListener(
                	MouseEvent.MOUSE_UP, 
                	function():void {
	                    draggableCanvas.stopDrag();
 
	                    // we need to remove the rollOut event handler to avoid calling it
	                    // when trying to roll out when mouseUp was already handled
	                    dragSmallBox.removeEventListener(MouseEvent.ROLL_OUT, rollOutHandler);
	                }
                );
 
            };
 
            private function mouseDownHandler(event:MouseEvent, da:Canvas = null):void {
 
                if(da == null)
                {
                	dragArea = new Rectangle(0, 0,
                		stage.width-draggableCanvas.width,stage.height-draggableCanvas.height)
                }
                else
                {
                	dragArea = getCanvasRect(da);
                	dragArea.width = dragArea.width - draggableCanvas.width;
					dragArea.height = dragArea.height - draggableCanvas.height;
                }
 
            	dragSmallBox = new Canvas();
            	dragSmallBox.width = 15;
                dragSmallBox.height = 15;
 
                // comment out the following to hide the canvas
                // smallBox.setStyle("backgroundColor", 0xff0000);
                dragSmallBox.addEventListener(
                	MouseEvent.MOUSE_UP, 
                	function():void {
                    	draggableCanvas.stopDrag();
                    	dragSmallBox.removeEventListener(MouseEvent.ROLL_OUT, rollOutHandler);
                	}
                );
 
                draggableCanvas = Canvas(event.currentTarget);
                draggableCanvas.addChild(dragSmallBox);
 
                // move the smallBox to location where the current mouse pointer is its center
                dragSmallBox.move(
                	event.currentTarget.mouseX - (dragSmallBox.width / 2),
                    event.currentTarget.mouseY - (dragSmallBox.height / 2)
                );
 
                dragSmallBox.addEventListener(MouseEvent.ROLL_OUT, rollOutHandler);
            }
 
            private function getCanvasRect(c:Canvas):Rectangle{
            	return new Rectangle(0, 0, c.width, c.height);
            }
 
        ]]>
    </mx:Script>
 
    <mx:Script>
        <![CDATA[
 
            import mx.collections.XMLListCollection;
 
            [Bindable]
            private var company:XML =
 
              <list>
				<groupe name="APIM" id="0">
					<pannel name="Email" id="1"/>
					<pannel name="Print" id="2"/>
					<pannel name="File" id="3"/>
					<pannel name="Http/s" id="4"/>
					<pannel name="FTP" id="5"/>
				</groupe>
 
				<pannel name="Scripting" id="6"/>
				<pannel name="User Def" id="7"/>
 
         	</list>;
 
            [Bindable]
 
            private var companyData:XMLListCollection = new XMLListCollection(company.groupe);
 
            private function treeLabel(item:Object):String
            {
 
                var node:XML = XML(item);
                if( node.localName() == "groupe" )
 
                    return node.@name;
                else
                    return node.@name;
            }
 
        ]]>
    </mx:Script>
 
 
 
<mx:Canvas mouseDown="mouseDownHandler(event)" x="10" y="10" height="450" width="200" backgroundColor="red">
<mx:Tree id="tree" dataProvider="{companyData}"
       labelFunction="treeLabel"
       height="450" width="200"
       />
</mx:Canvas>
</mx:Application> | 
Partager