Est-ce que les images-images GWT utilisant ImageBundle peuvent être utilisées dans IE7 et IE6?

Question

J'essaie d'utiliser un ClientBundle dans mon application GWT pour que plusieurs images soient envoyées en un seul fichier. Je déclare le paquet comme ceci:

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

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

Cela fonctionne très bien dans Firefox et IE8, mais dans IE7 (et versions antérieures) sprite tout apparaît à la place d'un de mes images originales - c'est icon1 est à côté de icon2 à côté de icon3, et ainsi de suite. Dans les outils de développement IE8 utilisant le mode IE8-as-IE7 ou Compatibility View, je peux voir qu'il montre une image avec un nom de fichier comme 26BEFD2399A92A5DDA54277BA550C75B.cache.png, ce qui est ce que je m'attendais.

Est-il possible de faire en sorte que les images-objets GWT fonctionnent dans IE7 et moins? Si ce n'est pas le cas, y a-t-il un moyen de se dégrader gracieusement pour que les utilisateurs d'autres navigateurs obtiennent une accélération du spriting et que les utilisateurs d'IE7 et IE6 obtiennent quelque chose qui soit correct mais plus lent?

Edit: Le Client Bundle Developer's Guide a une discussion sur l'utilisation ClientBundle et @sprite, et dit « Appui à IE6 est impossible dans ce format, parce que les changements structurels au DOM sont nécessaires pour mettre en œuvre un « effet de fenêtrage ». Une fois qu'il est possible de distinguer ie6 et ie7 dans user.agent, nous pourrions revoir le support pour ie6 Dans l'implémentation actuelle, le code ie6 ne sera pas rendu correctement, bien que ce soit un problème purement esthétique. " Est-ce que c'est ce qui se passe dans mon cas, et y a-t-il un moyen de contourner le problème? Montrer toutes les images est "purement un problème cosmétique", mais c'est une question assez sévère.

Edit 2: Voici comment j'utiliser les images:

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

L'utilisation de Image.setUrl (MyResources.INSTANCE.icon1(). GetUrl()) est le problème.

Vous devez utiliser Image.setResource (MyResources.INSTANCE.icon1()) à la place

Answer 2

Comment utilisez-vous le ImageResource?

Le problème que vous référencez n'existe que si vous l'utilisez avec la directive CssResource @sprite.

Si vous l'utilisez par instanciation d'un objet image à la place, il devrait fonctionner correctement dans IE6 + 7

Answer 3

Je reçois un problème similaire dans IE7 aussi, et surtout parce que je n'ai pas d'autre choix que d'utiliser le « getUrl () "option parce que j'ai besoin de définir la ressource comme une image d'arrière-plan. à-dire au lieu de quelque chose comme (en prenant l'exemple ci-dessus):

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

que je dois faire:

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

Alors que le correctif pour le premier bit de code ci-dessus est de faire « this.icon.setResource (MyResources.INSTANCE.icon1()) ", cela ne fonctionne pas pour définir une image d'arrière-plan, car il attend juste une chaîne. Dans IE8 et d'autres navigateurs, le deuxième bit de code fonctionne bien. Mais dans IE7, il affiche l'ensemble de l'image (comme le problème d'origine expliqué ci-dessus).

Alors, est-il possible de définir une image d'arrière-plan en utilisant une image provenant d'un ResourceBundle GWT afin qu'elle fonctionne correctement dans IE7?

Answer 4

Vous pouvez utiliser DataResource avec 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();