java - GWT UIBinder 类型不匹配 : cannot convert from ImageResource to Image

Question

我是 GWT 的新手，正在尝试按照文档使用 UIBinders。

我想我已经遵循了从以下一些来源和更多来源中找到的关于该主题的所有内容。
http://www.gwtproject.org/doc/latest/DevGuideClientBundle.html#ImageResource http://www.gwtproject.org/doc/latest/DevGuideUiBinder.html#Using_an_external_resource
GWT UiBinder and Image Sprites

我收到错误消息无法从 ImageResource 转换为图像，并且无法在其他地方找到此错误。

我做过的事情:
制作了一个可以看到图像的客户端包。
在java文件中绑定(bind)Image。
将客户端包资源导入 UiBinder。

想法:
这是将图像放入 UiBinders 的最简单/推荐的方法吗？
我必须通过 CSS 还是通过 Java 类来完成？

[ERROR] [ideaburger] - Errors in 'generated://D3BBFDA474FCF1195FACA7F6BC58EB44/com/IdeaBurger/client/SiteHeader_SiteHeaderUiBinderImpl.java'
[ERROR] [ideaburger] - Line 115: Type mismatch: cannot convert from ImageResource to Image
[INFO] [ideaburger] - See snapshot: /tmp/com.IdeaBurger.client.SiteHeader_SiteHeaderUiBinderImpl4360657308873324011.java

这是我的。

SiteHeader.ui.xml

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder" xmlns:g="urn:import:com.google.gwt.user.client.ui">
    <ui:with field='res' type='com.IdeaBurger.assets.Images'/>

    <ui:style>

    </ui:style>
    <ui:Image field="logoImage" resource='{res.logo}' />

    <g:HTMLPanel>
        <g:HorizontalPanel>
            <g:cell>
                <g:Label>One</g:Label>
            </g:cell>
        </g:HorizontalPanel>
    </g:HTMLPanel>
</ui:UiBinder> 

SiteHeader.java

package com.IdeaBurger.client;
import com.IdeaBurger.assets.Images;
import com.google.gwt.core.client.GWT;
import com.google.gwt.uibinder.client.UiBinder;
import com.google.gwt.uibinder.client.UiField;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.Image;
import com.google.gwt.user.client.ui.Widget;

public class SiteHeader extends Composite {
    private static SiteHeaderUiBinder uiBinder = GWT
            .create(SiteHeaderUiBinder.class);

    @UiField Images res;
    @UiField Image logoImage;

    interface SiteHeaderUiBinder extends UiBinder<Widget, SiteHeader> {
    }

    public SiteHeader() {
        initWidget(uiBinder.createAndBindUi(this));
    }
}

我的客户端包，

图片.java

package com.IdeaBurger.assets;

import com.google.gwt.resources.client.ClientBundle;
import com.google.gwt.resources.client.ImageResource;

public interface Images extends ClientBundle {
    @Source("logo.png")
    ImageResource logo();
}

谢谢

Answer 1

好吧，我想出了至少一种方法来做到这一点。

我在上面的代码中有很多错误，这是我需要做的来修复它。

• Image 标签应该在 HTMLPanel 中
• 图像标签似乎需要一个字符串而不是图像资源
  • 我在这里找到了一些有助于解决此问题的信息:How to add an icon to a MenuItem in GWT?
• 我认为 g:Image 标签需要是 img 而 resource 应该是 src
• 需要使用safeUri

这是工作代码:

SiteHeader.ui.xml

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
    xmlns:g="urn:import:com.google.gwt.user.client.ui">
    <ui:with field='res' type='com.IdeaBurger.assets.Images'/>

    <ui:style>

    </ui:style>

    <g:HTMLPanel>
        <img src='{res.logo.getSafeUri}' />
        <g:HorizontalPanel>
            <g:cell>
                <g:Label>One</g:Label>
            </g:cell>
        </g:HorizontalPanel>
    </g:HTMLPanel>
</ui:UiBinder> 

SiteHeader.java

package com.IdeaBurger.client;
import com.IdeaBurger.assets.Images;
import com.google.gwt.core.client.GWT;
import com.google.gwt.uibinder.client.UiBinder;
import com.google.gwt.uibinder.client.UiField;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.Widget;

public class SiteHeader extends Composite {
    private static SiteHeaderUiBinder uiBinder = GWT
            .create(SiteHeaderUiBinder.class);

    @UiField Images res;

    interface SiteHeaderUiBinder extends UiBinder<Widget, SiteHeader> {
    }

    public SiteHeader() {
        initWidget(uiBinder.createAndBindUi(this));
    }
}

干杯