<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    xmlns:graphics="com.cynergysystems.graphics.*" 
    xmlns="*" layout="absolute"
    creationComplete="onCreationComplete()"
    >
    
    <mx:Script>
        <![CDATA[
            import mx.core.UIComponent;
            import mx.controls.Alert; 
            
            private var timer : Timer;
            private var timerInterval : Number = 100;

            private function onCreationComplete() : void
            {
                timer = new Timer(timerInterval);
                timer.addEventListener( TimerEvent.TIMER , onTimerEvent );
                timer.start();
            }

            private function onTimerEvent( event : Event ):void
            {
                bitmapDataTarget.source = new Bitmap( getUIComponentBitmapData( sourceContainer ) );
            }
            
            private function getUIComponentBitmapData( target : UIComponent ) : BitmapData
            { 
                var bd : BitmapData = new BitmapData( target.width, target.height );
                var m : Matrix = new Matrix();
                bd.draw( target, m );
                return bd;  
            }
            
        ]]>
    </mx:Script>
    
    <mx:XMLList id="treeData">
        <node label="Mail Box">
            <node label="Inbox">
                <node label="Marketing"/>
                <node label="Product Management"/>
                <node label="Personal"/>
            </node>
            <node label="Outbox">
                <node label="Professional"/>
                <node label="Personal"/>
            </node>
            <node label="Spam"/>
            <node label="Sent"/>
        </node>    
    </mx:XMLList>
    
    <mx:HBox width="100%" height="100%"
        paddingBottom="5" paddingLeft="5" paddingRight="5" paddingTop="5" >

        <mx:Panel   
            title="Interactive Container"
            id="sourceContainerPanel" 
            width="250" height="300"  >
            
            <mx:Canvas id="sourceContainer" width="100%" height="100%">            
                 <mx:Tree id="myTree" width="100%" height="100%" labelField="@label"
                showRoot="false" dataProvider="{treeData}" />
            </mx:Canvas>
            
        </mx:Panel>
        
        <mx:Panel  
            title="Mirror Image:" layout="absolute" 
            width="250" height="300" >
            
            <mx:Image id="bitmapDataTarget" />    
            
        </mx:Panel>
    
    </mx:HBox>
    
    
</mx:Application>