Question

在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。但是如果我使用Button，我需要在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的元素是非null）。

Answer 1

最后，这是答案。我编辑了它并删除了无用的评论。

如果您的计划是使用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的XML（这反过来将生成页面的HTML）。它不像JSP机制，您可以立即插入纯HTML。

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

Answer 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>

如何使用GWT的UiBinder按钮？

2 个答案: