2008-09-17 9 views
18

Vorrei un pannello in GWT per riempire la pagina senza dover effettivamente impostare la dimensione. C'è un modo per fare questo? Attualmente ho il seguente:Creazione di un pannello fluido in GWT per riempire la pagina?

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 lo snippet di codice precedente, non viene visualizzato nulla. C'è una chiamata di metodo che mi manca?

Grazie.


UPDATE 17 settembre '08 alle 20:15

ho messo alcuni tasti (impostare in modo esplicito la loro dimensione) su ogni lato e che ancora non funziona. Sono davvero sorpreso che non ci sia una classe FillLayout o un metodo setFillLayout o setDockStyle (DockStyle.Fill) o qualcosa del genere. Forse non è possibile? Ma per quanto popolare come GWT, penserei che sarebbe possibile.

AGGIORNAMENTO 18 settembre '08 alle 14:38

Ho provato a impostare la larghezza e l'altezza RootPanel al 100% e che ancora non ha funzionato. Grazie per il suggerimento, però, sembrava che potesse funzionare. Qualche altro suggerimento ??

risposta

19

Google ha risposto alla parte principale della sua domanda in una delle loro domande frequenti: 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

Il punto principale è che non è possibile impostare l'altezza al 100%, è necessario fare qualcosa di simile:

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

Questa è una grande risposta, ma ci sono le capacità di questo built-in per GWT ora. Vedi la mia risposta per alcuni link. – Brad

0

Penso che dovrai mettere qualcosa a sinistra e/o a destra dello split (split.setLeftWidget (widget), split.setRightWidget (widget) OR split.add (widget), che verrà aggiunto prima a a sinistra, poi a destra) in modo che qualsiasi cosa si mostri.

0

Provare a impostare la larghezza e/o l'altezza del pannello radice al 100% prima di aggiungere il widget.

0

I pannelli vengono ridimensionati automaticamente alla larghezza più piccola visibile. Quindi devi ridimensionare al 100% tutti i pannelli che aggiungi a RootPanel, incluso SplitPanel. RootPanel non ha bisogno di ridimensionamento. In modo da provare:

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

DREJC, Grazie per la risposta. Ho provato a impostare sia le dimensioni di SplitPanel che le dimensioni di RootPanel al 100%. Ancora senza fortuna. Grazie ancora. –

+0

Imposta il tuo stile CSS in modo che i confini del pannello sono visibili. Vedrai quindi quale pannello deve essere ridimensionato. Questo è il mio modo preferito di risoluzione dei problemi quando sono in qualche modo perso in pannelli e non so quale è responsabile di che cosa. – Drejc

0

La documentazione per DecoratorPanel dice:

Se si imposta la larghezza o l'altezza del DecoratorPanel, è necessario impostare l'altezza e la larghezza della cella middleCenter al 100% in modo che la cella middleCenter occupa tutto lo spazio disponibile. Se non si imposta la larghezza e l'altezza del DecoratorPanel, avvolgerà strettamente il suo contenuto.

0

Il problema è che la cella MiddleCenter di DecoratorPanel si riempie strettamente dei tuoi contenuti come impostazione predefinita e SplitPanel non consente l'impostazione della dimensione di stile "100%". di fare ciò che si desidera, impostare lo stile della tabella in modo appropriato, sul CSS:

.gwt-DecoratorPanel.middleCenter { altezza: 100%; larghezza: 100%; }

13

risposta di Ben è molto buona, ma è anche fuori moda. Un gestore di ridimensionamento era necessario in GWT 1.6, ma ora siamo a 2.4. È possibile utilizzare un per avere il vostro contenuti riempire la pagina in senso verticale. Vedi lo sample mail app, che usa questo pannello.

+2

ecco la fonte: http://code.google.com/p/google-web-toolkit/source/browse/trunk/samples/mail/src/com/google/gwt/sample/mail/client/Mail.java –

0

Per me non funziona se ho appena impostato la larghezza come

panel.setWidth ("100%");

Il pannello è un VerticalPanel che ha appena ottenuto una dimensione casuale che non so da dove provenga. Ma che cosa @ Ben Bederson commentato funzionato molto bene per me dopo ho aggiunto la linea:

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

Proprio questo, nient'altro. Grazie

Problemi correlati