22

我试图在图像资源中使用平铺图像，并且我正在参考 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. MyCss资源
  2. 我的资源

我会在哪里写这个：

@sprite .mySpriteClass {gwt-image: "imageAccessor"; 其他：财产；}

?

更多引用供参考：

@sprite 对声明 CSSResource 的 FooBundle 很敏感；@sprite 声明中命名的同级 ImageResource 方法将用于组成背景精灵。

4

4 回答 4

31

根据您所写的内容，我将假定 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 对象。绑定器：

<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());
于 2010-12-28T18:47:58.887 回答
13

让我补充一下：

@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，我费了很大力气才找到它；）

于 2011-03-07T21:19:39.590 回答
4

我还想补充

记得在 MyCssResource.java 上调用 ensureInjected() 否则

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

不会工作..

于 2012-10-22T09:09:23.453 回答
1

如果您使用的是 gss，@sprite则在这种情况下不起作用。你应该gwt-sprite像这样使用：

.myBackground {
  gwt-sprite: "myImage";
}
于 2016-10-28T06:58:11.643 回答