GWT Binder error problem? show [ERROR] Element may only contain a single child element, but found <g:VerticalPanel ui:field='panel1'> and <g:VerticalPanel ui:field='panel2'>. Element <g:center>

[Stephen Fleming]

I got the problem when I compile application. I send my xml file.
Provide solution for me.

//.xml file

<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
xmlns:g='urn:import:com.google.gwt.user.client.ui'>

<g:DockLayoutPanel ui:field="dock">
<g:north size="25">
<g:FlowPanel>
<g:Button ui:field="save">Save</g:Button>
</g:FlowPanel>
</g:north>
<g:center>
<g:VerticalPanel ui:field="panel1">
<g:Button ui:field="button1">print</g:Button>
<g:Button ui:field="button2">clear</g:Button>
</g:VerticalPanel>
<g:VerticalPanel ui:field="panel2">
<g:TextArea ui:field="textArea" />
</g:VerticalPanel>

</g:center>
</g:DockLayoutPanel>
</ui:UiBinder>

[Eric Clayberg (Google)]

It looks like the answer is actually in the error message itself.

You have two center elements where you are only allowed to have one.

If you want both panels there, you would need to contain the both in a single panel that is the sole center element.

[Thomas Broyer]

As the error says, there can only be a single "center" widget. You'll have to wrap your 2 VerticalPanel (panel1 and panel2) within another widget (FlowPanel or whatever), or possibly merge them in a single VerticalPanel (move TextArea from panel2 to panel1, and remove panel1)