how can I create a ScrollPanel that can resize with the browser

[stuckagain]

I have a GWT application that uses scrollpanels quite extensively like
you would normally use them in a SWING application.

I have for example a tabpanel, where the contents of the tabs can be
quite big.
The tabpanel should always be as big as the browser window, even when
it is resized.

The different tab contents, can be bigger than the browser window, so I
want to put them in a scrollpanel, so that the user can scroll the
contents.

Setting the width and height of the scrollpanels to 100% does not work,
no scrollbars are ever shown and the tabbed panel becomes bigger than
the window. If I set the size of the tabbedpanel with a fixed pixel
size, then the scrollbars are correctly shown.

Is there a way to keep the tabbed panel at 100% size of the browser
window and still have the scrollbars behaving correctly ? Note that the
contents of the tabbed also contain dynamic content, so the size
changes depending on user interactions.

I found a solution with a Window ResizeListener, but I do not want to
pile up all the event listeners when the GUI becomes even more complex
- removing the listeners is also not simple since I can not override
the onDetach method of Widget.

Any ideas how to solve this ellegantly and in a browser independant way
? I was hoping that GWT would shield off these differences between
browsers but it does not.

David

[Mat Gessel]

On 11/15/06, stuckagain <david...@gmail.com> wrote:
> I found a solution with a Window ResizeListener, but I do not want to
> pile up all the event listeners when the GUI becomes even more complex
> - removing the listeners is also not simple since I can not override
> the onDetach method of Widget.

I see no reason that you can't override onDetach(), so long as you
call the super method to prevent memory leaks. I updated the feature
request with an example:
http://code.google.com/p/google-web-toolkit/issues/detail?id=74

--
Mat Gessel
http://www.asquare.net

[stuckagain]

Hello Mat,

The reason why not is because the JavaDoc says we can not override it.
I know that I can override and call the super implementation, but if
the docs already tells me not to do this, I might run into troubles
with newer versions of GWT.

David

On Nov 15, 7:44 pm, "Mat Gessel" <mat.ges...@gmail.com> wrote:

> On 11/15/06, stuckagain <david.no...@gmail.com> wrote:
>
> > I found a solution with a Window ResizeListener, but I do not want to
> > pile up all the event listeners when the GUI becomes even more complex
> > - removing the listeners is also not simple since I can not override

> > the onDetach method of Widget.I see no reason that you can't override onDetach(), so long as you

[mP]

If you call super.onDetach() within your onDetach() you should be
fine. Its primarily used by panels to also detatch their immediate
children and so on.

[georgeuoa]

Carpe diem... if it serves you now, for a good reason and your
conscience is clean you'll deal with tomorrow's troubles tomorrow :)

[stuckagain]

Well the point is: it does not serve me well. The onDetach was not the
topic of my request, but the ScrollPanels are.

It looks like scrollpanels are a real pain to use unless I set them at
a fixed size.

In an application where you have a complex Widget tree, and the
scrollpane should fill a certain (yet dynamic) portion of the window,
it becomes nearly impossible to implement this correctly.

In a Swing application you just set a ScrollPane around an existing
one, and the layout manager will just adjust the size of the scrollpane
(and thus also the scrollbars) depending on the layout manager of the
parent container. When the user resizes the window everything happens
automatically.

This is not possible in GWT at this point.

David

[Andre Freller]

Did you try to implement the WindowResizeListener interface an used
 the Window.addWindowResizeListener to be notified on all window
resizes? This way you can change the size of your panel by event
notification.

Freller

[stuckagain]

Hello Andre,

Yes I did, and that works OK for simple applications like the email
demo client that is available with GWT. There they have implemented a
WindowResizeListener in the main application code and resizes 2
components by calculating the size correctly. In this demo it is fairly
easy since the main application knows exactly where the resizeable area
must be positioned (they have hardcoded the bottom border to make it
work).

But what if you want (for example) scrollbars inside a tabbed panel
(not using up the full window, since that would again be easy). I need
scrollbars inside every tabbed panel and it must persist its
scroll-position and must take up all the window estate that it should
logically take.

