java - 如何将图标添加到 GWT 中的 MenuItem？

Question

如何在 GWT 中将带有文本的图标添加到菜单项？以下不起作用:

<ui:with field='res' type='my.package.MyResources' />
<g:MenuItem text="test"><g:Image resource="{res.myIcon}" /></g:MenuItem>

产生的错误:

Not allowed in an HTML context: <g:Image resource='{res.myIcon}'>

public interface MyResources extends ClientBundle {
  @Source("myIcon.png")
  ImageResource myIcon();
}

Answer 1

MenuItem仅允许 HTML 或纯文本作为其内容。所以你不能使用 Image小部件，但您可以很好地使用 <img>元素并从 ImageResource 检索图像 URL由 <ui:with> 引用使用 getSafeUri() (您可以在 UiBinder 模板中调用无参数方法)。在你的情况下:

<g:MenuItem>
  <img src="{res.myIcon.getSafeUri}"/><span>Your text here</span>
</g:MenuItem>

或者以编程方式，使用一个简单的模板:

public interface MyTemplate extends SafeHtmlTemplates {
  @Template("<img src=\"{0}\" /><span>{1}</span>")
  SafeHtml createItem(SafeUri uri, SafeHtml message);
}

实例化方式:

MyTemplate template = GWT.create(MyTemplate.class)

像这样使用:

new MenuItem(template.createItem(
    yourResources.myIcon().getSafeUri(),
    SafeHtmlUtils.fromString("Your text here")));