css - 带有 CSS 的 GWT Html 文件

Question

当我使用 GWT 插件创建新元素时，它会为我创建一个框架元素。在 html 文件中有一条评论说“考虑内联 CSS 以减少请求文件的数量” 为什么我会考虑使用内联 css？我很难将 css 放在单独的文件中而不是内联会减少文件的大小吗？这不是真的吗？

Answer 1

答案在于 GWT 的运行方式。由于 GWT 每个模块加载只有一个页面加载，因此内联缓存并没有真正发挥作用。

如果您只想得到答案:内联 CSS 减少了加载构成元素的所有文件所需的 TCP/IP 连接数。这可以考虑到您可能有多个 CSS 文件、高延迟和其他网络条件，因此这很重要。在我的工作(州政府)中，并不总是保证你是一个“肥管”。

GWT(或者至少是 gwt-incubator)有一种机制可以将内联 CSS 的优化与信息和布局的分离相结合。

输入 ImmutableResources 和 StyleInjector。这两件事(结合起来)导致了一种加载不可变(编译时间后)资源的方法。

要使用这些，首先下载 gwt-incubator。然后将所需的库添加到您的 module.gwt.xml

<!-- immutable resources and injecting styles -->
<inherits name="com.google.gwt.libideas.ImmutableResources" />
<inherits name="com.google.gwt.libideas.StyleInjector" />

完成后，将 CSS 文件创建为代码 资源。我将我的保存在源路径中，如“org.project.client.resources.*”。您可以将它们保存在单独的段中，例如:header.css、body.css、table.css。发疯吧，真的让事情尽可能地分开。您的文件路径应该类似于“/src/org/project/client/resources/header.css”。

现在，创建 CSS 界面。现在，您可以用这个 look here 做一些相当特别的事情。 .但我只是使用了基本的。

import com.google.gwt.libideas.resources.client.CssResource;

public interface Css extends CssResource {

}

现在您有了 CssResource 类(您可以有不同的类)，您需要创建一个不可变的资源包来包装所有 CSS 文件。

import com.google.gwt.core.client.GWT;
import com.google.gwt.libideas.resources.client.ImmutableResourceBundle;

public interface ResourceBundle extends ImmutableResourceBundle {

    public static final ResourceBundle INSTANCE = GWT.create(ResourceBundle.class);

    /*
     * =============================
     * CSS
     * =============================
     */

        @Resource("org/project/client/resources/header.css")
        public Css headerCss();

        @Resource("org/project/client/resources/body.css")
        public Css bodyCss();
}

这将在编译时创建指向不可变 CSS 资源的链接。现在我们需要以某种方式将这些 CSS 资源放入(插入)到模块中。这就是 StyleInjector 的用武之地。

我将类似于以下的代码放入我的入口点的“onModuleLoad”方法中。

StyleInjector.injectStylesheet(ResourceBundle.INSTANCE.headerCss().getText());
StyleInjector.injectStylesheet(ResourceBundle.INSTANCE.bodyCss().getText());

可能有其他方法可以在 GWT 中实现相同的效果，但 CssResource 的强大功能可以用于比我在这里讨论的更多的事情。例如:在我的一个元素中，我需要对 CSS 进行一些小改动，以使 IE 和 Firefox 能够正确呈现我认为正确的内容。我的 global.css 中有两个特定于浏览器的小部分，如下所示:

/* fix ie floating quirk */
@if user.agent ie6 ie7 ie8 {
    #someElement {
        top: -21px;
        right: 5px;
    }
}

/* fix firefox floating quirk */
@if user.agent ff gecko mozilla firefox Gecko Mozilla moz gecko1_8 {
    #someElement {
        top: -14px;
    }
}

能够将此逻辑排除在我的 JavaScript/Java 之外真是太好了。这里还有一个小的优化，因为 GWT 只会为需要它的浏览器进行注入(inject)。 (基于浏览器的延迟绑定(bind)是 GWT 中很多东西的工作方式。)

因此，提供内联 CSS 的机制在保持 CSS 分离的同时还提供了其他好处。

什么是不爱？