Creare un pannello fluido in GWT per riempire la pagina?
Domanda
Vorrei che un pannello in GWT riempisse la pagina senza dover effettivamente impostare la dimensione.C'è un modo per fare questo?Attualmente ho quanto segue:
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 al metodo che mi manca?
Grazie.
AGGIORNAMENTO 17 settembre 08 alle 20:15
Ho messo alcuni pulsanti (impostandone esplicitamente la dimensione) su ciascun lato e ancora non funziona.Sono davvero sorpreso che non esista una classe FillLayout o un metodo setFillLayout o setDockStyle(DockStyle.Fill) o qualcosa del genere.Forse non è possibile?Ma per quanto GWT sia popolare, penso che sarebbe possibile.
AGGIORNAMENTO 18 settembre 08 alle 14:38
Ho provato a impostare la larghezza e l'altezza di RootPanel al 100% e ancora non ha funzionato.Grazie comunque per il suggerimento, sembrava che forse avrebbe funzionato.Altri suggerimenti??
Soluzione
Google ha risposto alla parte principale della tua domanda in una delle sue FAQ: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 puoi impostare l'altezza al 100%, devi fare qualcosa del genere:
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);
Altri suggerimenti
La risposta di Ben è molto buona, ma è anche obsoleta.Un gestore di ridimensionamento era necessario in GWT 1.6, ma ora siamo alla versione 2.4.Puoi usare a DockLayoutPanel per fare in modo che i tuoi contenuti riempiano la pagina verticalmente.Vedi il applicazione di posta di esempio, che utilizza questo pannello.
Penso che dovrai mettere qualcosa a sinistra e/o a destra dello split (split.setLeftWidget(widget), split.setRightWidget(widget) OR split.add(widget), che aggiungerà prima a sinistra, poi a destra) affinché venga visualizzato qualsiasi cosa.
Prova a impostare la larghezza e/o l'altezza del rootpanel al 100% prima di aggiungere il widget.
I pannelli si ridimensionano automaticamente alla larghezza visibile più piccola.Quindi devi ridimensionare ogni pannello che aggiungi al RootPanel al 100%, incluso il tuo SplitPanel.Il RootPanel stesso non necessita di ridimensionamento.Allora prova:
split.setWidth("100%");
split.setHeight("100%");
La documentazione per DecoratorePanel dice:
Se imposti la larghezza o l'altezza del DecoratorPanel, devi impostare l'altezza e la larghezza della cella middleCenter al 100% in modo che la cella middleCenter occupi tutto lo spazio disponibile.Se non imposti la larghezza e l'altezza di DecoratorPanel, avvolgerà strettamente i suoi contenuti.
Il problema è che la cella di DecoratorPanel middleCenter si riempirà strettamente dei tuoi contenuti per impostazione predefinita e SplitPanel non consente l'impostazione della dimensione dello stile "100%".Per fare quello che vuoi, imposta lo stile della tabella in modo appropriato, sul tuo CSS:
.gwt-decoratorpanel .middlecenter {altezza:100%;larghezza:100%;}
Per me non funziona se imposto solo la larghezza come
panel.setWidth("100%");
Il pannello è un VerticalPanel che ha appena assunto una dimensione casuale che non so da dove provenga.Ma ciò che ha commentato @Ben Bederson ha funzionato molto bene per me dopo aver aggiunto la riga:
panel.setWidth(Window.getClientWidth() + "px");
Solo questo, nient'altro.Grazie