使用纯 HTML 的 GWT UI Binder答案

【问题标题】：GWT UI Binder using pure HTML使用纯 HTML 的 GWT UI Binder
【发布时间】：2024-01-22 02:07:01
【问题描述】：

有没有办法在 GWT UIBinder 中使用纯 HTML。

我看到的问题更多是我们必须将样式包裹在花括号中。任何详细处理 UIBinder 的链接 /article/book 都会有所帮助。

我已经在 GST 网站上看过文章

【问题讨论】：

您的意思是，您想使用<style> 而不是<ui:style>？您能否提供一些“失败”HTML 的示例？
不幸的是，实际上并没有任何书籍涵盖一些较新的 GWT 功能，例如 UiBinder。 GWT in Action 很好，但现在已经过时了。
感谢大家的回答。我意识到没有纯 HTML 的方式来做这些事情。我们必须使用 g: 小部件，然后由 GWT 转换为代码。

【解决方案1】：

样式名（CSS 类名）必须放在大括号中，例如<div class="{style.example}">...</div>，当名称被 GWT 混淆时。当您使用CssResource 时，GWT 会执行此操作。当你在 .ui.xml 文件中的 <ui:style> 块中声明它时也是如此：

<ui:UiBinder ...>
  <ui:style>
    .example {
      ...
    }
  </ui:style>

  <div class="{style.example}">
     ...
  </div>
</ui:UiBinder>

相反，当您在纯 CSS 文件中声明您的 CSS 类（您直接从 HTML 主机页面引用该文件）时，您不会将名称放在花括号中。在这种情况下，您只需像这样使用它

<ui:UiBinder ...>
  <div class="example">...</div>
</ui:UiBinder>

【讨论】：

【解决方案2】：

你可以用这种接近纯 HTML 的方式来使用它：

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
  ui:generateFormat='com.google.gwt.i18n.rebind.format.PropertiesFormat'
  ui:generateKeys="com.google.gwt.i18n.rebind.keygen.MD5KeyGenerator"
  ui:generateLocales="default"
  xmlns:g='urn:import:com.google.gwt.user.client.ui'>

  <ui:style>

    ... CSS ...

  </ui:style>

  <g:HTMLPanel>

    ... HTML and GWT controls ...

  </g:HTMLPanel>

</ui:UiBinder>

【讨论】：

【解决方案3】：

我一直在通过谷歌寻找这个问题的答案并登陆这里。
我在这里找到了适合我的解决方案：
http://blog.sortedset.com/googles-app-engine-java/gwt-uibinder-helloworld-with-html/

要点：

使用

interface MyUiBinder extends UiBinder<Element, MobileUI>

而不是

interface MyUiBinder extends UiBinder<Widget, MobileUI>

使用

setElement(uiBinder.createAndBindUi(this));

而不是

initWidget(uiBinder.createAndBindUi(this));

使用

RootPanel.getBodyElement().appendChild(myUiBinder.getElement());

而不是

RootPanel.get().add(myUiBinder);

【讨论】：