1

我想把我所有的资源都放到一个 ClientBundle 中以便于管理。因此，我首先开始着手将单个 css 文件（也是目录下的文件/war）放入 ClinetBundle。但是，无法在我的输出中呈现样式，但是如果我只是将 css 文件放在下面/war而不使用 css ClientBundle，那么程序就可以正常工作。

下面是我的简单测试用例（使用 ClientBundle） - 我将 css 文件放在client包中的同一文件夹中，并删除目录下的 css 文件/war：

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.core.client.GWT;
import com.google.gwt.resources.client.ClientBundle;
import com.google.gwt.resources.client.CssResource;
import com.google.gwt.resources.client.CssResource.NotStrict;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.RootPanel;
import com.smartgwt.client.widgets.layout.HLayout;
import com.smartgwt.client.widgets.layout.VLayout;

public class Test implements EntryPoint {

    private static final int REPORT_TITLE_HEIGHT = 50;
    public static final MyResources INSTANCE = GWT.create(MyResources.class);

    public interface MyResources extends ClientBundle {
        @NotStrict
        @Source("Test.css")
        CssResource css();
    }

    public void onModuleLoad() {

        INSTANCE.css().ensureInjected();

        Window.enableScrolling(false);
        Window.setMargin("0px");

        VLayout vl = new VLayout();
        vl.setWidth100();
        vl.setHeight100();

        HLayout reportTitleBar = new HLayout();
        reportTitleBar.setHeight(REPORT_TITLE_HEIGHT);
        reportTitleBar.setStyleName("report-title-bar");

        vl.setMembers(reportTitleBar);

        RootPanel.get().add(vl);
    }
}

无法渲染样式。

另一个简单的案例 - 不使用 css ClientBundle 并将 css 文件放回文件/war夹中。

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.RootPanel;
import com.smartgwt.client.widgets.layout.HLayout;
import com.smartgwt.client.widgets.layout.VLayout;

public class Test implements EntryPoint {

    private static final int REPORT_TITLE_HEIGHT = 50;

    public void onModuleLoad() {

        Window.enableScrolling(false);
        Window.setMargin("0px");

        VLayout vl = new VLayout();
        vl.setWidth100();
        vl.setHeight100();

        HLayout reportTitleBar = new HLayout();
        reportTitleBar.setHeight(REPORT_TITLE_HEIGHT);
        reportTitleBar.setStyleName("report-title-bar");

        vl.setMembers(reportTitleBar);

        RootPanel.get().add(vl);
    }
}

样式可以正确渲染。

还有我的 Test.css 代码：

.report-title-bar {
    /* IE10 Consumer Preview */
    background-image: -ms-linear-gradient(top left, #FFFFFF 0%, #00A3EF 100%);
    /* Mozilla Firefox */
    background-image: -moz-linear-gradient(top left, #FFFFFF 0%, #00A3EF 100%);
    /* Opera */
    background-image: -o-linear-gradient(top left, #FFFFFF 0%, #00A3EF 100%);
    /* Webkit (Safari/Chrome 10) */
    background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, #FFFFFF), color-stop(1, #00A3EF));
    /* Webkit (Chrome 11+) */
    background-image: -webkit-linear-gradient(top left, #FFFFFF 0%, #00A3EF 100%);
}

这里有什么问题，请任何人给我一些启发。赞赏！

4

1 回答 1

6

如果您将您的 css 文件放入 clientbundle，您的 css 文件必须由 GWT Compilers CSS Parser 解析，它目前基于一个有点被破解的旧版本。（虽然这将在未来改变）

要使解析器正常工作，您需要像这样转义背景值：

background-image: literal('-webkit-linear-gradient(top left, #FFFFFF 0%, #00A3EF 100%)');

还有一些其他的怪癖也需要逃避。查看文档并搜索转义：https ://developers.google.com/web-toolkit/doc/latest/DevGuideClientBundle

于 2012-06-20T17:20:48.693 回答