如何使用 UIBinder 混合 HTML 和 GWT 小部件？答案

【问题标题】：How to mix HTML and GWT widgets using UIBinder?如何使用 UIBinder 混合 HTML 和 GWT 小部件？
【发布时间】：2011-06-27 14:24:28
【问题描述】：

我们有一个使用 UIBinder 构建的现有 UI，其 ui.xml 文件包含以下层次结构：

<ui:UiBinder>
<div>
Multiple <span> or <a> separated by verbatim HTML (like | separators).

我需要用列表框替换其中一个锚点。

有没有一种方法可以在不将 div 替换为 HTMLPanel 并将所有锚点更改为其他内容的情况下进行此转换？

如果我尝试在其中粘贴 gwt:ValueListBox 或 gwt:ListBox，我会收到一条错误消息，提示我无法将两者混合使用。我也不能在 UIBinder 下有多个子项（例如 div 和 HTMLPanel）。

如果我唯一的选择是将所有内容都转换为小部件，那么对和项目的适当转换是什么？

【问题讨论】：

【解决方案1】：

在 UIBinder 中，HTMLPanel 可以包含 HTML 元素和 GWT 小部件，但 HTML 元素只能包含其他 HTML 元素。

只需将顶级div 替换为HTMLPanel，然后仅将特定的<a> 锚替换为gwt:ListBox。

【讨论】：

...当然，在您的 Java 代码中，您可能必须使用 extends Composite 和 initWidget 而不是 extends Widget 和 setElement。
来自 HTMLPanel javadoc：“一个包含 HTML 的面板，它可以将子小部件附加到该 HTML 中的已识别元素。” - 这表明 HTML 元素实际上可以包含小部件

【解决方案2】：

这样

<gwt:HTMLPanel>
    <div align="center">
        <gwt:VerticalPanel res:styleName="style.background">

【讨论】：