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 split panels

Let's add a split panel to our application.

  1. Change the lowerSection's type to HorizontalSplitPanel:
    public class MainLayout extends VerticalLayout {
    
      ...
    
      private HorizontalSplitPanel lowerSection =
          new HorizontalSplitPanel();
    
      ...
    }

    Tip

    Additional to HorizontalSplitPanel there is a VerticalSplitPanel class. We can infer the difference from the class name.

  2. You could run the application right now and you will see a split panel instead of the previous horizontal layout. But let's make a little change before running the application. Add this line somewhere in the constructor of MainLayout:
    lowerSection.setSplitPosition(30);
  3. OK, you can run the application now.

What just happened?

Oh yeah, the application is looking good: ...

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