Adobe Flex/AIR: desplazamiento de un subcomponente, no de toda la ventana

Question

Estoy desarrollando una aplicación con Adobe Flex y AIR, y he estado golpeando mi cabeza contra la pared tratando de encontrar la manera de resolver un desplazamiento problema.

La estructura básica de la ventana principal de la aplicación (simplificado en gran medida) es la siguiente:

<?xml version="1.0" encoding="utf-8"?> 
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" 
    paddingTop="0" paddingRight="0" paddingBottom="0" paddingLeft="0" 
    width="800" height="600" layout="vertical" verticalAlign="top" 
> 
    <mx:VBox id="MainContainer" width="100%" height="100%"> 
     <mx:Panel id="Toolbars" width="100%" height="25" /> 
     <mx:HDividedBox width="100%" height="100%" > 
     <mx:Panel id="Navigation" minWidth="200" height="100%" /> 
     <mx:VBox id="MainContent" width="100%"> 
      <mx:Panel width="100%" height="200" /> 
      <mx:Panel width="100%" height="200" /> 
      <mx:Panel width="100%" height="200" /> 
      <mx:Panel width="100%" height="200" /> 
      <mx:Panel width="100%" height="200" /> 
     </mx:VBox> 
     <mx:Panel id="HelpContent" minWidth="200" height="100%" /> 
     </mx:HDividedBox> 
     <mx:Panel id="FooterContent" width="100%" height="25" /> 
    </mx:VBox> 
</mx:WindowedApplication> 

El problema es que la caja "maincontent" podría contener una enorme lista de subcomponentes, y la presencia de esa larga lista hace que una barra de desplazamiento vertical aparezca en el nivel más alto de la GUI, rodeando la vbox "MainContainer".

Parece realmente tonto, con barras de desplazamiento alrededor de toda la ventana de la aplicación.

Lo que estoy buscando es una solución donde la barra de desplazamiento solo se aplica a la vbox "MainContent" (así como a los paneles Navigation y HelpContent, si su contenido se extiende más allá de los límites de la ventana).

Encontré un related question en StackOverflow, donde la solución del problema era utilizar los atributos "autoLayout" y "verticalScrollPolicy" en los contenedores principales.

Intenté agregar los atributos autoLayout = "false" y verticalScrollPolicy = "off" en todos los contenedores principales, así como verticalesScrollPolicy = "on" en la vbox "MainContent". Pero el resultado final de ese experimento fue que el contenido simplemente se recortó del contenedor principal (y se agregó una barra de desplazamiento inútil sin pulgar a la vbox de MainContent).

¿Alguien sabe cómo solucionar esto?

Answer 1

Encontré una solución.

Parece que la única forma de evitar que el VBox amplíe agresivamente su espacio vertical (y forzando a sus padres a hacer crecer las barras de desplazamiento) es envolver el VBox en un lienzo.

Hay un pequeño componente útil here, llamado ScrollableVBox, que realiza la solución mientras se ocupan de algunos problemas de bookkeping (como agregar y quitar elementos secundarios al VBox, pasándolos alrededor del contenedor Cavas).

Answer 2

Tu problema se parece mucho a uno con el que tuve problemas hace algún tiempo. Encontré mi respuesta en this discussion: simplemente deshabilite la implementación measure() del Box.

Esta fue una solución bastante fácil que funcionó perfectamente en mi caso y no ha causado ningún "daño colateral". Tus resultados pueden variar

package whatever 
{ 
    import mx.containers.Box; 

    /** 
    * A Box that has no measure() implementation. 
    * 
    * <p> 
    * See http://old.nabble.com/-flex_india%3A3318--Size-layout-issues-with-respect-to-parent-containers-to12882767.html 
    * for more info. 
    * </p> 
    */ 
    public class NonMeasuredBox extends Box 
    { 
     /** 
     * Constructor 
     */ 
     public function NonMeasuredBox():void 
     { 
      super(); 
     } 

     override protected function measure():void { /* disabled */ } 
    } 
} 

Answer 3

Un HBox o un VBox harán todo lo posible para mostrar su contenido sin barras de desplazamiento. Esto obliga a un contenedor primario (a menudo hasta la Aplicación principal) a ser el que debe desplazarse si el contenido es demasiado grande para caber en los límites disponibles.

Detrás de escena, el HBox o VBox está estableciendo las propiedades de midMinWidth y measuredMinHeight en su función de medida() para que coincida con las dimensiones requeridas por sus hijos. El contenedor principal respetará esa recomendación y la tarea de desplazamiento se moverá hacia arriba en la lista de visualización.

La solución de hasseg funciona en muchos casos porque detiene la medición del contenedor, pero es un poco hacky. Esto es lo que puede hacer sin crear subclases de reemplazo para sus contenedores.En la instancia del contenedor en la que desea desplazarse, establezca minWidth o minHeight en 0. Esto tendrá prioridad sobre las propiedades medidoMinWidth o measuredMinHeight de ese contenedor, lo que permite al padre establecer el tamaño real a algo más manejable.

Answer 4

En lugar de envolver la caja vertical en un lienzo, establecer la propiedad minHeight de la caja vertical que desea tener barra de desplazamiento a 0.