Implementing the View

We’ve built and tested several parts of our Contact List web page yet we haven’t seen any actual HTML. Based on the responsibility of a View in MVP, we would expect the View to be where HTML is emitted. We have defined the interfaces of our views in prior posts and, in this post, we’ll start looking at the views’ implementations.

In a typical GWT application, a View is implemented by a Widget. A Widget in GWT does exactly what we described a View should do in our MVP definition. It generates HTML and support events that a user could take on that HTML. At the UI Component level, the ContactListView will be implemented by one Widget and the ContactDetailView will be implemented by another Widget. And within each of those UI Components, particular UI elements will also be implemented by Widgets.

GWT has many Widgets available in their core library. If a Widget is needed that GWT doesn’t have, there are multiple options. Most typically, though, we would either develop it ourselves or look to a third-party library that has already developed it. The GWT showcase (http://gwt.google.com/samples/Showcase/Showcase.html) demonstrates many of the Widgets that GWT delivers in its core library.

ContactListView

For our ContactListView implementation, we will extend a GWT Widget called VerticalPanel. This will layout the Contacts vertically in an HTML Table.

public class ContactListViewImpl extends VerticalPanel implements ContactListView{
	public HasClickHandlers addContact(String contactName){
		// TODO:  implement
		return null;
	}
}

Immediately, we see that we have another Widget decision to make in order to return a HasClickHandlers implementation from the addContact() method. Remember that HasClickHandlers is an interface in the core GWT library and it is no coincidence that a Anchor Widget exists which implements this interface.

public class ContactListViewImpl extends VerticalPanel implements ContactListView{
	public HasClickHandlers addContact(String contactName){
		Anchor link = new Anchor();
		link.setText(contactName);
		super.add(link);
		return link;
	}
}