子类化复合 GWT 小部件答案

【问题标题】：Subclass a composite GWT widget子类化复合 GWT 小部件
【发布时间】：2015-01-28 21:35:59
【问题描述】：

我想继承（扩展）Modal widget from GWTBootstrap3 以创建一个可以在我的应用程序中重用的自定义模式小部件。使用 UiBinder 时我不知道该怎么做。我只能在 java 代码中通过创建 ModalHeader、ModalBody 和 ModalFooter 并使用 add(Widget) 方法添加它们。

但是我怎样才能为我的子类使用 UiBinder 呢？

【问题讨论】：

标签： java gwt uibinder gwtbootstrap3

【解决方案1】：

您可以在 UiBinder 代码中使用您的自定义小部件。这就是你的目的吗？只需将自定义小部件所在的包导入单独的命名空间即可。假设小部件 WeatherReport 在包 com.my.app.widgets 中，并且您要使用的命名空间是 my，导入看起来像这个：

<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
    xmlns:g="urn:import:com.google.gwt.user.client.ui"
    xmlns:my="urn:import:com.my.app.widgets">

现在您可以像这样在 UiBinder 代码中添加 WeatherReport 对象：

<g:HTMLPanel>
    <my:WeatherReport ui:field="weather" />
</g:HTMLPanel>

请参阅official GWT documentation 了解更多信息。

在 UiBinder 中使用 ModalHeader、ModalBody 等的工作方式相同。导入各自的包并使用组件，这里是一个简单的例子：

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
        xmlns:g="urn:import:com.google.gwt.user.client.ui"
        xmlns:b="urn:import:org.gwtbootstrap3.client.ui">
        <b:ModalBody>
                <b:Row>
                        <b:Column size="MD_12">
                                <b:Input ui:field="passwordInput" type="PASSWORD" />
                        </b:Column>
                </b:Row>
                <b:ModalFooter">
                        <b:Button ui:field="saveButton" text="Save" type="PRIMARY" />
                        <b:Button ui:field="cancelButton" text="Cancel" />
                </b:ModalFooter>
        </b:ModalBody>
</ui:UiBinder>

【讨论】：

是的，这是我希望实现的目标。但是，WheaterReport 的 java 版本看起来如何，它会扩展 Modal 吗？另外，不应该在内部，对吧？
WeatherReport 组件的 Java 部分如下所示：public class WeatherReport extends ModalBody { private static WeatherReportUiBinder uiBinder = GWT .create(WeatherReportUiBinder.class); interface WeatherReportUiBinder extends UiBinder<Widget, WeatherReport> { } public WeatherReport() { add(uiBinder.createAndBindUi(this)); } }
这就是我将它与 Modal 小部件一起使用的方式：Modal modal = new Modal(); modal.setClosable(true); WeatherReport widget = new WeatherReport(); modal.add(widget); modal.show(); 如果您发现更优雅的集成，我会全力以赴 :-)