gwt - जीडब्ल्यूटी UiBinder और छवि स्प्राइट्स



sprite clientbundle (1)

मुझे GWT UiBinder में प्रदर्शित होने में सीएसएस छवि sprites प्राप्त करने में समस्या हो रही है मैंने समीक्षा की थी कि मैं जीडब्ल्यूटी में छवि प्रेइट्स का उपयोग कैसे करूं? , लेकिन पाया कि मैं पहले ही जो सुझाया गया था वह कर रहा था।

मेरे पास एक ui.xml , एक CssBundle नेस्टेड इंटरफ़ेस के साथ ClientBundle इंटरफ़ेस और एक सीएसएस फाइल है।

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> 

ClientBundle:

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
}

sprites.css:

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

इसलिए, मैं अपना ऐप संकलित करता हूं (जो शिकायत नहीं करता है), और ब्राउज़र में, मेरी छवि गुम है जब मैं क्रोम के डेवलपर टूल में पेज की समीक्षा करता हूं, तो मैं संबंधित डिब को ओब्फीसकेटेड सीएसएस क्लास का संदर्भ देता हूं, लेकिन मुझे उस श्रेणी को कहीं भी परिभाषित नहीं किया जा सकता था।

दूसरी तरफ, मैं <g:Image resource="{resources.underTopGlow}" /> का उपयोग करके छवि प्रदर्शित करने में सक्षम था।

क्या इस तरह से सीएसएस प्रेइट्स के माध्यम से चित्र प्रदर्शित करने के लिए कोई कदम नहीं है?


आपको अपने कोड में कहीं से अपने CssResource पर ensureInjected() कॉल ensureInjected() ; या तो:

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

या

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

वैकल्पिक रूप से, यदि आप अन्य कोड के साथ शैलियों / चित्रों को साझा नहीं करते हैं, तो आप अपने क्लाइंटबंडल को उस निहित से बदल सकते हैं जो UiBinder ui:style और ui:image (और बाद में ensureInjected लिए ensureInjected लिए ensureInjected ):

<ui:style>
  @sprite .underMenuGlow {gwt-image: "underTopGlow"}
</ui:style>
<ui:image field="underTopGlow" src="site1/undertopglow.png" />
…
<span class="{style.underMenuGlow}">foo</span>