O'Reilly logo

Vaadin 7 UI Design By Example Beginner's Guide by Alejandro Duarte

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Time for action – using grid layouts

Follow these steps to add a funny grid layout:

  1. First, stop showing the blue borders for layouts by commenting out or deleting the following line (find it in MainLayout's constructor):
    //showBorders();
  2. Now, in the LayoutFrameworkUI class, add a getGridLayout method and call it from init to add the returned component to our layout:
    public class LayoutFrameworkUI extends UI {
      
      protected void init(VaadinRequest request) {
    
        ...
    
        layout.addMenuOption("Grid layout", getGridLayout());
      }
    
      private GridLayout getGridLayout() {
        int rows = 3, columns = 3;
        GridLayout gridLayout = new GridLayout(columns, rows);
        gridLayout.setSizeFull();
    
        for (int row = 0; row < rows; row++) {
     for (int column = 0; column < columns; column++) ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required