css - que - sprite redes sociales

¿Cómo uso sprites de imagen en GWT?

Question

Estaba tratando de usar una imagen en mosaico en un recurso de imagen, y me refería al tutorial de GWT para ello ...

una sección dice que necesitas 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 @ sprite para indicar que la imagen está destinada a mosaico

Entonces, ahora necesito agregar una directiva de sprites. ¿Dónde? investigando sobre sprites, vine 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 escribiría esto?

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

?

algunas citas más para referencia:

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

Answer 1

Me gustaría agregar también

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

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

no funcionará ..

Answer 2

Por lo que ha escrito, supongo que MyResources es una interfaz que extiende ClientBundle y MyCssResources es una interfaz que 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();
}

Entonces, ahora hay dos formas de usar ImageResource obtenida 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. */
}

Entonces, cualquier cosa con la clase myBackground tendrá myImage como fondo. Entonces, usando 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 pueden crear instancias de objetos de imagen directamente utilizando el 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 3

Si está utilizando gss, @sprite no funciona en este caso. Deberías usar gwt-sprite como:

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

Answer 4

Solo déjame agregar esto:

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

se convierte

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

Recuerde anularlos en caso de que lo necesite: por ejemplo, configurar la altura y el ancho en automático:

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

HTH, luché mucho para descubrir eso;)