DWR - (2) JSP + Eclipse를 통해 DWR 사용하기

Published on: 2010. 12. 29. 11:52 by louis.dev
이번시간에는 eclipse IDE에서 DWR을 사용하는 방법을 진행해 보겠습니다.
작업순서

1. eclipse를 실행시키고 DynamicWebProject를 선택하여 프로젝트를 생성합니다.

2. DWR라이브러리를 다운로드 받은 후 WebContent/WEB-INF/lib 디렉토리에 복사합니다.
DWR이 3. 버전까지 나왔지만 아직까지 3버전은 버그가 많은것 같아 2버전으로 진행하겠습니다.
그리고 DWR과 dependency관계인 apache의 commons-loggin 을 다운받아 이것도 lib에 풀어 넣습니다.

원래 jar파일 이름은 dwr.jar파일이지만, 나중에 프로젝트에 몇버전이 적용되어 있는지 확이하기 위해 라이브 러리 이름뒤에 버전을 붙여 두었습니다.

3. DWR에서 불러 올수 있는 클래스를 만듭니다.

아래의 코드와 같이 net.tutorial.dwr 패키지를 생성후 TutorialDWR 클래스를 생성합니다. 그후 testDWR이라는 메소드를 생성하고 다음과 같이 생성합니다.
>package net.tutorial.dwr;

public class TutorialDWR {
	public String testDWR( String param ){
		return "parameter : " + param; 
	}
}


view page에서 TutorialDWR의 testDWR을 콜해서 제대로 return값이 나오는지 확인하면 될겁니다.

4. 위에서 작성한 TutorialDWR클래스와 view page에서 사용할 자바스크립트 Object 이름과 맵핑을 시켜줍니다.
WEB-INF 디렉토리 아래에 dwr.xml을 만듭니다.(web.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>
  	</allow>
</dwr>

위와 같이 설정합니다.
1) create : Tutorial 이라는 이름으로 자바 Object를 생성합니다.
2) param : net.tutorial.dwr.TutorialDWR이라는 자바 클래스를 맵핑시키겠다는 뜻입니다. 즉 viewpage에서는 Tutorial.testDWR()로 method를 부르면 이와 매핑된 TutorialDWR이라는 클래스의 testDWR method가 실행 되는것입니다.

5. web.xml에 다음을 추가합니다.

<servlet>
  <servlet-name>dwr-invoker</servlet-name>
  <servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class>
  <init-param>
     <param-name>debug</param-name>
     <param-value>true</param-value>
  </init-param>
</servlet>

<servlet-mapping>
  <servlet-name>dwr-invoker</servlet-name>
  <url-pattern>/dwr/*</url-pattern>
</servlet-mapping>


이로서 DWR을 사용하기 위한 세팅은 모두 끝났습니다.

DWR은 편리하게 dwr에 매핑된 class가 제대로 동작하는지 알수 있게 테스트페이지를 자동으로 만들어줍니다. 테스트 페이지에 접속하여 제대로 해당 method가 작동중인지 확인해 보겠습니다.

1. 서버를 작동후 http://${domain}/${context}/dwr 로 접근하시면 됩니다. 보통 로컬에서 테스트함으로 저는 http://localhost:8080/DWRTutorial/dwr 로 접근해 보겠습니다.

 


다음과 같은 페이지가 뜨면 DWR세팅이 제대로 된것입니다. 다음과 같은 페이지가 뜨지 않는다면 DWR세팅이 잘못된 것이니 처음부터 차근차근 확인해 보세요~^^

위의 페이지에서 Tutorial이라는 글씨를 클릭합니다. 위 스샷에서 보실수 있듯이 Tutorial = net.tutorial.dwr.TutorialDWR 이 맵핑 되어 있는것을 알수가 있습니다. 

 


위와 같은 텍스트로 된 페이지를 확인 하실수 있습니다. 하단의 There are 10 declared methods 에 자바 클래스에 구현되어 있는 method 들이 리스트 되어 있습니다. ( 자바의 모든 class 는 Object Class를 상속받고 있기 때문에 Object에서 구현되어 있는 wait, equals, toString.. 메소스 들을 보실수 있습니다. 하지만 이 메소스들은 구현되어 있지 않기 때문에 빨간 글씨로 warning이 표시되면서 execute버튼을 눌러도 실행이 되지 않습니다.

이중 Warning이 뜨지 않은 testDWR 메소드에 파라미터로 아무거나 입력하고 Execute를 누르시면 해당 메소드를 실행후 리턴되는 값을 확인 할 수 있습니다.


이로서 DWR 테스트가 완료 되었습니다. 그럼 이제 실제 view page에서 DWR을 적용하여 사용해 보겠습니다.
DWR을 view Page에서 사용하려면 위 스크린샷의 빨간 칸이 쳐져 있는 js파일을 viewpage에 추가해야 합니다. (실제로 저 js파일들이 생성되는것은 아니고 dwr이 가상으로 만들어주는 js파일입니다. 필수는 Tutorial.js-사용자분이 등록한 이름의 js, engine.js이고 선택옵션은 utli.js입니다.)

eclipse의 WebContent밑에 test.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 buttonClick() {
		var text = document.getElementById("text1").value;
		Tutorial.testDWR( text, callbackFunction);		//TutorialDWR클래스와 매핑된 Tutorial Object를 
														//이용하여 testDWR 메소드를call 합니다.
		/*
			testDWR method를 정의할때 전달 파라미터로는  한개의 스트링만 전달하기로 했지만 실제 전달 파라미터는 text와 자바스크립트 함수 이름입니다.
			testDWR이 call된후 두째 파라미터로 전달된 자바스크립트이름을 통해 호출합니다.
			그리고 callback이 될 함수의 전달 파라미터( 여기에서는 data) 란 이름으로 자바 클래스에서 리턴한 결과값을 확인 할 수 있습니다.

			위와 같이 callback function의 이름을 정의해도 되지만 바로 선언 해도 됩니다.
			예) Tutorial.testDWR( text, function( returnData ) {
					alert( returnData ) ;
				});
			이렇게 작업해 주어도 상관이 없습니다.
		*/										
	}
	function callbackFunction( data ) {
		alert( data );
	}
		
</script>
</head>
<body>
	<input type="text" id="text1"/><br/>
	<button onclick="buttonClick()">DWR 버튼</button>
</body>
</html>


위와 같이 작업해 주시면 됩니다. 이전에도 말씀드렸듯이 util.js파일은 옵션사항이기 때문에 있어도 그만 없어도 그만입니다.( 주로 util성 method들이 추가 되어있습니다.)

이렇게 실행결과가 나오는 것을 확인 할 수 있습니다.



테스트용으로 구현한 testDWR 메소드는 parameter가 한개인 단순한 역할을 하는 데이터 입니다. 하지만 parameter가 여러개일 경우는 어떻게 해야 할까요? 이때 DWR은 JAVA class와 javascript jsonObject 간의 매핑을 지원해 줍니다.

다음엔 JsonObject를 통해 자바 클래스로 파라미터를 던지는 법을 알아 보겠습니다.

'Framework > DWR' 카테고리의 다른 글

Spring Annotation Driven 일때 DWR세팅  (0) 2011.08.24
DWR - DWR 실행시 Alert창으로 Session Error란 에러가 발생될때  (0) 2011.01.31
DWR - (3) DWR에서 자바 VO 객체 사용하여 파라미터 전달하기  (2) 2010.12.29
DWR - (1) DWR이란?  (0) 2010.12.29

티스토리툴바