Flex - regresando una ventana a su estado original

Question

He estado arrancándome el pelo durante una semana o así, es hora de que busque ayuda ...

Estoy codificando una pequeña aplicación para mostrarme el próximo tren que sale de la estación. Normalmente solo se muestra la hora del siguiente tren, pero si hace clic en el botón de preferencias, la ventana de la aplicación se amplía y se muestra una cuadrícula de datos con los trenes y las horas. Al hacer clic en el botón de cerrar en ese estado, regresará al estado de "inicio", o debería hacerlo.

El problema es que el datagrid desaparece, pero la ventana de la aplicación se mantiene del mismo tamaño. Debe volver a su tamaño original.

He estado probando muchos enfoques diferentes, reemplazando VBoxes por Canvas o Panels, pero ninguno funcionó. En el modo de diseño, todo funciona como se espera cuando se cambia de estado.

Esta es la primera vez que uso estados, por lo que podría faltar algo fundamental.

Aquí hay un ejemplo de código: estoy usando 2 estados de vista, Inicio y Pref.

<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

Todavía tengo que encontrar una manera de restablecer un estado en Flex a los valores proporcionados en el MXML. Tienes que restablecer qué valores necesitas auto programáticamente. En el caso del código de ejemplo proporcionado, puede restablecer la altura de la aplicación cuando vuelva a cambiar al estado de inicio agregando lo siguiente en la etiqueta WindowedApplication

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

Esto le dice a la etiqueta WindowedApplication que maneje el evento distribuido después de cambiar el estado actual para verificar si el nuevo estado actual es Inicio, y para establecer la altura de la ventana si es.