1

我正在使用 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 调用的构造函数中传递此样式对象。

提前非常感谢！

4

1 回答 1

0

我一直在玩类似的东西来使我的应用程序可换肤。我将从查看任何单元格小部件的源代码开始。他们似乎将资源作为构造函数，但是如果未提供资源，它们也有使用 GWT.create(Resources.class) 来创建资源的构造函数。至于您关于将此模板用于 UIBinder 的问题，这里提到了 3 个选项。但是，当您尝试在 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>
于 2011-11-14T23:08:07.063 回答