/* Create a 4 by 4 grid layout. */
         final GridLayout grid = new GridLayout(4, 4);
         grid.addStyleName("example-gridlayout");
 
         /* Fill out the first row using the cursor. */
         grid.addComponent(new Button("R/C 1"));
         for (int i = 0; i < 3; i++) {
             grid.addComponent(new Button("Col " + (grid.getCursorX() + 1)));
         }
 
         /* Fill out the first column using coordinates. */
         for (int i = 1; i < 4; i++) {
             grid.addComponent(new Button("Row " + i), 0, i);
         }
 
         /* Add some components of various shapes. */
         Button button3x1 = new Button("3x1 button");
         button3x1.setWidth("100%");
         grid.addComponent(button3x1, 1, 1, 3, 1);
         grid.addComponent(new Label("1x2 cell"), 1, 2, 1, 3);
         final InlineDateField date = new InlineDateField("A 2x2 date field");
         date.setResolution(DateField.RESOLUTION_DAY);
         grid.addComponent(date, 2, 2, 3, 3);
 
         main.addComponent(grid);
 

 import com.itmill.toolkit.Application;
 import com.itmill.toolkit.ui.AbstractComponent;
 import com.itmill.toolkit.ui.Button;
 import com.itmill.toolkit.ui.GridLayout;
 import com.itmill.toolkit.ui.Label;
 import com.itmill.toolkit.ui.Window;
 
 public class TestApp extends Application
 {
   private GridLayout grid = null;
   
   public static final String cellStyle = "test-cell";
   public static final String colHeadStyle = "test-col-head";
   public static final String headingStyle = "test-heading";
   public static final String spacerStyle = "test-spacer";
   public static final String pageButtonStyle = "test-page-change";
   
   @Override
   public void init()
   {
     // create window
     Window bigWindow = new Window("Test");
     setMainWindow(bigWindow);
     
     // add to application
     addWindow(bigWindow);
     createGrid();
     Button refresh = new Button("Refresh");
     bigWindow.addComponent(grid);
     bigWindow.addComponent(refresh);
     
     // add styles to app
     setTheme("test-theme");
   }
   
   private void createGrid()
   {
     // create grid
     grid = new GridLayout(7, 7);
     
     // add upper row
     Button up = new Button("UP");
     up.setStyleName(pageButtonStyle);
     grid.addComponent(up, 0, 0);
     
     Label space = new Label();
     space.setStyleName(spacerStyle);
     grid.addComponent(space, 1, 0);
     
     Button single = null;
     for(int i = 1;i < grid.getColumns() - 2;i++)
     {
       single = new Button(Integer.toString(i));
       single.setStyleName(headingStyle);
       grid.addComponent(single, i + 1, 0);
     }
     
     space = new Label();
     space.setStyleName(spacerStyle);
     grid.addComponent(space, grid.getColumns() - 1, 0);
     
     // middle rows
     char rowChar = 'A';
     for(int i = 1;i < grid.getRows() - 1;i++)
     {
       space = new Label(Character.toString(rowChar++));
       space.setStyleName(colHeadStyle);
       grid.addComponent(space, 0, i);
       
       space = new Label();
       space.setStyleName(spacerStyle);
       grid.addComponent(space, 1, i);
       
       space = new Label();
       space.setStyleName(spacerStyle);
       grid.addComponent(space, grid.getColumns() - 1, i);
     }
     
     // bottom row
     Button dn = new Button("DOWN");
     dn.setStyleName(pageButtonStyle);
     grid.addComponent(dn, 0, grid.getRows() - 1);
     
     space = new Label();
     space.setStyleName(spacerStyle);
     grid.addComponent(space, 1, grid.getRows() - 1);
     
     for(int i = 1;i < grid.getColumns() - 2;i++)
     {
       single = new Button(Integer.toString(i));
       single.setStyleName(headingStyle);
       grid.addComponent(single, i + 1, grid.getRows() - 1);
     }
     
     space = new Label();
     space.setStyleName(spacerStyle);
     grid.addComponent(space, grid.getColumns() - 1, grid.getRows() - 1);
   }
 }
 

 @IMPORT url("/test/ITMILL/themes/default/styles.css");
 .i-captionwrapper
 {
 	margin: 1px;
 }
 
 .i-button-test-heading
 {
 	width: 100px;
 	height: 50px;	
 }
 
 .i-label-test-spacer
 {
 	width: 20px;
 	height: 48px;
 	background-color: black;
 }
 
 .i-label-test-cell
 {
 	width: 100px;
 	height: 48px;
 }
 
 .i-label-test-col-head
 {
 	width: 100px;
 	height: 48px;
 	background-color: navy;
 	text-align: center;
 }
 
 .i-button-test-page-change
 {
 	width: 100px;
 	height: 50px;
 }