Coding JavaScript like(in) Java! --DWR

DWR 是一个开源的工具,她利用 Java 的反射和 AJAX 技术实现了 javascript java 类的通信。官方网站是: http://getahead.ltd.uk/dwr/

下面看一个实际的例子:
chat.gif 

这个例子是根据 DWR demo 改写的,是一个简化的聊天室,下面输入信息在上面显示出来,这是 AJAX 技术的典型应用。

对于这个应用编写过程如下:

1、  编写三个 JAVA 类: Message.java MessageDao.java ChatManager.java

2、  配置 DWR dwr.xml web.xml

3、  编写一个 html 的页面: index.html

4、  index.html 上添加与 DWR 相关的 js 脚本;

Message.java

package test.dwr;

 

public class Message {

    private String text;

 

    private String from;

 

    /**

     * 空构造方法很重要

     *

     * 1 java 编译器默认如果已经有了带参构造函数,就不会再生成无参构造函数;

     *

     * 2 DWR 大量使用 Class.forName("clazz").newInstance() ,如果没有空构造方法将会抛错;

     *

     */

    public Message() {

    }

 

    public Message(String text, String from) {

        this.text = text;

        this.from = from;

    }

 

    public String getFrom() {

        return from;

    }

 

    public void setFrom(String from) {

        this.from = from;

    }

 

    public String getText() {

        return text;

    }

 

    public void setText(String text) {

        this.text = text;

    }

}

MessageDao.java

package test.dwr;

 

public class MessageDao {

    public Message save(Message message) {

        System.out.println("========Lucky DWR Begin=======");

        System.out.println("text:" + message.getText());

        System.out.println("from:" + message.getFrom());

        System.out.println("=========Lucky DWR End========");

 

        return message;

    }

 

    public Message get() {

        return new Message("This is the first dwr demo!", "test");

    }

}

ChatManager.java

package test.dwr;

 

public class ChatManager {

    MessageDao messageDao = new MessageDao();

 

    public Message add(Message message) {

        return messageDao.save(message);

    }

 

    public Message read() {

        return messageDao.get();

    }

}

至此,大家可能看到这与我们一贯的写法没有什么差异。

dwr.xml

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 1.0//EN" "http://www.getahead.ltd.uk/dwr/dwr10.dtd">

 

<dwr>

  <allow>

    <create creator="new" javascript="ChatManager">

      <param name="class" value="test.dwr.ChatManager"/>

    </create>

    <convert converter="bean" match="test.dwr.Message"/>

  </allow>

</dwr>

dwr.xml 的具体解释大家可以参见官方网站,这里是常用的, create 节点的意思是将 ChatManager 转变成 ChatManager.js convert 节点的意思是使用 bean 转换器。 bean 转换器的定义在 dwr.jar 包中的 dwr.xml 中,这个配置文件会被预先装载。

web.xml

<?xml version="1.0" encoding="ISO-8859-1"?>

<!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN" "http://java.sun.com/dtd/web-app_2_3.dtd">

 

<web-app id="chat-demo">

  <display-name>Chat-Demo</display-name>

  <servlet>

    <servlet-name>dwr-invoker</servlet-name>

    <display-name>DWR Servlet</display-name>

    <servlet-class>uk.ltd.getahead.dwr.DWRServlet</servlet-class>

  </servlet>

  <servlet-mapping>

    <servlet-name>dwr-invoker</servlet-name>

    <url-pattern>/dwr/*</url-pattern>

  </servlet-mapping>

</web-app>

DWRServlet DWR 联系客户端和服务器端程序的联系纽带,它首先将你定义的 dwr.xml 中的类转变成 js ,当客户端调用 js 中的方法后,又由他来调用具体的实现类的方法,返回给客户端结果。

index.html

<html>

<head>

  <title>Chat-Demo</title>

 

  <!--Dwr 自带的 js-->

  <script type='text/javascript' src='dwr/engine.js'></script>

  <script type='text/javascript' src='dwr/util.js'></script>

  <!-- 你在 dwr.xml 中配置的调用类的 js-->

  <script type='text/javascript' src='dwr/interface/ChatManager.js'></script>  

 

  <script type='text/javascript'>

    function sendMessage()

    {

                  var message = {};

         

          message.text = document.all.text.value;

          message.from = document.all.from.value;

         

        ChatManager.add(message, gotMessage);

    }

   

    function checkMessage()

   

    {        

        ChatManager.read(gotMessage);

    }

   

    function gotMessage(message)    {

          

        var chatlog = "";

       

        chatlog = "<div>" + message.from + ":" + message.text + "</div>";       

       

        DWRUtil.setValue("chatlog", chatlog);      

    }

  </script>

</head>

<body onload="checkMessage()">

<p>Messages:</p>

<div id="chatlog" style="border: 1px solid black;"></div>

<p>

  Your Message:

  <br>

  text:<input id="text" />

  <br>

  from:<input id="from" />

  <br>

  <input value="Send" onclick="sendMessage()" type="button" />

</p>

</body>

</html>

engine.js util.js dwr 自带的,在 dwr.jar 包中可以找到。 ChatManager.js 是由 DWRServlet 根据 dwr.xml 中的定义自动生成的。要想查看可以在浏览器地址栏输入:

http://localhost/dwrdemo/dwr/interface/ChatManager.js 结果如下

function ChatManager() { } ChatManager.add = function(p0, callback) { DWREngine._execute('/dwrdemo/dwr', 'ChatManager', 'add', p0, callback); } ChatManager.read = function(callback) { DWREngine._execute('/dwrdemo/dwr', 'ChatManager', 'read', callback); }

 

他自动生成后会转变成回调函数的形式,至于回调函数,大家可以注意一下:

ChatManager.add(message, gotMessage);

他原先在类中的方法是:

public Message add(Message message)

他的意思是将类的方法返回的结果对象 Message gotMessage 方法在页面上显示, Message 对象的 js 对象和 java 对象转换是由 dwr bean 转换器自动完成的。

 

本例程在 tomcat-5.0.28 websphere 6.0 上测试通过,源码下载: dwrdemo.rar

 

posted on 2007-01-31 10:21 Tom 阅读(548) 评论(0)  编辑  收藏 所属分类: JavaScript


只有注册用户登录后才能发表评论。


网站导航:
 
<2007年1月>
31123456
78910111213
14151617181920
21222324252627
28293031123
45678910

导航

统计

常用链接

留言簿(1)

随笔分类(42)

随笔档案(43)

文章分类

相册

搜索

最新评论

阅读排行榜

评论排行榜