Scrolling Tree in a Split Panel

I’m having a tough time figuring out how to get my UI to do something, and I’m hoping someone can help me out.

Here’s a mock-up of what I’m trying to achieve:

I have a SplitPanel, and inside the left vertical layout of the split panel I have a Tree component, followed by that Upload button. I want the Tree component to be scrollable, but I always want that Upload button to remain fixed at the bottom of the SplitPanel layout. So if I expand the Tree (which could grow to several hundred items), I want to be able to scroll the Tree only.

I tried putting the Tree component into a Panel (styled with Reindeer.PANEL_LIGHT) and turned scrolling on for the panel. I then added the Panel and the upload Button to the SplitPanel’s left VerticaLayout, with expand ratios set for 90% and 10% respectively to keep the button at the bottom.

This didn’t seem to work. First of all, the scroll bar doesn’t show. Also, when I expand the second item to show the many sub-items, the Upload button is pushed out of view.

Can anyone offer a solution?

Thanks

Hi Dave,

It should be possible to achieve wanted layout with the following code.


   //...

   Panel panel = new Panel();
   panel.setScrollable(true);
   panel.addComponent(tree);
   panel.setSizeFull();

   Layout leftLayout = new VerticalLayout();
   // this is important, since otherwise the size of the leftLayout is undefined
   leftLayout.setSizeFull(); 
   leftLayout.addComponent(panel);
   leftLayout.addComponent(uploadButton);
   leftLayout.setExpandRatio(panel, 1);

   splitPanel.setOrientation(SplitPanel.ORIENTATION_HORIZONTAL);
   splitPanel.setFirstComponent(leftLayout);
   splitPanel.setSecondComponent(rightLayout);

   mainWindow.addComponent(splitPanel);

   //...

Best regards,
Johannes

Johannes

Thanks for the code sample. I had basically the same code, but realized after I compared yours to mine that I forgot to set the size of the Panel after defining it.

This gets me all the time (smile). I know that you have to define the size of your component layouts to get things to line up the way you want, and I thought I had it all covered. It of course worked exactly as it should once I added the panel.setSizeFull() method call.

Thanks for taking the time to answer.

Regards,

Dave