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!
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.
Related
I'm trying to implement a scrollPanel within a Horizontal Panel.
I read this post
GWT Horizontal panel with horizontal scrolling
The answer seems great, however I'm wondering if ravi wrapped his simple panel with a scroll Panel or vice versa.
Basically I wanted to know how the panels were nested within each other?
A scroll panel is nothing special - it's just a DIV element with some CSS set on it. That's what the answer to the other question means, as a SimplePanel is simply a Widget that appears as a DIV.
So what the other answer did was create a scrolling widget by:
Creating a SimplePanel as the content container
Set some CSS with the overflow-x attribute to the SimplePanel
Setting the content will now have a horizontal scroll bar (due to the CSS attribute).
If you prefer a more direct way of doing this check out UiBinder. Using it you can combine widgets/CSS/HTML elements in a form closer to how the browser renders your UI. So for example you can create a DIV with the required CSS to achive a scrolling container.
I am working with layout panels and datagrid. When I set the datagrid height to 100%, Grid is not rendering. My panel hierarchy looks like the following image
Am I doing it properly or I messed up the panel hierarchy???
Parent panel is the simple layout panel, inside that I have split layout panel -> scrollpanel -> datagrid
DataGrid requires to be put in a LayoutPanel or Panel that implements the ProvidesResize interface to be visible. ScrollPanel implements that interface.
Furthermore this chain of LayoutPanels from your DataGrid up to your root element/panel has to be unbroken. That seems to be the case in your panel hierarchy.
Finally you have to use the RootLayoutPanel instead of the RootPanel to add your LayoutPanels.
So did you make sure that you add your SimpleLayoutPanel to the RootLayoutPanel ?
In my case it was caused by this:
DataGrid rows not visible in second tab of TabLayoutPanel
I am using absolute panel in gwt application according to my window screen.but i want to use a panel which is auto scalable or adjustable according to client window screen. so is it possible or any panel which position relatively rather than absolutely?
Thanks
rahul
Try this one (SplitLayoutPanel):
http://gwt.google.com/samples/Showcase/Showcase.html#!CwSplitLayoutPanel
SplitLayoutPanel and DockLayoutPanel are great but they are limitated as they just extends LayoutPanel.
I would recommend to get used of LayoutPanel as it is more flexible for anny liquid layout you have in mind.
In pseudocode, you just need to.
Define your Widget x;
Define your LayoutPanel lp.
add the widget in lp. (lp.add(x)) this will just enlarge your widget to fit All the screen as you have not defined any constrain yet.
you can then apply constrains combined as you want. (BOTTOM; TOP; LEFT; RIGHT; WIDTH; HEIGHT;)
For example: TOP and WIDTH constrains:
lp.setWidgetTopWidth (the widget, the TOP position, the TOP unit, the WIDTH of the widget, the WIDTH unit).
Here, the UNIT is quite important. If you choose PX. Your application will NOT be liquid. As it will be static across different screens. In our company we have 16:9 and 4:3 screens. So we use PCT unit (percentage) for WIDTH contrains but we use PX for TOP (our header is the same for all the screens).
You can even apply EM unit to a dimension if you want your widget to get bigger if the user zoom in or zoom out your application.
Annother beneffit of using LayoutPanel is changing the layout on runtime. You can easily fit a second widget (and a third, fourth, ... ) by reducing the space dedicated to the others and then adding and applying constrains to the new one.
hope this helps you as it helped us!
http://google-web-toolkit.googlecode.com/svn/javadoc/latest/com/google/gwt/user/client/ui/LayoutPanel.html
I'm trying to insert a gwt datagrid in my application. If i set a static height (500px) everything works nice. But i want to make the dataGrid auto adjust to screen size. With height 100% i get a blank screen.
i've also tried to put the datagrid into a resizeLayoutPanel with the same results.
any tips?
All RequiresResize widgets should be given an explicit size, or be added to ProvidesResize widgets (up to a RootLayoutPanel or a ProvidesResize widget with an explicit size; the only exception is ResizeLayoutPanel which doesn't implement ProvidesResize because it couldn't honor the contract for its header and footer widgets, but it definitely honors it for the center widget).
So the question is: where did you add your DataGrid and/or ResizeLayoutPanel?
Thomas Broyer is correct. Nonetheless I found something of interest concerning the DataGrid (it does not happen in CellTable).
If you are using a DeckPanel and if you are creating the DataGrid on a hidden Panel of this DeckPanel, than the data of the DataGrid will not be visible if you show the panel of the DataGrid.
I found only one workaround: call addDataDisplay of your DataProvider "after" the panel was made visible.
I was trying some examples with LayoutPanel in GWT. I tried to place a layoutpanel (with size 100%,100%) onto a ScrollPanel that in turn is attached to the rootlayoutPanel. Though the height I have assigned is 100%, it is not showing the layoutpanel to be filled in the rootlayoutpanel. Even if I add a widget to the layoutpanel, its not visible in the designer's view. I could view them by dragging explicitly the layoutpanel on the designer view. But, this would ultimately force the size to be in pixels. why am I finding this behaviour? below is the code:
RootLayoutPanel rp = RootLayoutPanel.get();
LayoutPanel lp = new LayoutPanel();
lp.setSize("100%","100%");
ScrollPanel sp = new ScrollPanel(lp);
rp.add(lp);
with this code, I could see the layoutPanel only as a line. I couldn't see the area (box) covered by Layoutpanel. If I try to manually change the height by dragging, it automatically changes the height of the layoutpanel to pixels:
lp.setsize("100%","500px");
why am I seeing this behaviour? Is there any explanation??
Layout panels can be tricky. LayoutPanels are basically absolute panels, which are intended for full page web apps. To make it work all panels from the root panel down (or from the panel where resize is called and has a fixed size) must have RequiresResize. In your case (besides the err in your example where you add lp instead of sp to the rootpanel, but I assume you intended sp to be added), you put a non LayoutPanel between the RootPanel and the LayoutPanel, this breaks the layout flow and thus the LayoutPanel lp can't be automatically resized. The LayoutPanel will get no height/width.
However, using a ScrollPanel together with LayoutPanels isn't going to work.The whole idea of a LayoutPanel is to derive it's size based on it's parent size, but inside a ScrollPanel the size isn't related, so the size of a LayoutPanel can't be set.