Google Web Toolkit 入门 _watt toolkit google-CSDN博客

Created directory C:/HelloWorld/src
Created directory C:/HelloWorld/src/org/vivianj/gwt
Created directory C:/HelloWorld/src/org/vivianj/gwt/client
Created directory C:/HelloWorld/src/org/vivianj/gwt/public
Created file C:/HelloWorld/src/org/vivianj/gwt/HelloWorld.gwt.xml
Created file C:/HelloWorld/src/org/vivianj/gwt/public/HelloWorld.html
Created file C:/HelloWorld/src/org/vivianj/gwt/client/HelloWorld.java
Created file C:/HelloWorld/HelloWorld-shell.cmd
Created file C:/HelloWorld/HelloWorld-compile.cmd

　　2、开发"Hello World!"例子

　　使用ApplicationCreator工具的时候，ApplicationCreator工具其实已经帮我们生成了符合Hello World!例子要求的全部内容。为了不打断第一个例子的演示过程，我们先简单的了解一下ApplicationCreator工具的生成内容。我们将在将在测试过程后面做出更加详细的分析。

　　图1中显示了ApplicationCreator工具执行后生成的目录结构。

　　图1 GWT应用开发环境

　　图1中的src/org/vivianj/gwt/client目录中的HelloWorld.java是GWT 应用的主类;src/org/vivianj/gwt/public目录中的HelloWorld.html文件是例子的默认页面;src/org/ vivianj/gwt目录下的HelloWorld.gwt.xml是GWT应用的配置文件，提供GWT应用中页面和主类的配置信息;根目录下的 HelloWorld-compile.cmd文件用于提供将该GWT应用编译成Ajax的命令;根目录下的HelloWorld-shell.cmd文件用于启动宿主模式(Hosted Mode)，方便测试GWT应用。

　　3、在宿主模式下启动"Hello World!"例子

　　我们可以直接在命令行中执行HelloWorld-shell.cmd来启动宿主模式(Hosted Mode)，运行新创建的"Hello World!"例子。

　　C:/HelloWorld>HelloWorld-shell.cmd

　　这个命令将启动两个可视化界面:Google Web Toolkit Development Shell(见图2)和GWT内置的GWT应用浏览器(见图3)，GWT应用浏览器中将显示"Hello World!"例子的初始界面，如果我们点击界面上的"Click Me"按钮，按钮后面将会显示"Hello World!"字符串(见图4)，如果再次单击页面上的"Click Me"按钮，按钮后面的"Hello World!"字符串会消失。

　　图2 Google Web Toolkit Development Shell运行界面

　　图3 "Hello World!"例子初始运行界面

　　图4 "Hello World!"例子-单击"Clieck Me"按钮后的界面

　　4、编译"Hello World!"例子

　　要将GWT应用编译成Ajax应用，我们可以执行HelloWorld-compile.cmd。

C:/HelloWorld>HelloWorld-compile.cmd

　　命令运行时，界面上将会显示下面的内容。

Output will be written into C:/HelloWorld/www/org.vivianj.gwt.HelloWorld
Copying all files found on public path
Compilation succeeded

　　其中的第一行显示生成的Ajax应用位于C:/HelloWorld/www/org.vivianj.gwt.HelloWorld目录下。

　　图5 "Hello World!"例子编译后的目录结构

　　从上面的图中我们可以看到，新生成的www目录下有一个名为org.vivianj.gwt.HelloWorld的目录，它的命名规则是GWT主类全名(org.vivianj.gwt.client.HelloWorld)去掉其中的"client."。

　　org.vivianj.gwt.HelloWorld目录下的HelloWorld.html文件就是 "Hello World!"例子对应的页面，以.cache.html后缀结尾的文件就是"Hello World!"例子中对应的Ajax代码部分，而gwt.js文件则是GWT提供的、Ajax代码中需要用到的JavaScript公共函数。其他还有些辅助文件。

　　5、 Web模式下测试"Hello World!"例子

　　运行HelloWorld-compile.cmd后，GWT应用就已经被编译成Ajax应用了，不再依赖于JDK和GWT环境，而仅仅依赖于浏览器。

　　我们打开IE浏览器，打开C:/HelloWorld/www/ org.vivianj.gwt.HelloWorld/HelloWorld.html文件，就可以看到"Hello World!"例子在Web模式下的运行效果(见图6)，单击页面上的"Click Me"按钮，按钮后面会出现"Hello World!"字符串(见图7)，如果再次单击页面上的"Click Me"按钮，按钮后面的"Hello World!"字符串会消失。

　　图6 Web模式下运行"HelloWorld!"例子的默认效果

　　图7 Web模式下运行"HelloWorld!"例子-单击"Click Me"按钮后的效果

　　实例详细分析

　　上面的步骤中，我们已经完成第一个GWT应用的编译和测试，下面我们来详细的介绍一下GWT应用开发过程中涉及的几个文件:显示页面HelloWorld.html、主类HelloWorld和配置文件HelloWorld.gwt.xml。

　　1. 显示页面HelloWorld.html

　　GWT应用中的HTML内容必须存放在public目录下，public目录的全路径是"org/vivianj /gwt/ublic"，是将主类HelloWorld的包名"org.vivianj.gwt.client"中的client替换为"public" 后形成的目录结构。

　　我们将主要介绍HelloWorld.html中和GWT相关的内容，HelloWorld.html文件的全部内容见清单1。

24. <meta name='gwt:module' content='org.vivianj.gwt.HelloWorld'>

　　在HelloWorld.html文件的第24行，我们使用meta标签指定了本页面和GWT模块" org.vivianj.gwt.HelloWorld"之间的联系，meta标签的name属性是不变的，而content属性则是GWT主类全名 (org.vivianj.gwt.client.HelloWorld)去掉其中的"client."后的结果。

40. <script language="javascript" src="gwt.js"></script>

　　在HelloWorld.html文件的第40行，我们使用script标记引入GWT工具提供的默认函数库。根据HTML语言的规定，我们可以选择在之间加入这行代码，也可以选择在之间加入这段代码。GWT建议在之间加入这行代码，以便获得稍微快一些的起动速度。

56. <td id="slot1"></td><td id="slot2"></td>

　　在HelloWorld.html文件的第56行，我们使用td标签定义了两个相邻的表格单元格，他们分别命名为 "slot1"和"slot2"，根据"HelloWorld!"例子的要求，名为"slot1"的单元格中应该显示按钮，而名为"slot2"的单元格中则根据情况决定显示"HelloWorld!"字符串或者不显示任何内容。

　　我们将在主类HelloWorld.java的源代码中使用RootPanel.get("slot1")来获得对该单元格的引用，请参考下面的"主类HelloWorld"部分的说明。

43. <iframe id="__gwt_historyFrame" style="width:0;height:0;border:0"></iframe>

id="__gwt_historyFrame" style="BORDER-RIGHT: 0px; BORDER-TOP: 0px; BORDER-LEFT: 0px; WIDTH: 0px; BORDER-BOTTOM: 0px; HEIGHT: 0px">

　　在HelloWorld.html的第43行，我们使用iframe标签来设置当前页支持历史功能，iframe的属性必须和上面的内容保持一致，否则将不会起到任何效果。

　　清单1 src/org/vivianj/gwt/public/public/HelloWorld.html

