Vaadin - Espandi componenti in Grid Layout in Vaadin

Question

Sto facendo il mio progetto in Vaadin 6. In questo, ho integrato i componenti in un layout Grid. Ho allegato un'immagine con questo. Assomiglia al mio layout del progetto. È simile all'eclisse. Quindi, il layout avrà due pannelli laterali a sinistra e a destra. e un centro e un pannello inferiore. E il colore rosso nell'immagine sono pulsanti. Quando li premo, il pannello verrà ridotto a icona. Voglio che il pannello centrale si espanda e occupi l'area del pannello ridotto al minimo. Ho integrato i pannelli nel layout della griglia. Qualcuno può dirmi come espandere un componente nel layout della griglia.

Quando minimizzo 'R'; 'C' & 'B' deve occupare la sua area.

Quando minimizzo 'B'; 'C' deve occupare la sua area.

Quando minimizzo 'L'; 'C' & 'B' deve occupare la sua area.

Answer 1

Ecco un esempio di lavoro senza ulteriore componente aggiuntivo. È possibile utilizzare il layout orizzontale e verticale.

public class TestUI extends UI { 

    Panel L = new Panel(); 
    Panel C = new Panel(); 
    Panel B = new Panel(); 
    Panel R = new Panel(); 

    Button bL = new Button("Toggle L", new CloseButtonHandler(L)); 
    Button bC = new Button("Toggle C", new CloseButtonHandler(C)); 
    Button bB = new Button("Toggle B", new CloseButtonHandler(B)); 
    Button bR = new Button("Toggle R", new CloseButtonHandler(R)); 

    @Override 
    protected void init(VaadinRequest request) { 
     L.setWidth("80px"); 
     L.setHeight("100%"); 
     L.setContent(new Label("L")); 
     R.setWidth("80px"); 
     R.setHeight("100%"); 
     R.setContent(new Label("R")); 
     B.setHeight("80px"); 
     B.setWidth("100%"); 
     B.setContent(new Label("B")); 
     C.setHeight("100%"); 
     C.setHeight("100%"); 
     C.setContent(new Label("C")); 

     VerticalLayout vl = new VerticalLayout(); 
     vl.addComponent(C); 
     vl.addComponent(B); 
     vl.setExpandRatio(C, 1); 
     vl.setSizeFull(); 

     HorizontalLayout hl = new HorizontalLayout(); 
     hl.addComponent(L); 
     hl.addComponent(vl); 
     hl.addComponent(R); 
     hl.setExpandRatio(vl, 1); 
     hl.setSizeFull(); 

     CssLayout root = new CssLayout(); 
     root.addComponent(bL); 
     root.addComponent(bC); 
     root.addComponent(bB); 
     root.addComponent(bR); 
     root.addComponent(hl); 
     root.setSizeFull(); 

     setContent(root); 
    } 

    private class CloseButtonHandler implements ClickListener { 
     private Panel layout; 

     public CloseButtonHandler(Panel layout) { 
      this.layout = layout; 
     } 

     @Override 
     public void buttonClick(ClickEvent event) { 
      layout.setVisible(!layout.isVisible()); 
     } 
    } 
} 

L'esempio è per Vaadin 7 ma il concetto dovrebbe funzionare anche con Vaadin 6.

Answer 2

Immagino che avrai più fortuna con lo BorderLayout addon. Non sto dicendo che non si possa fare con GridLayout, ma credo che richieda uno sforzo maggiore. Controlla il demo.

Proprio come nella demo, è possibile sostituire una posizione con un pulsante "ripristina" quando si fa clic sul pulsante di riduzione a icona (non si è parlato del ripristino della parte di layout, ma suppongo che fosse nei piani insieme a minimizzare ?). Quindi quando si fa clic su Riduci a icona nel layout a dimensione intera (ad esempio, R o est), si sostituisce la posizione orientale con un pulsante di ripristino, che si sostituisce con il layout R.

Answer 3

Proverei a implementarlo in questo modo che utilizzo VerticalLayouts e HorizontalLayouts. Un esempio non verificato:

HorizontalLayout root = new HorizontalLayout(); 
root.setSizeFull(); 

Component l = ... 
l.setWidth("200px"); 
l.setHeight("100%"); 
root.addcomponent(l); 

VerticalLayout cb = new VerticalLayout(); 
cb.setSizeFull(); 

Component c = ... 
c.setSizeFull(); 
cb.addComponent(c); 
cb.setExpandRatio(c, 1); 

Component b = ... 
b.setWidth("100%"); 
l.setHeight("200px"); 
cb.addComponent(b); 

root.addcomponent(cb); 
root.setExpandRatio(cb, 1); 

Component r = ... 
r.setWidth("200px"); 
r.setHeight("100%"); 
root.addComponent(r); 

Quindi è possibile implementare il nascondimento rimuovendo un componente dal suo layout o impostandolo invisibile.

Answer 4

La risposta di Raffel è la soluzione migliore e più rapida per questa domanda. Ma, ho avuto qualche problema con la struttura del progetto nell'implementarlo.

L'ho fatto a modo mio. Ridimensionare i componenti nel layout Grid sembra essere un problema. Quindi, mi sono spostato in verticale e layout orizzontale.

Ho impostato 'C' e 'B' in Layout verticale chiamato 'VL'. E ho impostato 'L' e 'VL' e 'R' in un layout orizzontale chiamato 'HL'. E ho aggiunto i pulsanti per passare ovunque mi servisse. Ogni volta che premo un pulsante di commutazione, Nasconderà il layout. L'ho raggiunto ridefinendo il

setExpandRatio(); 

Quando viene premuto un interruttore, ho ridefinito il setExpandRation() per quel componente. E ancora quando si preme di nuovo il pulsante, resetto il setExpandRatio() al valore precedente. Questa idea funziona bene su tutti i monitor di dimensioni.