Problem with Resize function in a custom application using TitleWindow

[francescodi_vito]

Hello guys.
I have created my application, I created a mxml TitleWindow that recall in my application with a button. This is the code of mxml TitleWindow. But with this flex 3.

<?xml version="1.0" encoding="utf-8"?>
<mx:TitleWindow
xmlns="assets.*"
xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:esri="http://www.esri.com/2008/ags"
    xmlns:samples="com.esri.ags.samples.*"
width="320"
height="306"
paddingLeft="10"
paddingRight="10"
paddingTop="10"
paddingBottom="10"
    x="0"
    y="82"
    title="Table of Contents"
    dropShadowEnabled="true"
    dropShadowColor="Black"
    shadowDirection="right"
    shadowDistance="5"
    showCloseButton="true" xmlns:ns1="*">

<mx:Script>
        <![CDATA[

   import com.esri.ags.layers.ArcGISDynamicMapServiceLayer;
   import mx.controls.Alert;
   import com.esri.ags.samples.LayerTOC;
   import com.esri.ags.samples.LayerVizRenderer;
   import mx.collections.*;
   import mx.managers.PopUpManager;
   import mx.core.Application;
  
   import com.esri.ags.layers.Layer;
   import com.esri.ags.Map;   

   [Bindable]
            public var layers:ArcGISDynamicMapServiceLayer;
           
            private var _layer:Layer;
   
   //set layer alpha
         private function setLayerAlpha():void
         {
          layers.alpha = slider.value;
         
         }       
       
         private function sldrDataTipFormatter(value:Number):String
      {
       return int(value * 100) + "%";
      }
            //Maximize/Minimize Window using Control Bar
    private function changeState():void
    {
     switch( currentState )
     {
      case "":
      case null:
       currentState = "collapsedState";
       break;
      case "collapsedState":
       currentState = "";
       break; 
     }
    }  
  ]]>
    </mx:Script>
     <mx:states>
        <mx:State name="collapsedState">
            <mx:SetProperty name="height" value="58"/>
            <mx:SetProperty target="{controlbar1}" name="toolTip" value="Click to maximize window"/>
            <mx:AddChild relativeTo="{controlbar1}" position="lastChild">
                <mx:Image id="expanderDn" source="assets/img/ScrollArrowDown_upSkin.png" alpha="1.0" />
            </mx:AddChild>
            <mx:RemoveChild target="{expanderUp}"/>        
         </mx:State>
    </mx:states>
    <mx:transitions>
  <mx:Transition fromState="*" toState="collapsedState">
   <mx:Sequence targets="{[this]}">
    <mx:Resize target="{this}" duration="500"/>
   </mx:Sequence>
  </mx:Transition>
  <mx:Transition fromState="collapsedState" toState="*">
   <mx:Resize target="{this}" duration="500"/>
  </mx:Transition>
</mx:transitions>
        
<mx:NumberFormatter  id="numFormatter"
       useThousandsSeparator="true"
       precision="2"/> 
   
    <mx:VBox verticalGap="0" width="100%" paddingLeft="6" paddingRight="6" paddingBottom="3" paddingTop="3">
  <mx:HSlider id="slider" minimum="0" maximum="1" width="100%" change="setLayerAlpha()"
   dataTipFormatFunction="sldrDataTipFormatter" liveDragging="true" value="{layers.alpha}"/>
</mx:VBox>          

<samples:LayerTOC id="toc" layer="{layers}" width="280" height="81"/>
<mx:ControlBar id="controlbar1" height="30" click="changeState()" toolTip="Click to minimize window" styleName="darkControlBar" verticalAlign="center" horizontalAlign="center" y="505" width="378">
<mx:Image id="expanderUp" source="assets/img/ScrollArrowUp_upSkin.png"  alpha="1.0" />
</mx:ControlBar>
</mx:TitleWindow>

Now i'm working in flash builder 4 and in my mxml application i have worked in this way for open a titlewindow
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
      xmlns:s="library://ns.adobe.com/flex/spark"
      xmlns:mx="library://ns.adobe.com/flex/mx"
      minWidth="1000" minHeight="600"
      xmlns:esri="http://www.esri.com/2008/ags"
      xmlns:layers="com.esri.ags.layers.*" viewSourceURL="Source/index.html">

<s:layout>
  <s:BasicLayout/>
</s:layout>
<s:BorderContainer height="84" right="0" left="0" top="0" horizontalCenter="0">
</s:BorderContainer>
<s:BorderContainer top="83" right="0" bottom="0" left="0" verticalCenter="41" horizontalCenter="0">
  <esri:Map>
   <esri:extent>
    <esri:Extent xmin="12.3498673933049" ymin="41.7449211462468" xmax="12.6468247200555" ymax="42.0530143727505">
     <esri:SpatialReference wkid="4326"/> <!-- WGS84 -->
    </esri:Extent>
   </esri:extent>
   <esri:ArcGISTiledMapServiceLayer url="http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_Imagery_World_2D/MapServer"/>
   <esri:ArcGISTiledMapServiceLayer url="http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer" alpha="{layerAlpha1.value}"/>
  </esri:Map>
  <s:BorderContainer height="41" width="145" right="10" top="10" backgroundColor="#000000" backgroundAlpha="0.5">
  <s:ToggleButton id="Toc"
      label="Layer"
      click="tocPanel.visible ? tocPanel.visible=false: tocPanel.visible=true"
      selected="{tocPanel.visible}" x="67" y="9"/>
  </s:BorderContainer>
  <s:TitleWindow id="tocPanel" mouseDown="tocPanel.startDrag()" mouseUp="tocPanel.stopDrag()"
         title="Layer" visible="false"
       close="tocPanel.visible=false" x="932" y="76" width="270" height="264" backgroundColor="#000000" backgroundAlpha="0.5">
   <s:states>
    <s:State name="collapsedState">
    
    </s:State>
   </s:states>
  </s:TitleWindow>
</s:BorderContainer>


but when i write the script for the resizable as well as in the flex 3 i have a error for tag "states"(initializer for prperty states is not allowed here )

Why i have this error? any solutions?