GWT MVP

MVP (Model View Presenter) is a design pattern which allows the application developing in gwt to follow MVP architecture. MVP provides the solution of the problem of complexity for developing application. Application development is complex as many developer working on same code due to which all follow same design pattern.

Following are the description of each component:

Model: In this segment model consist of data only. It holds within the business object which is to be manipulated and calculated according to application need.
View: It only consists of view i.e. display the data which is given by presenter. It provides reusability of view code as we can swap the new view very easily. It only deals with the HTML and CSS which also helps in separate testing.
Presenter: It contains all the logic which is to be implemented in the application development. It communicates with model as well as view. It is complete distinct in operation which provide separate JUnit testing.

Implementation

Below is the code of Login application which is designed on the base of MVP.

LoginView.java

public class LoginView implements HasWidgets{
 HorizontalPanel container;
 Label loginLabel;
 Label passwordLabel;
 TextBox loginField;
 PasswordTextBox passwordField;
 Button loginButton;
 
  
 public LoginView(){
  container = new HorizontalPanel();
  loginField = new TextBox();
  loginButton = new Button("Login");
  passwordField = new PasswordTextBox();
  loginLabel = new Label("Login");
  passwordLabel = new Label("Password");
   
  container.add(loginLabel);
  container.add(loginField);
  container.add(passwordLabel);
  container.add(passwordField);
  container.add(loginButton);
 }
 
 @Override
 public Widget asWidget() {
  return container;
 }
 
 @Override
 public void add(Widget w) {
  container.add(w);
 }
 
 @Override
 public void clear() {
  container.clear();
 }
 
 @Override
 public Iterator<widget> iterator() {
  return container.iterator();
 }
 
 @Override
 public boolean remove(Widget w) {
  return container.remove(w);
 }
 
 
}

MainPageView.java

public class MainPageView implements HasWidgets {
 
 VerticalPanel container;
 HorizontalPanel leftPanel;
 HorizontalPanel rightPanel;
 Button logout;
 
 @Override
 public HasClickHandlers getLogoutButton() {
  return logout;
 }
  
 public MainPageView(){
  leftPanel = new HorizontalPanel();
  rightPanel = new HorizontalPanel();
  container = new VerticalPanel();
  logout = new Button("Logout");
  container.add(logout);
  container.add(leftPanel);
  container.add(rightPanel);
 }
 
 @Override
 public Widget asWidget() {
  return container;
 }
  
 
 @Override
 public void add(Widget w) {
  container.add(w);
 }
 
 @Override
 public void clear() {
  container.clear();
 }
 
 @Override
 public Iterator<widget> iterator() {
  return container.iterator();
 }
 
 @Override
 public boolean remove(Widget w) {
  return container.remove(w);
 }
 
 @Override
 public Button getButton() {
  return logout;
 }
}

Now we build our UI component which follows the presenter that controls the behavior and interaction of the views.

LoginPresenter.java

public class MainPagePresenter {
 public interface Display{
  HasClickHandlers getLogoutButton(); 
  Widget asWidget();
  MainPageView getViewInstance();
  Button getButton();
 }
  
 final Display display;
 final HandlerManager eventBus;
  
 public MainPagePresenter(Display display, HandlerManager eventBus){
  this.display = display;
  this.eventBus = eventBus;
 }
  
 public void init(){
  display.getLogoutButton().addClickHandler(new ClickHandler(){
   @Override
   public void onClick(ClickEvent event) {
    // use the event bus to trigger the event
    eventBus.fireEvent(new LogoutEvent());
   }
  });
 }
  
 public void go(final HasWidgets container){
  init();
  container.clear();
  container.add(display.asWidget());
   
 }
  
  
 public Display getView(){
   
  return display;
 }
  
}

Now we design the interface communication between view and presenter called display.

For Login View

public class LoginView implements HasWidgets, LoginPresenter.Display {
    //...other methods
 @Override
 public HasClickHandlers getLoginButton() {
                //return button to implement its events in the Presenter
  return loginButton;
 }
 
         @Override
 public LoginView getViewInstance() {
  return this;
 }
 
         @Override
 public Widget asWidget() {
  return container;
 }
 
}

For Main page View

public class MainPageView implements HasWidgets, MainPagePresenter.Display {
        //...other methods
 @Override
 public  MainPageView getViewInstance(){
   
  if(instance == null)
   return new MainPageView();
  else
   return instance;
 }
 
   @Override
 public HasClickHandlers getLogoutButton() {
  return logout;
 }
 
}

Finally we implement the app controller

public class AppController {
 HandlerManager eventBus;
 LoginPresenter loginPage;
 HasWidgets container;
  
 public AppController(HandlerManager manager){
  this.eventBus = manager;
  loginPage = new LoginPresenter(new LoginView(), eventBus);
  bindEvents();
 }
 public void bindEvents(){
  eventBus.addHandler(LoginEvent.TYPE, new LoginEventHandler(){
   @Override
   public void onLogin(LoginEvent event) {
    // TODO Auto-generated method stub
    //if login successful 
    MainPagePresenter mainpage = new MainPagePresenter(new MainPageView(), eventBus);
    container = mainpage.getView().getViewInstance();
    mainpage.go(RootPanel.get());
   }
  });
   
  eventBus.addHandler(LogoutEvent.TYPE, new LogoutEventHandler(){
   @Override
   public void onLogout(LogoutEvent event) {
    loginPage.go(RootPanel.get());
   }
  });
 }
 public void goTo(HasWidgets page){
  this.container = page;
  loginPage.go(page);
 }
 
}

Now application structure looks like