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 absolute layouts

Let's use an absolute layout.

  1. This is pretty straightforward. Change your LayoutFrameworkUI class to add the highlighted code:
    public class LayoutFrameworkUI extends UI {
    
      protected void init(VaadinRequest request) {
    
        ...
    
        layout.addMenuOption("Absolut layout",
            getAbsolutLayout());
      }
    
      ...
    
      private Component getAbsolutLayout() {
        Button button = new Button(
            "I'm whimsically located at 42, 57");
    
        AbsoluteLayout absoluteLayout = new AbsoluteLayout();
        absoluteLayout.addComponent(button,
          "left: 42px; top: 57px");
    
        return absoluteLayout;
      }
    }
  2. Run and gun, oh, sorry, that's basketball. Run and test, that is software development, oh yeah.

What just happened?

As expected the button is located exactly at the pixel coordinates ...

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