I want to put all my resources into a ClientBundle for easy management. So I first started working on putting a single css file, which is also the file under /war
directory, into ClinetBundle. However the style cannot be rendered in my output, but if I just put the css file under /war
without ever using the css ClientBundle, the program worked just fine.
Below is my simple test case (using ClientBundle) - I put the css file same folder in the client
package and remove css file under /war
directory:
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);
}
}
The style cannot be rendered.
Another simple case - without using css ClientBundle and put back the css file into /war
folder.
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);
}
}
The style can be correctly rendered.
And my Test.css code:
.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%);
}
What is the issue here, anyone please shed me some light on it. Appreciated!
If you put your css files into a clientbundle your css files have to be parsed by the GWT Compilers CSS Parser, which currently bases on an old version which is somewhat a little hacked. (This is going to change in the future though)
For the parser to work you need to escape your background values like this:
background-image: literal('-webkit-linear-gradient(top left, #FFFFFF 0%, #00A3EF 100%)');
There are some other quirks that also need escaping. Take a look in the docs and search for escaping: https://developers.google.com/web-toolkit/doc/latest/DevGuideClientBundle