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:

We have switched from HorizontalLayout to HorizontalSplitPanel and we've adjusted the splitter position using the setSplitPosition method with a value of 30 percent for the left component.

setSplitPosition is overloaded.

Method signature...