overview of dwt
DESCRIPTION
Overview of DwtTRANSCRIPT
1Copyright All Right Reserved by shinproⓒ
Overview Of DWR JAVA 를 위한 쉬운 AJAX Open Source
12:45 Member Otthry
2Copyright All Right Reserved by shinproⓒ
INDEX POWERPOINT PROFESSIONAL SHINPRO
POWERPOINT PROFESSIONAL SHINPRO
POWERPOINT PROFESSIONAL SHINPRO
3
DWR 은 JavaScript 에서 Java Function 을 Java 에서 JavaScript Function 을 쉽게 호출 가능하도록
만들어 주는 RPC 라이브러리 (library) 이다 .
Copyright All Right Reserved by shinproⓒ
4Copyright All Right Reserved by shinproⓒ
DWR 의 특징
- 배치를 실행 (call batching)- Java 와 JavaScript 사이의 ( 바이너리 파일 업로딩 , 다운로딩을 포함한 ) 어떤 임의의 data structure 를 전송- 예외 처리 (exception handling)- 향상된 CSRF(Cross-Site Request Forgery) 방지- Spring 과 Guice 같은 Java 서버 사이드 기술들과의 통합성
5
다이어그램 1.JavaScript 이벤트를 통해 select list 의 컨텐츠 변경
Data=AjaxService.getOption()
6
다이어그램 2서버에서 실행되는 Java 코드로부터 클라이언트 단에서 보여지는 페이지내로 JavaScript 를 보내는 것을 허용
7Copyright All Right Reserved by shinproⓒ
DWR 의 구성1. 서버상에서 구동되는 Java Servlet - request 를 처리하
고 , 브라우져로 response 를 되돌려 보낸다 .
2. 브라우져상에서 구동되는 JavaScript - request 를 보내고 , 이를통해 웹페이지의 동적 업데이트가 가능하다 .
8Copyright All Right Reserved by shinproⓒ
DWR 은 Java class 에 기반한 동적으로 생성된 JavaScript 에 의해 동작한다 . 이 코드는 브라우져상에서 실행되는 것 처럼 느끼게 해준다 . 하지만 실제로는 코드를 서버에서 실행하고 DWR 은 Data 의 전송을 담당한다 .이 Java 로부터 JavaScript 로의 원격 함수 (remote function) 호출 방식은 DWR 사용자에게 RMI 와 SOAP 과 같은 전통적인 RPC 메카니즘과 같은 느낌을 주며 , 웹브라우져 플러그인 없이 웹을 통해 실행되는 이익을 준다 .
9Copyright All Right Reserved by shinproⓒ
DWR 테스트 환경 설정 및 구현
0. 프로젝트를 만든다 . 프로젝트 이름을 “ TestProject“ 로 예시 .
1. dwr.jar 를 다운 (http://directwebremoting.org/dwr/download)
2. 3.0.0 버전에 필요한 jar 파일 다운로드-- maven 의 경우 dependency 추가 (10page 참고 )3. 다운로드 받은 jar 파일 해당 프로젝트 WEB-INF/lib 에 복사4. 프로젝트 Refresh (Web App Libraries 라는 디렉토리 생성 학인 )
5. WEB-INF/web.xml 에 서블릿 추가 (11page 참고 )
6. WEB-INF/ 에 dwr.xml 이란 파일을 추가시키고 아래 내용을 입력한다 .
(12page 참고 )
7. 새로운 클래스를 추가- Package : dwrtest - Name : HelloName
8. HelloName.java 작성 (13page 참고 )
9. index.jsp 수정 (14page 참고 )
10Copyright All Right Reserved by shinproⓒ
<dependency> <groupId>org.directwebremoting</groupId> <artifactId>dwr</artifactId> <version>3.0.0-rc3-SNAPSHOT</version>
</dependency> <dependency>
<!-- Optional non-CLA components see DWR documentation for details --> <groupId>org.directwebremoting</groupId> <artifactId>dwr</artifactId> <classifier>noncla</classifier> <version>3.0.0-rc3-SNAPSHOT</version>
</dependency> <repositories>
<repository> <!-- Please consider setting up your own on-site repository proxy such as with Nexus and pointing the url element below at that instead --> <id>oss-sonatype-snapshots</id> <name>OSS Sonatype Snapshots Repository</name> <url>http://oss.sonatype.org/content/repositories/snapshots</url> <releases><enabled>false</enabled></releases> <snapshots><enabled>true</enabled></snapshots> </repository>
</repositories>
maven 의 경우 dependency 추가
11Copyright All Right Reserved by shinproⓒ
<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>
web.xml 에 서블릿 추가
12Copyright All Right Reserved by shinproⓒ
<!DOCTYPE dwr PUBLIC
"-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN"
"http://getahead.org/dwr/dwr20.dtd">
<dwr>
<allow>
<create creator="new" javascript="Hello">
<param name="class" value="dwrtest.HelloName"/>
</create>
</allow>
</dwr>
생성한 dwr.xml 파일에 내용 추가
13Copyright All Right Reserved by shinproⓒ
package dwrtest;public class HelloName {public String getHelloName(String name){if(name == null || name.trim().length() < 1){return "Hello~! John Doe.";}return "Hello~! " + name + ".";}}
HelloName.java
14Copyright All Right Reserved by shinproⓒ
<html><head><title>DWR Test</title>
<script type="text/javascript" src='http://localhost:8081/dwr/interface/Hello.js'></script><script type="text/javascript" src='http://localhost:8081/dwr/engine.js'></script><script type="text/javascript">
function update() {var name = document.getElementById("myname").value;Hello.getHelloName(name, loadinfo);}
function loadinfo(data) {document.getElementById("replytext").innerText = data;}
</script></head><body><p>Name:<input type="text" id="myname"/><input value="Send" type="button" onclick="update()"/><br/>Reply: <span id="replytext"></span></p></body></html>
Index.jsp
15
감사합니다 .
Copyright All Right Reserved by shinproⓒ