Как использовать графические спрайты в GWT?

Я пытался использовать черепичное изображение в ресурсе изображения, и я обращался к учебнику GWT для него...

в одном разделе говорится, что вам нужно использовать спрайты: http://code.google.com/webtoolkit/doc/latest/DevGuideClientBundle.html#ImageResource

repeatStyle - это перечислимое значение который используется в сочетании с директива @sprite, чтобы указать, что изображение должно быть разбито на части

Итак, теперь мне нужно добавить директиву спрайтов.. Где? исследуя о спрайтах, я пришел сюда: http://code.google.com/webtoolkit/doc/latest/DevGuideClientBundle.html#Image_Sprites

Пример диктует создание двух файлов:

  • MyCssResource
  • MyResources

где бы я написал это:

@sprite.mySpriteClass {gwt-image: "ImageAccessor"; other: property;}

?

еще несколько цитат для справки:

@sprite чувствителен к FooBundle в котором объявлен CSSResource; метод ImageResource sibling, названный в заявлении @sprite будет используется для составления фонового спрайта.

Ответы

Ответ 1

Из того, что вы написали, я предполагаю, что MyResources - это интерфейс, расширяющий ClientBundle, а MyCssResources - это интерфейс, расширяющий 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();
}

Итак, теперь есть два способа использования ImageResource, полученных из MyResources. Первый заключается в том, чтобы прикрепить его к правилу CSS, используя директиву @sprite. myCss.css:

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

Тогда что-нибудь с классом myBackground будет иметь myImage в качестве фона. Итак, используя UiBinder, например:

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

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

Можно также создавать объекты Image непосредственно с помощью определенного ImageResource. UiBinder:

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

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

Без UiBinder:

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

Ответ 2

Просто позвольте мне добавить это:

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

становится

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

Не забудьте переопределить их в случае необходимости: например, установите высоту и ширину в auto:

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

HTH, я изо всех сил пытался найти это;)

Ответ 3

Я хотел бы добавить также

Не забудьте вызвать securityInjected() в MyCssResource.java или еще

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

не работает.

Ответ 4

Если вы используете gss, @sprite в этом случае не работает. Вы должны использовать gwt-sprite как:

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