子类化复合GWT小部件

Question

I would like to subclass (extend) the Modal widget from GWTBootstrap3 to create a custom modal widget that can be reused within my app. I don't know how to do this when using UiBinder. I can do it only in java code by creating a ModalHeader, a ModalBody and a ModalFooter and adding them using add(Widget) method.

But how can I do the same using UiBinder for my subclass?

Answer 1

You can use your custom widget in UiBinder code. Is that what you are up to? Just import the package where your custom widget is into a separate namespace. Say the widget WeatherReport is in the package com.my.app.widgets and the namespace you want to use is my , the import looks like this:

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

Now you can add WeatherReport objects in UiBinder code like this:

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

See the official GWT documentation for more information.

Using ModalHeader , ModalBody and so on in UiBinder works the same way. Import the respective package and use the components, here is a simple example:

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