How to add an icon to a MenuItem in GWT?

Question

How can I get add an icon with text to a menu item in GWT? The following does not work:

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

Resulting error:

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

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

Does this answer help you: http://stackoverflow.com/a/9918937/687514 — Anders R. Bystrup, May 06 '13 at 12:59

score 3 · Accepted Answer · answered May 06 '13 at 15:00

The MenuItem allows only HTML or plain text as its content. So you cannot use an Image widget, but you can very well use an <img> element and retrieve the image URL from the ImageResource referenced by <ui:with> using getSafeUri() (you can call no-arg methods in UiBinder templates). In your case:

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

Or programmatically, using a simple template:

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

instantiated via:

MyTemplate template = GWT.create(MyTemplate.class)

and used like so:

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

Suresh Atta · Answer 2 · 2013-05-06T13:04:32.413

0

Please try this

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

That css class have the background image.

edited May 06 '13 at 13:04

answered May 06 '13 at 12:58

Suresh Atta

120,458
37
198
307

No: `java.lang.String required, but {res.myIcon} returns com.google.gwt.resources.client.ImageResource:
– membersound May 06 '13 at 13:03
What class name? The icon comes from `MyResources`, like edited above. – membersound May 06 '13 at 13:19

score 0 · Answer 3 · answered May 06 '13 at 14:57

I ended up extending the GWT MenuItem class in a way that one can supply an ImageResource from ui-binder:

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

Usage:

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

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

If anyone comes up with a better idea (now or in the future) please comment accordingly.

How to add an icon to a MenuItem in GWT?

3 Answers3

Linked