как использовать спрайты изображений в 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

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

  1. MyCssResource
  2. MyResources

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

@sprite .mySpriteClass {gwt-image: "imageAccessor"; другое: свойство;}

?

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

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


image css tile gwt
person Salvin Francis    schedule 26.12.2010    source источник

Ответы (4)


arrow_upward
31
arrow_downward

Из того, что вы написали, я предполагаю, что 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());
person Jason Terk    schedule 28.12.2010
comment
Большое спасибо за ваш ответ. Это было много часов борьбы с чем-то таким простым !!! - person Miquel; 08.03.2013

arrow_upward
13
arrow_downward

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

@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*
}

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

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

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

person Christian Achilli    schedule 07.03.2011
comment
Некоторое время я искал высоту и ширину для авто. Спасибо! - person Sébastien Tromp; 07.09.2011
comment
Замечательный небольшой комментарий. Помогло мне лучше понять процесс. Спасибо! - person slugmandrew; 24.05.2012

arrow_upward
4
arrow_downward

Хочу еще добавить

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

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

не будет работать ..

person simonvogensen    schedule 22.10.2012

arrow_upward
1
arrow_downward

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

.myBackground {
  gwt-sprite: "myImage";
}
person tanghao    schedule 28.10.2016