GWT CSS资源定制

Question

我正在使用 UIBinder 和 MVP 编写 GWT 小部件。小部件的默认样式在 TheWidgetView.ui.xml 中定义：

<ui:style type="com.widgetlib.spinner.display.TheWidgetView.MyStyle">
    .textbox {
        border: 1px solid #red;
    }
    .important {
        font-weight: bold;
    }
</ui:style>

小部件的 CssResource 接口在 TheWidgetView.java 中定义：

public class TheWidgetView extends HorizontalPanel implements TheWidgetPresenter.Display {
    // ... some code
    @UiField MyStyle style;
    public interface MyStyle extends CssResource {
        String textbox();
        String important();
    }
    // ... more code
}

我希望此小部件的使用者能够自定义小部件的部分样式并将其包含在他们的 MyExample.ui.xml 中：

<ui:style type="com.consumer.MyExample.MyStyle">
    .textbox {
        border: 2px solid #black;
    }
</ui:style>

这就是他们的 MyExample.java：

public class MyExample extends Composite {
    // ... some code
    @UiField MyStyle style;
    interface MyStyle extends TheWidgetView.MyStyle{
        String textbox();
    }
    // ... more code
}

有没有办法让我的小部件可以拥有默认样式，但小部件的使用者可以覆盖其中之一？当接口扩展 TheWidgetView.MyStyle 时，小部件使用者需要定义该父接口中列出的所有样式。我见过一些小部件库的小部件构造函数采用 ClientBundle 作为参数，我认为这可以应用于 CssResource。虽然，我不确定如何在 UIBinder 调用的构造函数中传递此样式对象。

提前非常感谢！

Answer 1

我尝试过类似的方法来使我的应用程序可换肤。我将首先查看任何单元格小部件的源代码。他们似乎将资源作为构造函数，但是，如果未提供资源，他们也有使用 GWT.create(Resources.class) 来创建资源的构造函数。至于您关于将此模板用于 UIBinder 的问题，提到了 3 个选项 在这里。然而，当尝试在 UIBinder 中定义样式时，您可能会遇到先有鸡还是先有蛋的问题。

您在其他代码中遇到的问题是您的样式有两种不同的实现，因为 uibinder 创建了自己的资源包，该资源包不引用父级的 css。有 3 种解决方案：

1) 将 css 从 ui 绑定器文件中撕下来到它自己的文件中，并使用 ui:with 与提供的字段或 uifactory 结合使用，以使用您自己的资源绑定注入样式，您可以在其中复合源（即@Source({DEFAULT_CSS, "myCss.css"}))。

2）您的另一个选择是查看生成的代码并使用它们用来引用 uibinder 文件中的 css 的语法，但是您必须克服两个问题：先有鸡还是先有蛋的问题以及 google 的事实可以在不告诉你的情况下改变这一点并破坏你的东西。以下是从我的一个文件生成的客户端包的示例：

@Source("uibinder:com.foo.gwt.client.workspace.select.SelectWorkspaceViewImpl_SelectWorkspaceViewImplUiBinderImpl_GenCss_style.css")
SelectWorkspaceViewImpl_SelectWorkspaceViewImplUiBinderImpl_GenCss_style style();

3) 最后一种解决方案是使用延迟绑定来替换默认样式。

<replace-with class="com.foo.gwt.laf.mpe.resource.CellTableResources">
    <when-type-is class="com.google.gwt.user.cellview.client.CellTable.Resources" />
    <when-property-is name="laf" value="MPE" />
</replace-with>