dwr入门实例一

buliedian

浏览: 1248932 次
性别:
来自: 北京

最近访客更多访客>>

u012363178

liyanhui111

leimingchao

gstszwx11

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (1445)

社区版块

存档分类

上面一篇文章简单的讲解了，dwr的一些配置步骤。现在我们就自己东西写一个dwr应用的一个实例吧。

写实例前，我们还的学习一个dwr的基本知识点，就是写javascript代码。

我还是根据官方的教材用我理解的讲解下吧（ps：由于本人的英语水平有限，至今未过cet4，杯具啊，

所有并没有一句一句的翻译啦，就是写个我理解的大体意思，具体的还是的各位自己去官方看英文文档吧，哈哈）

编写第一步：首先你的在你的jsp或者其他显示脚本的页面中加入下面两行代码，引入js控件：

这个其实就是你在dwr.xml中配置的javascript属性的值.
下面我们讲解一些规则：
1.首先我们还是写个完整的示例吧。
后台的java类：
public class DwrTest{ public String test1(String str){ return str; } public String test2(String str, String[]s){ String ss = str; for(String s1 : s) ss+=s1; return ss; } }

2.web.xml的编写，dwr.xml文件的编写，这里我就不把web.xml的编写的代码贴出来了，大家可以看我上一篇文章《dwr入门》

<!DOCTYPE dwr PUBLIC
"-//GetAhead Limited//DTD Direct Web Remoting 3.0//EN"
"http://getahead.org/dwr/dwr30.dtd">
<dwr>
<allow>
<create creator="new" javascript="DwrDemo">
<param name="class" value="demo.DwrTest"/>
</create>
</allow>
</dwr>

3.编写前台页面：

首先你得加入两个js文件，这是有dwr框架生成的。

<script src='/[YOUR-WEBAPP]/dwr/interface/DwrDemo.js'></script>

<script src='/[YOUR-WEBAPP]/dwr/engine.js'></script>
DwrDemo.test1('dwr test',function(str){
alert(str)；
});

DwrDemo.test2('dwr test2' , ['a','b','c'],function (str){
alert(str);

});
这里接受java返回值，用的是回调函数来接受的。如果没有返回值，那么可以去掉这个回调函数。

回调函数还有两个属性：一个数设置超时timeout，一个数发生异常时调用的函数errorHandler属性。

例如：
Remote.test1('abc', {
callback:function(str) { alert(str); },
timeout:5000,
errorHandler:function(message) { alert("Oops: " + message); }

});

注意：javascript不支持java的overreload。

更权威，更详细的请看官方文档：http://directwebremoting.org/dwr/introduction/scripting-dwr.html

下面就是测试了：在游览器地址栏中输入：http://localhost:8080/[webname]/[页面名字]

下面是我结合前面写的tab菜单的实例加入了dwr功能的tab菜单实例代码：

java代码：
package loon.dwr.demo;

public class TabSelected {

	public String showContent(String tabMenuName) {
		// System.out.println(tabMenuName);
		if (tabMenuName.trim().equals("新闻"))
			return "* 实拍：大浪袭来新人被拍沙滩上" + "* 退休交警上课如脱口秀引爆网络" + "* 实拍：韩国活埋感染口蹄疫病猪"
					+ "* 女排联赛罕见一幕发16球得15分";
		else if (tabMenuName.trim().equals("手机"))
			return "手机";
		else if (tabMenuName.trim().equals("篮球"))
			return "篮球";
		else if (tabMenuName.trim().equals("Blog"))
			return "Blog";
		return "";
	}

}
dwr.xml代码：
<!DOCTYPE dwr PUBLIC
 "-//GetAhead Limited//DTD Direct Web Remoting 3.0//EN"
 "http://getahead.org/dwr/dwr30.dtd">

<dwr>
    <allow>
        <create creator="new" javascript="Demo">
            <param name="class" value="loon.dwr.demo.TabSelected"/>
        </create>
    </allow>
</dwr>
web.xml省略，参照前面的文章的。
jsp文件：
<%@ page language="java" import="java.util.*" pageEncoding="utf-8" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/"; %>
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=GBK">
        <title>tab菜单</title>
        <mce:style type="text/css"><!--
            body {
                font-family: Arial, Helvetica, sans-serif;
                font-size: 15px;
            }
            
            ul {
                list-style-type: none;
                margin: 0;
                padding: 0;
            }
            
            ul ol {
                float: left;
                display: block;
                text-align: center;
                background-color: #CCC;
                border: 1px #CCC solid;
                margin: 0 0 0 5px;
                padding: 0px;
                width: 60px;
            }
            
            ul ol#tab {
                margin-bottom: 0px;
                border-bottom: 0px;
                background-color: #FFF;
            }
            
            div#content {
                clear: both;
                border-top: 0px;
                border-left: 1px #CCC solid;
                border-right: 1px #CCC solid;
                border-bottom: 1px #CCC solid;
                margin: 0px;
                padding: 0;
                width: 261px;
                height: 150px;
            }
        
--></mce:style><style type="text/css" mce_bogus="1">            body {
                font-family: Arial, Helvetica, sans-serif;
                font-size: 15px;
            }
            
            ul {
                list-style-type: none;
                margin: 0;
                padding: 0;
            }
            
            ul ol {
                float: left;
                display: block;
                text-align: center;
                background-color: #CCC;
                border: 1px #CCC solid;
                margin: 0 0 0 5px;
                padding: 0px;
                width: 60px;
            }
            
            ul ol#tab {
                margin-bottom: 0px;
                border-bottom: 0px;
                background-color: #FFF;
            }
            
            div#content {
                clear: both;
                border-top: 0px;
                border-left: 1px #CCC solid;
                border-right: 1px #CCC solid;
                border-bottom: 1px #CCC solid;
                margin: 0px;
                padding: 0;
                width: 261px;
                height: 150px;
            }
        </style>
        <mce:script type='text/javascript' src="/tab/dwr/interface/Demo.js" mce_src="tab/dwr/interface/Demo.js"><!--
        
// --></mce:script>
        <mce:script type='text/javascript' src="/tab/dwr/engine.js" mce_src="tab/dwr/engine.js"><!--
        
// --></mce:script>
        <mce:script type="text/javascript"><!--
            function tabonmouseover(obj){
                /*
                 var ol = document.getElementsByTagName("ol");
                 
                 for (i = 0; i < ol.length; i++) {
                 ol[i].id = "";
                 }*/
                document.getElementById("tab").id = "";
                
                obj.id = "tab";
                Demo.showContent(obj.innerHTML, function(content){
                    document.getElementById("content").innerHTML = content;
                });
            }
        
// --></mce:script>
    </head>
    <body>
        <ul>
            <ol style="margin-left: 0px;" mce_style="margin-left: 0px;" onmouseover="tabonmouseover(this);" id="tab">
                新闻
            </ol>
            <ol onmouseover="tabonmouseover(this);">
                手机
            </ol>
            <ol onmouseover="tabonmouseover(this);">
                Blog
            </ol>
            <ol onmouseover="tabonmouseover(this);">
                篮球
            </ol>
        </ul>
        <div id="content">
            新闻内容
        </div>
        <mce:script type="text/javascript"><!--
            Demo.showContent(document.getElementById("tab").innerHTML, function(content){
                document.getElementById("content").innerHTML = content;
            });
        
// --></mce:script>
    </body>
</html>

分享到：