Czy można używać ikonek GWT przy użyciu ImageBundle do pracy w IE7 i IE6?

Question

Próbuję użyć ClientBundle w mojej aplikacji GWT, aby wiele obrazów zostało wysłanych jako pojedynczy plik. Oświadczam wiązka tak:

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

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

Działa to doskonale w Firefox i IE8, ale w IE7 (i wcześniej) cała ikonki pojawia się w miejscu jednego z moich oryginalnych obrazów - czyli icon1 jest obok icon2 obok ikony3 i tak dalej. W narzędziach programistycznych IE8 używających trybu IE8-as-IE7 lub widoku zgodności widzę, że pokazuje obraz z nazwą pliku, np. 26BEFD2399A92A5DDA54277BA550C75B.cache.png, czego oczekiwałem.

Czy istnieje sposób na to, aby ikonki obrazu GWT działały w IE7 i niżej? Jeśli nie, czy istnieje jakiś sposób, aby zręcznie się pogarszać, aby użytkownicy innych przeglądarek mogli przyspieszyć proces spritingu, a użytkownicy IE7 i IE6 otrzymają coś, co wygląda dobrze, ale jest wolniejsze?

Edit:Client Bundle Developer's Guide ma dyskusji korzystania ClientBundle i @sprite i mówi: „Wsparcie dla IE6 nie jest wykonalne w tym formacie, ponieważ zmiany strukturalne DOM są niezbędne do wdrożenia«okienkowy»efekt. Po rozróżnieniu ie6 i ie7 w user.agent możemy ponownie przejrzeć wsparcie dla wersji 6. W obecnej implementacji kod ie6 nie będzie poprawnie renderowany, chociaż jest czysto kosmetyczny. " Czy to się dzieje w moim przypadku i czy istnieje sposób na obejście tego? Pokazywanie wszystkich zdjęć jest "czysto kosmetycznym problemem", ale jest dość surowe.

Edit 2: Oto jak korzystać z obrazów:

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

Wykorzystanie Image.setUrl (MyResources.INSTANCE.icon1(). GetUrl()) jest problemem.

należy używać Image.setResource (MyResources.INSTANCE.icon1()) zamiast

Answer 2

Jak używasz ImageResource?

Problem, na który się powołujesz, istnieje tylko wtedy, gdy używasz go w dyrektywie CssResource @sprite.

Jeśli używamy go przez instancję obiektu zamiast obrazu, to powinno działać prawidłowo w IE6 + 7

Answer 3

Dostaję podobny problem w IE7 zbyt, a przede wszystkim dlatego, że nie mają wyboru, aby użyć „getUrl () "opcja, ponieważ muszę ustawić zasób jako obraz tła. tj Zamiast czegoś podobnego (biorąc powyższy przykład):

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

muszę zrobić:

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

Podczas gdy poprawka dla pierwszego bitu kodu powyżej jest do zrobienia „this.icon.setResource (MyResources.INSTANCE.icon1()) ", to nie działa przy ustawianiu obrazu tła, ponieważ oczekuje po prostu ciągu znaków. W IE8 i innych przeglądarkach drugi bit kodu działa dobrze. Ale w IE7 wyświetla cały pakiet obrazów (podobnie jak pierwotny problem opisany powyżej).

Czy istnieje sposób na ustawienie obrazu tła za pomocą obrazu z GWT ResourceBundle, aby działał poprawnie w IE7?

Answer 4

Można użyć DataResource z 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();