Google Web Toolkit例程探讨.

  当我们装好Google的 eclipse插件之后. 我们就可以使用它来创建我们的App了.

  new-->Web Application Project. 输入你的项目名 跟 Google需要的包名finish就可以了.

  之后在我们的程序中,我们的项目目录类似于下图:

 

  右键项目名称.然后 run as web app 就可以看到项目的效果了.(这块确实有点慢..)

  开出的窗口有两个. 一个是Host . 一个是Client . Host里面可以restart. 打开浏览器等等.client里面可以compile等等. 很简洁..

  下面就进入我们的实质. 来分析下. 上图所谓的文件目录到底各自的作用在哪里..

  让我们先从Client那里开始. 刚才我们打开了Google为我们自带的例程. 那就从浏览器地址栏开始吧.
 
  地址栏指向了http://localhost:8080/blog.html那我们就从blog.html入手.

  在最下面的war 包里面 我们找到 Blog.html . 打开他  发现核心的代码其实只有这么两句.
 

<table align="center">
      <tr>
        <td colspan="2" style="font-weight:bold;">Please enter your name:</td>        
      </tr>
      <tr>
        <td id="nameFieldContainer"></td>
        <td id="sendButtonContainer"></td>
      </tr>
    </table>

只是建立了一个table . 并没有一点Javascript的痕迹.那我们的Ajax效果是怎么来的?

  局部揭开迷局. 接下来我们从我们的src入手. 逐步揭开谜底.

  首先 .com.javaeye包下面. 我们发现了一个Blog.gwt.xml 打开它. 在这个xml中.

<module rename-to='blog'>
  <inherits name='com.google.gwt.user.User'/>
  <inherits name='com.google.gwt.user.theme.standard.Standard'/>
  <entry-point class='com.javaeye.client.Blog'/>
</module>

  在这个xml中. 我们发现他定义了一个module . 也就是一个编译单元. 在Gwt中. 编译的工作是以单元为单位的. 上面引用(继承)了其他两个单元.然后下面一个不是引用. 而是指定了一个entry-point . 这个进入点是每一个编译单元必须有的. 就如同我们的main方法. 可以看到.entry-point指定到了我们的  com.javaeye.client.Blog这个class上. 时不我待. 我们现在就进入这个例程看看.

  可以看到我们的类实现了EntryPoint接口. 这个接口只有一个方法. 那就是onModuleLoad()这个方法. 就是我们将要编译成js的地方. 也是gwt的精髓所在. 下面我们深入这个方法. 来做进一步的阐述.
 
 

RootPanel.get("nameFieldContainer").add(nameField);
		RootPanel.get("sendButtonContainer").add(sendButton);

  我们来看这两句代码. 他们获取了我们在Blog.html里面的两个 td 的id  然后在里面加上了两个 Button . 这两个 nameFiled 跟sendButton 是在前面定义的. 从而达到织入js代码的目的. 然后接下来 程序new了一个DialogBox..来作为我们Ajax应用的程序框. 真正的Ajax还没开始呢. 我们来探究下这个DialogBox是怎么被调用来实现我们的Ajax特效在网页上的.

 

closeButton.addClickHandler(new ClickHandler() {
			public void onClick(ClickEvent event) {
				dialogBox.hide();
				sendButton.setEnabled(true);
				sendButton.setFocus(true);
			}
		});

  这里是典型的GUI程序的写法了. 匿名内部类. 来实现close掉整个dialogBox .

  再往下看. 就是我们的精髓了.下面是一个内部类. 内部类. 匿名内部类. 多么熟悉的GUI经验啊. 

 class MyHandler implements ClickHandler, KeyUpHandler

  在Gwt1.6里面用handler 代替了listener . 对于以前有Swing编程经验的同学来说有点不同. 这个handler好不好用暂时我也说不上来. 就是觉得没有listener好用. 但是listener已经不被推荐使用了.

 

public void onClick(ClickEvent event) {
				sendNameToServer();
			}

			public void onKeyUp(KeyUpEvent event) {
				if (event.getNativeKeyCode() == KeyCodes.KEY_ENTER) {
					sendNameToServer();
				}
			}

  下面很自然而然的实现了两个接口的方法. 很自然. 跟我们的GUI编程没有半点不同.

  在 Event里面. 我们发现他 调用了一个方法. sendNameToserver(); 这个方法就是我们整个程序的精髓之处了. 我们先不看他. 下一篇再去分解.
  在inner class 结束之后 

  程序为我们的button 跟 key加上了 handler

 

MyHandler handler = new MyHandler();
		sendButton.addClickHandler(handler);
		nameField.addKeyUpHandler(handler);

  还是与GUI完全相同吧 .  这就是Gwt的魅力所在. 我们不需要知道js 只要简单的Java程序就足以搞定复杂的Ajax应用.. 多么神奇啊.

  加上这些之后 我们的button 就可以响应了. 下一篇我来尝试分析下程序的精髓之处sendNameToServer().也是RPC使用之处.Ajax响应页面之处.欢迎大家拍砖.

评论

4 楼 Saito 2009-04-17  

kjj 写道

那个慢啊,等得我花儿也谢了!!!

出新的了.您过目???

3 楼 kjj 2009-04-16  

那个慢啊,等得我花儿也谢了!!!

2 楼 Saito 2009-04-16  

linliangyi2007 写道

从俺的blog追踪楼主到这里 期待下一篇 Java代码 closeButton.addClickHandler(new ClickHandler() {                public void onClick(ClickEvent event) {                    dialogBox.hide();                    sendButton.setEnabled(true);                    sendButton.setFocus(true);                }            });   closeButton.addClickHandler(new ClickHandler() { 
            public void onClick(ClickEvent event) { 
                dialogBox.hide(); 
                sendButton.setEnabled(true); 
                sendButton.setFocus(true); 
            } 
        });
其实本人最大的疑惑就是上面的代码。这些代码是java编写的，跟swing编程在逻辑上很相似。但swing的实现是在java代码上的callback调用，这个好理解。而gwt的调用是通过ajax传回server端，再更新client端嘛？还是在用户点击页面之前就要放到页面中，或者说，编译成js跟页面绑定（也就是楼主说的注入）呢？

其实你不用刻意追求gwt的原理. 原理在我看来很是简单. 其实他就是一个 Java to js 的compile.  这些你说的回调 之类的. js是怎么实现的.  这里肯定就是怎么实现的. 换句话说. 我们做出的项目跟Java没有半毛钱关系. 都是js跟html的. .  Ajax 这边 gwt是通过RPC实现的. 异步传输.  下一篇我试着分析下rpc这边. 呵呵.

1 楼 linliangyi2007 2009-04-16  

从俺的blog追踪楼主到这里
期待下一篇

closeButton.addClickHandler(new ClickHandler() {  
            public void onClick(ClickEvent event) {  
                dialogBox.hide();  
                sendButton.setEnabled(true);  
                sendButton.setFocus(true);  
            }  
        }); 

其实本人最大的疑惑就是上面的代码。这些代码是java编写的，跟swing编程在逻辑上很相似。
但swing的实现是在java代码上的callback调用，这个好理解。
而gwt的调用是通过ajax传回server端，再更新client端嘛？还是在用户点击页面之前就要放到页面中，或者说，编译成js跟页面绑定（也就是楼主说的注入）呢？