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

该示例规定了两个文件的创建：

MyCssResource
为MyResources

我会在哪里写这个：

@sprite .mySpriteClass {gwt-image： “imageAccessor”;其他：property;}

更多引用供参考：

@sprite对FooBundle很敏感其中声明了CSSResource; 一个名为的兄弟ImageResource方法在@sprite声明中用来组成背景精灵。

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，我很努力地找到了;）

Answer 3

我想添加

记得在MyCssResource.java上调用ensureInjected（）或者

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

不会工作..

Answer 4

如果您使用gss，@sprite在这种情况下不起作用。您应该使用gwt-sprite之类的：

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

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

4 个答案: