how to enable scrolling for app using DecoratedTabPanel?

[ingo]

hello everyone,

i am using the DecoratedTabPanel to split my application into several
modules (http://honeyyycrm.appspot.com). however, i have currently no
scrolling at all (in no browser). i read about this in the mailing
list and it seems like a lot of developers have issues with this
(especially when they use TabPanels). i experimented with the
suggestions but i did not yet find a working solution. is there any
point in the documentation describing what to do to enable scrolling
when using TabPanels?

this is the widget that is inserted into the RootLayoutPanel:
http://code.google.com/p/honeycrm/source/browse/trunk/src/honeycrm/client/TabLayout.java
it contains a docklayoutpanel and inserts an instance of TabCenterView
into itself: http://code.google.com/p/honeycrm/source/browse/trunk/src/honeycrm/client/TabCenterView.java

RootLayoutPanel
\_ DockLayoutPanel (TabLayout class)
\_ DecoratedTabPanel (TabCenterView class)

this is the current hierarchy. now which steps are neccessary to
enable proper scrolling for the app?

regards,
ingo

[Olivier Monaco]

Do you want:
1) scroll the whole page? Don't use layouts (*LayoutPanel), there are
made to avoid scrolling. Did you read
http://code.google.com/intl/fr/webtoolkit/doc/latest/DevGuideUiPanels.html?

Try:

RootPanel
\_ DockPanel
\_ DecoratedTabPanel

2) scroll the content area of the tabs? Add a ScrollPanel in each tab
content.

Olivier

On 16 juin, 09:12, ingo <ingo.jaec...@googlemail.com> wrote:
> hello everyone,
>
> i am using the DecoratedTabPanel to split my application into several
> modules (http://honeyyycrm.appspot.com). however, i have currently no
> scrolling at all (in no browser). i read about this in the mailing
> list and it seems like a lot of developers have issues with this
> (especially when they use TabPanels). i experimented with the
> suggestions but i did not yet find a working solution. is there any
> point in the documentation describing what to do to enable scrolling
> when using TabPanels?
>

> this is the widget that is inserted into the RootLayoutPanel:http://code.google.com/p/honeycrm/source/browse/trunk/src/honeycrm/cl...

> it contains a docklayoutpanel and inserts an instance of TabCenterView

> into itself:http://code.google.com/p/honeycrm/source/browse/trunk/src/honeycrm/cl...

[ingo]

hello oliver,

thank you very much for the link! i want to achieve a page layout
similar to the google code ui http://code.google.com/p/honeycrm/: tabs
on top of the screen and right under the tabs is the module specific
content. if the content right under the tabs is too big the whole page
or the content of the tabpanel component should have scrollbars.

at the moment i do not really care where the scrollbars are - more
importantly is that there are scrollbars at all :-)

what do you mean with your suggestion to use a dockpanel instead of a
docklayoutpanel? should this solve the problem, too? i tried and it
did not work out for me.

i will read the stuff in the docs and play around with the different
containers. would really find a solution for this issue. has anyone
some sample code that i can have a look at? in the meantime you can
have a look at my code by browsing through the project
http://code.google.com/p/honeycrm/source/browse/#svn/trunk/src/honeycrm/client

kind regards,
ingo

On 16 Jun., 13:48, Olivier Monaco <olivier.mon...@free.fr> wrote:
> Do you want:
> 1) scroll the whole page? Don't use layouts (*LayoutPanel), there are

> made to avoid scrolling. Did you readhttp://code.google.com/intl/fr/webtoolkit/doc/latest/DevGuideUiPanels...

[Olivier Monaco]

Hi,

There is two type of layouts: RIA-like and web-page-like. The RIA-like
layout is done using the layout panels. The app stretch to the whole
available space. There is no scrollbars. The web-page-like layout is
done using HTML tags (and some standard panels). The app don't
stretch. If the content is larger than the viewport, scrollbars
appears, like in traditional pages.

Looking at the first screenshot, here is my proposal:

1) The main panel is a DockLayoutPanel attached to RootLayoutPanel.
2) The north slot contains the header.
3) The center slot contains a TabLayoutPanel.

But when you show data (list, form...) you may have no enough space to
show all. Here you start to use web-page-like layout. So:

4) The contain of the contact tab is a LayoutPanel with four slot:
Tighformat, the list, Detail view, Relations.
5) Tighformat, Detail view and Relations are standard panels
(FlowPanel) into ScrollPanels. If there not enough space, a scrollbar
will appear.
6) The list is some sort of DockLayoutPanel with the headers top, the
navigation buttons bottom and the contains of the list in the center
with a scrollbar is needed. The exact implementation depends on the
used widget for the list (SmartGWT, GXT, gwt-incubator...)

Hope this helps.

