vaadin - Use GridLayout to make a smart layout that responds to the window being resized? -

when user resizes window in vaadin 6 or 7 web app, want have various areas of layout resize larger or smaller take best advantage of usable space.

gridlayout seems way that. getting started gridlayout can tricky. read gridlayout api page, book of vaadin (gridlayout page , layout formatting page).

an example showing gridlayout in action helpful.

vaadin 7

i created example vaadin 7 web app showing 2 usages of gridlayout. both usages place table dummy data in each of 4 corners of layout. when window resized larger or smaller, 4 tables change size accordingly.

one usage simple grid of 4 cells, 2 columns , 2 rows. other usage includes nested layout buttons in middle column , middle row, in gridlayout 3 columns , 3 rows total of 9 cells, 3 of go empty.

screen shots of each usage…

here 2 important classes, each subclass of gridlayout. first simpler, more complicated one.

/**  *   */ package com.example.quadrantgridlayout;  import com.vaadin.server.sizeable; import com.vaadin.ui.gridlayout; import com.vaadin.ui.table;  /**  * example use of gridlayout in vaadin 7.1.  *   * each quadrant of layout contains table. each table resizes in both width , height fill available space.  *   * @author basil bourque  *   *         copyright © 2013 basil bourque.  *   *         example source code may used freely forever taking full responsibility doing so.  *   */ public class quadrantgridlayout extends gridlayout {      /**      * constructor      */     public quadrantgridlayout() {         super();         this.setmargin( true ); // add space around perimeter.         this.setspacing( true ); // add space between widgets.          // make layout fill available space in container.         // in case container ui.         // in case, ui happens fill container, web browser's tab/window.         this.setwidth( 100, sizeable.unit.percentage );         this.setheight( 100, sizeable.unit.percentage );          // create 4 cells our 4 tables.         this.setcolumns( 2 );         this.setrows( 2 );          // create widgets.         table upperleft = new astronomerstable( "upper left " + new java.util.date() ); // in real work use joda time, not j.u.date.         table upperright = new astronomerstable( "upper right" );          table lowerleft = new astronomerstable( "lower left" );         table lowerright = new astronomerstable( "lower right" );          // compose layout.         upperleft.setwidth( 100, sizeable.unit.percentage );         upperleft.setheight( 100, sizeable.unit.percentage );         this.addcomponent( upperleft );          upperright.setsizefull(); // alternate syntax setting both width , height 100%, instead of 2 lines seen earlier above.         this.addcomponent( upperright );          // cursor automatically moved next row upon reaching row's last cell.          lowerleft.setsizefull();         // lowerleft.setheight( 72 * 2, sizeable.unit.points ); // use if want play fixed sizing. 72 points per inch.         this.addcomponent( lowerleft );          lowerright.setsizefull();         this.addcomponent( lowerright );      }  } 

here's gridlayout buttons.

/**  *   */ package com.example.quadrantgridlayout;  import com.vaadin.server.sizeable; import com.vaadin.ui.button; import com.vaadin.ui.gridlayout; import com.vaadin.ui.horizontallayout; import com.vaadin.ui.table; import com.vaadin.ui.verticallayout;  /**  * example use of gridlayout in vaadin 7.1.  *   * each quadrant of layout contains table. each table resizes in both width , height fill available space.  *   * @author basil bourque  *   *         copyright © 2013 basil bourque.  *   *         example source code may used freely forever taking full responsibility doing so.  */ public class quadrantwithbuttonsgridlayout extends gridlayout {      /**      * constructor      */     public quadrantwithbuttonsgridlayout() {         super();         this.setmargin( true ); // add space around perimeter.         this.setspacing( true ); // add space between widgets.          // make layout fill available space in container.         // in case container ui.         // in case, ui happens fill container, web browser's tab/window.         this.setwidth( 100, sizeable.unit.percentage );         this.setheight( 100, sizeable.unit.percentage );          // create 9 cells, tic-tac-toe. table goes in each corner.         this.setcolumns( 3 );         this.setrows( 3 );          // create tables.         table upperleft = new astronomerstable( "upper left " + new java.util.date() ); // in real work use joda time, not j.u.date.         table upperright = new astronomerstable( "upper right" );          table lowerleft = new astronomerstable( "lower left" );         table lowerright = new astronomerstable( "lower right" );          // create buttons, , collect layout.         button alphabutton = new button( "alpha" );         button betabutton = new button( "beta" );         verticallayout upperbuttonslayout = new verticallayout();         upperbuttonslayout.setcaption( " " ); // add empty caption (space character, actually) force buttons downwards line tables.         upperbuttonslayout.setspacing( true ); // add space between widgets.         upperbuttonslayout.addcomponent( alphabutton );         upperbuttonslayout.addcomponent( betabutton );          button gammabutton = new button( "gamma" );         button deltabutton = new button( "delta" );         horizontallayout leftbuttonslayout = new horizontallayout();         leftbuttonslayout.setspacing( true );         leftbuttonslayout.addcomponent( gammabutton );         leftbuttonslayout.addcomponent( deltabutton );          // compose layout.          // ----| row 1 |------------------------         // vaadin 6 & 7 seem suffer bug makes 1 row wider despite being assigned same ratio.         // workaround, divide wide column's ratio half (give or take) compensate.         this.setrowexpandratio( this.getcursory(), 0.5f / 1.5f );         // column 1         // vaadin 6 & 7 seem suffer bug makes 1 column wider despite being assigned same ratio.         // workaround, divide wide column's ratio half (or more) compensate.         this.setcolumnexpandratio( this.getcursorx(), 1f / 1.5f ); // notice first argument soft-coding column position. also, index (zero-based) counting .         upperleft.setwidth( 100, sizeable.unit.percentage );         upperleft.setheight( 100, sizeable.unit.percentage );         // upperleft.setheight( 72 * 2, sizeable.unit.points ); // use if want play fixed sizing. 72 points per inch.         this.addcomponent( upperleft );          // column 2         // should not expand or contract window re-sizing. set expansion ratio zero.         upperbuttonslayout.setsizeundefined(); // setting size "undefined" trick getting column collapse own minimal size.         this.addcomponent( upperbuttonslayout );          // column 3         this.setcolumnexpandratio( this.getcursorx(), 1f );         upperright.setsizefull(); // alternate syntax setting both width , height 100%, instead of 2 lines seen earlier above.         this.addcomponent( upperright );         // cursor automatically moved next row upon reaching row's last cell.          // ----| row 2 |------------------------         // column 1         leftbuttonslayout.setsizeundefined(); // setting size "undefined" trick getting row collapse own minimal size.         this.addcomponent( leftbuttonslayout );         this.newline(); // move cursor next row. have nothing place in remaining 2 cells.          // ----| row 3 |------------------------         this.setrowexpandratio( this.getcursory(), 0.5f );         // // column 1         lowerleft.setsizefull();         this.addcomponent( lowerleft );          // column 2         this.space(); // move cursor next cell. have nothing place in middle cell.          // column 3         lowerright.setsizefull();         this.addcomponent( lowerright );      }  } 

here's code gridlayouts onto screen. vaadin 6, move guts of class appropriate class.

package com.example.quadrantgridlayout;  import com.vaadin.server.vaadinrequest; import com.vaadin.ui.layout; import com.vaadin.ui.tabsheet; import com.vaadin.ui.ui;  /**  *   * main ui class  *   * example app demonstrates use of gridlayout build smart resizing layout.  *   * built in vaadin 7.1 (pre-release), gridlayout & table portions should work in vaadin 6 well.  *   * * @author basil bourque  *   * copyright © 2013 basil bourque.  *   * example source code may used freely forever taking full responsibility doing so.  */ public class quadrantgridlayoutui extends ui {      @override     protected void init( vaadinrequest request ) {         // app demonstrates 2 versions of gridlayou made of quadrants, each containing table.         // simpler version contains 4 tables.         // other version includes middle column , row, each containing layout buttons.         final layout layoutquadrant = new quadrantgridlayout();         final layout layoutquadrantwithbuttons = new quadrantwithbuttonsgridlayout();          // display content on screen.          // if simplicity want remove tabsheet situation, swap next line remaining code below.         // this.setcontent( layoutquadrant ); // copy-paste either layout variable try each version.          tabsheet tabs = new tabsheet();         tabs.setsizefull(); // make tabsheet fill available space. default height fixed.         tabs.addtab( layoutquadrant, "simple" );         tabs.addtab( layoutquadrantwithbuttons, "with buttons" );         this.setcontent( tabs );     }  } 

lastly, here's code dummy data, subclass of table.

/**  *   */ package com.example.quadrantgridlayout;  import com.vaadin.ui.table;  /**  *   * creates simple vaadin table dummy data.  *   * @author basil bourque  *   *         copyright © 2013 basil bourque, except noted below.  *   *         source code may used freely forever taking full responsibility doing so.  *   */ public class astronomerstable extends table {      /**      *       */     public astronomerstable() {         super();         this.configure();     }      /**      * @param caption      */     public astronomerstable( string caption ) {         super( caption );         this.configure();     }      private void configure() {         // method's source code taken "the book of vaadin 7", plus added earlier astronomer.         // https://vaadin.com/book/vaadin7/-/page/components.table.html          // configure options.         this.setselectable( true );          /*          * define names , data types of columns. "default value" parameter meaningless here.          */         this.addcontainerproperty( "first name", string.class, null );         this.addcontainerproperty( "last name", string.class, null );         this.addcontainerproperty( "year", integer.class, null );          /* add few items in this. */         this.additem( new object[] { "hypatia", "of alexandria", new integer( -370 ) }, new integer( 1 ) );         this.additem( new object[] { "nicolaus", "copernicus", new integer( 1473 ) }, new integer( 2 ) );         this.additem( new object[] { "tycho", "brahe", new integer( 1546 ) }, new integer( 3 ) );         this.additem( new object[] { "giordano", "bruno", new integer( 1548 ) }, new integer( 4 ) );         this.additem( new object[] { "galileo", "galilei", new integer( 1564 ) }, new integer( 5 ) );         this.additem( new object[] { "johannes", "kepler", new integer( 1571 ) }, new integer( 6 ) );         this.additem( new object[] { "isaac", "newton", new integer( 1643 ) }, new integer( 7 ) );      }  }