科技行者

行者学院 转型私董会 科技行者专题报道 网红大战科技行者

知识库

知识库 安全导航

至顶网软件频道利用DWR开发基于Ajax的文件上载portlet (1)

利用DWR开发基于Ajax的文件上载portlet (1)

  • 扫一扫
    分享文章到微信

  • 扫一扫
    关注官方公众号
    至顶头条

Web 门户为用户提供了访问各种资源和服务的中心网关。与此同时,它们还为用户提供了与其他用户进行资源共享的平台。

作者:Xiaobo Yang 来源:赛迪网 2007年9月6日

关键字: Portlet AJAX DWR

  • 评论
  • 分享微博
  • 分享邮件

简介

Web 门户为用户提供了访问各种资源和服务的中心网关。与此同时,它们还为用户提供了与其他用户进行资源共享的平台。从照片到音频、视频文件再到研究用的科学数据集,用户可以共享任何内容。因此,文件上载是 Web 门户的一种基本的必备功能。

当今的 Web 门户在很大程度上依赖于 Java portlet 技术。虽然很多使用 Ajax 的开发人员都给出了各种各样的文件上载进度条解决方案,但我们还没有听说过哪个是基于 portlet 的。本文展示了如何开发基于 Ajax 的文件上载 portlet,此 portlet 能显示文件上载过程的进度条。此 portlet 对于那些想要共享大型音频、视频和科学文件的人士尤其有用。

要跟上本文的进度,您应该对使用 Java Servlets 和 JavaServer Pages (JSPs) 进行 Web 开发十分熟悉。而且,还必须了解门户和 portlet 技术的开发。当然,如果您对 portlet 技术还不怎么精通,也不要现在就放弃本文,因为您会在本文中看到对 portlet 技术的简单介绍,以及一些有用的资源可用来帮助您加快学习的进程。

在测试本文给出的这个文件上载 portlet 前,可以考虑尝试使用一种遵从 JSR 168 规范的门户框架,比如 IBM® WebSphere® Portal Server、Apache Pluto、eXo 平台或 Liferay Portal。我们在本文中使用的是 Apache Pluto 1.0.1、JDK 5.0 Update 10 和 Apache Ant Version 1.6.5。

portlet 的基本概念

一般地,可以将 portlet 视为一种 Web 组件。Portlet 与 servlet 类似,但前者更关注于应用程序的表示层。portlet 的典型输出是 HTML 片断,这些片断可由 Web 门户随后再组装起来。Portlet 本身由 portlet 容器管理。portlet 的主要特性包括:

多模式:portlet 可以在不同的模式下有不同的视图。例如,除了查看 模式,portlet 还支持编辑 模式以便用户可以设置其自身的首选项。

多个窗口状态:portlet 可以最小化、最大化等。

可定制参数:portlet 可以定义参数,而这些参数可以由用户定制。

要获得有关 portlet 的更多详细信息,可以参考 Java Portlet Specification 1.0,JSR 168(JSR 168 的后续版本 JSR 286 预计会于 2007 年后半年发布,其中包含了一些改进,比如 portlet 间通信和 portlet 过滤器)。相关链接,请参看 参考资料。

开始创建文件上载 portlet

文件上载 portlet 的基石是 Apache Commons FileUpload 包(本文也称之为 FileUpload)。除了支持 servlet 内的文件上载外,Apache Commons FileUpload Version 1.1 包还支持 portlet 中的文件上载。本文使用的是 Apache Commons FileUpload 版本 1.2。

基本上,开发文件上载进度条需要两步:

在服务器端检索文件上载过程

从门户服务器进行客户端的文件上载检索和显示

文件上载过程的服务器端检索

FileUpload 包支持使用侦听器检索文件上载过程。在文件上载 portlet 的 doUpload() 方法(称为 uk.ac.dl.esc.gtg.myportlets.fileupload.FileUploadPortlet,包括在本文 下载 部分所提供的源文件中),通过调用 setProgressListener() 方法为 PortletFileUpload 设置过程侦听器,如 清单 1 所示:

清单 1. 为文件上载包设置过程侦听器

DiskFileItemFactory factory = new DiskFileItemFactory(); 
PortletFileUpload pfu = new PortletFileUpload(factory); 
pfu.setSizeMax(uploadMaxSize); // Maximum upload size
pfu.setProgressListener(new FileUploadProgressListener());

侦听器 FileUploadProgressListener(参见 清单 2)可实现 org.apache.commons.fileupload.ProgressListener 接口。update() 方法自动由 FileUpload 包调用以刷新有关所传输字节数的最新信息。在本文的实现中,每传输 10KB 数据则更新一次进度。这有助于防止更新进行得太频繁。 getFileUploadStatus() 方法用来计算当前文件上载进度,可由客户机通过 DWR 调用(在下一节讨论)。

清单 2. 检索文件上载过程的文件上载侦听器

package uk.ac.dl.esc.gtg.myportlets.fileupload; 

import java.text.NumberFormat; 

import org.apache.commons.fileupload.ProgressListener; 
import org.apache.commons.logging.Log; 
import org.apache.commons.logging.LogFactory; 

public class FileUploadProgressListener implements ProgressListener {
private static Log log = LogFactory.getLog(FileUploadProgressListener.class); 

private static long bytesTransferred = 0; 

private static long fileSize = -100; 

private long tenKBRead = -1; 

public FileUploadProgressListener() {
}

public String getFileUploadStatus() {
// per looks like 0% - 100%, remove % before submission
String per = NumberFormat.getPercentInstance().format(
(double) bytesTransferred / (double) fileSize); 
return per.substring(0, per.length() - 1); 
}

public void update(long bytesRead, long contentLength, int items) {
// update bytesTransferred and fileSize (if required) every 10 KB is
// read
long tenKB = bytesRead / 10240; 
if (tenKBRead == tenKB)
return; 
tenKBRead = tenKB; 

bytesTransferred = bytesRead; 
if (fileSize != contentLength)
fileSize = contentLength; 
}

}

文件上载过程的客户端检索

服务器和客户间就文件上载过程的通信是通过使用 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(参见 清单 3)。

在 WEB-INF/dwr.xml 内定义一个或更多的客户机可与之通信的服务器端对象。在 清单 4 中,FileUploadProgressListener 针对 DWR 定义以便客户机可以调用这个自动生成的 JavaScript。此外,只有 getFileUploadStatus 方法可以被客户机调用,另一个公共方法 update 则不允许被访问(请参看 清单 2)。

将与 DWR 有关的 JavaScript 代码包括在 fileupload-view.jsp(参看 清单 5)。

将 DWR 库包括在 portlet 应用程序。

清单 3. 在 WEB-INF/web.xml 中配置 DwrServlet

<!-- 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>
查看本文来源
    • 评论
    • 分享微博
    • 分享邮件
    邮件订阅

    如果您非常迫切的想了解IT领域最新产品与技术信息,那么订阅至顶网技术邮件将是您的最佳途径之一。

    重磅专题
    往期文章
    最新文章