龙盟编程博客 | 无障碍搜索 | 云盘搜索神器
快速搜索
主页 > web编程 > Javascript编程 >

ToDoTasks: 使用DWR向Java添加AJAX(1)(2)

时间:2013-03-06 14:58来源:未知 作者:admin 点击: 次
分享到：
我们以早前配置Adder同样的方式配置TaskSessions DWR 访问，在服务器上浏览器会话开始时创建，所以我们拥有的dwr.xml是这样的： TasksSession方法接收或返回Ta

我们以早前配置Adder同样的方式配置TaskSessions DWR 访问，在服务器上浏览器会话开始时创建，所以我们拥有的dwr.xml是这样的：

TasksSession方法接收或返回Task对象, 而这些将依次包含Priority的枚举值，为了让DWR转换这些，我们需要首先告知它以允许转化，然后说明它们如何进行转换，在dwr.xml中，在部分，我们拥有以下形式的元素。

"com.builder.uk.todotasks.Task"/>

"com.builder.uk.todotasks.Priority"/>

"com.builder.uk.todotasks.SortOrder"/>

"com.builder.uk.todotasks.SortOrder$TaskField"/>

有两个属性converter和match。converter属性说明了使用哪个转换过程，'bean'值意味着使用通用的Java Bean转换器，'enum'值给定了一个专用的枚举转换器。match属性说明了哪个类名称应当在转换中配对使用。DWR在默认情况下将转换器与基本类型（int、boolean等等）注册，还有它们基于类的版本（Integer、Boolean等等），以及字符串、日期，上述这些的数组，还有DOM对象。您只需要在这个集合之外指定类的转换器。

SortOrder类定义了一个内部枚举：TaskField; 所以我们为SortOrder指定一个bean转换器，我们需要为TaskField添加一个枚举转换器，注意匹配值中的$。

为了进行数据访问，我们在HTML页面(dwrfrontend.html)中需要进行定义的是：

我们不需要为转换器做所有的事情，它们将会被自动调用。

我们的HTML页面包含一个表格和一个表单，表格本身没有任何数据行，表单上也没有提交按钮，当页面载入时，我们要做的第一件事情就是在init函数中清除该表单，使用DWR的工具函数之一的setValues：

var taskfields={
taskId:"",

name:"",

priority:"",
donePercent:"",
completedDate:"",

dueDate:"",

notes:""

};
DWRUtil.setValues(taskfields);

DWRUtil.setValues获取传递给它的关联的数组，对于位于HTML元素中的每一个键/值对都拥有与键相同的id，并将其内容设定为值，对值进行批量设定是一个便捷的方法，如果您观察页面中的

，您会看到：



…


Id
Name



Priority



我们将表单的输入元素进行命名以匹配Task类的字段名称，这并不是偶然的，我们将在随后的部分进行解释，接下来的初始化部分是我们的第一个对TasksSession的AJAX调用。







TasksSession.getSortOrder(handleGetSortOrder);


这个是handleGetSortOrder函数：

function handleGetSortOrder(sort) {

drawSorting(sort);

TasksSession.getAllTasks(handleGetAllTasks);

}


这将获得一个sortorde作为调用返回的值，它随后将调用drawSorting来实施SortOrder（通过对适当的表格头设定一个'-'、'^'或'v'）并进行另外一个对TasksSession、getAllTasks调用，并在结束时调用handleGetAllTasks。







function handleGetAllTasks(alltasks) {
DWRUtil.removeAllRows("taskbody");
DWRUtil.addRows(
"taskbody",

alltasks, [

getId, getName,getPriority,
getDonePercent,

getCompletedDate, getDueDate,
getDelete
]
)

}


现在，handleGetAllTasks得到了一系列Task对象(alltasks) 并且使用了两个DWRUtil表格操作函数。第一个是removeAllRows, 它用于寻找指定id的表格，然后从表格中删除所有的数据行，第二个函数是addRows，它更复杂一些，它也是寻找指定id的表格，并通过alltasks数组中的值向表格中循环填充数据。对于数据行的每一列，它将会从函数数组中调用一个给定的函数，该函数就是最后一个参数，例如，getName的定义如下：


var getName=function(task) { return task.name; }


返回的只有Task名字的字符串值，但是您也可以在函数中返回HTML，在getId，我们为一个按钮返回了一个HTML字符串，这将在点击按钮时通过taskId调用editTask函数：







var getId=function(task) {
return '';


}


我们可以进一步看看editTask函数，这调用了TasksSession.getTask来获得选定的任务，并在获得结果的时候调用gotTask。







function editTask(taskid) {
TasksSession.getTask(gotTask,taskid);

}

function gotTask(task) {

currenttask=task;

currenttask.completedDate=dateHandler(currenttask.completedDate);

currenttask.dueDate=dateHandler(currenttask.dueDate);

DWRUtil.setValues(currenttask);

}


gotTask获得了作为结果的任务，它将数据字段转换为字符串（为了让它们更容易工作，因为DWR有时候过于聪明了，并将Java中不实用的Date类型转换为JavaScript中更不实用的Date类型），然后我们再次DWRUtil.setValues调用，这次将返回Task。DWR转换会将Task转换为一系列JavaScript属性，所以在setValues被调用的时候，适当的字段将会被填充。


当一个Task被保存或升级的时候，这一流程的反向过程将会发生，DWRUtil.getValues使用一个JavaScript对象的属性名称，在元素中寻找与id的相同的名称，然后抽取并指定元素在属性上的值。







function saveTask() {
DWRUtil.getValues(currenttask);

currenttask.completedDate=dateParser(currenttask.completedDate);
currenttask.dueDate=dateParser(currenttask.dueDate);

TasksSession.updateTask(savedTask,currenttask);

}


注意，我们是如何使用TasksSession.updateTask将字符串数据转换回JavaScript 数据类型的，回到TasksSessions的 Java代码中，我们可以得到：







public boolean updateTask(Task task) {
try {

tasks.update(task);

} catch (IOException ex) {

return false;

}
return true;

}


我们获得一个羽翼丰满的Java Task实例，并将其移交为一个参数，然后在DWR中使用转换器进行检查。


至此，我们看到了完整的往返旅行，从服务器，到表单，到编辑，以及保存而不必进行页面刷新。您可以看到执行过的改变，并立即反应到应用软件中的Swing界面。更进一步讲，一个相似的往返旅行发生在我们改变排序顺序的代码中，尽管这个值只是短暂地保存在TasksSession ，而并不会持续在服务器端。


如同您已经看到的，DWR显著地简化了Java和JavaScript交互工作的整个过程，最棒的地方在于它整合了一系列架构，而不是将自有的架构强加于开发者，正因为如此，它可能简单地整合DWR到我们的ToDoTasks例子项目中。


您可以在这下载这篇指南的源代码。


(责任编辑：铭铭 mingming_ky@126.com TEL：（010）68476636)
 
 

      



   










 























 
精彩图集

    


	  

		

		   node+express+ejs制作简单页面上手指南_node.js

		

			node+express+
		

	



		

		   js点亮星星评分并获取参数的js代码

		

			js点亮星星评
		

	



		

		   鼠标滑过出现预览的大图提示效果

		

			鼠标滑过出
		

	



		

		   查找Oracle高消耗语句的方法

		

			查找Oracle高
		

	



		

		   PHP开发者必须掌握的6个关键字

		

			PHP开发者必
		

	


		
	

	

    

	
	

 
	 


    



 

  

  
    
	
	

 




  
热门标签




 


 

  
赞助商链接