利用 DWR 开发基于 Ajax 的文件上载 portlet-2
|
- UID
- 1066743
|
利用 DWR 开发基于 Ajax 的文件上载 portlet-2
文件上载过程的客户端检索服务器和客户间就文件上载过程的通信是通过使用 Ajax 实现的。我们选用 Direct Web Remoting (DWR) 来提供 portlet 中的 Ajax 支持。DWR 是一种面向 Java 开发人员的理想框架，可用来将 Ajax 引入 Web 开发过程中，原因是它可以让浏览器中的 JavaScript 与服务器端的 Java 对象互动。要在 portlet 中使用 DWR，必须执行以下步骤 （更多有关如何配置 DWR 的信息，请参看 ）：
Direct Web Remoting 的妙处就在于此：客户机可以和服务器端的 Java 对象交互。
- 通过 WEB-INF/web.xml 配置 DwrServlet（参见 ）。
- 在 WEB-INF/dwr.xml 内定义一个或更多的客户机可与之通信的服务器端对象。在 中，FileUploadProgressListener 针对 DWR 定义以便客户机可以调用这个自动生成的 JavaScript。此外，只有 getFileUploadStatus 方法可以被客户机调用，另一个公共方法 update 则不允许被访问（请参看 ）。
- 将与 DWR 有关的 JavaScript 代码包括在 fileupload-view.jsp（参看 ）。
- 将 DWR 库包括在 portlet 应用程序。
清单 3. 在 WEB-INF/web.xml 中配置 DwrServlet 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <!-- DWR servlet -->
<servlet>
<servlet-name>dwr-invoker</servlet-name>
<display-name>DWR Servlet</display-name>
<servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class>
<init-param>
<param-name>debug</param-name>
<param-value>false</param-value>
</init-param>
</servlet>
<!-- DWR servlet mapping -->
<servlet-mapping>
<servlet-name>dwr-invoker</servlet-name>
<url-pattern>/dwr/*</url-patter>
</servlet-mappin>
|
清单 4. WEB-INF/dwr.xml1
2
3
4
5
6
7
8
9
10
11
12
| <!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN"
"http://getahead.org/dwr//dwr20.dtd">
<dwr>
<allow>
<create creator="new" javascript="FileUploadProgressListener">
<param name="class"
value="uk.ac.dl.esc.gtg.myportlets.fileupload.FileUploadProgressListener"/>
<include method="getFileUploadStatus"/>
</create>
</allow>
</dwr>
|
所示的 JSP 文件 fileupload-view.jsp 展示了 DWR 如何有助于从服务器端检索文件上载过程。一旦选中了文件并单击了 Upload 按钮（参看 ），fileupload_ajax_query_upload_status() 方法会被即刻调用。此方法之后会以异步模式调用 FileUploadProgressListener 的 getFileUploadStatus() 方法（参见 ）。DWR 的妙处就在于此：客户机可以和服务器端的 Java 对象交互。一旦收到响应，fileupload_ajax_show_upload_status() 方法会被调用以刷新此过程。如果文件上载没有完成，更新后的过程就会在两秒种之后检索。
清单 5. 文件上载 portlet JSP 文件 —— fileupload-view.jsp1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
| <%@ page session="false" %>
<%@ page contentType="text/html" %>
<%@ page import="javax.portlet.PortletURL" %>
<%@ taglib uri="http://java.sun.com/portlet" prefix="portlet" %>
<portlet:defineObjects/>
<script type="text/javascript"
src='<%= renderResponse.encodeURL(renderRequest.getContextPath()
+ "/dwr/interface/FileUploadProgressListener.js") %>'>
</script>
<script type="text/javascript"
src='<%= renderResponse.encodeURL(renderRequest.getContextPath()
+ "/dwr/engine.js") %>'>
</script>
<script type="text/javascript"
src='<%= renderResponse.encodeURL(renderRequest.getContextPath()
+ "/dwr/util.js") %>'>
</script>
<script type="text/javascript">
function fileupload_ajax_query_upload_status() {
FileUploadProgressListener.getFileUploadStatus (fileupload_ajax_show_upload_status);
return true;
}
function fileupload_ajax_show_upload_status(status) {
if (status == "100")
document.getElementById("fileupload_progress").innerHTML
="File successfully uploaded";
else {
document.getElementById("progressBar").style.display = "block";
document.getElementById("fileupload_progress").innerHTML=
"Uploading file: " + status
+ "% completed, please wait...";
document.getElementById("progressBarBoxContent").style.width =
parseInt(status * 3.5) + "px";
setTimeout(fileupload_ajax_query_upload_status, 2000);
}
return true;
}
</script>
<style type="text/css">
#progressBar {padding-top: 5px;}
#progressBarBox {width: 350px; height: 20px; border: 1px insert; background: #eee;}
#progressBarBoxContent {width: 0; height: 20px; border-right: 1px solid #444;
background: #9ACB34;}
</style>
<h4>File Upload</h4>
<!-- the upload form -->
<% PortletURL pUrl = renderResponse.createActionURL();
%>
<form action="<%= pUrl.toString() %>"
enctype="multipart/form-data" method="post"
onsubmit="setTimeout('fileupload_ajax_query_upload_status()', 1000)">
<input type="file" name="fileupload_upload" value="Upload File">
<input type="submit" value="Upload">
</form>
<%-- file upload progress bar --%>
<div id="fileupload_progress"></div>
<div id="progressBar" style="display: none;">
<div id="progressBarBoxContent"></div>
</div>
|
|
|
|
|
|
|
