CustomComponent not displaying in mainWindow

Hi,

I’ve tried to create a VerticalSplitPanel in a CustomComponent but it doesn’t get attached to the mainWindow - screen is just blank.

I took the code out of the Application.init() method to do this, adding only a call to
setCompositionRoot(mySplitPanel)

If I leave the VerticalSplitPanel code in the Application.init() method everything works ok. I tried adding some other components (labels, forms etc) to my CustomComponent and they worked ok so I’m baffled as to what is going on.

Any pointers? Much appreciated,

David


public void init() {
        Window w = new Window(getTitle());

        setMainWindow(w);
        
        w.setContent(new MainSplitPanelsComponent());
[color=#2a976b]
/*
        VerticalSplitPanel pageVerticalSplitPanel = new VerticalSplitPanel();

        pageVerticalSplitPanel.setSplitPosition(38, VerticalSplitPanel.UNITS_PIXELS);
        pageVerticalSplitPanel.setStyleName(Reindeer.SPLITPANEL_SMALL);
        pageVerticalSplitPanel.setLocked(true);
 
        pageVerticalSplitPanel.setFirstComponent(new Label("Header"));
        

        HorizontalSplitPanel bodyHorizontalSplitPanel = new HorizontalSplitPanel();
        bodyHorizontalSplitPanel.setStyleName(Reindeer.SPLITPANEL_SMALL);
        bodyHorizontalSplitPanel.setFirstComponent(new Label("First"));
        bodyHorizontalSplitPanel.setSplitPosition(20, HorizontalSplitPanel.UNITS_PERCENTAGE);
        
        bodyHorizontalSplitPanel.setSecondComponent(new Label("Second"));
        
        pageVerticalSplitPanel.setSecondComponent(bodyHorizontalSplitPanel);
        
        w.setContent(pageVerticalSplitPanel);
  */      
[/color]
    }

(Uncommenting the in-line declaration works).

My CustomCompoent looks like:

public class MainSplitPanelsComponent extends CustomComponent {
   
    private static final long serialVersionUID = -4182235654997776509L;

    public MainSplitPanelsComponent() {
        
        
        VerticalSplitPanel pageVerticalSplitPanel = new VerticalSplitPanel();

        pageVerticalSplitPanel.setSplitPosition(38, VerticalSplitPanel.UNITS_PIXELS);
        pageVerticalSplitPanel.setStyleName(Reindeer.SPLITPANEL_SMALL);
        pageVerticalSplitPanel.setLocked(true);
 
        pageVerticalSplitPanel.setFirstComponent(new Label("Header"));
        

        HorizontalSplitPanel bodyHorizontalSplitPanel = new HorizontalSplitPanel();
        bodyHorizontalSplitPanel.setStyleName(Reindeer.SPLITPANEL_SMALL);
        bodyHorizontalSplitPanel.setFirstComponent(new Label("First"));
        bodyHorizontalSplitPanel.setSplitPosition(20, HorizontalSplitPanel.UNITS_PERCENTAGE);
        
        bodyHorizontalSplitPanel.setSecondComponent(new Label("Second"));
        
        pageVerticalSplitPanel.setSecondComponent(bodyHorizontalSplitPanel);
        
        setCompositionRoot(pageVerticalSplitPanel);
    }
}

When you’re using the CustomComponent, have you tried setting it’s size? It might be that as CustomComponent it doesn’t have proper default size. When you’re using only the VerticalSplitPanel without the CustomComponent around it, default size gets properly set.

Try:



MainSplitPanelsComponent splitComponent = new MainSplitPanelsComponent();
splitComponent.setSizeFull();

w.setContent(splitComponent);

In the MainSplitPanelsComponent you could also try setting the composition root’s (VerticalSplitPanel’s) size to full:



VerticalSplitPanel pageVerticalSplitPanel = new VerticalSplitPanel();
pageVerticalSplitPanel.setSizeFull();

...

setCompositionRoot(pageVerticalSplitPanel);

You could also try debugging the layouts using the ?debug parameter in the address bar. From the debug window click the “Analyze layouts” button. Will print to console and debug window possible layouting issues.

Thanks Peter, setting the size did the trick. The tip on using the debug window also ironed out a few more problems I encountered nesting absolute layouts inside relative sized component so very handy.

For everyone here’s what the code looks like now:


    public void init() {

        // Text to show in browser tab
        String tabText = getTitle();

        mainWindow = new Window(tabText);
        setMainWindow(mainWindow);

        // To end session in Security Context when user closes browser/tab
        setLogoutListeners();
        
        mainSplitPanel = new MainSplitPanelsComponent();
        mainSplitPanel.setSizeFull(); // needed or you won't see the component

        AbsoluteLayout absoluteLayout = new AbsoluteLayout();
        absoluteLayout.addComponent(mainSplitPanel, "left: 2px; right:2px; top:2px; bottom: 2px");

        mainWindow.setContent(absoluteLayout);

    }