GWT UiBinder does not load stylesheet

Question

I wanted to create a GWT widget using UiBinder. So I did:

UserPanel.ui.xml like this:

<?xml version="1.0" encoding="UTF-8"?> <ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder' xmlns:g='urn:import:com.google.gwt.user.client.ui'> <ui:with field="res" type="com.example.resources.UserPanelResources" /> <g:VerticalPanel styleNames='{res.userpanel.main}'> ...some other widgets go here... </g:VerticalPanel> </ui:UiBinder> 

UserPanel.css like this:

 .main { width: 1000px; background-color: #f9f9fa; padding: 15px 10px; font-family: "Georgia"; } 

and UserPanelResources.java as:

 public interface UserPanelResources extends ClientBundle { public interface UserPanelCss extends CssResource { String main(); } @Source("css/userpanel.css") UserPanelCss userpanel(); } 

All files and packages are in place, as everything compiles just fine. But when I start development mode, the styles don't apply! I tried many different approaches, but it still doesn't work.

What I noticed is that in the HTML VerticalPanel a class name is given, confused by GWT, but CSS is not sent to the browser - in fact, GWT does not even ask about it.

Did I miss something?

Answer 1

Ok, I found a solution.

It turned out to be non-injection UserPanelCss.

The solution was in UserPanelResources, java:

 public interface UserPanelResources extends ClientBundle { public final static UserPanelResources INSTANCE = GWT.create(UserPanelResources.class) public interface UserPanelCss extends CssResource { String main(); } @Source("css/userpanel.css") UserPanelCss userpanel(); } 

And in the UserPanel.java class, just add:

 static { UserPanelResources.INSTANCE.userpanel().ensureInjected(); } 

Answer 2

I had the same issue for a CSS resource that I used only in my UiBinder file.

I added a hack for my widget constructor to fix it. Here's the equivalent using class names:

  @Inject
   UserPanel (UserPanelResources resources) {
     resources.userpanel (). ensureInjected ();
     initWidget (BINDER.createAndBindUi (this));
     ...
   }