1. <html>
2.  <head>
3.
4.   
5.   
6.   
7.   <title>Wrapper HTML for HelloWorld</title>
8.
9.   
10.   
11.   
12.   <style>
13.    body,td,a,div,.p{font-family:arial,sans-serif}
14.    div,td{color:#000000}
15.    a:link,.w,.w a:link{color:#0000cc}
16.    a:visited{color:#551a8b}
17.    a:active{color:#ff0000}
18.   </style>
19.
20.   
21.   
22.   
23.   
24.   <meta name='gwt:module' content='org.vivianj.gwt.HelloWorld'>
25.
26.  </head>
27.
28.  
29.  
30.  
31.  
32.  
33.  <body>
34.
35.   
36.   
37.   
38.   
39.   
40.   <script language="javascript" src="gwt.js"></script>
41.
42.   
43.   <iframe id="__gwt_historyFrame"
style="width:0;height:0;border:0"></iframe>
44.
45.   <h1>HelloWorld</h1>
46.
47.   <p>
48.   This is an example of a host page for the HelloWorld application.
49.   You can attach a Web Toolkit module to any HTML page you like,
50.   making it easy to add bits of AJAX functionality to existing
pages
51.   without starting from scratch.
52.   </p>
53.
54.   <table align=center>
55.    <tr>
56.     <td id="slot1"></td><td
id="slot2"></td>
57.    </tr>
58.   </table>
59.  </body>
60. </html>

　　2. 主类HelloWorld

　　主类HelloWorld必须继承自com.google.gwt.core.client.EntryPoint类，并且覆盖其public void onModuleLoad()方法。

　　在onModuleLoad()方法中，我们使用GWT中提供的默认显示组件(比如Button)和组装组件(比如VerticalPanel)来设计需要显示的界面，所有这些组件都位于com.google.gwt.user.client.ui包下面。这些组件的命名规则和Java AWT的命名规则基本类似，使用方式也和AWT的基本一致，不过GWT中提供了不少的新组建可供选择，比如可以直接用VerticalPanel来实现垂直方向的布局管理。

　　HelloWorld.java中的19和20行，就声明了Button和Label两个显示组件。

19. final Button button = new Button("Click me");
20. final Label label = new Label();

　　onModuleLoad()方法中，我们需要把生成的显示组件或者组装组建加入到显示页面的对应显示区域。首先，我们需要在页面上使用id属性为显示区域指定唯一的名称(参见清单1中的56行)。 com.google.gwt.user.client.ui.RootPanel的静态方法get可以根据传入的字符串参数(参数值就是显示区域的id 属性)获取页面上对应的显示区域。

　　HelloWorld.java的36、37行，就使用了RootPanel的get方法分别获得页面上id为"slot1"、"slot2"的显示区域，然后调用add方法将生成的Button和Label对象加入到显示区域中。

36. RootPanel.get("slot1").add(button);
37. RootPanel.get("slot2").add(label);

　　Ajax最重要的功能就是为用户提供更好的交互体验，GWT中使用和AWT中相同的事件监听机制完成客户端事件监听，GWT中支持的Listener接口包括ChangeListener、ClickListener等。我们可以通过各种各样的Listener接口获得用户界面上所发生的动作，通过处理这些动作来完成对应业务逻辑。

　　HelloWorld.java中的第22行~29行的内容就实现了一个ClickListender接口，并且提供了对应的onClick方法实现，用于处理按钮点击后的业务逻辑(判断是否需要显示"Hello World!"字符串)，然后调用Button对象的addClickListener方法增加监听器。

22.    button.addClickListener(new ClickListener() {
23.          public void onClick(Widget sender) {
24.            if (label.getText().equals(""))
25.              label.setText("Hello World!");
26.            else
27.              label.setText("");
28.          }
29.    });

　　HelloWorld类的全部源代码内容见清单2。

　　清单2 src/org/vivianj/gwt/client/HelloWorld.java

1. package org.vivianj.gwt.client;
2.
3. import com.google.gwt.core.client.EntryPoint;
4. import com.google.gwt.user.client.ui.Button;
5. import com.google.gwt.user.client.ui.ClickListener;
6. import com.google.gwt.user.client.ui.Label;
7. import com.google.gwt.user.client.ui.RootPanel;
8. import com.google.gwt.user.client.ui.Widget;
9.
10. /**
11. * Entry point classes define <code>onModuleLoad()</code>.
12. */
13. public class HelloWorld implements EntryPoint {
14.
15.   /**
16.    * This is the entry point method.
17.    */
18.   public void onModuleLoad() {
19.     final Button button = new Button("Click me");
20.     final Label label = new Label();
21.
22.     button.addClickListener(new ClickListener() {
23.       public void onClick(Widget sender) {
24.         if (label.getText().equals(""))
25.           label.setText("Hello World!");
26.         else
27.           label.setText("");
28.       }
29.     });
30.
31.     // Assume that the host HTML has elements defined whose
32.     // IDs are "slot1", "slot2". In a real app, you probably would not want
33.     // to hard-code IDs. Instead, you could, for example, search for all
34.     // elements with a particular CSS class and replace them with widgets.
35.     //
36.     RootPanel.get("slot1").add(button);
37.     RootPanel.get("slot2").add(label);
38.   }
39. }