Deferred Binding with ClientBundle

[KevMo]

Is there an easy way to use different source images with client bundle for different permutations without creating a different implementations and adding a deferred binding property to my gwt.xml?

For example, I would like to use SVG images for a lot of my icons, but IE8 and below would need a jpg or png as there is no SVG support. As far as I'm aware, the only way to do this is have two ClientBundle implementations with different sources defined.

@Source("home-icon.png")

public DataResource homeIcon();

@DataResource.MimeType("image/svg+xml")

@Source("home-icon.svg")

public DataResource homeIcon();

This is ok for the few amount of icons my application has, but it seems like something that could get out of hand very quickly. Especially if using the same technique to target Apple's "retina" displays with higher resolution images.

[Jens]

I don't think there is a different way. Perhaps you could extend the ClientBundle Generator so it includes different images based on a custom property (or simply user.agent) in your gwt.xml, e.g. @Source("home-icon.svg") would be treated as default but the generator also searches for "<your.property.value>/home-icon.png" and uses this image if its available. But not sure if its possible.

Not sure if you can swap out the ClientBundle directly because they are generated, so I guess you may need ClientBundleFactories that you swap out with deferred binding, e.g.

HiDpiFactory extends AppClientBundleFactory {

  MyClientBundle createMyClientBundle() {

     return GWT.create(HiDpiMyClientBundle.class);

  }

}

I would love to see a better solution!

-- J.

[Joseph Lust]

First, you don't need to set custom MIME tags for SVG in you resources. Just use the SVGResource type and lib-gwt-svg. It has worked quite well for my projects and even has an async loader, ExternalSVGResource useful for splitting out larger SVG's. It is a pure GWT library, so no extra JS is loaded.

As for supporting IE, have you considered using Raphael4GWT to convert your SVG into VML so that it displays in IE? It seems like the simplest solution to just use the same SVG files everywhere.

I hope that helps.

Sincerely,

Joseph

[KevMo]

I thought about using lib-gwt-svg, but it seemed like a bit of overkill for just half a dozen images.  And even with that I would still need to make a separate version for IE correct?

[Joseph Lust]

Yes, Pure SVG would need an image for for IE. If you use RaphaelJs though, you can use the SVG on IE.

Joe

[Jens]

Yes, Pure SVG would need an image for for IE. If you use RaphaelJs though, you can use the SVG on IE.

Do you have experience with this? How is the expected performance in IE if you have lots of small SVG icons on your page that have to be converted? 

-- J.

[Joseph Lust]

Jens,

I've used it on a few projects without issue. Just checkout the RaphaelJs main page, all icons on it are really SVG. They appear instantly for me in IE. There are also their free icons. It is simple enough to make these too in InkScape.

The only caveat I know of is that Android did not support SVG or VML prior to v4. This was odd, but I found a dev post saying they save 1MB by cutting out the SVG engine from WebKit. Since our sites have <0.2% of hits from affected browsers, it is not a concern.

Sincerely,

Joseph