带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接口.现在,你可以在这里看到一些相当特别的东西.但我刚刚接受了基本的一个.

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只会为需要它的浏览器进行注入.(基于浏览器的延迟绑定是GWT中很多东西的工作方式.)

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

不去爱的种种？