1

我是 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 下还是我也必须将它们包含在客户端包中？或者发生了什么。

4

3 回答 3

2

1*使用这里 解释的精灵

在你的 my.css 文件中使用@spriteandgwt-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

于 2013-09-19T12:17:22.993 回答
1

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

它是由Ray Cromwell（GW​​T 负责人）编写的。

于 2013-09-19T12:30:54.503 回答
1

将你所有的 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 的完全重写.

于 2013-09-20T08:13:05.803 回答