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甚至没有要求它。

我错过了什么吗？

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();  
}

Answer 2

我在我的UiBinder文件中使用的CSS资源遇到了同样的问题。

我在我的widget构造函数中添加了一个hack以修复它。这是使用上述类名的等价物：

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

GWT UiBinder不加载样式表

2 个答案: