VerticalSplitPanel for a Form layout

So I’d like to have my Form use a VerticalSplitPanel for layout. I’d like to have all the form fields in the top component and the footer in the bottom section.

Sadly however the Form won’t display ANYTHING in the UI if you use a VerticalSplitPanel as it’s layout.

Here is the code:


public class MyForm extends Form
{
    public MyForm()
    {
        super(new VerticalSplitPanel());

        ((VerticalSplitPanel)getLayout()).addComponent(new FormLayout());
        ((VerticalSplitPanel)getLayout()).addComponent(new HorizontalLayout());
    }

    @Override
    protected void attachField(Object propertyId, Field field)
    {
        if(propertyId == null || field == null)
            return;

        ((FormLayout)((VerticalSplitPanel)getLayout()).getFirstComponent()).addComponent(field);
    }
}

If I use a VerticalLayout() or a GridLayout(), everything works exactly as you would think. As soon as I use VerticalSplitPanel() however, nothing appears in the browser and if you inspect the HTML, the form fields are just not there. No exceptions or errors get thrown. Breakpoints in field generators all are reached just like you’d think they would. attachField() is called for each one. It’s very strange!

Instead of trying to use a VerticalSplitPanel as the layout inside your form, just put the form into a VerticalSplitPanel as the first component.

That’s what I ended up doing. Thanks.