2010-03-08 68 views
5

我正在嘗試在我的GWT應用程序中使用ClientBundle以使多個圖像作爲單個文件發送。我宣佈捆綁像這樣:使用ImageBundle的GWT圖像精靈能夠在IE7和IE6中工作嗎?

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

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

這在Firefox和IE8很大,但在IE7(或更早)整個精靈代替我原來的圖像之一的顯示出來 - 那就是,ICON1旁邊icon3旁邊的icon2,等等。在使用IE8-as-IE7模式或兼容性視圖的IE8開發人員工具中,我可以看到它顯示的文件名像26BEFD2399A92A5DDA54277BA550C75B.cache.png,這正是我所期望的。

那麼有沒有什麼辦法讓GWT圖像精靈在IE7中工作和更低?如果沒有,有沒有什麼辦法可以正常降級,這樣其他瀏覽器的用戶就可以獲得精靈的加速,IE7和IE6用戶可以看到正確的但速度更慢的東西?

編輯:Client Bundle Developer's Guide有使用ClientBundle和@sprite的討論,並說:「對IE6的支持是不是在這種格式是可行的,因爲對DOM結構變化是實行必要的‘窗口’作用。一旦可以在user.agent中區分ie6和ie7,我們可以重新訪問對ie6的支持。在當前的實現中,ie6代碼將無法正確顯示,儘管這純粹是一個表面問題。「這是怎麼回事我的情況,有沒有辦法解決它?顯示所有圖像「純粹是一個整容問題」,但這是一個非常嚴重的問題。

編輯2:以下是我使用的圖像:

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

回答

9

使用Image.setUrl的(MyResources.INSTANCE.icon1()的getURL())的問題。

您應該使用Image.setResource(MyResources.INSTANCE.icon1()),而不是

+0

謝謝,這樣做! – aem 2010-03-11 17:14:11

0

你如何使用ImageResource?

您引用的問題僅在與CssResource @sprite指令一起使用時才存在。

如果您通過實例化一個Image對象,而不是使用它,它應該工作的罰款在IE6 + 7

+0

我已經編輯我的問題,包括你要的信息。我沒有使用@sprite,這使得這尤其令人困惑。 – aem 2010-03-11 14:50:41

0

我在IE7中得到了類似的問題過了,主要是因爲我沒有選擇,只能使用「的getURL( )「選項,因爲我需要將資源設置爲背景圖像。即不是像(以上面的例子):

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

我需要做的:

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

然而對於以上代碼的第一位的解決方法是做「this.icon.setResource (MyResources.INSTANCE.icon1())「,它不適用於設置背景圖像,因爲它只是期望一個字符串。在IE8和其他瀏覽器中,第二位代碼工作正常。但在IE7中,它顯示整個圖像包(就像上面解釋的原始問題)。

那麼有沒有什麼辦法可以使用GWT ResourceBundle中的圖像來設置背景圖像,以便它能夠在IE7中正常工作?

+0

裏扎,請爲此創建一個新問題 - 它會讓人們更容易看到並回答您的問題。 – aem 2010-04-07 14:43:27

0

您可以使用DataResource與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();