why can't i hide DialogBox in UiBinder in GWT? - gwt

Question

in Test.ui.xml
<g:DialogBox ui:field="wishlistDialogBox" autoHide="true">
<g:caption>Test</g:caption>
<g:HTMLPanel> some widgets..</g:HTMLPanel>
</g:DialogBox>
After running, the application still show the DialogBox, so I tried to set hide for "wishlistDialogBox" in TestView.java but it didn't work.
#UiField DialogBox wishlistDialogBox;
#Inject
public TestView(final Binder binder) {
widget = binder.createAndBindUi(this);
wishlistDialogBox.hide();
}
Then i set hide for it in TestPresenter.java but it still didn't work
#Override
protected void onBind() {
super.onBind();
getView().getWishlistDialogBox().hide();
}
What's wrong, Goodle didn't explain it at all.
In addition, how to reuse the DialogBox?

Answer 1

DialogBox (and PopupPanels in general) does not work like any other widget when speaking about adding them to the DOM. You should never attach them directly to it (i.e., panel.add(yourDialogBox) or inside a UiBinder XML file) as you did. Instead you should create them, and simply call hide()/show(), and the like methods, to get it displayed/hidden (i.e., attached/detached at the end of/from the DOM).

Answer 2

Something that works for me is creating a Dialogbox separately from any other widgets. So it has its own Java file and its own ui.xml file :
UiBinder xml file:
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
xmlns:g="urn:import:com.google.gwt.user.client.ui">
<g:DialogBox ui:field="dialog">
<g:caption>My Dialog</g:caption>
<g:HTMLPanel>
<g:Button ui:field="closeButton" text="close" />
</g:HTMLPanel>
</g:DialogBox>
</ui:UiBinder>
Java file:
public class MyDialog { // here you do not inherit anything
private static MyDialogUiBinder uiBinder = GWT.create(MyDialogUiBinder.class);
interface MyDialogUiBinder extends UiBinder<Widget, MyDialog> {
}
#UiField
DialogBox dialog;
#UiField
Button closeButton;
public MyDialog() {
// make cast to DialogBox
dialog = (DialogBox) (uiBinder.createAndBindUi(this));
}
public void hide() {
dialog.hide();
}
public void show() {
dialog.center();
}
#UiHandler("closeButton")
public void onClick(ClickEvent event) {
hide();
}
}

Answer 3

Finally i figured out a way, that is to put the DialogBox into a invisible HTMLPanel
<g:HTMLPanel visible="false">
<g:DialogBox ui:field="wishlistDialogBox" autoHide="true">
<g:caption>Test</g:caption>
<g:HTMLPanel> some widgets..</g:HTMLPanel>
</g:DialogBox>
</g:HTMLPanel>
Then just call show & hide DialogBox as usual & it will show the DialogBox even the DialogBox was wrapped inside an invisible HTMLPanel.
getView().getWishlistDialogBox().show();