webspin.be

GWT 1.6: MVP and testing, part 2

Maarten — Mon, 29 Jun 2009 19:35:43 +0000

As for completeness, I made the previous example in a MVP + eventBus example. This can be download here. Unfortunately, I didn’t build a model class since that was too much overkill.
The procedure is simple and partially explained in the previous topic:

1. Create a (model,) presenter and view class for each custom widget.
2. Presenter: Add a interface of the view…

class AddRowPresenter
{
    /*  ....  */
    interface AddRowWidgetInterface {
        HasClickHandlers getSendButton();
        HasValue<string> getTextBox();
    }
}

… and a method to ‘bind’ the widget…

class AddRowPresenter
{
    /* .... */
    public void bindWidget(AddRowWidgetInterface widget)
    {
        this.widget = widget;
        widget.getSendButton().addClickHandler(new ClickHandler(){
            public void onClick(ClickEvent event) {
                sendAddRowEvent();
            }
        });
    }
}

… and use the eventBus to send your events.

class AddRowPresenter
{
    /* .... */
    protected void sendAddRowEvent() {
        TableRowEvent event = new TableRowEvent();
        event.setRowName(widget.getTextBox().getValue());
        eventBus.fireEvent(event);
    }
}

The widget could look like this:

class AddRowWidget extends Composite implements AddRowPresenter.AddRowWidgetInterface {
    TextBox rowName = new TextBox();
    Button addRowButton = new Button("send");
 
    /**
     * Constructor
     * This is a composite of a textbox and a button
     */
    public AddRowWidget()
    {
        VerticalPanel mainPanel = new VerticalPanel();
        mainPanel.add(rowName);
        mainPanel.add(addRowButton);
        initWidget(mainPanel);
    }
    public HasClickHandlers getSendButton() {
        return this.addRowButton;
    }
    public HasValue<string> getTextBox() {
        return this.rowName;
    }
}

For the code of the receiving widget, it’s easier to just look into the source. Its bindwidget function looks like this:

    public void bindWidget(SpecialTableInterface _table)
    {
        this.table = _table;
        eventBus.addHandler(TableRowEvent.TYPE, new TableRowEventHandler(){
            public void onAddRow(TableRowEvent event) {
            // This should be a function that uses the model, omitted here since nothing is done with the data
                table.addSpecialRow(event.getRowName());
               }
        });
    }

For more information, feel free to ask in the comments.
Next up: building the stockwatcher example (somewhat extended) with an eventBus, MVP, (the command pattern) and GIN.

GWT 1.6 MVP and testing, part 1

Maarten — Thu, 25 Jun 2009 12:02:30 +0000

After successfully building the eventBus, I decided to extend the application to use the MVP (Model-View-Presenter) pattern. The use of this pattern is nicely explained on the google testing blog. Since it’s quite a new way of doing this, there is very little example code available.
Since the gwt best practices are mostly focused on testing, and testing is an invaluable part of application design, we’ll write the test first. I’m not going in detail about Test Driven Development, there are plenty of good books around.

I’ll start with the code straight from the I/O session slides, since that’s what we want.
1. The MockClickEvent, a fake ClickEvent we can send:

public class MockClickEvent extends ClickEvent { }

Easy. And the MockHasClickHandlers class, implementing the minimum required:

class MockHasClickHandlers implements HasClickHandlers {
    ClickHandler lastClickHandler;
    public HandlerRegistration addClickHandler(ClickHandler handler) {
        lastClickHandler = handler;
        return new HandlerRegistration() {
            public void removeHandler() { }
        };
    }
    public void fireEvent(GwtEvent event) { }
}

Now we have a fake click event we can send, and a fake class that can be clicked on, aka a fake button. Great.
2. We’re also going to send a String to the table, to fill the added row with. This could be an example of sending values with events.
For this fake string to work, we also need a mock textfield (also only minimum required code):

public class MockHasValue implements HasValue<string> {
    String lastValue;
 
    public String getValue() {
        return lastValue;
    }
    public void setValue(String value) {
        this.lastValue = value;
    }
    public void setValue(String value, boolean fireEvents) {
        setValue(value);
    }
    public HandlerRegistration addValueChangeHandler(
            ValueChangeHandler<string> handler) {
        return null;
    }
    public void fireEvent(GwtEvent event) {
    }
}

All this we combine in one mock AddRowWidget:

public class MockAddRowWidget implements AddRowWidgetInterface {
 
    // the Button
    MockHasClickHandlers save = new MockHasClickHandlers();
    // The Textfield
    MockHasValue value = new MockHasValue();
 
    public HasClickHandlers getSendButton() {
        return save;
    }
    public HasValue<string> getTextValue() {
        return value;
    }
}

So what do we have so far?
A mock Composite that contains:
- a mock button on which can be (mock) clicked.
- a mock textfield with a value string.

Next: we need a mock table, implementing the SpecialTable interface (a custom object that has a addRow function), that can listen to the mock event and react accordingly:

public class MockSpecialTableWidget implements SpecialTableInterface {
    public String rowValue;
 
    public void addSpecialRow(String value) {
        this.rowValue = value;
    }
}

Almost done! All the ingredients are in place, let’s create our test:

public void testAddRow()
    {
 
        // initialize our mock objects
        MockAddRowWidget mockWidget = new MockAddRowWidget();
        MockSpecialTableWidget mockTableWidget = new MockSpecialTableWidget();
 
        create an eventBus
        HandlerManager eventBus = new HandlerManager(null);
 
        // the Presenter class of the listening table binds the (mock) table widget to the eventBus
        // with a tableRowEventHandler
        SpecialTablePresenter specialTablePresenter = new SpecialTablePresenter(mockTableWidget, eventBus);
 
        // same for the AddRowPresenter: binding (clicking on) the widget to firing the TableRowEvent with the eventBus
        AddRowPresenter addRowPresenter = new AddRowPresenter(mockWidget, eventBus);
 
        // set TextField value
        mockWidget.value.setValue("testString");
        // fake a click on the mock button
        mockWidget.save.lastClickHandler.onClick(new MockClickEvent());
 
        // Did it pass through?
        assertTrue(mockWidget.value.getValue() == mockTableWidget.rowValue);
    }

And result: green bar!

This code is only completely relevant if combined with the MVP code.which will be shown in a next post. Stay tuned!

GWT: capturing mouse position, drag and drop

Maarten — Sat, 20 Jun 2009 15:58:14 +0000

If you need to use drag and drop in your GWT application, there is a wonderful library available: gwt-dnd. Check out the demo: it offers almost everything one might expect from drag&drop.
Sometimes though, such a vast and feature-rich library is too much. I needed to create a custom scrollbar, and to do this with gwt-dnd is not that simple, since its constraint panel only affects the dropzone while the draggable element can still be dragged anywhere in the main AbsolutePanel.
So I looked for another way, and in fact it isn’t hard at all:

1. GWT 1.6 introduced a new way to capture mouse movement and any other native DOM event.

Event.addNativePreviewHandler(new NativePreviewHandler(){
    public void onPreviewNativeEvent(NativePreviewEvent event) {
        if (event.getNativeEvent().getType().equals("mousemove"))
        {
            int xCoord = event.getNativeEvent().getClientX();
            int yCoord = event.getNativeEvent().getClientY();
        }
    }
});

2. Implementing drag&drop brings another problem: only elements that are children of an AbsolutePanel can be moved, with the function setWidgetPosition(). As a result your object can only be dragged within this AbsolutePanel. This can be overcome (although I’m afraid it’s not best practice) by using DOM.setStyleAttribute:

Event.addNativePreviewHandler(new NativePreviewHandler(){
    public void onPreviewNativeEvent(NativePreviewEvent event) {
        if (event.getNativeEvent().getType().equals("mousemove"))
        {
            if (dragging == true)            {                DOM.setStyleAttribute(dragObject.getElement(), "left", (dragObject.getElement().getAbsoluteLeft() + event.getNativeEvent().getClientX()) + "px");                DOM.setStyleAttribute(dragObject.getElement(), "top", (dragObject.getElement().getAbsoluteTop() + event.getNativeEvent().getClientY()) + "px")            }        }
    }
});

Put a handler on your object which defines dragging, and add a ‘dragging = false’ to the mouseup event, and there it is: basic drag and drop.

Building a GWT 1.6 application: Managing events with an eventBus

Maarten — Fri, 19 Jun 2009 21:23:13 +0000

GWT 1.6 gets rid of all the Listener classes, and replaces them with the new Handler classes. For a comparison of the two, Jason from Lemming Technology Blog has a good overview.

At Google I/O, Ray Ryan talks about best practices for architecting your GWT app. There he mentions using an Eventbus to manage your events, and even provides some example code. Still, it all seemed a bit confusing, so I made a little testapplication to test it out.

Some points to consider:

1. The only thing passed around is the eventBus itself. This can be done with Dependency Injection, with a Registry Pattern, or whatever floats your boat. In this case DI is used.
2. For each new type of event added, a new event class must be created:

public class TableRowEvent extends GwtEvent<tableRowEventHandler> {
 
    /**
     *  For each new event, a new event type must also be specified,
     *  with which the event can be registered
     */
    public static final GwtEvent.Type<tableRowEventHandler> TYPE
        = new GwtEvent.Type<tableRowEventHandler>();
 
 
    /*
     * required
     */
    @Override
    protected void dispatch(TableRowEventHandler handler) {
        handler.onAddRow(this);
    }
 
    /*
     * required
     */
    @Override
    public GwtEvent.Type<tableRowEventHandler> getAssociatedType() {
        return TYPE;
    }
}

3. … and associated eventHandler Interface:

public interface TableRowEventHandler extends EventHandler {
    /**
     * What to do when a TableRowEvent is called
     * @param addTableRowEvent
     */
    void onAddRow(TableRowEvent addTableRowEvent);
}

4. Add the handler to the listening object:

public class SpecialTable extends FlexTable {
 
    // local reference to the eventBus
    HandlerManager eventBus;
 
    private void listenToAddRowEvent()
    {
        // registering the object to the eventBus
        eventBus.addHandler(TableRowEvent.TYPE, new TableRowEventHandler(){
        public void onAddRow(TableRowEvent event) {
            // do something
        }
    });
}

5. Fire the event on the specified occasion:

HandlerManager eventBus;
// in this case: a function in a button
private void initialize()
    {
    this.addClickHandler(new ClickHandler(){
        public void onClick(ClickEvent event) {
            // creates a new event, if desired additional data can be sent
            TableRowEvent sent = new TableRowEvent();
            eventBus.fireEvent(sent);
        }
    });
}

And there it is, your eventBus is up and running! And since both action(the button) and reaction(the table) are now completely separated, the timing of the event is no longer imporant.
Next Up:
- Adding testing.
- Adding MVP.
- working with GIN.
- …