如何将图标添加到GWT中的MenuItem？ [英] How to add an icon to a MenuItem in GWT?

问题描述

如何在GWT中的菜单项中添加带文本的图标？
以下行不通：

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

导致的错误：

不允许在HTML上下文中：< g：Image resource ='{res.myIcon}'>

  public interface MyResources extends ClientBundle {
 @Source（myIcon.png）
 ImageResource myIcon（）; 
 
  

解决方案 MenuItem 仅允许HTML或纯文本作为其内容。因此，您不能使用图像小部件，但您可以很好地使用< img> 元素并检索图像来自< ui：with> 使用 getSafeUri（）引用的 ImageResource code>（你可以在 UiBinder 模板中调用无参数方法）。在您的情况下：

 < g：MenuItem> 
< img src ={res.myIcon.getSafeUri}/>< span>您的文字在这里< / span> 
< / g：MenuItem> 
  

或以编程方式使用简单模板：

  public interface MyTemplate extends SafeHtmlTemplates {
 @Template（< img src = \{0} \/>< span> {1}< ; / span>）
 SafeHtml createItem（SafeUri uri，SafeHtml message）; 
 
 
 
 $ b 
通过以下方式实例化：
 
  
 
  MyTemplate template = GWT.create（MyTemplate.class）
  
和使用像这样：
  new MenuItem（template.createItem（
 yourResources.myIcon（）。getSafeUri（） ，
 SafeHtmlUtils.fromString（Your text here）））; 
  
 
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();
}

解决方案
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")));


                        
这篇关于如何将图标添加到GWT中的MenuItem？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！