《DWR高级应用》PPT课件.ppt

第十一章,DWR高级应用,上章回顾,DWR配置过程 导入jar包 在web.xml 配置DWRServlet DWR使用步骤 编写Java类 配置dwr.xml文件 使用dwr测试页测试Java类 应用在网页中 JSON Suggest Box的核心函数：jsonSuggest(); Impromptu提供了种类丰富的对话框,本章目标,理解DWR框架标记原理 掌握DWR框架调用不同形式的JAVA方法,工作任务,外来人员信息查询,相关实践15-1,使用MyEclipse新建Web项目“dwrslider”，将“jquery-1.3.1.min.js”、“jquery-ui-1.7.1.custom.min.js”、“ui.slider.js”复制到项目“webroot/js”目录下。 将“ui.theme.css”、“ui.slider.css”复制到项目“webroot/css”目录下。,相关实践15-2,服务器端程序 第一步，在这里我们继续使用上一个专题开发的Person类。 为了便于程序测试，在类初始化时向数据源新增200条人员记录。点击这里查看源代码 第二步，编写PageInfo类。PageInfo会根据 “记录总数”、“每页记录数”、“页码”三个参数，就能计算出程序所需要的所有分页信息。客户端只需访问PageInfo对象就可以得到某页显示时所需的所有数据与分页信息。 点击这里查看源代码,相关实践15-3,第三步，在Person类中新增getPageResult()方法，通过“页码”获取指定页的分页数据. /* * 获取指定页数据 * param pageno 页码 * return 指定页PageInfo对象 */ public static PageInfo getPageResult(int pageno) /按每页10条数据进行分页，获取PageInfo对象 PageInfo pi = new PageInfo(person.size(), 10, pageno); /为防止出现“索引越界”异常，需要判断是否是最后一页数据 if (pi.getStartindex() + pi.getPagesize() pi.getRecordcount() pi.setList(person.subList(pi.getStartindex(), pi.getRecordcount(); else pi.setList(person.subList(pi.getStartindex(), pi.getStartindex() + pi.getPagesize(); return pi; ,相关实践15-4,第四步，打开项目中“dwr.xml”，在“javascript=person”的标记中加入以下配置信息，将getPageResult()方法对客户端开放： ,相关实践15-5,在上一章我们学习使用DWR调用Java方法 Person.addPerson() Province.getAllProvince() Province.findCities() 细心地你可能已经注意到，这些方法的参数与返回值都是基础数据类型(int 、String、float.)，客户端JavaScript脚本可以直接传递这类参数或者处理这类响应数据。而getPageResult()方法则不同，它的返回值是JavaBean对象，显然，对于这种结构化数据客户端JavaScript无法直接处理，这该怎么办呢？,相关实践15-6,解决问题的原理很简单，把getPageResult()方法返回的PageInfo对象解析成JavaScript能够理解的JSON对象，问题就能迎刃而解。幸运的是，在DWR框架中，只需要在“dwr.xml”文件的标记中加入标记,DWR就可以自动将任何Java方法返回PageInfo对象自动转换为JSON对象： ,相关实践15-7,标记的功能十分强大，它不仅仅能将方法返回的JavaBean对象转换为JSON对象，就连List、Set、Map这种集合也能被转换为JSON对象。在PageInfo类中list属性保存了当前页面数据，list属性中每个列表项均为Person对象。我们在“dwr.xml”文件中增加以下配置信息，DWR自动将列表中遇到的任何Person对象转换为JSON对象后放入数组返回到客户端： ,相关实践15-8,这里贴出完整的dwr.xml源码以供参考： ,相关实践15-9,下图是JavaScript通过DWR调用“Person.getPageResult(1)”后返回的JSON数据结构,相关实践15-10,开发Web页面 第一步，在webroot目录下新建“index.html”文件，定义页面HTML元素。 点击这里查看源文件,相关实践15-11,第二步，加载滑动条。 $( function() /加载滑块，slider()方法是jQueryUI对jQuery的扩展方法 $(“#slider“).slider(); ); ,相关实践15-12,第三步，将滑块与分页数据绑定。点击查看源文件 $(“.ui-slider“).bind(slidechange, function(e) var p = person; /通过DWR调用getPageResult获取指定页数据 person.getPageResult( /将当前滑块数值(页码)传递给getPageResult()方法 $(“.ui-slider“).slider(option,value) , /回调函数第一个参数就是PageInfo被DWR解析后的JSON对象 function(pageinfo) var innerhtml = ; /设置滑块最小值为1 $(“.ui-slider“).slider(option,min,1); /设置滑块最大值为页数 $(“.ui-slider“).slider(option,max,pageinfo.pagecount);,相关实践15-13,/遍历当前页数据 /将人员信息表格中将标识位替换为对应的实际数据 for(i = 0 ; i pageinfo.list.length ; i+) /填充分页区域，将标识位替换为实际分页信息 /保存当前页分页信息 prepage = pageinfo.prepage;/上一页页码 nextpage = pageinfo.nextpage;/下一页页码 firstpage = 1;/第一页页码 lastpage = pageinfo.pagecount;/最后一页页码 $(#pageinfo).html(pageinfo_innerhtml); $(#data).html(innerhtml);,相关实践15-14,第四步，在页面初始化时显示第一页数据。 $( function() $(“.ui-slider“).slider(option , value , 1); /触发slidechange事件 $(“.ui-slider“).trigger(slidechange); ) ,相关实践15-15,总结,对于返回JavaBean的Java方法，在dwr.xml中配置，DWR便自动将JavaBean转换为JSON对象。 对于返回List、Set、Map集合的Java方法，在dwr.xml中配置,DWR自动将集合中每个元素转换为JSON对象后依次放入数组。,DWR应用技巧,本节我们将DWR框架进行总结，通过例程指导学生如何利用DWR来调用各种形式的Java方法。点击查看示例类源代码 示例类SampleMethodClass中引用的SimpleJavaBean类是一个标准JavaBean，它只有a与b两个属性。 点击查看源代码,调用返回简单类型的方法-1,dwr.xml配置文件 ,调用返回简单类型的方法-2,JavaScript调用： function callSendSimpleParameter() smc.sendSimpleParameter(TestValue , function() alert(“本次操作成功“); ); 如果sendSimpleParameter()无返回值或者客户端无需对sendSimpleParameter()返回值进行操作，smc.sendSimpleParameter()方法最后一个参数可以省略。,调用返回简单类型的方法-1,dwr.xml配置文件： ,调用返回简单类型的方法-2,JavaScript调用： function callReturnSimple() smc.returnSimple( function(text) alert(text); ); ,调用包含JavaBean参数的方法-1,dwr.xml配置文件： ,调用包含JavaBean参数的方法-2,JavaScript调用： function callSendJBParameter() smc.sendJBParameter(a:hello!, b:0); 当Java方法的某个参数为JavaBean对象，JavaScript调用时对应参数需要传递JSON对象，JSON对象中属性名与值类型要与JavaBean一一对应。 sendJBParameter()方法没有返回值，因此JavaScript调用时忽略了回调函数。,调用返回JavaBean的方法-1,dwr.xml配置文件： ,调用返回JavaBean的方法-2,returnJB()方法返回SimpleJavaBean对象，因为SimpleJavaBean对象并非简单类型，在响应到客户端后JavaScript引擎会因为不了解数据结构而无法解析。因此，我们必须要在配置文件中显示声明标记，通知DWR将任何方法返回的SimpleJavaBean对象转换为JavaScript能够解析的JSON对象。例如，客户端在调用resultJB()方法后将返回下面的JSON对象： a:STRING A,b:0,调用返回JavaBean的方法-3,JavaScript调用： function callReturnJB() smc.returnJB( function(sjb) alert(sjb.a + “:“ + sjb.b); ); ,调用返回List、Set集合的方法-1,dwr.xml配置文件： ,调用返回List、Set集合的方法-2,DWR同样支持返回List集合的方法，当在配置文件中加入标记后，DWR自动将List中SimpleJavaBean对象转换为JavaScript能够解析的JSON对象，放入数组后响应到客户端。例如，下面是调用returnList()方法后返回JSON对象： a:user0,b:0, a:user1,b:1, a:user2,b:2, a:user3,b:3, . ,调用返回List、Set集合的方法-3,JavaScript调用： function callReturnList() smc.returnList( function(list) for(i = 0 ; i ,调用返回Map集合的方法-1,dwr.xml配置文件： ,调用返回Map集合的方法-2,与返回List相似，DWR同样支持返回Map的方法。当在配置文件中加入标记后，DWR自动将List中SimpleJavaBean对象转换为JavaScript能够解析的JSON对象