dwr学习之 二、dwr功能演示

dwr学习 之 一、dwr+spring的简单集成

dwr学习之 二、dwr功能演示

 

文中代码均已简化。

1. hello world

         定义DWRDemo类，并使用注解声明方式。

@Service
@RemoteProxy(name = "DWRDemo")
public class DWRDemo {

	private static final Logger LOGGER = LoggerFactory.getLogger(DWRDemo.class);

	/**
	 * 1. 基本调用，参数字符串，返回字符串
	 * 
	 * @param test
	 * @return
	 * @throws Exception
	 */
	@RemoteMethod
	public String sayHello(String test) throws Exception {
		LOGGER.info("DWRDemo sayHello, test: " + test);
		if (test.equals("error")) {
			throw new Exception("出现异常");
		}
		return "Java: " + test;
	}
}

 

 

 

    js端首先导入dwr所需的js文件

<script type='text/javascript' src='<%=request.getContextPath() %>/dwr/interface/DWRDemo.js'></script>
<script type='text/javascript' src='<%=request.getContextPath() %>/dwr/engine.js'></script>
<script type='text/javascript' src='<%=request.getContextPath() %>/dwr/util.js'></script>

 

 

    js调用DWRDemo的sayHello方法：

DWRDemo.sayHello("我是js", function(data){
	alert(data);
});

 

 

    还可以定义超时时间，和错误方法：

DWRDemo.sayHello("error", {
	callback: function(data){
		alert(data);
	},
	timeout: 1000,
	errorHandler:function(error){
		alert(error);
	}
});

 

 

 

2. 调用参数为实体类

         使用@DataTransferObject( 或dwr:conver t) 声明实体类。

package liming.student.manager.web.model;

import org.directwebremoting.annotations.DataTransferObject;
import org.directwebremoting.io.FileTransfer;
import org.springframework.web.multipart.MultipartFile;

@DataTransferObject
public class StudentForm extends GeneralForm {
	private String studentName;
	private int studentSex;
	private String studentBirthday;
	private FileTransfer studentPhoto_dwr;
	private String classId;
	private String placeId;

}

 

 

 

    java方法使用此实体类作参数：

@Service
@RemoteProxy(name = "StudentDWR")
public class StudentDWR {

	@RemoteMethod
	public boolean addStudent(StudentForm form) {

		//代码省略

	}
}

 

 

 

    js端调用：

var student = {
	studentName: $("#studentName").val(),
	studentSex: $("#studentSex").val(),
	studentBirthday: $("#studentBirthday").val(),
	studentPhoto_dwr: dwr.util.getValue("studentPhoto"),
	classId: "1",
	placeId: "1"
};
StudentDWR.addStudent(student, function(data){
	if( data == true ){
		alert("dwr新增学生成功！");
		window.location = "<%=request.getContextPath()%>/student/list.do";
	}else{
		alert("dwr新增学生失败！");
	}
});

 

 

 

3. 获取实体类或列表

         使用@DataTransferObject( 或dwr:conver t) 声明实体类。

@DataTransferObject
public class StudentEntity implements Serializable {
	private String studentId;
	private String studentName;
	private int studentSex;
	private Date studentBirthday;
	private String photoId;
	private String classId;
	private String placeId;

}

 

 

 

         java方法直接返回此实体类或列表：

@RemoteMethod
public List<StudentEntity> getStudentBaseAllList() {
	return this.studentService.getStudentBaseAllList(0, StudentForm.DEFAULT_PAGE_SEZE, "");
}

 

 

 

         在js端直接调用此方法后，得到的数据为json格式的object，可以直接调用属性。

StudentDWR.getStudentBaseAllList(function(data){ 
	studentList = data;
	for(var i=0; i<data.length; i++){
		var studentId = data[i].studentId;
		var studentName = data[i].studentName;
		var studentSex = data[i].studentSex;
		var studentBirthday = data[i].studentBirthday;
		var classId = data[i].classId;
		var placeId = data[i].placeId;
		var photoId = data[i].photoId;
	}
});

 

 

 

4. 导入页面

         java代码写法：

@RemoteMethod
public String includeHtmlPage(String url) throws ServletException, IOException {
	LOGGER.info("DWRDemo includeHtmlPage, url: " + url);
	WebContext wctx = WebContextFactory.get();
	return wctx.forwardToString(url);
}

 

 

 

         js调用：

DWRDemo.includeHtmlPage("/templet/add.jsp", function(data) {
    dwr.util.setValue("forward", data, { escapeHtml:false });
});

 

 

        html中定义一个id为forward的div：

<div id="forward"></div>

 

 

 

