passive view for Ext GWT applications

Seeing “Google Web Toolkit Architecture: Best Practices For Architecting Your GWT App” presentation by Ray Ryan coincided with start of a new project – an Ext GWT front-end application for one of our clients. We liked the idea of testing front-end code entirely in JRE so we decided to give model view presenter approach to building front-ends a try. Unfortunately GXT widgets come with no fine grained interfaces like GWT’s HasValue. Our display interfaces quickly ended up returning GXT widgets – hard to mock or even not possible to instantiate in JRE due to JSNI. We had to come up with a solution and do it fast. Technical debt had been registered on the project backlog and in a couple of days we had an opportunity to work on this. We developed several simple interfaces that let us compose display interfaces using this common vocabulary and factory class that returns implementations for common GXT widgets. It is good to think about returned implementations as gateways that provide simple API which implementation can be easily substituted by some test double. It’s better to look at some real code, this should make everything more clear. The first of the interfaces is HasValue:

public interface HasValue {
    T getValue();
    void setValue(T value);
}

we have others – for selection, clicking, double clicking …

public interface HasSelected {
    public static interface Handler {
        void onSelected();
    }
    public void addHandler(Handler h);
}

Corresponding factory methods …

public static HasValue createHasValue(final Label label) {
    return new HasValue() {
        @Override
        public void setValue(String value) {
            label.setText(value);
        }

        @Override
        public String getValue() {
            return label.getText();
        }
    };
}

public static HasSelected createHasSelected(final Button button) {
    return new HasSelected() {

        @Override
        public void addHandler(final Handler handler) {
            button.addSelectionListener(new SelectionListener() {

                @Override
                public void componentSelected(ButtonEvent ce) {
                    handler.onSelected();
                }
            });
        }
    };
}

Now it is easy to build Display interfaces:

public class MyPresenter {

    public static interface Display {

        HasSelected getMyButtonSelected();

        HasValue getName();
    }

...
}

and their implementations:

public HasSelected getMyButtonSelected() {
    return DisplayMemberFactory.createHasSelected(myButton);
}

Simple.