如何在 GWT 的 UiBinder 中使用按钮？答案

【问题标题】：How to use buttons with GWT's UiBinder?如何在 GWT 的 UiBinder 中使用按钮？
【发布时间】：2013-08-12 14:53:36
【问题描述】：

在 MyPanel.ui.xml 中：

<button class="btn" ui:field="myButton">Save</button>

在 MyPanel.java 中：

public class MyPanel extends Composite {
    ...
    @UiField ButtonElement myButtonUi;
    ...
    public MyScreen() {
        final HTMLPanel panel = uiBinder.createAndBindUi(this);
        initWidget(panel);
        Button myButton = Button.wrap(myButtonUi);

在 MyEntryPoint.java 中：

if (....)
    RootPanel.get().add(new MyPanel());

所以我觉得我不太了解如何使用 UiBinder。

我打算将 HTML 与 ui:field=".." 一起使用，以便网页设计师可以在 UI 字段上设置诸如 class="xx" 之类的内容。大多数 GWT 文档都假定您有一个 Button 而不是 ButtonElement。但是如果我使用一个按钮，我需要在 HTML 文档中有一个<g:Button>，这意味着我的网页设计师不能设置类？我的意思是 UiBinder 的目的是允许人们使用普通的 HTML 并将其与 GWT 代码集成？

当我执行上述操作时，在换行线上，我在开发模式下从以下位置收到 NullPointerException：

public static Button wrap(com.google.gwt.dom.client.Element element) {
    // Assert that the element is attached.
    assert Document.get().getBody().isOrHasChild(element);

在生产模式下，它似乎工作正常。在 Eclipse 的开发模式调试器中，当我右键单击并“检查”表达式“Document.get().getBody()”时，Eclipse 显示“无法向非类类型对象发送静态消息”。

我该怎么办？是否因为我需要先附加元素而发生空指针异常？如果是这样，怎么做？（我已经在调用 createAndBindUi 并且传递给 wrap 的元素是非空的）。

【问题讨论】：

标签： gwt uibinder

【解决方案1】：

所以最后，这就是答案。我编辑了它并删除了无用的 cmets。

如果您的计划是使用 UiBinder 将组件从 ui.xml 连接到视图的 Java 代码，则不能在 ui.xml 中使用 HTML。而不是

<button class="btn" ui:field="myButton">Save</button>

使用

<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder' xmlns:g='urn:import:com.google.gwt.user.client.ui'>
<g:Button styleName="btn" text="Save" ui:field="myButton"/>

然后在您的视图中 -java 代码 - 只需键入

@UiField com.google.gwt.user.client.ui.Button myButton;

public MyScreen() {
    final HTMLPanel panel = uiBinder.createAndBindUi(this);
    initWidget(panel);
}

就是这样。

“styleName”属性足以让您的设计师挂钩 CSS 类。 This other post 可能会让您感兴趣。设计人员必须了解哪些属性在哪些组件上可用。使用 UiBinder 不像使用 HTML 那样简单。

UiBinder 不是用于编写 HTML，而是用于编写 GWT 可以理解并编译为 javascript（反过来会生成页面的 HTML）的 XML。它不像 JSP 机制，您可以立即插入纯 HTML。

当您必须将 ui 元素（来自 ui.xml 的小部件或组合）与您的 Java 视图代码（即使用 @UiField 或 @UiHandler 注释）关联时，UiBinder 最有用。

【讨论】：

感谢您的回答。唉，这不起作用，如果我在 HTML 中有 @UiField Button 但 <button>，我得到：类型不匹配：无法从 ButtonElement 转换为 Button。
“UiBinder 不是用于编写 HTML 而是..”这很遗憾，HTML 通常来自设计人员，即使是在交互式应用程序中，例如可以使用 GWT 创建的交互应用程序。 UiBinder 的概述特别指出“使与更熟悉 XML、HTML 和 CSS 而非 Java 源代码的 UI 设计师合作变得更容易；”所以从这里我可以从设计器那里获取 HTML，将 ui:field 添加到适当的元素，然后从 GWT 操作它们。唔。这肯定是一个有用的功能。
.ui.xml 标头是<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder' xmlns:g='urn:import:com.google.gwt.user.client.ui'><g:HTMLPanel>，HTML 中带有按钮的行仅在我的问题中。
我同意。从我们设计师的角度来看，使用 JSP 或 Html+Javascript 更容易。
addStyleNames 将允许您向一个元素添加多个类名。

【解决方案2】：

您可以使用 HTML。唯一的限制是g:Button 必须在像g:HTMLPanel 这样的容器内。 g:HTMLPanel 的好处是它可以渲染 HTML。

请看下面的例子：

<g:HTMLPanel>       
    <div>
    test
    </div>

    <table border="1">
    <th>
        button
    </th>
    <tr>
    <td>    
    <g:Button styleName="{style.important}" ui:field="button"/>
    </td>
    </tr>
    </table>

    <div>
    test
    </div>      
</g:HTMLPanel>

【讨论】：