Re: caching background image

If you can, use a ClientBundle. That will ensure the background image only gets downloaded once with the rest of your image resources and the spritemap produced by the client bundle should be cached by the browsers.

create an interface called AppImages that extends ClientBundle (class must be in part of your apps 'client' and visible to the gwt compiler).

public interface AppImages extends ClientBundle {

@Source("background.png")

ImageResource background();

}

put the PNG in your source folder alongside the AppImages interface.

ideally you would do this for all small-to-moderate sized image resources that your app uses.

When you want to set the background image of an element, you have several ways of doing it (note: i'm writing this without actually testing so it may not be perfect).

1) Use an HTML template to create the element with the background image

public interface HtmlTemplates extends SafeHtmlTemplates {

@Template("<div style=\"background-image: {0};\"/>")

SafeHtml backgroundDiv(SafeUri imageUrl);

}

HtmlTemplates templates = GWT.create(HtmlTemplates.class);

AppImages images = GWT.create(AppImages.class);

SafeUri backgroundImage = images.background().getSafeUri();

SafeHtml backgroundDiv = templates.backgroundDiv(backgroundImage);

2) Set the background-image css property on the element that underlies the GWT widget.

AppImages images = GWT.create(AppImages.class);
SafeUri backgroundImage = images.background().getSafeUri();

FlowPanel panel = new FlowPanel(); //this creates a div

panel.getElement().getStyle().setBackgroundImage(backgroundImage.asString());

Remember, you'll probably also want to set the other important css properties like background-repeat, background-position, etc.

Finally, if you want the image to be available publicly on the web, use the <public> declaration in your GWT module descriptor. This will tell the compiler to dump the background PNG into your war/<MODULE_NAME>/background.png folder so you can access it out on the web like www.yourdomain.biz/yourmodule/background.png

--
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.
To view this discussion on the web visit https://groups.google.com/d/msg/google-web-toolkit/-/ktSjQdQcEO4J.
To post to this group, send email to google-web-toolkit@googlegroups.com.
To unsubscribe from this group, send email to google-web-toolkit+unsubscribe@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.