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:
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:
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. |
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.
}
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 Toolkit(GWT)是一个用于开发和优化复杂浏览器端应用的开源工具集,它允许开发者使用Java语言编写前端代码,然后通过编译器将Java代码转换成兼容各主流浏览器的JavaScript、HTML和CSS。《Google Web工具...
Google Web Toolkit(GWT)是Google推出的一款强大的Web开发框架,专注于帮助开发者使用Java语言创建高性能、跨浏览器的Web应用程序。GWT g-2.10.0是该框架的一个重要版本更新,提供了许多增强的功能和优化,以提升...
GWT(Google Web Toolkit) 是 Google 最近推出的一个开发 Ajax 应用的框架,它支持用 Java 开发和调试 Ajax 应用,本文主要介绍如何利用 GWT 进行 Ajax 的开发。 GWT特性简介 1.动态,可重用的UI组件 GWT提供的...
Google Web Toolkit(GWT)是Google推出的一款开源的、基于Java的Web开发框架,它允许开发者使用Java语言来编写前端应用程序。GWT-2.8.2是该SDK的一个版本,提供了最新的特性和改进,旨在简化Web应用的开发流程,...
### Google Web Toolkit (GWT) 入门指南 #### 一、引言 随着网络技术的发展,用户对Web应用的期望越来越高,不仅要求其功能强大,还希望具有良好的交互性和用户体验。为此,一种名为Ajax(Asynchronous JavaScript...
《Google Web Toolkit Applications》这本书是针对Google Web Toolkit(GWT)这一强大开发工具的深入指南。GWT是一款由Google开发的开源JavaScript框架,它允许开发者使用Java语言来编写Web应用程序,然后自动编译成...
### Google Web Toolkit (GWT) 开发 Ajax 技术详解 #### 一、GWT特性简介 **GWT**(Google Web Toolkit)是Google推出的一款用于构建和优化复杂Web前端应用的开发工具包。它通过提供一系列强大的特性,极大地简化...
在"ajax例子,Google Web Toolkit 1.0.21-ajax example"中,我们可以预期找到的是一个使用GWT 1.0.21构建的Ajax示例应用。这个示例可能展示了如何使用GWT库创建异步通信,以及如何处理服务器返回的数据。通过学习这个...
### 使用Google Web Toolkit (GWT) 开发基于AJAX的SAP NetWeaver J2EE框架Web应用 #### 概述 本文档旨在提供一种利用Google Web Toolkit (GWT) 在SAP NetWeaver J2EE框架下开发AJAX基础Web应用的方法。SAP ...
谷歌Web工具包(Google Web Toolkit,简称GWT)是一种开源的Java框架,它允许开发者使用Java语言编写客户端的Web应用程序,然后自动编译为优化过的JavaScript代码。GWT的核心理念是利用Java的强类型、面向对象的特性...
1. **Google Web Toolkit (GWT) 基础**:介绍 GWT 的核心概念,如编译 Java 到 JavaScript、Widget 系统、事件处理和模块化结构。 2. **GWT 开发环境**:如何安装和配置 Eclipse IDE,以及安装和使用 GWT 插件。 3...
### Google Web Toolkit (GWT):工作原理与应用实例 #### 一、GWT简介 Google Web Toolkit(GWT)是一种强大的开发框架,用于构建基于AJAX的Web应用程序。GWT的主要特点在于它允许开发者完全使用Java语言进行前端...
Google Web Toolkit(GWT)是Google推出的一款开源的JavaScript开发框架,它允许开发者使用Java语言来编写前端Web应用。GWT API文档是开发者理解和使用GWT进行开发的重要参考资料,提供了全面的技术指南和API参考。 ...
Google Web Toolkit(GWT)1.5.3是一款由Google开发的开源JavaScript开发框架,它允许Java开发者使用Java语言来构建高性能、跨浏览器的Web应用程序。这个版本是GWT的一个重要里程碑,带来了许多改进和新特性,使得...
Google Web Toolkit(GWT)是一款由Google推出的开源框架,专为Java开发者设计,旨在简化和加速Web应用程序的开发过程。它允许开发者使用Java语言编写前端代码,并将其编译成高性能的JavaScript,从而在浏览器上运行...
《加速GWT:构建企业级Google Web Toolkit应用》是一本深度探讨如何利用Google Web Toolkit(GWT)构建高性能Ajax应用程序的专业书籍。本书作者Vipul Gupta深入解析了GWT的核心功能,以及如何通过GWT生成优化的...
**Java开发人员的Ajax:Google Web Toolkit (GWT) 入门** Google Web Toolkit (GWT) 是一个强大的工具,它允许Java开发人员使用熟悉的Java语言来构建高性能、跨浏览器的Ajax应用程序。GWT通过将Java代码编译为优化...
**GWT (Google Web Toolkit)** 是一款由Google开发的开源工具包,专为Java开发者设计,使得他们能够使用Java语言创建高效、动态且交互性强的Ajax应用。GWT通过将Java代码编译成浏览器可执行的JavaScript和HTML,解决...
Google Web Toolkit(GWT)