Flex - retornando uma janela ao seu estado original

Question

Eu tenho arrancado meu cabelo agora há uma semana, é hora de procurar ajuda ...

Estou codificando um pequeno aplicativo para me mostrar o próximo trem saindo da estação. Normalmente, apenas a hora do próximo trem é mostrada, mas se você clicar no botão Prefs, a janela do aplicativo aumenta e um datagrid será mostrado com os trens e horas. Clicar no botão Fechar nesse estado o retorna ao estado 'Iniciar' ou deve fazê -lo.

O problema é que o datagrid desaparece, mas a janela do aplicativo permanece do mesmo tamanho. Deve voltar ao seu tamanho original.

Eu tenho tentado muitas abordagens diferentes, substituindo vBoxes por tela ou painéis, mas nenhum funcionou. No modo de design, tudo funciona conforme o esperado ao alternar entre os estados.

É a primeira vez que uso estados, por isso posso estar perdendo algo fundamental.

Aqui está uma amostra de código - estou usando 2 estados de exibição, início e 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

Ainda não encontrei uma maneira de redefinir um estado em flexão para os valores fornecidos no MXML. Você precisa redefinir quais valores você precisa para si mesmo programaticamente. No caso do código de amostra fornecido, você pode redefinir a altura do aplicativo ao mudar de volta ao estado de partida, adicionando o seguinte à tagaplicação da janela

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

Isso informa à tag Application para lidar com o evento despachado após a alteração do estado atual para verificar se o novo estado atual é iniciado e para definir a altura da janela, se for.