Question

据我了解，除了一些旧的浏览器，GWT默认不创建精灵。相反，它将图像作为字符串存储在javascript代码中或某种其他方式。我听说改变了财产......

<set-property name='ClientBundle.enableInlining' value='false' />

...将迫使GWT从我提供的图像资源中生成image sprites（即从小图标组合的大图像）。

问题是：

1）我可以强制GWT使用我的设计师为我创建的我自己的精灵文件而不是自动生成这样的文件吗？

2）从您的经历中处理GWT中的图像的最佳方法是什么？

Answer 1

为您的包图像创建一个ressource：

interface MyResources extends ClientBundle {
  @Source("mySpriteImage.png")
  ImageResource mySpriteImage();

  @Source("myCss.css")
  MyCssResource myCss();
}

interface MyCssResource extends CssResource {
  String myBackground();
}

所以现在有两种方法可以使用从MyResources获得的ImageResource。第一种是使用@sprite指令将其附加到CSS规则。 myCss.css：

@sprite .myBackground {
  gwt-image: "mySpriteImage";
}
.image1 {
  width: 16px;
  height: 16px;
  background-position: 0 0;
}
.image2 {
  width: 16px;
  height: 16px;
  background-position: -16px 0;
}
.image3 {
  width: 32px;
  height: 32px;
  background-position: -16px -16px;
}
/* ... */

您可以创建精灵课程并设置课程名称。

<ui:UiBinder> <!-- Preamble omitted for this example. -->
  <ui:with field="myResources" type="com.mycompany.MyResources"/>

  <g:Image styleName="{myResources.myCss.myBackground} {myResources.myCss.image1}"/>
</ui:UiBinder>

我如何使用我的精灵强制gwt？

1 个答案: