<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml"
    xmlns:jp="jabbypanda.controls.*" 
    styleName="plain" verticalGap="5" 
    backgroundColor="#669900" horizontalAlign="center"
    viewSourceURL="srcview/index.html" creationComplete="onCreationComplete()">    
      <mx:Style>
     Tree {
        depthColors: #FFCC33, #FFCC99, #CC9900;
        alternatingItemColors: red, green;         
     }     
     Panel {
        borderStyle: solid;           
        backgroundColor: #669900;      
     }
     Text {
         paddingLeft: 0;
         color: #FFFFFF;
         fontSize : 10px;
         textIndent : 0px;
         backgroundColor: #FFcc66;
     }
     .title {         
         fontSize : 12px;
         fontWeight: bold;
         color: #CCCCCC;         
     }
      </mx:Style>
      <mx:Script>
        <![CDATA[
            private function onCreationComplete() : void {
                problemTitle.htmlText = "For some reason method <b>'drawRowBackgrounds'</b> in Tree.as file from Flex 2.0.1 SDK does not handle <i>'backgroundDisabledColor'</i> and <i>'backgroundColor'</i> styles in the same manner as it was used to be in Flex 2.0 SDK.";
                fixTitle.htmlText ="Restore handling for <i>'backgroundDisabledColor'</i> and <i>'backgroundColor'</i> styles by reusing the code from implementation of the method <b>'drawRowBackgrounds'</b> in Tree.as taken from old Flex 2.0 SDK."
            }        
        ]]>
    </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 verticalAlign="middle" width="100%" height="50" verticalScrollPolicy="off">
          <mx:Text textAlign="right" styleName="title" text="Problem:" width="100"/>                                                        
          <mx:Text id="problemTitle" width="100%" textAlign="left" paddingLeft="0"/>                          
      </mx:HBox>
    <mx:HBox verticalAlign="middle" width="100%" height="50" verticalScrollPolicy="off">    
        <mx:Text textAlign="right" styleName="title" text="Fix:" width="100"/>
          <mx:Text id="fixTitle" textAlign="left" width="100%"/>                
      </mx:HBox>    
    <mx:Panel title="Example of enabled tree controls" width="90%" height="100%" layout="horizontal">
          <mx:VBox width="50%" height="100%">
              <mx:Label text="Tree UI component from Flex 2.0.1 SDK"/>
            <mx:Tree id="myTree" width="100%" labelField="@label" dataProvider="{treeData}" backgroundColor="#cccc99"/>
        </mx:VBox>    
        <mx:VBox width="50%" height="100%">
            <mx:Label text="updated Tree component"/>
            <jp:ExtendedTree id="myTree2" width="100%" labelField="@label" dataProvider="{treeData}" backgroundColor="#cccc99"/>
        </mx:VBox>                            
      </mx:Panel>  
      <mx:Panel title="Example of disabled tree controls" width="90%" height="100%" layout="horizontal">
          <mx:VBox width="50%">
              <mx:Label text="Tree UI component from Flex 2.0.1 SDK"/>                        
            <mx:Tree id="myTree3" width="100%" labelField="@label" dataProvider="{treeData}" backgroundDisabledColor="#999933" enabled="false"/>
        </mx:VBox>                
        <mx:VBox width="50%">
            <mx:Label text="updated Tree component"/>
            <jp:ExtendedTree id="myTree4" width="100%" labelField="@label" dataProvider="{treeData}" backgroundDisabledColor="#999933" enabled="false"/>
        </mx:VBox>        
      </mx:Panel>
</mx:Application>