Think also to invert the color between selected tab and not selected
tab. When i saw the screenshot, I thinking that blue tabs are not the
current tab and white one are the current... The current tab must be
the lighter.

Olivier

On 16 juin, 17:48, ingo <ingo.jaec...@googlemail.com> wrote:
> hello oliver,
>
> thank you very much for the link! i want to achieve a page layout

> similar to the google code uihttp://code.google.com/p/honeycrm/:tabs

> on top of the screen and right under the tabs is the module specific
> content. if the content right under the tabs is too big the whole page
> or the content of the tabpanel component should have scrollbars.
>
> at the moment i do not really care where the scrollbars are - more
> importantly is that there are scrollbars at all :-)
>
> what do you mean with your suggestion to use a dockpanel instead of a
> docklayoutpanel? should this solve the problem, too? i tried and it
> did not work out for me.
>
> i will read the stuff in the docs and play around with the different
> containers. would really find a solution for this issue. has anyone
> some sample code that i can have a look at? in the meantime you can

> have a look at my code by browsing through the projecthttp://code.google.com/p/honeycrm/source/browse/#svn/trunk/src/honeyc...

[Stefan Bachert]

Hi Ingo,

from user point of view neither of your mentiones widget should scroll
at all.

RootLayoutPanel
\_ DockLayoutPanel (TabLayout class)
\_ DecoratedTabPanel (TabCenterView class)

\_ScrollPanel
\_Content A
\_ScrollPanel
\_Content B
\_ScrollPanel
\_Content C

The content page of a tab should be able to scroll.
Just put a scrollPanel in between.

Stefan Bachert
http://gwtworld.de

On Jun 16, 9:12 am, ingo <ingo.jaec...@googlemail.com> wrote:
> hello everyone,
>
> i am using the DecoratedTabPanel to split my application into several
> modules (http://honeyyycrm.appspot.com). however, i have currently no
> scrolling at all (in no browser). i read about this in the mailing
> list and it seems like a lot of developers have issues with this
> (especially when they use TabPanels). i experimented with the
> suggestions but i did not yet find a working solution. is there any
> point in the documentation describing what to do to enable scrolling
> when using TabPanels?
>

> this is the widget that is inserted into the RootLayoutPanel:http://code.google.com/p/honeycrm/source/browse/trunk/src/honeycrm/cl...

> it contains a docklayoutpanel and inserts an instance of TabCenterView

> into itself:http://code.google.com/p/honeycrm/source/browse/trunk/src/honeycrm/cl...

[ingo]

hello stefan,

thank you very much for this hint. i think so too and i tried it. but
it does not have the desired effect. see the diff
http://code.google.com/p/honeycrm/source/detail?r=73#
i put a scrollpanel around the widget that i insert into the decorated
tab panel. did you mean it this way?

kind regards,
ingo

On 17 Jun., 19:52, Stefan Bachert <stefanbach...@yahoo.de> wrote:
> Hi Ingo,
>
> from user point of view neither of your mentiones widget should scroll
> at all.
>
> RootLayoutPanel
>  \_ DockLayoutPanel (TabLayout class)
>   \_ DecoratedTabPanel (TabCenterView class)
>
>      \_ScrollPanel
>       \_Content A
>      \_ScrollPanel
>       \_Content B
>      \_ScrollPanel
>       \_Content C
>
> The content page of a tab should be able to scroll.
> Just put a scrollPanel in between.
>

> Stefan Bacherthttp://gwtworld.de

[Stefan Bachert]

Hi Ingo,

Setting size to 100% is in most cases just wrong.

you set your view size to 100%. What should this mean? 100% of what?
The spec say 100% of its parent (OK, IE has an other idea).
So the parent is ScrollView. ScrollView is X in size, its content is
also 100%*X. So NO need to show scrollers.

To show scroller the size of ScrollPanel needs to be smaller than its
content.

Your view needs a real absolute size. Either remove setting 100% (I
dont know, how your class calculates the size), or just setting it to
a large absolute value for test
Say 1000px 1000px. Than you should see scrollbars

Stefan Bachert
http://gwtworld.de

On Jun 18, 5:03 pm, ingo <ingo.jaec...@googlemail.com> wrote:
> hello stefan,
>
> thank you very much for this hint. i think so too and i tried it. but

> it does not have the desired effect. see the diffhttp://code.google.com/p/honeycrm/source/detail?r=73#

[ingo]

hello stefan,

i could not solve the issue yet. i made a screencast showing my
problem: http://www.youtube.com/watch?v=k_eqtePmbZY
could anyone please have a quick look through the sourcecode and give
me a hint about what i am missing here.. this is the entry point.
http://code.google.com/p/honeycrm/source/browse/trunk/src/honeycrm/client/Gae.java?r=110

other source files that might be of interest can be found here
http://code.google.com/p/honeycrm/source/browse/trunk/src/honeycrm/client/?r=110

kind regards,
ingo

On 19 Jun., 16:50, Stefan Bachert <stefanbach...@yahoo.de> wrote:
> Hi Ingo,
>

> Setting size to 100% is in most cases just wrong.
>
> you set your view size to 100%. What should this mean? 100% of what?
> The spec say 100% of its parent (OK, IE has an other idea).
> So the parent is ScrollView. ScrollView is X in size, its content is
> also 100%*X. So NO need to show scrollers.
>
> To show scroller the size of ScrollPanel needs to be smaller than its
> content.
>
> Your view needs a real absolute size. Either remove setting 100% (I
> dont know, how your class calculates the size), or just setting it to
> a large absolute value for test
> Say 1000px 1000px. Than you should see scrollbars
>

> Stefan Bacherthttp://gwtworld.de

>
> On Jun 18, 5:03 pm, ingo <ingo.jaec...@googlemail.com> wrote:
>
> > hello stefan,
>
> > thank you very much for this hint. i think so too and i tried it. but
> > it does not have the desired effect. see the diffhttp://code.google.com/p/honeycrm/source/detail?r=73#
> > i put a scrollpanel around the widget that i insert into the decorated
> > tab panel. did you mean it this way?
>
> > kind regards,
> > ingo
>
> > On 17 Jun., 19:52, Stefan Bachert <stefanbach...@yahoo.de> wrote:
>
> > > Hi Ingo,
>
> > > from user point of view neither of your mentiones widget should scroll
> > > at all.
>
> > > RootLayoutPanel
> > >  \_ DockLayoutPanel (TabLayout class)

> > >   \_DecoratedTabPanel(TabCenterView class)

>
> > >      \_ScrollPanel
> > >       \_Content A
> > >      \_ScrollPanel
> > >       \_Content B
> > >      \_ScrollPanel
> > >       \_Content C
>
> > > The content page of a tab should be able to scroll.
> > > Just put a scrollPanel in between.
>
> > > Stefan Bacherthttp://gwtworld.de
>
> > > On Jun 16, 9:12 am, ingo <ingo.jaec...@googlemail.com> wrote:
>
> > > > hello everyone,
>

> > > > i am using theDecoratedTabPanelto split my application into several

> > > > modules (http://honeyyycrm.appspot.com). however, i have currently no
> > > > scrolling at all (in no browser). i read about this in the mailing
> > > > list and it seems like a lot of developers have issues with this
> > > > (especially when they use TabPanels). i experimented with the
> > > > suggestions but i did not yet find a working solution. is there any
> > > > point in the documentation describing what to do to enable scrolling
> > > > when using TabPanels?
>
> > > > this is the widget that is inserted into the RootLayoutPanel:http://code.google.com/p/honeycrm/source/browse/trunk/src/honeycrm/cl...
> > > > it contains a docklayoutpanel and inserts an instance of TabCenterView
> > > > into itself:http://code.google.com/p/honeycrm/source/browse/trunk/src/honeycrm/cl...
>
> > > > RootLayoutPanel
> > > >  \_ DockLayoutPanel (TabLayout class)

> > > >   \_DecoratedTabPanel(TabCenterView class)

[Stefan Bachert]

Hi Ingo,

First of all, CSS(3) is a failed descriptive language. Inspite of its
complexity it does not support some basic requirements of layout
management.
So you have to choose a layout which is possible with CSS. You can't
define a layout and find out how to do it with CSS.

I watched your video. I detected things which went wrong.

The TabPanel has still a "flow layout". It grows when a inner div
moves to the next "line".
You probably want the tabPanel grow and shrink with the browser
window. This is possible with an absolute layout (LayoutPanel)
However, the panel with "search" has actually a flow layout, but this
conflicts with the above. You should give this panel a fixed height.

My proposal without looking into your source,
use RootLayoutPanel
add SearchPanel with TopHeight (0, height)
add TabPanel with TopBottom (height, 0)
(both panel with LeftRight (0, 0)

This should make your TabPanel grow and shrink with your browser
window.

A the very moment the TabPanel could not grow on inner changes, the
scrollbar has a chance to appear because the inner needs to be larger
than the outer.


Stefan Bachert
http://gwtworld.de

On 5 Jul., 12:39, ingo <ingo.jaec...@googlemail.com> wrote:
> hello stefan,
>

> i could not solve the issue yet. i made a screencast showing my
> problem:http://www.youtube.com/watch?v=k_eqtePmbZY
> could anyone please have a quick look through the sourcecode and give

> me a hint about what i am missing here.. this is the entry point.http://code.google.com/p/honeycrm/source/browse/trunk/src/honeycrm/cl...
>
> other source files that might be of interest can be found herehttp://code.google.com/p/honeycrm/source/browse/trunk/src/honeycrm/cl...