Question

我有一个要求，当点击一个按钮时，应该提示用户弹出/对话框以输入一些其他详细信息，例如姓氏，DOB等。我试图使用window.confirm()但我认为这不符合我的目的。有人能帮助我如何通过UIBinder在GWT中实现这一目标吗？

我在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>

我不确定要使用哪一个：弹出窗口或对话框！

感谢。

Answer 1

以下是使用uibinder的GWT对话框的框架：

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>

使用以下方式显示：

MyDialogBox m = new MyDialogBox();
m.show();

Answer 2

DialogBox是PopupPanel的孩子，具有其所有功能。此外，它（来自文档）：

..caption area at the top and can be dragged by the user.

关于UiBinder中的用法（再次来自文档）：

DialogBox elements in UiBinder templates can have one widget child and one 
<g:caption> child.

因此，您似乎需要将<table>替换为GWT窗口小部件，最有可能是<g:HTMLPanel>并将整个<table>放入其中。

此外，PopupPanel和DialogBox是独立的小部件，通常不会添加到其他小部件，但会通过.show()和hide()方法显示。所以，在你的UiBinder中，你可以放 <g:DialogBox>在根级别。

GWT Popup和UIBinder：面板还是DialogBox？

2 个答案: