GWT UIBinder Mismatch Type: Cannot Convert from ImageResource to Image
I am new to GWT and am trying to follow the documentation for working with UIBinders.
I think I followed everything I found on this topic, from some of the following sources, etc.
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 getting the error cannot convert from ImageResource to Image and cannot find this error elsewhere.
What I did:
Created a client package that can see the image.
Link image in java.
Imported the client package resource into UiBinder.
Thoughts:
This is the easiest / recommended way to put images in UiBinders.
Do I need to do this with CSS or a 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's 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 package,
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();
}
thank
source to share
Ok, I figured out at least one way to do it.
I have a number of errors in the above code and this is what I needed to do to fix it.
- Image tag must be inside HTMLPanel
- The image tag seems to want a string instead of the image source
- I found some helpful information to fix this here: How to add an icon to a MenuItem in GWT?
- I think the g: Image tag should be img and the resource should be src
- SafeUri must be used
Here's 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));
}
}
Greetings
source to share