In Swing you do not need to bother with all this. You just put the
scrollpanel around the component and you put it in a layout manager and
everything works, no mather how complicated the component hierarchy
becomes.

David

On Nov 17, 12:18 pm, "Andre Freller" <andre.frel...@gmail.com> wrote:
> Did you try to implement the WindowResizeListener interface an used
> the Window.addWindowResizeListener to be notified on all window
> resizes? This way you can change the size of your panel by event
> notification.
>
> Freller
>

> On 11/17/06, stuckagain <david.no...@gmail.com> wrote:
>
>
>
>
>
> > It looks like scrollpanels are a real pain to use unless I set them at

> > a fixed size.- Hide quoted text -- Show quoted text -

[Pascal]

I'm running into the exact same problem. ScrollPanels do not work at
all in dynamic resize contexts. You also encounter similar problems if
you try to split a screen with percentages and expect the resize the be
handled correctly unless you do it explicitly with absolute numbers in
pixels when the window displays/resizes.

It seems that GWT is desperately in need of some real layout management
code. I was thinking about creating some classes to handle this but
from what I can seem, it's not possible to have access to all the info
that one would require to accomplish this task. It doesn't seem to be
possible to get the information about the full box model from the
panels and other widgets i.e. you can find out how much space a widget
takes in total (using getOffsetWidth/getOffsetHeight) but there's no
way to know what the size of the inside area is once you've removed the
padding, border, etc...

Am I missing something here?

Pascal

stuckagain a écrit :

[stuckagain]

I found a solution by putting the scrollpanel inside a AbsolutePanel.
The absolute panel will respect the dimension settings of the parent
component.

The only thing I need is a WindowListener per ScrollPanel.

The WindowListener is installed in the onLoad() and again removed by
the overloaded onDetach (due to a lack of onUnload()). This way I avoid
that too many listeners are registered. In most situations I only have
one or 2 scrollpanels active.

Whenever the window is resized I set the size of the scrollpanel to the
offsetheight/width of the parent component. This assumes that the
parent does not have any padding/margin/border, but that is easy to fix
by putting an extra DIV if needed.

There is one little problem with this mechanism:
When you use a TabPanel, then the onLoad is triggered for all the
panels that are registered. The result is that I set the size to 0,0 on
the invisible panels. The only way of fixing this was to add a tab
listener and triggering the onWindowResize off the scrollpanels.

It would be nice if the a GWT widget would have a generic way of
knowing when it becomes visible. Its not because onLoad is called that
you can assume that the user sees the widget.

A real layout manager would ofcourse be even better!

[Ian Bambury]

Could you give an example of our original problem. Why can't you put a scroll panel inside a tab and just use it?

 

Ian

http://www.examples.roughian.com/
 

[stuckagain]

You can put a scroll panel inside a tab, that is not the problem.

The problem is that scroll panels only work when you set the size in
pixels. That basically rules out the possibility to have a modern GUI
that can maximize the use of the screen estate when the window is
resized.

In a simple application, like the mail example in the GWT developer
tookit, this is not an isue. The application knows all the scrollbars
and implements a Window listener that modifies the size of the
scrollpanels in the application. In a bigger, structured application
you do not know, or even have access to all the ScrollPanels at
startup. An in many cases you do not even know how to calculate the
exact size that the scrollpane should have, due to complex auto sizing
behaviour of the browser (offsetHeight alone does not help you here).

But by using the Absolute Panel I do have a fix. If you put a
ScrollPanel inside it, that ScrollPanel is not contributing to the size
of the absolute panel. So I can set the absolute panel to 100% of its
parent. when the window is resized I just request the offset size of
the absolute panel and change the size of the scrollpanel to be
identical. This fixes the problem for me.

I'll see if I find some time to show whats wrong with a ScrollPanel.

David

[Ian Bambury]

Maybe this is a waste of time for you, explaining this to me, if so, don't feel you have to reply, but a scroll panel will automatically resize to use all the deck area of a tab panel at all times, adding scroll bars as necessary. What does the following code not do that you want?

 

