Google Web Toolkit (GWT) MVP Example (1) -

Here at Hive Development, I'm currently working on the GWT based UI for a new website/RIA monitoring service called SiteAlright. I recommend you head over and check it out. As you might expect we try to follow best practises when developing our apps and there's been quite a lot of talk recently on GWT Google Groups regarding the use of elements from the recent talk by Ray Ryan at Google I/O 2009 entitled Google Web Toolkit Architecture: Best Practices For Architecting Your GWTApp.

This excellent talk laid out several best practise approaches for architecting your GWT application based on the team's experiences while developing the new AdWords interface. Some of the key recommendations were:

Use an MVP pattern;
Use a command pattern;
Use an Event Bus (a.k.a Event Collaboration);
Use Dependency Injection.

The aim of this tutorial is to demonstrate these GWT best practises by applying them the default starter application generated by the Google Plugin for Eclipse.

There are many benefits to these patterns and I'll leave it to the links above to go into these in detail. However, using these patterns the bottom line is that your GWT application will be:

Easier to extend - well defined structure makes the addition of new business logic much easier;
Easier to test - the decoupling makes quick unit testing of commands, events and presenters not only possible but easy;
GWT's History mechanism is baked into your application from the start - this is crucial for a GWT application and is a pain to retro-fit;

MVP Web Application Starter Project

For this tutorial I'm using Eclipse with the Google Plugin for Eclipse. With the Google plugin when you create a GWT project, it also creates a useful starter application with some widgets and server components. This tutorial will work with this starter application and will apply the above patterns.

Although this example has all the source code and references to required resources, you may download the complete GreetMvp project for Eclipse 3.5 from here.

As well as the Google plugin, you'll also need the following GWT libraries:

GWT-Presenter	An implementation of the MVP pattern;
GWT-Dispatch	An implementation of the command pattern;
Google Gin	Dependency Injection based on Google's Guice;
GWT-Log	A log4j-style logger for GWT.

NOTE: currently GIN needs to be built from source using SVN/Ant.

You'll also need the following libraries at the server:

log4j	A logging framework;
Google Guice 2.0	A dependency injection framework for Java.

After introducing these best practise patterns, the structure starter application will be transformed. At this point, it's probably worth noting that:

You'll no longer make RPC service calls directly - these are wrapped up in the command pattern and are handled by the gwt-dispatch library;
The main page and the server response popup will be separated into respective view/presenters;
The Event Bus pattern is implemented using the GWT 1.6+ Handlers mechanism.

Unsurprisingly, the code size will jump from the initial starter app, but what you'll end up with offers much more and will hopefully serve as the starting point for a real application based on these best practises.

Let's begin.

Fire up Eclipse and generate your starter application, I've called it GreetMvp:

This will generate the following structure:

gwt default application structure screenshot

If you're not already familiar with the default application I suggest you take a look at the entry point class which in my case is co.uk.hivedevelopment.greet.client.GreetMvp.java. You'll see all the view code, custom handler logic and server calls all lumped into one method. Fire up the application and you see the following:

The first thing we'll do is add the required libraries to the project - at this point you should have downloaded the listed dependencies and built Google Gin.

Create a folder called lib in your project at the top level of your project for client-only libraries and add the following:

gin.jar

For server and client dependencies, add the remaining jars into the web application lib folder located at war/WEB-INF/lib:

aopalliance.jar	(from Google Gin)
guice-2.0.jar	(from Google Gin. IMPORTANT - use the version supplied with Gin and not Guice)
guice-servlet-2.0.jar	(from Google Guice)
gwt-dispatch-1.0.0-SNAPSHOT.jar	(from gwt-dispatch)
gwt-log-2.6.2.jar	(from gwt-log)
gwt-presenter-1.0.0-SNAPSHOT.jar	(from gwt-presenter)
log4j.jar	(from log4j)

Add all of the above jars to the project's build path. You should have something that looks similar to this:

Edit the GWT module definition file co.uk.hivedevelopment.greet/GreetMvp.gwt.xml:

<?xml version="1.0" encoding="UTF-8"?> 

<!DOCTYPE module PUBLIC "-//Google Inc.//DTD Google Web Toolkit 1.7.0//EN" "http://google-web-toolkit.googlecode.com/svn/tags/1.7.0/distro-source/core/src/gwt-module.dtd"> 

