¿cómo uso sprites de imagen en GWT?

Question

yo estaba tratando de utilizar una imagen en mosaico en un recurso de imagen, y me refiero a la clase particular de GWT para ello ...

una sección dice que tienes que usar sprites: http://code.google.com/webtoolkit/doc/latest/DevGuideClientBundle.html#ImageResource

repeatStyle es un valor enumerado que se utiliza en combinación con la directiva @ de sprites para indicar que la imagen está destinado a revestir

es así, ahora tengo que añadir una directiva de sprites. ¿Dónde? investigar sobre los sprites, que llegué aquí: http://code.google.com/webtoolkit/doc/latest/DevGuideClientBundle.html#Image_Sprites

El ejemplo dicta la creación de dos archivos:

1. MyCssResource
2. MyResources

dónde voy a escribir esto:

@sprite .mySpriteClass {gwt-image: "imageAccessor"; otro: propiedad;}

?

algunos más citas de referencia:

@sprite es sensible a la FooBundle en la que se declara la CSSResource; un método hermano ImageResource llamado en la declaración @sprite será utilizado para componer el sprite de fondo.

Answer 1

De lo que has escrito Voy a suponer que MyResources es una interfaz que se extiende ClientBundle y MyCssResources es una interfaz que se extiende 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(); 
} 

Así que ahora hay dos maneras de utilizar ImageResource obtenido de MyResources. El primero es adjuntarlo a una regla CSS utilizando la directiva @sprite. myCss.css:

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

Luego, cualquier elemento de la clase myBackground tendrá myImage como fondo. Por lo tanto, el uso de UiBinder, por ejemplo:

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

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

También se puede crear instancias de objetos de imagen directamente a través de la ImageResource definido.UiBinder:

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

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

Sin UiBinder:

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

Answer 2

Sólo permítanme añadir esto:

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

convierte

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

Recuerde que debe reemplazar en caso de necesidad de u él: por ejemplo, estableciendo alto y ancho en auto:

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

HTH, luché mucho para averiguarlo;)

Answer 3

me gustaría añadir también

Recuerde llamar ensureInjected() en MyCssResource.java o de lo contrario

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

no funcionará ..

Answer 4

Si está utilizando GSS, @sprite no está funcionando en este caso. Debe utilizar gwt-sprite gustan:

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