`

DWR入门教程之提示性文字

    博客分类：
  • Ajax
DWRAjaxSpringJavaJavaScript 
阅读更多

DWR可以让您做个简单的文字提示功能了…像这个…
http://caterpillar.onlyfun.net/Gossip/index.html

把鼠标指到书的照片上，会显示提示文字，这些提示文字本身不是存在网页上的，而是在Server端，当鼠标指到书上时，会用Request object去抓，然后显示在框框中…


不过！用DWR就可以很简单完成这个功能…

先写个Java类别吧！Book.java如下：

package com.dwr;

import java.util.HashMap;
import java.util.Map;

public class Book {
	private Map<String, String> descriptionMap = new HashMap<String, String>();

	public Book() {
		String java = "Java SE 6 技術手冊 - 為「Java學習筆記」的下一版，正式成為技術手冊的成員之一，以一年多來的上課經驗，對各章節的內容作了擴充調整（例如物件導向、多執行緒等），新增JDBC介紹，並在最後一章介紹幾個Java SE 6的新特性。";
		String spring = "Spring 2.0 技術手冊 - 主要針對Spring 2.0 的新組態、新 AOP 支援等作說明、加強IoC的部份、介紹JDBC、form標籤等新功能，修正第一版的錯誤，並重作所有的範例，Web 的部份使用WTP重寫。";
		String ajax = "Ajax 實戰手冊 - Ajax in action 中文版，我的第一本譯作，雖說是翻譯，卻是我花最多時間的一本書籍，翻譯所投入的心力，實在不亞於自己撰寫書籍的心力，當然收獲也是很多的，尤其是藉由完成這本書的翻譯，對於Ajax 也有了更加深入的了解。";
		descriptionMap.put("java", java);
		descriptionMap.put("spring", spring);
		descriptionMap.put("ajax", ajax);
	}
	public String getDescription(String key) {
		return descriptionMap.get(key);
	}
}


一样的…要开放这个Book对象，dwr.xml如下：

<!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="JDate">
      <param name="class" value="java.util.Date"/>
    </create>
    <create creator="new" javascript="Hello">
      <param name="class" value="com.dwr.HelloWorld"/>
    </create>
    <create javascript="Book" creator="new">
    	<param name="class" value="com.dwr.Book"></param>
    </create>
  </allow>
</dwr>



scope设定为application，表示这个Book对象在整个应用程序阶段都活着。

然后，客户端写个网页Book.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<title>Book</title>
<script type='text/javascript' src='dwr/interface/Book.js'></script>
<script type='text/javascript' src='dwr/engine.js'></script>
<script type='text/javascript' src='dwr/util.js'></script>
<script type='text/javascript' src='book.js'></script>

</head>
<body>

<div id="ajax" onmouseover="getBookData(this);" onmouseout="clearData();">
	<a	href="http://www.gotop.com.tw/waweb2004/home/home.aspx?pg=HM010X&bn=AXP011800">
	<img style="border: 0px solid ; width: 80px; height: 110px; float: left;"
	alt="Ajax in action 中文版" title="Ajax in action 中文版"
	src="images/ajax_in_action_c.jpg" hspace="10" vspace="2"></a></div>
<div id="spring" onmouseover="getBookData(this);" onmouseout="clearData();">
  <a href="http://www.gotop.com.tw/waweb2004/home/home.aspx?pg=HM010X&bn=ACL021000"><img
	style="border: 0px solid ; width: 80px; height: 110px; float: left;"
	alt="Spring 技術手冊" title="Spring 技術手冊" src="images/Spring2Tech_S.jpg"
	hspace="10" vspace="2"></a></div>
<div id="java" onmouseover="getBookData(this);"
	onmouseout="clearData();"><a
	href="http://www.gotop.com.tw/waweb2004/home/home.aspx?pg=HM010X&bn=ACL020931"><small><img
	style="border: 0px solid ; width: 80px; height: 110px; float: left;"
	alt="Java 學習筆記" title="Java 學習筆記" src="images/JavaTech_Cover_Small.jpg"
	hspace="10" vspace="2"></small></a></div>

<br/>
<br/>
<br/>
<div id="info"></div>

</body>
</html>

 

重点在于onmouseover跟onmouseout，鼠标移入与移出时会呼叫的函式，还有最下面的info，抓回来的书籍介绍会放到当中…

book.js如下，简单的很… 

function getBookData(ele){
	Book.getDescription(ele.id,setBookData);
}
function setBookData(description){
	DWRUtil.setValue('info',description);
}
function clearData(){
	DWRUtil.setValue('info','');
}

 

看一下画面好了…这是鼠标移到 Ajax in action中文版 上的介绍画面…


 DWR Book

源文件见附件，WAR格式打包。

 

  • dwrtest.rar (482.2 KB)
  • 描述: 是war包，但是由于war格式不让上传（？），所以再用rar格式包装一下
  • 下载次数: 71
分享到：
| DWR入门教程之HelloWorld
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics