3

CSS イメージ スプライトを GWT UiBinder に表示するのに問題があります。GWT で画像スプライトを使用する方法を確認しましたか? 、しかし、提案されたことをすでに行っていることがわかりました。

、ネストされたインターフェースを備えたインターフェースui.xml、およびcssファイルがあります。ClientBundleCssBundle

ui.xml:

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
xmlns:g="urn:import:com.google.gwt.user.client.ui">
    <ui:with field="resources"
    type="edu.wts.upholdingthetruth.poweroftheword.client.resources.POWResources" />

    <g:FlowPanel width="100%" styleName="{resources.sprites.underMenuGlow}" />
</ui:UiBinder>

クライアントバンドル:

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

    @Source("site1/undertopglow.png")
    ImageResource underTopGlow();

    @Source("sprites.css")
    public Sprites sprites();

    public interface Sprites extends CssResource {

            String underMenuGlow();
    }

    // other stuff
}

スプライト.css:

@sprite .underMenuGlow {gwt-image: "underTopGlow"}

だから、私は自分のアプリをコンパイルします（これは文句を言いません）、ブラウザに画像がありません。Chrome の開発者ツールでページを確認すると、対応する div が難読化された css クラスを参照していることがわかりますが、どこにもそのクラスが定義されているのを見つけることができませんでした。

一方、を使用して画像を表示できました<g:Image resource="{resources.underTopGlow}" />。

このようなCSSスプライトを介して画像を表示するために欠けているステップはありますか?

4

1 に答える 1

17

コードのどこかで呼び出す必要がありensureInjected()ます。CssResourceまた：

POWResources.INSTANCE.sprites().ensureInjected();

また

@UiField POWResources resources;
…
resources.sprites().ensureInjected();

または、スタイル/画像を他のコードと共有しない場合は、ClientBundle を UiBinder が作成する暗黙的なものに置き換えることができますui:style(ui:imageその後、UiBinder が呼び出しensureInjectedを処理します)。

<ui:style>
  @sprite .underMenuGlow {gwt-image: "underTopGlow"}
</ui:style>
<ui:image field="underTopGlow" src="site1/undertopglow.png" />
…
<span class="{style.underMenuGlow}">foo</span>
于 2011-06-04T12:28:19.170 に答える