DWR - (3) DWR에서 자바 VO 객체 사용하여 파라미터 전달하기

Published on: 2010.12.29 16:36 by krespo

DWRTutorial.war


지난 두번째의 튜토리얼에서는 자바 메소드를 호출할때 전달 파라미터 값으로 간단한 String만 파라미터로 전달했습니다.

이런 방식은 간단한 메소드 호출시에 사용하지만 실제로 프로젝트를 진행하다보면 전달인자가 하나인 경우는 거의 없습니다. 그리고 전달인자가 많아지면 적당한 VO객체를 만들어서 객체안에 데이터를 넣고 파라미터로 던집니다.
자바에서 이렇게 작업하듯 DWR에도 위와 같이 작업할 수 있습니다.

 예)  DwrVO vo = new DwrVO();
       vo.setTitle("테스트용");
       vo.setName("전근재");

       testMethod( vo );



1. 먼저 VO class를 만들겠습니다.
package net.tutorial.dwr.vo;

public class DwrVO {
	private String title;
	private String name;
	public String getTitle() {
		return title;
	}
	public void setTitle(String title) {
		this.title = title;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	@Override
	public String toString() {
		return "DwrVO [name=" + name + ", title=" + title + "]";
	}
	
	
}


2. 전달 파라미터를 DwrVO로 받는 테스트 method를 만듭니다.

package net.tutorial.dwr;

import net.tutorial.dwr.vo.DwrVO;

public class TutorialDWR {
	public String testDWR( String param ){
		return "parameter : " + param; 
	}
	public String paramTestDWR( DwrVO paramVO ) {
		return "Dwr VO : " + paramVO.getTitle() + " " + paramVO.getName();
	}
}


위와 같이 paramTestDWR 같은 메소드를 작성합니다. 이 메소드는 전달 파라미터로 DwrVO를 받고 그 내용을 출력하는 간단한 메소드 입니다.

3. dwr.xml에 convert 엘리먼트를 통해 VO로 사용할 클래스를 등록합니다.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE dwr PUBLIC 
	"-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN" 
	"http://getahead.org/dwr/dwr20.dtd">

<dwr>
	<allow>
  		<create creator="new" javascript="Tutorial">
  			<param name="class" value="net.tutorial.dwr.TutorialDWR"/>
  		</create>
  		<!-- 이와 같이 DwrVO를 bean으로 등록해 둡니다. -->
  	  	<convert converter="bean" match="net.tutorial.dwr.vo.DwrVO"/>
  	</allow>
</dwr>


4. html을 작성합니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
<script type='text/javascript' src='/DWRTutorial/dwr/interface/Tutorial.js'></script><!-- 반드시 작성자에 맞게 추가되어야 합니다. -->
<script type='text/javascript' src='/DWRTutorial/dwr/engine.js'></script>
<script type="text/javascript">
	function testDWR() {
		var name = document.getElementById("name").value;
		var title = document.getElementById("title").value;
		//이렇게 위에 convert로 사용한 vo class의 같은 field이름으로 json object를 만든다
		var obj = { "name" : name, "title": title}
		//이렇게 만든 json object를 파라미터로 던지면 DWR이 자동으로 jsonObject를 컨버팅하여
		//자바 class에서 DwrVO 를 사용할 수 있게 해준다
		Tutorial.paramTestDWR( obj, function( data ) {
			alert( data );
		});
		
	}
</script>

</head>
<body>
	<input type="text" id="name"/><br/>
	<input type="text" id="title"/><br/>
	<button onclick="testDWR()">테스트</button>
</body>
</html>


5. 결과


이렇게 간단하게 스크립트의 Json과 자바 VO 객체간의 convert 설정을 통해 맵핑을 시켰습니다.
이렇게 간단한 경우도 있지만, VO가 다른 VO를 가지고 있다거나, VO가 List형의 VO를 가지고 있다거나 할때는 어떻게 해야 할까요?
이것도 위와 같이 dwr.xml에 convert 설정을 해준뒤 Json형태로 변환하면 자동으로 자바 VO에 저장되게 되어있습니다.

dwr.xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE dwr PUBLIC 
	"-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN" 
	"http://getahead.org/dwr/dwr20.dtd">

<dwr>
	<allow>
  		<create creator="new" javascript="Tutorial">
  			<param name="class" value="net.tutorial.dwr.TutorialDWR"/>
  		</create>
  		<!-- 이와 같이 DwrVO를 bean으로 등록해 둡니다. -->
  	  	<convert converter="bean" match="net.tutorial.dwr.vo.DwrVO"/>
  		<convert converter="bean" match="net.tutorial.dwr.vo.InnerDwrVO"/>
  		<convert converter="bean" match="net.tutorial.dwr.vo.DwrListTestVO"/>
  		<convert converter="bean" match="net.tutorial.dwr.vo.DwrListVO"/>
  	</allow>
</dwr>


이렇게 해당 VO를 convert 설정을 통해 등록해 둡니다.

만약 VO가 VO를 가지고 있는 경우라면.
package net.tutorial.dwr.vo;

public class DwrVO {
	private String title;
	private String name;
	
