Hauteur fixe et variable Flex - peut-elle être définie dans le balisage?

Question

J'ai le balisage d'application Flex suivante:

<app:MyApplicationClass 
    xmlns:app="*" 
    width="100%" 
    height="100%" 
    layout="vertical" 
    horizontalScrollPolicy="off" 
    verticalScrollPolicy="off"> 
    <mx:VBox id="idPageContainer" width="100%" height="100%" verticalGap="0" 
     horizontalScrollPolicy="off" verticalScrollPolicy="off"> 
     <mx:HBox id="idTopContainer" width="100%" height="28" horizontalGap="2"> 
      (top menu stuff goes here) 
     </mx:HBox> 
     <mx:HBox id="idBottomContainer" width="100%" height="100%" verticalScrollPolicy="off" clipContent="false"> 
      (page stuff goes here) 
     </mx:HBox> 
    </mx:VBox> 
</app:MyApplicationClass> 

Quand je lance, il affiche le panneau supérieur avec une hauteur fixe, et un panneau de fond à hauteur variable. Je m'attends à ce que la hauteur du panneau inférieur contienne la hauteur restante, mais elle déborde d'une manière ou d'une autre de la page.

La seule manière que je trouvais pour résoudre ce problème de la hauteur (jusqu'à présent) est définir par programmation la hauteur à fixer au lieu de la variable:

<mx:HBox id="idBottomContainer" width="100%" height="700" verticalScrollPolicy="off" clipContent="false"> 
     (page stuff goes here) 
    </mx:HBox> 

et code-behind:

package { 
    import mx.containers.HBox; 
    import mx.core.Application; 
    import mx.events.ResizeEvent; 

    // (...) 
    public class MyApplicationClass extends Application { 
     public var idBottomContainer:HBox; 
     // (...) 

     private function ON_CreationComplete (event:FlexEvent) : void { 
      // (...) 
      addEventListener(ResizeEvent.RESIZE, ON_Resize); 
     } 

     private function ON_Resize (event:Event) : void { 
      idBottomContainer.height = this.height - idTopContainer.height; 
     } 
    } 
} 

Mais cette solution est trop "sale" et je cherche une manière plus élégante. Est-ce que quelqu'un sait une alternative?

Answer 1

Il me semble que ce que vous avez devrait fonctionner. J'ai quelque chose de similaire dans d'innombrables écrans. Mais si vous êtes vraiment coincé, vous pouvez essayer de remplacer la VBox par un Canvas et faire quelque chose comme ceci:

<mx:Canvasid="idPageContainer" width="100%" height="100%" verticalGap="0" 
    horizontalScrollPolicy="off" verticalScrollPolicy="off"> 
    <mx:HBox id="idTopContainer" width="100%" height="28" horizontalGap="2"> 
     (top menu stuff goes here) 
    </mx:HBox> 
    <mx:HBox id="idBottomContainer" width="100%" top="{idTopContainer.height}" 
     height="{idPageContainer.height - idTopContainer.height}" 
      verticalScrollPolicy="off" clipContent="false"> 
     (page stuff goes here) 
    </mx:HBox> 
</mx:Canvas>