Ian

http://www.examples.roughian.com/

 

 

TabPanel tp = new TabPanel();
RootPanel.get().add(tp);
tp.setSize("100%", "100%");
tp.getDeckPanel().setSize("100%", "100%");

ScrollPanel sp = new ScrollPanel();
tp.add(sp, "Panel");
sp.setSize("100%", "100%");
sp.setAlwaysShowScrollBars(true);

sp.add(new HTML("Lorem ipsum dolor sit amet,"
 + " consectetuer adipiscing elit. Morbi"
 + " gravida libero nec velit. Morbi"
 + " scelerisque luctus velit. Etiam dui"
 + " sem, fermentum vitae, sagittis id,"
 + " malesuada in, quam. Proin mattis"
 + " lacinia justo. Vestibulum facilisis"
 + " auctor urna. Aliquam in lorem sit amet"
 + " leo accumsan lacinia. Integer rutrum,"
 + " orci vestibulum ullamcorper ultricies,"
 + " lacus quam ultricies odio, vitae placerat"
 + " pede sem sit amet enim. Phasellus et"
 + " lorem id felis nonummy placerat. Fusce"
 + " dui leo, imperdiet in, aliquam sit amet,"
 + " feugiat eu, orci. Aenean vel massa quis"
 + " mauris vehicula lacinia. Quisque tincidunt"
 + " scelerisque libero. Maecenas libero. Etiam"
 + " dictum tincidunt diam. Donec ipsum massa,"
 + " ullamcorper in, auctor et, scelerisque sed,"
 + " est. Suspendisse nisl. Sed convallis magna"
 + " eu sem. Cras pede libero, dapibus nec,"
 + " pretium sit amet, tempor quis, urna. "));

tp.selectTab(0);

[zigoto]

Hi Ian,
I'll reply since I'm also running into problems with layout in general. Here's a simple example. I'm not a css layout expert but it seems impossible to get the layout when I let the browser make the layout decision. It seems that the browser will never respect the percentage sizing and things get even crazier when you try to make it work reliably across browsers.

The problem is that as soon as you do more than a simple layout that only has a simple panel, it starts to behave in erratic ways.

Anyway, here's the example, there's a getScrollPanel() method listed below. Normally the data is in more structured format that has both horizontal and vertical constraints but free flow html will do for this example. Also the border panel style only puts a simple border around the panel so we can see where the panels are. The layout tries to split the browser window in two, a top panel that's divided evenly between three panels at the top. And a TabPanel at the bottom.

I have other layout challenges but if this relatively simple layout could work reliably across browser that would be a good start. Also, it seems to be impossible to get this to not resize and get out of shape when the data panels are repopulated. What I'm looking for is a fixed layout that looks the same regardless of the data being present and regardless of the actual size of the data in the scroll panels.

Thanks

