Re: Explain difference between using <g:Image> or a <div> (in UI Binder) when using GWT sprite ?

[Thomas Broyer]

If your 'sprite_MS' is already "sprited", then don't use an ImageResource; use a DataResource instead, and use either Image#setUrlAndVisibleRect() or a "normal" CSS class (not @sprite) to display it.

If you use an ImageResource with an Image widget, then use <g:Image resource="{sprites_MS}"/> rather than a @sprite and addStyleNames="" (of course, in this case, it would show you whole sprites_MS image, which is not what you want).

To handle mouse events, if you use a CSS background image (including a @sprite), you can use a Label or HTML widget.

The border you're seeing is probably due to the g:Image not having an image to show (no src="" nor resource="") so it displays the "broken image" icon from the browser.

On Wednesday, June 13, 2012 10:39:00 AM UTC+2, regnoult axel wrote:

Hello,

I have the css properties of the header's  top left element (the logo's place) which has a logo sprite in background :

@sprite .topHeaderLeftAlign {

gwt-image: "sprites_MS";

width: 154px; 

height: 60px;

background-position: -1101px -973px; /* logo */

}

I have a different result when I use :

(method 1) <g:Image ui:field="logo" addStyleNames='{commonRes.commonCss.topHeaderLeftAlign}' />

or

(method 2) <div class='{commonRes.commonCss.topHeaderLeftAlign}' />

My problem occurs using method 1 (<g:Image>) because I see an undesirable "gray border" around my logo. For example you can see theses borders in the footer's social icons of my website : http://127.0.0.1:8888/MananaSeguro.html?gwt.codesvr=127.0.0.1:9997#!inicio 

Moreover, I do not want to use method 2 (<div>) because I need to add some handler for the mouse events (I do not know if it is possible in the worst case).

Could you give me the best solution to display my images using the sprite (correctly appearing, without the border) and having all the necessaries event listeners ?

Thanks you.