using ImageSource from ClientBundle in CSS file

[Tsukasa]

Hi,

I'm trying to get some modular app desgin working using GWT and MVP.
But now I'm stuck in some ClientBundle issue.

I wanted to create a ClientBundle for my header widget which contains
the CSS information and image resources. CSS definitions should be
stored in a seperate file called header.css and after working with the
"Developers Guide - UiBinder" I tried the following approach:

public interface Resource extends ClientBundle {
public interface HeaderCss extends CssResource{
public String headerBanner();
public String menuItem ();
public String selected ();
public String hovered();
public String langswitch();
public String nav();
}

@Source("header.css")
public HeaderCss css();

@Source("header_bg.png")
public ImageResource headerBackground();
}

this interface is included into header.ui.xml by:
<ui:style src="resource/header.css"
type="appgui.client.ui.widgets.header.resource.Resource.HeaderCss"/>

I now want to know how to include ImageResource headerBackground(); in
my header.css
I tried to do this by using the @sprite annotation as described in GWT
CSS CookBook (referenced by
http://groups.google.com/group/google-web-toolkit/browse_thread/thread/f3ba1d8dfc9d67f8/b5bf0790aca915ea?lnk=gst&q=cssresource#b5bf0790aca915ea)
but i couldn't get it working. GWT plugin in eclipse announces
[ERROR] [appgui] Unable to find ImageResource method
value("headerBackground") in
appgui.client.ui.widgets.header.Header_HeaderUiBinderImpl_GenBundle :
Could not find no-arg method named headerBackground in type
appgui.client.ui.widgets.header.Header_HeaderUiBinderImpl_GenBundle

My Header class is set up in the way Developer Guide describes:

public class Header extends Composite {

private static HeaderUiBinder uiBinder =
GWT.create(HeaderUiBinder.class);

interface HeaderUiBinder extends UiBinder<Widget, Header> {
}

@UiField
HeaderCss style;

...

public Header(String firstName) {
initWidget(uiBinder.createAndBindUi(this));

....
}

...
}

header.css:
@sprite .headerBanner {
gwt-image: 'headerBackground';
height: 100px;
width: 100%;
margin: 0px;
}

I think my current Problem is, that I have missunderstood the usage of
either @sprite or the ClientBundle or both.

Tsukasa

[Thomas Broyer]

AFAICT, you can only use <ui:image> within <ui:style>, because
UiBinder will create a ClientBundle for the ui.xml, and you can
(AFAIK) only use an ImageResource that is in the same ClientBundle as
your CssResource.

[Tsukasa]

Thanks Thomas,

your piece of advice removed the cobwebs from my thoughts. The
solution is made as follows:

header.ui.xml (extract):

<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
xmlns:g="urn:import:com.google.gwt.user.client.ui">

<ui:style src="resource/header.css"
type="appgui.client.ui.widgets.header.resource.Resource.HeaderCss"/>

<ui:image field="headerBG" src='./resource/headerBG.png'/>
<ui:image field="fade" src='./resource/fade.png'
repeatStyle='Horizontal'/>
<ui:image field="fadeSelected" src='./resource/fade_selected.png'
repeatStyle='Horizontal'/>
.....

header.css (extract):

@sprite .headerBanner {
gwt-image: 'headerBG';

height: 100px;
width: 100%;
margin: 0px;
}

resource.java:

public interface Resource extends ClientBundle {

public interface HeaderCss extends CssResource{
public String headerBanner();
public String menuItem ();
public String selected ();
public String hovered();
public String langswitch();
public String nav();
}

@Source("header.css")
public HeaderCss css();

}

This way each widget can get its own package with the occorind
resources, which in my case vastly improves reusability.

Thanks.
Tsu

[Tsukasa]

Sorry for being incomplete:
It seems to be important to include an appropriate @UiField annotated
(at least) default visible field named style of the according type in
the Java class reflecting the widget. In my case - according to the
codesnippets above:

@UiField
HeaderCss style;

This was done intentionally by me from the beginning (as shown in my
introductory post) because I needed some of the CSS style information
programmatically.