Как я могу использовать спрайты изображений в GWT? - PullRequest
Новая
       36

Как я могу использовать спрайты изображений в GWT?

23 голосов
/ 26 декабря 2010

Я пытался использовать мозаичное изображение в ресурсе изображений, и я ссылался на учебник 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 будет используется для создания фонового спрайта.

Ответы [ 4 ]

31 голосов
/ 28 декабря 2010

Из того, что вы написали, я предполагаю, что 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());
13 голосов
/ 08 марта 2011

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

@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, я изо всех сил пытался это выяснить;)

4 голосов
/ 22 октября 2012

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

Не забудьте вызвать sureInjected () в MyCssResource.java или в противном случае 

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

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

0 голосов
/ 28 октября 2016

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

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