gwtuibinder

GWT Popup and UIBinder: Panel or DialogBox?


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.


Solution

  • 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();