GWT UiBinder无法加载样式表。

Question

我希望使用UiBinder制作一个GWT小部件。因此，我创建了：

像这样的UserPanel.ui.xml：

<?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是这样的：

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

并且 UserPanelResources.java 文件如下：

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

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

所有的文件和包都在它们应该在的位置，一切都编译得很好。但是当我运行开发模式时，样式没有被应用！我尝试了许多不同的方法，但仍然不起作用。

我注意到的是，在HTML中，VerticalPanel被GWT混淆后赋予了类名，但CSS并没有被发送到浏览器 - 实际上，GWT甚至没有请求它。

我错过了什么吗？

- mhaligowski

Answer 1

好的，我找到了解决方案。

原来是未注入UserPanelCss。

解决方案在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();
}

在UserPanel.java类中，只需添加以下内容：

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

- mhaligowski

Answer 2

我曾经遇到过同样的问题，因为我只在我的UiBinder文件中使用了CSS资源。

我在我的小部件构造函数中添加了一个hack来解决它。下面是使用上述类名等效的代码：

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

- John