我真的需要把css资源文件放到GWT的ClientBundle中吗？

我想把我所有的资源放到一个ClientBundle中，以方便管理。因此，我首先开始着手将一个单独的css文件（也是/war目录下的文件）放入ClinetBundle中。但是，我的输出中无法呈现样式，但如果我只是将css文件放在/war之下而没有使用css ClientBundle，则程序工作得很好。我真的需要把css资源文件放到GWT的ClientBundle中吗？

下面是（使用ClientBundle）我简单的测试案例 - 我把css文件相同的文件夹中client包和/war目录下删除css文件：

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%); 
}

什么是这里的问题，任何人请我流下它的一些情况。不胜感激！

来源

2012-06-20 sozhen

如果你把你的css文件放到一个clientbundle中，你的css文件必须由GWT编译器CSS解析器解析，这个解析器目前基于一个稍微有点黑客的旧版本。（这将在未来虽然改变）

解析器工作，你需要逃避你这样的背景值：

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

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

来源

2012-06-20 17:20:48

谢谢，文字功能的作品。只是想知道，为什么不使用'/ war'文件夹。 ClientBundle中的css文件比这更强大吗？ – sozhen

Classe命名模糊处理以避免CssResources，'@if @ else'，'@ sprite'，'@ def'等之间的冲突。查看文档！ –

我真的需要把css资源文件放到GWT的ClientBundle中吗？

回答

相关问题