layout panel problem, invisible panels

[Rob]

Hi,

Why does this not work? "Header top" appears, but nothing else. The
divs inside the dock layout have zero height. HeaderPanel calls
onResize for it's 'content' element. Is that not enough to work with
LayoutPanels? If I remove the HeaderPanel, the DockLayoutPanel works
as expected. I want to use HeaderPanel, because I want a top div that
is sized naturally by the browser.

Rob

<g:HeaderPanel>
<g:Label>Header top</g:Label>
<g:DockLayoutPanel unit='PX'>
<g:west size='300'>
<g:Label>West</g:Label>
</g:west>
<g:center>
<g:Label>Center
</g:Label>
</g:center>
</g:DockLayoutPanel>
</g:HeaderPanel>

[Thad]

I've not used the HeaderPanel layout, but I'm wondering if the first
element it finds is becoming the content and the others are getting
ignored.

While I've done a lot with GWT, I'm relatively new to UiBuilder.
However it seems to me that, in keeping with the pattern of
LayoutPanel and DockLayoutPanel, HeaderPanel should have some "special
markup" like <g:header>, <g:footer>, and <g:content> (see
http://code.google.com/webtoolkit/doc/latest/DevGuideUiBinder.html#Panels)

I'm probably WAY OFF on this: That markup not described in the javadoc
nor are you getting a runtime error. Unfortunately GWT Designer
doesn't include a HeaderPanel so I can't draw one then compare it's
XML.

[Rob]

Yeah, I looked for things like <g:header> etc, but I don't think
that's it. It appears to be taking the first element as the header,
the second as the content. Those are actually sized correctly and all
the elements are in the page, but it's like the layout did not
propagate to the divs inside the DockLayoutPanel, because they have
height=0 so aren't visible.

Rob

On Jan 5, 12:30 pm, Thad <thad.humphr...@gmail.com> wrote:
> I've not used the HeaderPanel layout, but I'm wondering if the first
> element it finds is becoming the content and the others are getting
> ignored.
>
> While I've done a lot with GWT, I'm relatively new to UiBuilder.
> However it seems to me that, in keeping with the pattern of
> LayoutPanel and DockLayoutPanel, HeaderPanel should have some "special

> markup" like <g:header>, <g:footer>, and <g:content> (seehttp://code.google.com/webtoolkit/doc/latest/DevGuideUiBinder.html#Pa...)
>

