4

如何将带有文本的图标添加到 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();
}
4

3 回答 3

3

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")));
于 2013-05-06T15:00:25.033 回答
0

请试试这个

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

该 css 类具有background image.

于 2013-05-06T12:58:39.687 回答
0

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

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>

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

于 2013-05-06T14:57:42.110 回答