Flex - returning a window to its original state

Question

I have been tearing my hair out now for a week or so, it's time I sought some help...

I am coding a small app to show me the next train leaving the station. Normally only the hour of the next train is shown, but if you click on the prefs button, the application window enlarges and a datagrid is shown with the trains and hours. Clicking on the close button in that state returns you to the 'start' state, or should do so.

The problem is that the datagrid disappears, but the application window stays the same size. It should return to it's original size.

I've been trying lots of different approaches, replacing VBoxes by Canvas or Panels but none worked. In design mode everything work as expected when switching between states.

This is the first time I've been using states, so I might be missing something fundamental.

Here's a code sample - I'm using 2 view states, Start and Prefs.

<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" 
creationComplete="init();" 
cornerRadius="12"
currentState='Start' width="350" height="250">
<mx:states>
 <mx:State name="Start">
  <mx:AddChild>
   <mx:VBox id="box_parent" width="100%" height="100%" verticalGap="2">
    <mx:Label text="Next Train Leaves At" textAlign="center" width="100%"/>
    <mx:Label text="--:--" width="100%" height="100" fontSize="64" id="timetext" textAlign="center" fontWeight="bold"/> 
    <mx:HBox width="100%" height="25" id="hbox1">
     <mx:Button label="Prefs"
      id="buttonPrefs"
      click="currentState='Prefs'"/>
     <mx:Spacer width="70%" id="spacer1"/>
     <mx:Button 
      label="Next"
      click="findNextTrain()" id="buttonNext"/> 
    </mx:HBox>  
   </mx:VBox>  
  </mx:AddChild>
  <mx:SetProperty name="layout" value="vertical"/>
  <mx:SetProperty name="width" value="350"/>
  <mx:SetProperty name="height" value="220"/>
 </mx:State>
 <mx:State name="Prefs" basedOn="Start">
  <mx:AddChild relativeTo="{box_parent}" position="lastChild">
   <mx:DataGrid height="80%" width="100%" dataProvider="{trains}" id="traindata" editable="false">
    <mx:columns>
     <mx:DataGridColumn headerText="Station" dataField="stationid"/>
     <mx:DataGridColumn headerText="Leave" dataField="leave"/>
    </mx:columns>
   </mx:DataGrid>
  </mx:AddChild>
  <mx:RemoveChild target="{buttonPrefs}"/>
  <mx:SetProperty target="{box_parent}" name="height" value="500"/>
  <mx:AddChild relativeTo="{spacer1}" position="before">
   <mx:Button label="Close" click="currentState='Start'"/>
  </mx:AddChild>
  <mx:SetProperty name="height" value="570"/>
 </mx:State>
</mx:states>

<mx:transitions> 
 <mx:Transition fromState="*" toState="*"> 
     <mx:Resize target="{this}" duration="500"/> 
 </mx:Transition> 
</mx:transitions> 
</mx:WindowedApplication>

Answer 1

I have yet to find a way to reset a state in Flex to the values provided in the MXML. You have to reset what values you need your self programmatically. In the case of the provided sample code, you can reset the height of the application when changing back to the start state by adding the following into the WindowedApplication tag

currentStateChange="if(currentState == 'Start') this.height = 220"

This tells the WindowedApplication tag to handle the event dispatched after changing the current state to check if the new current state is Start, and to set the window height if it is.