[Aidan O'Kelly]

On Thu, Jan 5, 2012 at 3:21 PM, Rob <rob.ni...@gmail.com> wrote:

Hi,

Why does this not work?  "Header top" appears, but nothing else. The
divs inside the dock layout have zero height.  HeaderPanel calls
onResize for it's 'content' element. Is that not enough to work with
LayoutPanels?  If I remove the HeaderPanel, the DockLayoutPanel works
as expected.  I want to use HeaderPanel, because I want a top div that
is sized naturally by the browser.

 Calling onResize() is not sufficent, no, its really only used for being notified that the size has changed, not for setting the size. A LayoutPanel needs to be either added to another LayoutPanel, such as RootLayoutPanel, or be given a size explicitly. Unfortunately HeaderPanel is not a LayoutPanel (though it does need to be put inside one itself) so I'm not sure the best way to do this.... 

Just looking at how RootLayoutPanel does its business, in its onLoad() method, it has: 

@Override

  protected void onLoad() {

    getLayout().onAttach();

    getLayout().fillParent();

  }

So maybe extending LayoutPanel and doing something similar would do the job, but really I don't know if this is a good idea or not!  Your other options would be to use a static sized header, or use a DockLayoutPanel with a 'north' section that re-sizes itself when ever the content height changes (you can use the 'scrollHeight' property of the container element to measure how much height you need) but that's obviously a pretty ugly way to do it. 

I'd be interested to hear if getLayout().fillParent() does in fact work for this, or if anyone else uses it successfully. I think you'd have to call your custom LayoutPanel's onResize() method yourself, whenever the headers content/size changes.. so that any child widgets that need onResize() get notified of less/more space available. So, not much different than re-sizing your header manually.. :( 

Probably best to use a static height header if you want to save some time! 

[Vincent Fazio]

I've also had problems when trying to put a layout panel inside of (as a child of) a non-layout panel (basic panel).  I'm assuming this is what's happening when you place DockLayoutPanel inside of HeaderPanel.   You can however put non-layout panels inside layout panels.   

I'm new to GWT and I'm not sure why this works the way it does.

>

--
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.
To post to this group, send email to google-we...@googlegroups.com.
To unsubscribe from this group, send email to google-web-tool...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.

[Thomas Broyer]

When in doubt, look at the source:  http://code.google.com/p/google-web-toolkit/source/browse/trunk/user/src/com/google/gwt/user/client/ui/HeaderPanel.java#114

No "special markup", simply 3 child widgets, in order (header, content, footer).

[Aidan O'Kelly]

Actually, just noticed..  ResizeLayoutPanel looks to do exactly what you want. It holds a LayoutPanel inside a regular Panel and detects re-sizes, to provide onResize() events to it's one child widget. So

<g:HeaderPanel>

    <my:HeaderWidget>

    <g:ResizeLayoutPanel>

       <g:DockLayoutPanel> 

      ...

Should give you a DockLayoutPanel that changes size  dynamically depending on the content of the header/footer widgets.

 

[Zak Linder]

I do not use UiBinder, but I have come across this problem as well, and have found a solution that works for me.

The problem is that HeaderPanel only sets the size of the contentContainer, it does nothing with the contentContainer’s child widget (HeaderPanel#getContentWidget()). Aiden’s suggestion of using ResizeLayoutPanel as the content widget will not work for the same reason (I tried :P). So, my fix is to always wrap the content widget in a SimpleLayoutPanel that fills the contentContainer:

public class HeaderLayoutPanel extends HeaderPanel implements ProvidesResize{

  @Override
  public void setContentWidget(Widget w){
    SimpleLayoutPanel panel = new SimpleLayoutPanel();
    panel.setSize("100%", "100%");
    panel.setWidget(w);
    super.setContentWidget(panel);
  }
}

setSize("100%", "100%") works because the contentContainer’s dimensions are always set in px. Also, remember that this needs to be added to a LayoutPanel for it to fill all available space.

I called this class ‘HeaderLayoutPanel’ and had it implement the ProvidesResize marker interface because I feel that the SimpleLayoutPanel wrapper makes this a ‘true’ LayoutPanel, since it does fulfill the onResize() contract for the content widget.

Hope that helps!

[Thomas Broyer]

On Wednesday, July 10, 2013 5:54:19 AM UTC+2, Zak Linder wrote:

I do not use UiBinder, but I have come across this problem as well, and have found a solution that works for me.

The problem is that HeaderPanel only sets the size of the contentContainer, it does nothing with the contentContainer’s child widget (HeaderPanel#getContentWidget()). Aiden’s suggestion of using ResizeLayoutPanel as the content widget will not work for the same reason (I tried :P). So, my fix is to always wrap the content widget in a SimpleLayoutPanel that fills the contentContainer:

public class HeaderLayoutPanel extends HeaderPanel implements ProvidesResize{

  @Override
  public void setContentWidget(Widget w){
    SimpleLayoutPanel panel = new SimpleLayoutPanel();
    panel.setSize("100%", "100%");
    panel.setWidget(w);
    super.setContentWidget(panel);
  }
}

setSize("100%", "100%") works because the contentContainer’s dimensions are always set in px. Also, remember that this needs to be added to a LayoutPanel for it to fill all available space.

Looking at HeaderPanel, it looks like it should use a Layout and put the content widget into a Layer, just like SimpleLayoutPanel and ResizeLayoutPanel do.

Could you please file an issue on the tracker? (linking to this thread)

 

I called this class ‘HeaderLayoutPanel’ and had it implement the ProvidesResize marker interface because I feel that the SimpleLayoutPanel wrapper makes this a ‘true’ LayoutPanel, since it does fulfill the onResize() contract for the content widget.

The reason HeaderPanel doesn't implement ProvidesResize is because it doesn't fulfill the contract for the header and footer widgets (that's the whole design goal of HeaderPanel).

We should probably add it to the javadoc.

[Patrick Tucker]

What's the harm in making it implement ProvidesResize and correctly notify all children?  I've seen this topic so many times and have had to work around it on many projects myself.

[Thomas Broyer]

The goal of HeaderPanel is to let the header and footer use their "intrinsic size", so they shouldn't be RequiresResize widgets. Note that I don't disagree making HeaderPanel implement ProvidesResize.

Patches welcome ;-)

[Patrick Tucker]

That is what is so nice about it.  But generally we end up wanting to know about the resize to modify elements that are inside of the child widget either to reposition or resize them.

 

It is actually an easy fix, unfortunately the new review system isn't me friendly.  If anyone wants to take it on you basically just need to add the following code to

forceLayout():

    if (header != null && header instanceof RequiresResize) { //added
       ((RequiresResize) header).onResize();
    }

    if (footer != null && footer instanceof RequiresResize) { //added
      ((RequiresResize) footer).onResize();
    }

[Jens]

But generally we end up wanting to know about the resize to modify elements that are inside of the child widget either to reposition or resize them.

Hmm, just a guess, but if you have this desire then you probably use the wrong widget or your CSS can be done better in header and footer. 

-- J.

[Patrick Tucker]

We use them a lot for things that aren't page headers and footers.  But yes if I was displaying a title and a logout link or something like that in the header and needed to modify them on resize that would be a bad plan.

[Thomas Broyer]

On Wednesday, July 10, 2013 6:39:22 PM UTC+2, Jens wrote:

But generally we end up wanting to know about the resize to modify elements that are inside of the child widget either to reposition or resize them.

Hmm, just a guess, but if you have this desire then you probably use the wrong widget or your CSS can be done better in header and footer.

Put differently: GWT is either "size from the inner out" ("old" widgets, mostly use intrinsic sizing) or "size from the outer in" (layout panels, size always explicit), and HeaderPanel bridges them: header and footer are sized from the inner out and the content widgegt will be sized from the outer in depending on the header and footer size (and the overall HeaderPanel size, set from the outer in). There's nothing like "set width from the outer in and height from the inner out (aka 'maybe my height will change in response')". You can do it of course, but HeaderPanel probably is not the appropriate widget. It'd be easy to build a similar widget that follows your own rules though.

[Segun Razaq Sobulo]

Had a similar issue and ran into this thread. ContentWidgetView of GWT showcase actually does something similar however instead of extending HeaderPanel it simply wraps the content portion of the header panel in a simplelayoutpanel then makes a similar setsize(100%,100%) call in the constructor. Went with this approach. Also noteworthy is that if you need a scrollpanel, add your widget in the simplelayoutpanel to a scrollpanel vs replacing the simplelayoutpanel with a scrollpanel (similar to what the showcase code does, showcase way works if your widget that needs scrolling isn't a layoutpanel). 

[dimitr...@googlemail.com]

Thank you Zak for your advice, this custom HeaderLayoutPanel works perfectly for me.