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

【问题标题】：How can I force gwt using my sprites?如何使用我的精灵强制 gwt？
【发布时间】：2013-09-09 00:55:43
【问题描述】：

据我了解，GWT 默认情况下不会创建精灵，除了一些旧浏览器。相反，它将图像作为字符串存储在 javascript 代码中的某处或其他地方。听说要换房了……

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

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

问题是：

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

2) 根据您的经验，处理GWT 中图像的最佳方式是什么？

【问题讨论】：

这有帮助吗？ stackoverflow.com/questions/4535094/…
otonglet，实际上我正在做同样的事情，但那里没有使用精灵。我想知道我是否可以以某种方式使用我自己的精灵文件。
我们的设计师尝试这样做，但无法找到一种方法让 GWT 使用他自己的 sprite 文件而不破坏 CSS。最好的方法是让设计人员使用 GWT 小部件，而不是使用 HTML 和纯 CSS。 cfr stackoverflow.com/a/18759480/1722236

标签： java image gwt css-sprites sprite-sheet

【解决方案1】：

为您的捆绑图像创建资源：

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>

【讨论】：