GWT UIBinder Type mismatch: cannot convert from ImageResource to Image

Question

I am new to GWT and trying to follow the documentation to work with UIBinders.

I think I have followed everything I have found on the topic from some of the following sources and more.
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

I am receiving the error cannot convert from ImageResource to Image and can't find this error elsewhere.

Things I have done:
Made a Client Bundle that can see the image.
Bound the Image in the java file.
Imported the client bundle resource into the UiBinder.

Thoughts:
Is this the easiest/recommended way to go about putting images into UiBinders.
Do I have to do it through CSS or through the Java class?

[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

Here is what I have.

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

My Client Bundle,

Images.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();
}

Thanks

Answer 1

Ok, I figured out at least one way to do this.

I have a number of bugs in the above code and this is what I needed to do to fix it.

• The Image tag should have been inside the HTMLPanel
• The Image tag seems to want a string instead of an image recource
  • I found some helpful information in fixing this here: How to add an icon to a MenuItem in GWT?
• I think the g:Image tag needs to be an img and the resource should be src
• Need to use safeUri

Here is the working code:

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

Cheers