GWT ClientBundle CSS不使用相对路径来引用图像

Question

我是Google Web Toolkit的新手，我正在尝试将ClientBundle与jquery-ui结合使用。我的项目结构如下所示：

我定义了这样的资源接口：

我像这样注入jquery和css：

现在，CSS和JQuery脚本被正确注入。但是，当我启动应用程序时，css中的路径被误解了。以下css行例如：

background: #eeeeee url(images/ui-bg_highlight-soft_100_eeeeee_1x100.png) 50% top repeat-x;

失败。示例如下所示：

正如你所看到的，GWT似乎在某种程度上假设images文件夹是一个顶级文件夹，但显然这不是我想要的。如果图像只是放在/ war下，还是我必须将它们包含在客户端包中？或者发生了什么。

Answer 1

<强> 1 * 按照here

的说明使用spriting

在my.css文件中使用@sprite和gwt-image

@sprite .myImage {
  gwt-image: 'image';
}

并使用捆绑包

将其注入您的应用

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

  @Source("my.css");
  CssResource css();
}

它不会让你注入jQuery Css。

<强> 2 * 第二种选择是编写一个小的servlet，为你的图像提供“直接url访问”，这样你就可以保持CSS原样。

这是我用Spring MVC编写的获取CSS（而不是图像）的东西。这应该足以说明问题。我正在使用Spring的DispatcherServlet。

  private static final String CSS_PATH = "/path/to/my/css/resources/";
  private static final String CSS_EXT = ".css";
  private static final String CSS_CONTENT_TYPE = "text/css";

  @RequestMapping(value = "/resources/css", method = RequestMethod.GET)
  public void getCssResource(HttpServletResponse response, @RequestParam("name") String name) throws IOException {
    String path = CSS_PATH + name;
    InputStream is = SomeClassOnMyClassPath.class.getResourceAsStream(path + CSS_EXT);
    if (is != null) {
      flushResource(response, is, CSS_CONTENT_TYPE);
    }
  }

  private void flushResource(HttpServletResponse response, InputStream is, String contentType) throws IOException {
    DateTime expirationTime = new DateTime().plusDays(16);
    response.setContentType(contentType);
    response.setDateHeader("Expires", expirationTime.getMillis());
    IOUtils.copy(is, response.getOutputStream());
    response.flushBuffer();
  }

然后，您可以在/ resources / css？name = cssName url

中获取CSS

Answer 2

为了与GWT进行正确的jQuery集成，您应该使用gwtQuery。

由Ray Cromwell（GWT领导）撰写。

Answer 3

将您所有的JQuery图像文件放在* .gwt.xml的同一目录中的public目录中。 （或者你可以在XML中添加这一行：

<public path="resources/jquery-ui-1.10.3/css/ui-lightness/" />

所有这些文件将被复制到gwt js编译文件中，css将成功引用图像。

GWT中还有一个JQuery UI的包装器： https://code.google.com/p/gwtquery-ui/ 这个项目只是导入JS文件而不是gwtQuery，这是Jquery框架的GWT中的完全重写。