dwr学习之 二、dwr功能演示

文中代码均已简化。

1. hello world
定义DWRDemo类，并使用注解声明方式。

Java代码
1.@Service
2.@RemoteProxy(name = "DWRDemo")
3.public class DWRDemo {
4.
5. private static final Logger LOGGER = LoggerFactory.getLogger(DWRDemo.class);
6.
7. /**
8. * 1. 基本调用，参数字符串，返回字符串
9. *
10. * @param test
11. * @return
12. * @throws Exception
13. */
14. @RemoteMethod
15. public String sayHello(String test) throws Exception {
16. LOGGER.info("DWRDemo sayHello, test: " + test);
17. if (test.equals("error")) {
18. throw new Exception("出现异常");
19. }
20. return "Java: " + test;
21. }
22.}
@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文件

Html代码
1.<script type='text/javascript' src='<%=request.getContextPath() %>/dwr/interface/DWRDemo.js'></script>
2.<script type='text/javascript' src='<%=request.getContextPath() %>/dwr/engine.js'></script>
3.<script type='text/javascript' src='<%=request.getContextPath() %>/dwr/util.js'></script>
<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方法：

Js代码
1.DWRDemo.sayHello("我是js", function(data){
2. alert(data);
3.});
DWRDemo.sayHello("我是js", function(data){
alert(data);
});



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

Js代码
1.DWRDemo.sayHello("error", {
2. callback: function(data){
3. alert(data);
4. },
5. timeout: 1000,
6. errorHandler:function(error){
7. alert(error);
8. }
9.});
DWRDemo.sayHello("error", {
callback: function(data){
alert(data);
},
timeout: 1000,
errorHandler:function(error){
alert(error);
}
});





2. 调用参数为实体类
使用@DataTransferObject( 或dwr:conver t) 声明实体类。

Java代码
1.package liming.student.manager.web.model;
2.
3.import org.directwebremoting.annotations.DataTransferObject;
4.import org.directwebremoting.io.FileTransfer;
5.import org.springframework.web.multipart.MultipartFile;
6.
7.@DataTransferObject
8.public class StudentForm extends GeneralForm {
9. private String studentName;
10. private int studentSex;
11. private String studentBirthday;
12. private FileTransfer studentPhoto_dwr;
13. private String classId;
14. private String placeId;
15.
16.}
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方法使用此实体类作参数：

Java代码
1.@Service
2.@RemoteProxy(name = "StudentDWR")
3.public class StudentDWR {
4.
5. @RemoteMethod
6. public boolean addStudent(StudentForm form) {
7.
8. //代码省略
9.
10. }
11.}
@Service
@RemoteProxy(name = "StudentDWR")
public class StudentDWR {

@RemoteMethod
public boolean addStudent(StudentForm form) {

//代码省略

}
}





js端调用：

Js代码
1.var student = {
2. studentName: $("#studentName").val(),
3. studentSex: $("#studentSex").val(),
4. studentBirthday: $("#studentBirthday").val(),
5. studentPhoto_dwr: dwr.util.getValue("studentPhoto"),
6. classId: "1",
7. placeId: "1"
8.};
9.StudentDWR.addStudent(student, function(data){
10. if( data == true ){
11. alert("dwr新增学生成功！");
12. window.location = "<%=request.getContextPath()%>/student/list.do";
13. }else{
14. alert("dwr新增学生失败！");
15. }
16.});
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) 声明实体类。

Java代码
1.@DataTransferObject
2.public class StudentEntity implements Serializable {
3. private String studentId;
4. private String studentName;
5. private int studentSex;
6. private Date studentBirthday;
7. private String photoId;
8. private String classId;
9. private String placeId;
10.
11.}
@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方法直接返回此实体类或列表：

Java代码
1.@RemoteMethod
2.public List<StudentEntity> getStudentBaseAllList() {
3. return this.studentService.getStudentBaseAllList(0, StudentForm.DEFAULT_PAGE_SEZE, "");
4.}
@RemoteMethod
public List<StudentEntity> getStudentBaseAllList() {
return this.studentService.getStudentBaseAllList(0, StudentForm.DEFAULT_PAGE_SEZE, "");
}





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

Js代码
1.StudentDWR.getStudentBaseAllList(function(data){
2. studentList = data;
3. for(var i=0; i<data.length; i++){
4. var studentId = data[i].studentId;
5. var studentName = data[i].studentName;
6. var studentSex = data[i].studentSex;
7. var studentBirthday = data[i].studentBirthday;
8. var classId = data[i].classId;
9. var placeId = data[i].placeId;
10. var photoId = data[i].photoId;
11. }
12.});
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代码写法：

