CODEWITHSUNDEEP
javagwt
user1269185
user1269185

Reputation: 11

How to clear a RootPanel in GWT?

I am new to Java and GWT. From what I understand, the concept of GWT is not to navigate between pages but rather use the same RootPanel and change the content inside. My question is how to do so if I have added some widgets to the RootPanel and also associated them to a browser element. example:

RootPanel.get("sendButtonContainer").add(sendButton);
RootPanel.get().clear();

After this code, the sendbutton still appears on the RootPanel.

Help would be appreciated.

Upvotes: 1

Views: 7981

Answers (6)

liwston
liwston

Reputation: 113

RootPanel.get("id_of_element_already_in_html").getElement().removeFromParent();

Upvotes: 1

Vijay Sarin
Vijay Sarin

Reputation: 1336

Try this way:

RootPanel rootPanel = RootPanel.get();
rootPanel.get().add("yourButton");
rootPanel.clear();

Upvotes: 0

Daniel Langdon
Daniel Langdon

Reputation: 5999

Some of the answers above already solve your issue, but I guess the reason why you had the problem in the first place is because you are confusing GWT Widgets with HTML Elements. This can cause you a lot of headaches if you don't get it right.

The crux of the issue is that your website will always consist of HTML elements, which you can edit by modifying your main .html page, creating GWT widgets and adding them to other widgets or panels, manually writing the innerHTML of existing elements, etc. CSS will also be applied to these elements as expected.

So what about GWT widgets? Well, they are basically units of code that wrap an underlying element, either creating it or wrapping an existing one. These wrappers work at a higher level than plain elements, let's say at a logical level. They thus have their own logical hierarchy which might differ from the HTML hierarchy.

For instance, imagine you add a Label to a HorizontalPanel. Logically the label is a child of the panel, and it will be removed if you call clear. Now, if you go deeper into the DOM structure you will actually find a < table > element (wrapped by the panel) which has a < tr > element, which in turn has a < td > element, which in turn has a < div > element (wrapped by the label), which in turn has your label text. See how the hierarchies are different?

So, to go back to your actual issue: RootPanel.get().clear(); will remove any logical child in the GWT widget hierarchy, nothing in your case, since you added your button to a different panel ("sendButtonContainer"). The fact that in the HTML hierarchy sendButtonContainer might be a child element of the main RootPanel is irrelevant and independent. You can of course eliminate everything as somebody said by doing RootPanel.get().getElement().setInnerHTML(""); which works at the dom level. Your widgets may even still exist and be accessible, they will just not be on the document.

Upvotes: 4

Markus A.
Markus A.

Reputation: 12742

I know this question is fairly old, but maybe this is the answer you were looking for:

RootPanel.get("sendButtonContainer").clear();
RootPanel.get().clear();
RootPanel.get().getElement().setInnerHTML(""); // <-- This is the key!

This will remove everything from the root panel, or any other div you might specify by id inside the get() function:

  • Inside the one you are clearing, you must first call GWT clear() on any other RootPanel that you had added widgets to. Otherwise these widgets become orphaned in the next step and you will run into exceptions.

  • The third line then removes any HTML from the RootPanel. This includes any HTML that was contained in the webpage that your GWT app is based on, as well as any HTML added by GWT, which now there shouldn't be any left, if you did step one correctly, otherwise, you will run into problems as mentioned.

Hope this helps.

BTW: Good choice on using GWT! ;)

Upvotes: 1

Riley Lark
Riley Lark

Reputation: 20890

The problem here is that RootPanel.get().clear() can only remove widgets that have been added to it through GWT. Your "sendButtonContainer" was not added through GWT - it was added from the html page. The sendButton was also not added to the root panel, so it is not removed either.

If you just want to remove the send button, you can call RootPanel.get("sendButtonContainer").clear()

If you want to actually clear the whole root panel, including the sendButtonContainer, you'll have to explicitly add sendButtonContainer (and everything else) to the RootPanel as a widget. Some methods are available for wrapping elements on the html host page with widgets.

If possible, this is all much easier if you structure the whole page from within GWT entirely, and leave the host html page all but blank. UiBinder makes it relatively simple to continue using HTML, but from within GWT's framework.

Upvotes: 2

jabal
jabal

Reputation: 12337

You should try cleaning the container you attached your widget to:

RootPanel.get("sendButtonContainer").clear()

Upvotes: 1

Related Questions