HowTO Build the FiRst GWT Application On Tomcat

原创于 2009-02-27 23:36:00 发布 · 991 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

WEB

本文介绍使用GWT（Google Web Toolkit）构建Ajax应用的过程，涵盖环境搭建、代码编写、编译部署及常见错误处理。

初试GWT(Google Web Toolkit)，废了老大尽了-, - 今天终于搞定了^_^ 傻瓜式流程如下，希望感兴趣的朋友共同讨论

一. GWT 简介

基于Java的一款Ajax应用程序开发工具. 简单来说，将我们熟悉的java code编译成javascript. 目的是构建运行在浏览器中的桌面般的应用程序.

我更喜欢用它来做些小的表现层组件.

二. 准备工作 -- > Build

1. 需下载的东东: JDK, Apache Tomcat, Ant, GWT(Google Web Toolkit), 很好找，我就不把链接放上了，看着乱...

2. 工具: Eclipse

3. 建立开发环境：http://code.google.com/webtoolkit/gettingstarted.html

( 用projectCreator和applicationCreator建目录，用loginStart-compile生成js与html，用loginStart-shell做host test, 前两个文件均在下载的GWT目录下可找到，后两个文件通过前两个生成而得， XX-shell & XX-compile)

4. 一小点废话

我们的程序一般都要和服务器打交道，简单的Login也不例外。尽管最后生成了一个不起眼的js文件和一些七七八八的东西。GWT为我们提供了客户端向服务器发送远程过程调用(RPC)的完美支持。

通过GWT实现RPC需要5个步骤：

创建一个远程服务接口-->创建一个对应的异步接口-->构建一个实现远程服务接口的远程servlet(真绕口)-->在应用程序的配置文件中声明该服务-->实例化上述接口一个实例，并通过它生成RPC调用。

5. 开始代码

直接用图+代码的方式

要把GWT相关的几个jar包放进项目里。LoginService(远程服务接口), LoginServiceAsyn(对应的异步接口), LoginDeskTopImpl(远程servlet)

NOTE: 对应异步接口名字：接口+Asyn，格式固定，放在同一目录下

DeskTopApp.gwt.xml

LoginService

package com.client; import com.google.gwt.user.client.rpc.RemoteService; public interface LoginService extends RemoteService{ public boolean isValidLogin(String username, String pwd); }

LoginServiceAsyn

package com.client; import com.google.gwt.user.client.rpc.AsyncCallback; public interface LoginServiceAsync { public void isValidLogin(String username, String pwd, AsyncCallback callback); }

LoginDeskTopImpl

