BlogJava-Sealyu-随笔分类-GWT

GWT的loading indicator（装载指示器）

seal — Tue, 02 Feb 2010 07:28:00 GMT

本文参考：http://groups.google.com/group/Google-Web-Toolkit/browse_thread /thread/7ed0d179b89fa062/aaeb5391a760adef?lnk=gst&q=indicator+AsyncCallback&rnum=1#aaeb5391a760adef

大部分代码也是参考文中的。

Java代码

package com.javaeye.dengyin2000.truck.client.server;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.rpc.AsyncCallback;
public abstract class AsyncCallbackWithStatus implements AsyncCallback {
private static LoadingIndicator loadingIndicator;
public static final void setLoadingIndicator(LoadingIndicator indicator) {
loadingIndicator = indicator;
}
public AsyncCallbackWithStatus() {
setLoading(true);
}
public final void onSuccess(Object object) {
setLoading(false);
onSuccessInternal(object);
}
public final void onFailure(Throwable throwable) {
setLoading(false);
onFailureInternal(throwable);
}
protected abstract void onSuccessInternal(Object object);
protected void onFailureInternal(Throwable throwable){
Window.alert("服务器没有响应,请稍后再试!");
}
private void setLoading(boolean isLoading) {
if (null != loadingIndicator) {
if (isLoading) {
loadingIndicator.show();
} else {
loadingIndicator.hide();
}
}
}
interface LoadingIndicator {
void show();
void hide();
}
}

package com.javaeye.dengyin2000.truck.client.server;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.rpc.AsyncCallback;
public abstract class AsyncCallbackWithStatus implements AsyncCallback {
private static LoadingIndicator loadingIndicator;
public static final void setLoadingIndicator(LoadingIndicator indicator) {
loadingIndicator = indicator;
}
public AsyncCallbackWithStatus() {
setLoading(true);
}
public final void onSuccess(Object object) {
setLoading(false);
onSuccessInternal(object);
}
public final void onFailure(Throwable throwable) {
setLoading(false);
onFailureInternal(throwable);
}
protected abstract void onSuccessInternal(Object object);
protected void onFailureInternal(Throwable throwable){
Window.alert("服务器没有响应,请稍后再试!");
}
private void setLoading(boolean isLoading) {
if (null != loadingIndicator) {
if (isLoading) {
loadingIndicator.show();
} else {
loadingIndicator.hide();
}
}
}
interface LoadingIndicator {
void show();
void hide();
}
}

Java代码

