How do you clear RootLayoutPanel in GWT?

Question

I have Buttons attached to elements on the modules entrypoint html page using RootPanel.get("foo").add(button). If I subsequently create a LayoutPanel and attach it using RootLayoutPanel.get.add(layoutpanal) then the buttons cannot be clicked. This is all fine. If I then try and remove the layoutpanel or clear the RootLayoutPanel the buttons still cannot be clicked.

Any ideas how to clear this? Have I missed a step or should you simply never try and get back to using a page's RootPanel if you have used a RootLayoutPanel?

Sample code:

public void onModuleLoad(){

    final LayoutPanel lp1=new LayoutPanel();

    ClickPanel ping=new ClickPanel("Ping");
    ping.getElement().getStyle().setBackgroundColor( "#fdd" );
    ping.addClickHandler( new ClickHandler(){
        @Override
        public void onClick( ClickEvent event ){
            Window.alert( "Ping!!!" );
            //lp1.removeFromParent();
            //RootLayoutPanel.get().remove(lp1);
            //RootLayoutPanel.get().removeFromParent();
            RootLayoutPanel.get().clear();
        }
    } );

    ClickPanel bong=new ClickPanel("Bong");
    bong.getElement().getStyle().setBackgroundColor( "#ddf" );
    bong.addClickHandler( new ClickHandler(){
        @Override
        public void onClick( ClickEvent event ){
            Window.alert( "Bong!!!" );
        }
    } );

    lp1.add( ping );
    lp1.setWidgetLeftWidth( ping, 100, Style.Unit.PX, 500, Style.Unit.PX );
    lp1.setWidgetTopHeight( ping, 100, Style.Unit.PX, 500, Style.Unit.PX );

    lp1.add( bong );
    lp1.setWidgetLeftWidth( bong, 50, Style.Unit.PCT, 600, Style.Unit.PX );
    lp1.setWidgetTopHeight( bong, 50, Style.Unit.PCT, 200, Style.Unit.PX );

    Button b=new Button("Click Me");
    b.addClickHandler( new ClickHandler(){
        @Override
        public void onClick( ClickEvent event ){
            RootLayoutPanel.get().add( lp1 );
        }
    } );
    RootPanel.get("button1").add( b );
}

ClickPanel is simply overrides HTMLPanel implementing HasClickHandelers. Clicking "Click Me" opens the layout panel. Clicking the panel ping gets rid of the layout panel, but the button "Click Me" cannot be clicked. I've tried various options.

Update

Calling RootPanel.get().remove(RootLayoutPanel.get()) removes the RootLayoutPanel clearing the LayoutPanel and allowing widgets on the RootPanel to be clickable. However it does causes something to get screwed up because any subsequent call to RootLayoutPanel.get.add() throws an IndexOutOfBoundsException. So this is not the full answer.

Answer 1

How about RootPanel.get().remove(lp1)? (where lp1 is the LayoutPanel from the code above)

Answer 2

Second StackOverflow question, second answer by myself. Is that bad?

So, the first call to RootLayoutPanel.get() does two things; creates a RootLayoutPanel object, keeping a singleton reference to itself, and adds itself to the RootPanel by calling RootPanel.get().add().

You can remove it using RootPanel.remove(RootLayoutPanel.get()) however this will still leave the singleton reference to RootLayoutPanel which will be returned if you call RootLayoutPanel.get(). Since this is not attached to anything you can't add anthing too it without throwing an IndexOutOfBoundsException.

To work around this you can manually reattach the RootLayoutPanel to the RootPanel with RootPanel.get().add(RootLayoutPanel.get()). Calling this even if the RootLayoutPanel is already attached doesn't seem to do any harm... as far as I can tell.

Answer 3

Why do you use RootPanel at all?

You should try

RootLayoutPanel.get("foo").add(button);
RootLayoutPanel.get.add(layoutpanal);

RootLayoutPanel attaches itself to the document body (Although in this case it should attach to the foo element). As much as I know it takes up all the available space on the screen (or to be more precise - it takes up all the space in the browser window).

This way you will be able to use the button and have the layoutpanel.