Flex - ramener une fenêtre à son état d'origine

Question

Je m'arrache les cheveux depuis une semaine environ, il est temps que je cherche de l'aide ...

Je suis en train de coder une petite application pour me montrer le prochain train quittant la gare. Normalement, seule l'heure du prochain train est affichée, mais si vous cliquez sur le bouton prefs, la fenêtre de l'application s'agrandit et une grille de données s'affiche avec les trains et les heures. En cliquant sur le bouton de fermeture dans cet état, vous retournez à l'état "démarrer" ou vous devriez le faire.

Le problème est que la grille de données a disparu, mais que la fenêtre de l'application reste de la même taille. Il devrait revenir à sa taille originale.

J'ai essayé de nombreuses approches différentes, remplaçant les VBox par Canvas ou Panels mais aucune n’a fonctionné. En mode conception, tout fonctionne comme prévu lors du basculement entre les états.

C'est la première fois que j'utilise des états. Il se peut donc que je manque quelque chose de fondamental.

Voici un exemple de code - J'utilise 2 états d'affichage, Démarrer et Préfs.

<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

Je n'ai pas encore trouvé le moyen de réinitialiser un état dans Flex aux valeurs fournies dans le MXML. Vous devez réinitialiser les valeurs dont vous avez besoin par vous-même par programmation. Dans le cas de l'exemple de code fourni, vous pouvez réinitialiser la hauteur de l'application lorsque vous revenez à l'état de démarrage en ajoutant ce qui suit dans la balise WindowedApplication

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

Ceci indique à la balise WindowedApplication de gérer l'événement distribué après le changement de l'état actuel afin de vérifier si le nouvel état actuel est Démarrer et de définir la hauteur de la fenêtre, le cas échéant.