GWT UiBinder doesn't load the stylesheet

Question

I wanted to make a GWT widget using UiBinder. So I made:

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 like:

public interface UserPanelResources extends ClientBundle {
    public interface UserPanelCss extends CssResource {
        String main();
    }

    @Source("css/userpanel.css")
    UserPanelCss userpanel();
}

All the files and packages are in their place, as everything compiles just fine. But when I run the Development Mode, the styles are not applied! I tried many different approaches, but it still doesn't work.

What I noticed, is that in the HTML, the VerticalPanel is given the class name obfuscated by GWT, but the CSS is not send to the browser - in fact, the GWT doesn't even ask for it.

Am I missing something?

Answer 1

Ok, i found the solution.

It turned out to be the not-injected 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 problem for a CSS resource that I was only using in my UiBinder file.

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

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