5. 上传文件

       使用DWR上传文件需要注意的几点：

  1.  java方法的参数必须是BufferedImage，InputStream，FileTransfer三种中其中一个，一般推荐使用FileTransfer，可以获取文件名、文件类型、和内置的inputStream；

  2.  js端使用dwr.util.getValue方法获取的obj当参数；

  3.  不能与springMVC的上传文件兼容。（不能在spring配置文件中声明org.springframework.web.multipart.commons.CommonsMultipartResolver的bean）；

  4.  web.xml中的filter-mapping的url-pattern尽量不要使用/*，写成具体的，例如：*.do。

 

       下面代码为将上传的文件使用createStringPhoto方法保存到数据库，并且进行缩小并返回。

@RemoteMethod
public BufferedImage uploadPhtoFile(FileTransfer file) {
	try {
		if (file.getSize() > Integer.MAX_VALUE) {
			return null;
		}
		LOGGER.info("DWRDemo uploadPhtoFile, file: " + file.toString());
		InputStream input = file.getInputStream();
		byte[] photoData = new byte[(int) file.getSize()];
		input.read(photoData);
		input.close();
		this.studentService.createStringPhoto(photoData, file.getFilename());
		BufferedImage image = scaleImageBytesToBufferedImage(photoData, 100, 100);
		return image;
	} catch (Exception e) {
		e.printStackTrace();
	}
	return null;
}

public static BufferedImage scaleImageBytesToBufferedImage(byte[] data, int width, int height) throws IOException {
	BufferedImage buffered_oldImage = ImageIO.read(new ByteArrayInputStream(data));
	int imageOldWidth = buffered_oldImage.getWidth();
	int imageOldHeight = buffered_oldImage.getHeight();
	double scale_x = (double) width / imageOldWidth;
	double scale_y = (double) height / imageOldHeight;
	double scale_xy = Math.min(scale_x, scale_y);
	int imageNewWidth = (int) (imageOldWidth * scale_xy);
	int imageNewHeight = (int) (imageOldHeight * scale_xy);
	BufferedImage buffered_newImage = new BufferedImage(imageNewWidth, imageNewHeight, BufferedImage.TYPE_INT_RGB);
	buffered_newImage.getGraphics().drawImage(buffered_oldImage.getScaledInstance(imageNewWidth, imageNewHeight, BufferedImage.SCALE_SMOOTH), 0,
			0, null);
	buffered_newImage.getGraphics().dispose();
	return buffered_newImage;
}

 

 

      html代码：

<input type="file" id="uploadImage"/>
<input type="button" onclick="uploadFile()" value="dwr上传文件"/>
<img id="image"/>

 

 

 

      js代码，使用dwr.util.getValue获取文件对象上传文件，使用dwr.util.setValue方法设置显示图片。

function uploadFile(){
	var image = dwr.util.getValue('uploadImage');
	DWRDemo.uploadPhtoFile(image, function(data){
		if( data != null ){
			dwr.util.setValue('image', data);
		}		
	});
}

 

 

 

6. 下载文件

         在java方法中，使用字节数组构造出一个FileTransfer对象，并返回。

         在js端，将获取到的数据当参数，调用dwr.engine.openInDownload即可。

 

java代码：

@RemoteMethod
public FileTransfer downloadPhotoFile(String studentId) throws Exception {
	LOGGER.info("DWRDemo downloadPhotofFile, studentId: " + studentId);
	PhotoEntity photoEntity = this.studentService.getPhotoDataByStudentId(studentId);
	if (photoEntity != null && photoEntity.getPhotoData() != null && photoEntity.getPhotoData().length > 0) {
		byte[] data = photoEntity.getPhotoData();
		String fileName = photoEntity.getFileName();
		fileName = fileName == null ? "照片" + studentId + ".png" : fileName;
		fileName = URLEncoder.encode(fileName, "UTF-8");
		return new FileTransfer(fileName, "application/octet-stream;charset=UTF-8", data);
	} else {
		return null;
	}
}

 

      js代码：

DWRDemo.downloadPhotoFile("10000032", function(data){
	if( data != null ){
		dwr.engine.openInDownload(data);
	}else{
		alert("此照片不存在");
	}
});

 

dwr学习 之 一、dwr+spring的简单集成

dwr学习之 二、dwr功能演示

评论

3 楼 It-eyetor 2018-01-05  

请问楼主访问controller中的@RequestMapping方法是如何打开对应页面的，你用的是什么技术。springmvc不是应该要有return "页面名称"吗，本人菜鸟勿怪

2 楼 LinApex 2014-07-18  

刚好需要哦，多谢

1 楼 ye229053339 2013-03-18  

不错，方法很详细，但如何从jsp页面传回一个实体