<module rename-to='greetmvp'> 
 <!-- Inherit the core Web Toolkit stuff.                        -->

 <inherits name="com.google.gwt.user.User" /> 

 <inherits name="com.google.gwt.inject.Inject" /> 

 <inherits name='net.customware.gwt.dispatch.Dispatch' /> 

 <inherits name='net.customware.gwt.presenter.Presenter' /> 
 <!-- Inherit the default GWT style sheet.  You can change       -->
 <!-- the theme of your GWT application by uncommenting          -->
 <!-- any one of the following lines.                            -->

 <inherits name='com.google.gwt.user.theme.standard.Standard' /> 
 <!-- <inherits name='com.google.gwt.user.theme.chrome.Chrome'/> -->
 <!-- <inherits name='com.google.gwt.user.theme.dark.Dark'/>     -->
 <!-- Specify the app entry point class.                         -->

 <entry-point class='co.uk.hivedevelopment.greet.client.GreetMvp' /> 
 <!-- Add gwt-log support, default level `OFF` - check for 
      extended property 'log_level' to see if this is overridden -->

 <inherits name="com.allen_sauer.gwt.log.gwt-log-OFF" /> 
 <!-- Also compile Logger at `INFO` level -->

 <extend-property name="log_level" values="INFO" /> 

 <set-property name="log_level" value="INFO" /> 
 <!-- Turn off the floating logger - output will be shown in the 
   hosted mode console -->

 <set-property name="log_DivLogger" value="DISABLED" /> 

   

 <source path="shared" /> 

 <source path="client" /> 
</module>

Note the <source> tags. We have roughly 3 top level packages defined: client, shared and server. We do not want GWT accessing the server sub-packages so we have explicity told the GWT compiler what it can access.

Try to compile the project, it should compile cleanly.

Create View and Presenters

Now we'll split the app into the following components:

AppPresenter.java	Represents the main application;
GreetingView.java	The GUI components for the greeting example;
GreetingPresenter	The business logic for the greeting example;
GreetingResponseView	The GUI for the reponse popup;
GreetingResponsePresenter	The business logic for the response popup.

AppPresenter.java

package co.uk.hivedevelopment.greet.client.mvp; 

import net.customware.gwt.dispatch.client.DispatchAsync; 

import com.google.gwt.user.client.ui.HasWidgets; 

import com.google.inject.Inject; 

public class AppPresenter { 

 private HasWidgets container; 

 private GreetingPresenter greetingPresenter; 
 @Inject

 public AppPresenter(final DispatchAsync dispatcher, 

       final GreetingPresenter greetingPresenter) { 
  this.greetingPresenter = greetingPresenter;  
 }

   

 private void showMain() { 
  container.clear();
  container.add(greetingPresenter.getDisplay().asWidget());
 }

    

 public void go(final HasWidgets container) { 
  this.container = container;

    
  showMain();
 }
}

GreetingView.java

package co.uk.hivedevelopment.greet.client.mvp; 

import net.customware.gwt.presenter.client.widget.WidgetDisplay; 

import com.google.gwt.event.dom.client.HasClickHandlers; 

import com.google.gwt.user.client.ui.Button; 

import com.google.gwt.user.client.ui.Composite; 

import com.google.gwt.user.client.ui.FlowPanel; 

import com.google.gwt.user.client.ui.HasValue; 

import com.google.gwt.user.client.ui.RootPanel; 

import com.google.gwt.user.client.ui.TextBox; 

import com.google.gwt.user.client.ui.Widget; 

public class GreetingView extends Composite implements GreetingPresenter.Display { 

 private final TextBox name; 

 private final Button sendButton; 

 public GreetingView() { 

  final FlowPanel panel = new FlowPanel(); 
  initWidget(panel);

  name = new TextBox(); 
  panel.add(name);

  sendButton = new Button("Go"); 
  panel.add(sendButton);

    
  // Add the nameField and sendButton to the RootPanel
  // Use RootPanel.get() to get the entire body element
  RootPanel.get("nameFieldContainer").add(name);
  RootPanel.get("sendButtonContainer").add(sendButton);

    
  reset();
 }

 public HasValue getName() { 

  return name; 
 }

 public HasClickHandlers getSend() { 

  return sendButton; 
 }

   

 public void reset() { 
  // Focus the cursor on the name field when the app loads
  name.setFocus(true);
  name.selectAll();
 }
 /**
  * Returns this widget as the {@link WidgetDisplay#asWidget()} value.
  */

 public Widget asWidget() { 

  return this; 
 }
 @Override

 public void startProcessing() { 
 }
 @Override

 public void stopProcessing() { 
 }
}

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论