GWT ScrollPanel headers

Question

I just started looking into GWT today, and would like to poke the experts on how to achieve a certain result.

I need to have a scrollPane with headers, similar to swing's JSCrollPane. For those not familiar with it, a JScrollPane can have either a row or a column header. For now let's focus on one with row headers. The main component would be a Canvas in which I would draw a view based on the position of the scroll bars for the scroll pane

In the case of a row header, this header can be filled with components stacked vertically. The vertical scroll bar scrolls the vertical components stack, as well as the main client area. The horizontal scrollBar scrolls horizontally the main area, but not the row header, which remains always visible.

As far as I can tell the standard GWT ScrollPanel doesn't support headers directly.

First of all, is there a component providing this functionality already in standard GWT? I looked at the Cell components, which might work for column headers, but don't seem to work for row ones. Is there such a component in some third-party (possibly open source) library?

If I had to implement this, what approach would you suggest?

I considered creating just a VerticalPanel for the row header, a Canvas as large as the view for the main component. I can draw the content on the canvas upon scroll changes, but I'm not sure how to make only a portion of the VerticalPanel show (viewport).

I also considered wrapping just the vertical panel in a ScrollPane, have a separate horizontal scrollbar to (virtually) scroll around the canvas horizontally, but in this case the vertical scroll bar appears between the header and the canvas, which is not what I want.

Thanks!

Andrei Volgin Andrei Volgin · Accepted Answer · 2015-12-07T22:39:33

Use a LayoutPanel with two children: FlowPanel (or a Label) to represent your header (vertical or horizontal) and a ScrollPanel. Position these widgets next to each other.

LayoutPanel layoutPanel = new LayoutPanel();
Label header = new Label("My header");
ScrollPanel scrollPanel = new ScrollPanel();

layoutPanel.add(header);
layoutPanel.add(scrollPanel);

layoutPanel.setWidgetLeftWidth(header, 0, Unit.PX, 36, Unit.PX);
layoutPanel.setWidgetLeftRight(scrollPanel, 36, Unit.PX, 0, Unit.PX);

LayoutPanel implements ProvidesResize, so it will give the available space to ScrollPanel. Make sure that LayoutPanel itself is a child of a widget that implements ProvidesResize, or set its size explicitly.

If you only support modern browsers, you can achieve the same result with a flexbox layout model. Set "flex-grow: 0" on a header, and "flex-grow: 1" on a ScrollPanel. The advantage is that you can turn the same component into vertical or horizontal by changing just one CSS property. And it's more responsive and easier to adjust to different screen sizes.

GWT ScrollPanel headers

1 Answers