Best practices for extending GWT UiBinder views

I believe there are no best practices yet. So I'll present the result of my weekend research. Hope GWT developers required to work on extending views will find this useful.

1. Copy-paste approach
This is the most obvious approach and obviously the most difficult to maintain. So you create a copy of Java class and ui.xml and change it to suit your needs.

One might say this is a no-brainer and a non-sense approach. The only reason I'm even mentioning this is because the responses I received suggested this.

2. Embed approach
This is useful when you want to add content on the peripheral of an existing view .e.g. adding header/ footer/ sidebar content. You need to create a UIField of the type existing view in a new class in addition to other content and then create your layout in new ui.xml.

Java class
@UiField
    TransactionDetailsView baseView;

UI xml
...
xmlns:b="urn:import:com.
crossview.gwt.client.transaction.view"
...
<!-- HTML content -->
<b:TransactionDetailsView ui:field="baseView">
<!-- HTML content -->


3. Extend approach
This approach is useful when you want to re-use the same content but a different layout. This is for information only as you can't use this in CVCC as base classes are not written this way.

Home.java (notice the getUI())
public class Home extends Composite implements HasText {

    private static HomeUiBinder uiBinder = GWT.create(HomeUiBinder.class);

    interface HomeUiBinder extends UiBinder<Widget, Home> {
    }

    public Home() {
        initWidget(getUi());
        button.addStyleName("sendButton");
    }

    /**
     * @return
     */
    public Widget getUi() {
        return uiBinder.createAndBindUi(this);
    }

    @UiField
    Button button;
   
    @UiField
    TextBox name;
   
    public Home(String firstName) {
        this();

        // Can access @UiField after calling createAndBindUi
        button.setText(firstName);
    }

    @UiHandler("button")
    void onClick(ClickEvent e) {
        Window.alert("Hello!");
    }

    public void setText(String text) {
        button.setText(text);
    }

    /**
     * Gets invoked when the default constructor is called
     * and a string is provided in the ui.xml file.
     */
    public String getText() {
        return button.getText();
    }

}

Home1.java (Since this class doesn't have new content, it extends Home, overrides getUI() and defines a new layout in Home1.ui.xml)
public class Home1 extends Home implements HasText {

    private static Home1UiBinder uiBinder = GWT.create(Home1UiBinder.class);

    interface Home1UiBinder extends UiBinder<Widget, Home1> {
    }

    /* (non-Javadoc)
     * @see com.example.gwt.client.Home#getUi()
     */
    @Override
    public Widget getUi() {
        return uiBinder.createAndBindUi(this);
    }

}

Usage

Home homePage = new Home1();
        RootPanel.get().add(homePage);
        homePage = new Home();
        RootPanel.get().add(homePage);

Comments

Popular posts from this blog

GNU Emacs as a Comic Book Reader

Tinylisp and Multi-threaded Emacs

Data Visualization with GNU Emacs