Нужно ли мне поместить файл ресурсов css в ClientBundle в GWT?

Question

Я хочу поместить все свои ресурсы в 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%); 
} 

Что вопрос здесь, кто-нибудь, пожалуйста, пролить некоторый свет мне на него. Оценил!

Answer 1

Если вы помещаете свои файлы css в клиентский пакет, ваши файлы css должны разбираться с помощью компилятора CSS Parser GWT, который в настоящее время базируется на старой версии, которая немного взломана. (Это будет меняться в будущем, хотя)

Для синтаксического анализа для работы вам нужно бежать фоновые значения, как это:

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

Есть некоторые другие причуды, которые также нуждаются в побеге. Взгляните в документы и найдите ускорение: https://developers.google.com/web-toolkit/doc/latest/DevGuideClientBundle