`
fishyu0817
  • 浏览: 111297 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

Google Web Toolkit (GWT) MVP Example (1)

阅读更多

本文转自:http://blog.hivedevelopment.co.uk/2009/08/google-web-toolkit-gwt-mvp-example.html

 

 

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:

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:

google plugin eclipse create project 1google plugin eclipse create project 2

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:

gwt default application screenshot

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:

gwt default application structure screenshot

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

view source
<object id="highlighter_777931_clipboard" title="copy to clipboard" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="16" height="16" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" type="application/x-shockwave-flash"> </object>
print?
01.<?xml version="1.0" encoding="UTF-8"?>
02.<!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">
03.<module rename-to='greetmvp'>
04. <!-- Inherit the core Web Toolkit stuff.                        -->
05. <inherits name="com.google.gwt.user.User" />
06. <inherits name="com.google.gwt.inject.Inject" />
07. <inherits name='net.customware.gwt.dispatch.Dispatch' />
08. <inherits name='net.customware.gwt.presenter.Presenter' />
09. <!-- Inherit the default GWT style sheet.  You can change       -->
10. <!-- the theme of your GWT application by uncommenting          -->
11. <!-- any one of the following lines.                            -->
12. <inherits name='com.google.gwt.user.theme.standard.Standard' />
13. <!-- <inherits name='com.google.gwt.user.theme.chrome.Chrome'/> -->
14. <!-- <inherits name='com.google.gwt.user.theme.dark.Dark'/>     -->
15. <!-- Specify the app entry point class.                         -->
16. <entry-point class='co.uk.hivedevelopment.greet.client.GreetMvp' />
17. <!-- Add gwt-log support, default level `OFF` - check for
18.      extended property 'log_level' to see if this is overridden -->
19. <inherits name="com.allen_sauer.gwt.log.gwt-log-OFF" />
20. <!-- Also compile Logger at `INFO` level -->
21. <extend-property name="log_level" values="INFO" />
22. <set-property name="log_level" value="INFO" />
23. <!-- Turn off the floating logger - output will be shown in the
24.   hosted mode console -->
25. <set-property name="log_DivLogger" value="DISABLED" />
26.  
27. <source path="shared" />
28. <source path="client" />
29.</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
view source
<object id="highlighter_644217_clipboard" title="copy to clipboard" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="16" height="16" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" type="application/x-shockwave-flash"> </object>
print?
01.package co.uk.hivedevelopment.greet.client.mvp;
02.import net.customware.gwt.dispatch.client.DispatchAsync;
03.import com.google.gwt.user.client.ui.HasWidgets;
04.import com.google.inject.Inject;
05.public class AppPresenter {
06. private HasWidgets container;
07. private GreetingPresenter greetingPresenter;
08. @Inject
09. public AppPresenter(final DispatchAsync dispatcher,
10.       final GreetingPresenter greetingPresenter) {
11.  this.greetingPresenter = greetingPresenter; 
12. }
13.  
14. private void showMain() {
15.  container.clear();
16.  container.add(greetingPresenter.getDisplay().asWidget());
17. }
18.   
19. public void go(final HasWidgets container) {
20.  this.container = container;
21.   
22.  showMain();
23. }
24.}
GreetingView.java
view source
<object id="highlighter_305023_clipboard" title="copy to clipboard" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="16" height="16" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" type="application/x-shockwave-flash"> </object>
print?
01.package co.uk.hivedevelopment.greet.client.mvp;
02.import net.customware.gwt.presenter.client.widget.WidgetDisplay;
03.import com.google.gwt.event.dom.client.HasClickHandlers;
04.import com.google.gwt.user.client.ui.Button;
05.import com.google.gwt.user.client.ui.Composite;
06.import com.google.gwt.user.client.ui.FlowPanel;
07.import com.google.gwt.user.client.ui.HasValue;
08.import com.google.gwt.user.client.ui.RootPanel;
09.import com.google.gwt.user.client.ui.TextBox;
10.import com.google.gwt.user.client.ui.Widget;
11.public class GreetingView extends Composite implements GreetingPresenter.Display {
12. private final TextBox name;
13. private final Button sendButton;
14. public GreetingView() {
15.  final FlowPanel panel = new FlowPanel();
16.  initWidget(panel);
17.  name = new TextBox();
18.  panel.add(name);
19.  sendButton = new Button("Go");
20.  panel.add(sendButton);
21.   
22.  // Add the nameField and sendButton to the RootPanel
23.  // Use RootPanel.get() to get the entire body element
24.  RootPanel.get("nameFieldContainer").add(name);
25.  RootPanel.get("sendButtonContainer").add(sendButton);
26.   
27.  reset();
28. }
29. public HasValue getName() {
30.  return name;
31. }
32. public HasClickHandlers getSend() {
33.  return sendButton;
34. }
35.  
36. public void reset() {
37.  // Focus the cursor on the name field when the app loads
38.  name.setFocus(true);
39.  name.selectAll();
40. }
41. /**
42.  * Returns this widget as the {@link WidgetDisplay#asWidget()} value.
43.  */
44. public Widget asWidget() {
45.  return this;
46. }
47. @Override
48. public void startProcessing() {
49. }
50. @Override
51. public void stopProcessing() {
52. }
53.}
分享到:
评论

相关推荐

    Google Web工具包(GWT)编程手册The Google Web Toolkit (GWT) Programming Cookbook

    Google Web Toolkit(GWT)是一个用于开发和优化复杂浏览器端应用的开源工具集,它允许开发者使用Java语言编写前端代码,然后通过编译器将Java代码转换成兼容各主流浏览器的JavaScript、HTML和CSS。《Google Web工具...

    Google Web Toolkit gwt-2.10.0 最新版本

    Google Web Toolkit(GWT)是Google推出的一款强大的Web开发框架,专注于帮助开发者使用Java语言创建高性能、跨浏览器的Web应用程序。GWT g-2.10.0是该框架的一个重要版本更新,提供了许多增强的功能和优化,以提升...

    GWT(Google Web Toolkit)

    GWT(Google Web Toolkit) 是 Google 最近推出的一个开发 Ajax 应用的框架,它支持用 Java 开发和调试 Ajax 应用,本文主要介绍如何利用 GWT 进行 Ajax 的开发。 GWT特性简介  1.动态,可重用的UI组件  GWT提供的...

    gwt-2.8.2 SDK 最新下载 google web toolkit

    Google Web Toolkit(GWT)是Google推出的一款开源的、基于Java的Web开发框架,它允许开发者使用Java语言来编写前端应用程序。GWT-2.8.2是该SDK的一个版本,提供了最新的特性和改进,旨在简化Web应用的开发流程,...

    Google Web Toolkit 入门

    ### Google Web Toolkit (GWT) 入门指南 #### 一、引言 随着网络技术的发展,用户对Web应用的期望越来越高,不仅要求其功能强大,还希望具有良好的交互性和用户体验。为此,一种名为Ajax(Asynchronous JavaScript...

    Google Web Toolkit Applications

    《Google Web Toolkit Applications》这本书是针对Google Web Toolkit(GWT)这一强大开发工具的深入指南。GWT是一款由Google开发的开源JavaScript框架,它允许开发者使用Java语言来编写Web应用程序,然后自动编译成...

    Google Web Toolkit 开发 Ajax

    ### Google Web Toolkit (GWT) 开发 Ajax 技术详解 #### 一、GWT特性简介 **GWT**(Google Web Toolkit)是Google推出的一款用于构建和优化复杂Web前端应用的开发工具包。它通过提供一系列强大的特性,极大地简化...

    ajax例子,Google Web Toolkit 1.0.21-ajax example, Google Web Toolkit 1.0.21

    在"ajax例子,Google Web Toolkit 1.0.21-ajax example"中,我们可以预期找到的是一个使用GWT 1.0.21构建的Ajax示例应用。这个示例可能展示了如何使用GWT库创建异步通信,以及如何处理服务器返回的数据。通过学习这个...

    Using Google Web Toolkit (GWT) for Developing AJAX-Based Web Applications for the SAP NetWeaver J2EE Framework.pdf

    ### 使用Google Web Toolkit (GWT) 开发基于AJAX的SAP NetWeaver J2EE框架Web应用 #### 概述 本文档旨在提供一种利用Google Web Toolkit (GWT) 在SAP NetWeaver J2EE框架下开发AJAX基础Web应用的方法。SAP ...

    Google Web Toolkit开发实战

    谷歌Web工具包(Google Web Toolkit,简称GWT)是一种开源的Java框架,它允许开发者使用Java语言编写客户端的Web应用程序,然后自动编译为优化过的JavaScript代码。GWT的核心理念是利用Java的强类型、面向对象的特性...

    利用 Google Web Toolkit 在 Java 框架中开发 Ajax 应用程序

    1. **Google Web Toolkit (GWT) 基础**:介绍 GWT 的核心概念,如编译 Java 到 JavaScript、Widget 系统、事件处理和模块化结构。 2. **GWT 开发环境**:如何安装和配置 Eclipse IDE,以及安装和使用 GWT 插件。 3...

    Google-Web-Toolkit (GWT)

    ### Google Web Toolkit (GWT):工作原理与应用实例 #### 一、GWT简介 Google Web Toolkit(GWT)是一种强大的开发框架,用于构建基于AJAX的Web应用程序。GWT的主要特点在于它允许开发者完全使用Java语言进行前端...

    Google Web Toolkit API 文档

    Google Web Toolkit(GWT)是Google推出的一款开源的JavaScript开发框架,它允许开发者使用Java语言来编写前端Web应用。GWT API文档是开发者理解和使用GWT进行开发的重要参考资料,提供了全面的技术指南和API参考。 ...

    google web toolkit 1.5.3

    Google Web Toolkit(GWT)1.5.3是一款由Google开发的开源JavaScript开发框架,它允许Java开发者使用Java语言来构建高性能、跨浏览器的Web应用程序。这个版本是GWT的一个重要里程碑,带来了许多改进和新特性,使得...

    面向 Java 开发人员的 Ajax 探索 Google Web Toolkit

    Google Web Toolkit(GWT)是一款由Google推出的开源框架,专为Java开发者设计,旨在简化和加速Web应用程序的开发过程。它允许开发者使用Java语言编写前端代码,并将其编译成高性能的JavaScript,从而在浏览器上运行...

    Accelerated GWT: Building Enterprise Google Web Toolkit Applications

    《加速GWT:构建企业级Google Web Toolkit应用》是一本深度探讨如何利用Google Web Toolkit(GWT)构建高性能Ajax应用程序的专业书籍。本书作者Vipul Gupta深入解析了GWT的核心功能,以及如何通过GWT生成优化的...

    面向 Java 开发人员的 Ajax: Google Web Toolkit 入门(GWT入门)

    **Java开发人员的Ajax:Google Web Toolkit (GWT) 入门** Google Web Toolkit (GWT) 是一个强大的工具,它允许Java开发人员使用熟悉的Java语言来构建高性能、跨浏览器的Ajax应用程序。GWT通过将Java代码编译为优化...

    GWT (GOOGLE WEB TOOLKIT)介绍PPT

    **GWT (Google Web Toolkit)** 是一款由Google开发的开源工具包,专为Java开发者设计,使得他们能够使用Java语言创建高效、动态且交互性强的Ajax应用。GWT通过将Java代码编译成浏览器可执行的JavaScript和HTML,解决...

    Manning - Gwt In Action Easy Ajax With The Google Web Toolkit

    Google Web Toolkit(GWT)

Global site tag (gtag.js) - Google Analytics