package com.javaeye.dengyin2000.truck.client.server;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.WindowResizeListener;
import com.google.gwt.user.client.ui.HTML;
import com.google.gwt.user.client.ui.PopupPanel;
import com.javaeye.dengyin2000.truck.client.server.AsyncCallbackWithStatus.LoadingIndicator;
public class LoadingStatus implements LoadingIndicator, WindowResizeListener {
private PopupPanel popup;
public LoadingStatus() {
popup = new PopupPanel();
popup.add(new HTML(" Loading, please wait...

"));

placeIndicator();

Window.addWindowResizeListener(this);

// set the style name for greater control over the

}

public void show() {

popup.show();

}

public void hide() {

popup.hide();

}

private void placeIndicator(){

popup.setPopupPosition(Window.getClientWidth() - 120, 10);

}

public void onWindowResized(int width, int height) {

placeIndicator();

}

package com.javaeye.dengyin2000.truck.client.server;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.WindowResizeListener;
import com.google.gwt.user.client.ui.HTML;
import com.google.gwt.user.client.ui.PopupPanel;
import com.javaeye.dengyin2000.truck.client.server.AsyncCallbackWithStatus.LoadingIndicator;
public class LoadingStatus implements LoadingIndicator, WindowResizeListener {
private PopupPanel popup;
public LoadingStatus() {
popup = new PopupPanel();
popup.add(new HTML(" Loading, please wait..."));
placeIndicator();
Window.addWindowResizeListener(this);
// set the style name for greater control over the
}
public void show() {
popup.show();
}
public void hide() {
popup.hide();
}
private void placeIndicator(){
popup.setPopupPosition(Window.getClientWidth() - 120, 10);
}
public void onWindowResized(int width, int height) {
placeIndicator();
}
}

在你的EntryPoint中装配好你的indicator

Java代码

private void prepareLoadingIndicator(){
LoadingStatus status = new LoadingStatus();
AsyncCallbackWithStatus.setLoadingIndicator(status);
}

	private void prepareLoadingIndicator(){
LoadingStatus status = new LoadingStatus();
AsyncCallbackWithStatus.setLoadingIndicator(status);
}

这样调用。

Java代码

private void populateAndReadEnterprisesInfo(){
GWTRPCServiceLocator.getUserService().getEnterprisesInfo(new AsyncCallbackWithStatus(){
protected void onSuccessInternal(Object object) {
EnterprisesInfoGTO gto = (EnterprisesInfoGTO) object;
enterpriseName.setText(gto.getEnterprisesName());
contactName.setText(gto.getContactName());
contactTel.setText(gto.getContactTel());
contactFax.setText(gto.getContactFax());
contactAddress.setText(gto.getContactAddress());
zipCode.setText(gto.getZipCode());
email.setText(gto.getEmail());
siteAddress.setText(gto.getSiteAddress());
}
});
}

seal 2010-02-02 15:28 发表评论

Coding Quickie – display a message while your GWT app loads

seal — Tue, 02 Feb 2010 07:15:00 GMT

The Problem

When a GWT application loads, nothing is actually displayed by your application until all the generated JavaScript has been downloaded by the browser. I was looking for way to display a loading screen while my GWT application was loading, and then remove it once the GWT application is loaded.

The Solution

Since every GWT application has to be embedded in an HTML Host Page, an easy way to display a loading message is to place the loading message in a

in the HTML Host Page. Once all the GWT application JavaScript is done loading, we can have the GWT application remove the loading message by doing some DOM manipulation on the HTML Host Page.

Here is a sample HTML Host Page. The loading message, along with a loading animation image is contained in a

named “Loading-Message”.

<html>
  
<head>
  <title>GWT Applicationtitle>
  <link rel="stylesheet" href="style.css">
head>
  
<body>
  
<script type="text/javascript" language="javascript" src="gwtapp.nocache.js">script>
  
  <h2>GWT Applicationh2>
  
  
  <div id="Loading-Message">
    <img src="loading-animation.gif"  alt="loading"> Loading GWT Application, please wait... 
  div>
  
  
  
  <div id="GWT-Application-Panel">
  div>
  
body>
  
html>

The “Loading-Message”

can be removed from the HTML Host Page using the following line of Java Code:

DOM.setInnerHTML(RootPanel.get("Loading-Message").getElement(), "");

Where would you put this line of code? You can put it anywhere in your GWT application. However, a good place to put it would be in your GWT application EntryPoint class’s onModuleLoad method. You can place it either before or after your application loads the UI elements. Here is an example onModuleLoad method:

public void onModuleLoad() {
  // Remove the loading message
  DOM.setInnerHTML(RootPanel.get(“Loading-Message”).getElement(), “”);
  
  // Get the Application Container div from the DOM
  mainPanel = RootPanel.get(“GWT-Application_Panel”);
  
  // Add GWT UI components
  addWidgetsTo(mainPanel);
}

If you aren’t the artistic type, here is a website you can use to download a customized animation image. Here is another website, where you can select some existing animations to use in your app.

If you haven’t already, please check out our continuing series of GWT Tutorials beginning with Introduction to GWT. You can find the rest of our GWT tutorials here.

seal 2010-02-02 15:15 发表评论

GWT File DownLoad

seal — Mon, 01 Feb 2010 13:21:00 GMT

Per some requests for the File Download opposite of File Upload.

On the server side I implemented the doGet method of the HttpServlet class. I grab the raw data from the database and set it into the response (with the appropriate response type):

BufferedOutputStream output = null;
try {
RawAttachmentItem attachment = attachmentFileDao.retrieveContents(fileid);
ByteArrayInputStream input = new ByteArrayInputStream(attachment.getContents());
int contentLength = input.available();

resp.reset();
resp.setContentType("application/octet-stream");
resp.setContentLength(contentLength);
resp.setHeader("Content-disposition", "attachment; filename=""" + attachment.getFilename()
+ """");
output = new BufferedOutputStream(resp.getOutputStream());
for(int data; (data=input.read()) != -1;) {
output.write(data);
}
output.flush();
}
catch (IOException e) {

e.printStackTrace();
}
finally {
close(output);
}
On the client side, you simple create a new iFrame with its 'src' attribute set to the servlet url for downloading the file:

boolean frameExists = (RootPanel.get("downloadiframe") != null);
if(frameExists) {
Widget widgetFrame = (Widget)RootPanel.get("downloadiframe");
widgetFrame.removeFromParent();
}

NamedFrame frame = new NamedFrame("downloadiframe");
frame.setUrl(GWT.getModuleBaseURL()
+ "/attachmentHandler?action=dl&fileid="
+ model.getFileId());
frame.setVisible(false);

RootPanel.get().add(frame);
When the file gets sent back to the iFrame, the browser will treat it as a file download and prompt you to do something with it (open, save, cancel, etc).

If anyone has questions or requires more detail, please do not hesitate to ask!!

seal 2010-02-01 21:21 发表评论

GWT开发的8个忠告(转载)

seal — Thu, 28 Jan 2010 09:47:00 GMT

Google Web工具包（GWT）确实是使用Java开发Ajax应用的一种诱人方法。如果你在AWT/Swing/SWT和服务器小程序方面有着扎实背景，实际上很容易学会使用GWT，但如果要做的不仅仅是快速原型设计，那么某些难题仍然存在。

忠告之一: 分而治之

众所周知，GWT应用就是Java应用。不过，问题在于是“哪种Java”，我们需要牢记: GWT编译的是与J2SE 1.4.2或者更早版本兼容的Java源代码。另外，只有J2SE 1.4.2 API的子集得到支持，即java.lang和java.util程序包。即便在使用这些程序包时，也要非常认真地研究Google在运行库支持方面的注释，并且牢记相应的忠告: 如果确保从一开始就只使用客户端代码中的可转换类，那么就可以避免许多问题。为了及早发现问题，只要在宿主模式（hosted mode）下运行，就要对照JRE仿真库检验代码。因而，第一次运行应用时，就会发现大部分不支持的库。所以，要及早并且经常运行。

现在，笔者给出的忠告就是“分而治之”，具体意思就是一开始就把应用代码分成三个不同的部分: 客户端代码、RPC相关代码和服务器端代码，然后构建相应的Eclipse项目，从而完成任务。这样一来，就可以利用不同的Java语言版本，用于客户端和服务器部分。笔者用Java 5构建了应用的服务器部分（服务器小程序代码）; 但如果使用Mustang版本，那么在本文的代码片段中（由于篇幅有限，本文所涉及的程序代码可通过以下链接查询: http://blog.ccw.com.cn/article-htm-itemid-17924-type-blog.html），可以用Java 6取代Java 5。即便在服务器端仍然使用J2SE 1.4.2，这种分治法也可以在将来提供更大的灵活性，明确分离代码（“分离问题”），而不会在GWT宿主模式下限制调试操作。如果所有部分都在一个 Eclipse项目中，则需要非常严谨，特别是在服务器端上; 不然，就会出现编译或者运行问题。

需要使用特殊的命名约定，这样可以清楚确认不同项目，并且简化部署脚本。可以使用譬如名为GWT-< ModuleName>的Eclipse工作集来包括所有三个项目。这里，“ModuleName”是识别Web应用的GWT模块的名称。

● 客户端代码: 包含与用户界面相关的代码，可以转换成JavaScript。因此，局限于J2SE 1.4.2和GWT运行时支持。启用每个项目的Eclipse Java编译器设置和“Java编译器错误/警告”，把Java依从级别调整到1.4、把源代码和类文件兼容性调整到1.4（假设不是使用1.4之前的 JDK版本）。该项目的名称是< ModuleName>-client，譬如“JUnit2MR-client”，它依赖于构建路径设置中的< ModuleName>-rpc项目。程序包名称类似< com.company.project>.gwt.< moduleName>.client。

● RPC相关代码: 包含RPC相关的代码，可以转换成JavaScript。该项目遵从与上述客户端代码项目同样的指导准则。项目名是< ModuleName>-rpc，譬如“JUnit2MR-rpc”，它并不依赖于其他任何项目。程序包名称与< ModuleName>-client项目的程序包名称一样。RPC项目包含客户端上的远程接口、RPC期间由GWT进行序列化的数据传输对象，以及全局常量类。

● 服务器端代码: 含有服务器小程序代码，如果服务器端由Java服务器小程序组成的话。如果使用Tomcat 5.5或者Tomcat 6，可以充分利用Java 5+的全部功能。启用每个项目的Eclipse编译器设置，然后使用Java 5编译器设置，依从级别设置为5.0。如果使用Eclipse 3.2.2，那么其新的“源代码→清理”特性也值得配置。该项目名称是< ModuleName>-server，譬如“JUnit2MR-server”，它依赖于构建路径设置中的< ModuleName>-rpc项目。如果按照GWT的默认程序包提案进行编程，程序包名称是< com.company.project>.gwt.< moduleName>.server。

忠告之二: 调试和错误报告不仅仅只有Window.alert ()

在创建GWT应用时，其实可以使用IDE的全部调试功能。但在深入分析何处可能出现错误之前，需要代码的客户端和服务器端都有可靠的异常报告机制。使用try/catch代码块通常可以做到这一点。在客户端的catch代码块中，应当注意这一现实: 默认的方法调用e.printStackTrace()并不是在所有情况下都适合的解决办法。它适用于应用运行在GWT宿主模式下，把文本输出到 Eclipse控制台。不过在Web模式下，要问问自己: “我发送到stdout或者stderr的堆栈跟踪信息和错误信息会在什么地方显示？”一种可能的解决方法就是使用Mat Gessel的调试实用程序类（http://www.asquare.net/gwttk），但是需要浏览器JavaScript控制台来查看Web模式下的结果。

在客户端，建议要做的一件事就是，使用GWT.setUncaughtExceptionHandler()方法，为任何未被发现的异常提供自己的异常处理程序。发现了这几种异常后，有几个选择: GWT.log（message, caught）、Debug.println (message_with_stacktrace); 如果使用Mat Gessel的Debug类，可选择Window.alert（message_with_stacktrace），或者自己定制的错误报告。

视来源而定，会得到“无法装入模块”或者“未被发现的异常被漏过”的信息。笔者编写了一个小小的DebugUtility类，它提供了易于定制的默认客户端错误处理机制（见代码片段1）。

在服务器端，可以使用java.util.logging API或者log4j的广泛功能，具体取决于个人偏好或者项目的约束条件。但要是没有为GWT的 com.google.gwt.user.server.rpc.RemoteServiceServlet类打补丁，对于未被发现、未被检查的异常，只会在堆栈跟踪里面得到提示，指向生成该错误的服务器端类。对于catch()代码块里面发现及报告的被检查的异常，一切都正常。

忠告之三: 当心GWT Shell的“刷新”按钮陷阱

在宿主模式下启动应用时，会在浏览器任务栏上看到“刷新”按钮。要是摁了这个按钮，GWT就会把修改过的Java 客户端源代码重新编译成Java字节码（作为.gwt.-cache/bytecode目录中的.tmp文件），然后重新装入模块。可以使用这个按钮来缩短编辑→编译→调试周期，但在使用这项特性时要牢记几个方面:

● 只有修改过的源代码才重新编译，也就是说，不会为依赖修改过代码的文件生成新的字节码。所以，如果改变了全局常量的值，假设public final int字段的值，不会立即在相关文件看到这个变化。

● 只有修改过的源代码才由GWT重新编译。这意味着，即便Eclipse IDE里面的“Project clean”也帮不上忙; 要影响到所有的相关源代码，譬如通过添加新的空行。

因为这个过程相当笨拙，笔者的忠告是在修改全局常量时遵循以下四个步骤:

1．在相应的源文件里面改变public final constant值;

2．重新编译改变后的源代码;

3．移除整个< ModuleName>-client/.get-cache/bytecode目录，从而删除GWT缓存内容;

4、使用Eclipse里面的“Run as”，重新开始启动应用，从而创建带重新编译后字符码的新GWT缓存内容，这种情况下，最好忽视“刷新”按钮，不过在有些情况下，删除整个< ModuleName>-client/.get-cache/bytecode目录后可以使用“刷新”按钮。

在修改服务器端代码时，GWT字节码缓存内容不受影响。不过，嵌入的Tomcat实例会缓存它，因而在使用“刷新”按钮后，只有重新开始启动应用后最初改变的代码才会得到认可。所以为了安全起见，改变服务器端代码后，最好还是重新开始启动应用。

忠告之四: 在宿主模式下读取Servlet Init参数

在处理数据库系统时，一般不希望服务器小程序源代码中有硬编码的数据库连接参数。通常会从属性文件读取这些参数; 或者更好的是，把它们作为init参数提供给服务器小程序（作为应用的Web.xml文件的一部分）。如果在Web模式下运行应用那没有什么，但在宿主模式下会出问题，这是由于GWT宿主模式下的服务器小程序处理存在限制。

好消息是，只要修改由嵌入式Tomcat实例使用的Web.xml文件，就可以解决这个问题。为此，修改< ModuleName>-client/tomcat/webapps/ROOT/WEB-INF目录中的Web.xml文件（或者必要时创建一个）: 除了嵌入式Tomcat的GWTShellServlet映射外，添加带有init参数的上下文部分。因为上下文信息是“全局性的”，而不是针对特定的服务器小程序，在这里只有一部分的init参数信息，或者使用特殊的命名方案，把参数与不同的服务器小程序联系起来。如果使用这个新的web.xml文件，可以删除src/web/WEB-INF文件夹中的那个旧文件。

在服务器小程序代码中，访问init参数的方式与Web模式下读取它们的方式一样，譬如final String host = getInitParameter("host")。笔者实现这一点的办法就是修改GWT的RemoteServiceServlet，方法跟第二个忠告里面的如出一辙。现在，只要覆盖GenericServlet的getInitParameter()方法，以便使用 getServletContext()，而不是 getServletConfig()。

另一个忠告是，如果在宿主模式下和Web模式下测试不同的服务器代码，略过Gant脚本中的GWT编译部分，从“temp”位置拷贝编译前的JavaScript代码，则可以节省时间。这适用于客户端代码复杂、编译时间超过10分钟的情形。

忠告之五: 在浏览器里面显示PDF文件

大多数实际的Web应用提供了生成及阅读PDF文件的方法。本文假设这个PDF文件由服务器小程序生成，譬如通过 JasperReport。以后只要点击某个超文本链接，就可以在浏览器里面阅读生成的文件。如果想在宿主模式下和Web模式下测试这项特性，建议采取以下步骤:

1．设计一个RPC接口，接受告诉服务器是在宿主模式下运行还是在Web模式下运行的布尔参数。接口方法会返回的字符串应当带有服务器小程序生成的PDF文件的名称（即文件名的最后一部分）。

2．根据代码片段4显示的代码，实现服务器小程序代码，这取决于布尔参数“isScript”。

3．在客户端: 在窗口组件代码里面，使用GWT.isScript()参数调用createXyzPDF()方法，从而生成包含服务器小程序结果字符串的外部超文本链接。

代码片段4显示了接口方法名为createSummaryPDF()的示例。从服务器小程序返回的字符串是“summary.pdf”。

这当然不是处理这种情况的惟一办法，但目前适用于我们这个示例。请注意: 在宿主模式下启动应用之前，必须在< ModuleName>-client project's src/…/public文件夹中至少创建一个虚假的“summary.pdf”文件（文件名从服务器小程序返回）。不然，在浏览器中点击了超文本链接后，GWT试图读取PDF文件时，会出现“HTTP 404－找不到网页”的信息。

忠告之六:力求获得无状态服务器

设计客户机/服务器Web应用时要考虑的一个关键问题就是: 如何处理会话和状态管理？在Web 1.0时代，答案很显然: 会话和状态管理是一个服务器问题。但若使用GWT，就有另一个选择。服务器再也不是只提供HTML内容的“web”服务。使用GWT RPC，服务器现在可以支持只提供结构化数据的服务———在本文示例中，服务由服务器小程序实现。

那么，GWT对会话和状态管理有何影响呢？GWT的技术领导Bruce Johnson在去年的JAOO大会上指出，若使用GWT，会话管理现在应当是一个客户端问题。附图显示的幻灯片评述了种种变化。

在本文的JUnit2MR GWT应用中，笔者一开始使用传统方法来处理服务器小程序中的会话状态。但这是相当笨拙的任务，于是寻找另一种选择。因此，看了Bruce的幻灯片后，决定重新设计整个应用。但这一步需要改变所有RPC接口、缓存策略; 最重要的是，还要改变所有的服务器小程序。因此笔者的建议是: 及早考虑在何处实施会话和状态管理，不妨试试Bruce Johnson的诀窍。最终会收到成效。

由于这个决定，客户端对象之间有了更多的联系。于是笔者使用了有名的GoF中介者模式（mediator pattern）。不过，在客户端有一些JDK 1.4和GWT运行库的限制。因此，重新实现了PropertyChangeEvent类和中介者支持，来处理监听程序注册和消息广播。

忠告之七: 使用Selenium实现GWT Web测试的自动化

Selenium是一种开源工具，它能够轻松测试包含丰富、互动的客户端内容的Web应用。所以，它非常适用于测试像用GWT创建的应用那样的Ajax应用。

当然，GWT里面仍有JUnit和JUnit支持功能，特别是针对系统的异步部分。这里着重介绍 Selenium，因为它易于使用（至少它的IDE是这样）、功能强大。最后但并非最不重要的一点是，它与JUnit有许多共同之处。可以使用 Selenium IDE来记录GUI用例，然后使用其“Play”特性来运行记录下来的操作。每个操作之后跟着类似JUnit的“assert”命令，负责确认页面上的某些文本。该IDE是Firefox的扩展插件，但务必要使用最新版本的Selenium: Selenium IDE 0 .8 .7，因为它包含了“waitFor…”命令的重大修正版。说到测试Ajax应用，这些命令以及“pause”命令非常重要。

忠告之八: 使用Groovy Gant脚本部署应用

在GWT宿主模式下试运行应用，这确实很好，但把应用部署到应用服务器上或者类似Tomcat的服务器小程序容器上，GWT的真实功能才会体现出来。在这一步，需要创建一个war文件，它会自动拷贝到Tomcat“webapps”目录。当然，可以使用Ant和 ant-contrib进行所有必要的准备、编译、拷贝及其他任务。但由于Ant脚本变得更复杂后， ant-contrib控制结构和属性regex处理有一点笨拙。于是可以使用集Groovy和Ant两者之所长的Gant。安装Groovy和Gant 用不了10分钟，然后，使用来自“build.properties”文件的普通属性，即可定制“build.gant”脚本。（小黑编译）

（计算机世界报 2007年6月25日第24期 B22、B23）

seal 2010-01-28 17:47 发表评论

GWT Tutorial – Transport Objects over RPC – GWT Object Serialization

seal — Fri, 22 Jan 2010 09:33:00 GMT

摘要: Introduction GWT is a Java framework that allows you to easily develop AJAX (Asynchronous JavaScript and XML) based web applications. This tutorial will teach you how to create and use Serializable... 阅读全文

seal 2010-01-22 17:33 发表评论

GWT Right-click Context Menu

seal — Wed, 20 Jan 2010 01:21:00 GMT

The Google Web Toolkit has been out for a while now, and yet there is still basic functionality that is missing from the toolkit. Don’t get me started on the lack of draggable/resizable columns for the FlexTable, because that’s a rant and a half. Given that GWT’s event handling model isn’t bad, you’d think they’d have included from the get-go the ability to handle right-clicks and bringing up a context menu or popup menu. Well, even with 1.6 on the doorstep it seems they forgot again or just don’t care. Now some people will spout out “web apps don’t need or shouldn’t have right-clicks handled or context menus overridden”……and for those I say STFU! Web apps are used for more than just banking, news, forums and dare I say blogs. The browser is becoming the new medium for running applications and just because an application is running in a browser doesn’t mean we should limit functionality. That’s about as narrow minded as saying that we’ve only had one mouse button for this long, why add a second one? Duh!

Anyway, enough with the blabbing. I’ve put together a simple example to add a right click context menu and override the default browser context menu using GWT.

In the box below you can try it out, right-click in there and you can demo it.

In case the iframe doesn’t show up in your browser you can see and try the example here.
Now here’s how it’s done.

I used a DeckPanel to switch between several panels. The popup context menu is used to choose. To allow the DeckPanel to catch the right-click event (and you can also listen for double-clicks and several other things) I extended the DeckPanel. For simplicity I added “Adv” (Advanced) in front of the several classes I’ve extended so this one will be AdvDeckPanel. The first thing to do in the constructor is add sinkEvents(). Then we’ll override onBrowserEvent() in the class. Here’s the code:

public AdvDeckPanel() {



super();



sinkEvents(Event.ONMOUSEUP | Event.ONDBLCLICK | Event.ONCONTEXTMENU);



}







public void onBrowserEvent(Event event) {



GWT.log("onBrowserEvent", null);



event.cancelBubble(true);//This will stop the event from being propagated



event.preventDefault();



switch (DOM.eventGetType(event)) {



case Event.ONMOUSEUP:



if (DOM.eventGetButton(event) == Event.BUTTON_LEFT) {



GWT.log("Event.BUTTON_LEFT", null);



listener.onClick(this, event);



}







if (DOM.eventGetButton(event) == Event.BUTTON_RIGHT) {



GWT.log("Event.BUTTON_RIGHT", null);



listener.onRightClick(this, event);



}



break;



case Event.ONDBLCLICK:



break;







case Event.ONCONTEXTMENU:



GWT.log("Event.ONCONTEXTMENU", null);



break;







default:



break; // Do nothing



}//end switch



}

Notice the two lines in onBrowserEvent():
event.cancelBubble(true);
event.preventDefault();

These are the two lines that tell the browser not to show it’s default context popup menu. Also note that overriding the default context menu doesn’t work in all browsers, I’m not sure if this is a bug in GWT. If you’re using firefox then you’ll have no problems, with IE you may need to add the following to your html:

Other than that there’s just a switch statement that checks the event type, in this case we’re interested with ONMOUSEUP, and we’ll call the listener’s onClick() or onRightClick() based on the Event’s fields.

AdvDeckPanel also has a reference to AdvClickListener which looks like:

public interface AdvClickListener extends ClickListener {



void onClick(Widget sender, Event event);



void onRightClick(Widget sender, Event event);



}

This reference is basically the same as ClickListener, but has a separate method to handle the right-click. I also pass the Event object so I can get the x and y from the click so the context menu shows up at that location instead of the top-left of the screen.

AdvDeckPanel implements AdvClickNotifier which does the same thing as GWT’s SourcesClickEvents interface, but handles the AdvClickListener instead.

public interface AdvClickNotifier {



public void addClickListener(AdvClickListener listener);



public void removeClickListener(AdvClickListener listener);



}

So, once you have your widget (in this case the AdvDeckPanel) and the listeners set up to handle the right-click, then we add in the code to build the popup menu and commands that go with it. I put all of this in the EntryPoint. I have three widgets (panels) and a Command for each like this:

private AdvDeckPanel deckPanel = new AdvDeckPanel();



final private PopupPanel popupPanel = new PopupPanel(true);



private VerticalPanel defaultPanel = new VerticalPanel();



private SimplePanel imagePanel = new SimplePanel();



private SimplePanel sponserPanel = new SimplePanel();







Command showAlertCommand = new Command() {



public void execute() {



deckPanel.showWidget(0);



popupPanel.hide();



Window.alert("Hope this example helps.");



}



};







Command showImageCommand = new Command() {



public void execute() {



deckPanel.showWidget(1);



popupPanel.hide();



}



};







Command showSponserCommand = new Command() {



public void execute() {



deckPanel.showWidget(2);



popupPanel.hide();



}



};

A Command is called when the MenuItem is clicked.

Now the code to build the menu, link the commands, and handle the right-click:

private void createPopupMenu() {



MenuBar popupMenuBar = new MenuBar(true);



MenuItem alertItem = new MenuItem("Show alert", true, showAlertCommand);



MenuItem imageItem = new MenuItem("Show Oliver ", true, showImageCommand);



MenuItem sponserItem = new MenuItem("Show sponser ", true, showSponserCommand);







popupPanel.setStyleName("popup");



alertItem.addStyleName("popup-item");



imageItem.addStyleName("popup-item");



sponserItem.addStyleName("popup-item");







popupMenuBar.addItem(alertItem);



popupMenuBar.addItem(imageItem);



popupMenuBar.addItem(sponserItem);







popupMenuBar.setVisible(true);



popupPanel.add(popupMenuBar);



}







public void onRightClick(Widget sender, Event event) {



int x = DOM.eventGetClientX(event);



int y = DOM.eventGetClientY(event);



popupPanel.setPopupPosition(x, y);



popupPanel.show();



}

Lastly, to make the menu actually look like a popup menu I modified the CSS like so:

.popup {



background-color: gray;



border-color: gray gray gray gray;



border-width: 1px 3px 3px 1px;



border-style: solid solid solid solid;



}







.popup-item {



font-weight: normal;



font-size: 80%;



}

What this does is makes it so the border isn’t the thick default GWT blue, and uses a thin border with the right and bottom borders a bit thicker. This gives the popup that shadowed look.

A couple of books worth checking out are: GWT in Actionand GWT in Practice
Here’s the source and more links.

ShareThis

Tags: GWT, Java, web-dev

This entry was posted on Tuesday, February 17th, 2009 at 8:12 pm and is filed under GWT, Java, Programming. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

seal 2010-01-20 09:21 发表评论

Debug Google Web Toolkit with Struts/Tiles

seal — Fri, 15 Jan 2010 04:05:00 GMT

Ok, your fresh new GWT user interface is ready, it works great with GWTShell's internal Tomcat and with server-side stubs, but as you compile and deploy it on your web-app there are problems.

Of course you can debug with a JavaScript debugger (Venkman or Microsoft's Script Debugger), but generated JavaScript is really complex, for people and for those unstable debuggers.

But, wait, we have a debugger, is our state-of-the-art debugger, integrated in our IDE and GWT can use it, if only you could run client into the Shell and server side into your preferred development envinroment !!!

We could deploy our web-app into the integrated Tomcat, but it's not easy to do (and an hell to mantain) and also can be that you don't want (or you can't) use Tomcat for your Web Application.

I think that everyone should do his work, so let's Google Shell do the client, and your application server run the server side code. It's not difficult, you only need to follow these few steps.

First thing do to it's a little (I promise really little and only one) change to your GWT code, so that the client will always use absolute urls for your web-app, allowing us to use the ContextPath without problems, whatever it's the relative position of your Google client inside your root context.

To do that we have to register this way the end-point of the remote service:

	endpoint.setServiceEntryPoint( GWT.getModuleBaseURL()+"/myRemoteService" );

now we must also remember to change our servlet path inside the GWT module file (*.gwt.xml) putting the complete service name at the top, in this case /mypackage.google.GWTClient:

No other change to your client side code, I promise again.

Now let's start to modify the web-app to run our services. The first thing is to include in our WEB-INF/lib the gwt-user.jar.

Unfortunately the one supplied by Google doesn't work, because it includes the javax.servlet.* classes to simplify the automatic generation of development projects.

We must strip that out (with an ANT Task obviously):

	<property name="original.gwt.jar.lib" value="<path-to>"gwt-user.jar" />
<property name="temp.dir" value="./tempDir"/>
<target name="stripGWT-lib">
<mkdir dir="${temp.dir}"/>
<unjar src="${original.gwt.jar.lib}" dest="${temp.dir}">
<patternset>
<exclude name="javax/**/*.*"/>
</patternset>
</unjar>
<jar destfile="${web-inf.lib.dir}/gwt-user.jar" basedir="${temp.dir}"/>
<delete dir="${temp.dir}"/>
</target>

Now we can also add that to our IDE build-path.

Everything is ready to begin the configuration of our web-app, beginning with the registration of the remote service inside web.xml, remembering the module name we used in the *.gwt.xml file:

	<servlet>
<servlet-name>MyRemoteService</servlet-name>
<servlet-class>mypackage.google.server.MyRemoteServiceImpl</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>MyRemoteService</servlet-name>
<url-pattern>/mypackage.google.GWTClient/myRemoteService</url-pattern>
</servlet-mapping>

We don't have yet finished, we must also "simulate" one of the call implemented by GWTServlet, registering its path into web.xml and with the help of a JSP::

	<servlet>
<servlet-name>gwt-hosted</servlet-name>
<jsp-file>/gwt-hosted.jsp</jsp-file>
</servlet>
<servlet-mapping>
<servlet-name>gwt-hosted</servlet-name>
<url-pattern>/mypackage.google.GWTClient/gwt-hosted.html</url-pattern>
</servlet-mapping>

the gwt-hosted.jsp JSP it's only a simple script with a row of scriptlet that export our web-app context to the GWT client::

	<html>
<body>
<script>
var $wnd = parent;
var $doc = $wnd.document;
var q = location.search.substring(1);
var i = q.lastIndexOf("=");
var $moduleName = q;
var $moduleBaseURL = "<%= request.getContextPath()%>/" + $moduleName;
if (i != -1) {
$moduleBaseURL = q.substring(0, i);
$moduleName = q.substring(i+1);
}
parent.__gwt_initHostedModeModule(this, $moduleName);
</script>
</body>
</html>

We did it !!!!The good thing is that we don't even have to "Compile" our JavaScript in the destination context during debug. Infact the GWT Shell callback will always call our Java classes and not the JavaScript code.

So we have together maximum flexibility on client-side project for our debugging purposes, and only at the very finish of the development cycle we will produce the JavaScript code.

Could we be in a better position as web developer ?

Now some tips about GWT's Shell:

Are we in debug mode or not ? The answer is yes, so we should configure the Shell log to a more verbose level (if you have used GWT.log in your code):

	-logLevel ERROR|WARN|INFO|TRACE|DEBUG|SPAM|ALL

We should also disable the integrated Tomcat:

	-noserver

and configure the Shell to generate JavaScript code directly inside our web-app project:

	-out

Also can be useful to open directly the Shell browser to our web-app at startup, simply putting the http url as the last parameter of the command line that start the Shell.

But what if all this it's not enough to solve our problems, may be because the generated JavaScript is not working fine ? Well, together with much luck, we can try to switch the generation code to DETAILED:

 -style DETAILED

and use traditional JavaScript debugging tecnique.

Integrate Google Web Toolkit with Struts/Tiles

Ok, now everything it's integrated with your web-application and you're in love with GWT. You did really a great work, a prototype that it's working fine and looks pretty. But when time comes that you must put it into your old fashioned Struts/Tiles web-application it stops working and sure you can't write everything from scratch again, but do a step after another and start with a single functionality done with GWT.

Well, I don't know you, but I suffered from this problem, but at the end, thank to some little tips, I was able to let Struts and GWT not only to live together, but to cooperate to make my application look better.

It was like having an old fashioned B&W TV Set and a new HDMI on the same bench, side by side !!!

Well, to achieve this, we have to do some simple steps:

- In web.xml add another Struts action mapping, this time it must be extension based, for instance I choosed *.gwt:

		<servlet-mapping>
<servlet-name>action</servlet-name>
<url-pattern>*.gwt</url-pattern>
</servlet-mapping>

- In struts-config.xml write the new Struts action that will render the GWT page, taking care to put at the top of the path the complete GWT's module name, so that the script will be able to find internal files with no problems:

        <action path="/mypackage.google.GWTClient/GWTClient"
forward=".my.gwt.application"/>

- (only if you use Tiles as view)Add a Tiles definition that will include GWT's (in my example into the body of the layout JSP):

    <definition name=".my.gwt.application" extends=".mainLayout">
<put name="title"  value="Google Web Toolkit in Tiles" />
<put name="body"
value="/mypackage.google.GWTClient/GWTClient.html" />
<put name="header"   value="/WEB-INF/jsp/header.jsp" />
</definition>

- (if you used filters for Struts Action mapping)Update your filters so that they will be able to do their work also with the new GWT module:

	<filter-mapping>
<filter-name>AuthenticationFilter</filter-name>
<url-pattern>*.gwt</url-pattern>
</filter-mapping>

That's all, the game is made.

P.S.:the same applies if you used Spring MVC.

Integrating it also with Spring/Hibernate

The life-cycle of a GWT's Service is managed by your servlet-container, because as a design choice Google opted for the portabily and simplicity of the Servlet model.
In our code this mean that our service implementations will all inherit (indirectly) from HttpServlet. This means also that to integrate them in our Spring managed container we have to play dirty. I decided to use static property inside our Google Service implementation, so that Spring will be able to assign it at startup time.
Pratically, if we want to inject something in GWT's service mypackage.google.server.MyRemoteServiceImpl's myProperty property, it's enough to declare it static:

	private static MyProperty myProperty;

Then to let Spring works, we also need an instance setter:

	public void setMyProperty(MyProperty mp) // remember, myProperty is static, you can't use this
{
myProperty = mp;
}

In our applicationContext.xml we can inject the myPropertyBean Bean simply with a dummy bean declaration of the GWT implementation class:

	<bean id="myGWTService" class="mypackage.google.server.MyRemoteServiceImpl">
<property name="myProperty"><ref local="myPropertyBean"/></property>
</bean>

This works because at startup Spring will instantiate an instance of the MyRemoteServiceImpl class, this instance will never be used by the servlet-container, but the bean property is contained into a static variable, so every instance will have it !!!
Now, if your business bean myPropertyBean uses Hibernate and you usually use Spring's OpenSessionInViewFilter/Interceptor to manage your Session, you need a further step and use an AOP Interceptor. But we are lucky in this, because all is done by Spring out-of-the-box only with few lines of configuration::

	<!-- Our Propagation policy -->
<bean id="matchAllWithPropReq"
class="org.springframework.transaction.interceptor.MatchAlwaysTransactionAttributeSource">
<property name="transactionAttribute"><value>PROPAGATION_REQUIRED</value></property>
</bean>
<!-- Match them all interceptor -->
<bean id="matchAllTxInterceptor" class="org.springframework.transaction.interceptor.TransactionInterceptor">
<property name="transactionManager"><ref bean="transactionManager"/></property>
<property name="transactionAttributeSource"><ref bean="matchAllWithPropReq"/></property>
</bean>
<!-- This AutoProxyCreator bean will let us declaratively decide which beans will have the transaction
managed with PROPAGATION_REQUIRED -->
<bean id="autoProxyCreator" class="org.springframework.aop.framework.autoproxy.BeanNameAutoProxyCreator">
<property name="interceptorNames">
<list>
<idref local="matchAllTxInterceptor"/>
<idref bean="myHibernateInterceptor"/>
</list>
</property>
<property name="beanNames">
<list>
<idref local="myPropertyBean"/>
</list>
</property>
</bean>
<!--  This is the bean that, if it doesn't exist, create and then close Hibernate Session -->
<bean id="myHibernateInterceptor" class="org.springframework.orm.hibernate3.HibernateInterceptor">
<property name="sessionFactory"><ref local="sessionFactory"/></property>
</bean>
<bean id="transactionManager" class="org.springframework.orm.hibernate3.HibernateTransactionManager">
<property name="sessionFactory"><ref local="sessionFactory"/></property>
</bean>

With this configuration, if myPropertyBean is used outside a transaction scope, a new Hibernate transaction will be created and assigned to it. In our case this is also the span of the Hibernate's Session (thanks to HibernateTransactionManager). The myHibernateInterceptor will also take charge of eventually close the Session at the end of the business method.

continue here...

seal 2010-01-15 12:05 发表评论

Integrating GWT with Spring Security

seal — Fri, 15 Jan 2010 01:39:00 GMT

摘要: Yesterday, I wrote about How to do cross-domain GWT RPC with a ProxyServlet. Today I'll be discussing how to modify the ProxyServlet to authenticate with Spring Security. For the application I'm work... 阅读全文

seal 2010-01-15 09:39 发表评论