[SOLVED] Attaching an ImageResource from an external CSS file using @sprite

Attaching an ImageResource from an external CSS file using @sprite

I'm trying to use CssResource and ImageResource together in a GWT2.2 project.

CssResource and obfuscation are working properly, but I'm having problems accessing images.

I already can access the images through ImageResource directly from the ui.xml files in the following way:

<ui:with type="com.example.client.resource.ResourceBundle" field="myResource"/>
<g:Image resource="{myResource.image}"/>

But I cannot attach ImageResource from within external .css files using @sprite.

I have the following interfaces:

public interface ResourceBundle extends ClientBundle {
ResourceBundle INSTANCE = GWT.create (ResourceBundle.class);

    @Source("com/example/client/resource/images/image.png")
    ImageResource image();

    @Source("com/example/client/resource/css/mystyle.css")
    MyCssResource myCssResource();
    }

public interface MyCssResource extends CssResource {
    String className();
}

And when I add the sprite to the css file,

@sprite .className {
    gwt-image: 'image';
}

I got the following error message:

[ERROR] - Unable to find ImageResource method value("image") in
com.example.client.views.MyView_BinderImpl_GenBundle : Could not find 
no-arg method named image in type com.example.views.MyView_BinderImpl_GenBundle

Solution

You can access your styles from UiBinder templates as follows:

<ui:with type="com.example.client.resource.ResourceBundle" field="myResource"/>

<g:FlowPanel styleName="{myResource.myCssResource.className}"/>