Wie verwende ich Bildsprites in GWT?

Question

Ich habe versucht, ein gefliestes Bild in einer Bildressource zu verwenden, und ich wurde was sich auf die GWT-Tutorial für sie ...

einen Abschnitt sagt, dass Sie brauchen Sprites zu verwenden: http://code.google.com/webtoolkit/doc/latest/DevGuideClientBundle.html#ImageResource

repeatStyle ist ein Aufzählungswert die

so

gefliest werden soll, mit die @ Sprite-Richtlinie, um anzuzeigen, dass das Bild in Kombination verwendet wird, soll, jetzt muss ich hinzufügen eine Sprite-Anweisung .. Wo? über Sprites Erforschung, ich kam hier: http://code.google.com/webtoolkit/doc/latest/DevGuideClientBundle.html#Image_Sprites

Das Beispiel die Schaffung von zwei Dateien diktiert:

1. MyCssResource
2. MyResources

wo würde ich schreiben:

@sprite .mySpriteClass {gwt-image: "imageAccessor"; andere: Eigenschaft;}

?

einige weitere Angebote für Referenz:

@sprite zum FooBundle empfindlich ist , in dem die CSSResource erklärt wird; Eine gleichrangige ImageResource-Methode namens in der @sprite-Deklaration wird verwendet, um das Hintergrund-Sprite zu erstellen.

Answer 1

Von dem, was Sie geschrieben haben, werde ich davon ausgehen, dass MyResources eine Schnittstelle, die ClientBundle und MyCssResources erstreckt, ist eine Schnittstelle, die CssResource erweitert:

interface MyResources extends ClientBundle { 
    @Source("myImage.png") 
    @ImageOptions(repeatStyle = RepeatStyle.BOTH) 
    ImageResource myImage(); 

    @Source("myCss.css") 
    MyCssResource myCss(); 
} 

interface MyCssResource extends CssResource { 
    String myBackground(); 
} 

So, jetzt dort zu verwenden zwei Möglichkeiten sind die ImageResource, die von MyResources erhalten wird. Die erste besteht darin, sie mithilfe der @sprite-Direktive an eine CSS-Regel anzuhängen. myCss.css:

@sprite .myBackground { 
    gwt-image: "myImage"; 
    /* Additional CSS rules may be added. */ 
} 

Dann etwas mit der myBackground Klasse hat myImage als Hintergrund. Also, UiBinder verwenden, zum Beispiel:

<ui:UiBinder> <!-- Preamble omitted for this example. --> 
    <ui:with field="myResources" type="com.mycompany.MyResources"/> 

    <g:FlowPanel styleName="{myResources.myCss.myBackground}"/> 
</ui:UiBinder> 

One auch Bild instanziiert können Objekte direkt den definierten ImageResource verwenden.UiBinder:

<ui:UiBinder> <!-- Preamble omitted for this example. --> 
    <ui:with field="myResources" type="com.mycompany.MyResources"/> 

    <g:Image resource="{myResources.myImage}"/> 
</ui:UiBinder> 

Ohne UiBinder:

@sprite .myBackground { 
    gwt-image: "myImage"; 
    /* Additional CSS rules may be added. */ 
} 

wird

.myBackground { 
    backgroud-image: url(-url of the image-) 
    width: *width of the image* 
    height: *height of the image* 
} 

Denken Sie daran, außer Kraft setzen sie im Falle u brauchen es:

MyResources myResources = GWT.create(MyResources.class); 
Image myImage = new Image(myResources.myImage()); 

Answer 2

Just me diese lassen hinzu: Zum Beispiel Höhe und Breite auf auto einstellen:

@sprite .myBackground { 
    gwt-image: "myImage"; 
    height: auto; 
    width: auto; 
} 

HTH, kämpfte ich viel, um das herauszufinden;)

Answer 3

Ich würde auch

hinzufügen, Denken Sie daran, ensureInjected() auf MyCssResource.java nennen oder auch

<g:FlowPanel styleName="{myResources.myCss.myBackground}"/> 

wird nicht funktionieren ..

Answer 4

Wenn Sie gss verwenden, funktioniert @sprite nicht in dieser Fall. Sie sollten gwt-sprite verwenden wie:

.myBackground { 
    gwt-sprite: "myImage"; 
}