Element may only contain a single child element, but found <ui:UiBinder> (:3)

[Ameen Malhans]

<!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:with type="com.folder.client.resources.Css" field="CSS" />

<ui:with type="com.folder.client.resources.Strings" field="STRINGS" />

<ui:style

type="com.folder.client.presenters.main.common.dialog.HelpDialog.LocalStyle">

.title {

padding-top: 30px;

padding-bottom: 20px;

padding-left: 80px;

padding-right: 80px;

color: #555555;

text-align: center;

font-weight: 700;

font-size: 30px;

font-family: 'Titillium Web', sans-serif;

padding-bottom: 20px;

}

.scroll {

max-height: 280px;

overflow-x: hidden;

overflow-y: auto;

}

.options {

width: 100%;

color: #555555;

text-align: center;

font-weight: 400;

font-size: 24px;

font-family: 'Titillium Web', sans-serif;

margin-left: auto;

margin-right: auto;

padding-left: 40px;

padding-right: 40px;

padding-bottom: 20px;

}

.options li {

text-align: left;

}

.options>div {

text-align: center;

padding-bottom: 40px;

}

.option-divider {

position: relative;

display: inline-block;

height: 20px;

top: 15px;

border-left: 1px solid rgba(0, 0, 0, 0.15);

}

.image {

width: 60px;

height: 60px;

margin: 10px;

margin-right: 20px;

}

.dialog {

width: 620px;

height: 300px;

min-height: 300px;

left: 0;

right: 0;

margin-left: auto;

margin-right: auto;

}

.content {

padding: 0px !important;

}

</ui:style>

<g:HTMLPanel ui:field="uiPanelOptions" >

<g:FocusPanel ui:field="uiPanelWelcomeTutorial" styleName="{style.options}">

<g:Image styleName="{style.image}" url="res/images/user_b.png" width="60px" height="60px" />

<g:Label>Welcome Tutorial</g:Label>

</g:FocusPanel>

<g:FocusPanel ui:field="uiPanelGettingStarted" styleName="{style.options}">

<g:Image styleName="{style.image}" url="res/images/user_b.png" width="60px" height="60px" />

<g:Label>Getting Started</g:Label>

</g:FocusPanel>

<g:FocusPanel ui:field="uiPanelAppointmentManagement" styleName="{style.options}">

<g:Image styleName="{style.image}" url="res/images/user_b.png" width="60px" height="60px" />

<g:Label>Appointment Management</g:Label>

</g:FocusPanel>

<g:FocusPanel ui:field="uiPanelClientMangement" styleName="{style.options}">

<g:Image styleName="{style.image}" url="res/images/user_b.png" width="60px" height="60px" />

<g:Label>Client Mangement</g:Label>

</g:FocusPanel>

<g:FocusPanel ui:field="uiPanelStaffManagement" styleName="{style.options}">

<g:Image styleName="{style.image}" url="res/images/user_b.png" width="60px" height="60px" />

<g:Label>Staff Management</g:Label>

</g:FocusPanel>

<g:FocusPanel ui:field="uiPanelIntegrationSetup" styleName="{style.options}">

<g:Image styleName="{style.image}" url="res/images/user_b.png" width="60px" height="60px" />

<g:Label>Integration Setup</g:Label>

</g:FocusPanel>

<g:FocusPanel ui:field="uiPanelTechnicalSetup" styleName="{style.options}">

<g:Image styleName="{style.image}" url="res/images/user_b.png" width="60px" height="60px" />

<g:Label>Technical Setup</g:Label>

</g:FocusPanel>

</g:HTMLPanel>

<g:HTMLPanel ui:field="uiPanelFooter">

<g:FocusPanel ui:field="uiPanelGetHelpOnline" styleName="{style.options}" width="50%">

<g:Label>Get Help Online</g:Label>

</g:FocusPanel>

<div class="{style.option-divider}" />