package com.server; import com.client.LoginService; import com.google.gwt.user.server.rpc.RemoteServiceServlet; public class LoginDeskTopImpl extends RemoteServiceServlet implements LoginService{ private static final String VALID_USERNAME = "testuser"; private static final String VALID_PWD = "p@ssword1"; public LoginDeskTopImpl(){ System.out.println("Construct"); } public boolean isValidLogin(String username, String pwd) { // TODO Auto-generated method stub return username.equals(VALID_USERNAME) && pwd.equals(VALID_PWD); } }

LoginDeskTop

package com.client; import com.google.gwt.core.client.EntryPoint; import com.google.gwt.core.client.GWT; import com.google.gwt.user.client.Window; import com.google.gwt.user.client.rpc.AsyncCallback; import com.google.gwt.user.client.rpc.ServiceDefTarget; import com.google.gwt.user.client.ui.Button; import com.google.gwt.user.client.ui.ClickListener; import com.google.gwt.user.client.ui.Grid; import com.google.gwt.user.client.ui.Label; import com.google.gwt.user.client.ui.PasswordTextBox; import com.google.gwt.user.client.ui.RootPanel; import com.google.gwt.user.client.ui.TextBox; import com.google.gwt.user.client.ui.Widget; //import com.server.LoginService; public class LoginDeskTop implements EntryPoint{ // Web Object final Grid loginGrid = new Grid(3, 2); final Label loginName = new Label("Login Name"); final Label password = new Label("Password"); final TextBox loginTextBox = new TextBox(); final PasswordTextBox pwdTextBox = new PasswordTextBox(); final Button loginButton = new Button("Login"); public void onModuleLoad() { // Login Page loginGrid.setWidget(0, 0, loginName); loginGrid.setWidget(0, 1, loginTextBox); loginGrid.setWidget(1, 0, password); loginGrid.setWidget(1, 1, pwdTextBox); loginGrid.setWidget(2, 1, loginButton); loginGrid.setVisible(true); loginButton.addClickListener(new SubmitListener()); RootPanel.get().add(loginGrid); } private class SubmitListener implements ClickListener{ public void onClick(Widget sender) { // TODO Auto-generated method stub LoginServiceAsync ls = (LoginServiceAsync) GWT.create(LoginService.class); ServiceDefTarget target = (ServiceDefTarget) ls; Window.alert(GWT.getModuleBaseURL() + "loginService"); target.setServiceEntryPoint(GWT.getModuleBaseURL() + "loginService"); ls.isValidLogin(loginTextBox.getText(), pwdTextBox.getText(), new AsyncCallback(){ public void onFailure(Throwable caught) { // TODO Auto-generated method stub Window.alert("rpc call failed:" + caught.getMessage()); } public void onSuccess(Object result){ // TODO Auto-generated method stub if (((Boolean)result).booleanValue() == true){ Window.alert("Login Success"); }else{ Window.alert("Username/password don't match"); } } }); } } }

6. 生成js与html与其他...

用XX-complie文件

@java -Xmx256M -cp "%~dp0/src;%~dp0/bin;D:/My document/Study/Java/jar/gwt-windows-1.5.3/gwt-user.jar;D:/My document/Study/Java/jar/gwt-windows-1.5.3/gwt-dev-windows.jar" com.google.gwt.dev.GWTCompiler -out "%~dp0/www" %* com.DeskTopApp pause

7 build

build.xml

<project name="GWT Ant Build" default="all" basedir="."> <target name="init"> <property name="dirs.base" value="${basedir}"/> <property name="classdir" value="${dirs.base}/bin"/> <property name="src" value="${dirs.base}/src"/> <property name="lib" value="${dirs.base}/lib"/> <property name="deploymentdescription" value="${dirs.base}"/> <property name="warFile" value="GWTTest.wa"/> <property name="earFile" value="GWTTest.ear"/> <property name="web" value="${dirs.base}/www/com.DeskTopApp/"/> <property name="webTo" value="Component/GWT/DeskTopApp/"/> <property name="earDir" value="${dirs.base}/dlist/ear"/> <property name="warDir" value="${dirs.base}/dlist/war"/>  <mkdir dir="${warDir}/WEB-INF"/> <mkdir dir="${warDir}/WEB-INF/classes"/>  <mkdir dir="${earDir}/META-INF"/> </target>  <target name="all" depends="init,build,buildWar,buildEar"/>  <target name="build" > <javac srcdir="${src}" destdir="${classdir}" debug="true" includes="**/*.java" /> </target>  <target name="buildWar" depends="init"> <copy todir="${warDir}/WEB-INF/classes/"> <fileset dir="${classdir}" includes="**/*.class" /> </copy> <copy todir="${warDir}/WEB-INF/lib/"> <fileset dir="${lib}" includes="**/gwt-servlet.jar" /> </copy> <copy todir="${warDir}/WEB-INF"> <fileset dir="${deploymentdescription}" includes="web.xml" /> </copy> <copy todir="${warDir}/${webTo}"> <fileset dir="${web}" includes="**/*.*" /> </copy>  <jar jarfile="${earDir}/${warFile}" basedir="${warDir}" /> </target>  <target name="buildEar" depends="init"> <copy todir="${earDir}/META-INF"> <fileset dir="${deploymentdescription}" includes="application.xml" /> </copy>  <jar jarfile="${dirs.base}/${earFile}" basedir="${earDir}" /> </target> </project>

所需jar包: gwt-servlet.jar

要将生成的www/com.DeskTopApp/下所有文件考到.war中

（因为生成了包括js与html等一大坨子的数据，因此此build将文件放在${warDir}/${webTo}下）

NOTE:我们把js文件放在了${warDir}/${webTo}下, 而在LoginDeskTop中,

target.setServiceEntryPoint(GWT.getModuleBaseURL() + "loginService");

因此，我们写web.xml时要注意

<url-pattern>/Component/GWT/DeskTopApp/loginService</url-pattern>

web.xml (此文件需要自己写，当然要在build前完成)

<?xml version="1.0" encoding="ISO-8859-1"?> <!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.2//EN" "http://java.sun.com/j2ee/dtds/web-app_2_2.dtd"> <web-app> <servlet> <servlet-name>LoginService</servlet-name> <servlet-class>com.server.LoginDeskTopImpl</servlet-class> </servlet> <servlet-mapping> <servlet-name>LoginService</servlet-name> <url-pattern>/Component/GWT/DeskTopApp/loginService</url-pattern> </servlet-mapping> </web-app>

将生成的war文件放在Tomcat下，启动Tomcat

键入http://localhost:8080/GWTTest/Component/GWT/DeskTopApp/DeskTopApp.html

或者在根目录下建个index.html, 搞个iframe src这个文件，输入http://localhost:8080/GWTTest/

验证结果吧！

三. 常见错误

XMLHTTP Status 404, post失败，可能是没找到servlet 检查web.xml是否正确，com.server.LoginDeskTopImpl是否在WEB-INF class下

XMLHTTP Status 500, post找到了，出现internal错误，有可能需要的jar文件没有找到等，看看WEB-INF下/lib里是否有gwt-servlet.jar或者其他要引入的包

其他...看看log之类的再分析吧...

标签

#gwt #build #application #servlet #string