Pascal


    DockPanel topLeftPanel = new DockPanel();
    DockPanel topCenterPanel = new DockPanel();
    DockPanel topRightPanel = new DockPanel();
    topLeftPanel.setStyleName("borderPanel");
    topCenterPanel.setStyleName("borderPanel");
    topRightPanel.setStyleName("borderPanel");
   
    topLeftPanel.add(getScrollPanel(), DockPanel.CENTER);
    topCenterPanel.add(getScrollPanel(), DockPanel.CENTER);
    // leave the right one blank to simulate the data not being there
   
    TabPanel bottomPanel = new TabPanel();
    bottomPanel.setStyleName("borderPanel");   
    bottomPanel.add (getScrollPanel(), "tab1");
    bottomPanel.add(getScrollPanel(), "tab2");
    bottomPanel.setWidth("100%");
   
    HorizontalPanel topPanel = new HorizontalPanel();
    topPanel.add (topLeftPanel);
    topPanel.add(topCenterPanel);
    topPanel.add(topRightPanel);
    topPanel.setCellWidth(topLeftPanel, "33%");
    topPanel.setCellWidth(topCenterPanel, "33%");
    topPanel.setCellWidth (topRightPanel, "33%");
    topPanel.setWidth("100%");
   
    VerticalPanel mainPanel = new VerticalPanel();
    mainPanel.add(topPanel);
    mainPanel.add(bottomPanel);
    mainPanel.setCellHeight (topPanel, "50%");
    mainPanel.setCellHeight(bottomPanel, "50%");
    mainPanel.setSize("100%", "100%");
   
    RootPanel.get().add(mainPanel);




  private ScrollPanel getScrollPanel() {
        ScrollPanel panel = new ScrollPanel(new HTML("Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi sollicitudin purus ut urna. Fusce ornare risus sit amet mauris. Sed tincidunt. Curabitur tortor. Morbi laoreet ipsum a augue. Suspendisse ac quam eget urna vulputate aliquet. Donec interdum nibh id sem. Quisque ut ligula. Vivamus dolor. Maecenas sed nisl et justo nonummy pellentesque. Nunc mauris lacus, facilisis vel, placerat sed, facilisis sit amet, turpis. Donec feugiat ipsum ut tellus. In feugiat mi commodo quam. Phasellus congue vulputate erat. Ut at odio sed ante malesuada venenatis."+
                "Nullam in neque sit amet quam interdum congue. Suspendisse elementum, nulla ac pretium tincidunt, felis mauris porttitor massa, eu congue lorem turpis eget nunc. Curabitur eget mauris. Curabitur varius malesuada mi. Maecenas id nisl sed urna tincidunt egestas. Vestibulum ut dui. Aliquam bibendum, nunc ut vulputate volutpat, metus odio faucibus sapien, ultricies euismod pede diam eu ipsum. Integer gravida ante a arcu. Proin eros. Ut ac nisl. Sed ac pede in velit scelerisque eleifend."+
                "Vestibulum pharetra, nulla a ornare aliquet, nisl est facilisis ipsum, ac dapibus elit orci nec orci. In libero nisi, pharetra eget, fringilla eget, varius sit amet, dui. Duis eget velit non nulla mollis pharetra. Donec ut ligula. Aliquam semper semper diam. Nulla eget est. Sed sapien. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam scelerisque lobortis lacus. Pellentesque non urna ut nisl blandit adipiscing. Pellentesque at nisl. Sed eu augue ac augue lobortis aliquet. Curabitur lobortis neque eget orci. Aenean enim mauris, imperdiet eget, commodo id, ornare tempor, velit. Donec convallis venenatis augue. Donec eget odio sed quam pharetra porttitor. Suspendisse potenti. Etiam et sem. Nullam et urna a nibh consectetuer malesuada. Sed leo."+
                "Ut sed magna sed sapien consequat vehicula. Phasellus id neque quis magna consequat porta. Aliquam lacinia dolor eget nisi. Integer ante. Nunc molestie. Integer enim. Pellentesque nec sem eget est bibendum consectetuer. Pellentesque vulputate cursus massa. Donec a lectus. Ut sed est gravida lectus vestibulum malesuada. Suspendisse potenti."+
                "Fusce imperdiet. Ut at libero a enim dictum mattis. Suspendisse potenti. Sed eget libero. Aenean in neque sit amet diam ullamcorper sagittis. Nunc volutpat. Morbi accumsan. Ut volutpat nisl nec justo. Aenean fermentum urna sed sapien ullamcorper pellentesque. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc venenatis leo a arcu. Aenean odio erat, consectetuer vel, accumsan in, tincidunt in, arcu. Aenean ipsum mauris, varius et, pharetra at, auctor vitae, odio. Praesent eget ligula vitae libero tempor vestibulum. Morbi justo felis, ultricies id, porttitor condimentum, blandit in, enim. Praesent at urna et nunc rhoncus posuere. Nulla consectetuer. Morbi vulputate, velit a sollicitudin gravida, ligula mauris semper pede, non tincidunt turpis diam in urna. Integer sodales augue et pede."));
        panel.setSize("100%", "100%");
        return panel;
  }

[Ian Bambury]

From the code it's not easy to work out what you are trying to achieve can you confirm, or correct...

 

You want 3 evenly sized and spaced scroll panels in the top 50% of the browser window

 