Java代码
1.@RemoteMethod
2.public String includeHtmlPage(String url) throws ServletException, IOException {
3. LOGGER.info("DWRDemo includeHtmlPage, url: " + url);
4. WebContext wctx = WebContextFactory.get();
5. return wctx.forwardToString(url);
6.}
@RemoteMethod
public String includeHtmlPage(String url) throws ServletException, IOException {
LOGGER.info("DWRDemo includeHtmlPage, url: " + url);
WebContext wctx = WebContextFactory.get();
return wctx.forwardToString(url);
}





js调用：

Js代码
1.DWRDemo.includeHtmlPage("/templet/add.jsp", function(data) {
2. dwr.util.setValue("forward", data, { escapeHtml:false });
3.});
DWRDemo.includeHtmlPage("/templet/add.jsp", function(data) {
dwr.util.setValue("forward", data, { escapeHtml:false });
});



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

Html代码
1.<div 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方法保存到数据库，并且进行缩小并返回。

Java代码
1.@RemoteMethod
2.public BufferedImage uploadPhtoFile(FileTransfer file) {
3. try {
4. if (file.getSize() > Integer.MAX_VALUE) {
5. return null;
6. }
7. LOGGER.info("DWRDemo uploadPhtoFile, file: " + file.toString());
8. InputStream input = file.getInputStream();
9. byte[] photoData = new byte[(int) file.getSize()];
10. input.read(photoData);
11. input.close();
12. this.studentService.createStringPhoto(photoData, file.getFilename());
13. BufferedImage image = scaleImageBytesToBufferedImage(photoData, 100, 100);
14. return image;
15. } catch (Exception e) {
16. e.printStackTrace();
17. }
18. return null;
19.}
20.
21.public static BufferedImage scaleImageBytesToBufferedImage(byte[] data, int width, int height) throws IOException {
22. BufferedImage buffered_oldImage = ImageIO.read(new ByteArrayInputStream(data));
23. int imageOldWidth = buffered_oldImage.getWidth();
24. int imageOldHeight = buffered_oldImage.getHeight();
25. double scale_x = (double) width / imageOldWidth;
26. double scale_y = (double) height / imageOldHeight;
27. double scale_xy = Math.min(scale_x, scale_y);
28. int imageNewWidth = (int) (imageOldWidth * scale_xy);
29. int imageNewHeight = (int) (imageOldHeight * scale_xy);
30. BufferedImage buffered_newImage = new BufferedImage(imageNewWidth, imageNewHeight, BufferedImage.TYPE_INT_RGB);
31. buffered_newImage.getGraphics().drawImage(buffered_oldImage.getScaledInstance(imageNewWidth, imageNewHeight, BufferedImage.SCALE_SMOOTH), 0,
32. 0, null);
33. buffered_newImage.getGraphics().dispose();
34. return buffered_newImage;
35.}
@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代码：

Html代码
1.<input type="file" id="uploadImage"/>
2.<input type="button" οnclick="uploadFile()" value="dwr上传文件"/>
3.<img id="image"/>
<input type="file" id="uploadImage"/>
<input type="button" οnclick="uploadFile()" value="dwr上传文件"/>
<img id="image"/>





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

Js代码
1.function uploadFile(){
2. var image = dwr.util.getValue('uploadImage');
3. DWRDemo.uploadPhtoFile(image, function(data){
4. if( data != null ){
5. dwr.util.setValue('image', data);
6. }
7. });
8.}
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代码：

Java代码
1.@RemoteMethod
2.public FileTransfer downloadPhotoFile(String studentId) throws Exception {
3. LOGGER.info("DWRDemo downloadPhotofFile, studentId: " + studentId);
4. PhotoEntity photoEntity = this.studentService.getPhotoDataByStudentId(studentId);
5. if (photoEntity != null && photoEntity.getPhotoData() != null && photoEntity.getPhotoData().length > 0) {
6. byte[] data = photoEntity.getPhotoData();
7. String fileName = photoEntity.getFileName();
8. fileName = fileName == null ? "照片" + studentId + ".png" : fileName;
9. fileName = URLEncoder.encode(fileName, "UTF-8");
10. return new FileTransfer(fileName, "application/octet-stream;charset=UTF-8", data);
11. } else {
12. return null;
13. }
14.}
@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代码：

Js代码
1.DWRDemo.downloadPhotoFile("10000032", function(data){
2. if( data != null ){
3. dwr.engine.openInDownload(data);
4. }else{
5. alert("此照片不存在");
6. }
7.});

原文 ：http://limingnihao.iteye.com/blog/1074204