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从<ui:with>引用的getSafeUri()中检索图像网址（您可以在UiBinder模板中调用no-arg方法）。在你的情况下：

<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")));

Answer 2

请试试这个

  <g:MenuItem>
    <div class="className"/> MyMenuWithImg
  </g:MenuItem>

该css类有background image。

Answer 3

我最终以一种可以从ui-binder提供MenuItem的方式扩展GWT ImageResource类：

class MyMenuItem extends MenuItem {
    @Uresstructor
    public resMenuItem(String text, ImageResource res) {
        super(SafeHtmlUtils.fromString(text));

        ImageResourceRenderer renderer = new ImageResourceRenderer();
        setHTML(renderer.render(res) + "&nbsp;" + text);
    }
}

用法：

<ui:with field='res' type='path.to.MyIconResources' />

<g:MenuBar>
 <my:MyMenuItem text="test" icon="{res.myIcon}" />
</g:MenuBar>

如果有人提出更好的想法（现在或将来），请相应地发表评论。

如何在GWT中向MenuItem添加图标？

3 个答案: