GWT Popup and UIBinder: Panel or DialogBox? - gwt

Question

I have a requirement where, when a button is clicked, the user should be prompted with a popup/dialog box to enter some additional details such as last name, DOB, etc.I tried to play with window.confirm() but I think this does not serve my purpose. Can some help me how this can be achieved in GWT through UIBinder?
I tried some thing like this in my UI binder.xml
<g:HTMLPanel visible="false" >
<g:DialogBox ui:field="dialogPanel"
animationEnabled="true" modal="false" glassEnabled="false">
<g:caption>More Details</g:caption>
<table>
<tr>
<td colspan="2" align="center">
<g:Datepicker ui:field="DOB">DOB:</g:Datepicker>
</td>
</tr>
<tr>
<td>UserName:</td>
<td>
<g:TextBox ui:field="usernameTextBox" />
</td>
</tr>
<tr>
<td></td>
<td align="right">
<g:Button ui:field="loginButton">OK</g:Button>
</td>
</tr>
</table>
</g:DialogBox>
</g:HTMLPanel>
I am not sure which one to go with: popup or dialog box!
Thanks.

Answer 1

Here is the skeleton for a GWT Dialog box using uibinder:
MyDialogBox.java
import com.google.gwt.core.client.GWT;
import com.google.gwt.uibinder.client.UiBinder;
import com.google.gwt.user.client.ui.DialogBox;
import com.google.gwt.user.client.ui.Widget;
public class MyDialogBox extends DialogBox {
private static final Binder binder = GWT.create(Binder.class);
interface Binder extends UiBinder<Widget, MyDialogBox> {
}
public MyDialogBox() {
setWidget(binder.createAndBindUi(this));
setAutoHideEnabled(true);
setText("My Title");
setGlassEnabled(true);
center();
}
}
MyDialog.ui.xml
<!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:style>
.panel {
background-color: ivory;
}
</ui:style>
<g:FlowPanel styleName="{style.panel}">
<g:Label>Dialog Content</g:Label>
</g:FlowPanel>
</ui:UiBinder>
show it using:
MyDialogBox m = new MyDialogBox();
m.show();

Answer 2

DialogBox is a child of PopupPanel and has all its features. Additionally it has (from the docs):
..caption area at the top and can be dragged by the user.
About usage in UiBinder (again from the docs):
DialogBox elements in UiBinder templates can have one widget child and one
<g:caption> child.
So it seems that you need to replace your <table> with a GWT widget, most probably <g:HTMLPanel> and put whole <table> inside it.
Also, PopupPanel and DialogBox are standalone widgets and normally do not get added to other Widgets, but are shown via .show() and hide() methods. So, in your UiBinder, you can put
<g:DialogBox> at the root level.