come utilizzare gli sprite delle immagini in GWT?

Question

Stavo cercando di utilizzare un'immagine piastrelle in una risorsa immagine, e mi riferivo al tutorial GWT per esso ...

una sezione dice che è necessario utilizzare gli sprite: http://code.google.com/webtoolkit/doc/latest/DevGuideClientBundle.html#ImageResource

repeatStyle è un valore enumerato che viene utilizzato in combinazione con la direttiva @ sprite per indicare che l'immagine è destinata ad essere piastrellato

così, ora ho bisogno di aggiungere una direttiva sprite .. Dove? ricerca sugli sprite, sono venuto qui: http://code.google.com/webtoolkit/doc/latest/DevGuideClientBundle.html#Image_Sprites

L'esempio determina la creazione di due file:

1. MyCssResource
2. MyResources

dove avrei scritto questo:

@sprite .mySpriteClass {gwt-image: "imageAccessor"; altri: proprietà;}

?

alcuni più citazioni di riferimento:

@sprite è sensibile alla FooBundle in cui viene dichiarato il CSSResource; un metodo ImageResource di pari livello denominato nella dichiarazione @sprite sarà utilizzato per comporre lo sprite di sfondo.

Answer 1

Da quello che hai scritto ho intenzione di presumere che MyResources è un'interfaccia che si estende ClientBundle e MyCssResources è un'interfaccia che si estende CssResource:

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

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

interface MyCssResource extends CssResource { 
    String myBackground(); 
} 

Così ora ci sono due modi per utilizzare ImageResource ottenuto da MyResources. Il primo è quello di collegarlo a una regola CSS usando la direttiva @sprite. myCss.css:

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

Quindi, qualsiasi cosa con la classe myBackground avrà myImage come sfondo. Quindi, utilizzando UiBinder, ad esempio:

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

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

Si può anche istanziare Immagine oggetti direttamente utilizzando l'ImageResource definito.UiBinder:

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

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

Senza UiBinder:

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

Answer 2

Basta che mi aggiungi a:

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

diventa

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

Ricordati di ignorare loro in caso di bisogno di u esso: per esempio impostando altezza e larghezza su auto:

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

HTH, ho faticato molto a trovare che fuori;)

Answer 3

Vorrei aggiungere anche

Ricordarsi di chiamare ensureInjected() su MyCssResource.java oppure

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

non funzionerà ..

Answer 4

Se si utilizza GSS, @sprite non funziona in questo caso. Si dovrebbe usare gwt-sprite come:

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