sprites imagem pode GWT usando ImageBundle ser feito para trabalhar no IE7 e IE6?

Question

Eu estou tentando usar uma ClientBundle no meu aplicativo GWT para fazer várias imagens são enviados como um único arquivo. Declaro o pacote assim:

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

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

Isso funciona muito bem no Firefox e IE8, mas no IE7 (e anteriores) inteiros os shows do sprite-se no lugar de uma das minhas imagens originais - isto é, icon1 fica ao lado icon2 ao lado icon3, e assim por diante. Em ferramentas de desenvolvedor do IE8 usando IE8-as-IE7 modo ou de exibição de compatibilidade, eu posso ver que ele está mostrando uma imagem com um nome de arquivo como 26BEFD2399A92A5DDA54277BA550C75B.cache.png, que é o que eu esperaria.

Então, há alguma maneira de fazer o trabalho de imagem GWT sprites no IE7 e diminuir? Se não, existe alguma maneira de degradar graciosamente para que os usuários de outros navegadores obter a aceleração de spriting e os usuários do IE7 e IE6 obter algo que parece certo, mas é mais lento?

Editar: O Guia do cliente Bundle desenvolvedor tem uma discussão de usar ClientBundle e @sprite, e diz: "o suporte para o IE6 não é viável neste formato, porque as mudanças estruturais no DOM são necessárias para implementar um 'efeito de janelas'. uma vez que é possível distinguir IE6 e IE7 em user.agent, poderíamos revisitar suporte para o IE6. na implementação atual, o código IE6 não processar corretamente, embora é uma questão puramente cosmética ". É isso o que está acontecendo no meu caso, e se existe uma maneira de contornar isso? Mostrando todas as imagens é "puramente uma questão estética", mas é um muito grave.

Editar 2: Aqui está como eu usar as imagens:

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

O uso de Image.setUrl (MyResources.INSTANCE.icon1 (). GetUrl ()) é o problema.

Você deve estar usando Image.setResource (MyResources.INSTANCE.icon1 ()) em vez

Answer 2

Como você está usando o ImageResource?

O problema que você está apenas fazendo referência existe se você usá-lo com a directiva CssResource @sprite.

Se você usá-lo por instanciar um objeto de imagem em vez disso, ele deve funcionar bem no IE6 + 7

Answer 3

Estou recebendo um problema semelhante no IE7 também, e principalmente porque eu não tenho escolha a não ser usar a opção "getUrl ()" porque eu preciso definir o recurso como uma imagem de fundo. ou seja, em vez de algo como (tomando o exemplo acima):

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

eu preciso fazer:

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

Considerando que a correção para o primeiro pedaço de código acima é fazer "this.icon.setResource (MyResources.INSTANCE.icon1 ())", que não funciona para definir uma imagem de fundo, uma vez que apenas espera uma String . No IE8 e outros navegadores, o segundo trecho de código funciona bem. Mas no IE7, ele exibe todo o bundle de imagem (como a emissão original explicado acima).

Então, há alguma maneira de ser capaz de definir uma imagem de fundo usando uma imagem de um GWT ResourceBundle para que ele irá funcionar corretamente no IE7?

Answer 4

Você pode usar DataResource com 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();