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+unsubscr...@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/google-web-toolkit?hl=en.