<g:FocusPanel ui:field="uiPanelSendFeedback" styleName="{style.options}" width="50%">

<g:Label>Send Feedback</g:Label>

</g:FocusPanel>

</g:HTMLPanel>

</ui:UiBinder> 



I while running this got following error

Compile with -strict or with -logLevel set to TRACE or DEBUG to see all errors.

         Computing all possible rebind results for 'com.booxi.client.presenters.main.common.dialog.HelpDialog.HelpDialogViewUiBinder'

            Rebinding com.booxi.client.presenters.main.common.dialog.HelpDialog.HelpDialogViewUiBinder

               Invoking generator com.google.gwt.uibinder.rebind.UiBinderGenerator

                  [ERROR] Element may only contain a single child element, but found <g:HTMLPanel ui:field='uiPanelOptions'> and <g:HTMLPanel ui:field='uiPanelFooter'>.: <ui:UiBinder> (:3)

         [ERROR] Errors in 'com/booxi/client/presenters/main/common/dialog/HelpDialog.java'

            [ERROR] Line 45: Failed to resolve 'com.booxi.client.presenters.main.common.dialog.HelpDialog.HelpDialogViewUiBinder' via deferred binding

         [WARN] For the following type(s), generated source was never committed (did you forget to call commit()?)

            [WARN] com.booxi.client.presenters.main.common.dialog.HelpDialog_HelpDialogViewUiBinderImpl

         Unification traversed 465 fields and methods and 286 types. 5 are considered part of the current module and 5 had all of their fields and methods traversed.

         [WARN] Some stale types ([com.booxi.client.presenters.main.common.dialog.HelpDialog_HelpDialogViewUiBinderImpl_GenBundle_en_InlineClientBundleGenerator$styleInitializer, com.booxi.client.presenters.main.common.dialog.HelpDialog_HelpDialogViewUiBinderImpl$Widgets, com.booxi.client.presenters.main.common.dialog.HelpDialog_HelpDialogViewUiBinderImpl_GenBundle_en_InlineClientBundleGenerator$1, com.booxi.client.presenters.main.common.dialog.HelpDialog_HelpDialogViewUiBinderImpl_GenCss_style, com.booxi.client.presenters.main.common.dialog.HelpDialog_HelpDialogViewUiBinderImpl_GenBundle, com.booxi.client.presenters.main.common.dialog.HelpDialog_HelpDialogViewUiBinderImpl, com.booxi.client.presenters.main.common.dialog.HelpDialog_HelpDialogViewUiBinderImpl_GenBundle_en_InlineClientBundleGenerator]) were not reprocessed as was expected. This is either a compiler bug or a Generator has legitimately stopped creating these types.

      [ERROR] Compiler returned false

      [WARN] recompile failed

      [WARN] continuing to serve previous version


why it says  Element may only contain a single child element, but found <g:HTMLPanel ui:field='uiPanelOptions'> and <g:HTMLPanel ui:field='uiPanelFooter'>.: <ui:UiBinder> (:3)?

[Jens]

When removing all the details of your UiBinder the file looks like:

<!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:with type="com.folder.client.resources.Css" field="CSS" />
  <ui:with type="com.folder.client.resources.Strings" field="STRINGS" />

  <ui:style type="com.folder.client.presenters.main.common.dialog.HelpDialog.LocalStyle">

    // ....
  </ui:style>
 
  // the first root element inside <ui:uibinder>

  <g:HTMLPanel ui:field="uiPanelOptions" >

  </g:HTMLPanel>

  // the second root element inside <ui:binder>

  <g:HTMLPanel ui:field="uiPanelFooter">

  </g:HTMLPanel>


</ui:UiBinder>

With UiBinder you can only have a single Widget / Element inside the <ui:UiBinder> tag. You would need to wrap your two HTMLPanels with a third one. The reason is that in your Java code the call to uibinder.createAndBindUi(this) returns this single Widget / Element. So you can not have two root Widgets / Elements.

-- J.