You want a tab panel in the bottom 50% of the browser with 2 tabs, each with a full-sized scroll panel in it

 

  -------------------------------- 

 |          |          |          |

 |    sp    |    sp    |    sp    |

 |          |          |          |

  --------------------------------

 |                                | 

 |    TabPanel of ScrollPanels    | 

 |                                | 

  --------------------------------

 

yep?
 
Ian
http://www.examples.roughian.com/

[zigoto]

Yes, that's it.

Thanks

Pascal

[Ian Bambury]

I haven't tried it on other browsers, but..

 

 public void onModuleLoad()
 {

  VerticalPanel mainPanel = new VerticalPanel();

     RootPanel.get().add(mainPanel);

     mainPanel.setSize("100%", "100%");

     mainPanel.setBorderWidth (5);

     HorizontalPanel topPanel = new HorizontalPanel();

     mainPanel.add(topPanel);
     mainPanel.setCellHeight(topPanel, "50%");
     topPanel.setHeight("100%");
     topPanel.setBorderWidth (3);
    
     ScrollPanel topLeft = getScrollPanel();
     topPanel.add(topLeft);
     topPanel.setCellWidth(topLeft, "33%");
    
     ScrollPanel topMiddle = getScrollPanel();
     topPanel.add (topMiddle);
     topPanel.setCellWidth(topMiddle, "33%");
    
     ScrollPanel topRight = getScrollPanel();
     topPanel.add(topRight);
     topPanel.setCellWidth(topRight, "33%");

     TabPanel tp = new TabPanel();

     mainPanel.add(tp);

     tp.setSize("100%", "100%");
     tp.getDeckPanel().setSize("100%", "100%");

     tp.add(getScrollPanel(), "One");
     tp.add(getScrollPanel(), "Two");

     tp.selectTab(0);
 }

   private ScrollPanel getScrollPanel() {
         ScrollPanel panel = new ScrollPanel(new HTML("Lorem ipsum dolor sit amet,"

         panel.setSize ("100%", "100%");
         return panel;
 }

[zigoto]

It does work on IE but on Firefox, the top panel takes the whole browser window and you have to scroll to see the bottom panel.

Pascal

On 11/21/06, Ian Bambury <ianba...@gmail.com> wrote:

[zigoto]

Let's add a little twist to the layout. If we replace the getScrollPanel() in the original example with the following one, you'll see the layout break badly in IE as well.

Thanks

Pascal


  private ScrollPanel getScrollPanel() {
          FlexTable table = new FlexTable();
          for(int i = 0; i < 10; i++) {
              for(int j = 0; j < 10; j++) {
                  table.setHTML(i, j, "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi sollicitudin purus ut urna. Fusce ornare risus sit amet mauris. Sed tincidunt. Curabitur tortor. Morbi laoreet ipsum a augue. Suspendisse ac quam eget urna vulputate aliquet. Donec interdum nibh id sem. Quisque ut ligula. Vivamus dolor. Maecenas sed nisl et justo nonummy pellentesque. Nunc mauris lacus, facilisis vel, placerat sed, facilisis sit amet, turpis. Donec feugiat ipsum ut tellus. In feugiat mi commodo quam. Phasellus congue vulputate erat. Ut at odio sed ante malesuada venenatis");
              }
          }
        ScrollPanel panel = new ScrollPanel(table);
        panel.setSize("100%", "100%");
        return panel;
  }

On 11/21/06, Ian Bambury <ianba...@gmail.com> wrote:

[Ian Bambury]

Hang on! I'm still stuck on the simple example!

 

Ian

 

http://www.examples.roughian.com 

[stuckagain]

Hello Ian,

No, its not a waste of time, its just that I do not have internet
access on my development machine,
so I have to run around with a memory stick and I'm on a deadline (but
who isn't ? :-))

Your example already shows the weakness of the ScrollPanel component.
I'm using IE6 SP1 (I don't know if it works the same in FireFox).

Just resize the browser window to a point where the contents of the
tabs no longer fit in the browser window.
The vertical scrollbar never becomes active, its always grayed out, but
the tabpanel becomes bigger than the
browser window.

Your example has data in the tabs that reflows very easy. With complex
user interfaces, the contents are not
reflowable HTML but other UI components that have to stay in the same
position, so even the horizontal size
becomes bigger than the browser window.

Hopes this explains my problem a bit ? I know what the cause of the
issue is the browser and CSS specifications
for overflow, but I tought we were trying to create rich desktop like
GUIs in a browser window. There is a lot of
information to be shown in a business application and it is very
important that we can decide on the reflow and
scrolling behaviour to put as much as possible on one page.

David

[Ian Bambury]

Hi David,

 

Actually, my example doen't show the weakness of a scrollpanel as you described as I didn't put the tabpanel in a scrollpanel, but put scrollpanels in the tabpanel.

 

I find it hard to stick with problems in the abstract,I need real problems to solve hence the example I gave. Pascal posted some code which didn't work. I stated the requirements as I saw them. Pascal said "Yes, that's it". I produced code which did what he asked for.

 

If someone asks you to produce a bicycle, and you produce a bicycle, it's not unfair to point out that it won't reach a thousand miles an hour and won't go sideways or up and down and has problems towing a caravan, but it is unfair to expect it to do it when it wasn't in the original spec.

 

Not that you did anything like that.

 

You asked

 

"Is there a way to keep the tabbed panel at 100% size of the browser
window and still have the scrollbars behaving correctly ? Note that the
contents of the tabbed also contain dynamic content, so the size
changes depending on user interactions."

 

Well, yes there is. The example I gave Pascal does this. But it's my interpretation of 'correctly' and, with nothing said to the contrary, I've done it with text. But there again, if you asked me to write a word-processor, it wouldn't have a print function in it unless you specifically asked for it. Or keyboard support, for that matter. If it does what you asked for in the signed written spec, then you owe me the money :-)

 

So what elements do you have lying about in your scroll panel then?

 

Ian

http://www.examples.roughian.com/

[zigoto]

Ian, if you look at the second example I gave you (the ScrollPanel that includes a FlexTable,) you will see what he means I think.

As with your comment about giving me code that worked according to my spec. I still can't figure out how to make it work in Firefox where it doesn't even work with simple reflowing content in the ScrollPanel.

Thanks for all your help.

Pascal

[Ian Bambury]

You're right, it only worked in IE. I thought we; established that it appeared to be an error on the part of FF, but I can't see me saying it anywhere, perhaps it will turn up later. Anyhow...what I said (or meant to say) was:

 

If you put 33% wide scroll panels in a FlowPanel with display:inline in the css (it won't take with DOM.setAttribure) then you can look in the DOM Inspector in FF and see the width set to 33%, but look at the browser and it's 100%.

 

I'm still not admitting defeat, but if I find anything, it will only be a workaround and I doubt there's a better one than David's.

 

Cheers,

Ian

http://www.examples.roughian.com/

 

[melody]

I have a slightly different problem but one that is related to
ScrollPanels and TabPanels, TabBar items to be specific. I have tried
describing this problem in another thread but no one replied so I
thought maybe I repeated a problem that has been dealt with somewhere.
I have however not found anything that solves my problem.

My problem is that I have a Dynamic TabPanel where users can create any
number of Tabs. Now when the number of Tabs increases beyond a certain
number, the TabBar grows beyond the a size that can be fitted on the
screen. In Swing/MFC or other UI frameworks, when that happens the
TABBAR displays ScrollPanel with buttons on the right so that you can
scroll from one TabBar Item to the other. GWT does not seem to have the
capabbility however. To make matters worse, you cannot simply subclass
the TabBar class because then there is no way of assigning a custom
TabBar object to a TabPanel.

Does anybody know of a way or some workaround for allowing scrolling on
the TabBar that is part of a TabPanel?

I really would also like the ability to subclass TabBar as do some
mouse event processing for example I want the user to rightclick on a
TabBar Item and get a popup menu one of whose options is to close that
tab. Anyway to do that that somebody knows.

Thanks,

Melody