2008-09-17 12 views
18

Me gustaría que un panel en GWT llene la página sin tener que establecer el tamaño. ¿Hay alguna forma de hacer esto? Actualmente tengo lo siguiente:Creando un panel de fluido en GWT para llenar la página?

public class Main implements EntryPoint 
{ 
    public void onModuleLoad() 
    { 
     HorizontalSplitPanel split = new HorizontalSplitPanel(); 
     //split.setSize("250px", "500px"); 
     split.setSplitPosition("30%"); 

     DecoratorPanel dp = new DecoratorPanel(); 
     dp.setWidget(split); 

     RootPanel.get().add(dp); 
    } 

} 

Con el fragmento de código anterior, no se muestra nada. ¿Hay alguna llamada al método que me falta?

Gracias.


ACTUALIZACIÓN 17 de Sep '08 a las 20:15

puse algunos botones (establecer explícitamente su tamaño) en cada lado y que todavía no funciona. Estoy realmente sorprendido de que no haya una clase FillLayout o un método setFillLayout o setDockStyle (DockStyle.Fill) o algo así. Tal vez no es posible? Pero por más popular que sea GWT, creo que sería posible.

ACTUALIZACIÓN 18 de Sep '08 a las 14:38

He intentado fijar la anchura y la altura RootPanel al 100% y que aún no funcionaba. Gracias por la sugerencia, parecía que iba a funcionar. ¿¿Cualquier otra sugerencia??

Respuesta

19

Google ha respondido a la parte principal de su pregunta en uno de sus frecuentes: http://code.google.com/webtoolkit/doc/1.6/FAQ_UI.html#How_do_I_create_an_app_that_fills_the_page_vertically_when_the_b

El punto principal es que no se puede establecer la altura a 100%, debe hacer algo como esto:

final VerticalPanel vp = new VerticalPanel(); 
vp.add(mainPanel); 
vp.setWidth("100%"); 
vp.setHeight(Window.getClientHeight() + "px"); 
Window.addResizeHandler(new ResizeHandler() { 

    public void onResize(ResizeEvent event) { 
    int height = event.getHeight(); 
    vp.setHeight(height + "px"); 
    } 
}); 
RootPanel.get().add(vp); 
+2

Esta es una gran respuesta, pero ahora hay capacidades para esto incorporadas a GWT. Ver mi respuesta para algunos enlaces. – Brad

0

Creo que tendrá que poner algo a la izquierda y/o derecha de la división (split.setLeftWidget (widget), split.setRightWidget (widget) O split.add (widget), que se agregará primero a la izquierda, luego a la derecha) para que aparezca cualquier cosa.

0

Intente establecer el ancho y/o alto del panel raíz al 100% antes de agregar su widget.

0

Los paneles cambian de tamaño automáticamente al ancho visible más pequeño. Por lo tanto, debe cambiar el tamaño de cada panel que agregue al RootPanel al 100%, incluido su SplitPanel. El RootPanel en sí no necesita redimensionamiento. Así que trate de:

split.setWidth("100%"); 
split.setHeight("100%"); 
+0

Drejc, Gracias por su respuesta. Intenté establecer las dimensiones de SplitPanel y las dimensiones de RootPanel al 100%. Todavía sin suerte. Gracias de nuevo. –

+0

Establezca su estilo CSS para que los bordes del panel sean visibles. A continuación, verá qué panel debe cambiar de tamaño. Esta es mi manera preferida de solucionar problemas cuando de alguna manera me pierdo en paneles y no sé cuál es el responsable de qué. – Drejc

0

La documentación para DecoratorPanel dice:

Si se establece la anchura o la altura de la DecoratorPanel, es necesario ajustar la altura y el ancho de la celda middleCenter a 100% en lo que la celda de middleCenter ocupa todo el espacio disponible. Si no establece el ancho y alto del DecoratorPanel, envolverá su contenido con fuerza.

0

El problema es que la celda DecoratorPanel middleCenter se llenará estrictamente de contenido, y SplitPanel no permite la configuración de tamaño de estilo "100%". Para hacer lo que quiera, establezca el estilo de la tabla apropiadamente, en su CSS:

.gwt-DecoratorPanel.middleCenter { altura: 100%; ancho: 100%; }

13

La respuesta de Ben es muy buena, pero también está desactualizada. Un controlador de cambio de tamaño era necesario en GWT 1.6, pero ahora estamos en 2.4. Puede usar un para que su contenido llene la página verticalmente. Vea el sample mail app, que usa este panel.

+2

aquí está la fuente: http://code.google.com/p/google-web-toolkit/source/browse/trunk/samples/mail/src/com/google/gwt/sample/mail/client/Mail.java –

0

Para mí no funciona si me acaba de establecer el ancho como

panel.setWidth ("100%");

El panel es un Panel Vertical que simplemente tiene un tamaño aleatorio que no sé de dónde viene. Pero lo que @Ben Bederson comentó me funcionó muy bien después de que agregué la línea:

panel.setWidth (Window.getClientWidth() + "px");

Simplemente esto, nada más. Gracias

Cuestiones relacionadas