我如何在GWT中使用图像精灵？

Question

我试图在图像资源中使用平铺图像,我正在参考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对声明CSSResource的FooBundle很敏感; 在@sprite声明中命名的兄弟ImageResource方法将用于组成背景精灵.

Answer 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();
}

所以现在有两种方法可以使用从MyResources获得的ImageResource.第一种是使用@sprite指令将其附加到CSS规则.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>

也可以使用定义的ImageResource直接实例化Image对象.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());

Answer 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,我很努力地找到了;)