Basic Panel nesting in GWT

Question

Following nesting of Basic Panel is possible in GWT ?

<g:HTMLPanel>
     <g:HTMLPanel>
      .......
     </g:HTMLPanel>
  <g:ScrollPanel>
     <g:HTMLPanel>
      ........  
     </g:HTMLPanel>
  </g:ScrollPanel>
</g:HTMLPanel> 

My Problem is I need to scroll second HTML Panel. My UIBinder will be containing two children HTMLPanels under a parent HTMLPanel. But I need second htmlpanel scroll-able.

Answer 1

I just created a new GWT project and

UiBinder file:

 <!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
    xmlns:g="urn:import:com.google.gwt.user.client.ui">
    <ui:style>
    .important {
        font-weight: bold;
    }
    </ui:style>
    <g:HTMLPanel>
        <g:HTMLPanel>
        First panel
    </g:HTMLPanel>
    <g:ScrollPanel height="100px">
    <g:HTMLPanel>
            aaaaaaaaaa<br/>aaaaaaaaaa<br/>aaaaaaaaaa<br/>aaaaaaaaaa<br/>
            aaaaaaaaaa<br/>aaaaaaaaaa<br/>aaaaaaaaaa<br/>aaaaaaaaaa<br/>
            aaaaaaaaaa<br/>aaaaaaaaaa<br/>aaaaaaaaaa<br/>aaaaaaaaaa<br/>
            aaaaaaaaaa<br/>aaaaaaaaaa<br/>aaaaaaaaaa<br/>aaaaaaaaaa<br/>
    </g:HTMLPanel>
    </g:ScrollPanel>
    </g:HTMLPanel>

</ui:UiBinder> 

And Java file

public class RetaTest extends Composite implements HasText {

    private static RetaTestUiBinder uiBinder = GWT
            .create(RetaTestUiBinder.class);

    interface RetaTestUiBinder extends UiBinder<Widget, RetaTest> {
    }

    public RetaTest() {
        initWidget(uiBinder.createAndBindUi(this));
    }


    public RetaTest(String firstName) {
        initWidget(uiBinder.createAndBindUi(this));
    }


    @Override
    public String getText() {
        // TODO Auto-generated method stub
        return null;
    }


    @Override
    public void setText(String text) {
        // TODO Auto-generated method stub

    }

}

And onModuleLoad

  public void onModuleLoad() {

    RootPanel.get().add(new RetaTest());
  }

It works.

Answer 2

There are panels in GWT that take their size from their parents and/or provide size to their children. For example, when you add HTMLPanel to the RootPanel, the RootPanel provides its own size (equal to the browser view) to this HTMLPanel.

HTMLPanel, however, does not implement ProvidesResize() interface. So, when you add another HTMLPanel and a ScrollPanel to it, these panels have initial height of zero. After that these panels take their height from their own children.

This means that your ScrollPanel will continue to expand as you add more content to it, and it will never start scrolling. You have two options to fix this.

First, you can set a height on ScrollPanel (ie height="100px").

Second, you can use a LayoutPanel instead of HTMLPanel as a container for your view, and add HTMLPanel and ScrollPanel to different layers of this LayoutPanel. Each layer provides a size to its child.

In both cases your ScrollPanel will have a specified height (in pixels, percents, ems, etc.) Therefore, it will start scrolling once the height of its children exceeds its own height.

Answer 3

Fix the width of scroll panel, but do not fix the width for its children HTML panel. Then it should work. Nothing is problem in your code, except fixing the width properties accordingly.

This is just exact solution to your problem. But to understand some what beyond this read the first answer given by Andrevi Glovin.