在 Uibinder 中包含 HTML 组件答案

【问题标题】：Include HTML component in Uibinder在 Uibinder 中包含 HTML 组件
【发布时间】：2022-01-27 08:33:50
【问题描述】：

我想在我的 gwt UiBinder 中包含一些 HTML 代码。例如，在 UiBinder 中放置一个导航菜单栏，如下所示。

MenuBarBinder.ui.xml

<g:HTMLPanel>
    <div class="topnav">
        <a ui:field="home" class="active" href="#home">Home</a>
        <a ui:field="news" href="#news">News</a>
        <a ui:field="contact" href="#contact">Contact</a>
        <a ui:field="about" href="#about">About</a>
    </div> 
</g:HTMLPanel>

MenuBarBinder.java

public class MenuBarBinder extends Composite{

private static MenuBarBinderUiBinder uiBinder = GWT.create(MenuBarBinderUiBinder.class);

interface MenuBarBinderUiBinder extends UiBinder<Widget, MenuBarBinder> {
}

public MenuBarBinder() {
    initWidget(uiBinder.createAndBindUi(this));
}
@UiField
//How can I refer the ui:field here?

}

如何使用@UiField 引用 MenuBarUiBinder.java 中的 ui:field？

由于 HTML 在设计 UI 方面比 GWT 小部件有更多选择，因此推荐一个描述这一点的教程会非常有帮助。

谢谢

【问题讨论】：

标签： gwt uibinder

【解决方案1】：

如果元素是一个锚点 <a>，那么你可以将它链接到一个 GWT AnchorElement：

<a ui:field="home" class="active" href="#home">Home</a>

...

@UiField AnchorElement home;

【讨论】：

感谢您的回复。那么如何将 AnchorElement 转换为 Anchor？我需要它来添加 clickHandler。
使用这个构造函数：new Anchor(AnchorElement anchorElement)
@RobertNewton 如果您指的是由 Anchor.wrap(Element) 调用的受保护的 Anchor 构造函数，那么这绝对不适用于此用例除非您有子类化小部件，并且正在传递一个新元素，或者已经分离了该元素。请注意，Anchor.wrap 不会在分离的元素上工作，如果您希望事件处理程序起作用，子类将强制您重新附加它。
@ColinAlworth 感谢您指出这一点，我应该说 Anchor.wrap()，而不是构造函数。就像你说的那样，有一些注意事项。
@MingLeung 在您的 *.ui.xml 中，您是否考虑过使用小部件标签而不是 html 元素标签？然后你可以去“@UiField Anchor home”。