Können GWT-Bildsprites mit ImageBundle in IE7 und IE6 erstellt werden?

Question

Ich versuche, ein ClientBundle in meiner GWT-Anwendung zu verwenden, um mehrere Bilder als eine einzige Datei gesendet zu bekommen. Ich erkläre das Bündel etwa so:

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

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

Dies funktioniert gut in Firefox und IE8, aber in IE7 (und früher) der ganzen Sprit zeigt anstelle von einem meiner ursprünglichen Bildern auf - das heißt, icon1 neben icon2 neben icon3 und so weiter. In IE8-Entwicklertools, die den IE8-as-IE7-Modus oder die Kompatibilitätsansicht verwenden, kann ich sehen, dass ein Bild mit einem Dateinamen wie 26BEFD2399A92A5DDA54277BA550C75B.cache.png angezeigt wird, was ich erwarten würde.

Gibt es also eine Möglichkeit, GWT Image Sprites in IE7 und niedriger arbeiten zu lassen? Wenn nicht, gibt es eine Möglichkeit, die Benutzer anderer Browser so zu degradieren, dass die Sprites schneller werden und IE7- und IE6-Benutzer etwas bekommen, das richtig aussieht, aber langsamer ist?

Edit: Die Client Bundle Developer's Guide hat eine Diskussion der Verwendung von ClientBundle und @sprite, und sagt: „Die Unterstützung für IE6 in diesem Format nicht möglich ist, da strukturelle Veränderungen am DOM sind notwendig, um ein zu implementieren‚Windowing‘-Effekt. Sobald es möglich ist, ie6 und ie7 in user.agent zu unterscheiden, könnten wir die Unterstützung für ie6 erneut aufrufen. In der aktuellen Implementierung wird der ie6-Code nicht korrekt dargestellt, obwohl es sich um ein rein kosmetisches Problem handelt. " Ist das in meinem Fall so, und gibt es eine Möglichkeit, es zu umgehen? Alle Bilder zu zeigen ist "ein rein kosmetisches Problem", aber es ist ein ziemlich strenges.

Edit 2: Hier ist, wie ich die Bilder verwenden:

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

Die Verwendung von Image.setUrl funktionieren (MyResources.INSTANCE.icon1(). GetUrl()) ist das Problem.

Sie sollten stattdessen

Answer 2

Wie werden Sie die ImageResource verwenden?

Das Problem, auf das Sie verweisen, ist nur vorhanden, wenn Sie es mit der Direktive CssResource @sprite verwenden.

Wenn Sie es durch Instanziieren ein Image-Objekt verwenden, stattdessen sollte es in IE6 + 7

Answer 3

Ich erhalte ein ähnliches Problem in IE7 auch, und vor allem, weil ich habe keine andere Wahl Image.setResource (MyResources.INSTANCE.icon1()) verwenden, aber die „getUrl zu verwenden () "Option, weil ich die Ressource als Hintergrundbild einstellen muss. dh Anstatt etwas wie (das obige Beispiel nehmen):

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

ich tun muss:

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

Während das Update für das erste Stück Code oben ist „this.icon.setResource zu tun (MyResources.INSTANCE.icon1()) ", das funktioniert nicht zum Setzen eines Hintergrundbildes, da es nur einen String erwartet. In IE8 und anderen Browsern funktioniert das zweite Bit des Codes gut. In IE7 wird jedoch das gesamte Bildbündel angezeigt (wie oben beschrieben).

Gibt es eine Möglichkeit, ein Hintergrundbild mit einem Bild aus einem GWT ResourceBundle zu setzen, damit es im IE7 korrekt funktioniert?

Answer 4

Sie können DataResource mit IE7 verwenden

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();