¿Se puede hacer que los sprites de imagen GWT que utilizan ImageBundle funcionen en IE7 e IE6?

Question

Estoy tratando de usar un ClientBundle en mi aplicación GWT para hacer que varias imágenes se envíen como un solo archivo. Declaro el paquete de este modo:

public interface MyResources extends ClientBundle { 
    public static final MyResources INSTANCE = GWT.create(MyResources.class); 

    @Source("icon1.png") ImageResource icon1(); 
    @Source("icon2.png") ImageResource icon2(); 
} 

Esto funciona muy bien en Firefox e IE8, pero en Internet Explorer 7 (y versiones anteriores) todo el sprite se presenta en el lugar de una de mis imágenes originales - es decir, icon1 está al lado de icon2 junto a icon3, y así sucesivamente. En las herramientas para desarrolladores de IE8 que utilizan el modo IE8-como-IE7 o la Vista de compatibilidad, puedo ver que muestra una imagen con un nombre de archivo como 26BEFD2399A92A5DDA54277BA550C75B.cache.png, que es lo que esperaba.

Entonces, ¿hay alguna manera de hacer que los sprites de imagen GWT funcionen en IE7 e inferiores? Si no, ¿hay alguna forma de degradar con gracia para que los usuarios de otros navegadores obtengan la velocidad de sprite y los usuarios de IE7 e IE6 obtengan algo que se ve bien pero es más lento?

Editar: El Client Bundle Developer's Guide tiene una discusión sobre el uso de ClientBundle y @sprite, y dice: "El apoyo a IE6 no es factible en este formato, ya que los cambios estructurales en el DOM son necesarios para implementar un 'efecto de ventanas'. Una vez que es posible distinguir ie6 y ie7 en user.agent, podríamos revisar el soporte para ie6. En la implementación actual, el código ie6 no se procesará correctamente, aunque es un problema puramente cosmético ". ¿Esto es lo que está pasando en mi caso, y hay una manera de evitarlo? Mostrar todas las imágenes es "un asunto puramente cosmético", pero es bastante severo.

Edición 2: Así es como yo uso las imágenes:

public class MyTabHeader extends Composite { 
    @UiField Image icon; 

    public MyTabHeader(String iconPath) { 
    initWidget(uiBinder.createAndBindUi(this)); 
    this.icon.setUrl(iconPath); 
    } 
} 

public class MyTabPanel extends TabPanel { 
    public MyTabPanel() { 
    String icon1 = MyResources.INSTANCE.icon1().getURL(); 
    MyTabHeader tabHeader1 = new MyWidget(icon1); 
    Widget tabContent1 = new HTML("Content 1"); 
    add(tabContent1, tabHeader1); 

    String icon2 = MyResources.INSTANCE.icon2().getURL(); 
    MyTabHeader tabHeader2 = new MyWidget(icon2); 
    Widget tabContent2 = new HTML("Content 2"); 
    add(tabContent2, tabHeader2); 
    } 
} 

Answer 1

El uso de Image.setUrl (MyResources.INSTANCE.icon1(). GetUrl()) es el problema.

Debería utilizar Image.setResource (MyResources.INSTANCE.icon1()) en lugar

Answer 2

¿Cómo estás usando el ImageResource?

El problema al que hace referencia solo existe si lo usa con la directiva CssResource @sprite.

Si lo usa creando una instancia de un objeto de imagen en cambio, que debería funcionar bien en IE6 + 7

Answer 3

estoy un problema similar en IE7 también, y sobre todo porque no tengo más remedio que utilizar el "getUrl () "opción porque necesito establecer el recurso como una imagen de fondo. En lugar de decir algo así como (tomando el ejemplo anterior):

this.icon.setUrl(MyResources.INSTANCE.icon1().getURL()); 

que tiene que hacer:

this.mypanel.getElement().getStyle().setBackgroundImage("url("+MyResources.INSTANCE.icon1().getURL()+")"); 

Mientras que la solución para el primer bit del código anterior es hacer "this.icon.setResource (MyResources.INSTANCE.icon1()) ", eso no funciona para configurar una imagen de fondo, ya que solo espera una Cadena. En IE8 y otros navegadores, el segundo bit de código funciona bien. Pero en IE7, muestra todo el conjunto de imágenes (como el problema original explicado anteriormente).

Entonces, ¿hay alguna manera de poder establecer una imagen de fondo usando una imagen de un GWT ResourceBundle para que funcione correctamente en IE7?

Answer 4

Puede utilizar DataResource con IE7

if(BrowserUtils.getIEVersionNumber() < 8 && BrowserUtils.isBrowserIE()){ 
    icon = new Image(resources.iconIE().getSafeUri()); 
} else { 
    icon = new Image(resources.icon()); 
} 
... 
in client bundle: 

@Source("icon.png") 
DataResource iconIE(); 

@Source("icon.png") 
imageResource icon();