How to get the element by Id from GWT DockLayoutPanel?

Question

I am new to GWT and Java.

I tried create a DockLayoutPanel by GWT and the UI element from it.

But it failed and I got the Error message:

[ERROR] [MainPage] - Unable to load module entry point class com.Test.MainPage (see associated exception for details)

java.lang.AssertionError: A widget that has an existing parent widget may not be added to the detach list at com.google.gwt.user.client.ui.RootPanel.detachOnWindowClose(RootPanel.java:138)

some contents from MyDockLayoutPanel.ui.xml

 <g:DockLayoutPanel unit='EM'>
   <g:north size='5'>
     <g:FlowPanel styleName="{style.northPanel}">
       <g:Label>This is the NORTH panel</g:Label>
     </g:FlowPanel>
   </g:north>
   <g:west size='15'>
     <g:FlowPanel styleName="{style.westPanel}">
       <g:Label>This is the WEST panel</g:Label>
     </g:FlowPanel>
   </g:west>
   <g:center>
     <g:FlowPanel styleName="{style.centerPanel}">
       <g:Label>This is the CENTER panel</g:Label>
       <g:HTML>
        <h1>Web Application Starter Project</h1>

        <table align="center">
          <tr>
            <td colspan="2" style="font-weight:bold;">Please enter your name:</td>        
          </tr>
          <tr>
            <td id="nameFieldContainer"></td>
            <td id="sendButtonContainer"></td>
          </tr>
          <tr>
            <td colspan="2" style="color:red;" id="errorLabelContainer"></td>
          </tr>
        </table>
        </g:HTML>
     </g:FlowPanel>
   </g:center>         
 </g:DockLayoutPanel>

Some contents from MainPage.java

public void onModuleLoad() {


    SGCDockLayoutPanel p = new SGCDockLayoutPanel();
    RootLayoutPanel.get().add(p);       

    final Button sendButton = new Button("Send");
    final TextBox nameField = new TextBox();
    nameField.setText("GWT User");
    final Label errorLabel = new Label();

    // We can add style names to widgets
    sendButton.addStyleName("sendButton");

    // Add the nameField and sendButton to the RootPanel
     Use RootPanel.get() to get the entire body element
    RootPanel.get("nameFieldContainer").add(nameField);
    RootPanel.get("sendButtonContainer").add(sendButton);
    RootPanel.get("errorLabelContainer").add(errorLabel);
}

Answer 1

Use an HTMLPanel and its own specific add instead of an HTML widget and trying to make RootPanel work (you should see assertion failures the way you did it, which is why it fails)