Yo estaba tratando de usar un mosaico de imágenes en un recurso de imagen, y yo me estaba refiriendo a los GWT tutorial para ella…

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

repeatStyle es un valor enumerado
que se utiliza en combinación con
[email protected] directiva para indicar que
la imagen está destinada a ser suelo de baldosa

así que, ahora necesito agregar un sprite directiva .. Donde ?
la investigación acerca de los sprites, yo 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

donde iba a escribir esto :

@sprite .mySpriteClass {gwt-imagen:
«imageAccessor»; otros: la propiedad;}

?

algunos más citas de referencia:

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

4 Comentarios

  1. 31

    De lo que has escrito me 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 usar el ImageResource obtenidos a partir de MyResources. La primera es adjuntarlo a una regla CSS para el uso de la @sprite directiva. myCss.css:

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

    Luego, cualquier cosa con la myBackground clase tendrá myImage como su fondo. Así, utilizando 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 Imágenes directamente utilizando la ImageResource. 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());
    • Muchas gracias por tu respuesta. Ha sido muchas horas de luchar contra algo tan simple!!!
  2. 13

    Permítanme añadir esto:

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

    se convierte en

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

    Recuerde reemplazar en caso de necesidad u es: por ejemplo, el ajuste de la altura y el ancho de auto:

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

    HTH, he luchado mucho para averiguarlo 😉

    • He estado buscando por la altura y el ancho de auto durante algún tiempo. Gracias!
    • Gran comentario poco. Me ayudó a entender el proceso más. Gracias!
  3. 4

    Me gustaría añadir también

    Recuerde llamar a ensureInjected() en MyCssResource.java o bien

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

    no funciona..

  4. 0

    Si usted está usando gss, @sprite no está trabajando en este caso. Usted debe utilizar gwt-sprite como:

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

Dejar respuesta

Please enter your comment!
Please enter your name here