How to Use Image Sprites in Gwt

how do i use image sprites in GWT?

From what you've written I'm going to presume that MyResources is an interface that extends ClientBundle and MyCssResources is an interface that extends CssResource:

interface MyResources extends ClientBundle {
  @Source("myImage.png")
  @ImageOptions(repeatStyle = RepeatStyle.BOTH)
  ImageResource myImage();

  @Source("myCss.css")
  MyCssResource myCss();
}

interface MyCssResource extends CssResource {
  String myBackground();
}

So now there are two ways to use the ImageResource obtained from MyResources. The first is to attach it to a CSS rule using the @sprite directive. myCss.css:

@sprite .myBackground {
  gwt-image: "myImage";
  /* Additional CSS rules may be added. */
}

Then, anything with the myBackground class will have myImage as its background. So, using UiBinder, for example:

<ui:UiBinder> <!-- Preamble omitted for this example. -->
  <ui:with field="myResources" type="com.mycompany.MyResources"/>

  <g:FlowPanel styleName="{myResources.myCss.myBackground}"/>
</ui:UiBinder>

One can also instantiate Image objects directly using the defined ImageResource. UiBinder:

<ui:UiBinder> <!-- Preamble omitted for this example. -->
  <ui:with field="myResources" type="com.mycompany.MyResources"/>

  <g:Image resource="{myResources.myImage}"/>
</ui:UiBinder>

Without UiBinder:

MyResources myResources = GWT.create(MyResources.class);
Image myImage = new Image(myResources.myImage());

GWT UiBinder and Image Sprites

You have to call ensureInjected() on your CssResource somewhere in your code; either:

POWResources.INSTANCE.sprites().ensureInjected();

or

@UiField POWResources resources;
…
resources.sprites().ensureInjected();

Alternatively, if you don't share the styles/images with other code, you can replace your ClientBundle with the implicit one that UiBinder creates from ui:style and ui:image (and UiBinder will then take care of calling ensureInjected for you):

<ui:style>
  @sprite .underMenuGlow {gwt-image: "underTopGlow"}
</ui:style>
<ui:image field="underTopGlow" src="site1/undertopglow.png" />
…
<span class="{style.underMenuGlow}">foo</span>

User svg images in GWT ClientBundle (ImageBundle)

ImageResource is for raster images that the GWT compiler could optimize in one way or another, and you can query for their size.

For vector images like SVG, you can simply use a DataResource with a @MimeType("image/svg+xml") annotation.

@Source("icons/info.svg")
@MimeType("image/svg+xml")
DataResource info();

Note that you cannot use a @sprite in a CssResource then, but you can get the resource's URL to use in, e.g., a background-image using @url.

You cannot pass the resource to an Image widget either, but then you can just pass its getSafeUri().

---

If you want the SVG content instead of using it as an image URL, then you can use a TextResource. You'll have to pass it as setInnerHTML to an element or setHTML to a widget to get it parsed by the browser.

Attaching an ImageResource from an external CSS file using @sprite

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}"/>

How can I create a GWT button with both image and text?

There are lots of ways to achieve this.

Please have a look at below post asked in the same context:

• HTML/CSS - Adding an Icon to a button
• Adding icons to an button in gwt
• GWT Custom Button with Icon above Text

Sample code:

Button button = new Button();

// get image form CSS resource
String url = new Image(Resources.INSTANCE.cut()).getUrl();
// get image from url
String url = "https://cdn3.iconfinder.com/data/icons/tango-icon-library/48/edit-cut-64.png";
// get image from the project war/images folder
String url = GWT.getHostPageBaseURL() + "images/cut.png";

String html = "<div><center><img src = '" + url
        + "'></img></center><label>Cut</label></br></div>";

button.setHTML(html);

Note: you can move it to CSS as well and append in HTML.

___________-

EDIT

You can achieve it using PushButton as well using setInnerHTML()method that will benefit from ImageResource as well.

final PushButton pushButton = new PushButton(new Image(Resources.INSTANCE.old_cut_icon()));
pushButton.getElement().setInnerHTML("<div><center>"+pushButton.getElement().getInnerHTML()+"</center><label><center>Cut</center></label></div>");

now simply call setImage() whenever needed to change the icon only.

pushButton.getUpFace().setImage(new Image(Resources.INSTANCE.new_cut_icon()));

Screenshot

---

Related Topics