	InnerDwrVO innerDwrVO;
	
	public DwrVO() {
		this.innerDwrVO = new InnerDwrVO();
	}
	//getter setter method 생략합니다.
}

위와 같이 DwrVO가 InnerDwrVO라는 VO를 가지고 있다면, json은 다음과 같이 만들어 주면 됩니다.
<script type="text/javascript">
	function testDWR() {
		var name = document.getElementById("name").value;
		var title = document.getElementById("title").value;

		var obj = { "name" : name, "title": title, "innerDwrVO" : {
				"innerName" : "전근재", "innerAddress" : "지구어딘가"
			} };

		Tutorial.paramTestDWR( obj, function( data ) {
			alert( data );
		});
		
	}
</script>

이런식으로 자바의 VO와 똑같은 구조로 만들면 됩니다.

또 다른 경우로 VO 가 List VO를 가지고 있는 경우라면
public class DwrListTestVO {
	List<DwrListVO> persons;
	public DwrListTestVO() {
		persons = new ArrayList<DwrListVO>();
	}
}
class DwrListVO {
	private String name;
	private int age;
}
//getter setter 추가해야합니다.

이런 구조라면 dwr.xml에 해당 VO들을 convert로 추가해 주고 json은 이렇게 만들어 주면 됩니다.
<script type="text/javascript">
	function testDWR() {
		//JSON 배열로 선언
		var obj = {"persons" : [ {"name" : "전근재",age : 27},{"name" : "d",age : 50}] };

		Tutorial.listTestDWR( obj, function( data ) {
			alert( data );
		});
		
	}
</script>


이렇게 하면 됩니다. 참 간단하죠?^^;;
신고
KimJinKyu | 2016.11.15 18:48 신고 | PERMALINK | EDIT/DEL | REPLY
4번 HTML 작성에서
<script type='text/javascript' src='/DWRTutorial/dwr/interface/Tutorial.js'></script><!-- 반드시 작성자에 맞게 추가되어야 합니다. -->
<script type='text/javascript' src='/DWRTutorial/dwr/engine.js'></script>
이 구문중에서 src= 해준 js 파일들은 무엇인지 여쭤봐도 될까요? 전혀 모르겠어서... 나오지도 않았구요
KimJinKyu | 2016.11.15 18:48 신고 | PERMALINK | EDIT/DEL | REPLY
4번 HTML 작성에서
<script type='text/javascript' src='/DWRTutorial/dwr/interface/Tutorial.js'></script><!-- 반드시 작성자에 맞게 추가되어야 합니다. -->
<script type='text/javascript' src='/DWRTutorial/dwr/engine.js'></script>
이 구문중에서 src= 해준 js 파일들은 무엇인지 여쭤봐도 될까요? 전혀 모르겠어서... 나오지도 않았구요
Name
Password
Homepage
Secret