HowTO Build the FiRst GWT Application On Tomcat

 

 

 

初试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

       <module> <!-- Inherit the core Web Toolkit stuff. --> <inherits name='com.google.gwt.user.User'/> <!-- 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'/> --> <!-- Other module inherits --> <servlet path="/loginService" class="com.server.LoginDeskTopImpl" /> <!-- Specify the app entry point class. --> <entry-point class='com.client.LoginDeskTop'/> </module>

 

       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

       <!-- ==================================================== --> <!-- Build file for our first web application --> <!-- build.xml, Sunday, July 07, 2002 --> <!-- Author: Deepak Kumar --> <!-- Email : deepak@roseindia.net --> <!-- Url : http://www.roseindia.net --> <!-- ==================================================== --> <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"/> <!-- Create Web-inf and classes directories --> <mkdir dir="${warDir}/WEB-INF"/> <mkdir dir="${warDir}/WEB-INF/classes"/> <!-- Create Meta-inf and classes directories --> <mkdir dir="${earDir}/META-INF"/> </target> <!-- Main target --> <target name="all" depends="init,build,buildWar,buildEar"/> <!-- Compile Java Files and store in /build/src directory --> <target name="build" > <javac srcdir="${src}" destdir="${classdir}" debug="true" includes="**/*.java" /> </target> <!-- Create the War File --> <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> <!-- Create war file and place in ear directory --> <jar jarfile="${earDir}/${warFile}" basedir="${warDir}" /> </target> <!-- Create the War File --> <target name="buildEar" depends="init"> <copy todir="${earDir}/META-INF"> <fileset dir="${deploymentdescription}" includes="application.xml" /> </copy> <!-- Create ear file and place in ear directory --> <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之类的再分析吧...