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中使用这个模板的问题，有三个选项提到了这里。但是，在试图定义UIBinder内部的样式时，您可能会遇到鸡肉和鸡蛋问题。

您在其他代码中遇到的问题是，您的两个不同的样式实现，因为uibinder创建了它自己的资源包，它不引用父程序的css。有三种解决办法：

1)将css从ui绑定文件中删除到它自己的文件中，并使用ui:通过与提供的字段或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>