ImageBundleを使用したGWT画像スプライトをIE7およびIE6で動作させることはできますか?

gwt internet-explorer-6 internet-explorer-7 sprite
ImageBundleを使用したGWT画像スプライトをIE7およびIE6で動作させることはできますか?

GWTアプリケーションでClientBundleを使用して、複数の画像を単一のファイルとして送信しようとしています。 バンドルを次のように宣言します。

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(およびそれ以前)ではスプライト全体が私の元の画像の1つの代わりに表示されます。 IE8-as-IE7モードまたは互換表示を使用するIE8の開発者ツールでは、26BEFD2399A92A5DDA54277BA550C75B.cache.pngのようなファイル名の画像が表示されていることがわかります。

IE7以前でGWTイメージスプライトを機能させる方法はありますか? そうでない場合、他のブラウザのユーザーがスピリットのスピードアップを取得し、IE7およびIE6ユーザーが適切に見えるが遅いものを取得するように優雅に低下させる方法はありますか?

編集: http://code.google.com/webtoolkit/doc/latest/DevGuideClientBundle.html [クライアントバンドル開発者ガイド]には、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);
  }
}

  5  0


ベストアンサー

Image.setUrl(MyResources.INSTANCE.icon1()。getUrl())の使用が問題です。

代わりにImage.setResource(MyResources.INSTANCE.icon1())を使用する必要があります

9


ImageResourceをどのように使用していますか?

参照している問題は、CssResource @spriteディレクティブで使用する場合にのみ存在します。

代わりにImageオブジェクトをインスタンス化して使用すると、IE6 + 7で正常に動作するはずです。

0


IE7でも同様の問題が発生しています。これは主に、リソースを背景画像として設定する必要があるため、「getUrl()」オプションを使用する以外に選択肢がないためです。 i.e. 次のようなものの代わりに(上記の例を使用):

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

私がする必要があります:

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

上記のコードの最初のビットの修正は「this.icon.setResource(MyResources.INSTANCE.icon1())」を行うことですが、これは文字列を想定しているだけなので、背景画像を設定するためには機能しません。 IE8およびその他のブラウザーでは、2番目のコードは問題なく機能します。 ただし、IE7では、画像バンドル全体が表示されます(上記で説明した元の問題のように)。

IE 7で正しく動作するように、GWT ResourceBundleの画像を使用して背景画像を設定できる方法はありますか?

0


IE7でDataResourceを使用できます

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

0


タイトルとURLをコピーしました