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

Posted 2023-03-25

【中文标题】如何使用我的精灵强制 gwt？

【英文标题】：How can I force gwt using my sprites?

【发布时间】：2013-09-09 00:55:43

【问题描述】：

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

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

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

问题是：

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

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

【问题讨论】：

这有帮助吗？ ***.com/questions/4535094/…

otonglet，实际上我正在做同样的事情，但那里没有使用精灵。我想知道我是否可以以某种方式使用我自己的精灵文件。

我们的设计师尝试这样做，但无法找到一种方法让 GWT 使用他自己的 sprite 文件而不破坏 CSS。最好的方法是让设计人员使用 GWT 小部件，而不是使用 html 和纯 CSS。 cfr ***.com/a/18759480/1722236

【参考方案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>