GWT CssResource 自定义

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 个选项here。但是，当您尝试在 UIBinder 中定义样式时，您可能会遇到先有鸡还是先有蛋的问题。

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

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

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

@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>